[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":29,"_34":12,"_35":12,"_36":12,"_37":12,"_38":-5,"_39":40},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","690ea2181c4081919ceb3e74cc34b7c4","versionInt","title","Lady Tasting Tea — Interactive Exact Test (react)","type","code/react","content","import React, { useMemo, useState } from \"react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Slider } from \"@/components/ui/slider\";\nimport { Button } from \"@/components/ui/button\";\nimport { Switch } from \"@/components/ui/switch\";\nimport { Input } from \"@/components/ui/input\";\nimport {\n BarChart,\n Bar,\n XAxis,\n YAxis,\n Tooltip,\n ResponsiveContainer,\n ReferenceLine,\n LabelList,\n LineChart,\n Line,\n CartesianGrid,\n} from \"recharts\";\n\n// ---------- math helpers ----------\nfunction factorial(n) {\n let res = 1;\n for (let i = 2; i <= n; i++) res *= i;\n return res;\n}\n\nfunction choose(n, k) {\n if (k < 0 || k > n) return 0;\n if (k === 0 || k === n) return 1;\n // symmetry\n if (k > n - k) k = n - k;\n let num = 1;\n let den = 1;\n for (let i = 1; i <= k; i++) {\n num *= (n - (k - i));\n den *= i;\n }\n return num / den;\n}\n\nfunction hypergeoPMF(x, N, K, n) {\n // P(X=x) = C(K,x) C(N-K, n-x) / C(N, n)\n return (choose(K, x) * choose(N - K, n - x)) / choose(N, n);\n}\n\nfunction formatPct(p) {\n return (p * 100).toFixed(p < 0.001 ? 4 : 2) + \"%\";\n}\n\n// ---------- UI helpers ----------\nfunction Cup({\n kind, // \"milk\" | \"tea\"\n selected, // guessed milk?\n locked, // whether we reached the quota\n onToggle,\n}) {\n const base =\n \"relative flex items-center justify-center w-12 h-12 rounded-2xl shadow-sm border m-1 cursor-pointer transition-transform select-none\";\n const flavor = kind === \"milk\" ? \"bg-amber-50 border-amber-300\" : \"bg-emerald-50 border-emerald-300\";\n const chosen = selected ? \"ring-2 ring-indigo-400 scale-105\" : \"hover:scale-105\";\n const text = \"text-xs text-slate-700 font-medium\";\n const emoji = kind === \"milk\" ? \"🥛\" : \"🍵\";\n const badge = selected ? \"MILK\" : \"TEA\";\n return (\n \n

{badge}

{emoji}

{kind === \"milk\" ? \"milk‑first\" : \"tea‑first\"}

\n \n );\n}\n\nexport default function LadyTastingTea() {\n const [N, setN] = useState(8); // total cups, must be even\n const half = N / 2;\n\n // guessedMilk: a Set of indices that the taster labeled as milk-first\n // We'll index cups 0..N-1, where 0..half-1 are TRUE milk-first, half..N-1 are TRUE tea-first.\n const [guessedMilk, setGuessedMilk] = useState(new Set());\n\n // constrain to exactly half selections\n const selectedCount = guessedMilk.size;\n const quotaReached = selectedCount >= half;\n\n const resetGuesses = () => setGuessedMilk(new Set());\n\n const autoGuess = () => {\n // pick exactly half cups uniformly at random\n const picks = new Set();\n while (picks.size < half) {\n picks.add(Math.floor(Math.random() * N));\n }\n setGuessedMilk(picks);\n };\n\n const setClassic = () => {\n setN(8);\n setGuessedMilk(new Set());\n };\n\n const toggleCup = (idx) => {\n const next = new Set(guessedMilk);\n if (next.has(idx)) {\n next.delete(idx);\n } else {\n if (!quotaReached) next.add(idx);\n }\n setGuessedMilk(next);\n };\n\n // compute X = number of true milk contained in guessedMilk\n const X = useMemo(() => {\n let x = 0;\n guessedMilk.forEach((i) => {\n if (i < half) x += 1; // true milk region\n });\n return x;\n }, [guessedMilk, half]);\n\n // total correct (exact test result) = 2X\n const totalCorrect = 2 * X;\n\n // Probability distribution for X ~ Hypergeometric(N, K=half, n=half)\n const pmfData = useMemo(() => {\n const out = [];\n for (let x = 0; x <= half; x++) {\n const p = hypergeoPMF(x, N, half, half);\n out.push({ x, k: 2 * x, p });\n }\n return out;\n }, [N]);\n\n const tailP = useMemo(() => {\n // P(2X >= totalCorrect) = P(X >= totalCorrect/2)\n const cutoff = totalCorrect / 2;\n return pmfData.filter((d) => d.x >= cutoff).reduce((a, b) => a + b.p, 0);\n }, [pmfData, totalCorrect]);\n\n const cdfData = useMemo(() => {\n let running = 0;\n // build right-tail CDF for k=0..N by evens\n const arr = [];\n for (let x = 0; x <= half; x++) {\n // compute tail from x upward\n // to plot once, we accumulate from the end then reverse for efficiency\n }\n // Easier: precompute from top down\n let tail = 0;\n const right = [];\n for (let x = half; x >= 0; x--) {\n const p = hypergeoPMF(x, N, half, half);\n tail += p;\n right.push({ x, k: 2 * x, tail });\n }\n right.reverse();\n return right;\n }, [N]);\n\n const maxProb = Math.max(...pmfData.map((d) => d.p));\n\n const correctBreakdown = `${X} correct milk IDs + ${X} correct tea IDs = ${totalCorrect} / ${N} total correct`;\n\n return (\n

The Lady Tasting Tea — Interactive Exact Test

\n A classic experiment (Fisher, 1935): given {N} cups with {half} prepared milk‑first and {half} tea‑first, the taster labels exactly {half} cups as \"milk‑first\" and the rest as \"tea‑first\". Under the null hypothesis of no ability, the count of correctly identified milk‑first cups, X,\n follows a Hypergeometric distribution X ~ Hypergeo(N={N}, K={half}, n={half}). The total number of correct identifications is 2X.\n

\n\n {/* Controls */}\n \n \n

Number of cups (even)

\n {\n const nextN = v[0];\n setN(nextN);\n setGuessedMilk(new Set());\n }}\n />\n {\n const val = Math.max(4, Math.min(40, Math.round(Number(e.target.value))));\n const even = val % 2 === 0 ? val : val + 1;\n setN(even);\n setGuessedMilk(new Set());\n }}\n />\n

Tip: set 8 cups for Fisher's original example (4 milk‑first, 4 tea‑first).

\n\n

\n \n \n \n

\n\n

Your outcome

{correctBreakdown}

Right‑tail p‑value: {formatPct(tailP)} (chance of ≥ this result if guessing)

\n \n \n\n {/* Cups grid */}\n \n \n

Click cups to label them as guessed MILK. You must select exactly {half} as milk; the rest are tea.

\n {/* Row labels */}\n

True: milk‑first

\n {Array.from({ length: half }).map((_, i) => (\n toggleCup(i)}\n />\n ))}\n

True: tea‑first

\n {Array.from({ length: half }).map((_, j) => {\n const idx = half + j;\n return (\n toggleCup(idx)}\n />\n );\n })}\n

Correct cups are those where the badge matches the true row.

\n \n \n\n {/* Charts */}\n

\n \n \n

Null distribution: P(total correct = k) for k ∈ {\"{\"}0,2,...,{N}{\"}\"}

Here k = 2X with X ~ Hypergeo(N={N}, K={half}, n={half}). Bars to the right of your result are shaded.

\n \n ({ k: d.k, p: d.p, highlight: d.k >= totalCorrect }))}>\n \n `${v}`}/>\n `${(v*100).toFixed(0)}%`}/>\n [formatPct(value), \"Probability\"]} labelFormatter={(lab)=>`k = ${lab}`}/>\n \n \n (d.p > maxProb*0.12 ? formatPct(d.p) : \"\")} position=\"top\" formatter={(v)=>v}/>\n \n \n \n

\n \n \n\n \n \n

Right‑tail probability: P(total correct ≥ k)

This is the p‑value curve under the null (no ability). Your observed k is marked.

\n \n \n \n `${v}`}/>\n `${(v*100).toFixed(0)}%`}/>\n [formatPct(value), \"Right‑tail\"]} labelFormatter={(lab)=>`k = ${lab}`}/>\n \n \n \n \n

p‑value for your outcome (k = {totalCorrect}): {formatPct(tailP)}

\n \n \n

\n\n \n \n

How to read this

\n Under the null hypothesis of no tasting ability, each way of picking {half} cups as milk‑first is equally likely. The number of correctly identified milk‑first cups, X, follows a Hypergeometric distribution.\n
\n Because the taster chooses exactly {half} as milk and {half} as tea, the total number correct is 2X.\n
\n The p‑value shown is the probability of getting at least this many correct by pure chance (area to the right of your vertical line).\n
\n In Fisher's 8‑cup example, getting all 8 right has p = 1 / C(8,4) ≈ {formatPct(1/choose(8,4))}; getting 6 or more right has p = [C(4,3)C(4,1)+C(4,4)C(4,0)] / C(8,4) ≈ {formatPct((choose(4,3)*choose(4,1)+choose(4,4)*choose(4,0))/choose(8,4))}.\n

\n \n \n\n

\n Built with exact combinatorics (no simulation). Charts powered by Recharts. Adjust N to explore how evidence grows with more cups.\n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_41":42,"_43":44},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","manageRootRouteStylesheet","mobileWebHandoffEnabled","promoteCss","disableSSR","stripModulepreloadImports","paidCampaignAppRedirect","statsigGateEvaluationsPromise",["P",40],"traceId","3388266753840259566","traceTime",1789574013368]