/* statlab.jsx — StatTutor: the statistics lab (three modules). Built on window.BenchKit
(loaded first), so this file is just the FIGURES + their field computations. The
StatFig dispatcher picks the sub-figure from spec.module; each figure's report(...)
emits EXACTLY the fields server/benches/statistics.js declares for that module. */
(function () {
const { useState, useMemo, useEffect, useRef } = React;
const K = window.BenchKit, C = K.C, SVG_BG = K.SVG_BG, btn = K.btn, fmt = K.fmt, clamp = K.clamp;
const TaskStrip = K.TaskStrip, StatMeter = K.StatMeter, T = K.T;
/* math */
const sum = (a) => a.reduce((x, y) => x + y, 0);
const mean = (a) => (a.length ? sum(a) / a.length : 0);
function quantile(s, p) { const n = s.length; if (!n) return NaN; if (n === 1) return s[0]; const h = (n - 1) * p, lo = Math.floor(h), f = h - lo; return s[lo] + (s[Math.min(lo + 1, n - 1)] - s[lo]) * f; }
function describe(a) {
const s = [...a].sort((x, y) => x - y), n = a.length, m = mean(a);
const md = quantile(s, 0.5), q1 = quantile(s, 0.25), q3 = quantile(s, 0.75), iqr = q3 - q1;
const sd = n > 1 ? Math.sqrt(sum(a.map((x) => (x - m) ** 2)) / (n - 1)) : 0;
const loF = q1 - 1.5 * iqr, hiF = q3 + 1.5 * iqr;
const outliers = s.filter((x) => x < loF || x > hiF);
const inb = s.filter((x) => x >= loF && x <= hiF);
const wLo = inb.length ? Math.min(...inb) : s[0], wHi = inb.length ? Math.max(...inb) : s[n - 1];
return { n, mean: m, median: md, q1, q3, iqr, sd, min: s[0], max: s[n - 1], outliers, wLo, wHi };
}
function erf(x) { const t = 1 / (1 + 0.3275911 * Math.abs(x)); const y = 1 - (((((1.061405429 * t - 1.453152027) * t) + 1.421413741) * t - 0.284496736) * t + 0.254829592) * t * Math.exp(-x * x); return x >= 0 ? y : -y; }
const npdf = (x, mu, s) => Math.exp(-0.5 * ((x - mu) / s) ** 2) / (s * Math.sqrt(2 * Math.PI));
const ncdf = (x, mu, s) => 0.5 * (1 + erf((x - mu) / (s * Math.SQRT2)));
function invNorm(p) {
const a = [-3.969683028665376e1, 2.209460984245205e2, -2.759285104469687e2, 1.38357751867269e2, -3.066479806614716e1, 2.506628277459239];
const b = [-5.447609879822406e1, 1.615858368580409e2, -1.556989798598866e2, 6.680131188771972e1, -1.328068155288572e1];
const c = [-7.784894002430293e-3, -3.223964580411365e-1, -2.400758277161838, -2.549732539343734, 4.374664141464968, 2.938163982698783];
const d = [7.784695709041462e-3, 3.224671290700398e-1, 2.445134137142996, 3.754408661907416];
const pl = 0.02425, ph = 1 - pl; let q, r;
if (p < pl) { q = Math.sqrt(-2 * Math.log(p)); return (((((c[0] * q + c[1]) * q + c[2]) * q + c[3]) * q + c[4]) * q + c[5]) / ((((d[0] * q + d[1]) * q + d[2]) * q + d[3]) * q + 1); }
if (p <= ph) { q = p - 0.5; r = q * q; return (((((a[0] * r + a[1]) * r + a[2]) * r + a[3]) * r + a[4]) * r + a[5]) * q / (((((b[0] * r + b[1]) * r + b[2]) * r + b[3]) * r + b[4]) * r + 1); }
q = Math.sqrt(-2 * Math.log(1 - p)); return -(((((c[0] * q + c[1]) * q + c[2]) * q + c[3]) * q + c[4]) * q + c[5]) / ((((d[0] * q + d[1]) * q + d[2]) * q + d[3]) * q + 1);
}
let _spare = null;
function randn() { if (_spare !== null) { const v = _spare; _spare = null; return v; } const u = Math.random() || 1e-9, w = Math.random(); const r = Math.sqrt(-2 * Math.log(u)); _spare = r * Math.sin(2 * Math.PI * w); return r * Math.cos(2 * Math.PI * w); }
const VBW = 600;
function clientToVal(svg, clientX, x0, x1, vmin, vmax) { const rect = svg.getBoundingClientRect(); const sx = (clientX - rect.left) / rect.width * VBW; const t = (sx - x0) / (x1 - x0); return clamp(vmin + t * (vmax - vmin), vmin, vmax); }
/* ===================== Module 1: Distribution ===================== */
function DistributionFig({ task, setTask, tasks, report, event, done }) {
const [vals, setVals] = useState([20, 28, 33, 38, 42, 45, 50, 56, 64]);
const [drag, setDrag] = useState(null);
const svgRef = useRef(null), dragV = useRef(0);
const X0 = 55, X1 = 565, AY = 200, VMIN = 0, VMAX = 100;
const px = (v) => X0 + (v - VMIN) / (VMAX - VMIN) * (X1 - X0);
const st = useMemo(() => describe(vals), [vals]);
useEffect(() => { report({ mean: st.mean, median: st.median, sd: st.sd, iqr: st.iqr, q1: st.q1, q3: st.q3, min: st.min, max: st.max, n: st.n, skew: st.mean - st.median, outliers: st.outliers.length, hasOutlier: st.outliers.length > 0 }); }, [vals]); // eslint-disable-line
useEffect(() => {
if (drag == null) return;
const move = (e) => { const v = Math.round(clientToVal(svgRef.current, e.clientX, X0, X1, VMIN, VMAX)); dragV.current = v; setVals((a) => a.map((x, i) => (i === drag ? v : x))); };
const up = () => { event("adjusted", "Moved a data point", { response: `${dragV.current}` }, C.blue); setDrag(null); };
window.addEventListener("pointermove", move); window.addEventListener("pointerup", up);
return () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); };
}, [drag]); // eslint-disable-line
const stacks = {}; const dots = vals.map((v, i) => { const b = Math.round(v / 4); stacks[b] = (stacks[b] || 0) + 1; return { v, i, k: stacks[b] - 1 }; });
const bins = 10, bw = (VMAX - VMIN) / bins; const counts = Array(bins).fill(0); vals.forEach((v) => counts[Math.min(bins - 1, Math.floor(v / bw))]++); const mc = Math.max(1, ...counts);
const t = tasks.find((x) => x.id === task) || tasks[0];
return (
<>
n = {st.n} · {st.mean - st.median > 1.5 ? "right-skew →" : st.median - st.mean > 1.5 ? "← left-skew" : "≈ symmetric"}
);
}
/* ===================== Module 2: Sampling & CLT ===================== */
const POPS = { normal: { name: "Normal", mu: 50, sigma: 15, draw: () => clamp(randn() * 15 + 50, 0, 100) }, uniform: { name: "Uniform", mu: 50, sigma: 17.32, draw: () => 20 + Math.random() * 60 }, skew: { name: "Right-skew", mu: 40, sigma: 20, draw: () => clamp(20 + -Math.log(1 - Math.random()) * 20, 0, 120) }, bimodal: { name: "Bimodal", mu: 50, sigma: 21.54, draw: () => (Math.random() < 0.5 ? randn() * 8 + 30 : randn() * 8 + 70) } };
function SamplingFig({ task, setTask, tasks, report, event, done }) {
const [pop, setPop] = useState("skew");
const [n, setN] = useState(5);
const [means, setMeans] = useState([]);
const seDropped = useRef(false), prevN = useRef(5);
const P = POPS[pop];
const theoSE = P.sigma / Math.sqrt(n);
const obsMean = means.length ? mean(means) : NaN;
const obsSE = means.length > 1 ? Math.sqrt(sum(means.map((x) => (x - obsMean) ** 2)) / (means.length - 1)) : NaN;
useEffect(() => { if (n > prevN.current) seDropped.current = true; prevN.current = n; }, [n]);
useEffect(() => { report({ count: means.length, n, theoSE, obsSE: isFinite(obsSE) ? obsSE : 0, obsMean: isFinite(obsMean) ? obsMean : 0, seDropped: seDropped.current, pop }); }, [means, n, pop]); // eslint-disable-line
function drawK(k) { const nm = []; for (let j = 0; j < k; j++) { const s = Array.from({ length: n }, P.draw); nm.push(mean(s)); } setMeans((m) => [...m, ...nm]); event("sampled", `Drew ${k} sample${k > 1 ? "s" : ""} (n=${n})`, { response: `total ${means.length + k}` }, C.blue); }
function changePop(p) { setPop(p); setMeans([]); seDropped.current = false; event("selected", `Population: ${POPS[p].name}`, {}, C.amber); }
const DMIN = P.mu - 42, DMAX = P.mu + 42, BINS = 34, bw = (DMAX - DMIN) / BINS;
const counts = Array(BINS).fill(0); means.forEach((m) => { const b = Math.floor((m - DMIN) / bw); if (b >= 0 && b < BINS) counts[b]++; });
const X0 = 50, X1 = 565, BASE = 200, TOP = 40; const pxX = (v) => X0 + (v - DMIN) / (DMAX - DMIN) * (X1 - X0);
const maxCount = Math.max(1, ...counts);
const overlay = []; for (let i = 0; i <= 120; i++) { const x = DMIN + (i / 120) * (DMAX - DMIN); const dens = npdf(x, P.mu, theoSE) * means.length * bw; overlay.push([pxX(x), BASE - (dens / maxCount) * (BASE - TOP)]); }
const t = tasks.find((x) => x.id === task) || tasks[0];
return (
<>
{Object.keys(POPS).map((p) => )}
sample size n
{ setN(parseInt(e.target.value)); setMeans([]); }} style={{ flex: 1 }} />
{n}
);
}
/* ===================== Module 3: Hypothesis Testing ===================== */
function HypothesisFig({ task, setTask, tasks, report, event, done }) {
const [delta, setDelta] = useState(0.5), [n, setN] = useState(16), [alpha, setAlpha] = useState(0.05), [obs, setObs] = useState(0.2);
const [drag, setDrag] = useState(false); const svgRef = useRef(null);
const prevA = useRef(0.05), prevB = useRef(0), sawTrade = useRef(false), prevD = useRef(0.5), prevPow = useRef(0), sawEff = useRef(false);
const SE = 1 / Math.sqrt(n); const zc = invNorm(1 - alpha); const xcrit = zc * SE;
const power = 1 - ncdf(xcrit, delta, SE); const beta = 1 - power; const pvalue = 1 - ncdf(obs, 0, SE);
useEffect(() => { if (alpha < prevA.current && beta > prevB.current + 0.005) sawTrade.current = true; prevA.current = alpha; prevB.current = beta; }, [alpha, beta]);
useEffect(() => { if (delta > prevD.current && power > prevPow.current + 0.005) sawEff.current = true; prevD.current = delta; prevPow.current = power; }, [delta, power]);
useEffect(() => { report({ power, beta, alpha, pvalue, SE, delta, n, rejected: pvalue < alpha, sawTradeoff: sawTrade.current, sawEffect: sawEff.current }); }, [delta, n, alpha, obs]); // eslint-disable-line
const XMIN = -1.2, XMAX = 2.8, X0 = 50, X1 = 565, BASE = 230, TOP = 30; const pxX = (v) => X0 + (v - XMIN) / (XMAX - XMIN) * (X1 - X0);
const N = 200; const xs = Array.from({ length: N + 1 }, (_, i) => XMIN + (i / N) * (XMAX - XMIN));
let maxD = 0; xs.forEach((x) => { maxD = Math.max(maxD, npdf(x, 0, SE), npdf(x, delta, SE)); });
const sy = (BASE - TOP) / maxD * 0.92; const pxY = (d) => BASE - d * sy;
const curve = (mu) => xs.map((x) => `${pxX(x)},${pxY(npdf(x, mu, SE))}`).join(" ");
const area = (mu, a, b) => { const pts = xs.filter((x) => x >= a && x <= b).map((x) => `${pxX(x)},${pxY(npdf(x, mu, SE))}`); if (!pts.length) return ""; return `M${pxX(Math.max(a, XMIN))},${BASE} L${pts.join(" L")} L${pxX(Math.min(b, XMAX))},${BASE} Z`; };
useEffect(() => {
if (!drag) return;
const move = (e) => setObs(Math.round(clientToVal(svgRef.current, e.clientX, X0, X1, XMIN, XMAX) * 100) / 100);
const up = () => { setDrag(false); event("adjusted", "Set observed mean", { response: `obs ${fmt(obs, 2)}, p ${fmt(pvalue, 3)}` }, C.blue); };
window.addEventListener("pointermove", move); window.addEventListener("pointerup", up);
return () => { window.removeEventListener("pointermove", move); window.removeEventListener("pointerup", up); };
}, [drag]); // eslint-disable-line
const t = tasks.find((x) => x.id === task) || tasks[0];
const slide = (label, val, setter, min, max, step, color, onUp) => (
{label}
setter(parseFloat(e.target.value))} onPointerUp={onUp} style={{ flex: 1 }} />
{val}
);
return (
<>
{slide("true effect δ", delta, setDelta, 0, 1.5, 0.05, C.ink, () => event("adjusted", `Set effect δ=${delta}`, { response: `power ${fmt(power, 2)}` }, C.amber))}
{slide("sample size n", n, setN, 2, 200, 1, C.amber, () => event("adjusted", `Set n=${n}`, { response: `SE ${fmt(SE, 2)}, power ${fmt(power, 2)}` }, C.amber))}
{slide("α", alpha, setAlpha, 0.001, 0.2, 0.001, C.crimson, () => event("adjusted", `Set α=${alpha}`, { response: `β ${fmt(beta, 2)}` }, C.amber))}
{pvalue < alpha ? `p = ${fmt(pvalue, 3)} < α = ${alpha} → reject H₀.` : `p = ${fmt(pvalue, 3)} ≥ α = ${alpha} → fail to reject H₀.`} Drag the ▲ to change the observed mean.
);
}
const FIGS = { distribution: DistributionFig, sampling: SamplingFig, hypothesis: HypothesisFig };
const MODULE_LABEL = { distribution: "Distribution Builder", sampling: "Sampling & the CLT", hypothesis: "Hypothesis Testing" };
/* StatFig — picks the sub-figure from spec.module, then delegates the shared props. */
function StatFig(props) {
const module = FIGS[props.spec && props.spec.module] ? props.spec.module : "distribution";
const Fig = FIGS[module];
return ;
}
window.StatTutor = K.makeTutor(StatFig, {
benchId: "statistics",
moduleLabel: (spec) => MODULE_LABEL[spec && spec.module] || "Statistics figures",
});
})();