domma-cms 1.8.31 → 1.8.32

package/plugins/crossword/public/lib/layout.js

@@ -0,0 +1,199 @@
+/**
+ * Crossword - laying words out in a grid. PURE, and isomorphic: the admin
+ * builder runs it in the browser for a live preview, the server runs it again
+ * to check what it is given. It holds no puzzle, so it is safe to serve.
+ *
+ *   cleanAnswer("New York")      -> {letters: 'NEWYORK', enumeration: '3,4'}
+ *   generate(words, {seed})      -> {width, height, entries, unplaced}
+ *   solutionGrid(layout)         -> rows of letters ('' = a black square), or throws if entries clash
+ *   numberEntries(entries)       -> entries numbered in reading order
+ *
+ * The generator is greedy: longest words first, each placed where it crosses
+ * the most letters already down without touching any other word side by side,
+ * keeping the grid as square as it can. It tries a number of shuffles from the
+ * seed and keeps the best, so the same seed always gives the same grid.
+ *
+ * @module crossword/public/lib/layout
+ */
+
+export const MAX_WORDS = 60;
+export const MAX_LETTERS = 21;
+export const MIN_LETTERS = 2;
+
+/** Letters only, upper case, accents folded; the word lengths for the clue, e.g. "(3,4)". */
+export function cleanAnswer(raw) {
+    const words = String(raw ?? '').normalize('NFKD').replace(/[̀-ͯ]/g, '').toUpperCase()
+        .split(/[\s-]+/).map(w => w.replace(/[^A-Z]/g, '')).filter(Boolean);
+    const letters = words.join('');
+    const hyphenated = /-/.test(String(raw ?? ''));
+    return {letters, enumeration: words.map(w => w.length).join(hyphenated ? '-' : ',')};
+}
+
+/** A small seeded random (mulberry32), so a seed always lays out the same grid. */
+export function seeded(seed) {
+    let a = (Number(seed) >>> 0) || 1;
+    return () => {
+        a = (a + 0x6D2B79F5) >>> 0;
+        let t = a;
+        t = Math.imul(t ^ (t >>> 15), t | 1);
+        t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+        return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+    };
+}
+
+const key = (r, c) => `${r},${c}`;
+const DIRS = {across: [0, 1], down: [1, 0]};
+
+/** One attempt: words in this order, placed greedily on an open board. */
+function attempt(words) {
+    const cells = new Map();   // "r,c" -> {ch, across: bool, down: bool}
+    const placed = [];
+    const unplaced = [];
+    let box = {r0: 0, r1: -1, c0: 0, c1: -1};
+
+    const at = (r, c) => cells.get(key(r, c));
+
+    function fits(w, r, c, dir) {
+        const [dr, dc] = DIRS[dir];
+        // The squares just before and after the word must be empty.
+        if (at(r - dr, c - dc) || at(r + dr * w.length, c + dc * w.length)) return -1;
+        let crossings = 0;
+        for (let i = 0; i < w.length; i++) {
+            const rr = r + dr * i;
+            const cc = c + dc * i;
+            const cell = at(rr, cc);
+            if (cell) {
+                if (cell.ch !== w[i] || cell[dir]) return -1;
+                crossings++;
+                continue;
+            }
+            // An empty square must not sit beside another word's letter (side by side, parallel).
+            if (at(rr + dc, cc + dr) || at(rr - dc, cc - dr)) return -1;
+        }
+        return crossings;
+    }
+
+    function put(w, r, c, dir, item) {
+        const [dr, dc] = DIRS[dir];
+        for (let i = 0; i < w.length; i++) {
+            const k = key(r + dr * i, c + dc * i);
+            const cell = cells.get(k) || {ch: w[i], across: false, down: false};
+            cell[dir] = true;
+            cells.set(k, cell);
+        }
+        const r1 = r + dr * (w.length - 1);
+        const c1 = c + dc * (w.length - 1);
+        box = placed.length
+            ? {r0: Math.min(box.r0, r), r1: Math.max(box.r1, r1), c0: Math.min(box.c0, c), c1: Math.max(box.c1, c1)}
+            : {r0: r, r1, c0: c, c1};
+        placed.push({...item, row: r, col: c, dir});
+    }
+
+    let queue = [...words];
+    let progress = true;
+    // Words that could not cross anything yet get another chance once more are down.
+    while (queue.length && progress) {
+        progress = false;
+        const left = [];
+        for (const item of queue) {
+            const w = item.letters;
+            if (!placed.length) { put(w, 0, 0, 'across', item); progress = true; continue; }
+            let best = null;
+            for (const [k, cell] of cells) {
+                const [cr, cc] = k.split(',').map(Number);
+                for (let i = 0; i < w.length; i++) {
+                    if (w[i] !== cell.ch) continue;
+                    for (const dir of ['across', 'down']) {
+                        if (cell[dir]) continue;
+                        const [dr, dc] = DIRS[dir];
+                        const r = cr - dr * i;
+                        const c = cc - dc * i;
+                        const crossings = fits(w, r, c, dir);
+                        if (crossings < 1) continue;
+                        const r1 = r + dr * (w.length - 1);
+                        const c1 = c + dc * (w.length - 1);
+                        const h = Math.max(box.r1, r1) - Math.min(box.r0, r) + 1;
+                        const wd = Math.max(box.c1, c1) - Math.min(box.c0, c) + 1;
+                        // More crossings, then a smaller, squarer grid.
+                        const score = crossings * 100 - (h * wd) / 4 - Math.abs(h - wd) * 2;
+                        if (!best || score > best.score) best = {score, r, c, dir};
+                    }
+                }
+            }
+            if (best) { put(w, best.r, best.c, best.dir, item); progress = true; }
+            else left.push(item);
+        }
+        queue = left;
+    }
+    unplaced.push(...queue);
+    return {placed, unplaced, box, crossings: [...cells.values()].filter(c => c.across && c.down).length};
+}
+
+/** Entries numbered in reading order: a square that starts any entry gets the next number. */
+export function numberEntries(entries) {
+    const starts = [...new Set(entries.map(e => key(e.row, e.col)))]
+        .map(k => k.split(',').map(Number)).sort((a, b) => a[0] - b[0] || a[1] - b[1]);
+    const num = new Map(starts.map(([r, c], i) => [key(r, c), i + 1]));
+    return entries.map(e => ({...e, number: num.get(key(e.row, e.col))}))
+        .sort((a, b) => (a.dir === b.dir ? a.number - b.number : a.dir === 'across' ? -1 : 1));
+}
+
+/**
+ * A layout from a list of {answer, clue}.
+ *
+ * @param {{answer: string, clue: string}[]} words
+ * @param {{seed?: number, tries?: number}} [opts]
+ * @returns {{width: number, height: number, entries: object[], unplaced: object[], seed: number}}
+ */
+export function generate(words, {seed = 1, tries = 40} = {}) {
+    const items = [];
+    const seen = new Set();
+    for (const w of (words || []).slice(0, MAX_WORDS)) {
+        const {letters, enumeration} = cleanAnswer(w?.answer);
+        if (letters.length < MIN_LETTERS || letters.length > MAX_LETTERS || seen.has(letters)) continue;
+        seen.add(letters);
+        items.push({answer: String(w.answer).trim(), letters, enumeration, clue: String(w?.clue ?? '').trim()});
+    }
+    if (!items.length) return {width: 0, height: 0, entries: [], unplaced: [], seed};
+
+    const rand = seeded(seed);
+    let best = null;
+    for (let t = 0; t < Math.max(1, tries); t++) {
+        // The first try is longest-first; the rest shuffle words of similar length.
+        const order = items.map(it => ({it, k: it.letters.length + (t ? rand() * 4 : 0)})).sort((a, b) => b.k - a.k).map(x => x.it);
+        const res = attempt(order);
+        const h = res.box.r1 - res.box.r0 + 1;
+        const w = res.box.c1 - res.box.c0 + 1;
+        const score = res.placed.length * 1000 + res.crossings * 10 - h * w / 2 - Math.abs(h - w) * 3;
+        if (!best || score > best.score) best = {...res, score, h, w};
+    }
+    const entries = numberEntries(best.placed.map(p => ({
+        answer: p.answer, letters: p.letters, enumeration: p.enumeration, clue: p.clue,
+        row: p.row - best.box.r0, col: p.col - best.box.c0, dir: p.dir
+    })));
+    return {width: best.w, height: best.h, entries, unplaced: best.unplaced.map(u => ({answer: u.answer, clue: u.clue})), seed};
+}
+
+/**
+ * The solution as rows of letters ('' = black). Throws when the entries do
+ * not fit the size or disagree about a square - a layout from anywhere but
+ * generate() is checked this way before it is saved.
+ */
+export function solutionGrid({width, height, entries}) {
+    const grid = Array.from({length: height}, () => Array(width).fill(''));
+    for (const e of entries) {
+        const [dr, dc] = DIRS[e.dir] || [];
+        if (dr === undefined) throw new Error('An entry has no direction.');
+        for (let i = 0; i < e.letters.length; i++) {
+            const r = e.row + dr * i;
+            const c = e.col + dc * i;
+            if (r < 0 || c < 0 || r >= height || c >= width) throw new Error(`"${e.answer}" runs off the grid.`);
+            if (grid[r][c] && grid[r][c] !== e.letters[i]) throw new Error(`"${e.answer}" clashes with another answer.`);
+            grid[r][c] = e.letters[i];
+        }
+    }
+    return grid;
+}
+
+/** The grid's shape for the player: '#' black, '.' a square to fill - no letters. */
+export const shapeOf = (grid) => grid.map(row => row.map(ch => (ch ? '.' : '#')).join(''));

package/plugins/quiz/admin/css/index.css

@@ -0,0 +1 @@
+.qza-questions{display:flex;flex-direction:column;gap:.75rem}.qza-question{border:1px solid var(--gma-line);border-left:4px solid var(--dm-primary);border-radius:var(--dm-radius-md, 8px);padding:.85rem 1rem;display:flex;flex-direction:column;gap:.6rem;background:var(--dm-background, transparent)}.qza-question .form-select{width:auto}.qza-answers{display:flex;flex-direction:column;gap:.4rem}.qza-answer{display:flex;align-items:center;gap:.5rem;padding:.25rem .4rem;border-radius:6px}.qza-answer.is-right{background:color-mix(in srgb,var(--dm-success) 12%,transparent)}.qza-answer .form-input{flex:1;min-width:0}.qza-mark{display:inline-flex;align-items:center;cursor:pointer;padding:.2rem}.qza-mark input{width:1.1rem;height:1.1rem;accent-color:var(--dm-success)}.qza-fixed{flex:1;font-weight:500}.qza-more summary{cursor:pointer;color:var(--dm-text-muted);font-size:var(--dm-text-sm);margin-bottom:.5rem}

package/plugins/quiz/admin/templates/quiz.html

@@ -0,0 +1 @@
+<div class="gma qza" data-quiz-admin></div>

package/plugins/quiz/admin/views/quiz.js

@@ -0,0 +1,352 @@
+/**
+ * Quiz - the Tool. One view, three screens by address:
+ *
+ *   #/plugins/quiz                 every quiz
+ *   #/plugins/quiz/new             a new quiz
+ *   #/plugins/quiz/edit/<id>       a quiz and its questions
+ *   #/plugins/quiz/plays/<id>      who played it, and its leaderboard
+ *
+ * Route params are read from the hash (Domma's router passes none).
+ */
+
+import {bannerTrail, copyText, errText, esc, field, h, icon, loadKit, playsScreen, refreshBadge, request, toggle, toLocalInput, fromLocalInput} from '/plugins/_lib/admin/games/kit.js';
+
+const API = '/plugins/quiz';
+const SIDEBAR = '#/plugins/quiz';
+const ROUTE = /^#\/plugins\/quiz(\/|\?|$)/;
+
+const KIND_LABEL = {single: 'One right answer', multiple: 'More than one right answer', truefalse: 'True or false', text: 'Type the answer'};
+const STATUS_LABEL = {draft: 'Draft', open: 'Open', closed: 'Closed'};
+const STATUS_TONE = {draft: '', open: 'is-success', closed: 'is-warning'};
+const SHOW_LABEL = {end: 'At the end', 'after-each': 'After each question', never: 'Never'};
+
+let lifetime = null;
+let leaveGuard = null;
+
+function where() {
+    const m = location.hash.split('?')[0].match(/^#\/plugins\/quiz(?:\/([a-z]+))?(?:\/([^/?#]+))?/);
+    return {screen: m?.[1] || 'list', id: m?.[2] ? decodeURIComponent(m[2]) : ''};
+}
+
+const badge = () => refreshBadge(SIDEBAR);
+const shortcodeOf = (slug) => `[quiz id="${slug}" /]`;
+
+export const quizView = {
+    templateUrl: '/plugins/quiz/admin/templates/quiz.html',
+
+    async onMount($container) {
+        const kit = await loadKit();
+        lifetime ??= kit.viewLifetime(ROUTE);
+        if (!ROUTE.test(location.hash)) return;
+        lifetime.reset();
+        if (leaveGuard) { window.removeEventListener('beforeunload', leaveGuard); leaveGuard = null; }
+        const container = $container.get(0);
+        const root = container.querySelector('[data-quiz-admin]') || container;
+        const {screen, id} = where();
+
+        if (screen === 'plays' && id) {
+            let title = 'Plays';
+            try { title = (await request('GET', `${API}/quizzes/${encodeURIComponent(id)}`)).title; } catch { /* the screen says so */ }
+            bannerTrail(container, [{text: 'Quiz', href: SIDEBAR}, {text: `${title}: plays`}]);
+            kit.addBannerAction($container, {id: 'quiz-edit', icon: 'edit', title: 'Edit this quiz', onClick: () => { location.hash = `#/plugins/quiz/edit/${encodeURIComponent(id)}`; }});
+            return playsScreen(root, {api: API, gameId: id, title, order: 'score', back: SIDEBAR, base: '/quizzes', badge});
+        }
+        if (screen === 'new' || (screen === 'edit' && id)) return editor(root, container, $container, kit, screen === 'new' ? '' : id);
+        return list(root, container, $container, kit);
+    }
+};
+
+// ---- The list ----------------------------------------------------------------------
+
+async function list(root, container, $container, kit) {
+    bannerTrail(container, [{text: 'Quiz'}]);
+    kit.addBannerAction($container, {id: 'quiz-new', icon: 'plus', title: 'New quiz', onClick: () => { location.hash = '#/plugins/quiz/new'; }});
+    root.innerHTML = '';
+    const slot = h('div', {className: 'gma-note dm-loading-slot', text: 'Loading…'});
+    root.append(slot);
+    let quizzes;
+    try {
+        quizzes = (await kit.whileLoading(slot, request('GET', `${API}/quizzes`), kit.SHAPES.rows)).quizzes || [];
+    } catch (err) {
+        root.innerHTML = '';
+        root.append(h('p', {className: 'gma-error', text: `Quiz could not load: ${errText(err)}`}));
+        return;
+    }
+
+    const draw = () => {
+        root.innerHTML = '';
+        root.append(h('div', {className: 'gma-bar'},
+            h('a', {className: 'btn btn-sm btn-primary', href: '#/plugins/quiz/new'}, icon('plus'), ' New quiz'),
+            h('span', {className: 'gma-spacer'}),
+            h('span', {className: 'gma-note', text: 'Put a quiz on any page with its shortcode. The leaderboard can go on its own too.'})));
+        if (!quizzes.length) {
+            root.append(h('div', {className: 'gma-empty'}, icon('help-circle', 30),
+                h('p', {}, h('strong', {text: 'No quizzes yet.'}), h('br'), 'Make one, add questions, open it, then put its shortcode on a page.'),
+                h('a', {className: 'btn btn-primary', href: '#/plugins/quiz/new'}, 'Make a quiz')));
+            I.scan(root);
+            return;
+        }
+        root.append(h('div', {className: 'gma-list'}, quizzes.map(q => h('div', {className: 'gma-row'},
+            h('div', {className: 'gma-row-main'},
+                h('div', {}, h('a', {href: `#/plugins/quiz/edit/${encodeURIComponent(q.id)}`, text: q.title}),
+                    h('span', {className: `gma-chip ${STATUS_TONE[q.status] || ''}`, text: STATUS_LABEL[q.status] || q.status})),
+                h('small', {text: [`${q.questions} question${q.questions === 1 ? '' : 's'}`, `${q.finished} finished of ${q.plays} play${q.plays === 1 ? '' : 's'}`,
+                    q.finished ? `best ${q.best}` : '', shortcodeOf(q.slug)].filter(Boolean).join(' · ')})),
+            h('div', {className: 'gma-row-actions'},
+                h('a', {className: 'btn btn-sm btn-ghost', href: `#/plugins/quiz/edit/${encodeURIComponent(q.id)}`}, icon('edit'), ' Edit'),
+                h('a', {className: 'btn btn-sm btn-ghost', href: `#/plugins/quiz/plays/${encodeURIComponent(q.id)}`}, icon('award'), ' Plays'),
+                h('button', {type: 'button', className: 'btn btn-sm btn-ghost', title: 'Copy the shortcode', onClick: () => copyText(shortcodeOf(q.slug), 'Shortcode copied')}, icon('copy')),
+                h('button', {type: 'button', className: 'btn btn-sm btn-ghost', title: 'Make a copy', onClick: () => duplicate(q)}, icon('layers')),
+                h('button', {type: 'button', className: 'btn btn-sm btn-ghost gma-danger-text', title: 'Delete', onClick: () => remove(q)}, icon('trash')))))));
+        I.scan(root);
+    };
+
+    async function duplicate(q) {
+        try {
+            const copy = await request('POST', `${API}/quizzes/${encodeURIComponent(q.id)}/copy`);
+            E.toast(`Copied as "${copy.title}" (a draft).`, {type: 'success'});
+            quizzes = (await request('GET', `${API}/quizzes`)).quizzes || [];
+            draw();
+        } catch (err) { E.toast(errText(err), {type: 'error'}); }
+    }
+
+    async function remove(q) {
+        if (!await E.confirm(`Delete the quiz <strong>${esc(q.title)}</strong>? Its ${q.plays} play${q.plays === 1 ? '' : 's'} and leaderboard go with it. Pages that show it will say it is not available.`)) return;
+        try {
+            await request('DELETE', `${API}/quizzes/${encodeURIComponent(q.id)}`);
+            quizzes = quizzes.filter(x => x.id !== q.id);
+            draw();
+            badge();
+            E.toast(`${q.title} deleted.`, {type: 'success'});
+        } catch (err) { E.toast(errText(err), {type: 'error'}); }
+    }
+
+    draw();
+}
+
+// ---- The editor --------------------------------------------------------------------
+
+const blankQuiz = () => ({
+    title: '', slug: '', intro: '', status: 'draft', opensAt: '', closesAt: '', timeLimit: 0, questionSeconds: 0,
+    shuffleQuestions: false, shuffleOptions: true, draw: 0, showAnswers: 'end', leaderboard: true, leaderboardSize: 10, attemptsPerName: 0,
+    questions: []
+});
+const qid = () => Math.random().toString(36).slice(2, 10);
+const blankQuestion = (kind = 'single') => ({
+    id: qid(), kind, text: '', image: '', points: 1, seconds: 0, explanation: '', accepted: [],
+    options: kind === 'truefalse' ? [{id: 'true', text: 'True', correct: true}, {id: 'false', text: 'False', correct: false}]
+        : kind === 'text' ? [] : [{id: qid(), text: '', correct: true}, {id: qid(), text: '', correct: false}]
+});
+
+async function editor(root, container, $container, kit, id) {
+    root.innerHTML = '';
+    let quiz = blankQuiz();
+    if (id) {
+        const slot = h('div', {className: 'gma-note dm-loading-slot', text: 'Loading…'});
+        root.append(slot);
+        try {
+            quiz = {...blankQuiz(), ...await kit.whileLoading(slot, request('GET', `${API}/quizzes/${encodeURIComponent(id)}`), kit.SHAPES.rows)};
+        } catch (err) {
+            root.innerHTML = '';
+            root.append(h('p', {className: 'gma-error', text: `That quiz could not load: ${errText(err)}`}), h('a', {href: SIDEBAR, text: 'Back to Quiz'}));
+            return;
+        }
+    }
+    bannerTrail(container, [{text: 'Quiz', href: SIDEBAR}, {text: id ? quiz.title : 'New quiz'}]);
+    if (id) kit.addBannerAction($container, {id: 'quiz-plays', icon: 'award', title: 'Plays and leaderboard', onClick: () => { location.hash = `#/plugins/quiz/plays/${encodeURIComponent(id)}`; }});
+
+    const snapshot = () => JSON.stringify(quiz);
+    let saved = snapshot();
+    const dirty = () => snapshot() !== saved;
+    leaveGuard = (e) => { if (dirty() && ROUTE.test(location.hash)) { e.preventDefault(); e.returnValue = ''; } };
+    window.addEventListener('beforeunload', leaveGuard);
+    lifetime.add(() => { window.removeEventListener('beforeunload', leaveGuard); leaveGuard = null; });
+
+    const dirtyNote = h('span', {className: 'is-dirty', hidden: true, text: 'Unsaved changes'});
+    const errorBox = h('p', {className: 'gma-error', hidden: true, role: 'alert'});
+    const touched = () => { dirtyNote.hidden = !dirty(); };
+
+    // Text inputs write straight into `quiz`; numbers as numbers.
+    const input = (key, attrs = {}, obj = quiz) => h('input', {className: 'form-input', value: obj[key] ?? '', ...attrs,
+        onInput: (e) => { obj[key] = attrs.type === 'number' ? Number(e.target.value) || 0 : e.target.value; touched(); }});
+    const textarea = (key, rows = 3, obj = quiz, attrs = {}) => h('textarea', {className: 'form-input', rows, ...attrs,
+        onInput: (e) => { obj[key] = e.target.value; touched(); }}, obj[key] || '');
+    const select = (key, options, obj = quiz, onChange = null) => {
+        const el = h('select', {className: 'form-select', onChange: (e) => { obj[key] = e.target.value; touched(); onChange?.(e.target.value); }},
+            Object.entries(options).map(([v, label]) => h('option', {value: v, text: label})));
+        el.value = obj[key];
+        return el;
+    };
+
+    const shortcode = h('code');
+    const showShortcode = () => { shortcode.textContent = quiz.slug ? shortcodeOf(quiz.slug) : 'Saved quizzes get a shortcode'; };
+    showShortcode();
+
+    const minutes = h('input', {className: 'form-input', type: 'number', min: 0, step: 0.5, value: quiz.timeLimit ? quiz.timeLimit / 60 : 0,
+        onInput: (e) => { quiz.timeLimit = Math.round((Number(e.target.value) || 0) * 60); touched(); }});
+    const opens = h('input', {className: 'form-input', type: 'datetime-local', value: toLocalInput(quiz.opensAt), onInput: (e) => { quiz.opensAt = fromLocalInput(e.target.value); touched(); }});
+    const closes = h('input', {className: 'form-input', type: 'datetime-local', value: toLocalInput(quiz.closesAt), onInput: (e) => { quiz.closesAt = fromLocalInput(e.target.value); touched(); }});
+
+    const details = h('section', {className: 'gma-card'},
+        h('h3', {className: 'gma-h', text: 'The quiz'}),
+        h('div', {className: 'gma-grid'},
+            field('Title', input('title', {maxlength: 120, placeholder: 'Capital cities'})),
+            field('Short name', input('slug', {maxlength: 60, placeholder: 'made from the title'}), 'Used in the shortcode. Letters, numbers and hyphens.'),
+            field('Status', select('status', STATUS_LABEL), 'Only an open quiz can be played. A draft is not shown at all.')),
+        field('Introduction', textarea('intro', 3), 'Shown above the Start button.'),
+        h('div', {className: 'gma-grid'},
+            field('Opens', opens, 'Optional. Open quizzes can be played from this time.'),
+            field('Closes', closes, 'Optional. After this, it shows the leaderboard but cannot be played.')),
+        h('div', {className: 'gma-shortcode'}, h('span', {className: 'gma-muted', text: 'Shortcode:'}), shortcode,
+            h('button', {type: 'button', className: 'btn btn-xs btn-ghost', onClick: () => quiz.slug && copyText(shortcodeOf(quiz.slug), 'Shortcode copied')}, icon('copy'), ' Copy')));
+
+    const rules = h('section', {className: 'gma-card'},
+        h('h3', {className: 'gma-h', text: 'Rules and leaderboard'}),
+        h('div', {className: 'gma-grid'},
+            field('Time for the whole quiz (minutes)', minutes, '0 = no limit. When it runs out the quiz ends with what they have.'),
+            field('Seconds for each question', input('questionSeconds', {type: 'number', min: 0, max: 3600}), '0 = no limit. A question can set its own.'),
+            field('Ask this many questions', input('draw', {type: 'number', min: 0}), '0 = all of them. Fewer picks a random set for each player.'),
+            field('Goes each (per name)', input('attemptsPerName', {type: 'number', min: 0, max: 100}), '0 = as many as they like.'),
+            field('Show the right answers', select('showAnswers', SHOW_LABEL)),
+            field('Leaderboard size', input('leaderboardSize', {type: 'number', min: 3, max: 100}))),
+        h('div', {className: 'gma-grid'},
+            toggle('Shuffle the questions', quiz.shuffleQuestions, (v) => { quiz.shuffleQuestions = v; touched(); }),
+            toggle('Shuffle the answers', quiz.shuffleOptions, (v) => { quiz.shuffleOptions = v; touched(); }),
+            toggle('Show a leaderboard', quiz.leaderboard, (v) => { quiz.leaderboard = v; touched(); }, 'Highest score wins; the faster time breaks a tie.')));
+
+    const qList = h('div', {className: 'qza-questions'});
+    const qCount = h('span', {className: 'gma-muted'});
+    const questions = h('section', {className: 'gma-card'},
+        h('div', {className: 'gma-bar'}, h('h3', {className: 'gma-h', text: 'Questions'}), qCount, h('span', {className: 'gma-spacer'}),
+            h('button', {type: 'button', className: 'btn btn-sm btn-primary', onClick: () => addQuestion('single')}, icon('plus'), ' Add a question')),
+        qList,
+        h('div', {className: 'gma-bar'},
+            h('button', {type: 'button', className: 'btn btn-sm btn-outline', onClick: () => addQuestion('single')}, icon('plus'), ' Add a question')));
+
+    function addQuestion(kind) {
+        quiz.questions.push(blankQuestion(kind));
+        drawQuestions();
+        touched();
+        qList.lastElementChild?.querySelector('textarea')?.focus();
+    }
+
+    function move(i, by) {
+        const j = i + by;
+        if (j < 0 || j >= quiz.questions.length) return;
+        [quiz.questions[i], quiz.questions[j]] = [quiz.questions[j], quiz.questions[i]];
+        drawQuestions();
+        touched();
+    }
+
+    function questionCard(q, i) {
+        const n = quiz.questions.length;
+        const head = h('div', {className: 'gma-bar'},
+            h('strong', {text: `Question ${i + 1}`}),
+            select('kind', KIND_LABEL, q, (kind) => {
+                // A change of kind keeps what still makes sense.
+                if (kind === 'truefalse') q.options = blankQuestion('truefalse').options;
+                else if (kind === 'text') { q.accepted = q.accepted?.length ? q.accepted : q.options.filter(o => o.correct && o.text).map(o => o.text); q.options = []; }
+                else if (!q.options.length || q.options[0].id === 'true') q.options = blankQuestion('single').options;
+                if (kind === 'single' && q.options.filter(o => o.correct).length > 1) q.options.forEach((o, k) => { o.correct = k === q.options.findIndex(x => x.correct); });
+                drawQuestions();
+            }),
+            h('span', {className: 'gma-spacer'}),
+            h('button', {type: 'button', className: 'btn btn-xs btn-ghost', title: 'Move up', disabled: i === 0, onClick: () => move(i, -1)}, icon('arrow-up')),
+            h('button', {type: 'button', className: 'btn btn-xs btn-ghost', title: 'Move down', disabled: i === n - 1, onClick: () => move(i, 1)}, icon('arrow-down')),
+            h('button', {type: 'button', className: 'btn btn-xs btn-ghost', title: 'Copy this question', onClick: () => {
+                quiz.questions.splice(i + 1, 0, {...structuredClone(q), id: qid(), options: q.options.map(o => ({...o, id: o.id === 'true' || o.id === 'false' ? o.id : qid()}))});
+                drawQuestions(); touched();
+            }}, icon('copy')),
+            h('button', {type: 'button', className: 'btn btn-xs btn-ghost gma-danger-text', title: 'Delete this question', onClick: async () => {
+                if (q.text && !await E.confirm(`Delete question ${i + 1}?`)) return;
+                quiz.questions.splice(i, 1);
+                drawQuestions(); touched();
+            }}, icon('trash')));
+
+        const answers = h('div', {className: 'qza-answers'});
+        if (q.kind === 'text') {
+            const acc = h('textarea', {className: 'form-input', rows: 3, placeholder: 'Tokyo',
+                onInput: (e) => { q.accepted = e.target.value.split('\n'); touched(); }}, (q.accepted || []).join('\n'));
+            answers.append(field('Accepted answers, one a line', acc, 'Capitals, accents, spaces, punctuation and a leading "the" do not matter.'));
+        } else {
+            const group = `qz-${q.id}`;
+            answers.append(h('p', {className: 'gma-note', text: q.kind === 'multiple' ? 'Tick every right answer.' : 'Choose the right answer.'}));
+            q.options.forEach((o, k) => {
+                const mark = h('input', {type: q.kind === 'multiple' ? 'checkbox' : 'radio', name: group, checked: o.correct, title: 'Right answer',
+                    onChange: (e) => {
+                        if (q.kind === 'multiple') o.correct = e.target.checked;
+                        else q.options.forEach(x => { x.correct = x === o; });
+                        touched();
+                    }});
+                const text = q.kind === 'truefalse'
+                    ? h('span', {className: 'qza-fixed', text: o.text})
+                    : h('input', {className: 'form-input', value: o.text, maxlength: 200, placeholder: `Answer ${k + 1}`, onInput: (e) => { o.text = e.target.value; touched(); }});
+                answers.append(h('div', {className: `qza-answer${o.correct ? ' is-right' : ''}`},
+                    h('label', {className: 'qza-mark'}, mark, h('span', {className: 'sr-only', text: 'Right answer'})), text,
+                    q.kind !== 'truefalse' ? h('button', {type: 'button', className: 'btn btn-xs btn-ghost', title: 'Remove this answer', disabled: q.options.length <= 2,
+                        onClick: () => { q.options.splice(k, 1); drawQuestions(); touched(); }}, icon('x')) : null));
+                mark.addEventListener('change', () => answers.querySelectorAll('.qza-answer').forEach((row, r) => row.classList.toggle('is-right', q.options[r]?.correct)));
+            });
+            if (q.kind !== 'truefalse' && q.options.length < 8) {
+                answers.append(h('button', {type: 'button', className: 'btn btn-xs btn-ghost', onClick: () => {
+                    q.options.push({id: qid(), text: '', correct: false}); drawQuestions(); touched();
+                    qList.children[i]?.querySelectorAll('.qza-answer input.form-input')[q.options.length - 1]?.focus();
+                }}, icon('plus'), ' Add an answer'));
+            }
+        }
+
+        return h('div', {className: 'qza-question', dataset: {id: q.id}},
+            head,
+            field('Question', textarea('text', 2, q, {maxlength: 1000, placeholder: 'What is the capital of Japan?'})),
+            answers,
+            h('details', {className: 'qza-more', open: Boolean(q.image || q.explanation || q.seconds || q.points !== 1)},
+                h('summary', {text: 'Points, time, picture and explanation'}),
+                h('div', {className: 'gma-grid'},
+                    field('Points', input('points', {type: 'number', min: 0, max: 100}, q)),
+                    field('Seconds for this question', input('seconds', {type: 'number', min: 0, max: 3600}, q), '0 = the quiz\'s own setting.'),
+                    field('Picture (address)', input('image', {placeholder: '/media/…', maxlength: 500}, q), 'A picture from Media, or an https:// address.')),
+                field('Explanation', textarea('explanation', 2, q, {maxlength: 1000}), 'Shown with the right answer, when the quiz shows answers.')));
+    }
+
+    function drawQuestions() {
+        qList.innerHTML = '';
+        quiz.questions.forEach((q, i) => qList.append(questionCard(q, i)));
+        if (!quiz.questions.length) qList.append(h('p', {className: 'gma-muted', text: 'No questions yet.'}));
+        const total = quiz.questions.reduce((s, q) => s + (Number(q.points) || 0), 0);
+        qCount.textContent = quiz.questions.length ? `${quiz.questions.length} · ${total} point${total === 1 ? '' : 's'}` : '';
+        I.scan(qList);
+    }
+
+    const saveBtn = h('button', {type: 'button', className: 'btn btn-primary', onClick: () => save()}, icon('check'), ' Save');
+    const bar = h('div', {className: 'gma-save'}, saveBtn,
+        h('a', {className: 'btn btn-ghost', href: SIDEBAR, text: 'Back to the list'}), dirtyNote, h('span', {className: 'gma-spacer'}), errorBox);
+
+    async function save() {
+        errorBox.hidden = true;
+        saveBtn.disabled = true;
+        const body = {...quiz, questions: quiz.questions.map(q => ({...q, accepted: (q.accepted || []).map(a => a.trim()).filter(Boolean)}))};
+        try {
+            const out = id ? await request('PUT', `${API}/quizzes/${encodeURIComponent(id)}`, body) : await request('POST', `${API}/quizzes`, body);
+            quiz = {...blankQuiz(), ...out};
+            saved = snapshot();
+            touched();
+            showShortcode();
+            E.toast(`${out.title} saved.`, {type: 'success'});
+            if (!id) { location.hash = `#/plugins/quiz/edit/${encodeURIComponent(out.id)}`; return; }
+            bannerTrail(container, [{text: 'Quiz', href: SIDEBAR}, {text: out.title}]);
+            drawQuestions();
+        } catch (err) {
+            errorBox.textContent = errText(err);
+            errorBox.hidden = false;
+        } finally {
+            saveBtn.disabled = false;
+        }
+    }
+
+    root.innerHTML = '';
+    root.append(details, rules, questions, bar);
+    drawQuestions();
+    I.scan(root);
+    if (!id) details.querySelector('input')?.focus();
+}
+

package/plugins/quiz/collections/quiz-plays.json

@@ -0,0 +1,20 @@
+{
+  "slug": "quiz-plays",
+  "title": "Quiz - Plays",
+  "description": "Every go at a quiz: the name, the score and the time. Look at them in Quiz, not here.",
+  "plugin": "quiz",
+  "fields": [
+    {"name": "gameId", "label": "Quiz", "type": "text"},
+    {"name": "name", "label": "Name", "type": "text"},
+    {"name": "status", "label": "Status", "type": "text"},
+    {"name": "score", "label": "Score", "type": "number"},
+    {"name": "timeMs", "label": "Time (ms)", "type": "number"},
+    {"name": "hidden", "label": "Hidden from the leaderboard", "type": "boolean"}
+  ],
+  "api": {
+    "create": {"enabled": false, "access": "admin"},
+    "read":   {"enabled": false, "access": "admin"},
+    "update": {"enabled": false, "access": "admin"},
+    "delete": {"enabled": false, "access": "admin"}
+  }
+}

package/plugins/quiz/collections/quiz-quizzes.json

@@ -0,0 +1,17 @@
+{
+  "slug": "quiz-quizzes",
+  "title": "Quiz - Quizzes",
+  "description": "The quizzes and their questions, answers included. Edit them in Quiz, not here.",
+  "plugin": "quiz",
+  "fields": [
+    {"name": "title", "label": "Title", "type": "text"},
+    {"name": "slug", "label": "Short name", "type": "text"},
+    {"name": "status", "label": "Status", "type": "text"}
+  ],
+  "api": {
+    "create": {"enabled": false, "access": "admin"},
+    "read":   {"enabled": false, "access": "admin"},
+    "update": {"enabled": false, "access": "admin"},
+    "delete": {"enabled": false, "access": "admin"}
+  }
+}

package/plugins/quiz/config.js

@@ -0,0 +1,6 @@
+/**
+ * Quiz - default configuration. Every quiz carries its own settings (time
+ * limits, shuffling, the leaderboard...), edited with the quiz; nothing here
+ * needs changing.
+ */
+export default {};

package/plugins/quiz/inject/body.html

@@ -0,0 +1 @@
+<script type="module" src="/plugins/quiz/public/quiz.js?v=1.0.0"></script>