domma-cms 1.8.46 → 1.9.0

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

@@ -1,530 +0,0 @@
-/**
- * Quiz - the Tool. One view, four screens by address:
- *
- *   #/plugins/quiz                 every quiz
- *   #/plugins/quiz/new             a new quiz
- *   #/plugins/quiz/edit/<id>       a quiz and its questions
- *   #/plugins/quiz/test/<id>       play it as a player would - a test go, never on the leaderboard
- *   #/plugins/quiz/plays/<id>      who played it, and its leaderboard
- *
- * Route params are read from the hash (Domma's router passes none). Every
- * screen is domma-reactive (observables + one M.applyBindings, through the
- * admin kit's mountScreen); templates live here, not in the templateUrl file,
- * because that one goes through _.render, which eats a data-each row's {{ }}.
- */
-
-import {bannerTrail, copyText, errText, esc, failed, fromLocalInput, ico, loadKit, loading, mountScreen, playsScreen, refreshBadge, request, saveKey, sortableRows, testScreen, toLocalInput, wireRows} from '/plugins/_lib/admin/games/kit.js';
-
-const API = '/plugins/quiz';
-const SIDEBAR = '#/plugins/quiz';
-const ROUTE = /^#\/plugins\/quiz(\/|\?|$)/;
-const PLAYER = '/plugins/quiz/public/quiz.js?v=1.1.0';
-
-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;
-// Each mount's number: a screen whose data arrives after the admin has moved on draws nothing.
-let mountSeq = 0;
-
-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}" /]`;
-const href = (screen, id) => `#/plugins/quiz/${screen}/${encodeURIComponent(id)}`;
-const options = (labels) => Object.entries(labels).map(([v, t]) => `<option value="${v}">${esc(t)}</option>`).join('');
-
-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();
-        const n = ++mountSeq;
-        const alive = () => n === mountSeq && ROUTE.test(location.hash);
-        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' || screen === 'test') && id) {
-            let quiz = null;
-            try { quiz = await request('GET', `${API}/quizzes/${encodeURIComponent(id)}`); } catch { /* the screen says so */ }
-            if (!alive()) return;
-            const title = quiz?.title || 'Quiz';
-            bannerTrail(container, [{text: 'Quiz', href: SIDEBAR}, {text: `${title}: ${screen === 'test' ? 'test' : 'plays'}`}]);
-            kit.addBannerAction($container, {id: 'quiz-edit', icon: 'edit', title: 'Edit this quiz', onClick: () => { location.hash = href('edit', id); }});
-            if (screen === 'plays') {
-                kit.addBannerAction($container, {id: 'quiz-test', icon: 'play', title: 'Test it', onClick: () => { location.hash = href('test', id); }});
-                return playsScreen(root, {api: API, gameId: id, title, order: 'score', back: SIDEBAR, base: '/quizzes', badge, lifetime, alive, testHref: href('test', id)});
-            }
-            kit.addBannerAction($container, {id: 'quiz-plays', icon: 'award', title: 'Plays and leaderboard', onClick: () => { location.hash = href('plays', id); }});
-            if (!quiz) return failed(root, 'That quiz is not here any more.', {href: SIDEBAR, text: 'Back to Quiz'});
-            return testScreen(root, {api: API, base: '/quizzes', gameId: id, player: PLAYER, appClass: 'qz-app',
-                editHref: href('edit', id), playsHref: href('plays', id), statusText: STATUS_LABEL[quiz.status] || '', lifetime, alive});
-        }
-        if (screen === 'new' || (screen === 'edit' && id)) return editor(root, container, $container, kit, screen === 'new' ? '' : id, alive);
-        return list(root, container, $container, kit, alive);
-    }
-};
-
-// ---- The list ----------------------------------------------------------------------
-
-const LIST_HTML = `
-<div class="gma-bar">
-  <a class="btn btn-sm btn-primary" href="#/plugins/quiz/new">${ico('plus')} New quiz</a>
-  <span class="gma-spacer"></span>
-  <span class="gma-note">Put a quiz on any page with its shortcode. The leaderboard can go on its own too.</span>
-  <span data-help-title="Quiz" data-help="Make a quiz, add its questions, and Test it - you play it exactly as your players will, and a test go never reaches the leaderboard. When it is ready, set it to Open and put its shortcode on a page. Right-click a quiz (or its ⋮) for everything else."></span>
-</div>
-<div class="gma-empty" hidden data-bind-hidden="rows.value.length">
-  ${ico('help-circle', 30)}
-  <p><strong>No quizzes yet.</strong><br>Make one, add questions, test it, open it, then put its shortcode on a page.</p>
-  <a class="btn btn-primary" href="#/plugins/quiz/new">Make a quiz</a>
-</div>
-<div class="gma-list" data-part="list" data-each="rows.value key=id"></div>`;
-
-const LIST_ROW = `
-<div class="gma-row" tabindex="0" data-id="{{id}}">
-  <div class="gma-row-main">
-    <div><a data-bind-href="editHref" data-bind-text="title"></a><span class="gma-chip" data-bind-class="tone" data-bind-text="statusText"></span></div>
-    <small data-bind-text="meta"></small>
-  </div>
-  <div class="gma-row-actions">
-    <a class="btn btn-sm btn-ghost" data-bind-href="testHref" title="Play it as your players will - not saved to the leaderboard">${ico('play')} Test</a>
-    <a class="btn btn-sm btn-ghost" data-bind-href="playsHref">${ico('award')} Plays</a>
-    <button type="button" class="gma-kebab" aria-label="Actions" title="Actions">${ico('more-vertical', 16)}</button>
-  </div>
-</div>`;
-
-async function list(root, container, $container, kit, alive) {
-    bannerTrail(container, [{text: 'Quiz'}]);
-    kit.addBannerAction($container, {id: 'quiz-new', icon: 'plus', title: 'New quiz', onClick: () => { location.hash = '#/plugins/quiz/new'; }});
-    let got;
-    try {
-        got = await loading(root, request('GET', `${API}/quizzes`), kit);
-    } catch (err) {
-        if (!alive()) return;
-        return failed(root, `Quiz could not load: ${errText(err)}`);
-    }
-
-    if (!alive()) return;
-    const quizzes = M.observable(got.quizzes || []);
-    const rows = M.observable([]);
-    lifetime.add(M.effect(() => {
-        rows.value = quizzes.value.map(q => ({
-            id: q.id, title: q.title, statusText: STATUS_LABEL[q.status] || q.status, tone: STATUS_TONE[q.status] || '',
-            editHref: href('edit', q.id), testHref: href('test', q.id), playsHref: href('plays', q.id),
-            meta: [`${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(' · ')
-        }));
-    }));
-
-    const byId = (id) => quizzes.peek().find(q => q.id === id);
-
-    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.value = (await request('GET', `${API}/quizzes`)).quizzes || [];
-        } 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.value = quizzes.peek().filter(x => x.id !== q.id);
-            badge();
-            E.toast(`${q.title} deleted.`, {type: 'success'});
-        } catch (err) { E.toast(errText(err), {type: 'error'}); }
-    }
-
-    const el = mountScreen(root, {
-        html: LIST_HTML, model: {rows}, lifetime, k: kit, className: 'gma-quiz-list', rescan: [rows],
-        before: (screen) => { screen.querySelector('[data-part="list"]').innerHTML = LIST_ROW; }
-    });
-    wireRows(el.querySelector('[data-part="list"]'), {
-        k: kit, lifetime,
-        main: (id) => { location.hash = href('edit', id); },
-        items: (id) => {
-            const q = byId(id);
-            if (!q) return [];
-            return [
-                {label: 'Edit', icon: 'edit', action: () => { location.hash = href('edit', id); }},
-                {label: 'Test it', icon: 'play', action: () => { location.hash = href('test', id); }},
-                {label: 'Plays and leaderboard', icon: 'award', action: () => { location.hash = href('plays', id); }},
-                {label: 'Copy the shortcode', icon: 'copy', action: () => copyText(shortcodeOf(q.slug), 'Shortcode copied')},
-                {label: 'Make a copy', icon: 'layers', action: () => duplicate(q)},
-                {type: 'divider'},
-                {label: 'Delete…', icon: 'trash', action: () => remove(q)}
-            ];
-        }
-    });
-}
-
-// ---- 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 TRUE_FALSE = () => [{id: 'true', text: 'True', correct: true}, {id: 'false', text: 'False', correct: false}];
-const TWO_BLANK = () => [{id: qid(), text: '', correct: true}, {id: qid(), text: '', correct: false}];
-
-/** One answer of a question, as the editor binds it. */
-const optionModel = (o) => ({id: o.id || qid(), text: M.observable(o.text || ''), correct: M.observable(o.correct === true)});
-
-/** One question, as the editor binds it: every field an observable, the answers an observableArray. */
-function questionModel(q = {}) {
-    const kind = q.kind || 'single';
-    return {
-        id: q.id || qid(),
-        label: M.observable(''),
-        kind: M.observable(kind),
-        text: M.observable(q.text || ''),
-        image: M.observable(q.image || ''),
-        points: M.observable(q.points ?? 1),
-        seconds: M.observable(q.seconds || 0),
-        explanation: M.observable(q.explanation || ''),
-        accepted: M.observable((q.accepted || []).join('\n')),
-        options: M.observableArray((q.options?.length ? q.options : kind === 'truefalse' ? TRUE_FALSE() : kind === 'text' ? [] : TWO_BLANK()).map(optionModel)),
-        moreOpen: Boolean(q.image || q.explanation || q.seconds || (q.points ?? 1) !== 1)
-    };
-}
-
-const num = (v) => Number(v) || 0;
-const plainQuestion = (q) => ({
-    id: q.id, kind: q.kind.peek(), text: q.text.peek(), image: q.image.peek(), points: num(q.points.peek()), seconds: num(q.seconds.peek()),
-    explanation: q.explanation.peek(),
-    accepted: q.kind.peek() === 'text' ? q.accepted.peek().split('\n').map(a => a.trim()).filter(Boolean) : [],
-    options: q.kind.peek() === 'text' ? [] : q.options.peek().map(o => ({id: o.id, text: o.text.peek(), correct: o.correct.peek()}))
-});
-
-const field = (id, label, control, {hint = '', help = ''} = {}) => `
-<div class="form-group gma-field">
-  <label class="form-label" for="${id}">${esc(label)}${help ? ` <span data-help-title="${esc(label)}" data-help="${esc(help)}"></span>` : ''}</label>
-  ${control}
-  ${hint ? `<p class="form-hint">${esc(hint)}</p>` : ''}
-</div>`;
-const check = (bool, label, hint = '') => `
-<div class="form-group gma-field">
-  <label class="gma-toggle"><input type="checkbox" data-bool="${bool}"> <span>${esc(label)}</span></label>
-  ${hint ? `<p class="form-hint">${esc(hint)}</p>` : ''}
-</div>`;
-
-const EDITOR_HTML = `
-<section class="gma-card">
-  <h3 class="gma-h">The quiz</h3>
-  <div class="gma-grid">
-    ${field('qz-title', 'Title', '<input id="qz-title" class="form-input" maxlength="120" placeholder="Capital cities" data-model="f.title.value">')}
-    ${field('qz-slug', 'Short name', '<input id="qz-slug" class="form-input" maxlength="60" placeholder="made from the title" data-model="f.slug.value">',
-        {help: 'Used in the shortcode. Letters, numbers and hyphens; made from the title when empty.'})}
-    ${field('qz-status', 'Status', `<select id="qz-status" class="form-select" data-model="f.status.value">${options(STATUS_LABEL)}</select>`,
-        {help: 'Only an open quiz can be played on a page. A draft is not shown at all; a closed one shows its leaderboard. Test works whatever the status.'})}
-  </div>
-  ${field('qz-intro', 'Introduction', '<textarea id="qz-intro" class="form-input" rows="3" data-model="f.intro.value"></textarea>', {hint: 'Shown above the Start button.'})}
-  <div class="gma-grid">
-    ${field('qz-opens', 'Opens', '<input id="qz-opens" class="form-input" type="datetime-local" data-model="f.opensAt.value">', {hint: 'Optional. Open quizzes can be played from this time.'})}
-    ${field('qz-closes', 'Closes', '<input id="qz-closes" class="form-input" type="datetime-local" data-model="f.closesAt.value">', {hint: 'Optional. After this, it shows the leaderboard but cannot be played.'})}
-  </div>
-  <div class="gma-shortcode"><span class="gma-muted">Shortcode:</span><code data-bind-text="shortcode.value"></code>
-    <button type="button" class="btn btn-xs btn-ghost" data-on-click="copyShortcode" data-bind-disabled="!f.slug.value">${ico('copy')} Copy</button>
-    <span data-help-title="Shortcode" data-help="Paste it into any page to put the quiz there. [quiz-leaderboard id=&quot;...&quot; period=&quot;week&quot; /] shows its leaderboard on its own."></span></div>
-</section>
-
-<section class="gma-card">
-  <h3 class="gma-h">Rules and leaderboard</h3>
-  <div class="gma-grid">
-    ${field('qz-minutes', 'Time for the whole quiz (minutes)', '<input id="qz-minutes" class="form-input" type="number" min="0" step="0.5" data-model="f.minutes.value">', {hint: '0 = no limit. When it runs out the quiz ends with what they have.'})}
-    ${field('qz-qsecs', 'Seconds for each question', '<input id="qz-qsecs" class="form-input" type="number" min="0" max="3600" data-model="f.questionSeconds.value">', {hint: '0 = no limit. A question can set its own.'})}
-    ${field('qz-draw', 'Ask this many questions', '<input id="qz-draw" class="form-input" type="number" min="0" data-model="f.draw.value">', {hint: '0 = all of them. Fewer picks a random set for each player.'})}
-    ${field('qz-goes', 'Goes each (per name)', '<input id="qz-goes" class="form-input" type="number" min="0" max="100" data-model="f.attemptsPerName.value">', {hint: '0 = as many as they like. Test goes do not count.'})}
-    ${field('qz-show', 'Show the right answers', `<select id="qz-show" class="form-select" data-model="f.showAnswers.value">${options(SHOW_LABEL)}</select>`)}
-    ${field('qz-size', 'Leaderboard size', '<input id="qz-size" class="form-input" type="number" min="3" max="100" data-model="f.leaderboardSize.value">')}
-  </div>
-  <div class="gma-grid">
-    ${check('shuffleQuestions', 'Shuffle the questions')}
-    ${check('shuffleOptions', 'Shuffle the answers')}
-    ${check('leaderboard', 'Show a leaderboard', 'Highest score wins; the faster time breaks a tie.')}
-  </div>
-</section>
-
-<section class="gma-card">
-  <div class="gma-bar"><h3 class="gma-h">Questions</h3><span class="gma-muted" data-bind-text="qCount.value"></span>
-    <span data-help-title="Questions" data-help="Drag a question by its grip to move it. Points, a time of its own, a picture and an explanation are under each question's More."></span>
-    <span class="gma-spacer"></span>
-    <button type="button" class="btn btn-sm btn-primary" data-on-click="addQuestion">${ico('plus')} Add a question</button></div>
-  <p class="gma-muted" hidden data-bind-hidden="questions.length">No questions yet.</p>
-  <div class="qza-questions" data-part="questions" data-each="questions key=id"></div>
-  <div class="gma-bar" hidden data-bind-hidden="!questions.length">
-    <button type="button" class="btn btn-sm btn-outline" data-on-click="addQuestion">${ico('plus')} Add a question</button></div>
-</section>
-
-<div class="gma-save">
-  <button type="button" class="btn btn-primary" data-on-click="save" data-bind-disabled="saving.value">${ico('check')} Save</button>
-  <button type="button" class="btn btn-outline" data-on-click="test" data-bind-disabled="saving.value"
-    title="Play it as your players will. A test go is not saved to the leaderboard.">${ico('play')} <span data-bind-text="testLabel.value"></span></button>
-  <a class="btn btn-ghost" href="#/plugins/quiz">Back to the list</a>
-  <span class="is-dirty" hidden data-bind-hidden="!dirty.value">Unsaved changes</span>
-  <span class="gma-spacer"></span>
-  <p class="gma-error" role="alert" hidden data-bind-hidden="!problem.value" data-bind-text="problem.value"></p>
-</div>`;
-
-const QUESTION = `
-<div class="qza-question" data-id="{{id}}">
-  <div class="gma-bar">
-    <span class="gma-grip" title="Drag to move" aria-hidden="true">${ico('grip-vertical')}</span>
-    <strong data-bind-text="label.value"></strong>
-    <select class="form-select" aria-label="Kind of question" data-bind-value="kind.value" data-on-change="$root.setKind($data)">${options(KIND_LABEL)}</select>
-    <span class="gma-spacer"></span>
-    <button type="button" class="btn btn-xs btn-ghost" title="Copy this question" aria-label="Copy this question" data-on-click="$root.copyQuestion($data)">${ico('copy')}</button>
-    <button type="button" class="btn btn-xs btn-ghost gma-quiet" title="Delete this question" aria-label="Delete this question" data-on-click="$root.removeQuestion($data)">${ico('x')}</button>
-  </div>
-  <div class="form-group gma-field">
-    <label class="form-label">Question</label>
-    <textarea class="form-input" rows="2" maxlength="1000" placeholder="What is the capital of Japan?" data-model="text.value"></textarea>
-  </div>
-  <div class="qza-answers" hidden data-bind-hidden="kind.value !== 'text'">
-    <label class="form-label">Accepted answers, one a line</label>
-    <textarea class="form-input" rows="3" placeholder="Tokyo" data-model="accepted.value"></textarea>
-    <p class="form-hint">Capitals, accents, spaces, punctuation and a leading "the" do not matter.</p>
-  </div>
-  <div class="qza-answers" hidden data-bind-hidden="kind.value === 'text'">
-    <p class="gma-note" data-bind-text="kind.value === 'multiple' ? 'Tick every right answer.' : 'Choose the right answer.'"></p>
-    {{#each options key=id}}
-    <div class="qza-answer" data-bind-class="correct.value && 'is-right'">
-      <!-- No name on the radios: one right answer is kept by markRight, not by a browser radio group
-           (a group would also uncheck a hidden radio behind a ticked checkbox). -->
-      <label class="qza-mark" title="Right answer">
-        <input type="radio" hidden data-bind-hidden="$parent.kind.value === 'multiple'"
-          data-bind-checked="correct.value" data-on-change="$root.markRight($parent, $data)">
-        <input type="checkbox" hidden data-bind-hidden="$parent.kind.value !== 'multiple'"
-          data-bind-checked="correct.value" data-on-change="$root.markRight($parent, $data)"><span class="sr-only">Right answer</span></label>
-      <input class="form-input" maxlength="200" placeholder="An answer" data-model="text.value" data-bind-readonly="$parent.kind.value === 'truefalse'">
-      <button type="button" class="btn btn-xs btn-ghost gma-quiet" title="Remove this answer" aria-label="Remove this answer"
-        hidden data-bind-hidden="$parent.kind.value === 'truefalse'" data-bind-disabled="$parent.options.length <= 2"
-        data-on-click="$root.removeOption($parent, $data)">${ico('x')}</button>
-    </div>
-    {{/each}}
-    <div><button type="button" class="btn btn-xs btn-ghost qza-add" hidden data-bind-hidden="kind.value === 'truefalse' || options.length >= 8"
-      data-on-click="$root.addOption($data)">${ico('plus')} Add an answer</button></div>
-  </div>
-  <details class="qza-more" data-bind-open="moreOpen">
-    <summary>More: points, time, picture and explanation</summary>
-    <div class="gma-grid">
-      <div class="form-group gma-field"><label class="form-label">Points</label><input class="form-input" type="number" min="0" max="100" data-model="points.value"></div>
-      <div class="form-group gma-field"><label class="form-label">Seconds for this question</label><input class="form-input" type="number" min="0" max="3600" data-model="seconds.value">
-        <p class="form-hint">0 = the quiz's own setting.</p></div>
-      <div class="form-group gma-field"><label class="form-label">Picture (address)</label><input class="form-input" maxlength="500" placeholder="/media/…" data-model="image.value">
-        <p class="form-hint">A picture from Media, or an https:// address.</p></div>
-    </div>
-    <div class="form-group gma-field"><label class="form-label">Explanation</label><textarea class="form-input" rows="2" maxlength="1000" data-model="explanation.value"></textarea>
-      <p class="form-hint">Shown with the right answer, when the quiz shows answers.</p></div>
-  </details>
-</div>`;
-
-async function editor(root, container, $container, kit, id, alive) {
-    let start = blankQuiz();
-    if (id) {
-        try {
-            start = {...blankQuiz(), ...await loading(root, request('GET', `${API}/quizzes/${encodeURIComponent(id)}`), kit)};
-        } catch (err) {
-            if (!alive()) return;
-            return failed(root, `That quiz could not load: ${errText(err)}`, {href: SIDEBAR, text: 'Back to Quiz'});
-        }
-    }
-    if (!alive()) return;
-    bannerTrail(container, [{text: 'Quiz', href: SIDEBAR}, {text: id ? start.title : 'New quiz'}]);
-    if (id) {
-        kit.addBannerAction($container, {id: 'quiz-test', icon: 'play', title: 'Test it', onClick: () => model.test()});
-        kit.addBannerAction($container, {id: 'quiz-plays', icon: 'award', title: 'Plays and leaderboard', onClick: () => { location.hash = href('plays', id); }});
-    }
-
-    const f = {
-        title: M.observable(start.title), slug: M.observable(start.slug), intro: M.observable(start.intro), status: M.observable(start.status),
-        opensAt: M.observable(toLocalInput(start.opensAt)), closesAt: M.observable(toLocalInput(start.closesAt)),
-        minutes: M.observable(start.timeLimit ? start.timeLimit / 60 : 0), questionSeconds: M.observable(start.questionSeconds),
-        draw: M.observable(start.draw), attemptsPerName: M.observable(start.attemptsPerName), showAnswers: M.observable(start.showAnswers),
-        leaderboardSize: M.observable(start.leaderboardSize)
-    };
-    const bools = {shuffleQuestions: M.observable(start.shuffleQuestions), shuffleOptions: M.observable(start.shuffleOptions), leaderboard: M.observable(start.leaderboard)};
-    const questions = M.observableArray(start.questions.map(questionModel));
-    const saving = M.observable(false);
-    const problem = M.observable('');
-    const dirty = M.observable(false);
-    const qCount = M.observable('');
-    const tick = M.observable(0);          // a redraw of icons after rows change
-    const shortcode = M.computed(() => (f.slug.value ? shortcodeOf(f.slug.value) : 'Saved quizzes get a shortcode'));
-    const testLabel = M.computed(() => (dirty.value || !id ? 'Save and test' : 'Test'));
-
-    const body = () => ({
-        title: f.title.peek(), slug: f.slug.peek(), intro: f.intro.peek(), status: f.status.peek(),
-        opensAt: fromLocalInput(f.opensAt.peek()), closesAt: fromLocalInput(f.closesAt.peek()),
-        timeLimit: Math.round(num(f.minutes.peek()) * 60), questionSeconds: num(f.questionSeconds.peek()), draw: num(f.draw.peek()),
-        attemptsPerName: num(f.attemptsPerName.peek()), showAnswers: f.showAnswers.peek(), leaderboardSize: num(f.leaderboardSize.peek()) || 10,
-        shuffleQuestions: bools.shuffleQuestions.peek(), shuffleOptions: bools.shuffleOptions.peek(), leaderboard: bools.leaderboard.peek(),
-        questions: questions.peek().map(plainQuestion)
-    });
-    let saved = JSON.stringify(body());
-
-    /**
-     * What the server saved, back into the editor: it cleans what it is given (numbers clamped, a draw
-     * larger than the bank dropped, blank answers removed), so the editor must show what was stored.
-     * Questions are rebuilt only when they changed, so a save does not throw away focus and open panels.
-     */
-    function load(q) {
-        f.title.value = q.title; f.slug.value = q.slug; f.intro.value = q.intro; f.status.value = q.status;
-        f.opensAt.value = toLocalInput(q.opensAt); f.closesAt.value = toLocalInput(q.closesAt);
-        f.minutes.value = q.timeLimit ? q.timeLimit / 60 : 0; f.questionSeconds.value = q.questionSeconds; f.draw.value = q.draw;
-        f.attemptsPerName.value = q.attemptsPerName; f.showAnswers.value = q.showAnswers; f.leaderboardSize.value = q.leaderboardSize;
-        for (const k of Object.keys(bools)) bools[k].value = q[k] === true;
-        for (const box of el.querySelectorAll('[data-bool]')) box.checked = bools[box.dataset.bool].peek();
-        const incoming = (q.questions || []).map(questionModel);
-        if (JSON.stringify(incoming.map(plainQuestion)) !== JSON.stringify(questions.peek().map(plainQuestion))) questions.set(incoming);
-        tick.value++;
-    }
-
-    /** After any edit: the numbers, the points total, the dirty flag. */
-    function touched() {
-        const qs = questions.peek();
-        qs.forEach((q, i) => { q.label.value = `Question ${i + 1}`; });
-        const total = qs.reduce((s, q) => s + num(q.points.peek()), 0);
-        qCount.value = qs.length ? `${qs.length} · ${total} point${total === 1 ? '' : 's'}` : '';
-        dirty.value = JSON.stringify(body()) !== saved;
-    }
-    const changed = () => { touched(); tick.value++; };
-
-    leaveGuard = (e) => { if (dirty.peek() && ROUTE.test(location.hash)) { e.preventDefault(); e.returnValue = ''; } };
-    window.addEventListener('beforeunload', leaveGuard);
-    lifetime.add(() => { window.removeEventListener('beforeunload', leaveGuard); leaveGuard = null; });
-
-    /** Saves; answers the quiz's id, or '' when it did not save. */
-    async function save() {
-        if (saving.peek()) return '';
-        problem.value = '';
-        saving.value = true;
-        try {
-            const out = id ? await request('PUT', `${API}/quizzes/${encodeURIComponent(id)}`, body()) : await request('POST', `${API}/quizzes`, body());
-            load({...blankQuiz(), ...out});
-            saved = JSON.stringify(body());
-            touched();
-            E.toast(`${out.title} saved.`, {type: 'success'});
-            if (!id) return out.id;
-            bannerTrail(container, [{text: 'Quiz', href: SIDEBAR}, {text: out.title}]);
-            return out.id;
-        } catch (err) {
-            problem.value = errText(err);
-            return '';
-        } finally {
-            saving.value = false;
-        }
-    }
-
-    const model = {
-        f, questions, saving, problem, dirty, qCount, shortcode, testLabel,
-        async save() {
-            const savedId = await save();
-            if (savedId && !id) location.hash = href('edit', savedId);
-        },
-        async test() {
-            // Before saving: a new quiz saved here and then refused would be saved again (a second copy) next time.
-            if (!questions.peek().length) { problem.value = 'Add a question, then test it.'; return; }
-            const savedId = dirty.peek() || !id ? await save() : id;
-            if (savedId) location.hash = href('test', savedId);
-        },
-        copyShortcode() { if (f.slug.peek()) copyText(shortcodeOf(f.slug.peek()), 'Shortcode copied'); },
-        addQuestion() {
-            questions.push(questionModel());
-            changed();
-            setTimeout(() => el.querySelector('.qza-question:last-of-type textarea')?.focus(), 30);
-        },
-        copyQuestion(q) {
-            const plain = plainQuestion(q);
-            const copy = questionModel({...plain, id: qid(), accepted: plain.accepted,
-                options: plain.options.map(o => ({...o, id: o.id === 'true' || o.id === 'false' ? o.id : qid()}))});
-            questions.splice(questions.indexOf(q) + 1, 0, copy);
-            changed();
-        },
-        async removeQuestion(q) {
-            if (q.text.peek() && !await E.confirm(`Delete <strong>${esc(q.label.peek())}</strong>?`)) return;
-            questions.remove(q);
-            changed();
-        },
-        /** A change of kind keeps what still makes sense. */
-        setKind(q, e) {
-            const kind = e?.target?.value || q.kind.peek();
-            const was = q.kind.peek();
-            if (kind === was) return;
-            if (kind === 'truefalse') q.options.set(TRUE_FALSE().map(optionModel));
-            else if (kind === 'text') {
-                if (!q.accepted.peek().trim()) q.accepted.value = q.options.peek().filter(o => o.correct.peek() && o.text.peek()).map(o => o.text.peek()).join('\n');
-            } else if (was === 'truefalse' || !q.options.peek().length) {
-                q.options.set(TWO_BLANK().map(optionModel));
-            }
-            if (kind === 'single') {
-                const first = q.options.peek().findIndex(o => o.correct.peek());
-                q.options.peek().forEach((o, i) => { o.correct.value = i === Math.max(0, first); });
-            }
-            q.kind.value = kind;
-            changed();
-        },
-        markRight(q, o, e) {
-            if (q.kind.peek() === 'multiple') o.correct.value = Boolean(e?.target?.checked);
-            else q.options.peek().forEach(x => { x.correct.value = x === o; });
-            touched();
-        },
-        addOption(q) {
-            if (q.options.peek().length >= 8) return;
-            q.options.push(optionModel({text: '', correct: false}));
-            changed();
-            setTimeout(() => el.querySelector(`.qza-question[data-id="${q.id}"] .qza-answer:last-of-type input.form-input`)?.focus(), 30);
-        },
-        removeOption(q, o) {
-            if (q.options.peek().length <= 2) return;
-            const wasRight = o.correct.peek();
-            q.options.remove(o);
-            if (wasRight && q.kind.peek() === 'single') q.options.peek()[0].correct.value = true;
-            changed();
-        }
-    };
-
-    const el = mountScreen(root, {
-        html: EDITOR_HTML, model, lifetime, k: kit, className: 'gma-quiz-editor', rescan: [questions, tick],
-        before: (screen) => {
-            screen.querySelector('[data-part="questions"]').innerHTML = QUESTION;
-            for (const box of screen.querySelectorAll('[data-bool]')) {
-                box.checked = Boolean(bools[box.dataset.bool].peek());
-                box.addEventListener('change', () => { bools[box.dataset.bool].value = box.checked; touched(); });
-            }
-        }
-    });
-    // Typing anywhere: the bindings write first (their listeners were added first), then this sees it.
-    const onEdit = () => touched();
-    el.addEventListener('input', onEdit);
-    el.addEventListener('change', onEdit);
-    lifetime.add(() => { el.removeEventListener('input', onEdit); el.removeEventListener('change', onEdit); });
-
-    sortableRows(el.querySelector('[data-part="questions"]'), {
-        items: '.qza-question', handle: '.gma-grip', lifetime,
-        onMove: (from, to) => {
-            const [moved] = questions.splice(from, 1);
-            questions.splice(to, 0, moved);
-            changed();
-        }
-    });
-    saveKey(() => model.save(), () => ROUTE.test(location.hash) && el.isConnected, lifetime);
-
-    touched();
-    if (!id) el.querySelector('#qz-title')?.focus();
-}

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

@@ -1,20 +0,0 @@
-{
-  "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

@@ -1,17 +0,0 @@
-{
-  "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

@@ -1,6 +0,0 @@
-/**
- * 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/docs/guide.md

@@ -1,61 +0,0 @@
----
-title: Guide
-order: 1
----
-
-Run quizzes on your website. Visitors type their name, answer against the clock and land on a leaderboard. Quiz is free.
-
-## What it does
-
-- **Four kinds of question:** one right answer, more than one right answer, true or false, and a typed answer (case, accents, punctuation and a leading "the" do not matter, and you can accept more than one spelling).
-- **Timing kept by the server.** A time limit for the whole quiz, a default per question, or a time on any single question. The clock starts when the question is shown, so a slow connection or a reload does not cost or gain anyone time.
-- **Marking on the server.** The right answers never reach the visitor's browser until they have answered.
-- **Leaderboards** for today, this week, this month and all time. Each name appears once, with its best go. Equal scores are split by time.
-- **Your choice of when to show answers:** after each question, at the end, or never.
-- **Shuffling:** questions, answers, or a random draw of so many questions from a bigger bank.
-- **Opening and closing times**, and a limit on goes per name.
-- The sidebar badge shows how many quizzes have been finished today, and you get a notification when someone takes the top spot.
-
-## Getting started
-
-1. Switch Quiz on in **Tools**.
-2. Open **Tools > Games > Quiz** and choose **New quiz**.
-3. Give it a title and add your questions. Tick the right answer (or answers) on each one.
-4. Press **Test** and play it yourself (see below).
-5. Set the status to **Open** and save.
-6. Put it on any page:
-
-```
-[quiz id="capitals" /]
-```
-
-`id` is the quiz's short name, shown in the list and under the title in the editor.
-
-## Testing a quiz
-
-**Test** (in the editor, on each quiz in the list, and on its Plays screen) plays the quiz right there in the admin, exactly as your players will see it: the same clock, the same marking, the same screens, and the answers shown when the quiz shows them.
-
-- It plays the version you last saved. With unsaved changes the button says **Save and test**, and saves first.
-- It works whatever the status, so you can try a draft before anyone can see it, or a closed quiz.
-- A test go is never saved to the leaderboard. It is not in the Plays list, it does not count towards the goes each name is allowed, and it does not raise a notification. At the end it tells you where it would have come.
-- Each new test clears away the one before.
-
-## A leaderboard on its own
-
-The quiz shows its own leaderboard at the end. To show one somewhere else, for example on your home page:
-
-```
-[quiz-leaderboard id="capitals" period="week" limit="10" title="This week's best" /]
-```
-
-`period` is `today`, `week`, `month` or `all`. Visitors can switch period on the board.
-
-## Players and fair play
-
-- Players only give a name: 2 to 24 letters, numbers, spaces and `. ' - _`. Rude names are refused.
-- A play belongs to the browser that started it. Reloading carries on where they were.
-- Running out of time on a question marks it wrong and moves on. Running out of time on the whole quiz ends it, and the time counted is the limit.
-
-## Looking after the board
-
-Open a quiz's **Plays** to see every go (your own test goes are not shown). You can hide a play from the leaderboard (it stays in the list), delete it, or reset the whole leaderboard, for example before a new quiz night.

package/plugins/quiz/inject/body.html

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