289 lines
11 KiB
TypeScript
289 lines
11 KiB
TypeScript
import {
|
|
Search,
|
|
GitBranch,
|
|
AlertTriangle,
|
|
Scale,
|
|
Layers,
|
|
BookOpen,
|
|
} from "lucide-react";
|
|
import LessonShell, {
|
|
ConceptCard,
|
|
ExampleCard,
|
|
TipCard,
|
|
PracticeFromDataset,
|
|
} from "../../../components/lessons/LessonShell";
|
|
import StudyDesignWidget from "../../../components/lessons/StudyDesignWidget";
|
|
import {
|
|
EVAL_STATS_EASY,
|
|
EVAL_STATS_MEDIUM,
|
|
} from "../../../data/math/evaluating-statistical-claims";
|
|
|
|
interface LessonProps {
|
|
onFinish?: () => void;
|
|
}
|
|
const SECTIONS = [
|
|
{ title: "Observational vs Experimental", icon: Search },
|
|
{ title: "Random Assignment", icon: GitBranch },
|
|
{ title: "Confounding Variables", icon: AlertTriangle },
|
|
{ title: "Causation vs Correlation", icon: Scale },
|
|
{ title: "Identifying Bias", icon: Layers },
|
|
{ title: "Practice & Quiz", icon: BookOpen },
|
|
];
|
|
|
|
export default function EvalStatisticalClaimsLesson({ onFinish }: LessonProps) {
|
|
return (
|
|
<LessonShell
|
|
title="Evaluating Statistical Claims"
|
|
sections={SECTIONS}
|
|
color="amber"
|
|
onFinish={onFinish}
|
|
>
|
|
{/* Section 1 */}
|
|
<div>
|
|
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
|
Observational vs Experimental Studies
|
|
</h2>
|
|
<ConceptCard color="amber">
|
|
<p className="text-slate-700 leading-relaxed">
|
|
The type of study determines what conclusions you can draw.
|
|
</p>
|
|
<div className="grid md:grid-cols-2 gap-4 mt-4">
|
|
<div className="bg-blue-50 border border-blue-200 rounded-xl p-4">
|
|
<p className="font-bold text-blue-800 mb-1">
|
|
Observational Study
|
|
</p>
|
|
<p className="text-sm text-slate-700">
|
|
Researcher <strong>observes</strong> without intervening. Can
|
|
show <strong>association</strong> only.
|
|
</p>
|
|
</div>
|
|
<div className="bg-emerald-50 border border-emerald-200 rounded-xl p-4">
|
|
<p className="font-bold text-emerald-800 mb-1">Experiment</p>
|
|
<p className="text-sm text-slate-700">
|
|
Researcher <strong>assigns treatments</strong>. Can show{" "}
|
|
<strong>causation</strong>.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</ConceptCard>
|
|
<ExampleCard title="Example: Spot the Difference" color="amber">
|
|
<p>
|
|
Observational: "Students who eat breakfast tend to have higher
|
|
GPAs."
|
|
</p>
|
|
<p className="text-slate-500">
|
|
Experiment: "Randomly assign half the students to eat breakfast for
|
|
a month, compare GPAs."
|
|
</p>
|
|
<p className="text-slate-500">
|
|
<strong className="text-amber-700">
|
|
Only the experiment can claim breakfast causes higher GPAs.
|
|
</strong>
|
|
</p>
|
|
</ExampleCard>
|
|
</div>
|
|
|
|
{/* Section 2 */}
|
|
<div>
|
|
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
|
Random Assignment
|
|
</h2>
|
|
<ConceptCard color="amber">
|
|
<p className="text-slate-700 leading-relaxed">
|
|
<strong>Random sampling</strong> determines generalizability.{" "}
|
|
<strong>Random assignment</strong> determines causation. These are
|
|
different concepts!
|
|
</p>
|
|
<div className="mt-4 overflow-x-auto">
|
|
<table className="w-full text-sm border-collapse">
|
|
<thead>
|
|
<tr className="bg-amber-100 text-amber-900">
|
|
<th className="border border-amber-300 px-3 py-2"></th>
|
|
<th className="border border-amber-300 px-3 py-2 text-center font-bold">
|
|
Random Assignment YES
|
|
</th>
|
|
<th className="border border-amber-300 px-3 py-2 text-center font-bold">
|
|
Random Assignment NO
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="text-slate-700">
|
|
<tr className="bg-white">
|
|
<td className="border border-slate-200 px-3 py-2 font-bold bg-amber-50">
|
|
Random Sampling YES
|
|
</td>
|
|
<td className="border border-slate-200 px-3 py-2 text-center bg-emerald-50 font-semibold text-emerald-800">
|
|
Generalize + Cause & Effect
|
|
</td>
|
|
<td className="border border-slate-200 px-3 py-2 text-center bg-blue-50 font-semibold text-blue-800">
|
|
Generalize only
|
|
</td>
|
|
</tr>
|
|
<tr className="bg-slate-50">
|
|
<td className="border border-slate-200 px-3 py-2 font-bold bg-amber-50">
|
|
Random Sampling NO
|
|
</td>
|
|
<td className="border border-slate-200 px-3 py-2 text-center bg-purple-50 font-semibold text-purple-800">
|
|
Cause & Effect (this group only)
|
|
</td>
|
|
<td className="border border-slate-200 px-3 py-2 text-center bg-rose-50 font-semibold text-rose-800">
|
|
Neither
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</ConceptCard>
|
|
<div className="mt-6">
|
|
<StudyDesignWidget />
|
|
</div>
|
|
<div className="mt-4">
|
|
<TipCard type="remember">
|
|
<p className="text-slate-700">
|
|
Random <strong>sampling</strong> → can generalize to population.
|
|
Random <strong>assignment</strong> → can claim cause-and-effect.
|
|
These are independent concepts.
|
|
</p>
|
|
</TipCard>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Section 3 */}
|
|
<div>
|
|
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
|
Confounding Variables
|
|
</h2>
|
|
<ConceptCard color="amber">
|
|
<p className="text-slate-700 leading-relaxed">
|
|
A <strong>confounding variable</strong> is related to BOTH the
|
|
explanatory and response variables, making it impossible to
|
|
determine the true cause of an observed relationship.
|
|
</p>
|
|
</ConceptCard>
|
|
<ExampleCard title="Example: Ice Cream & Drowning" color="amber">
|
|
<p>Ice cream sales and drowning rates both increase in summer.</p>
|
|
<p className="text-slate-500">
|
|
Confounding variable:{" "}
|
|
<strong className="text-amber-700">temperature / season</strong>
|
|
</p>
|
|
<p className="text-slate-500">
|
|
Hot weather causes both — ice cream doesn't cause drowning!
|
|
</p>
|
|
</ExampleCard>
|
|
<div className="mt-4">
|
|
<ExampleCard title="Example: Coffee & Exercise" color="amber">
|
|
<p>Study: coffee drinkers exercise more.</p>
|
|
<p className="text-slate-500">
|
|
Confounding: Maybe more energetic people both drink coffee AND
|
|
exercise.
|
|
</p>
|
|
<p className="text-slate-500">
|
|
<strong className="text-amber-700">
|
|
Can't conclude coffee causes more exercise.
|
|
</strong>
|
|
</p>
|
|
</ExampleCard>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Section 4 */}
|
|
<div>
|
|
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
|
Causation vs Correlation
|
|
</h2>
|
|
<ConceptCard color="amber">
|
|
<p className="text-slate-700 leading-relaxed">
|
|
<strong>Correlation</strong> means two variables move together.{" "}
|
|
<strong>Causation</strong> means one actually causes the other.
|
|
Correlation alone does NOT prove causation.
|
|
</p>
|
|
<div className="mt-4 bg-amber-50 border border-amber-200 rounded-xl p-4">
|
|
<p className="font-bold text-amber-900 text-sm mb-2">
|
|
Three Requirements for Causation
|
|
</p>
|
|
<div className="space-y-1 text-sm text-slate-700">
|
|
<p>1. Random assignment to treatment/control groups</p>
|
|
<p>2. Controlled experiment (same conditions except treatment)</p>
|
|
<p>3. Confounding variables ruled out</p>
|
|
</div>
|
|
</div>
|
|
</ConceptCard>
|
|
<TipCard type="warning">
|
|
<p className="text-slate-700">
|
|
The SAT will try to trick you with answer choices that claim
|
|
causation from observational studies. Always check: was there random
|
|
assignment?
|
|
</p>
|
|
</TipCard>
|
|
</div>
|
|
|
|
{/* Section 5 */}
|
|
<div>
|
|
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
|
Identifying Bias
|
|
</h2>
|
|
<ConceptCard color="amber">
|
|
<p className="text-slate-700 leading-relaxed">
|
|
Bias systematically distorts results. Know these types:
|
|
</p>
|
|
<div className="grid md:grid-cols-2 gap-3 mt-4">
|
|
<div className="bg-white/60 rounded-lg p-3 border border-amber-100">
|
|
<p className="font-bold text-amber-800 text-sm mb-1">
|
|
Selection Bias
|
|
</p>
|
|
<p className="text-xs text-slate-600">
|
|
Non-random sample excludes or over-represents groups
|
|
</p>
|
|
</div>
|
|
<div className="bg-white/60 rounded-lg p-3 border border-amber-100">
|
|
<p className="font-bold text-amber-800 text-sm mb-1">
|
|
Response Bias
|
|
</p>
|
|
<p className="text-xs text-slate-600">
|
|
Leading questions or social desirability affects answers
|
|
</p>
|
|
</div>
|
|
<div className="bg-white/60 rounded-lg p-3 border border-amber-100">
|
|
<p className="font-bold text-amber-800 text-sm mb-1">
|
|
Nonresponse Bias
|
|
</p>
|
|
<p className="text-xs text-slate-600">
|
|
People who don't respond differ from those who do
|
|
</p>
|
|
</div>
|
|
<div className="bg-white/60 rounded-lg p-3 border border-amber-100">
|
|
<p className="font-bold text-amber-800 text-sm mb-1">
|
|
Voluntary Response
|
|
</p>
|
|
<p className="text-xs text-slate-600">
|
|
Only people with strong opinions participate
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</ConceptCard>
|
|
<ExampleCard title="Example: Leading Question" color="amber">
|
|
<p>"Do you agree that the new park is a waste of money?"</p>
|
|
<p className="text-slate-500">
|
|
<strong className="text-amber-700">
|
|
Response bias — the question pushes toward "agree"
|
|
</strong>
|
|
</p>
|
|
</ExampleCard>
|
|
</div>
|
|
|
|
{/* Section 6 */}
|
|
<div>
|
|
<h2 className="text-3xl font-extrabold text-slate-900 mb-6">
|
|
Practice & Quiz
|
|
</h2>
|
|
{EVAL_STATS_EASY.slice(0, 2).map((q) => (
|
|
<PracticeFromDataset key={q.id} question={q} color="amber" />
|
|
))}
|
|
{EVAL_STATS_MEDIUM.slice(0, 1).map((q) => (
|
|
<PracticeFromDataset key={q.id} question={q} color="amber" />
|
|
))}
|
|
</div>
|
|
</LessonShell>
|
|
);
|
|
}
|