{variant !== "none" && } {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", flashcard: "Flashcards", finderror: "Zoek de fout" }; /* ──────────── TOP BAR ──────────── */ function TopBar({ progress, score, flash, currentModuleTitle, onProfile }) { 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]); const brand = C.branding.brand; const logo = brand && brand.logo; return (

{logo ?

: <>

{C.branding.appName}

}

{currentModuleTitle || C.branding.moduleName}

{flash && progress > 0 &&

}

{I.flag}

); } /* ──────────── 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"); const R = 13, C = 2 * Math.PI * R; 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 (echt slepen + tik-fallback) ──────────── */ function ExDragDrop({ exercise, exIdx, exTotal, onResult, onNext }) { const [selected, setSelected] = useState(null); // tik-fallback: gekozen item const [dragId, setDragId] = useState(null); // item dat nu gesleept wordt const [overBin, setOverBin] = useState(null); // bak waarboven gehoverd wordt const [placement, setPlacement] = useState({}); // itemId -> binId const [submitted, setSubmitted] = useState(false); const [isCorrect, setIsCorrect] = useState(false); const binLabel = (binId) => { const b = exercise.bins.find((x) => x.id === binId); return b ? b.label : ""; }; const placeIn = (binId) => { const id = selected || dragId; if (!id || submitted) return; setPlacement((p) => ({ ...p, [id]: binId })); setSelected(null); }; const unplace = (itemId) => { if (submitted) return; setPlacement((p) => {const n = { ...p };delete n[itemId];return n;}); setSelected(null); }; // native drag handlers const onDragStart = (e, itemId) => { if (submitted) {e.preventDefault();return;} setDragId(itemId); setSelected(null); e.dataTransfer.effectAllowed = "move"; try {e.dataTransfer.setData("text/plain", itemId);} catch (err) {} }; const onDragEnd = () => {setDragId(null);setOverBin(null);}; const onBinDragOver = (e, binId) => {if (submitted) return;e.preventDefault();e.dataTransfer.dropEffect = "move";setOverBin(binId);}; const onBinDrop = (e, binId) => { if (submitted) return; e.preventDefault(); const id = dragId || e.dataTransfer.getData("text/plain"); if (id) setPlacement((p) => ({ ...p, [id]: binId })); setDragId(null);setOverBin(null);setSelected(null); }; const allPlaced = exercise.items.every((it) => placement[it.id]); const correctCount = exercise.items.filter((it) => placement[it.id] === exercise.answer[it.id]).length; const wrongCount = exercise.items.length - correctCount; 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]); // gedeelde renderer voor een sleepbaar item (pool én bak) const renderItem = (it, inBin) => { let cls = ""; let wrong = false; if (submitted && inBin) { wrong = exercise.answer[it.id] !== placement[it.id]; cls = wrong ? " wrong-place" : " correct-place"; } return (

onDragStart(e, it.id)} onDragEnd={onDragEnd} role="button" tabIndex={submitted ? -1 : 0} aria-pressed={selected === it.id} onClick={(e) => { if (submitted) return; e.stopPropagation(); if (inBin) {unplace(it.id);return;} setSelected((s) => s === it.id ? null : it.id); }}> {it.image &&

} {it.label} {submitted && inBin && } {submitted && wrong && Hoort bij: {binLabel(exercise.answer[it.id])}}

); }; return ( <>

{exercise.q}

{exercise.hint}

{!submitted &&

{if (!submitted && dragId) {e.preventDefault();}}} onDrop={(e) => { if (submitted) return; e.preventDefault(); const id = dragId || e.dataTransfer.getData("text/plain"); if (id) unplace(id); setDragId(null);setOverBin(null); }}> {unplacedItems.length === 0 ?

Alle foto's zijn gesorteerd. Klik op "Controleren".

: unplacedItems.map((it) => renderItem(it, false))}

}

{exercise.bins.map((bin) => { const items = itemsInBin(bin.id); return (

placeIn(bin.id)} onDragOver={(e) => onBinDragOver(e, bin.id)} onDragLeave={() => setOverBin((b) => b === bin.id ? null : b)} onDrop={(e) => onBinDrop(e, bin.id)}>

{bin.label} {items.length}

{items.length === 0 && !submitted && Sleep hierheen} {items.map((it) => renderItem(it, true))}

); })}

{!submitted &&

} {submitted &&

{isCorrect ? I.check : I.x} {isCorrect ? `Alles juist. ${correctCount} van ${exercise.items.length} foto's correct gesorteerd.` : `${correctCount} van ${exercise.items.length} juist, ${wrongCount} verkeerd (in het rood). Kijk waar ze thuishoren.`}

} {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: FLASHCARD (raad → draai om) ──────────── */ function ExFlashcard({ exercise, exIdx, exTotal, onResult, onNext }) { const cards = exercise.cards || []; const options = useMemo(() => { const arr = cards.map((c) => c.back); for (let i = arr.length - 1; i > 0; i--) { const j = (i * 7 + 3) % (i + 1); [arr[i], arr[j]] = [arr[j], arr[i]]; } return arr; }, [exercise]); const [idx, setIdx] = useState(0); const [picks, setPicks] = useState({}); const [done, setDone] = useState(false); const cur = cards[idx]; const picked = picks[idx]; const answered = picked != null; const correct = answered && picked === cur.back; const allCorrect = cards.every((c, i) => picks[i] === c.back); const pick = (term) => { if (answered) return; setPicks((p) => ({ ...p, [idx]: term })); }; const next = () => { if (idx < cards.length - 1) {setIdx(idx + 1);return;} setDone(true); onResult(cards.every((c, i) => picks[i] === c.back)); }; return ( <>

{exercise.q}

{exercise.hint}

{!done && <>

Kaart {idx + 1} / {cards.length}

Welke AI-misstap is dit? {cur.front}

{correct ? "Juist" : "Niet juist"} {cur.back} {!correct && Jouw keuze: {picked}} {cur.note && {cur.note}}

{!answered ?

{options.map((opt, oi) => )}

} } {done && }

{done &&

Oefening {exIdx + 1} / {exTotal}

} ); } /* ──────────── EXERCISE: ZOEK DE FOUT (klik de foute zinnen) ──────────── */ function ExFindError({ exercise, exIdx, exTotal, onResult, onNext }) { const sentences = exercise.sentences || []; const [selected, setSelected] = useState(() => new Set()); const [submitted, setSubmitted] = useState(false); const [isCorrect, setIsCorrect] = useState(false); const toggle = (i) => { if (submitted) return; setSelected((prev) => { const n = new Set(prev); if (n.has(i)) n.delete(i);else n.add(i); return n; }); }; const check = () => { const errors = sentences.map((s, i) => s.error ? i : -1).filter((i) => i >= 0); const ok = errors.length === selected.size && errors.every((i) => selected.has(i)); setIsCorrect(ok); setSubmitted(true); onResult(ok); }; const timer = useExerciseTimer(exercise, submitted, () => check()); return ( <>

{exercise.q}

{exercise.hint}

{exercise.prompt &&

Prompt{exercise.prompt}

}

{exercise.answerLabel &&

{exercise.answerLabel}

}

{sentences.map((s, i) => { const sel = selected.has(i); let cls = "fe-sentence"; if (submitted) { if (s.error) cls += " is-error";else if (sel) cls += " is-falsepos"; } else if (sel) cls += " selected"; 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 }) { const vendor = C.branding && C.branding.vendor; const eyebrow = C.overview && C.overview.eyebrow || C.branding.appName + " · " + C.branding.moduleName; return <>

{eyebrow}

{C.welcome.title}

{C.branding.heroLogo && {C.branding.brand

}

{C.welcome.body}

{C.welcome.cta || "Bekijk de cursus"}

{C.welcome.pager}

{vendor ? Powered by

: {C.welcome.estimate}}

; } function ScreenTips({ onNext, onBack, onOpen }) { const notice = C.welcome && C.welcome.demoNotice; const [showNotice, setShowNotice] = useState(true); return <>

{C.tips.speech}

{TIPS.map((t, i) => { const clickable = !!t.action; return (

onOpen(t.action) : undefined} onKeyDown={clickable ? (e) => {if (e.key === "Enter" || e.key === " ") {e.preventDefault();onOpen(t.action);}} : undefined}>

{TIP_ICONS[t.icon]}

{t.title}

{t.desc}

{clickable && t.cta &&

{t.cta} {I.arrowRight}

}

); })}

{notice && showNotice &&

{notice.badge || "Demo"}

{notice.title} {notice.body}

}

; } /* Profielscherm — toont verdiende Sparks (per module) */ function ScreenProfile({ sparks, maxSparks, moduleSparks, progress, onBack }) { const lessons = MODULES.map((m, i) => ({ m, i })).filter((x) => x.m.kind === "lesson" && !x.m.locked); const pct = maxSparks === 0 ? 0 : Math.round(sparks / maxSparks * 100); return <>

{C.branding.userInitials}

Jouw profiel

{C.branding.userName}

⚡{sparks}

Sparks verdiend{maxSparks ? ` van ${maxSparks}` : ""}

Per module

{lessons.map(({ m, i }) =>

{m.title} {progress[i] === "done" ? <>{moduleSparks[i]} ⚡ : "nog niet"}

)}

; } function ScreenOverview({ progress, sparks, onPickModule, onBack }) { const doneCount = progress.filter((p) => p === "done").length; const nextIdx = MODULES.findIndex((m, i) => !m.locked && progress[i] !== "done"); const donePlayable = MODULES.filter((m, i) => !m.locked && progress[i] === "done").length; const playableCount = MODULES.filter((m) => !m.locked).length; const allPlayableDone = nextIdx === -1; return <>

{C.overview.eyebrow}

{C.overview.title}

{doneCount}/{MODULES.length}

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

onPickModule(i)} role={locked ? undefined : "button"} aria-disabled={locked ? "true" : undefined}>

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

{m.title}

{m.meta}

{locked ? Niet in demo : {I.chev}}

); })}

; } function ScreenVideo({ module, onNext, onBack }) { const [played, setPlayed] = useState(false); const videoRef = React.useRef(null); // stop de video (en dus het geluid) zodra je het videoscherm verlaat useEffect(() => () => { const v = videoRef.current; if (v) {try {v.pause();v.removeAttribute("src");v.load();} catch (e) {}} }, []); 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."; useEffect(() => {if (sparksEarned > 0) SFX.reward(sparksEarned);}, []); 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, "sound": 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 [profileFrom, setProfileFrom] = useState("tips"); const goProfile = () => {setProfileFrom(screen);setScreen("profile");}; const sparks = moduleSparks.reduce((a, b) => a + b, 0); const maxSparks = MODULES.filter((m) => m.kind === "lesson" && !m.locked).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) { const allPlayableDone = MODULES.every((m, idx) => m.locked || progress[idx] === "done"); if (allPlayableDone) setScreen("completion"); return; } if (MODULES[i].locked) return; // vergrendeld in de demo 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 allPlayableDone = MODULES.every((m, i) => m.locked || i === moduleIdx || progress[i] === "done"); if (allPlayableDone) 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 === "flashcard") return ; if (ex.type === "finderror") 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")} onOpen={(a) => a === "profile" ? goProfile() : setScreen("overview")} />; case "overview":return setScreen("tips")} onPickModule={goPickModule} />; case "profile":return setScreen(profileFrom)} />; 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]); useEffect(() => {SFX.setEnabled(t.sound);}, [t.sound]); 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} onProfile={goProfile} />

{renderScreen()}

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

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