mdeck 3.3.0 → 3.5.0

package/src/build/slidesPlugin.js

@@ -8,11 +8,13 @@ import { embedFonts } from './fonts.js'
 import { stripNotes as stripNotesFrom, stripActivities as stripActivitiesFrom } from '../core/editDeck.js'
 import { componentFolders, componentFiles } from './components.js'
 import { inkFileFor, normalizeInk, emptyInk } from '../core/ink.js'
+import { resultsFileFor, normalizeResults } from '../core/results.js'
 import { isOwnWrite } from './ownWrites.js'
 import { fileURLToPath } from 'node:url'
 import { assertDrawings } from './drawings.js'
 import { marked } from 'marked'
-import { resolveBibliography } from './bibliography.js'
+import { scanTags, replaceTagsIn, withAttribute } from '../core/tags.js'
+import { resolveBibliography, sampleBibliography } from './bibliography.js'
 
 const VIRTUAL_ID = 'virtual:slides'
 const RESOLVED_ID = '\0virtual:slides'
@@ -27,6 +29,8 @@ const SVGS_ID = 'virtual:deck-svgs'
 const RESOLVED_SVGS_ID = '\0virtual:deck-svgs'
 const BIB_ID = 'virtual:bibliography'
 const RESOLVED_BIB_ID = '\0virtual:bibliography'
+const RESULTS_ID = 'virtual:deck-results'
+const RESOLVED_RESULTS_ID = '\0virtual:deck-results'
 
 const MIME_BY_EXT = {
   '.png': 'image/png',
@@ -94,21 +98,19 @@ function inlineMarkdownImages(markdown, baseDir) {
   })
 }
 
-function inlineHtmlImgSources(markdown, baseDir) {
-  return markdown.replace(/(<img\b[^>]*\bsrc=)(["'])([^"']+)(\2)/gi, (m, pre, quote, src, endQuote) => {
-    const dataUrl = toDataUrl(src, baseDir)
-    if (!dataUrl) return m
-    return `${pre}${quote}${dataUrl}${endQuote}`
+// The `src` of the named tags, as data: URLs where the file is local.
+function inlineTagSources(markdown, baseDir, names) {
+  return replaceTagsIn(markdown, tag => {
+    if (tag.closing || !names.has(tag.name) || !tag.attrs.src) return
+    const dataUrl = toDataUrl(tag.attrs.src, baseDir)
+    return dataUrl ? withAttribute(tag, 'src', dataUrl) : undefined
   })
 }
 
-function inlineHtmlMediaSources(markdown, baseDir) {
-  return markdown.replace(/(<(?:video|audio|source|videoplayer)\b[^>]*\bsrc=)(["'])([^"']+)(\2)/gi, (m, pre, quote, src, endQuote) => {
-    const dataUrl = toDataUrl(src, baseDir)
-    if (!dataUrl) return m
-    return `${pre}${quote}${dataUrl}${endQuote}`
-  })
-}
+const PICTURE_TAGS = new Set(['img'])
+const MEDIA_TAGS = new Set(['video', 'audio', 'source', 'videoplayer'])
+const inlineHtmlImgSources = (markdown, baseDir) => inlineTagSources(markdown, baseDir, PICTURE_TAGS)
+const inlineHtmlMediaSources = (markdown, baseDir) => inlineTagSources(markdown, baseDir, MEDIA_TAGS)
 
 function inlineYamlImageFields(markdown, baseDir) {
   return markdown.replace(/^(\s*)(image|logo):\s*(["']?)([^"'\n]+)\3\s*$/gm, (m, indent, key, quote, value) => {
@@ -138,7 +140,11 @@ export function collectLocalAssetRefs(markdown) {
       marked.walkTokens(marked.lexer(body), token => {
         if (token.type === 'image') add(token.href)
         if (token.type === 'html') {
-          for (const match of token.text.matchAll(/<(?:img|video|audio|source|videoplayer)\b[^>]*\bsrc=(["'])([^"']+)\1/gi)) add(match[2])
+          for (const tag of scanTags(token.text)) {
+            if (PICTURE_TAGS.has(tag.name) || MEDIA_TAGS.has(tag.name)) add(tag.attrs.src)
+            // Markdown pictures in a tag's attributes, such as a poll's options.
+            for (const value of Object.values(tag.attrs)) for (const match of value.matchAll(/!\[[^\]]*\]\(([^)\s]+)/g)) add(match[1])
+          }
         }
       })
     }
@@ -216,7 +222,7 @@ export function deckLookOnly(registry, deckConfig = {}) {
 // extension changes are announced instead of forcing a reload. `source` is
 // the deck's text where there is no file (`mdeck design`, on the sample deck);
 // `slidesPath` then only says where its folder is.
-export function slidesPlugin(slidesPath, { inlineImages = false, inlineMedia = false, editor = false, stripNotes = false, stripActivities = false, ink = true, embedFonts: embedThemeFonts = false, deckLook = false, source: given = null } = {}) {
+export function slidesPlugin(slidesPath, { inlineImages = false, inlineMedia = false, editor = false, stripNotes = false, stripActivities = false, ink = true, results = true, embedFonts: embedThemeFonts = false, deckLook = false, source: given = null } = {}) {
   const abs = resolve(slidesPath)
   const readDeck = () => given ?? readFileSync(abs, 'utf-8')
   const watchDeck = context => { if (given === null) context.addWatchFile(abs) }
@@ -225,6 +231,7 @@ export function slidesPlugin(slidesPath, { inlineImages = false, inlineMedia = f
     return stripActivities ? stripActivitiesFrom(shared).source : shared
   }
   const inkPath = inkFileFor(abs)
+  const resultsPath = resultsFileFor(abs)
   const extensionDirs = extensionRoots(abs).map(root => root.dir)
   let componentDirs = componentFolders(abs, readDeck()).map(folder => folder.dir)
   const watchDirs = () => [...extensionDirs, ...componentDirs]
@@ -243,6 +250,9 @@ export function slidesPlugin(slidesPath, { inlineImages = false, inlineMedia = f
   const SOURCE_IDS = [RESOLVED_ID, RESOLVED_INK_ID, RESOLVED_SVGS_ID, RESOLVED_BIB_ID]
   // The reference files (and .csl style) the deck names, from the last load.
   let bibFiles = []
+  // The dev and edit servers also show the sample deck (?sample=1, the
+  // design page), with its references from memory; builds never do.
+  let serving = false
   // The editor keeps its page: the formatted references arrive as a hot update.
   const bibUpdate = server => {
     const mod = server.moduleGraph.getModuleById(RESOLVED_BIB_ID)
@@ -262,6 +272,7 @@ export function slidesPlugin(slidesPath, { inlineImages = false, inlineMedia = f
 
   return {
     name: 'vite-plugin-slides',
+    configResolved(config) { serving = config.command === 'serve' },
     configureServer(server) {
       server.watcher.add([abs, inkPath, ...watchDirs()])
       const refresh = file => {
@@ -280,6 +291,7 @@ export function slidesPlugin(slidesPath, { inlineImages = false, inlineMedia = f
       if (id === INK_ID) return RESOLVED_INK_ID
       if (id === SVGS_ID) return RESOLVED_SVGS_ID
       if (id === BIB_ID) return RESOLVED_BIB_ID
+      if (id === RESULTS_ID) return RESOLVED_RESULTS_ID
     },
     load(id) {
       if (id === RESOLVED_ID) {
@@ -319,6 +331,16 @@ export function slidesPlugin(slidesPath, { inlineImages = false, inlineMedia = f
         }
         return `export default ${JSON.stringify(data)}\nexport const inkFileName = ${JSON.stringify(basename(inkPath))}`
       }
+      // The answers kept in the talk (<deck>.results.json): builds show them
+      // where no room server is (src/live/client.js). `mdeck run` shows the
+      // live answers, and writes the file, so it does not read it here.
+      if (id === RESOLVED_RESULTS_ID) {
+        let data = normalizeResults({})
+        if (results && !serving && existsSync(resultsPath)) {
+          try { data = normalizeResults(JSON.parse(readFileSync(resultsPath, 'utf-8'))) } catch (error) { this.warn(`${resultsPath}: ${error.message}; showing no results`) }
+        }
+        return `export default ${JSON.stringify(data)}`
+      }
       if (id === RESOLVED_SVGS_ID) {
         watchDeck(this)
         const svgs = themedSvgs(abs, sourceFor(readDeck()))
@@ -329,12 +351,12 @@ export function slidesPlugin(slidesPath, { inlineImages = false, inlineMedia = f
       // that none of it travels in the deck (bibliography.js).
       if (id === RESOLVED_BIB_ID) {
         watchDeck(this)
-        return resolveBibliography(abs, sourceFor(readDeck())).then(bibliography => {
+        const data = bibliography => bibliography && { ids: bibliography.ids, clusters: bibliography.clusters, singles: bibliography.singles, entries: bibliography.entries, order: bibliography.order }
+        return Promise.all([resolveBibliography(abs, sourceFor(readDeck()), { sample: serving }), serving ? sampleBibliography() : null]).then(([bibliography, sample]) => {
           bibFiles = bibliography ? [...bibliography.files, bibliography.style].filter(Boolean) : []
           for (const file of bibFiles) if (existsSync(file)) this.addWatchFile(file)
           if (bibliography?.diagnostics.length) this.warn(bibliography.diagnostics.map(d => d.message).join('\n'))
-          const data = bibliography && { ids: bibliography.ids, clusters: bibliography.clusters, singles: bibliography.singles, entries: bibliography.entries, order: bibliography.order }
-          return `export default ${JSON.stringify(data)}`
+          return `export default ${JSON.stringify(data(bibliography))}\nexport const sample = ${JSON.stringify(data(sample))}`
         })
       }
       if (id === RESOLVED_EXTENSIONS_ID) {
@@ -381,6 +403,8 @@ export function slidesPlugin(slidesPath, { inlineImages = false, inlineMedia = f
       }
       // mdeck's own writes (saved ink, a new slide id) must not reload the
       // windows mid-talk: the pages refresh their ink on `mdeck:ink` instead.
+      // The results file is written during the talk and read only by builds.
+      if (changed === resultsPath) return []
       const own = [inkPath, abs].includes(changed) && (() => { try { return isOwnWrite(changed, readFileSync(changed, 'utf-8')) } catch { return false } })()
       if (own) {
         invalidate(server, changed === abs ? SOURCE_IDS : [RESOLVED_INK_ID])

package/src/build/themeCheck.js

@@ -10,7 +10,7 @@ import { tmpdir } from 'node:os'
 import { resolve } from 'node:path'
 import { launchChrome } from './chrome.js'
 import { frameworkRoot } from '../paths.js'
-import { sampleDeck, SAMPLE_PICTURE } from '../editor/sampleDeck.js'
+import { sampleDeck, SAMPLE_PICTURE, SAMPLE_REFERENCES, SAMPLE_REFERENCES_FILE } from '../editor/sampleDeck.js'
 import { loadRegistry } from '../extensions/discover.js'
 
 // Runs in the page before the deck: keeps what the page reports.
@@ -91,6 +91,7 @@ export function buildSampleDeck({ extensions = {}, outDir }) {
   try {
     writeFileSync(resolve(temp, 'slides.md'), sampleDeck())
     writeFileSync(resolve(temp, 'picture.svg'), SAMPLE_PICTURE)
+    writeFileSync(resolve(temp, SAMPLE_REFERENCES_FILE), SAMPLE_REFERENCES)
     // Keyed by id, or by "kind:id" to keep a theme and a palette of one name apart.
     for (const [key, dir] of Object.entries(extensions)) cpSync(dir, resolve(temp, 'extensions', ...key.split(':').map((part, i, all) => all.length > 1 && i === 0 ? `${part}s` : part)), { recursive: true })
     mkdirSync(resolve(temp, 'home'))

package/src/cli/args.js

@@ -1,7 +1,7 @@
 // Parse the entire command before it can start a server or change any files.
 const value = 'value', flag = 'flag', optional = 'optional'
 const common = { '--port': value, '--no-open': flag }
-const output = { '--output': value, '-o': '--output', '--no-drawings': flag }
+const output = { '--output': value, '-o': '--output', '--no-drawings': flag, '--no-results': flag }
 const commands = {
   new: { max: 0 },
   run: { ...common, '--network': flag, '--server': optional, max: 1 },
@@ -21,6 +21,7 @@ const commands = {
   server: { '--port': value, '--host': optional, max: 0 },
   skill: { '--print': flag, '--install': 'list', '--project': flag, max: 0 },
   migrate: { '--dry-run': flag, max: 1 },
+  results: { '--output': value, '-o': '--output', max: 1 },
 }
 
 export function validateServerOrigin(address) {

package/src/cli/index.js

@@ -1,5 +1,5 @@
 import { createServer, build, preview } from 'vite'
-import { existsSync, copyFileSync, mkdtempSync, readFileSync, statSync } from 'fs'
+import { existsSync, copyFileSync, mkdtempSync, readFileSync, statSync, writeFileSync } from 'fs'
 import { chmod, rm, mkdir, writeFile } from 'fs/promises'
 import { resolve, dirname, basename, relative, isAbsolute } from 'path'
 import { tmpdir } from 'os'
@@ -15,6 +15,7 @@ import { homePlugin } from '../build/homePlugin.js'
 import { checkDeck, bibliographyDiagnostics } from '../build/check.js'
 import { livePlugin, startLiveServer } from '../live/server.js'
 import { inkPlugin } from '../build/inkPlugin.js'
+import { resultsPlugin } from '../build/resultsPlugin.js'
 import { createPairing, pairingPlugin } from '../build/pairing.js'
 import { isAllowedRequest } from '../build/editorPlugin.js'
 import { renderPdf, attachPdf, findChrome } from '../build/pdf.js'
@@ -27,6 +28,7 @@ import { parseSlides } from '../core/parseSlides.js'
 import { stripNotes as stripNotesFrom, stripActivities as stripActivitiesFrom } from '../core/editDeck.js'
 import { parseArgs, parseSlideNumbers, validateServerOrigin } from './args.js'
 import { assertDrawings } from '../build/drawings.js'
+import { resultsFileFor, normalizeResults, resultsCsv } from '../core/results.js'
 import { createRelayAccess } from '../build/relayAccess.js'
 import { sessionCode } from '../live/code.js'
 import { migrateDeck } from './migrate.js'
@@ -331,6 +333,7 @@ const HELP = `
       --no-pdf               do not render the PDF inside
     ${c.green}mdeck pdf${c.reset} [slides.md] [-o talk.pdf]       A PDF, one page per slide
       --no-drawings          for build, send and pdf: leave out <slides>.drawings.json
+      --no-results           for build, send and pdf: leave out <slides>.results.json (the answers kept in the talk)
     ${c.green}mdeck preview${c.reset} [folder]                    Preview a built folder (default: dist)
 
   ${c.dim}Check and look things up${c.reset}
@@ -341,6 +344,7 @@ const HELP = `
     ${c.green}mdeck snapshot${c.reset} [slides.md]                Pictures of slides as PNG files (default: .mdeck-snapshots/)
       --slide <numbers>      only these slides: 3, 3,5 or 2-4
       --dark | --light       in this appearance instead of the deck's own   -o <folder>
+    ${c.green}mdeck results${c.reset} [slides.md] [-o answers.csv]  The answers kept in the talk, as CSV (room, phone, time, answer)
     ${c.green}mdeck list${c.reset} [layouts|themes|palettes] [slides.md] [--json]
                                               List built-in and deck-local layouts, themes and palettes
     ${c.green}mdeck starter${c.reset} <layout> [slides.md]        Print starter Markdown for a layout
@@ -466,6 +470,15 @@ if (command === 'new') {
     else if (hasFlag('--dry-run')) tip('No files changed. Run without --dry-run to apply these changes.')
   } catch (error) { err(error.message); process.exitCode = 1 }
 
+} else if (command === 'results') {
+  const input = requireInput('results')
+  const file = resultsFileFor(resolve(input))
+  if (!existsSync(file)) { err(`No answers kept for ${basename(input)} yet: ${basename(file)} appears beside it once people answer during mdeck run.`); process.exit(1) }
+  let csv
+  try { csv = resultsCsv(normalizeResults(JSON.parse(readFileSync(file, 'utf8')))) } catch (error) { err(`${basename(file)}: ${error.message}`); process.exit(1) }
+  const out = outputOption()
+  if (out) { writeFileSync(out, csv); ok(`Saved ${relative(process.cwd(), resolve(out))}`) }
+  else process.stdout.write(csv)
 } else if (command === 'check') {
   const input = requireInput('check')
   const registry = registryFor(input)
@@ -562,7 +575,7 @@ if (command === 'new') {
     ...base,
     // A paired iPad may save ink and steer the rooms, like this computer.
     ...(relay ? { base: relay.base } : {}),
-    plugins: [...(relay ? [stripRelayBase(relay.base)] : []), ...base.plugins, homePlugin(abs, { services, pairing, relay, server: relay?.server ?? null }), pairingPlugin(pairing), livePlugin({ pairing, upstream, key: process.env.MDECK_SERVER_KEY, session: () => sessionCode(parseSlides(readFileSync(abs, 'utf8')).deckConfig) }), inkPlugin(abs, { authorize: request => isAllowedRequest(request) || pairing.allows(request) })],
+    plugins: [...(relay ? [stripRelayBase(relay.base)] : []), ...base.plugins, homePlugin(abs, { services, pairing, relay, server: relay?.server ?? null }), pairingPlugin(pairing), livePlugin({ pairing, upstream, key: process.env.MDECK_SERVER_KEY, session: () => sessionCode(parseSlides(readFileSync(abs, 'utf8')).deckConfig) }), inkPlugin(abs, { authorize: request => isAllowedRequest(request) || pairing.allows(request) }), resultsPlugin(abs, { authorize: request => isAllowedRequest(request) || pairing.allows(request) })],
     publicDir: dirname(abs),
     server: {
       ...base.server,
@@ -687,7 +700,7 @@ if (command === 'new') {
   try {
     await build({
       ...baseConfig(input, { selfContained, defaultView: reader ? 'reader' : 'deck' }),
-      plugins: [preact(), slidesPlugin(resolve(input), { inlineImages: selfContained, inlineMedia: selfContained, embedFonts: selfContained, stripNotes, stripActivities, ink: !hasFlag('--no-drawings'), deckLook: reader }), viteSingleFile()],
+      plugins: [preact(), slidesPlugin(resolve(input), { inlineImages: selfContained, inlineMedia: selfContained, embedFonts: selfContained, stripNotes, stripActivities, ink: !hasFlag('--no-drawings'), results: !hasFlag('--no-results'), deckLook: reader }), viteSingleFile()],
       build: {
         outDir,
         emptyOutDir: !tempDir,
@@ -759,7 +772,7 @@ if (command === 'new') {
   try {
     await build({
       ...baseConfig(input, { selfContained: true }),
-      plugins: [preact(), slidesPlugin(resolve(input), { inlineImages: true, inlineMedia: true, embedFonts: true, stripActivities: hasFlag('--no-polls'), ink: !hasFlag('--no-drawings'), deckLook: true }), viteSingleFile()],
+      plugins: [preact(), slidesPlugin(resolve(input), { inlineImages: true, inlineMedia: true, embedFonts: true, stripActivities: hasFlag('--no-polls'), ink: !hasFlag('--no-drawings'), results: !hasFlag('--no-results'), deckLook: true }), viteSingleFile()],
       build: { outDir: tempDir, emptyOutDir: true, target: 'esnext', assetsInlineLimit: 100 * 1024 * 1024 },
       logLevel: 'warn',
     })

package/src/components/Numeric.jsx

@@ -0,0 +1,59 @@
+import { h } from 'preact'
+import { useRoom, latestByDevice } from '../live/client.js'
+import { t } from '../core/labels.js'
+import { JoinCode, ActivityFooter, ActivityQuestion, ActivityControls, useControls, wantsQr } from './activity.jsx'
+import { slideHtml, phoneHtml, phoneQuestion } from './inlineText.js'
+import { parseNumber, groupNumbers, isRightNumber } from './numbers.js'
+import './poll.css'
+
+// <numeric room="limit" question="What is $\lim_{x\to 0} \frac{\sin x}{x}$?" answer="1" tolerance="0.01" />
+// Phones type a number (0.5, 0,5 or 1/2); each phone's latest one counts.
+// The slide shows the most frequent answers as bars (`limit`, 6 by default)
+// and the rest as Other. `answer` and `tolerance` (0 by default) say which
+// answers are right: the tick outlines them, says how many were right, and
+// tells each phone whether its answer was. Close, Reset and the results
+// button work as for a poll.
+
+export default function Numeric({ room = 'numeric', question = '', answer = '', tolerance = '', limit = '6', results = '', qr }) {
+  const right = parseNumber(answer)
+  const within = Math.max(0, parseNumber(tolerance) ?? 0)
+  const live = useRoom(room)
+  const controls = useControls(room, live, { results: results !== 'hidden', solution: solutionFor(answer, tolerance, phoneHtml) })
+  const texts = latestByDevice(controls.counted(live.messages)).map(message => message.data?.value).filter(value => parseNumber(value) != null)
+  const groups = groupNumbers(texts)
+  const shown = groups.slice(0, Math.max(1, Number(limit) || 6))
+  const other = groups.slice(shown.length).reduce((sum, group) => sum + group.n, 0)
+  const rows = [...shown.map(group => ({ ...group, correct: isRightNumber(group.value, right, within) })), ...(other ? [{ text: t('numeric.other'), n: other, other: true }] : [])]
+  const max = Math.max(1, ...rows.map(row => row.n))
+  const rightCount = right == null ? 0 : groups.filter(group => isRightNumber(group.value, right, within)).reduce((sum, group) => sum + group.n, 0)
+  const still = live.offline && !texts.length
+  return <div class={`poll poll--numeric${controls.revealed ? ' is-solved' : ''}${still ? ' is-static' : ''}${controls.results ? '' : ' is-results-hidden'}${controls.closed ? ' is-closed' : ''}`} ref={controls.ref}>
+    <div class="poll-main">
+      <ActivityQuestion text={question} />
+      <div class="poll-bars" role="list">
+        {rows.map(row => <div class={`poll-row${row.correct ? ' is-correct' : ''}${row.other ? ' is-other' : ''}`} role="listitem" key={row.other ? '' : row.value}>
+          <span class="poll-label">{row.text}</span>
+          <span class="poll-track"><span class="poll-fill" style={{ width: `${(row.n / max) * 100}%` }} /></span>
+          <span class="poll-count">{row.n}</span>
+        </div>)}
+      </div>
+      {!rows.length && !live.offline && <p class="question-empty">{t('question.empty')}</p>}
+      {right != null && controls.revealed && <p class="numeric-answer">{t('respond.solution', { answer: <span><span dangerouslySetInnerHTML={{ __html: slideHtml(answer) }} />{within > 0 && ` ± ${tolerance}`}</span> })} · {t('numeric.right', { n: rightCount })}</p>}
+      <ActivityFooter count={texts.length} {...live} perPhone reset={controls.reset} closed={controls.closed}>
+        <ActivityControls controls={controls} messages={live.messages} offline={live.offline} results solve={right != null} />
+      </ActivityFooter>
+    </div>
+    <JoinCode room={room} {...live} qr={wantsQr(qr)} size={240} />
+  </div>
+}
+
+// What phones get once the right answer shows: the number, how far off still
+// counts, and the answer as written, drawn.
+function solutionFor(answer, tolerance, draw) {
+  const value = parseNumber(answer)
+  if (value == null) return null
+  const within = Math.max(parseNumber(tolerance) ?? 0, 1e-9 * Math.max(1, Math.abs(value)))
+  return { value, tolerance: within, text: String(answer), html: draw(String(answer)) }
+}
+
+Numeric.phone = ({ question, placeholder }, { slideTitle = '' } = {}) => ({ type: 'numeric', ...phoneQuestion(question, slideTitle), placeholder: placeholder ?? '' })

package/src/components/Poll.jsx

@@ -1,9 +1,9 @@
 import { h } from 'preact'
-import { useEffect, useRef, useState } from 'preact/hooks'
 import { useRoom, latestByDevice } from '../live/client.js'
 import { t } from '../core/labels.js'
-import { JoinCode, ActivityFooter, wantsQr } from './activity.jsx'
-import { Icon } from './Icon.jsx'
+import { JoinCode, ActivityFooter, ActivityQuestion, ActivityControls, useControls, wantsQr, isSet } from './activity.jsx'
+import { choicesOf, slideHtml, phoneHtml, phoneQuestion } from './inlineText.js'
+import { pollChoices } from '../core/pollList.js'
 import './poll.css'
 
 // <poll room="lunch" question="Where do we eat?" options="Mensa|Thai|Pizza" />
@@ -13,78 +13,93 @@ import './poll.css'
 // as described by Poll.phone. Each device has one vote and can change it; the
 // latest one counts.
 //
+// `multiple` lets each phone pick several options; the slide and the phones
+// say so. A vote is then the list of options picked.
+//
+// `buttons="letters"` (or "numbers") puts A, B, C… (1, 2, 3…) before the
+// options on the slide, and the phones show only those: for options that are
+// pictures, long formulas, or anything else better read on the big screen.
+//
 // `answer="Thai"` (several: "Thai|Pizza") marks the right answer: a button
-// with a tick outlines its label, bar and count in green. Showing it is an
-// event on the stage (`pollreveal`, { room, shown }), which the ink bus
-// passes to the audience window and other devices.
+// with a tick outlines its label, bar and count in green, and phones say
+// whether theirs was right. A button with a lock closes the poll: later votes
+// do not count, and phones cannot vote until it opens again. A button with
+// an eye shows or hides the results (bars and counts); `results="hidden"`
+// starts with them hidden, e.g. for peer instruction. Hidden, the audience
+// window shows no bars; the presenter's own screens show them faint, so the
+// presenter can still judge the votes. All of them reach every screen of
+// the talk (useControls in activity.jsx).
+//
+// The question and the options are Markdown with $…$ maths, as on a slide:
+// options="$x^2$|$2x$|$\frac{x^3}{3}$". A bar inside a formula stays in it
+// ($|x|$); \| is a bar in the text. Votes and `answer` use the source text.
 //
-// A button with an eye shows or hides the results (bars and counts), the
-// same way (`pollresults`, { room, shown }). `results="hidden"` starts with
-// them hidden, e.g. for peer instruction. Hidden, the audience window shows no
-// bars; the presenter's own screens show them faint, so the presenter can
-// still judge the votes.
+// Options may instead be a list inside the tag, one item each, `[x]` for a
+// right one (src/core/pollList.js). They arrive here as `data-choices`.
 
-const choicesOf = options => String(options ?? '').split('|').map(option => option.trim()).filter(Boolean)
+// The options and the right ones, from the list or from `options` and `answer`.
+function choicesFrom({ options, answer, 'data-choices': listed }) {
+  const fromList = listed != null && pollChoices(listed)
+  const choices = fromList ? fromList.map(choice => choice.text) : choicesOf(options)
+  const marked = fromList ? fromList.filter(choice => choice.right).map(choice => choice.text) : []
+  const correct = marked.length ? marked : choicesOf(answer).filter(choice => choices.includes(choice))
+  return { choices, correct }
+}
 
-export default function Poll({ room = 'poll', question = '', options = '', qr, answer = '', results = '' }) {
-  const choices = choicesOf(options)
-  const correct = choicesOf(answer).filter(choice => choices.includes(choice))
-  const [shown, setShown] = useState(false)
-  const [resultsShown, setResultsShown] = useState(results !== 'hidden')
-  const ref = useRef()
-  const stage = () => ref.current?.closest('deck-stage')
-  useEffect(() => {
-    const target = stage()
-    if (!target || !correct.length) return
-    const onReveal = event => { if (event.detail?.room === room) setShown(!!event.detail.shown) }
-    target.addEventListener('pollreveal', onReveal)
-    return () => target.removeEventListener('pollreveal', onReveal)
-  }, [room, correct.length])
-  useEffect(() => {
-    const target = stage()
-    if (!target) return
-    const onResults = event => { if (event.detail?.room === room) setResultsShown(!!event.detail.shown) }
-    target.addEventListener('pollresults', onResults)
-    return () => target.removeEventListener('pollresults', onResults)
-  }, [room])
-  const toggle = () => {
-    const next = !shown
-    setShown(next)
-    stage()?.dispatchEvent(new CustomEvent('pollreveal', { detail: { room, shown: next, local: true } }))
-  }
-  const toggleResults = () => {
-    const next = !resultsShown
-    setResultsShown(next)
-    stage()?.dispatchEvent(new CustomEvent('pollresults', { detail: { room, shown: next, local: true } }))
-  }
+const LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+/** What `buttons` puts before each option: letters, numbers, or nothing. */
+export const keysFor = (buttons, count) => {
+  const kind = String(buttons ?? '').toLowerCase()
+  if (kind === 'letters') return Array.from({ length: count }, (_, i) => LETTERS[i] ?? String(i + 1))
+  if (kind === 'numbers') return Array.from({ length: count }, (_, i) => String(i + 1))
+  return null
+}
+
+// A vote: one option, or with `multiple` the options picked. A phone page
+// from before `multiple` sends one option; it counts as a list of one.
+const picksOf = (value, multiple) => multiple ? (Array.isArray(value) ? value : [value]) : (Array.isArray(value) ? [] : [value])
+
+export default function Poll({ room = 'poll', question = '', qr, results = '', multiple, buttons, ...attributes }) {
+  const { choices, correct } = choicesFrom(attributes)
+  const several = isSet(multiple)
+  const keys = keysFor(buttons, choices.length)
   const live = useRoom(room)
-  const votes = latestByDevice(live.messages).map(message => message.data?.value).filter(vote => choices.includes(vote))
-  const counts = choices.map(choice => votes.filter(vote => vote === choice).length)
+  const controls = useControls(room, live, { results: results !== 'hidden', solution: correct.length ? correct : null })
+  const votes = latestByDevice(controls.counted(live.messages))
+    .map(message => picksOf(message.data?.value, several).filter(pick => choices.includes(pick)))
+    .filter(picks => picks.length)
+  const counts = choices.map(choice => votes.filter(picks => picks.includes(choice)).length)
   const max = Math.max(1, ...counts)
   const code = wantsQr(qr)
   const still = live.offline && !votes.length
-  return <div class={`poll${shown ? ' is-solved' : ''}${still ? ' is-static' : ''}${resultsShown ? '' : ' is-results-hidden'}`} ref={ref}>
+  return <div class={`poll${controls.revealed ? ' is-solved' : ''}${still ? ' is-static' : ''}${controls.results ? '' : ' is-results-hidden'}${controls.closed ? ' is-closed' : ''}`} ref={controls.ref}>
     <div class="poll-main">
-      {question && <p class="poll-question">{question}</p>}
+      <ActivityQuestion text={question} />
+      {several && <p class="poll-several">{t('poll.several')}</p>}
       <div class="poll-bars" role="list">
         {choices.map((choice, i) => <div class={`poll-row${correct.includes(choice) ? ' is-correct' : ''}`} role="listitem" key={choice}>
-          <span class="poll-label">{choice}</span>
+          <span class="poll-label">{keys && <span class="poll-key">{keys[i]}</span>}<span dangerouslySetInnerHTML={{ __html: slideHtml(choice) }} /></span>
           <span class="poll-track"><span class="poll-fill" style={{ width: `${(counts[i] / max) * 100}%` }} /></span>
           <span class="poll-count">{counts[i]}</span>
         </div>)}
       </div>
-      <ActivityFooter count={votes.length} {...live}>
-        <button type="button" class={`poll-results${resultsShown ? '' : ' is-off'}`} title={t(resultsShown ? 'poll.hideResults' : 'poll.showResults')} aria-label={t(resultsShown ? 'poll.hideResults' : 'poll.showResults')} aria-pressed={!resultsShown} onClick={toggleResults}>
-          <Icon name={resultsShown ? 'eye' : 'eye-off'} size={24} class="poll-results-icon" />
-        </button>
-        {correct.length > 0 && <button type="button" class={`poll-solve${shown ? ' is-on' : ''}`} title={t(shown ? 'poll.hideAnswer' : 'poll.showAnswer')} aria-label={t(shown ? 'poll.hideAnswer' : 'poll.showAnswer')} aria-pressed={shown} onClick={toggle}>
-          <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>
-        </button>}
+      <ActivityFooter count={votes.length} {...live} perPhone reset={controls.reset} closed={controls.closed}>
+        <ActivityControls controls={controls} messages={live.messages} offline={live.offline} results solve={correct.length > 0} />
       </ActivityFooter>
     </div>
     <JoinCode room={room} {...live} qr={code} />
   </div>
 }
 
-// What the phones show while this poll is on screen.
-Poll.phone = ({ question, options }, { slideTitle = '' } = {}) => ({ type: 'choice', question: question || slideTitle, options: choicesOf(options) })
+// What the phones show while this poll is on screen. `optionsHtml` are the
+// options drawn, with maths as MathML; with `buttons`, phones show `keys`
+// instead. An answer page from before them shows `question` and `options`.
+Poll.phone = ({ question, multiple, buttons, ...attributes }, { slideTitle = '' } = {}) => {
+  const { choices } = choicesFrom(attributes)
+  const keys = keysFor(buttons, choices.length)
+  return {
+    type: 'choice', ...phoneQuestion(question, slideTitle), options: choices,
+    ...(keys ? { keys } : { optionsHtml: choices.map(phoneHtml) }),
+    ...(isSet(multiple) ? { multiple: true } : {}),
+  }
+}

package/src/components/Question.jsx

@@ -1,6 +1,7 @@
 import { h } from 'preact'
 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'
 
@@ -10,19 +11,22 @@ import './poll.css'
 
 export default function Question({ room = 'question', question = '', limit = '8', qr }) {
   const live = useRoom(room)
-  const answers = live.messages.map(message => ({ n: message.n, text: String(message.data?.value ?? '').trim() })).filter(answer => answer.text)
+  const controls = useControls(room, live)
+  const answers = controls.counted(live.messages).map(message => ({ n: message.n, text: String(message.data?.value ?? '').trim() })).filter(answer => answer.text)
   const shown = answers.slice(-Math.max(1, Number(limit) || 8)).reverse()
   const code = wantsQr(qr)
-  return <div class="poll poll--question">
+  return <div class={`poll poll--question${controls.closed ? ' is-closed' : ''}`} ref={controls.ref}>
     <div class="poll-main">
-      {question && <p class="poll-question">{question}</p>}
+      <ActivityQuestion text={question} />
       {shown.length
         ? <ul class="question-cards">{shown.map(answer => <li key={answer.n}>{answer.text}</li>)}</ul>
         : !live.offline && <p class="question-empty">{t('question.empty')}</p>}
-      <ActivityFooter count={answers.length} {...live} />
+      <ActivityFooter count={answers.length} {...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>
 }
 
-Question.phone = ({ question, placeholder }, { slideTitle = '' } = {}) => ({ type: 'text', question: question || slideTitle, placeholder: placeholder ?? '', maxLength: 200 })
+Question.phone = ({ question, placeholder }, { slideTitle = '' } = {}) => ({ type: 'text', ...phoneQuestion(question, slideTitle), placeholder: placeholder ?? '', maxLength: 200 })

package/src/components/Scale.jsx

@@ -1,12 +1,14 @@
 import { h } from 'preact'
 import { useRoom, latestByDevice } from '../live/client.js'
-import { JoinCode, ActivityFooter, wantsQr } from './activity.jsx'
+import { JoinCode, ActivityFooter, ActivityQuestion, ActivityControls, useControls, wantsQr } from './activity.jsx'
+import { slideHtml, phoneHtml, phoneQuestion } from './inlineText.js'
 import { t } from '../core/labels.js'
 import './poll.css'
 
 // <scale room="pace" question="How is the pace?" min="1" max="5" low="Too slow" high="Too fast" />
 // Phones pick a number; each device's latest answer counts. The slide shows
-// how many chose each number, and the average.
+// how many chose each number, and the average. The question and the labels
+// are Markdown with $…$ maths, like a poll's.
 
 const bounds = ({ min, max }) => {
   const low = Number.isFinite(Number(min)) && min !== '' && min != null ? Math.round(Number(min)) : 1
@@ -18,14 +20,15 @@ export default function Scale({ room = 'scale', question = '', low = '', high =
   const [min, max] = bounds(rest)
   const steps = Array.from({ length: max - min + 1 }, (_, i) => min + i)
   const live = useRoom(room)
-  const values = latestByDevice(live.messages).map(message => Number(message.data?.value)).filter(value => steps.includes(value))
+  const controls = useControls(room, live)
+  const values = latestByDevice(controls.counted(live.messages)).map(message => Number(message.data?.value)).filter(value => steps.includes(value))
   const counts = steps.map(step => values.filter(value => value === step).length)
   const most = Math.max(1, ...counts)
   const average = values.length ? (values.reduce((sum, value) => sum + value, 0) / values.length).toFixed(1) : null
   const code = wantsQr(qr)
-  return <div class={`poll poll--scale${live.offline && !values.length ? ' is-static' : ''}`}>
+  return <div class={`poll poll--scale${live.offline && !values.length ? ' is-static' : ''}${controls.closed ? ' is-closed' : ''}`} ref={controls.ref}>
     <div class="poll-main">
-      {question && <p class="poll-question">{question}</p>}
+      <ActivityQuestion text={question} />
       <div class="scale-columns" role="list">
         {steps.map((step, i) => <div class="scale-column" role="listitem" key={step}>
           <span class="scale-count">{counts[i]}</span>
@@ -33,8 +36,10 @@ export default function Scale({ room = 'scale', question = '', low = '', high =
           <span class="scale-step">{step}</span>
         </div>)}
       </div>
-      {(low || high) && <p class="scale-labels"><span>{low}</span><span>{high}</span></p>}
-      <ActivityFooter count={values.length} {...live} />
+      {(low || high) && <p class="scale-labels"><span dangerouslySetInnerHTML={{ __html: slideHtml(low) }} /><span dangerouslySetInnerHTML={{ __html: slideHtml(high) }} /></p>}
+      <ActivityFooter count={values.length} {...live} perPhone reset={controls.reset} closed={controls.closed}>
+        <ActivityControls controls={controls} messages={live.messages} offline={live.offline} />
+      </ActivityFooter>
       {average && <p class="scale-average">{t('scale.average', { n: average })}</p>}
     </div>
     <JoinCode room={room} {...live} qr={code} size={240} />
@@ -43,5 +48,5 @@ export default function Scale({ room = 'scale', question = '', low = '', high =
 
 Scale.phone = ({ question, low, high, ...rest }, { slideTitle = '' } = {}) => {
   const [min, max] = bounds(rest)
-  return { type: 'scale', question: question || slideTitle, min, max, minLabel: low ?? '', maxLabel: high ?? '' }
+  return { type: 'scale', ...phoneQuestion(question, slideTitle), min, max, minLabel: low ?? '', maxLabel: high ?? '', ...(low ? { minLabelHtml: phoneHtml(low) } : {}), ...(high ? { maxLabelHtml: phoneHtml(high) } : {}) }
 }