/* play.jsx — the learner's playable gamified course experience */ const TOTAL_LIVES = 3; const QTIME = 22; // seconds per question function HexPip({ filled }) { return (
); } function PlayGame({ course, back, toast }) { const bank = QUIZ_BANK; const N = bank.length; const [stage, setStage] = useState("intro"); // intro | quiz | done const [qi, setQi] = useState(0); const [pick, setPick] = useState(null); const [lives, setLives] = useState(TOTAL_LIVES); const [xp, setXp] = useState(0); const [combo, setCombo] = useState(0); const [maxCombo, setMaxCombo] = useState(0); const [correct, setCorrect] = useState(0); const [time, setTime] = useState(QTIME); const [pop, setPop] = useState(null); // floating +xp const timerRef = useRef(null); const q = bank[qi]; const answered = pick !== null; /* countdown */ useEffect(() => { if (stage !== "quiz" || answered) return; setTime(QTIME); timerRef.current = setInterval(() => { setTime(t => { if (t <= 1) { clearInterval(timerRef.current); handleAnswer(-1); return 0; } return t - 1; }); }, 1000); return () => clearInterval(timerRef.current); }, [qi, stage]); function handleAnswer(idx) { if (pick !== null) return; clearInterval(timerRef.current); setPick(idx); const right = idx === q.answer; if (right) { const gained = 40 + combo * 15 + Math.round((time / QTIME) * 30); setXp(x => x + gained); setCombo(c => { const n = c + 1; setMaxCombo(m => Math.max(m, n)); return n; }); setCorrect(c => c + 1); setPop({ v: "+" + gained, ok: true, key: Date.now() }); } else { setLives(l => l - 1); setCombo(0); setPop({ v: idx === -1 ? "Time!" : "Miss", ok: false, key: Date.now() }); } setTimeout(() => { const outOfLives = !right && lives - 1 <= 0; if (qi + 1 >= N || outOfLives) { setStage("done"); } else { setQi(i => i + 1); setPick(null); } }, right ? 1100 : 1700); } /* ---- intro ---- */ if (stage === "intro") { return (
Gamified course

{course.title}

Answer fast, keep your combo, protect your lives.

{[["target", N + " questions", "from your slides"], ["heart", TOTAL_LIVES + " lives", "don't run out"], ["bolt", "Combo XP", "speed + streak bonus"]].map(([ic, a, b]) => (
{a}
{b}
))}
); } /* ---- results ---- */ if (stage === "done") { const acc = Math.round((correct / N) * 100); const passed = correct >= Math.ceil(N * 0.6); return (

{passed ? "Level cleared!" : "Good effort!"}

{passed ? "You earned a new badge and moved up the board." : "Replay to clear the level and earn the badge."}

{[["XP earned", xp.toLocaleString(), "bolt"], ["Accuracy", acc + "%", "target"], ["Best combo", "×" + maxCombo, "flame"]].map(([k, v, ic]) => (
{v}
{k}
))}
{passed && (
Badge unlocked — Quiz Ace
Scored {acc}% on a gamified course
)}
); } /* ---- quiz HUD ---- */ const timePct = (time / QTIME) * 100; return (
{/* HUD */}
{Array.from({ length: TOTAL_LIVES }).map((_, i) => )}
{combo >= 2 && Combo ×{combo}}
{/* progress dots */}
{bank.map((_, i) => (
))}
{/* timer */}
Question {qi + 1} of {N} {time}s
{/* question card */}
{pop && setPop(null)} />} Slide {q.slide}

{q.q}

{q.options.map((o, i) => { let bd = "var(--line)", bg = "var(--surface)", ico = null, col = "var(--ink)"; if (answered && i === q.answer) { bd = "var(--vh-teal)"; bg = "color-mix(in oklab,var(--vh-teal),transparent 88%)"; ico = "checkCircle"; } else if (answered && i === pick) { bd = "var(--vh-orange)"; bg = "color-mix(in oklab,var(--vh-orange),transparent 88%)"; ico = "x"; } else if (answered) { col = "var(--ink-3)"; } return ( ); })}
{answered && (
{q.why}
)}
); } function FloatPop({ pop, onDone }) { useEffect(() => { const t = setTimeout(onDone, 1000); return () => clearTimeout(t); }, []); return (
{pop.v}
); } Object.assign(window, { PlayGame });