@classytic/labs 0.2.0 → 0.3.0

package/dist/kit/pedagogy.mjs

@@ -1,8 +1,12 @@
 'use client';
 
+import { AssessedChoiceGroup, StatusPill, choiceResponseLayout } from "./controls.mjs";
+import { Celebrate } from "./celebrate.mjs";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLearner } from "@classytic/stage";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
 
 //#region src/kit/pedagogy.tsx
 /**
@@ -26,11 +30,17 @@ import { useLearner } from "@classytic/stage";
 * engine; imports only `useLearner` from @classytic/stage.
 */
 /** Report completion once, the first time `solved` becomes true. */
-function useCheckpoint({ solved, activity, score, hintsUsed = 0, hintPenalty = .1, response }) {
+function useCheckpoint({ solved, activity, score, hintsUsed = 0, hintPenalty = .1, response, attemptKey = 0 }) {
 	const learner = useLearner();
 	const done = useRef(false);
+	const attempt = useRef(attemptKey);
 	const [reported, setReported] = useState(false);
 	useEffect(() => {
+		if (attempt.current !== attemptKey) {
+			attempt.current = attemptKey;
+			done.current = false;
+			setReported(false);
+		}
 		if (solved && !done.current) {
 			done.current = true;
 			setReported(true);
@@ -50,10 +60,6 @@ function useCheckpoint({ solved, activity, score, hintsUsed = 0, hintPenalty = .
 				}
 			});
 		}
-		if (!solved && done.current) {
-			done.current = false;
-			setReported(false);
-		}
 	}, [
 		solved,
 		activity,
@@ -62,7 +68,8 @@ function useCheckpoint({ solved, activity, score, hintsUsed = 0, hintPenalty = .
 		score?.raw,
 		score?.max,
 		response,
-		learner
+		learner,
+		attemptKey
 	]);
 	return {
 		solved,
@@ -106,8 +113,10 @@ function HintLadder({ hints }) {
 				" ",
 				h
 			]
-		}, i)), hints.hasMore && /* @__PURE__ */ jsx("button", {
+		}, i)), hints.hasMore && /* @__PURE__ */ jsx(Button, {
 			type: "button",
+			size: "sm",
+			variant: "outline",
 			className: "lab-hint-btn",
 			onClick: hints.reveal,
 			children: hints.count === 0 ? "Need a hint?" : "Another hint"
@@ -117,19 +126,30 @@ function HintLadder({ hints }) {
 /** State for a small set of predict/classify questions. */
 function useChallenge(questions) {
 	const [picks, setPicks] = useState({});
+	const [attempts, setAttempts] = useState({});
 	const total = questions.length;
 	const solvedCount = questions.filter((q) => picks[q.id] === q.answer).length;
 	return {
 		picks,
-		pick: (id, value) => setPicks((p) => ({
-			...p,
-			[id]: value
-		})),
+		attempts,
+		pick: (id, value) => {
+			setPicks((p) => ({
+				...p,
+				[id]: value
+			}));
+			setAttempts((a) => ({
+				...a,
+				[id]: (a[id] ?? 0) + 1
+			}));
+		},
 		allCorrect: total > 0 && solvedCount === total,
 		answeredAll: questions.every((q) => picks[q.id] != null),
 		solvedCount,
 		total,
-		reset: () => setPicks({})
+		reset: () => {
+			setPicks({});
+			setAttempts({});
+		}
 	};
 }
 /** Renders the challenge questions as choice chips with per-question feedback. */
@@ -141,7 +161,6 @@ function ChallengeCard({ questions, state, title = "Predict first" }) {
 			children: [title, state.total > 1 && /* @__PURE__ */ jsxs("span", {
 				className: "lab-challenge-count",
 				children: [
-					" · ",
 					state.solvedCount,
 					"/",
 					state.total
@@ -151,10 +170,11 @@ function ChallengeCard({ questions, state, title = "Predict first" }) {
 			const picked = state.picks[q.id];
 			const answered = picked != null;
 			const correct = picked === q.answer;
-			return /* @__PURE__ */ jsxs("div", {
+			return /* @__PURE__ */ jsxs("fieldset", {
 				className: "lab-challenge-q",
+				"data-response-layout": choiceResponseLayout(q.choices),
 				children: [
-					/* @__PURE__ */ jsxs("span", {
+					/* @__PURE__ */ jsxs("legend", {
 						className: "lab-challenge-prompt",
 						children: [questions.length > 1 && /* @__PURE__ */ jsx("span", {
 							className: "lab-challenge-num",
@@ -162,34 +182,36 @@ function ChallengeCard({ questions, state, title = "Predict first" }) {
 							children: i + 1
 						}), /* @__PURE__ */ jsx("span", { children: q.prompt })]
 					}),
-					/* @__PURE__ */ jsx("div", {
-						className: "lab-choices",
-						role: "group",
-						"aria-label": typeof q.prompt === "string" ? q.prompt : "choices",
-						children: q.choices.map((c) => {
+					/* @__PURE__ */ jsx(AssessedChoiceGroup, {
+						value: picked,
+						ariaLabel: typeof q.prompt === "string" ? q.prompt : "Answer choices",
+						onChange: (value) => state.pick(q.id, value),
+						options: q.choices.map((c) => {
 							const isPicked = picked === c.value;
-							const tone = !answered ? void 0 : c.value === q.answer ? "correct" : isPicked ? "wrong" : void 0;
-							return /* @__PURE__ */ jsx("button", {
-								type: "button",
-								className: "lab-choice",
-								"data-picked": isPicked || void 0,
-								"data-tone": tone,
-								"aria-pressed": isPicked,
-								onClick: () => state.pick(q.id, c.value),
-								children: c.label
-							}, c.value);
+							const tone = !answered ? void 0 : correct && c.value === q.answer ? "correct" : isPicked ? "wrong" : void 0;
+							return {
+								value: c.value,
+								label: c.label,
+								tone
+							};
 						})
 					}),
 					answered && (correct ? /* @__PURE__ */ jsxs("span", {
-						className: "lab-pill",
-						"data-state": "ok",
-						role: "status",
-						children: ["✓ ", q.explain ?? "Correct"]
+						className: "lab-celebrate w-full",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "lab-explain lab-pop w-full",
+							role: "status",
+							children: [
+								/* @__PURE__ */ jsx("b", { children: "✓ Correct." }),
+								" ",
+								q.explain
+							]
+						}), /* @__PURE__ */ jsx(Celebrate, { play: true })]
 					}) : /* @__PURE__ */ jsx("span", {
-						className: "lab-pill",
+						className: "lab-explain",
 						"data-state": "no",
-						role: "status",
-						children: "Not yet, try again"
+						role: "alert",
+						children: q.choices.find((choice) => choice.value === picked)?.feedback ?? q.tryAgain ?? "Not yet. Revisit the evidence and try another choice."
 					}))
 				]
 			}, q.id);
@@ -200,6 +222,7 @@ function AskBox({ prompt, placeholder = "your answer", check, activity }) {
 	const [raw, setRaw] = useState("");
 	const [verdict, setVerdict] = useState(null);
 	const [solved, setSolved] = useState(false);
+	const feedbackId = `lab-answer-feedback-${activity}`;
 	useCheckpoint({
 		solved,
 		activity
@@ -209,69 +232,68 @@ function AskBox({ prompt, placeholder = "your answer", check, activity }) {
 		setVerdict(ok);
 		if (ok) setSolved(true);
 	};
-	return /* @__PURE__ */ jsxs("div", {
+	return /* @__PURE__ */ jsxs("form", {
 		className: "lab-challenge",
-		children: [
-			/* @__PURE__ */ jsx("span", {
-				className: "lab-challenge-prompt",
-				children: prompt
-			}),
-			/* @__PURE__ */ jsxs("div", {
-				className: "lab-ask-row",
-				children: [
-					/* @__PURE__ */ jsx("input", {
-						className: "lab-input",
-						value: raw,
-						placeholder,
-						"aria-label": "answer",
-						onChange: (e) => {
-							setRaw(e.currentTarget.value);
-							setVerdict(null);
-						},
-						onKeyDown: (e) => {
-							if (e.key === "Enter") run();
-						}
-					}),
-					/* @__PURE__ */ jsx("button", {
-						type: "button",
-						className: "lab-btn",
-						onClick: run,
-						children: "Check"
-					}),
-					verdict === true && /* @__PURE__ */ jsx("span", {
-						className: "lab-pill",
-						"data-state": "ok",
-						role: "status",
-						children: "✓ Correct"
-					}),
-					verdict === false && /* @__PURE__ */ jsx("span", {
-						className: "lab-pill",
-						"data-state": "no",
+		"data-invalid": verdict === false || void 0,
+		onSubmit: (event) => {
+			event.preventDefault();
+			run();
+		},
+		children: [/* @__PURE__ */ jsx("label", {
+			className: "lab-challenge-prompt",
+			htmlFor: `lab-answer-${activity}`,
+			children: prompt
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "lab-response-entry",
+			"data-invalid": verdict === false || void 0,
+			children: [
+				/* @__PURE__ */ jsx(Input, {
+					id: `lab-answer-${activity}`,
+					className: "lab-input",
+					value: raw,
+					placeholder,
+					"aria-invalid": verdict === false || void 0,
+					"aria-describedby": verdict !== null ? feedbackId : void 0,
+					onChange: (event) => {
+						setRaw(event.currentTarget.value);
+						setVerdict(null);
+					}
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					className: "lab-btn",
+					disabled: !raw.trim(),
+					children: "Check"
+				}),
+				verdict === true && /* @__PURE__ */ jsxs("span", {
+					id: feedbackId,
+					className: "lab-celebrate",
+					children: [/* @__PURE__ */ jsx("span", {
+						className: "lab-explain lab-pop",
 						role: "status",
-						children: "Not yet, try again"
-					})
-				]
-			}),
-			/* @__PURE__ */ jsx("div", {
-				"aria-live": "polite",
-				style: {
-					position: "absolute",
-					width: 1,
-					height: 1,
-					overflow: "hidden",
-					clipPath: "inset(50%)"
-				},
-				children: verdict === true ? "Correct." : verdict === false ? "Not yet." : ""
-			})
-		]
+						children: /* @__PURE__ */ jsx("b", { children: "✓ Correct." })
+					}), /* @__PURE__ */ jsx(Celebrate, { play: true })]
+				}),
+				verdict === false && /* @__PURE__ */ jsx("span", {
+					id: feedbackId,
+					className: "lab-explain",
+					"data-state": "no",
+					role: "alert",
+					children: "Not yet. Revisit the evidence and try again."
+				})
+			]
+		})]
 	});
 }
 /** Unified success / misconception / try-again feedback. */
 function Feedback({ ok, misconception, okText = "Correct", tryText = "Not yet, keep going" }) {
 	if (ok) return /* @__PURE__ */ jsxs("span", {
-		className: "lab-pill",
-		"data-state": "ok",
-		children: ["✓ ", okText]
+		className: "lab-celebrate",
+		children: [/* @__PURE__ */ jsxs(StatusPill, {
+			ok: true,
+			className: "lab-pop",
+			children: ["✓ ", okText]
+		}), /* @__PURE__ */ jsx(Celebrate, { play: true })]
 	});
 	if (misconception) return /* @__PURE__ */ jsxs("span", {
 		className: "lab-misconception",
@@ -285,9 +307,8 @@ function Feedback({ ok, misconception, okText = "Correct", tryText = "Not yet, k
 			misconception
 		]
 	});
-	return /* @__PURE__ */ jsx("span", {
-		className: "lab-pill",
-		"data-state": "no",
+	return /* @__PURE__ */ jsx(StatusPill, {
+		ok: false,
 		children: tryText
 	});
 }
@@ -320,8 +341,10 @@ function RevealSolution({ solution, available = true, onReveal, buttonLabel = "S
 		]
 	});
 	if (!available) return null;
-	return /* @__PURE__ */ jsx("button", {
+	return /* @__PURE__ */ jsx(Button, {
 		type: "button",
+		size: "sm",
+		variant: "outline",
 		className: "lab-reveal-btn",
 		onClick: () => {
 			setShown(true);

package/dist/kit/play.mjs

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useInView } from "@classytic/stage";
+import { Button } from "@/components/ui/button";
 
 //#region src/kit/play.tsx
 /**
@@ -36,8 +37,10 @@ function PlayWrap({ gate, children }) {
 	return /* @__PURE__ */ jsxs("div", {
 		ref: gate.ref,
 		className: "lab-playwrap",
-		children: [children, /* @__PURE__ */ jsx("button", {
+		children: [children, /* @__PURE__ */ jsx(Button, {
 			type: "button",
+			size: "sm",
+			variant: gate.playing ? "secondary" : "default",
 			className: "lab-play-toggle",
 			"data-playing": gate.playing,
 			"aria-label": gate.playing ? "Pause" : "Play",

package/dist/kit/predict-gate.d.mts

@@ -0,0 +1,25 @@
+import { ChallengeQuestion } from "./pedagogy.mjs";
+import { ReactNode } from "react";
+
+//#region src/kit/predict-gate.d.ts
+interface PredictGateProps {
+  questions: ChallengeQuestion[];
+  /** xAPI activity id for the checkpoint report (e.g. 'ohms-law.predict'). */
+  activity: string;
+  title?: ReactNode;
+  /** Shown on the lock overlay until the learner commits. */
+  lockLabel?: string;
+  /** Set false to show the questions WITHOUT locking the lab (survey mode). */
+  lock?: boolean;
+  children: ReactNode;
+}
+declare function PredictGate({
+  questions,
+  activity,
+  title,
+  lockLabel,
+  lock,
+  children
+}: PredictGateProps): ReactNode;
+//#endregion
+export { PredictGate, PredictGateProps };

package/dist/kit/predict-gate.mjs

@@ -0,0 +1,42 @@
+'use client';
+
+import { ChallengeCard, useChallenge, useCheckpoint } from "./pedagogy.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/kit/predict-gate.tsx
+function PredictGate({ questions, activity, title = "Predict first", lockLabel = "Make your prediction first", lock = true, children }) {
+	const state = useChallenge(questions);
+	useCheckpoint({
+		solved: state.allCorrect,
+		activity
+	});
+	const locked = lock && !state.answeredAll;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "lab-predict-gate",
+		children: [/* @__PURE__ */ jsx(ChallengeCard, {
+			questions,
+			state,
+			title
+		}), /* @__PURE__ */ jsx("div", {
+			className: "lab-predict-body",
+			"data-locked": locked || void 0,
+			children: locked ? /* @__PURE__ */ jsxs("div", {
+				className: "lab-predict-lock",
+				role: "status",
+				"aria-live": "polite",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "lab-predict-lock-mark",
+						"aria-hidden": true,
+						children: "?"
+					}),
+					/* @__PURE__ */ jsx("strong", { children: lockLabel }),
+					/* @__PURE__ */ jsx("span", { children: "Choose an answer above, then explore the model." })
+				]
+			}) : children
+		})]
+	});
+}
+
+//#endregion
+export { PredictGate };

package/dist/kit/predict.mjs

@@ -15,10 +15,10 @@ const C_GRID = "var(--stage-muted)";
 function PredictPlot({ data, guess, onGuess, tone = "idle", xMax, yMax, xStep = 1, yStep, xLabel, yLabel, height = 340, lockX = true, snap = true, rule = null, showColumn = true, readout = true }) {
 	const yS = yStep ?? Math.max(1, Math.round(yMax / 8));
 	const view = {
-		xMin: -xMax * .04,
-		xMax: xMax * 1.04,
+		xMin: -xMax * .07,
+		xMax: xMax * 1.05,
 		yMin: -yMax * .06,
-		yMax: yMax * 1.06
+		yMax: yMax * 1.16
 	};
 	const gColor = TONE_COLOR[tone];
 	const snapXY = (p) => {
@@ -41,21 +41,21 @@ function PredictPlot({ data, guess, onGuess, tone = "idle", xMax, yMax, xStep =
 				x: 0,
 				y: view.yMax,
 				text: yLabel,
-				dx: 6,
-				dy: -2,
+				dx: 2,
+				dy: -3,
 				anchor: "start",
-				size: 12,
-				weight: 700
+				size: 13,
+				weight: 750
 			}),
 			xLabel && /* @__PURE__ */ jsx(Label, {
 				x: view.xMax,
 				y: 0,
 				text: xLabel,
 				dx: -2,
-				dy: 16,
+				dy: 18,
 				anchor: "end",
-				size: 12,
-				weight: 700
+				size: 13,
+				weight: 750
 			}),
 			showColumn && /* @__PURE__ */ jsx(Segment, {
 				from: {

package/dist/kit/probability.d.mts

@@ -0,0 +1,55 @@
+import { ReactNode } from "react";
+
+//#region src/kit/probability.d.ts
+interface ProbabilityBoardOutcome {
+  label: string;
+  probability: number;
+  value: number;
+  color?: string;
+}
+/**
+ * Renderer-independent board for expected-value activities. It deliberately uses
+ * length (not bubble area) for probability and contribution so learners compare
+ * quantities on a common scale.
+ */
+declare function ProbabilityContributionBoard({
+  outcomes,
+  expectation,
+  cost,
+  average
+}: {
+  outcomes: ProbabilityBoardOutcome[];
+  expectation: number;
+  cost?: number;
+  average?: number | null;
+}): ReactNode;
+/** A six-sided die showing `value` (1–6) in box (x,y) of side `size`. */
+declare function DiceGlyph({
+  x,
+  y,
+  size: s,
+  value,
+  highlight
+}: {
+  x: number;
+  y: number;
+  size: number;
+  value: number;
+  highlight?: boolean;
+}): ReactNode;
+/** A coin in box centred (cx,cy) radius `r`, showing 'H' or 'T'. */
+declare function CoinGlyph({
+  cx,
+  cy,
+  r,
+  face,
+  highlight
+}: {
+  cx: number;
+  cy: number;
+  r: number;
+  face?: 'H' | 'T' | string;
+  highlight?: boolean;
+}): ReactNode;
+//#endregion
+export { CoinGlyph, DiceGlyph, ProbabilityBoardOutcome, ProbabilityContributionBoard };

package/dist/kit/probability.mjs

@@ -3,6 +3,120 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/kit/probability.tsx
+/**
+* Renderer-independent board for expected-value activities. It deliberately uses
+* length (not bubble area) for probability and contribution so learners compare
+* quantities on a common scale.
+*/
+function ProbabilityContributionBoard({ outcomes, expectation, cost, average }) {
+	const totalProbability = outcomes.reduce((sum, outcome) => sum + outcome.probability, 0) || 1;
+	const normalized = outcomes.map((outcome) => ({
+		...outcome,
+		probability: outcome.probability / totalProbability
+	}));
+	const scaleMax = Math.max(1, cost ?? 0, expectation, average ?? 0) * 1.12;
+	const percent = (value) => `${Math.max(0, Math.min(100, value / scaleMax * 100))}%`;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "probability-contribution-board",
+		role: "img",
+		"aria-label": `Expected payout ${expectation.toFixed(2)}`,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "probability-board-heading",
+				children: [/* @__PURE__ */ jsx("span", { children: "Every 100 plays" }), /* @__PURE__ */ jsx("span", { children: "Probability × payout" })]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "probability-outcome-strip",
+				"aria-hidden": "true",
+				children: normalized.map((outcome, index) => /* @__PURE__ */ jsxs("div", {
+					className: "probability-outcome-segment",
+					style: {
+						"--probability-width": `${outcome.probability * 100}%`,
+						"--probability-color": outcome.color ?? `var(--stage-cat-${index % 6 + 1})`
+					},
+					children: [/* @__PURE__ */ jsxs("strong", { children: [Math.round(outcome.probability * 100), "%"] }), /* @__PURE__ */ jsx("span", { children: outcome.label })]
+				}, `${outcome.label}-${index}`))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "probability-contribution-list",
+				children: normalized.map((outcome, index) => {
+					const contribution = outcome.probability * outcome.value;
+					return /* @__PURE__ */ jsxs("div", {
+						className: "probability-contribution-row",
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "probability-contribution-label",
+								children: outcome.label
+							}),
+							/* @__PURE__ */ jsx("span", {
+								className: "probability-contribution-track",
+								"aria-hidden": "true",
+								children: /* @__PURE__ */ jsx("span", {
+									className: "probability-contribution-fill",
+									style: {
+										"--contribution-width": percent(contribution),
+										"--probability-color": outcome.color ?? `var(--stage-cat-${index % 6 + 1})`
+									}
+								})
+							}),
+							/* @__PURE__ */ jsxs("span", {
+								className: "probability-contribution-math",
+								children: [
+									Math.round(outcome.probability * 100),
+									"% × ",
+									outcome.value,
+									" =",
+									" ",
+									/* @__PURE__ */ jsx("strong", { children: contribution.toFixed(2) })
+								]
+							})
+						]
+					}, `${outcome.label}-contribution-${index}`);
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "probability-benchmark",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "probability-benchmark-track",
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "probability-expectation-fill",
+							style: { "--benchmark-width": percent(expectation) }
+						}),
+						cost != null && /* @__PURE__ */ jsx("span", {
+							className: "probability-cost-marker",
+							style: { "--marker-position": percent(cost) }
+						}),
+						average != null && /* @__PURE__ */ jsx("span", {
+							className: "probability-average-marker",
+							style: { "--marker-position": percent(average) }
+						})
+					]
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "probability-benchmark-legend",
+					children: [
+						/* @__PURE__ */ jsxs("span", { children: [
+							/* @__PURE__ */ jsx("i", { "data-kind": "expectation" }),
+							" expected ",
+							expectation.toFixed(2)
+						] }),
+						cost != null && /* @__PURE__ */ jsxs("span", { children: [
+							/* @__PURE__ */ jsx("i", { "data-kind": "cost" }),
+							" price ",
+							cost.toFixed(2)
+						] }),
+						average != null && /* @__PURE__ */ jsxs("span", { children: [
+							/* @__PURE__ */ jsx("i", { "data-kind": "average" }),
+							" sample average ",
+							average.toFixed(2)
+						] })
+					]
+				})]
+			})
+		]
+	});
+}
 const FG = "var(--stage-fg)";
 const FACE = "color-mix(in oklab, var(--stage-bg) 92%, var(--stage-fg))";
 const METAL = "var(--stage-metal)";
@@ -138,4 +252,4 @@ function CoinGlyph({ cx, cy, r, face = "H", highlight = false }) {
 }
 
 //#endregion
-export { CoinGlyph, DiceGlyph };
+export { CoinGlyph, DiceGlyph, ProbabilityContributionBoard };