`; const grid = html`

`; const bar = html`

`; const fill = bar.firstChild; const info = html`

`; const q = html`

`; const choices = html`

`; root.append(grid, bar, info, q, choices); const squares = states.map((_, k) => { const s = html`

`; s.title = `Question ${k + 1}`; grid.append(s); return s; }); const paint = () => squares.forEach((s, k) => { s.style.background = colors[states[k]]; s.style.outline = k === i && states[k] === "current" ? "2px solid #1e3a8a" : "none"; }); const updateInfo = (left) => info.innerHTML = `Question ${Math.min(i + 1, N)}/${N}⏱ ${left.toFixed(1)} sScore : ${score}`; function finish() { cancelAnimationFrame(raf); paint(); fill.style.width = "0%"; q.textContent = `Terminé ! Score : ${score}/${N}`; choices.replaceChildren(html``); choices.firstChild.onclick = () => { score = 0; i = 0; timeouts = 0; states.fill("pending"); next(0); }; info.innerHTML = `${states.filter(s=>s==="ko").length} faux · ${timeouts} temps écoulé`; } function resolve(result, btnChosen, correctText) { if (locked) return; locked = true; cancelAnimationFrame(raf); states[i] = result; if (result === "ok") score++; if (result === "timeout") timeouts++; for (const b of choices.children) { if (b.textContent === correctText) b.style.background = colors.ok; else if (b === btnChosen) b.style.background = colors.ko; b.disabled = true; } paint(); setTimeout(() => { i++; i < N ? next(i) : finish(); }, 1000); } function next(k = i) { i = k; locked = false; states[i] = "current"; paint(); const card = deck[i]; q.textContent = card.question; const wrong = d3.shuffle(source.filter((c) => c.answer !== card.answer)).slice(0, 3); const opts = d3.shuffle([card, ...wrong]); choices.replaceChildren(...opts.map((o) => { const b = html``; b.textContent = o.answer; b.onclick = () => resolve(o === card ? "ok" : "ko", b, card.answer); return b; })); t0 = performance.now(); const tick = () => { const left = Math.max(0, T - (performance.now() - t0) / 1000); fill.style.width = `${(left / T) * 100}%`; fill.style.background = left < T * 0.25 ? colors.ko : colors.current; updateInfo(left); if (left <= 0) resolve("timeout", null, card.answer); else raf = requestAnimationFrame(tick); }; tick(); } invalidation.then(() => cancelAnimationFrame(raf)); next(0); return root; })(); display(game);