domma-cms 1.8.30 → 1.8.32

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>

package/plugins/quiz/lib/engine.js

@@ -0,0 +1,115 @@
+/**
+ * Quiz - one play moving forward, by the server's clock. PURE: each function
+ * takes the quiz, the play and `now`, changes the play in place and says
+ * whether it changed (the route then saves it).
+ *
+ *   catchUp(quiz, play, now)            time that has run out while nobody asked: a question
+ *                                       past its limit is marked as not answered; past the
+ *                                       quiz's limit, the play ends
+ *   serve(quiz, play, now)              the current question is now in front of the player
+ *   answer(quiz, play, qid, given, now) one answer, marked; the play moves on (or ends)
+ *   view(quiz, play, now)               what the player may know of their play now
+ *
+ * @module quiz/lib/engine
+ */
+
+import {GRACE_MS, leftOf, overdue} from '../../_lib/games/timing.js';
+import {mark, publicQuestion, questionLimitMs, rightText} from './quiz.js';
+
+const questionOf = (quiz, play) => {
+    const slot = play.state.order[play.state.index];
+    return slot ? quiz.questions.find(q => q.id === slot.q) || null : null;
+};
+
+const scoreOf = (play) => play.state.answers.reduce((s, a) => s + (a.points || 0), 0);
+
+/** Ends the play. Out of time: the time counted is the limit itself, never more. */
+export function end(quiz, play, now, {timeUp = false} = {}) {
+    const limit = (quiz.timeLimit || 0) * 1000;
+    play.status = 'finished';
+    play.finishedAt = new Date(now).toISOString();
+    play.score = scoreOf(play);
+    const spent = Math.max(0, now - Date.parse(play.startedAt));
+    play.timeMs = limit ? Math.min(spent, limit) : spent;
+    play.state.timeUp = timeUp;
+    return true;
+}
+
+function skip(quiz, play, now, why) {
+    const q = questionOf(quiz, play);
+    play.state.answers.push({q: q?.id || '', given: null, correct: false, points: 0, late: true, why, at: new Date(now).toISOString()});
+    play.state.index += 1;
+    if (play.state.index >= play.state.order.length) end(quiz, play, now);
+}
+
+/** Bring the play up to date with the clock. */
+export function catchUp(quiz, play, now = Date.now()) {
+    if (play.status !== 'playing') return false;
+    let changed = false;
+    if (overdue(play.startedAt, (quiz.timeLimit || 0) * 1000, now)) return end(quiz, play, now, {timeUp: true});
+    // Only a question that was SHOWN can run out: one never fetched has not started its clock.
+    while (play.status === 'playing') {
+        const q = questionOf(quiz, play);
+        if (!q) { end(quiz, play, now); return true; }
+        const served = play.state.servedAt[play.state.index];
+        if (!served || !overdue(served, questionLimitMs(quiz, q), now)) break;
+        skip(quiz, play, now, 'time');
+        changed = true;
+    }
+    return changed;
+}
+
+/** The current question is on the player's screen from now - the first time only, so a reload does not reset its clock. */
+export function serve(quiz, play, now = Date.now()) {
+    if (play.status !== 'playing' || play.state.servedAt[play.state.index]) return false;
+    play.state.servedAt[play.state.index] = new Date(now).toISOString();
+    return true;
+}
+
+/**
+ * An answer to question `qid`. Refused (`error`) when it is not the question
+ * they are on - an old tab, a replayed request. Late is marked wrong.
+ *
+ * @returns {{error?: string, correct?: boolean, late?: boolean, points?: number, q?: object}}
+ */
+export function answer(quiz, play, qid, given, now = Date.now()) {
+    if (play.status !== 'playing') return {error: 'This play has finished.'};
+    const q = questionOf(quiz, play);
+    if (!q || q.id !== String(qid)) return {error: 'That is not the question you are on. Carry on from where you are.', code: 'not-current'};
+    const served = play.state.servedAt[play.state.index];
+    if (!served) return {error: 'That question has not been shown yet.', code: 'not-current'};
+    const late = overdue(served, questionLimitMs(quiz, q), now) || overdue(play.startedAt, (quiz.timeLimit || 0) * 1000, now);
+    const result = late ? {correct: false, given: null} : mark(q, given);
+    const points = result.correct ? q.points : 0;
+    play.state.answers.push({q: q.id, given: result.given, correct: result.correct, points, late, at: new Date(now).toISOString()});
+    play.state.index += 1;
+    play.score = scoreOf(play);
+    if (play.state.index >= play.state.order.length) end(quiz, play, now);
+    else if (overdue(play.startedAt, (quiz.timeLimit || 0) * 1000, now)) end(quiz, play, now, {timeUp: true});
+    return {correct: result.correct, late, points, q};
+}
+
+/** Feedback straight after an answer, when the quiz shows answers as you go. */
+export function feedbackFor(quiz, q, outcome) {
+    if (quiz.showAnswers !== 'after-each' || !q) return null;
+    return {correct: outcome.correct, late: outcome.late, rightAnswer: rightText(q), explanation: q.explanation || ''};
+}
+
+/** What the player may know of their play right now. */
+export function view(quiz, play, now = Date.now()) {
+    const total = play.state.order.length;
+    const base = {
+        status: play.status, index: Math.min(play.state.index, total), total,
+        elapsedMs: Math.max(0, (play.status === 'playing' ? now : Date.parse(play.finishedAt)) - Date.parse(play.startedAt)),
+        score: play.score || 0, grace: GRACE_MS
+    };
+    if (play.status !== 'playing') return base;
+    const q = publicQuestion(quiz, play.state);
+    const served = play.state.servedAt[play.state.index];
+    return {
+        ...base,
+        question: q,
+        questionLeftMs: served ? leftOf(served, questionLimitMs(quiz, questionOf(quiz, play)), now) : null,
+        totalLeftMs: leftOf(play.startedAt, (quiz.timeLimit || 0) * 1000, now)
+    };
+}