mdeck 3.3.0 → 3.5.0

package/src/components/WordCloud.jsx

@@ -2,7 +2,8 @@ import { h } from 'preact'
 import { useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import cloud from 'd3-cloud'
 import { useRoom } from '../live/client.js'
-import { JoinCode, ActivityFooter, wantsQr } from './activity.jsx'
+import { JoinCode, ActivityFooter, ActivityQuestion, ActivityControls, useControls, wantsQr } from './activity.jsx'
+import { phoneQuestion } from './inlineText.js'
 import { t } from '../core/labels.js'
 import './poll.css'
 
@@ -64,7 +65,8 @@ function layout(words, { width, height, font }) {
 
 export default function WordCloud({ room = 'words', question = '', limit = '60', height = '520', qr }) {
   const live = useRoom(room)
-  const all = countWords(live.messages)
+  const controls = useControls(room, live)
+  const all = countWords(controls.counted(live.messages))
   const words = all.slice(0, Math.max(1, Number(limit) || 60))
   const total = all.reduce((sum, word) => sum + word.n, 0)
   const cloudHeight = Math.max(200, Number(height) || 520)
@@ -85,9 +87,9 @@ export default function WordCloud({ room = 'words', question = '', limit = '60',
   const key = words.map(word => `${word.text}:${word.n}`).join('|')
   const placed = useMemo(() => layout(words, { width: measure.width, height: cloudHeight, font: measure.font }), [key, measure.width, measure.font, measure.fontsReady, cloudHeight])
   const code = wantsQr(qr)
-  return <div class="poll poll--cloud">
+  return <div class={`poll poll--cloud${controls.closed ? ' is-closed' : ''}`} ref={controls.ref}>
     <div class="poll-main">
-      {question && <p class="poll-question">{question}</p>}
+      <ActivityQuestion text={question} />
       {/* Without a server and words there is nothing to place: no empty box. */}
       <div class="word-cloud" ref={ref} style={{ height: live.offline && !words.length ? 0 : `${cloudHeight}px` }}>
         {words.length
@@ -97,10 +99,12 @@ export default function WordCloud({ room = 'words', question = '', limit = '60',
           </svg>
           : !live.offline && <p class="question-empty">{t('question.empty')}</p>}
       </div>
-      <ActivityFooter count={total} {...live} />
+      <ActivityFooter count={total} {...live} reset={controls.reset} closed={controls.closed}>
+        <ActivityControls controls={controls} messages={live.messages} offline={live.offline} />
+      </ActivityFooter>
     </div>
     <JoinCode room={room} {...live} qr={code} size={240} />
   </div>
 }
 
-WordCloud.phone = ({ question, placeholder }, { slideTitle = '' } = {}) => ({ type: 'text', question: question || slideTitle, placeholder: placeholder ?? '', maxLength: 40 })
+WordCloud.phone = ({ question, placeholder }, { slideTitle = '' } = {}) => ({ type: 'text', ...phoneQuestion(question, slideTitle), placeholder: placeholder ?? '', maxLength: 40 })

package/src/components/activity.jsx

@@ -1,15 +1,25 @@
 import { h } from 'preact'
+import { useEffect, useRef, useState } from 'preact/hooks'
 import QrCode from './QrCode.jsx'
+import { Icon } from './Icon.jsx'
 import { t } from '../core/labels.js'
+import { keepAnswers } from '../live/client.js'
+import { slideHtml } from './inlineText.js'
+import 'katex/dist/katex.min.css'
 
 // Parts every activity on a slide shares (<poll>, <question>, <wordcloud>,
-// <scale>, and <qrcode join />): the deck's join code and the line with the number of
-// answers, the live dot and Reset.
+// <scale>, <numeric> and <qrcode join />): the deck's join code, the line with
+// the number of answers, the live dot, Reset and the presenter's controls.
 
 export const shortLink = url => url.replace(/^https?:\/\//, '')
 // `qr="false"` (or "no", "off") leaves the code out: it was on an earlier
 // slide (<qrcode join />), and people's phones follow along.
 export const wantsQr = qr => !/^(false|no|off|0)$/i.test(String(qr ?? 'true'))
+// A switch such as `multiple`: on when given, unless it says false.
+export const isSet = value => value != null && !/^(false|no|off|0)$/i.test(String(value))
+
+/** An activity's question, Markdown with $…$ maths. */
+export const ActivityQuestion = ({ text }) => text ? <p class="poll-question" dangerouslySetInnerHTML={{ __html: slideHtml(text) }} /> : null
 
 /** The join code with the short link, or how to make phones reach the server. */
 export function JoinCode({ room, joinUrl, localJoinUrl, known, offline, qr = true, size = 300, label = t('poll.scan'), tryHere = t('poll.tryHere') }) {
@@ -22,14 +32,85 @@ export function JoinCode({ room, joinUrl, localJoinUrl, known, offline, qr = tru
   </a>
 }
 
-/** Number of answers, whether the room is live, and Reset for the presenter; `children` go at the end. */
-export function ActivityFooter({ count, connected, canReset, reset, offline, children }) {
+// What every screen of the talk shares about an activity: whether it still
+// takes answers (`closed`; `upTo` is the last answer that counts), whether
+// its right answer shows (`revealed`) and whether its results show. The
+// activity room's state on the server holds them, so the audience window, an
+// iPad, a reloaded presenter view and the phones follow: phones say the
+// activity is closed and, once the answer shows, whether theirs was right
+// (`solution`, sent only then). Between windows of one browser, and where
+// this one may not change the room, the stage event `pollcontrols` carries
+// them too (src/runtime/ink/bus.js).
+const CONTROLS = ['closed', 'upTo', 'revealed', 'results']
+const controlsIn = state => Object.fromEntries(CONTROLS.filter(key => state && typeof state === 'object' && key in state).map(key => [key, state[key]]))
+
+export function useControls(room, live, { results = true, solution = null } = {}) {
+  const ref = useRef()
+  const [controls, setControls] = useState({ closed: false, upTo: 0, revealed: false, results })
+  const kept = JSON.stringify(controlsIn(live.state))
+  useEffect(() => { if (kept !== '{}') setControls(now => ({ ...now, ...JSON.parse(kept) })) }, [kept])
+  useEffect(() => {
+    const stage = ref.current?.closest('deck-stage')
+    if (!stage) return
+    const follow = event => { if (event.detail?.room === room && !event.detail.local) setControls(now => ({ ...now, ...controlsIn(event.detail.controls) })) }
+    stage.addEventListener('pollcontrols', follow)
+    return () => stage.removeEventListener('pollcontrols', follow)
+  }, [room])
+  const change = patch => {
+    const next = { ...controls, ...patch }
+    setControls(next)
+    ref.current?.closest('deck-stage')?.dispatchEvent(new CustomEvent('pollcontrols', { detail: { room, controls: next, local: true } }))
+    if (live.canReset) live.setState({ ...next, ...(next.revealed && solution != null ? { solution } : {}) }).catch(() => {})
+  }
+  // The answers that count: once closed, those that came before.
+  const counted = messages => controls.closed ? messages.filter(message => message.n <= controls.upTo) : messages
+  // They are kept beside the deck while `mdeck run` runs. A room that
+  // starts empty (a new server) leaves what was kept alone; one that was
+  // reset takes it out.
+  const answered = useRef(false)
+  const counting = counted(live.messages)
+  useEffect(() => {
+    if (!live.canReset || !live.connected || live.offline || (!counting.length && !answered.current)) return
+    answered.current = true
+    keepAnswers(room, counting, { closed: controls.closed })
+  }, [room, counting.length, counting.at(-1)?.n, controls.closed, live.canReset, live.connected])
+  const close = messages => change(controls.closed ? { closed: false } : { closed: true, upTo: Math.max(0, ...messages.map(message => message.n)) })
+  // Reset starts over: open, the answer and results as at the start.
+  const reset = () => { change({ closed: false, upTo: 0, revealed: false, results }); return live.reset() }
+  return { ...controls, ref, change, counted, close, reset }
+}
+
+/**
+ * The presenter's buttons: close (a lock), show or hide the results (an
+ * eye, with `results`), show the right answer (a tick, with `solve`).
+ * A record of the talk (`offline`) can still show the answer and results.
+ */
+export function ActivityControls({ controls, messages, offline = false, results = false, solve = false }) {
+  const button = (name, on, label, onClick, icon) => <button type="button" class={`poll-control poll-${name}${on ? ' is-on' : ''}`} title={label} aria-label={label} aria-pressed={on} onClick={onClick}>{icon}</button>
+  return <>
+    {!offline && button('close', controls.closed, t(controls.closed ? 'poll.open' : 'poll.close'), () => controls.close(messages), <Icon name={controls.closed ? 'lock' : 'lock-open'} size={22} />)}
+    {results && button('results', !controls.results, t(controls.results ? 'poll.hideResults' : 'poll.showResults'), () => controls.change({ results: !controls.results }), <Icon name={controls.results ? 'eye' : 'eye-off'} size={24} />)}
+    {solve && button('solve', controls.revealed, t(controls.revealed ? 'poll.hideAnswer' : 'poll.showAnswer'), () => controls.change({ revealed: !controls.revealed }), <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12l5 5 9-10" /></svg>)}
+  </>
+}
+
+/**
+ * Number of answers, whether the room is live, and Reset for the presenter;
+ * `children` go at the end. With `perPhone` (one answer per phone) the
+ * count says of how many phones; `closed` says the activity takes no more.
+ */
+export function ActivityFooter({ count, connected, canReset, reset, offline, present = null, perPhone = false, closed = false, children }) {
   // Without a server this is a record of the talk: no count, dot or buttons.
   if (offline && !count) return <p class="poll-total poll-static">{t('poll.static')}</p>
+  // Followers count as phones too; with more answers than phones, some left.
+  const of = perPhone && !offline && present > 0 && present >= count ? present : null
   return <p class="poll-total">
-    <span class={`poll-dot${connected ? ' is-live' : ''}`} title={connected ? t('poll.live') : t('poll.offline')} />
-    {count === 1 ? t('poll.answer') : t('poll.answers', { n: count })}
-    {canReset && <button class="poll-reset" disabled={count === 0} onClick={() => reset().catch(() => {})}>{t('poll.reset')}</button>}
+    {/* The answers kept in the talk, without a server: no live dot. */}
+    {!offline && <span class={`poll-dot${connected ? ' is-live' : ''}`} title={connected ? t('poll.live') : t('poll.offline')} />}
+    {of != null ? t('poll.answeredOf', { n: count, of }) : count === 1 ? t('poll.answer') : t('poll.answers', { n: count })}
+    {closed && <span class="poll-closed">{t('poll.closed')}</span>}
+    <span class="poll-spacer" />
+    {canReset && <button class="poll-reset" disabled={count === 0 && !closed} onClick={() => reset().catch(() => {})}>{t('poll.reset')}</button>}
     {children}
   </p>
 }

package/src/components/inlineText.js

@@ -0,0 +1,63 @@
+import { Marked } from 'marked'
+import markedKatex from 'marked-katex-extension'
+
+// Short texts in a tag's attributes (a poll's question and options) as one
+// line of Markdown with $…$ maths, like the text on a slide. The slide gets
+// KaTeX's HTML; the phones' answer page has no KaTeX, so it gets MathML,
+// which browsers draw themselves (src/live/answer/answer.js).
+const slide = new Marked().use(markedKatex({ throwOnError: false, output: 'html' }))
+const phone = new Marked().use(markedKatex({ throwOnError: false, output: 'mathml' }))
+
+export const slideHtml = text => slide.parseInline(String(text ?? ''))
+export const phoneHtml = text => phone.parseInline(String(text ?? ''))
+
+/** An activity's question for the phones: the text, and drawn when the tag has one (else the slide's heading, as text). */
+export const phoneQuestion = (question, slideTitle) => question ? { question, questionHtml: phoneHtml(question) } : { question: slideTitle }
+
+// A formula, as KaTeX's inline rule finds it: $…$ or $$…$$, not starting
+// with a space, and ending before a space, punctuation, a bar or the end.
+const MATH = /^(\${1,2})(?!\$|\s)(?:\\.|[^\\\n$])*?\1(?=[\s?!.,:|]|$)/
+
+// Reads options as Markdown, with formulas as one piece each, to find the
+// bars between them.
+const splitter = new Marked().use({ extensions: [{
+  name: 'math',
+  level: 'inline',
+  start: src => src.indexOf('$') < 0 ? undefined : src.indexOf('$'),
+  tokenizer: src => { const math = MATH.exec(src); if (math) return { type: 'math', raw: math[0] } },
+}] })
+
+// Text, emphasis and strikethrough are split at their bars; code, formulas,
+// links, pictures and tags are whole, and `\|` is a bar in the text.
+const SPLIT = new Set(['text', 'em', 'strong', 'del'])
+function splitTokens(tokens, parts) {
+  for (const token of tokens) {
+    if (token.type === 'escape' && token.text === '|') parts[parts.length - 1] += '|'
+    else if (SPLIT.has(token.type) && token.tokens?.length) {
+      const inner = token.tokens.map(child => child.raw).join('')
+      const at = token.raw.indexOf(inner)
+      if (at < 0) { splitText(token.raw, parts); continue }
+      parts[parts.length - 1] += token.raw.slice(0, at)
+      splitTokens(token.tokens, parts)
+      parts[parts.length - 1] += token.raw.slice(at + inner.length)
+    } else if (SPLIT.has(token.type)) splitText(token.raw, parts)
+    else parts[parts.length - 1] += token.raw
+  }
+}
+function splitText(text, parts) {
+  const [first, ...rest] = text.split('|')
+  parts[parts.length - 1] += first
+  parts.push(...rest)
+}
+
+/**
+ * "A|B|C" as ["A", "B", "C"], each as written. A bar in a formula belongs to
+ * it ($|x|$, $\{x \mid x > 0\}$), as does one in `code`, a [link](…) or a
+ * picture; \| is a bar in the text. "$5|$10" is two options: neither $
+ * starts a formula. Emphasis does not hold a bar: "2*3|4*5" is two options.
+ */
+export function choicesOf(options) {
+  const parts = ['']
+  splitTokens(splitter.Lexer.lexInline(String(options ?? ''), splitter.defaults), parts)
+  return parts.map(choice => choice.trim()).filter(Boolean)
+}

package/src/components/numbers.js

@@ -0,0 +1,39 @@
+// Numbers typed on a phone for <numeric>. The answer page has its own copy
+// of parseNumber (src/live/answer/answer.js), as it has no build step.
+
+/** 0.5, 0,5, −3, 1e-3 or 1/2 as a number; null for anything else. */
+export function parseNumber(text) {
+  const plain = String(text ?? '').trim().replace(/\s+/g, '').replace(/−/g, '-').replace(/(\d),(\d)/g, '$1.$2')
+  const parts = plain.match(/^([+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?)(?:\/((?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?))?$/i)
+  if (!parts) return null
+  const value = parts[2] ? Number(parts[1]) / Number(parts[2]) : Number(parts[1])
+  return Number.isFinite(value) ? value : null
+}
+
+/**
+ * The answers grouped by value, most frequent first: [{ value, text, n }].
+ * `text` is how most people typed it (0.5, or 1/2). Values that differ only
+ * in the last digits of a float (1/3 and 0.333333333333) count as one.
+ */
+export function groupNumbers(texts) {
+  const groups = new Map()
+  for (const text of texts) {
+    const value = parseNumber(text)
+    if (value == null) continue
+    const key = Number(value.toPrecision(12))
+    const group = groups.get(key) ?? { value, n: 0, spellings: new Map() }
+    const spelling = String(text).trim()
+    group.n++
+    group.spellings.set(spelling, (group.spellings.get(spelling) ?? 0) + 1)
+    groups.set(key, group)
+  }
+  return [...groups.values()]
+    .map(({ value, n, spellings }) => ({ value, n, text: [...spellings].sort((a, b) => b[1] - a[1])[0][0] }))
+    .sort((a, b) => b.n - a.n || a.value - b.value)
+}
+
+/** Whether `value` is the answer, give or take `tolerance` (0: equal, as far as floats go). */
+export function isRightNumber(value, answer, tolerance = 0) {
+  if (value == null || answer == null) return false
+  return Math.abs(value - answer) <= Math.max(tolerance, 1e-9 * Math.max(1, Math.abs(answer)))
+}

package/src/components/poll.css

@@ -1,36 +1,44 @@
 /* ── Poll on the slide ─────────────────────────────────────────────────── */
+/* What follows an activity (or a join code) on the slide has room above it,
+   as after a list: the component's wrapper has no margin of its own. */
+:is(.slide-body, [data-region]) div:has(> .poll, > .poll-join-slide) + * { margin-top: var(--gap-item, 32px); }
 .poll { display: flex; gap: 72px; align-items: center; width: 100%; font-size: var(--fs-body, 36px); color: var(--ink, #111); }
 .poll-main { flex: 1; min-width: 0; }
 .poll .poll-question { margin: 0 0 32px; font-weight: 600; }
 .poll-bars { display: grid; gap: 20px; }
 .poll-row { display: grid; grid-template-columns: minmax(120px, 28%) 1fr 3ch; gap: 24px; align-items: center; }
 .poll-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* buttons="letters|numbers": the key phones show, before the option. */
+.poll-key { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; margin-right: .5em; padding: 0 .3em; border-radius: .4em; background: color-mix(in srgb, var(--accent, #0d9488) 14%, transparent); color: var(--accent, #0d9488); font-weight: 700; font-size: .8em; vertical-align: .1em; }
+/* A picture as an option: a thumbnail beside its bar. */
+.poll-label:has(img) { white-space: normal; }
+.poll-label img { max-height: 3.2em; max-width: 100%; vertical-align: middle; }
+.poll .poll-several { margin: -20px 0 24px; font-size: var(--fs-small, 24px); color: var(--muted, #666); }
 .poll-track { height: 1.1em; background: color-mix(in srgb, var(--ink, #111) 8%, transparent); border-radius: 6px; overflow: hidden; }
 .poll-fill { display: block; height: 100%; background: var(--accent, #0d9488); border-radius: 6px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
 .poll-count { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
 .poll .poll-total { display: flex; align-items: center; gap: 14px; margin: 36px 0 0; font-size: var(--fs-small, 24px); color: var(--muted, #666); }
 .poll-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted, #999); opacity: .5; }
 .poll-dot.is-live { background: #16a34a; opacity: 1; }
-.poll-reset { margin-left: auto; padding: 4px 14px; border: 1px solid var(--rule, #ccc); border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
+.poll-spacer { flex: 1; }
+.poll-reset { padding: 4px 14px; border: 1px solid var(--rule, #ccc); border-radius: 6px; background: none; color: inherit; font: inherit; cursor: pointer; }
 .poll-reset:disabled { opacity: .4; cursor: default; }
 /* The audience sees the results, not the presenter's controls. */
 deck-stage[data-follower] .poll-reset { display: none; }
 /* answer="…": the tick outlines the right answer's row (label, bar, count) in green. */
-.poll-solve { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid var(--rule, #ccc); border-radius: 50%; background: none; color: var(--muted, #666); cursor: pointer; opacity: .55; transition: opacity .2s, background .2s, color .2s; }
-.poll-reset + .poll-solve { margin-left: 0; }
-.poll-results { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 1px solid var(--rule, #ccc); border-radius: 50%; background: none; color: var(--muted, #666); cursor: pointer; opacity: .55; transition: opacity .2s, background .2s, color .2s; }
-.poll-reset + .poll-results, .poll-results + .poll-solve { margin-left: 0; }
-.poll-results:hover, .poll-results:focus-visible { opacity: 1; }
-.poll-results.is-off { opacity: 1; background: var(--muted, #666); border-color: var(--muted, #666); color: #fff; }
-deck-stage[data-follower] .poll-results { display: none; }
+/* The presenter's controls: close (lock), results (eye), right answer (tick). */
+.poll-control { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--rule, #ccc); border-radius: 50%; background: none; color: var(--muted, #666); cursor: pointer; opacity: .55; transition: opacity .2s, background .2s, color .2s; }
+.poll-control:hover, .poll-control:focus-visible { opacity: 1; }
+.poll-close.is-on, .poll-results.is-on { opacity: 1; background: var(--muted, #666); border-color: var(--muted, #666); color: #fff; }
+deck-stage[data-follower] .poll-control { display: none; }
+/* Closed: no more answers count. */
+.poll-closed { padding: 2px 12px; border-radius: 999px; background: color-mix(in srgb, var(--ink, #111) 10%, transparent); color: var(--ink, #111); font-weight: 600; }
 /* results="hidden" or the eye off: the presenter's screens show the results faint and hatched, the audience none. */
 .poll.is-results-hidden .poll-fill { opacity: .35; background: repeating-linear-gradient(45deg, var(--accent, #0d9488) 0 8px, transparent 8px 14px); }
 .poll.is-results-hidden .poll-count { opacity: .35; }
 deck-stage[data-follower] .poll.is-results-hidden .poll-fill, deck-stage[data-follower] .poll.is-results-hidden .poll-count { visibility: hidden; }
 .poll-solve svg { width: 24px; height: 24px; }
-.poll-solve:hover, .poll-solve:focus-visible { opacity: 1; }
 .poll-solve.is-on { opacity: 1; background: var(--poll-correct, #16a34a); border-color: var(--poll-correct, #16a34a); color: #fff; }
-deck-stage[data-follower] .poll-solve { display: none; }
 .poll.is-solved .poll-row.is-correct { outline: 4px solid var(--poll-correct, #16a34a); outline-offset: 10px; border-radius: 10px; }
 .poll.is-solved .poll-row.is-correct .poll-label { font-weight: 700; color: var(--poll-correct, #16a34a); }
 .poll-link { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 20px; color: var(--muted, #555); }
@@ -76,16 +84,21 @@ deck-stage[data-follower] .poll-solve { display: none; }
 .poll-join-slide { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
 .poll-join-slide .poll-join { font-size: var(--fs-body, 32px); gap: 16px; padding: 24px 32px; }
 .poll-join-slide .poll-link { font-size: 28px; }
-@media print { .poll-reset, .poll-dot, .poll-solve, .poll-results { display: none; } .poll-fill, .scale-fill, .word { transition: none; animation: none; } .question-cards li { animation: none; } }
+@media print { .poll-reset, .poll-dot, .poll-control { display: none; } .poll-fill, .scale-fill, .word { transition: none; animation: none; } .question-cards li { animation: none; } }
 
 /* A record of the talk (no room server: a PDF, a file sent to readers): the
    question and its options, without counts, the live dot or a join code. */
 .poll.is-static .poll-count, .poll.is-static .scale-count { visibility: hidden; }
-.poll.is-static .poll-results { display: none; }
+.poll.is-static .poll-close { display: none; }
 .poll .poll-static, .poll-join-slide .poll-static { margin: 36px 0 0; color: var(--muted, #666); font-style: italic; font-size: var(--fs-small, 24px); }
 .poll-join-slide .poll-static { margin: 0; font-size: var(--fs-body, 32px); }
 
 /* On paper the join code and the presenter's controls have no use. */
 @media print {
-  .poll-join, .poll-reset, .poll-solve, .poll-dot, .poll-results { display: none !important; }
+  .poll-join, .poll-reset, .poll-dot, .poll-control { display: none !important; }
 }
+
+/* <numeric>: the most frequent answers; Other for the rest. */
+.poll-row.is-other .poll-label { color: var(--muted, #666); font-style: italic; }
+.poll--numeric .poll-label { font-variant-numeric: tabular-nums; }
+.poll .numeric-answer { margin: 24px 0 0; font-weight: 600; color: var(--poll-correct, #16a34a); }

package/src/core/editDeck.js

@@ -4,7 +4,7 @@
 // identical; callers reparse the result.
 import { parseSlides, SLIDE_KEYS, DECK_KEYS } from './parseSlides.js'
 import { applySourceEdits, replaceRegion, normalizeBlock, detectNewline, patchYamlMapping, firstYamlKey } from './source.js'
-import { maskCode } from '../live/roomTag.js'
+import { openTagsIn } from './tags.js'
 
 const REGION_RE = /^[a-z][a-z0-9-]*$/
 
@@ -233,16 +233,15 @@ export function stripNotes(source) {
 // The live activities, and the code to join them (<qrcode join />): a slide
 // with one of them is left out of shared builds. <qrcode follow /> and other
 // QR codes stay.
-const ACTIVITY_RE = /<(poll|question|wordcloud|scale)\b/i
-const JOIN_RE = /<qrcode\b[^>]*?\sjoin(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|\{?([^\s/>}]*)\}?))?(?=[\s/>])/i
-const joins = text => { const m = JOIN_RE.exec(text); return !!m && !/^(false|no|off|0)$/i.test(m[1] ?? m[2] ?? m[3] ?? '') }
+const ACTIVITIES = new Set(['poll', 'question', 'wordcloud', 'scale', 'numeric'])
+const joins = tag => tag.name === 'qrcode' && 'join' in tag.attrs && !/^\{?(false|no|off|0)\}?$/i.test(tag.attrs.join.trim())
 export function hasActivity(slide) {
   return [slide.content ?? '', ...Object.values(slide.regions ?? {}).map(region => region.content ?? '')]
-    .some(text => { const masked = maskCode(text); return ACTIVITY_RE.test(masked) || joins(masked) })
+    .some(text => openTagsIn(text).some(tag => ACTIVITIES.has(tag.name) || joins(tag)))
 }
 
 // Removes every slide with a live activity (<poll>, <question>, <wordcloud>,
-// <scale>) for shared builds: a reader cannot vote, and the results belong to
+// <scale>, <numeric>) for shared builds: a reader cannot vote, and the results belong to
 // the talk. Returns { source, ids, removed }: `ids` maps each kept slide's id
 // to its id afterwards (an automatic `slide-N` moves up), `removed` the ids
 // that are gone, so saved drawings can follow their slides.

package/src/core/icons.js

@@ -41,6 +41,8 @@ export const ICONS = {
   trash: '<path d="M10 11v6"/><path d="M14 11v6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>', // trash-2
   eye: '<path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/>', // eye
   'eye-off': '<path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/>', // eye-off
+  lock: '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>', // lock
+  'lock-open': '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/>', // lock-open
   finger: '<path d="M22 14a8 8 0 0 1-8 8"/><path d="M18 11v-1a2 2 0 0 0-2-2a2 2 0 0 0-2 2"/><path d="M14 10V9a2 2 0 0 0-2-2a2 2 0 0 0-2 2v1"/><path d="M10 9.5V4a2 2 0 0 0-2-2a2 2 0 0 0-2 2v10"/><path d="M18 11a2 2 0 1 1 4 0v3a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15"/>', // pointer
   pen: '<path d="M13 21h8"/><path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/>', // pen-line
   highlighter: '<path d="m9 11-6 6v3h9l3-3"/><path d="m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4"/>', // highlighter

package/src/core/labels.js

@@ -55,6 +55,22 @@ export const LABELS = {
     'follow.waiting': 'The talk has not started yet.',
     'follow.tryHere': 'Try following here',
     'join.static': 'During the talk, phones joined here to answer.',
+    'poll.answeredOf': '{n} of {of} answered',
+    'poll.close': 'Close: later answers do not count',
+    'poll.open': 'Open again',
+    'poll.closed': 'Closed',
+    'poll.several': 'Several answers possible.',
+    'poll.pickSeveral': 'Tap all that apply.',
+    'poll.thanksSeveral': 'Thanks! You chose {choice}. Tap to change.',
+    'respond.closed': 'Closed: no more answers.',
+    'respond.right': 'Right!',
+    'respond.wrong': 'Not quite. The right answer: {answer}',
+    'respond.solution': 'The right answer: {answer}',
+    'numeric.placeholder': 'A number',
+    'numeric.invalid': 'Enter a number, such as 0.5 or 1/2.',
+    'numeric.sent': 'Sent: {value}. Send another to change.',
+    'numeric.other': 'Other',
+    'numeric.right': '{n} right',
     'question.empty': 'Answers appear here.',
     'scale.average': 'Average {n}',
   },
@@ -108,6 +124,22 @@ export const LABELS = {
     'follow.waiting': 'Der Vortrag hat noch nicht begonnen.',
     'follow.tryHere': 'Mitverfolgen hier ausprobieren',
     'join.static': 'Im Vortrag haben sich hier die Handys zum Antworten verbunden.',
+    'poll.answeredOf': '{n} von {of} haben geantwortet',
+    'poll.close': 'Schliessen: spätere Antworten zählen nicht',
+    'poll.open': 'Wieder öffnen',
+    'poll.closed': 'Geschlossen',
+    'poll.several': 'Mehrere Antworten möglich.',
+    'poll.pickSeveral': 'Alle zutreffenden antippen.',
+    'poll.thanksSeveral': 'Danke! Gewählt: {choice}. Zum Ändern antippen.',
+    'respond.closed': 'Geschlossen: keine weiteren Antworten.',
+    'respond.right': 'Richtig!',
+    'respond.wrong': 'Leider nicht. Richtig ist: {answer}',
+    'respond.solution': 'Richtig ist: {answer}',
+    'numeric.placeholder': 'Eine Zahl',
+    'numeric.invalid': 'Eine Zahl eingeben, z. B. 0,5 oder 1/2.',
+    'numeric.sent': 'Gesendet: {value}. Zum Ändern eine andere senden.',
+    'numeric.other': 'Andere',
+    'numeric.right': '{n} richtig',
     'question.empty': 'Hier erscheinen die Antworten.',
     'scale.average': 'Durchschnitt {n}',
   },

package/src/core/pollList.js

@@ -0,0 +1,66 @@
+import { Marked } from 'marked'
+import { tagsIn, closingTagOf } from './tags.js'
+
+// A poll's options as a Markdown list inside the tag, for options that are
+// more than a word: pictures, long formulas, text with bars in it.
+//
+//   <poll room="deriv" question="What is $\frac{d}{dx} x^2$?">
+//   - [x] $2x$
+//   - [ ] $x^2$
+//   </poll>
+//
+// Each item is one option, as written; `[x]` marks a right answer. Before a
+// slide is drawn, and before the phones read the tag, such a poll becomes
+// `<poll … data-choices="[…]">` with the options as JSON, so Poll needs no
+// Markdown of its own to find them. A poll whose content is not a list
+// stays as it is.
+
+const lexer = new Marked()
+
+const attributeText = text => text.replace(/&/g, '&amp;').replace(/"/g, '&quot;')
+
+/**
+ * The options of a list, [{ text, right }], or null when `markdown` is not
+ * a list. A change of bullet (`-` to `*`) starts a new list in Markdown;
+ * here it goes on with the same options.
+ */
+export function listChoices(markdown) {
+  const blocks = lexer.lexer(markdown).filter(token => token.type !== 'space')
+  if (!blocks.length || blocks.some(block => block.type !== 'list')) return null
+  const choices = blocks.flatMap(block => block.items)
+    .map(item => ({ text: item.text.replace(/\s*\n\s*/g, ' ').trim(), right: !!(item.task && item.checked) }))
+    // An empty `- [ ]` is no task to marked, but no option either.
+    .filter(choice => choice.text && !/^\[[ xX]\]$/.test(choice.text))
+  return choices.length ? choices : null
+}
+
+/** `markdown` with every poll that holds a list given its options as `data-choices`. */
+export function expandPollLists(markdown) {
+  const source = String(markdown ?? '')
+  if (!/<poll\b/i.test(source)) return source
+  const text = source.replace(/\r\n?/g, '\n')
+  const tags = tagsIn(text)
+  let out = ''
+  let last = 0
+  tags.forEach((open, at) => {
+    if (open.name !== 'poll' || open.closing || open.start == null || open.start < last) return
+    const close = closingTagOf(tags, at)
+    if (close?.start == null) return
+    const choices = listChoices(text.slice(open.end, close.start))
+    if (!choices) return
+    // The closing tag on a line of its own keeps the tag one block of HTML,
+    // as `<poll … />` on its line is, rather than a paragraph.
+    out += text.slice(last, open.start) + `${open.raw.slice(0, -1).trimEnd()} data-choices="${attributeText(JSON.stringify(choices))}">\n</poll>`
+    last = close.end
+  })
+  return last ? out + text.slice(last) : source
+}
+
+/** The options of a poll from its attributes: the list's, else `options`. */
+export function pollChoices(listed) {
+  try {
+    const choices = JSON.parse(listed)
+    if (Array.isArray(choices)) return choices.filter(choice => typeof choice?.text === 'string').map(choice => ({ text: choice.text, right: choice.right === true }))
+  } catch {}
+  return null
+}

package/src/core/results.js

@@ -0,0 +1,64 @@
+// The answers given during a talk, kept beside the deck as
+// <deck>.results.json, so they outlast the room server (which forgets them)
+// and show in builds, PDFs and files sent to readers.
+//
+//   { "version": 1, "rooms": { "<room>": { "savedAt": "…", "closed": false,
+//     "answers": [{ "phone": 1, "at": "…", "value": … }] } } }
+//
+// Phones are numbered per room in the order they first answered; their own
+// ids never leave the room server. `answers` are those that counted: once an
+// activity was closed, the ones before.
+
+export const resultsFileFor = deckPath => String(deckPath).replace(/\.md$/i, '') + '.results.json'
+
+const ROOM_RE = /^[A-Za-z0-9][A-Za-z0-9._-]{0,99}$/
+
+/** One room's answers as kept: room messages ({ n, at, from, data }) with numbered phones. */
+export function keptAnswers(messages) {
+  const phones = new Map()
+  return messages.map(message => {
+    const from = message.from ?? `#${message.n}`
+    if (!phones.has(from)) phones.set(from, phones.size + 1)
+    return { phone: phones.get(from), at: message.at ?? null, value: message.data?.value ?? null }
+  })
+}
+
+/** Kept answers as room messages again, for the slides that show them. */
+export const answersAsMessages = answers => answers.map((answer, i) => ({ n: i + 1, at: answer.at, from: `phone-${answer.phone}`, data: { value: answer.value } }))
+
+/** A results file as read, with anything unexpected left out. */
+export function normalizeResults(data) {
+  const rooms = {}
+  for (const [room, entry] of Object.entries(data?.rooms ?? {})) {
+    if (!ROOM_RE.test(room) || !Array.isArray(entry?.answers)) continue
+    rooms[room] = {
+      savedAt: typeof entry.savedAt === 'string' ? entry.savedAt : null,
+      closed: !!entry.closed,
+      answers: entry.answers.filter(answer => answer && Number.isInteger(answer.phone)).map(({ phone, at, value }) => ({ phone, at: typeof at === 'string' ? at : null, value: value ?? null })),
+    }
+  }
+  return { version: 1, rooms }
+}
+
+/** One room's answers in, or (none) out; returns the new results. */
+export function withRoom(results, room, { answers, closed = false, savedAt = new Date().toISOString() }) {
+  if (!ROOM_RE.test(room)) throw Object.assign(new Error('Room names use letters, digits, dots, hyphens and underscores'), { status: 400 })
+  const rooms = { ...results.rooms }
+  if (Array.isArray(answers) && answers.length) rooms[room] = { savedAt, closed: !!closed, answers }
+  else delete rooms[room]
+  return normalizeResults({ rooms })
+}
+
+export const serializeResults = results => JSON.stringify(results, null, 2) + '\n'
+
+const csvCell = value => {
+  const text = value == null ? '' : Array.isArray(value) ? value.join('|') : String(value)
+  return /[",\n\r]/.test(text) ? `"${text.replace(/"/g, '""')}"` : text
+}
+
+/** All answers as CSV: room, phone, time, answer (several picks joined by |). */
+export function resultsCsv(results) {
+  const rows = [['room', 'phone', 'at', 'answer']]
+  for (const [room, entry] of Object.entries(results.rooms)) for (const answer of entry.answers) rows.push([room, answer.phone, answer.at, answer.value])
+  return rows.map(row => row.map(csvCell).join(',')).join('\n') + '\n'
+}