3e:null 3f:["$","title",null,{"children":"AnkiGame | François Semecurbe Marouchi | Observable"}] 45:T719,const strip = (s) => String(s ?? "") .replace(/\[anki:tts[^\]]*\][\s\S]*?\[\/anki:tts\]/g, "") .replace(//gi, "\n").replace(/<[^>]+>/g, "") .replace(/\[sound:[^\]]*\]/g, "").replace(/ /g, " ") .replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").trim(); const rawCards = file ? await (async () => { if (/\.apkg$/i.test(file.name)) { const zip = await JSZip.loadAsync(await file.arrayBuffer()); const entry = zip.file("collection.anki21") ?? zip.file("collection.anki2"); if (!entry) throw new Error("Format récent (anki21b, compressé zstd) non supporté : réexportez avec « Support des anciennes versions » coché, ou exportez en .txt."); const SQL = await initSqlJs({locateFile: (f) => `https://cdn.jsdelivr.net/npm/sql.js/dist/${f}`}); const db = new SQL.Database(new Uint8Array(await entry.async("uint8array"))); const res = db.exec("SELECT flds FROM notes"); return (res[0]?.values ?? []).map(([flds]) => { const f = flds.split("\x1f"); return {question: strip(f[0]), answer: strip(f[1])}; }); } const text = await file.text(); return text.split(/\r?\n/).filter((l) => l && !l.startsWith("#")) .map((l) => l.split("\t")).filter((f) => f.length >= 2) .map((f) => ({question: strip(f[0]), answer: strip(f[1])})); })() : []; // Un texte est « vide » s'il ne contient aucune lettre ni chiffre (ex. : ") const hasContent = (s) => /[\p{L}\p{N}]/u.test(s); const cards = rawCards.filter((c) => hasContent(c.question) && hasContent(c.answer)); const removed = rawCards.length - cards.length; display(cards.length ? html`

${removed ? html`

${removed} carte(s) vide(s) ignorée(s) sur ${rawCards.length}.

` : ""}${Inputs.table(cards)}

` : md`*Chargez un fichier ci-dessus.*`);46:T10d1,const game = (() => { const demo = [ ["Capitale de la France ?", "Paris"], ["Capitale de l'Italie ?", "Rome"], ["Capitale de l'Espagne ?", "Madrid"], ["Capitale du Japon ?", "Tokyo"], ["Capitale du Canada ?", "Ottawa"], ["Capitale de l'Allemagne ?", "Berlin"] ].map(([question, answer]) => ({question, answer})); const pool = cards.filter((c) => c.question && c.answer) .map(({question, answer}) => settings.swap ? {question: answer, answer: question} : {question, answer}); const source = pool.length >= 2 ? pool : (settings.swap ? demo.map(({question, answer}) => ({question: answer, answer: question})) : demo); const deck = d3.shuffle(source.slice()).slice(0, settings.max); const N = deck.length, T = settings.seconds; const colors = {pending: "#e5e7eb", current: "#3b82f6", ok: "#22c55e", ko: "#ef4444", timeout: "#f59e0b"}; const states = Array(N).fill("pending"); let i = 0, t0 = 0, raf, score = 0, locked = false, timeouts = 0; const root = html`

`; 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);47:[] 43:{"id":"bc81953ca5bbeb2f","slug":"anki-game","title":"AnkiGame","thumbnail":"44c11c359971f6f0d20c661185ebc2203bc7ceda74c905bee8bf50e50455d71f","access_level":"public","create_time":"$D2026-10-14T14:14:56.665Z","update_time":"$D2026-10-14T14:39:20.431Z","view_time":null,"first_public_time":"$D2026-10-14T14:29:43.087Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a261a4d0e56d5c12","login":"francoissemecurbe","name":"François Semecurbe Marouchi","avatar_url":"https://avatars-next.observableusercontent.com/e9dbffb2726fbe600ac7c6cbc3f60edc7a936784f98fcb9a774a6d8a0753ad58","tier":"starter_2024","bio":"I have a PhD in geography and I am a spatial data enthusiast. I encourage map making and fractal analysis to explain the world."},"version":45,"publish_version":45,"role":null,"authored":false,"authors":[{"type":"individual","id":"e6b913503c398332","login":"francoissemecurbe","name":"François Semecurbe Marouchi","avatar_url":"https://avatars-next.observableusercontent.com/e9dbffb2726fbe600ac7c6cbc3f60edc7a936784f98fcb9a774a6d8a0753ad58","tier":null,"bio":"I have a PhD in geography and I am a spatial data enthusiast. I encourage map making and fractal analysis to explain the world."}],"members":[{"type":"team","id":"a261a4d0e56d5c12","login":"francoissemecurbe","name":"François Semecurbe Marouchi","avatar_url":"https://avatars-next.observableusercontent.com/e9dbffb2726fbe600ac7c6cbc3f60edc7a936784f98fcb9a774a6d8a0753ad58","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"AnkiGame","cells":[{"id":11,"value":"# AnkiGame","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"const file = view(Inputs.file({label: \"Fichier Anki (.apkg ou .txt)\", accept: \".apkg,.txt,.tsv,.csv\"}));","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"File picker","tool":{"id":"toolu_01XFXoHTCdkC1PQBe67qi9Hw","name":"execute"},"providerMetadata":{"anthropic":{"caller":{"type":"direct"}}},"attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import JSZip from \"npm:jszip\";\nimport initSqlJs from \"npm:sql.js\";","pinned":false,"hidden":true,"mode":"js","author":"agent","summary":"Import libraries","tool":{"id":"toolu_01NqRb6hLWLQNxse4MRhi31a","name":"execute"},"providerMetadata":{"anthropic":{"caller":{"type":"direct"}}},"attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$45","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Parse Anki file into cards","tool":{"id":"toolu_01AoHmx1PdAMsqtX2jyCLG6t","name":"execute"},"providerMetadata":{"anthropic":{"caller":{"type":"direct"}}},"attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"const settings = view(Inputs.form({\n seconds: Inputs.range([5, 60], {label: \"Secondes par question\", step: 1, value: 15}),\n max: Inputs.range([5, 100], {label: \"Nombre de questions\", step: 1, value: 20}),\n swap: Inputs.toggle({label: \"Inverser questions/réponses\", value: true})\n}));","pinned":false,"hidden":false,"mode":"ts","author":"agent","summary":"Game settings","tool":{"id":"toolu_01HUBFq7WNyNVf7Zk7eSyrjV","name":"execute"},"providerMetadata":{"anthropic":{"caller":{"type":"direct"}}},"attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$46","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Quiz game with squares and timer","tool":{"id":"toolu_01XBE7mFz9RPGRURDM63Zjcr","name":"execute"},"providerMetadata":{"anthropic":{"caller":{"type":"direct"}}},"attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"2"}} 44:"$43:body"