{shapes.map((s, i) =>

)}

); } // Confetti burst — rendered on completion screen. function Confetti({ count = 80 }) { const pieces = useMemo(() => { const colors = ["var(--bright)", "var(--reward)", "var(--soft)", "var(--dark)", "#FFFFFF"]; return Array.from({ length: count }, (_, i) => ({ left: Math.random() * 100, dur: 2.6 + Math.random() * 2, delay: Math.random() * 1.5, color: colors[i % colors.length], size: 6 + Math.random() * 8, rot: Math.random() * 360 })); }, [count]); return ( ); } // Halo rings pulsing out from a central point (reward screen). function RewardHalo({ enabled = true }) { if (!enabled) return null; return ( <>

); } const DIFF_LABEL = { easy: "Eenvoudig", medium: "Gemiddeld", hard: "Uitdagend" }; const TYPE_LABEL = { quiz: "Meerkeuze", blank: "Aanvullen", dragdrop: "Sorteren", match: "Verbinden", order: "Volgorde", hotspot: "Foutdetectie" }; /* ──────────── TOP BAR ──────────── */ function TopBar({ progress, score, flash, currentModuleTitle }) { const [pop, setPop] = useState(false); const prevScore = React.useRef(score); useEffect(() => { if (score > prevScore.current) { setPop(true); const tm = setTimeout(() => setPop(false), 600); prevScore.current = score; return () => clearTimeout(tm); } prevScore.current = score; }, [score]); return (

{C.branding.appName}

{currentModuleTitle || C.branding.moduleName}

{flash && progress > 0 &&

}

{I.flag}

{(flash || pop) && {I.arrowUp}} {score}

{C.branding.userInitials} {C.branding.userName}

); } /* ──────────── EXERCISE HEADER (shared) ──────────── */ function ExHead({ exercise, exIdx, exTotal, timer }) { return (

● {DIFF_LABEL[exercise.difficulty]} {TYPE_LABEL[exercise.type]} · oefening {exIdx + 1} van {exTotal} {timer != null && }

); } /* TimerBadge: countdown pill with colour-shift as time runs out */ function TimerBadge({ seconds, total, expired }) { const pct = Math.max(0, Math.min(1, seconds / total)); let cls = "timer-badge"; if (expired) cls += " expired";else if (pct < 0.25) cls += " critical";else if (pct < 0.5) cls += " warn"; const mm = Math.floor(seconds / 60); const ss = Math.max(0, seconds % 60).toString().padStart(2, "0"); return ( {expired ? "Tijd op" : `${mm}:${ss}`} ); } /* useExerciseTimer: counts down when exercise.timeLimit is set, pauses when submitted */ function useExerciseTimer(exercise, submitted, onExpire) { const total = exercise.timeLimit; const [seconds, setSeconds] = useState(total || 0); const expiredRef = React.useRef(false); useEffect(() => { if (!total) return; if (submitted) return; if (seconds <= 0) { if (!expiredRef.current) { expiredRef.current = true; onExpire && onExpire(); } return; } const t = setTimeout(() => setSeconds((s) => s - 1), 1000); return () => clearTimeout(t); }, [total, seconds, submitted]); if (!total) return null; return { seconds, total, expired: seconds <= 0 }; } function ExFeedback({ isCorrect, explain }) { return (

{isCorrect ? "Juist." : "Niet helemaal."} {explain}

); } /* ──────────── EXERCISE: QUIZ ──────────── */ function ExQuiz({ exercise, exIdx, exTotal, onResult, onNext }) { const [picked, setPicked] = useState(null); const submitted = picked != null; return ( <>

{exercise.q}

{exercise.options.map((opt, i) => { let state = ""; if (submitted) { if (i === exercise.correct) state = "is-correct";else if (i === picked) state = "is-wrong";else state = "is-dim"; } return ( ); })}

{submitted && }

Oefening {exIdx + 1} / {exTotal}

); } /* ──────────── EXERCISE: BLANK ──────────── */ function ExBlank({ exercise, exIdx, exTotal, onResult, onNext }) { const [val, setVal] = useState(""); const [submitted, setSubmitted] = useState(false); const [isCorrect, setIsCorrect] = useState(false); const check = () => { const norm = val.trim().toLowerCase(); const valid = [exercise.answer, ...(exercise.alts || [])].map((s) => s.toLowerCase()); const ok = valid.includes(norm); setIsCorrect(ok); setSubmitted(true); onResult(ok); }; return ( <>

{exercise.before} setVal(e.target.value)} onKeyDown={(e) => {if (e.key === "Enter" && !submitted && val.trim()) check();}} disabled={submitted} placeholder="…" aria-label="vul aan" /> {exercise.after}

{!submitted &&

} {submitted && }

{submitted &&

Oefening {exIdx + 1} / {exTotal}

} ); } /* ──────────── EXERCISE: DRAG-DROP (click to place) ──────────── */ function ExDragDrop({ exercise, exIdx, exTotal, onResult, onNext }) { const [selected, setSelected] = useState(null); const [placement, setPlacement] = useState({}); // itemId -> binId const [submitted, setSubmitted] = useState(false); const [isCorrect, setIsCorrect] = useState(false); const placeIn = (binId) => { if (!selected || submitted) return; setPlacement((p) => ({ ...p, [selected]: binId })); setSelected(null); }; const unplace = (itemId) => { if (submitted) return; setPlacement((p) => {const n = { ...p };delete n[itemId];return n;}); }; const allPlaced = exercise.items.every((it) => placement[it.id]); const check = () => { if (submitted) return; const ok = exercise.items.every((it) => placement[it.id] === exercise.answer[it.id]); setIsCorrect(ok); setSubmitted(true); onResult(ok); }; const timer = useExerciseTimer(exercise, submitted, () => check()); const itemsInBin = (binId) => exercise.items.filter((it) => placement[it.id] === binId); const unplacedItems = exercise.items.filter((it) => !placement[it.id]); return ( <>

{exercise.q}

{exercise.hint}

{unplacedItems.length === 0 ?

Alle items zijn gesleept. Druk op "Controleren".

: unplacedItems.map((it) => )}

{exercise.bins.map((bin) =>

placeIn(bin.id)}>

{bin.label}

{itemsInBin(bin.id).map((it) => { let cls = ""; if (submitted) cls = exercise.answer[it.id] === bin.id ? " correct-place" : " wrong-place"; return ( ); })}

)}

{!submitted &&

} {submitted && }

{submitted &&

Oefening {exIdx + 1} / {exTotal}

} ); } /* ──────────── EXERCISE: MATCH PAIRS ──────────── */ function ExMatch({ exercise, exIdx, exTotal, onResult, onNext }) { // shuffle right column deterministically const rightOrder = useMemo(() => { const arr = exercise.pairs.map((p, i) => ({ ...p, origIdx: i })); // Fisher-Yates with seed for stability for (let i = arr.length - 1; i > 0; i--) { const j = (i * 7 + 3) % (i + 1); // deterministic [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; }, [exercise]); const [selectedLeft, setSelectedLeft] = useState(null); const [pairs, setPairs] = useState({}); // leftIdx -> rightIdx (origIdx) const [submitted, setSubmitted] = useState(false); const [isCorrect, setIsCorrect] = useState(false); const dotColors = ["#C745CC", "#1F7A4C", "#C9A227", "#4A5AE0", "#B3322B", "#0EA5B7"]; const pickLeft = (i) => { if (submitted) return; setSelectedLeft((s) => s === i ? null : i); }; const pickRight = (origIdx) => { if (submitted || selectedLeft == null) return; // remove any existing pairing involving this right setPairs((p) => { const n = { ...p }; Object.keys(n).forEach((k) => {if (n[k] === origIdx) delete n[k];}); n[selectedLeft] = origIdx; return n; }); setSelectedLeft(null); }; const allPaired = Object.keys(pairs).length === exercise.pairs.length; const check = () => { const ok = exercise.pairs.every((_, i) => pairs[i] === i); setIsCorrect(ok); setSubmitted(true); onResult(ok); }; const pairedRights = new Set(Object.values(pairs)); return ( <>

{exercise.q}

{exercise.hint}

{exercise.pairs.map((p, i) => { const dotIdx = pairs[i]; let stateCls = ""; if (submitted) stateCls = pairs[i] === i ? " correct" : " wrong";else if (selectedLeft === i) stateCls = " selected";else if (dotIdx != null) stateCls = " paired"; return ( ); })}

{rightOrder.map((r) => { const leftIdx = Object.keys(pairs).find((k) => pairs[k] === r.origIdx); let stateCls = ""; if (submitted) { if (leftIdx != null) stateCls = Number(leftIdx) === r.origIdx ? " correct" : " wrong"; } else if (pairedRights.has(r.origIdx)) stateCls = " paired"; return ( ); })}

{!submitted &&

} {submitted && }

{submitted &&

Oefening {exIdx + 1} / {exTotal}

} ); } /* ──────────── EXERCISE: ORDER ──────────── */ function ExOrder({ exercise, exIdx, exTotal, onResult, onNext }) { // start order = reversed of answer (or shuffled deterministically) const initial = useMemo(() => { const arr = [...exercise.items]; // simple deterministic reorder: reverse return arr.reverse(); }, [exercise]); const [list, setList] = useState(initial); const [submitted, setSubmitted] = useState(false); const [isCorrect, setIsCorrect] = useState(false); const move = (idx, delta) => { if (submitted) return; const target = idx + delta; if (target < 0 || target >= list.length) return; const next = [...list]; [next[idx], next[target]] = [next[target], next[idx]]; setList(next); }; const check = () => { const ok = list.every((it, i) => it.id === exercise.answer[i]); setIsCorrect(ok); setSubmitted(true); onResult(ok); }; return ( <>

{exercise.q}

{exercise.hint}

{list.map((it, i) => { let cls = ""; if (submitted) cls = it.id === exercise.answer[i] ? " correct" : " wrong"; return (

{i + 1}

{it.label}

); })}

{!submitted &&

} {submitted && }

{submitted &&

Oefening {exIdx + 1} / {exTotal}

} ); } /* ──────────── EXERCISE: HOTSPOT (klik AI-fouten aan) ──────────── */ function ExHotspot({ exercise, exIdx, exTotal, onResult, onNext }) { const [clicks, setClicks] = useState([]); // {x, y, hotspotIdx | null} const [submitted, setSubmitted] = useState(false); const [isCorrect, setIsCorrect] = useState(false); const imgRef = React.useRef(null); const TOLERANCE_PCT = 8; // click within 8% of hotspot center counts const handleClick = (e) => { if (submitted) return; if (clicks.length >= (exercise.maxClicks || exercise.hotspots.length + 1)) return; const rect = imgRef.current.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width * 100; const y = (e.clientY - rect.top) / rect.height * 100; // Did we hit a not-yet-found hotspot? const foundIdxs = new Set(clicks.filter((c) => c.hotspotIdx != null).map((c) => c.hotspotIdx)); let hit = null; exercise.hotspots.forEach((h, i) => { if (foundIdxs.has(i)) return; const dx = x - h.x,dy = y - h.y; if (Math.sqrt(dx * dx + dy * dy) <= TOLERANCE_PCT) hit = i; }); setClicks((cs) => [...cs, { x, y, hotspotIdx: hit }]); }; const foundCount = clicks.filter((c) => c.hotspotIdx != null).length; const totalHotspots = exercise.hotspots.length; const check = () => { if (submitted) return; const ok = foundCount >= (exercise.minToWin || totalHotspots); setIsCorrect(ok); setSubmitted(true); onResult(ok); }; const timer = useExerciseTimer(exercise, submitted, () => check()); return ( <>

{exercise.q}

{exercise.hint}

Gevonden: {foundCount} / {totalHotspots}

{clicks.map((c, i) => { if (c.hotspotIdx != null) { // correct click const h = exercise.hotspots[c.hotspotIdx]; return (

✓ {submitted && {h.label}}

); } if (submitted) { return (

); } // pre-submit miss-click: just a dim ring return (

); })} {submitted && exercise.hotspots.map((h, i) => { const foundIdxs = new Set(clicks.filter((c) => c.hotspotIdx != null).map((c) => c.hotspotIdx)); if (foundIdxs.has(i)) return null; return (

! {h.label}

); })}

{!submitted &&

} {submitted && }

{submitted &&

Oefening {exIdx + 1} / {exTotal}

} ); } /* ──────────── SCREENS ──────────── */ function ScreenWelkom({ onNext }) { return <>

{C.welcome.title}

{C.welcome.body}

{C.welcome.pager}

{C.welcome.estimate}

; } function ScreenTips({ onNext, onBack }) { return <>

{C.tips.speech}

{TIPS.map((t, i) =>

{TIP_ICONS[t.icon]}

{t.title}

{t.desc}

)}

; } function ScreenOverview({ progress, sparks, onPickModule, onBack }) { const doneCount = progress.filter((p) => p === "done").length; const nextIdx = progress.findIndex((p) => p !== "done"); return <>

{C.overview.eyebrow}

{C.overview.title}

{doneCount}/{MODULES.length}

{MODULES.map((m, i) => { const status = progress[i] === "done" ? "done" : i === nextIdx ? "active" : "todo"; return (

onPickModule(i)}>

{progress[i] === "done" ? I.check : i + 1}

{m.title}

{m.meta}

{I.chev}

); })}

; } function ScreenVideo({ module, onNext, onBack }) { const [played, setPlayed] = useState(false); return <>

{module.video ?

{module.videoTitle}{I.info}

{module.videoBody}

; } function ScreenReward({ module, sparksEarned, totalEx, sparks, onNext }) { const isAllCorrect = sparksEarned === totalEx && totalEx > 0; const sparkPts = useMemo(() => Array.from({ length: sparksEarned > 0 ? isAllCorrect ? 40 : 22 : 0 }, (_, i) => ({ dx: (Math.random() - 0.5) * (isAllCorrect ? 800 : 500), dy: -120 - Math.random() * 240, delay: i * 0.04 })), [sparksEarned, isAllCorrect]); const heading = isAllCorrect ? "Geweldig!" : sparksEarned > 0 ? "Goed bezig." : "Goed geprobeerd."; return <>

{sparksEarned > 0 && } 0} />

{I.check}

{heading}

Module {module.id} voltooid — {sparksEarned} van de {totalEx} oefeningen correct.

{sparksEarned > 0 &&

⚡ +{sparksEarned} {sparksEarned === 1 ? "Spark" : "Sparks"} verdiend

} {sparkPts.map((s, i) =>

)}

Totaal: {sparks} {sparks === 1 ? "Spark" : "Sparks"}

; } function ScreenPoll({ module, answers, onAnswer, onSubmit, onBack }) { const allAnswered = module.poll.every((_, i) => answers[i] != null); return <>

Anoniem · geen goed of fout

{module.title}

{module.pollIntro}

{module.poll.map((q, i) =>

Vraag {i + 1} van {module.poll.length}

{q.q}

{q.options.map((opt, j) => )}

)}

; } function ScreenPollThanks({ onNext }) { return <>

{I.checkBig}

{C.poll && C.poll.thanks && C.poll.thanks.title || "Bedankt."}

{C.poll && C.poll.thanks && C.poll.thanks.body || "Je antwoorden stromen anoniem door naar het juiste team."}

Poll-modules leveren geen Sparks op

; } function ScreenCompletion({ sparks, maxSparks, onRestart }) { const pct = maxSparks === 0 ? 0 : Math.round(sparks / maxSparks * 100); return <>

{I.trophy}

{C.completion.title}

{C.completion.body}

{sparks}/{maxSparks}

correct

{sparks}

Sparks

{pct}%

score

; } /* ──────────── APP ──────────── */ const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "energy": "standard", "bg": "bloom", "mascotAnim": true, "rewardAnim": true, "confetti": true } /*EDITMODE-END*/; function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [screen, setScreen] = useState("welkom"); const [moduleIdx, setModuleIdx] = useState(0); const [phase, setPhase] = useState("video"); // lesson: video | ex (with exIdx) | reward | poll: poll | thanks const [exIdx, setExIdx] = useState(0); const [progress, setProgress] = useState(Array(MODULES.length).fill("todo")); const [moduleSparks, setModuleSparks] = useState(Array(MODULES.length).fill(0)); // sparks earned per module const [currentModuleSparks, setCurrentModuleSparks] = useState(0); // accumulator during module const [pollAnswers, setPollAnswers] = useState({}); const sparks = moduleSparks.reduce((a, b) => a + b, 0); const maxSparks = MODULES.filter((m) => m.kind === "lesson").reduce((a, m) => a + m.exercises.length, 0); const currentModule = MODULES[moduleIdx]; const overallProgress = useMemo(() => { if (screen === "welkom" || screen === "tips") return 0; if (screen === "overview") return progress.filter((p) => p === "done").length / MODULES.length * 100; if (screen === "completion") return 100; const baseDone = progress.filter((p) => p === "done").length; let sub = 0; if (phase === "video" || phase === "poll") sub = 0.2;else if (phase === "ex") sub = 0.4 + 0.4 * (exIdx / (currentModule.exercises?.length || 1));else sub = 1; // reward/thanks return Math.min(100, (baseDone + sub) / MODULES.length * 100); }, [screen, phase, exIdx, progress, currentModule]); const goPickModule = (i) => { if (i === -1) { if (progress.every((p) => p === "done")) setScreen("completion"); return; } setModuleIdx(i); setExIdx(0); setCurrentModuleSparks(0); const mod = MODULES[i]; setPhase(mod.kind === "lesson" ? mod.noVideo ? "ex" : "video" : "poll"); setScreen("module"); }; const finishModule = (sparksEarned) => { setProgress((prev) => {const n = [...prev];n[moduleIdx] = "done";return n;}); setModuleSparks((prev) => {const n = [...prev];n[moduleIdx] = sparksEarned;return n;}); }; const nextAfterModule = () => { const allDone = progress.every((p, i) => i === moduleIdx ? true : p === "done"); if (allDone) setScreen("completion");else setScreen("overview"); }; const onExerciseResult = (isCorrect) => { if (isCorrect) setCurrentModuleSparks((c) => c + 1); }; const onExerciseNext = () => { if (exIdx < currentModule.exercises.length - 1) { setExIdx(exIdx + 1); } else { finishModule(currentModuleSparks); setPhase("reward"); } }; const renderModule = () => { if (currentModule.kind === "lesson") { if (phase === "video") return setScreen("overview")} onNext={() => {setPhase("ex");setExIdx(0);}} />; if (phase === "ex") { const ex = currentModule.exercises[exIdx]; const props = { exercise: ex, exIdx, exTotal: currentModule.exercises.length, onResult: onExerciseResult, onNext: onExerciseNext, key: `${moduleIdx}-${exIdx}` }; if (ex.type === "quiz") return ; if (ex.type === "blank") return ; if (ex.type === "dragdrop") return ; if (ex.type === "match") return ; if (ex.type === "order") return ; if (ex.type === "hotspot") return ; } if (phase === "reward") { return ; } } else { if (phase === "poll") return setPollAnswers((p) => ({ ...p, [qi]: oi }))} onBack={() => setScreen("overview")} onSubmit={() => {finishModule(0);setPhase("thanks");}} />; if (phase === "thanks") return ; } return null; }; const renderScreen = () => { switch (screen) { case "welkom":return setScreen("tips")} />; case "tips":return setScreen("overview")} onBack={() => setScreen("welkom")} />; case "overview":return setScreen("tips")} onPickModule={goPickModule} />; case "module":return renderModule(); case "completion":return {setProgress(Array(MODULES.length).fill("todo"));setModuleSparks(Array(MODULES.length).fill(0));setPollAnswers({});setCurrentModuleSparks(0);setScreen("welkom");}} />; default:return null; } }; const onDarkBg = screen === "completion" || screen === "module" && (phase === "reward" || phase === "thanks"); // Apply tweak data attributes to :root so CSS can react. useEffect(() => { const r = document.documentElement; r.dataset.energy = t.energy; r.dataset.bg = t.bg; r.dataset.mascotAnim = t.mascotAnim ? "on" : "off"; r.dataset.rewardAnim = t.rewardAnim ? "on" : "off"; r.dataset.confetti = t.confetti ? "on" : "off"; }, [t.energy, t.bg, t.mascotAnim, t.rewardAnim, t.confetti]); const screenLabel = screen === "module" ? `Module ${currentModule.id} · ${phase}${phase === "ex" ? " " + (exIdx + 1) : ""}` : screen.charAt(0).toUpperCase() + screen.slice(1); const currentModuleTitle = screen === "module" ? `Module ${currentModule.id} · ${currentModule.title}` : null; return (

0} currentModuleTitle={currentModuleTitle} />

{renderScreen()}

setTweak("energy", v)} /> setTweak("bg", v)} /> setTweak("mascotAnim", v)} /> setTweak("rewardAnim", v)} /> setTweak("confetti", v)} />

); } ReactDOM.createRoot(document.getElementById("root")).render();