domma-cms 1.8.32 → 1.8.34

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

@@ -1,19 +1,24 @@
 /**
- * Quiz - the Tool. One view, three screens by address:
+ * 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).
+ * 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, field, h, icon, loadKit, playsScreen, refreshBadge, request, toggle, toLocalInput, fromLocalInput} from '/plugins/_lib/admin/games/kit.js';
+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'};
@@ -22,6 +27,8 @@ const SHOW_LABEL = {end: 'At the end', 'after-each': 'After each question', neve
 
 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]+))?(?:\/([^/?#]+))?/);
@@ -30,6 +37,8 @@ function where() {
 
 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',
@@ -39,74 +48,93 @@ export const quizView = {
         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' && 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 === '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);
-        return list(root, container, $container, kit);
+        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 ----------------------------------------------------------------------
 
-async function list(root, container, $container, kit) {
+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'; }});
-    root.innerHTML = '';
-    const slot = h('div', {className: 'gma-note dm-loading-slot', text: 'Loading…'});
-    root.append(slot);
-    let quizzes;
+    let got;
     try {
-        quizzes = (await kit.whileLoading(slot, request('GET', `${API}/quizzes`), kit.SHAPES.rows)).quizzes || [];
+        got = await loading(root, request('GET', `${API}/quizzes`), kit);
     } catch (err) {
-        root.innerHTML = '';
-        root.append(h('p', {className: 'gma-error', text: `Quiz could not load: ${errText(err)}`}));
-        return;
+        if (!alive()) return;
+        return failed(root, `Quiz could not load: ${errText(err)}`);
     }
 
-    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);
-    };
+    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 = (await request('GET', `${API}/quizzes`)).quizzes || [];
-            draw();
+            quizzes.value = (await request('GET', `${API}/quizzes`)).quizzes || [];
         } catch (err) { E.toast(errText(err), {type: 'error'}); }
     }
 
@@ -114,14 +142,33 @@ async function list(root, container, $container, kit) {
         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();
+            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'}); }
     }
 
-    draw();
+    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 --------------------------------------------------------------------
@@ -132,221 +179,352 @@ const blankQuiz = () => ({
     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}]
+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()}))
 });
 
-async function editor(root, container, $container, kit, id) {
-    root.innerHTML = '';
-    let quiz = blankQuiz();
+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) {
-        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)};
+            start = {...blankQuiz(), ...await loading(root, request('GET', `${API}/quizzes/${encodeURIComponent(id)}`), kit)};
         } 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;
+            if (!alive()) return;
+            return failed(root, `That quiz could not load: ${errText(err)}`, {href: SIDEBAR, text: 'Back to Quiz'});
         }
     }
-    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();
+    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); }});
     }
 
-    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.')));
+    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++;
     }
 
-    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);
+    /** 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++; };
 
-    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);
+    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() {
-        errorBox.hidden = true;
-        saveBtn.disabled = true;
-        const body = {...quiz, questions: quiz.questions.map(q => ({...q, accepted: (q.accepted || []).map(a => a.trim()).filter(Boolean)}))};
+        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);
-            quiz = {...blankQuiz(), ...out};
-            saved = snapshot();
+            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();
-            showShortcode();
             E.toast(`${out.title} saved.`, {type: 'success'});
-            if (!id) { location.hash = `#/plugins/quiz/edit/${encodeURIComponent(out.id)}`; return; }
+            if (!id) return out.id;
             bannerTrail(container, [{text: 'Quiz', href: SIDEBAR}, {text: out.title}]);
-            drawQuestions();
+            return out.id;
         } catch (err) {
-            errorBox.textContent = errText(err);
-            errorBox.hidden = false;
+            problem.value = errText(err);
+            return '';
         } finally {
-            saveBtn.disabled = false;
+            saving.value = false;
         }
     }
 
-    root.innerHTML = '';
-    root.append(details, rules, questions, bar);
-    drawQuestions();
-    I.scan(root);
-    if (!id) details.querySelector('input')?.focus();
-}
+    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();
+}