domma-cms 1.8.45 → 1.9.0

package/plugins/quiz/public/quiz.js

@@ -1,372 +0,0 @@
-/**
- * Quiz - the player, in the browser.
- *
- * Mounts on every `[data-quiz]` placeholder the [quiz] shortcode wrote, and
- * every `[data-quiz-board]` the [quiz-leaderboard] one wrote. The quiz runs on
- * the SERVER: this asks for one question at a time (never with its answer),
- * sends each answer to be marked, and shows the clock the server keeps. A play
- * in progress is remembered for the tab's next load, so a reload carries on
- * where it was - its clock never stopped.
- *
- * domma-reactive (window.M): one template per mount, one M.applyBindings, and
- * text from the server only through bindings.
- *
- * `mount(el, {test})` is the same player for an admin testing the quiz from
- * its Tool: `test.info()` and `test.start()` go through the admin's own API,
- * the play is a test one (never on a board), and nothing is remembered.
- */
-
-import {Countdown, addStyles, celebrate, configOf, fmtDuration, memory, mountBoards, mountLeaderboard, ordinal, request, uid} from '/plugins/_lib/public/games/games.js';
-
-const M = window.M;
-const API = '/api/plugins/quiz/public';
-const NAME_KEY = 'games.name';
-const playKey = (slug) => `quiz.play.${slug}`;
-
-const TEMPLATE = `
-<p class="gm-muted qz-live" role="status" aria-live="polite" data-bind-text="live.value"></p>
-
-<section class="gm-card" hidden data-bind-hidden="screen.value !== 'loading'"><p class="gm-muted">Loading the quiz…</p></section>
-
-<section class="gm-card" hidden data-bind-hidden="screen.value !== 'error'">
-  <p class="gm-error" data-bind-text="problem.value"></p>
-</section>
-
-<section class="gm-card qz-intro" hidden data-bind-hidden="screen.value !== 'intro'">
-  <h2 class="gm-title" data-bind-text="info.value.title"></h2>
-  <p class="gm-intro" hidden data-bind-hidden="!info.value.intro" data-bind-text="info.value.intro"></p>
-  <ul class="gm-facts" data-each="facts.value key=k"><li data-bind-text="k"></li></ul>
-  <p class="gm-note" hidden data-bind-hidden="info.value.open" data-bind-text="info.value.reason"></p>
-  <form class="gm-start" hidden data-bind-hidden="!info.value.open" data-on-submit="start" novalidate>
-    <p class="gm-note gm-test-note" hidden data-bind-hidden="!testing">A test go: it plays exactly as your players see it, and it is not saved to the leaderboard.</p>
-    <div class="gm-field" hidden data-bind-hidden="testing">
-      <label for="%U%-name">Your name</label>
-      <input id="%U%-name" class="gm-input" maxlength="24" autocomplete="nickname" data-model="name.value"
-        data-bind-aria-invalid="problem.value ? 'true' : false" aria-describedby="%U%-err">
-    </div>
-    <div class="gm-hp" aria-hidden="true"><label>Website <input tabindex="-1" autocomplete="off" data-model="website.value"></label></div>
-    <button type="submit" class="btn btn-primary" data-bind-disabled="busy.value" data-bind-text="testing ? 'Start the test' : 'Start the quiz'">Start the quiz</button>
-  </form>
-  <p class="gm-error" id="%U%-err" hidden data-bind-hidden="!problem.value" data-bind-text="problem.value"></p>
-</section>
-
-<section class="gm-card qz-question" hidden data-bind-hidden="screen.value !== 'question'" aria-labelledby="%U%-q">
-  <div class="gm-bar">
-    <span class="gm-progress" data-bind-text="progress.value"></span>
-    <span class="gm-clock" hidden data-bind-hidden="!clockShown.value" data-bind-class="clockLow.value && 'is-low'"
-      role="timer" data-bind-aria-label="'Time left ' + clockText.value" data-bind-text="clockText.value"></span>
-  </div>
-  <div class="gm-track" aria-hidden="true"><span data-bind-style-width="trackWidth.value"></span></div>
-  <h2 class="qz-q" id="%U%-q" tabindex="-1" data-bind-text="q.value.text"></h2>
-  <img class="qz-image" alt="" hidden data-bind-hidden="!q.value.image" data-bind-src="q.value.image || false">
-  <p class="gm-muted qz-hint" hidden data-bind-hidden="q.value.kind !== 'multiple'">Choose every right answer, then press Answer.</p>
-  <div class="qz-options" hidden data-bind-hidden="q.value.kind === 'text'" data-each="options.value key=id">
-    <button type="button" class="qz-option" data-bind-class="picked && 'is-picked'" data-bind-aria-pressed="picked ? 'true' : 'false'"
-      data-bind-disabled="$root.busy.value" data-on-click="$root.choose($data)">
-      <span class="qz-letter" data-bind-text="letter"></span><span data-bind-text="text"></span>
-    </button>
-  </div>
-  <form class="qz-typed" hidden data-bind-hidden="q.value.kind !== 'text'" data-on-submit="sendTyped" novalidate>
-    <label class="gm-muted" for="%U%-typed">Your answer</label>
-    <input id="%U%-typed" class="gm-input" maxlength="200" autocomplete="off" data-model="typed.value">
-  </form>
-  <div class="gm-actions" hidden data-bind-hidden="q.value.kind !== 'multiple' && q.value.kind !== 'text'">
-    <button type="button" class="btn btn-primary" data-bind-disabled="busy.value" data-on-click="sendPicked">Answer</button>
-  </div>
-</section>
-
-<section class="gm-card qz-feedback" hidden data-bind-hidden="screen.value !== 'feedback'" aria-labelledby="%U%-fb">
-  <h2 class="qz-verdict" id="%U%-fb" tabindex="-1" data-bind-class="fb.value.correct ? 'is-right' : 'is-wrong'" data-bind-text="fb.value.title"></h2>
-  <p hidden data-bind-hidden="fb.value.correct || !fb.value.rightAnswer">The answer was <strong data-bind-text="fb.value.rightAnswer"></strong>.</p>
-  <p class="gm-muted" hidden data-bind-hidden="!fb.value.explanation" data-bind-text="fb.value.explanation"></p>
-  <div class="gm-actions"><button type="button" class="btn btn-primary" data-on-click="next" data-bind-text="fb.value.nextLabel"></button></div>
-</section>
-
-<section class="gm-card qz-result" hidden data-bind-hidden="screen.value !== 'result'" aria-labelledby="%U%-res">
-  <h2 class="gm-title" id="%U%-res" tabindex="-1" data-bind-text="res.value.title"></h2>
-  <p class="gm-result-score" data-bind-text="res.value.scoreText"></p>
-  <p class="gm-muted" data-bind-text="res.value.detail"></p>
-  <p class="gm-result-place" hidden data-bind-hidden="!res.value.placeText" data-bind-text="res.value.placeText"></p>
-  <div class="gm-actions">
-    <button type="button" class="btn btn-primary" data-on-click="again" data-bind-text="testing ? 'Test again' : 'Play again'">Play again</button>
-  </div>
-  <div class="qz-review" hidden data-bind-hidden="!review.value.length">
-    <h3>Your answers</h3>
-    <ol class="qz-review-list" data-each="review.value key=k">
-      <li data-bind-class="correct ? 'is-right' : 'is-wrong'">
-        <p class="qz-review-q" data-bind-text="text"></p>
-        <p class="qz-review-a"><span data-bind-text="mark"></span> <span data-bind-text="yoursText"></span></p>
-        <p class="qz-review-a" hidden data-bind-hidden="correct">Answer: <strong data-bind-text="right"></strong></p>
-        <p class="gm-muted" hidden data-bind-hidden="!explanation" data-bind-text="explanation"></p>
-      </li>
-    </ol>
-  </div>
-</section>
-
-<div class="qz-board-slot"></div>`;
-
-const LETTERS = 'ABCDEFGH';
-
-/** The server's words: the public request's Error, or the admin's (its reply is on `err.body`). */
-const errText = (err) => err?.body?.error || err?.message || String(err);
-
-function facts(info) {
-    const out = [`${info.questions} question${info.questions === 1 ? '' : 's'}`];
-    if (info.timeLimit) out.push(`${fmtDuration(info.timeLimit * 1000)} to finish`);
-    if (info.questionSeconds) out.push(`${info.questionSeconds} seconds a question`);
-    else if (info.perQuestionTimes) out.push('Some questions are timed');
-    if (info.attemptsPerName === 1) out.push('One go each');
-    else if (info.attemptsPerName > 1) out.push(`${info.attemptsPerName} goes each`);
-    if (info.leaderboard) out.push('Fastest top score wins');
-    return out.map(k => ({k}));
-}
-
-/**
- * @param {HTMLElement} el
- * @param {{test?: {info: () => Promise<object>, start: () => Promise<{playId: string, token: string, name: string, info: object}>}}} [opts]
- */
-export function mount(el, {test = null} = {}) {
-    const cfg = test ? {slug: 'test'} : configOf(el, 'data-quiz');
-    if (!cfg?.slug || !M) return;
-    addStyles(['/plugins/quiz/public/quiz.css?v=1.1.0']);
-    const U = uid('qz');
-    el.innerHTML = TEMPLATE.replaceAll('%U%', U);
-
-    const s = {
-        testing: Boolean(test),
-        screen: M.observable('loading'),
-        live: M.observable(''),
-        problem: M.observable(''),
-        busy: M.observable(false),
-        info: M.observable({title: '', intro: '', open: false, reason: ''}),
-        facts: M.observable([]),
-        name: M.observable(String(memory.get(NAME_KEY) || '')),
-        website: M.observable(''),
-        progress: M.observable(''),
-        q: M.observable({text: '', kind: 'single', image: ''}),
-        options: M.observable([]),
-        typed: M.observable(''),
-        clockText: M.observable(''),
-        clockShown: M.observable(false),
-        clockLow: M.observable(false),
-        trackWidth: M.observable('0%'),
-        fb: M.observable({}),
-        res: M.observable({}),
-        review: M.observable([])
-    };
-
-    let play = test ? null : memory.get(playKey(cfg.slug)) || null;   // {playId, token}
-    let board = null;
-    let current = null;                                   // the play's last view from the server
-    let qClock = null;
-    let totalClock = null;
-
-    const focus = (id) => setTimeout(() => el.querySelector(`#${U}-${id}`)?.focus({preventScroll: false}), 30);
-    const say = (t) => { s.live.value = ''; setTimeout(() => { s.live.value = t; }, 20); };
-
-    function showClock() {
-        const qLeft = qClock?.left.peek() ?? 0;
-        const tLeft = totalClock?.left.peek() ?? 0;
-        const useQ = current?.questionLeftMs != null && (current?.totalLeftMs == null || qLeft <= tLeft);
-        const left = useQ ? qLeft : tLeft;
-        const whole = useQ ? (current?.question?.seconds || 0) * 1000 : (s.info.peek().timeLimit || 0) * 1000;
-        s.clockShown.value = current?.questionLeftMs != null || current?.totalLeftMs != null;
-        s.clockText.value = fmtDuration(left);
-        s.clockLow.value = left > 0 && left <= 5000;
-        s.trackWidth.value = whole ? `${Math.max(0, Math.min(100, (left / whole) * 100)).toFixed(1)}%` : `${((current?.index || 0) / (current?.total || 1)) * 100}%`;
-    }
-
-    function stopClocks() {
-        qClock?.stop();
-        totalClock?.stop();
-    }
-
-    qClock = new Countdown(() => { if (s.screen.peek() === 'question') send(null, {timeout: true}); });
-    totalClock = new Countdown(() => { if (['question', 'feedback'].includes(s.screen.peek())) setTimeout(load, 600); });
-    const stopTicks = M.effect(() => { qClock.left.value; totalClock.left.value; showClock(); });
-
-    function forget() {
-        if (!test) memory.remove(playKey(cfg.slug));
-        play = null;
-    }
-
-    async function loadInfo() {
-        const info = test ? await test.info() : await request(`${API}/quiz/${encodeURIComponent(cfg.slug)}`);
-        s.info.value = info;
-        s.facts.value = facts(info);
-        if (info.leaderboard && !board && !test) {
-            board = mountLeaderboard(el.querySelector('.qz-board-slot'), {url: `${API}/quiz/${encodeURIComponent(cfg.slug)}/leaderboard`, limit: info.leaderboardSize, title: 'Leaderboard'});
-        }
-        return info;
-    }
-
-    /** Where the play is now, from the server; draws the screen that goes with it. */
-    async function load() {
-        if (!play) { s.screen.value = 'intro'; return; }
-        try {
-            const v = await request(`${API}/play/${encodeURIComponent(play.playId)}`, {token: play.token});
-            current = v;
-            if (v.status !== 'playing') { stopClocks(); return showResult(); }
-            drawQuestion(v);
-        } catch (err) {
-            if (err.code === 'gone' || err.status === 404) { forget(); s.screen.value = 'intro'; return; }
-            s.problem.value = err.message;
-            s.screen.value = 'error';
-        }
-    }
-
-    function drawQuestion(v) {
-        const q = v.question;
-        s.q.value = {text: q.text, kind: q.kind, image: q.image || ''};
-        s.options.value = q.options.map((o, i) => ({id: o.id, text: o.text, letter: LETTERS[i] || '', picked: false}));
-        s.typed.value = '';
-        s.progress.value = `Question ${v.index + 1} of ${v.total}`;
-        s.busy.value = false;
-        s.screen.value = 'question';
-        qClock.start(v.questionLeftMs ?? 0);
-        totalClock.start(v.totalLeftMs ?? 0);
-        showClock();
-        if (q.kind === 'text') focus('typed');
-        else focus('q');
-        say(`Question ${v.index + 1} of ${v.total}. ${q.text}`);
-    }
-
-    async function send(answer, {timeout = false} = {}) {
-        if (s.busy.peek() || !current?.question) return;
-        s.busy.value = true;
-        qClock.stop();
-        try {
-            const r = await request(`${API}/play/${encodeURIComponent(play.playId)}/answer`, {
-                method: 'POST', token: play.token, body: {q: current.question.id, answer}
-            });
-            current = r.play;
-            const done = r.play.status !== 'playing';
-            if (r.feedback) {
-                s.fb.value = {
-                    correct: r.correct,
-                    title: r.correct ? 'Right!' : timeout || r.late ? 'Out of time' : 'Not quite',
-                    rightAnswer: r.feedback.rightAnswer, explanation: r.feedback.explanation,
-                    nextLabel: done ? 'See your score' : 'Next question'
-                };
-                s.screen.value = 'feedback';
-                say(s.fb.peek().title);
-                focus('fb');
-                return;
-            }
-            if (done) { stopClocks(); return showResult(); }
-            // The next question's clock starts when the server hands it over, so ask for it.
-            await load();
-        } catch (err) {
-            if (err.code === 'not-current' || err.code === 'finished') return load();
-            s.busy.value = false;
-            s.live.value = err.message;
-        }
-    }
-
-    async function showResult() {
-        stopClocks();
-        try {
-            const r = await request(`${API}/play/${encodeURIComponent(play.playId)}/result`, {token: play.token});
-            const placeText = r.test
-                ? `A test go, so it is not on the leaderboard.${r.wouldPlace ? ` It would have come ${ordinal(r.wouldPlace)} of all time.` : ''}`
-                : r.place ? `You came ${ordinal(r.place)} of all time${r.placeToday && r.placeToday !== r.place ? `, ${ordinal(r.placeToday)} today` : ''}.` : '';
-            s.res.value = {
-                title: r.timeUp ? `Time's up, ${r.name}!` : `Well done, ${r.name}!`,
-                scoreText: `${r.score} / ${r.maxScore}`,
-                detail: `${r.correct} of ${r.total} right in ${fmtDuration(r.timeMs)}.`,
-                placeText
-            };
-            s.review.value = (r.review || []).map((x, i) => ({
-                k: `r${i}`, text: `${i + 1}. ${x.text}`, correct: x.correct, right: x.right, explanation: x.explanation,
-                mark: x.correct ? '✓' : '✗', yoursText: x.yours ? `You said: ${x.yours}` : x.late ? 'Out of time' : 'No answer'
-            }));
-            s.screen.value = 'result';
-            say(`${s.res.peek().title} ${s.res.peek().detail} ${placeText}`);
-            focus('res');
-            board?.refresh(play.playId);
-            if (r.place === 1 && !r.test) celebrate();
-        } catch (err) {
-            if (err.status === 404) { forget(); s.screen.value = 'intro'; return; }
-            s.problem.value = err.message;
-            s.screen.value = 'error';
-        }
-    }
-
-    async function begin() {
-        if (s.busy.peek()) return;
-        s.problem.value = '';
-        s.busy.value = true;
-        try {
-            const r = test ? await test.start() : await request(`${API}/quiz/${encodeURIComponent(cfg.slug)}/start`, {
-                method: 'POST', body: {name: s.name.peek(), website: s.website.peek()}
-            });
-            play = {playId: r.playId, token: r.token};
-            if (test) {
-                if (r.info) { s.info.value = r.info; s.facts.value = facts(r.info); }
-            } else {
-                memory.set(NAME_KEY, r.name);
-                memory.set(playKey(cfg.slug), play);
-            }
-            await load();
-        } catch (err) {
-            s.problem.value = errText(err);
-            s.busy.value = false;
-            if (!test) focus('name');
-        }
-    }
-
-    const methods = {
-        // Form handlers answer false at once (no native submit, no reload); the work runs after.
-        start() { begin(); return false; },
-        choose(opt) {
-            if (s.busy.peek()) return;
-            if (s.q.peek().kind === 'multiple') {
-                s.options.value = s.options.peek().map(o => (o.id === opt.id ? {...o, picked: !o.picked} : o));
-                return;
-            }
-            send(opt.id);
-        },
-        sendPicked() {
-            if (s.q.peek().kind === 'text') return send(s.typed.peek());
-            send(s.options.peek().filter(o => o.picked).map(o => o.id));
-        },
-        sendTyped() { send(s.typed.peek()); return false; },
-        next() {
-            if (current?.status !== 'playing') return showResult();
-            load();
-        },
-        async again() {
-            forget();
-            s.problem.value = '';
-            s.busy.value = false;
-            await loadInfo().catch(() => {});
-            s.screen.value = 'intro';
-            focus('name');
-        }
-    };
-
-    const bindings = M.applyBindings({...s, ...methods}, el, {methods});
-
-    loadInfo().then(load).catch((err) => {
-        s.problem.value = err.status === 404 ? 'This quiz is not available.' : errText(err);
-        s.screen.value = 'error';
-    });
-
-    // Gone from the page (an SPA swap): stop the clocks.
-    const dispose = () => { stopClocks(); stopTicks?.(); board?.dispose(); bindings?.dispose?.(); watch.disconnect(); };
-    const watch = new MutationObserver(() => { if (!el.isConnected) dispose(); });
-    watch.observe(document.body, {childList: true, subtree: true});
-    return {dispose};
-}
-
-function mountAll() {
-    for (const el of document.querySelectorAll('[data-quiz]')) {
-        if (el.dataset.gmMounted) continue;
-        el.dataset.gmMounted = '1';
-        mount(el);
-    }
-    mountBoards('data-quiz-board', (slug) => `${API}/quiz/${encodeURIComponent(slug)}/leaderboard`);
-}
-
-if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', mountAll);
-else mountAll();