"
+ "
Projector — no live session
" + "Start the quiz from the admin dashboard.
" + "
+
+ `;
+ }
+ const currentQIdx = store.currentQIdx ?? store.session?.current_question_idx;
+ const isQuestionOpen = currentQIdx != null && store.session?.state === "question_open";
return `
- Joined ${rosterCount}
+No students have joined yet. Share the QR or URL.
+
- Quiz — Projector
+
+
+
+
+
+
+
+
+
diff --git a/static/projector.js b/static/projector.js
new file mode 100644
index 0000000..92276f3
--- /dev/null
+++ b/static/projector.js
@@ -0,0 +1,676 @@
+/* ============================================================
+ * Projector view — front-of-room display.
+ *
+ * Read-only public WS client. The server is authoritative; we only
+ * receive `projector_state` snapshots and render them. There are no
+ * outbound mutations, no auth, no cookies.
+ *
+ * The projector is intentionally one-shot per state change: a render
+ * blows away `#projector-app` and re-builds it, except for two hot
+ * paths that need partial updates:
+ * 1) the countdown ring ticks at 4Hz (computed from deadline),
+ * 2) the lobby participant counter bumps on increment without
+ * rebuilding the whole lobby.
+ *
+ * Layout intent: one screen, no scroll, big-screen typography.
+ * ============================================================ */
+
+const app = document.querySelector("#projector-app");
+const params = new URLSearchParams(window.location.search);
+const sid = params.get("sid");
+
+const store = {
+ ws: null,
+ snapshot: null,
+ prevSnapshot: null,
+ countdownTimer: null,
+ connected: false,
+};
+
+// --------------------------------------------------------------
+// Helpers
+// --------------------------------------------------------------
+
+function escapeText(value) {
+ return String(value ?? "").replace(/[&<>"']/g, (c) => ({
+ "&": "&",
+ "<": "<",
+ ">": ">",
+ '"': """,
+ "'": "'",
+ })[c]);
+}
+const escapeAttr = escapeText;
+
+function fmtScore(value) {
+ return Number(value || 0).toFixed(2);
+}
+
+function clamp(n, lo, hi) {
+ return Math.max(lo, Math.min(hi, n));
+}
+
+// --------------------------------------------------------------
+// Boot + WS
+// --------------------------------------------------------------
+
+async function boot() {
+ if (!sid) {
+ app.innerHTML = `
+
+
+
+
+
+
+
+ `;
+ return;
+ }
+ try {
+ const r = await fetch(`/api/session/${sid}/projector`);
+ if (!r.ok) throw new Error("not found");
+ store.snapshot = await r.json();
+ render();
+ } catch {
+ app.innerHTML = `
+
+
+
+
+
+
+
+ `;
+ return;
+ }
+ connect();
+}
+
+function connect() {
+ const protocol = window.location.protocol === "https:" ? "wss" : "ws";
+ const ws = new WebSocket(`${protocol}://${window.location.host}/ws/projector/${sid}`);
+ store.ws = ws;
+ ws.addEventListener("open", () => {
+ store.connected = true;
+ refreshConnDot();
+ });
+ ws.addEventListener("message", (event) => {
+ try {
+ const msg = JSON.parse(event.data);
+ if (msg.type === "projector_state") {
+ store.prevSnapshot = store.snapshot;
+ store.snapshot = msg;
+ render();
+ }
+ } catch {}
+ });
+ ws.addEventListener("close", () => {
+ store.connected = false;
+ refreshConnDot();
+ setTimeout(connect, 2000);
+ });
+ // Periodic ping to keep proxies from idling the socket out.
+ setInterval(() => {
+ if (ws.readyState === WebSocket.OPEN) {
+ try { ws.send(JSON.stringify({ type: "ping" })); } catch {}
+ }
+ }, 25_000);
+}
+
+function refreshConnDot() {
+ const dot = document.querySelector(".projector-foot .dot");
+ if (!dot) return;
+ dot.classList.toggle("dim", !store.connected);
+ const left = dot.parentElement;
+ if (left) {
+ const text = store.connected ? "live" : "reconnecting";
+ // last text node holds status word
+ const nodes = Array.from(left.childNodes);
+ const t = nodes.reverse().find((n) => n.nodeType === 3);
+ if (t) t.nodeValue = " " + text;
+ }
+}
+
+// --------------------------------------------------------------
+// Top-level render
+// --------------------------------------------------------------
+
+function render() {
+ const s = store.snapshot;
+ if (!s) return;
+ stopCountdown();
+
+ const view =
+ s.state === "lobby" ? renderLobby(s)
+ : s.state === "question_open" ? renderQuestion(s, false)
+ : s.state === "question_closed" ? renderQuestion(s, true)
+ : s.state === "between_questions" ? renderBetween(s)
+ : s.state === "finished" ? renderFinished(s)
+ : ``;
+
+ app.innerHTML = `
+
+
+ ${renderTopbar(s)}
+ ${view}
+ ${renderFoot(s)}
+
+ `;
+
+ // Lobby counter bump animation (post-mount): if the count went up
+ // since the previous snapshot, briefly mark .bump on the counter.
+ if (s.state === "lobby") {
+ const prev = store.prevSnapshot?.participant_count ?? -1;
+ if (prev >= 0 && s.participant_count > prev) {
+ const el = document.querySelector(".participant-count");
+ if (el) {
+ el.classList.remove("bump");
+ // force reflow then re-add to restart animation
+ // eslint-disable-next-line no-unused-expressions
+ void el.offsetWidth;
+ el.classList.add("bump");
+ }
+ }
+ }
+
+ // Start the countdown ticker for the question_open state
+ if (s.state === "question_open" && s.question) {
+ startCountdown(
+ Date.now() + (s.question.remaining_ms ?? 0),
+ s.question.time_limit ?? s.pool_meta?.time_limit_default ?? 60
+ );
+ } else if (s.state === "question_closed" && s.question) {
+ // freeze the ring at "spent"
+ const ring = document.querySelector(".countdown-ring");
+ if (ring) {
+ ring.style.setProperty("--pct", "0");
+ ring.classList.remove("urgent");
+ ring.classList.add("spent");
+ const num = ring.querySelector(".num");
+ if (num) num.textContent = "0s";
+ }
+ }
+
+ refreshConnDot();
+}
+
+// --------------------------------------------------------------
+// Topbar (masthead)
+// --------------------------------------------------------------
+
+function renderTopbar(s) {
+ const idx = s.question?.idx ?? null;
+ const total = s.pool_meta?.question_count ?? s.question?.total_questions ?? 0;
+ const showQ = idx != null;
+ const stateLabel = ({
+ lobby: "Lobby",
+ question_open: "Live",
+ question_closed: "Reveal",
+ between_questions: "Between",
+ finished: "Finished",
+ })[s.state] || s.state;
+
+ return `
+
+
+
+
+
+ `;
+}
+
+function formatClock(ts) {
+ if (!ts) return "";
+ const d = new Date(ts);
+ const hh = String(d.getHours()).padStart(2, "0");
+ const mm = String(d.getMinutes()).padStart(2, "0");
+ return `${hh}:${mm}`;
+}
+
+// --------------------------------------------------------------
+// Footer
+// --------------------------------------------------------------
+
+function renderFoot(s) {
+ const dotClass = store.connected ? "dot" : "dot dim";
+ const status = store.connected ? "live" : "reconnecting";
+ const right = (() => {
+ if (s.state === "lobby") return `awaiting start`;
+ if (s.state === "finished") return `quiz complete`;
+ if (s.state === "between_questions") return `interlude`;
+ if (s.state === "question_closed") return `answers revealed`;
+ if (s.state === "question_open" && s.live_histogram) {
+ const c = s.live_histogram;
+ return `${c.submitted_count}/${c.total_count} submitted`;
+ }
+ return "";
+ })();
+ return `
+
+ `;
+}
+
+// --------------------------------------------------------------
+// State: LOBBY
+// --------------------------------------------------------------
+
+function renderLobby(s) {
+ const n = s.participant_count || 0;
+ const dotMax = 96;
+ const dots = Math.min(n, dotMax);
+ const time = s.pool_meta?.time_limit_default ?? 60;
+ const qcount = s.pool_meta?.question_count ?? 0;
+ const scoreFn = (s.pool_meta?.score_fn || "linear").replace(/_/g, " ");
+
+ return `
+ `;
+
+ const hist = s.live_histogram?.counts || { A: 0, B: 0, C: 0, D: 0 };
+ const submitted = s.live_histogram?.submitted_count || 0;
+ const total = Math.max(1, s.live_histogram?.total_count || 1);
+ const reveal = s.reveal;
+ const correct = reveal?.correct;
+
+ // Pre-vote state: nobody has submitted yet AND we're not revealed.
+ // Hide the bars to keep the layout calm during reading time.
+ const hasVotes = ["A", "B", "C", "D"].some((k) => (hist[k] || 0) > 0);
+ const preVote = !revealed && !hasVotes;
+
+ const limit = q.time_limit || s.pool_meta?.time_limit_default || 60;
+ const remainingMs = q.remaining_ms ?? 0;
+ const initialPct = revealed ? 0 : clamp(100 * (remainingMs / 1000) / limit, 0, 100);
+ const initialSec = Math.ceil(remainingMs / 1000);
+ const ringClass =
+ revealed ? "countdown-ring spent"
+ : (initialSec <= 10 && initialSec > 0) ? "countdown-ring urgent"
+ : "countdown-ring";
+
+ const submittedPct = clamp(100 * submitted / Math.max(1, s.live_histogram?.total_count || 1), 0, 100);
+
+ return `
+ ${v}
+ `;
+ }).join("");
+
+ // X-axis tick labels at each bucket centre
+ const xLabels = buckets.map((b, i) => {
+ const cx = (xEdge(i) + xEdge(i + 1)) / 2;
+ return `${escapeText(b.label)} `;
+ }).join("");
+
+ // Per-bucket count labels above each top, only if non-zero
+ const dataLabels = buckets.map((b, i) => {
+ if (b.count === 0) return "";
+ const cx = (xEdge(i) + xEdge(i + 1)) / 2;
+ const cy = yFor(b.count) - 8;
+ return `${b.count}
+ median
+ `;
+ }
+
+ // Summary stats
+ const mean = total ? buckets.reduce((acc, b, i) => {
+ // approximate bucket midpoint as i+0.5 normalized to max_total
+ const mid = ((i + 0.5) / n) * (dist.max_total || n);
+ return acc + b.count * mid;
+ }, 0) / total : 0;
+
+ return `
+
Joined ${r.length}
- ${ordered.length - ? `- ${ordered.map((p, i) =>
- `
- ${escapeText(p.name)}${escapeText(p.student_id)} ` - ).join("")}
No students have joined yet. Share the QR or URL.
`} +
+
+ `;
+}
+
+function renderDuplicateJoinAlerts() {
+ const orphans = store.orphanDuplicates || [];
+ if (!orphans.length) return "";
+ // An orphan attempt is a duplicate-join on a student_id that no real
+ // participant currently holds — surface separately because it suggests
+ // someone is probing student_ids that aren't even claimed yet.
+ return `
+ Presence ${connected}/${presence.length}
+-
+ ${ordered.map((row, i) => {
+ const lastSeen = row.last_seen_ms || 0;
+ const stale = !row.connected && lastSeen && (now - lastSeen) > idleStaleMs;
+ const dotState = row.connected ? "is-online" : (stale ? "is-stale" : "is-offline");
+ const blur = row.blur_count || 0;
+ const hidden = row.hidden_count || 0;
+ const dupCount = row.duplicate_join_attempts?.count || 0;
+ const answered = row.answered_current;
+ const fresh = i < 3 && row.connected ? "is-fresh" : "";
+ return `
+
- + + + ${escapeText(row.name)} + ${escapeText(row.student_id)} + + + ${isQuestionOpen + ? `${answered ? "✓" : "·"}` + : ""} + ${blur > 0 ? `${blur}↗` : ""} + ${hidden > 0 ? `${hidden}◌` : ""} + ${dupCount > 0 ? `!${dupCount}` : ""} + + + + `; + }).join("")} +
+ connected + idle + dropped +
+
+
`;
}
@@ -399,6 +471,24 @@ function bindStateActions() {
if (copy) copy.addEventListener("click", copyJoinUrl);
}
+function bindPresenceActions() {
+ document.querySelectorAll("[data-clear-student]").forEach((btn) => {
+ btn.addEventListener("click", async () => {
+ const studentId = btn.dataset.clearStudent;
+ if (!studentId) return;
+ if (!confirm(`Clear ${studentId}? Their submissions and presence row will be removed; they can then re-join with the same ID.`)) return;
+ btn.disabled = true;
+ try {
+ await api(`/admin/api/students/${encodeURIComponent(studentId)}`, { method: "DELETE" });
+ } catch (err) {
+ alert(err.message || "Could not clear student.");
+ btn.disabled = false;
+ }
+ // Server pushes presence_update so the row will disappear naturally.
+ });
+ });
+}
+
async function onAction(action, btn) {
if (action === "reset") {
if (!confirm("Reset clears all participants and submissions. Continue?")) return;
@@ -502,6 +592,12 @@ function handleWSMessage(message) {
store.roster = message.participants || [];
renderDashboard();
break;
+ case "presence_update":
+ store.presence = message.rows || [];
+ store.orphanDuplicates = message.orphan_duplicate_joins || [];
+ store.currentQIdx = message.current_question_idx ?? null;
+ renderDashboard();
+ break;
case "question_open":
store.session.state = "question_open";
store.session.current_question_idx = message.question_idx;
diff --git a/static/projector.css b/static/projector.css
new file mode 100644
index 0000000..d974baa
--- /dev/null
+++ b/static/projector.css
@@ -0,0 +1,1204 @@
+/* ============================================================
+ * Projector view — front-of-room, single-screen, no-scroll.
+ *
+ * Aesthetic: an editorial broadside / front page hung at the
+ * front of a lecture hall. Shared style.css supplies the type
+ * system and color tokens; this file lays out the page like a
+ * printed gazette: ruled sections, folio numerals, marginalia,
+ * registration crosses, no chrome of any kind.
+ *
+ * Hard rules enforced here:
+ * - 100vh × 100vw, no scroll, at 1366×768 / 1920×1080 / 3440×1440
+ * - Question prose >= 3vw, options >= 1.5vw, leaderboard >= 1.4vw
+ * - All color via tokens (light & dark via prefers-color-scheme)
+ * - Honors prefers-reduced-motion (handled in style.css globally)
+ * ============================================================ */
+
+
+/* ---------- Page shell ---------- */
+
+.projector-body {
+ margin: 0;
+ padding: 0;
+ height: 100vh;
+ height: 100dvh;
+ width: 100vw;
+ overflow: hidden;
+ background:
+ /* faint diagonal weave that reads as paper grain on a projector */
+ repeating-linear-gradient(
+ 135deg,
+ transparent 0 6px,
+ var(--bg-grain, rgba(31,29,24,0.018)) 6px 7px
+ ),
+ radial-gradient(1400px 800px at 100% -10%, color-mix(in srgb, var(--primary) 6%, transparent) 0%, transparent 60%),
+ radial-gradient(1100px 600px at -10% 110%, color-mix(in srgb, var(--primary) 4%, transparent) 0%, transparent 55%),
+ var(--bg);
+}
+
+#projector-app {
+ height: 100vh;
+ height: 100dvh;
+ width: 100vw;
+}
+
+.projector-shell {
+ position: relative;
+ display: grid;
+ grid-template-rows: auto 1fr auto;
+ height: 100vh;
+ height: 100dvh;
+ padding: clamp(14px, 1.8vh, 24px) clamp(22px, 2.2vw, 38px) clamp(10px, 1.4vh, 18px);
+ gap: clamp(10px, 1.4vh, 18px);
+ box-sizing: border-box;
+ isolation: isolate;
+}
+
+/* Registration crosses in the four corners — the kind printers use for
+ * plate alignment. Pure decoration, hidden from a/y. */
+.projector-shell::before,
+.projector-shell::after {
+ content: "";
+ position: absolute;
+ width: 14px;
+ height: 14px;
+ pointer-events: none;
+ background:
+ linear-gradient(var(--rule), var(--rule)) center / 1px 100% no-repeat,
+ linear-gradient(var(--rule), var(--rule)) center / 100% 1px no-repeat;
+ opacity: 0.55;
+}
+.projector-shell::before { top: 6px; left: 6px; }
+.projector-shell::after { bottom: 6px; right: 6px; }
+
+/* The two opposite corners get separate elements so we don't need extra DOM */
+.projector-shell > .reg-tr,
+.projector-shell > .reg-bl {
+ position: absolute;
+ width: 14px;
+ height: 14px;
+ pointer-events: none;
+ background:
+ linear-gradient(var(--rule), var(--rule)) center / 1px 100% no-repeat,
+ linear-gradient(var(--rule), var(--rule)) center / 100% 1px no-repeat;
+ opacity: 0.55;
+}
+.projector-shell > .reg-tr { top: 6px; right: 6px; }
+.projector-shell > .reg-bl { bottom: 6px; left: 6px; }
+
+
+/* ---------- Topbar (masthead) ---------- */
+
+.projector-topbar {
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ align-items: end;
+ gap: clamp(16px, 2.4vw, 36px);
+ padding-bottom: clamp(8px, 1.2vh, 14px);
+ border-bottom: 1.5px solid var(--rule);
+ position: relative;
+}
+/* under-rule (double rule like a masthead) */
+.projector-topbar::after {
+ content: "";
+ position: absolute;
+ left: 0; right: 0; bottom: -4px;
+ border-bottom: 1px solid var(--rule);
+ opacity: 0.45;
+}
+
+.topbar-left { display: grid; gap: 4px; justify-items: start; }
+.topbar-mid { display: grid; gap: 4px; justify-items: center; text-align: center; }
+.topbar-right { display: grid; gap: 4px; justify-items: end; text-align: right; }
+
+.brand {
+ font-family: var(--font-sans);
+ font-size: clamp(0.62rem, 0.82vw, 0.78rem);
+ font-weight: 700;
+ letter-spacing: 0.34em;
+ text-transform: uppercase;
+ color: var(--muted-2);
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+}
+.brand::before,
+.brand::after {
+ content: "";
+ display: inline-block;
+ width: clamp(18px, 2vw, 28px);
+ height: 1px;
+ background: currentColor;
+ opacity: 0.55;
+}
+
+.topbar-title {
+ font-family: var(--font-display);
+ font-size: clamp(1.4rem, 2.2vw, 2.1rem);
+ font-weight: 600;
+ letter-spacing: -0.014em;
+ margin: 0;
+ color: var(--text);
+ line-height: 1.05;
+ font-feature-settings: "ss01";
+}
+
+.folio {
+ font-family: var(--font-mono);
+ font-size: clamp(0.68rem, 0.95vw, 0.92rem);
+ font-weight: 500;
+ font-variant-numeric: tabular-nums;
+ letter-spacing: 0.08em;
+ color: var(--muted);
+ text-transform: uppercase;
+}
+.folio b {
+ font-weight: 600;
+ color: var(--text);
+ letter-spacing: -0.01em;
+}
+
+/* Override the global state-badge sizing for projector scale */
+.projector-shell .state-badge {
+ font-size: clamp(0.7rem, 0.9vw, 0.86rem);
+ padding: 8px 14px;
+ letter-spacing: 0.22em;
+}
+
+
+/* ---------- Main grid (one row, varies per state) ---------- */
+
+.projector-grid {
+ display: grid;
+ gap: clamp(12px, 1.6vw, 24px);
+ height: 100%;
+ min-height: 0;
+}
+
+.projector-grid.lobby { grid-template-columns: minmax(380px, 0.9fr) 1.1fr; }
+.projector-grid.question { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
+.projector-grid.between,
+.projector-grid.finished { grid-template-columns: 1.05fr 1fr; }
+
+
+/* ---------- Card primitive ---------- */
+
+.projector-card {
+ background: var(--surface);
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ box-shadow: var(--shadow);
+ padding: clamp(16px, 2vw, 28px);
+ display: grid;
+ align-content: start;
+ gap: clamp(8px, 1.2vh, 14px);
+ min-height: 0;
+ overflow: hidden;
+ position: relative;
+}
+
+/* Eyebrows / section labels — small caps with rule */
+.card-eyebrow,
+.lobby-eyebrow {
+ font-family: var(--font-sans);
+ font-size: clamp(0.66rem, 0.86vw, 0.8rem);
+ font-weight: 700;
+ letter-spacing: 0.26em;
+ text-transform: uppercase;
+ color: var(--muted);
+ margin: 0;
+ display: flex;
+ align-items: center;
+ gap: 12px;
+}
+.card-eyebrow::after {
+ content: "";
+ flex: 1;
+ height: 1px;
+ background: var(--border);
+}
+
+
+/* ============================================================
+ * STATE: lobby
+ * ============================================================ */
+
+.join-card {
+ align-content: start;
+ justify-items: stretch;
+ gap: clamp(12px, 1.6vh, 18px);
+ grid-template-rows: auto 1fr auto;
+}
+
+.lobby-headline {
+ font-family: var(--font-display);
+ font-size: clamp(1.6rem, 2.4vw, 2.4rem);
+ font-weight: 600;
+ font-style: italic;
+ letter-spacing: -0.012em;
+ line-height: 1.1;
+ color: var(--text);
+ margin: 0;
+}
+.lobby-sub {
+ font-family: var(--font-sans);
+ font-size: clamp(0.85rem, 1.05vw, 1rem);
+ color: var(--muted);
+ margin: 0;
+ letter-spacing: 0.01em;
+}
+
+.qr-frame {
+ position: relative;
+ display: grid;
+ place-items: center;
+ width: 100%;
+ min-height: 0;
+ align-self: center;
+}
+.qr-big {
+ background: #ffffff;
+ padding: clamp(12px, 1.4vw, 18px);
+ border: 1px solid var(--border-strong);
+ border-radius: 2px;
+ width: clamp(280px, 28vw, 460px);
+ aspect-ratio: 1 / 1;
+ display: grid;
+ place-items: center;
+ box-shadow:
+ 0 1px 0 rgba(20, 22, 28, 0.06),
+ 0 24px 56px -28px rgba(20, 22, 28, 0.32);
+ position: relative;
+}
+.qr-big img {
+ width: 100%;
+ height: 100%;
+ display: block;
+ image-rendering: pixelated;
+ image-rendering: crisp-edges;
+}
+/* corner braces */
+.qr-frame::before,
+.qr-frame::after {
+ content: "";
+ position: absolute;
+ width: 22px;
+ height: 22px;
+ border: 1.5px solid var(--text);
+ pointer-events: none;
+}
+.qr-frame::before { top: -10px; left: 50%; transform: translateX(calc(-50% - clamp(140px, 14vw, 230px))); border-right: 0; border-bottom: 0; }
+.qr-frame::after { bottom: -10px; left: 50%; transform: translateX(calc(-50% + clamp(140px, 14vw, 230px))); border-left: 0; border-top: 0; }
+
+.lobby-url {
+ font-family: var(--font-mono);
+ font-size: clamp(0.95rem, 1.25vw, 1.25rem);
+ font-weight: 500;
+ letter-spacing: 0.02em;
+ color: var(--text);
+ background: var(--surface-2);
+ padding: 10px 16px;
+ border: 1px solid var(--border);
+ border-radius: 2px;
+ word-break: break-all;
+ text-align: center;
+ font-variant-numeric: tabular-nums;
+}
+
+/* lobby-status (right column) */
+.lobby-status {
+ align-content: stretch;
+ grid-template-rows: auto auto 1fr auto;
+ gap: clamp(10px, 1.4vh, 16px);
+}
+
+.participant-count {
+ display: grid;
+ grid-template-columns: auto 1fr;
+ align-items: end;
+ gap: clamp(12px, 1.6vw, 22px);
+ padding: clamp(8px, 1.2vh, 14px) 0;
+ border-top: 1px solid var(--border);
+ border-bottom: 1px solid var(--border);
+}
+.participant-count b {
+ font-family: var(--font-mono);
+ font-size: clamp(4rem, 8.6vw, 8.4rem);
+ font-weight: 500;
+ font-variant-numeric: tabular-nums;
+ letter-spacing: -0.05em;
+ line-height: 0.92;
+ color: var(--text);
+ display: block;
+ transform-origin: left bottom;
+}
+.participant-count.bump b {
+ animation: count-bump 520ms cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+@keyframes count-bump {
+ 0% { transform: scale(1); color: var(--text); }
+ 35% { transform: scale(1.08); color: var(--primary); }
+ 100% { transform: scale(1); color: var(--text); }
+}
+.participant-count .label {
+ display: grid;
+ gap: 2px;
+ padding-bottom: clamp(8px, 1.2vh, 14px);
+}
+.participant-count .label .word {
+ font-family: var(--font-display);
+ font-style: italic;
+ font-size: clamp(1.1rem, 1.6vw, 1.7rem);
+ color: var(--text-soft);
+ line-height: 1.05;
+}
+.participant-count .label .meta {
+ font-family: var(--font-sans);
+ font-size: clamp(0.7rem, 0.9vw, 0.85rem);
+ color: var(--muted);
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ font-weight: 600;
+}
+
+.constellation {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(clamp(11px, 1.1vw, 16px), 1fr));
+ gap: clamp(5px, 0.6vw, 9px);
+ align-content: start;
+ min-height: 0;
+ overflow: hidden;
+ align-self: stretch;
+ padding: 4px 0;
+}
+.constellation li {
+ width: 100%;
+ aspect-ratio: 1 / 1;
+ border-radius: 999px;
+ background: var(--primary);
+ opacity: 0.78;
+ animation: dot-in 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both;
+ animation-delay: var(--d, 0ms);
+}
+@keyframes dot-in {
+ from { opacity: 0; transform: scale(0.4); }
+ to { opacity: 0.78; transform: scale(1); }
+}
+
+.lobby-rule {
+ display: grid;
+ grid-template-columns: 1fr auto 1fr;
+ align-items: center;
+ gap: 12px;
+ font-family: var(--font-sans);
+ font-size: clamp(0.7rem, 0.92vw, 0.86rem);
+ letter-spacing: 0.22em;
+ text-transform: uppercase;
+ font-weight: 600;
+ color: var(--muted);
+}
+.lobby-rule::before,
+.lobby-rule::after {
+ content: "";
+ display: block;
+ height: 1px;
+ background: var(--border);
+}
+
+.lobby-meta-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: clamp(8px, 1vw, 14px);
+}
+.lobby-meta-grid .cell {
+ display: grid;
+ gap: 2px;
+ padding: clamp(8px, 1vh, 12px) clamp(10px, 1vw, 14px);
+ background: var(--surface-2);
+ border: 1px solid var(--border);
+ border-radius: 2px;
+}
+.lobby-meta-grid .cell .v {
+ font-family: var(--font-mono);
+ font-size: clamp(1.2rem, 1.7vw, 1.7rem);
+ font-weight: 500;
+ font-variant-numeric: tabular-nums;
+ letter-spacing: -0.02em;
+ color: var(--text);
+ line-height: 1.0;
+}
+.lobby-meta-grid .cell .k {
+ font-family: var(--font-sans);
+ font-size: clamp(0.62rem, 0.82vw, 0.74rem);
+ font-weight: 600;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+
+
+/* ============================================================
+ * STATE: question (open + closed/reveal)
+ * ============================================================ */
+
+.question-card {
+ gap: clamp(10px, 1.4vh, 18px);
+ grid-template-rows: auto 1fr auto;
+}
+
+.question-head {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: start;
+ gap: clamp(14px, 2vw, 28px);
+}
+
+.big-question {
+ font-family: var(--font-display);
+ /* Per spec: question prose >= ~3vw — go just above to be safe at 1366×768 */
+ font-size: clamp(1.7rem, 3vw, 3rem);
+ font-weight: 500;
+ line-height: 1.18;
+ letter-spacing: -0.014em;
+ margin: 0;
+ color: var(--text);
+ font-feature-settings: "ss01";
+ hyphens: auto;
+}
+
+/* Countdown ring — far more legible across a hall than a number alone.
+ * Uses CSS conic-gradient for the arc; text sits in the middle. */
+.countdown-ring {
+ --size: clamp(90px, 8vw, 140px);
+ --stroke: clamp(6px, 0.7vw, 10px);
+ --pct: 100; /* 0..100 */
+ --hue: var(--primary);
+ width: var(--size);
+ height: var(--size);
+ position: relative;
+ flex-shrink: 0;
+ display: grid;
+ place-items: center;
+ background:
+ conic-gradient(var(--hue) calc(var(--pct) * 1%), var(--border) 0);
+ border-radius: 999px;
+}
+.countdown-ring::before {
+ content: "";
+ position: absolute;
+ inset: var(--stroke);
+ background: var(--surface);
+ border-radius: 999px;
+}
+.countdown-ring .num {
+ position: relative;
+ font-family: var(--font-mono);
+ font-size: clamp(1.7rem, 2.6vw, 2.6rem);
+ font-weight: 500;
+ font-variant-numeric: tabular-nums;
+ letter-spacing: -0.04em;
+ color: var(--text);
+ line-height: 1;
+}
+.countdown-ring.urgent {
+ --hue: var(--danger);
+ animation: ring-urgent 0.9s ease-in-out infinite;
+}
+.countdown-ring.urgent .num {
+ color: var(--danger);
+}
+@keyframes ring-urgent {
+ 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 28%, transparent); }
+ 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--danger) 0%, transparent); }
+}
+.countdown-ring.spent { --hue: var(--muted); }
+
+/* Options */
+.big-options {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ gap: clamp(7px, 0.95vh, 12px);
+ align-content: start;
+}
+.big-options li {
+ display: grid;
+ grid-template-columns: clamp(46px, 4.4vw, 72px) 1fr clamp(110px, 14vw, 200px) clamp(74px, 9vw, 110px);
+ gap: clamp(10px, 1.2vw, 18px);
+ align-items: center;
+ padding: clamp(10px, 1.4vh, 16px) clamp(14px, 1.6vw, 22px);
+ background: var(--surface);
+ border: 1px solid var(--border);
+ border-radius: 2px;
+ position: relative;
+ transition:
+ border-color 280ms ease,
+ background 280ms ease,
+ opacity 280ms ease,
+ color 280ms ease;
+}
+.big-options li::before {
+ /* tiny "this is a row" tick on the left, like an editorial bullet */
+ content: "";
+ position: absolute;
+ left: -1px;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 3px;
+ height: 38%;
+ background: var(--border);
+ transition: background 280ms ease, height 280ms ease;
+}
+.big-options.revealed li.correct {
+ background: var(--correct-bg);
+ border-color: var(--correct-border);
+ border-width: 1.5px;
+}
+.big-options.revealed li.correct::before {
+ background: var(--correct-border);
+ height: 70%;
+}
+.big-options.revealed li.incorrect {
+ opacity: 0.45;
+}
+.big-options.revealed li.incorrect .opt-text {
+ text-decoration: line-through;
+ text-decoration-color: var(--muted-2);
+ text-decoration-thickness: 1px;
+}
+
+.opt-key {
+ font-family: var(--font-display);
+ font-weight: 600;
+ font-size: clamp(1.6rem, 2.4vw, 2.3rem);
+ color: var(--muted);
+ border-right: 1px solid var(--border);
+ padding-right: clamp(10px, 1.1vw, 16px);
+ letter-spacing: -0.01em;
+ text-align: center;
+ line-height: 1;
+ font-feature-settings: "ss01";
+}
+.big-options li.correct .opt-key { color: var(--correct-border); border-right-color: var(--correct-border); }
+
+.opt-text {
+ font-family: var(--font-display);
+ /* Per spec: option text >= ~1.5vw */
+ font-size: clamp(1.05rem, 1.6vw, 1.6rem);
+ line-height: 1.28;
+ color: var(--text);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+}
+
+.opt-bar {
+ display: block;
+ height: clamp(10px, 1.5vh, 16px);
+ background: var(--surface-2);
+ border: 1px solid var(--border);
+ border-radius: 0;
+ overflow: hidden;
+ position: relative;
+}
+/* tick marks at 25/50/75% — subtle, like graph paper */
+.opt-bar::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background:
+ linear-gradient(to right, transparent 0 calc(25% - 0.5px), var(--border) calc(25% - 0.5px) calc(25% + 0.5px), transparent calc(25% + 0.5px)),
+ linear-gradient(to right, transparent 0 calc(50% - 0.5px), var(--border) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
+ linear-gradient(to right, transparent 0 calc(75% - 0.5px), var(--border) calc(75% - 0.5px) calc(75% + 0.5px), transparent calc(75% + 0.5px));
+ opacity: 0.6;
+ pointer-events: none;
+}
+.opt-bar-fill {
+ display: block;
+ height: 100%;
+ background: var(--primary);
+ width: 0%;
+ transition: width 600ms cubic-bezier(0.22, 0.61, 0.36, 1), background 280ms ease;
+ position: relative;
+ z-index: 1;
+}
+.big-options li.correct .opt-bar-fill { background: var(--correct-border); }
+.big-options.revealed li.incorrect .opt-bar-fill { background: var(--muted-2); }
+
+.opt-count {
+ font-family: var(--font-mono);
+ font-size: clamp(1.15rem, 1.55vw, 1.55rem);
+ font-weight: 500;
+ font-variant-numeric: tabular-nums;
+ letter-spacing: -0.02em;
+ text-align: right;
+ color: var(--text);
+ display: grid;
+ gap: 0;
+ line-height: 1.05;
+}
+.opt-count small {
+ display: block;
+ font-size: 0.55em;
+ color: var(--muted);
+ font-weight: 500;
+ font-family: var(--font-sans);
+ letter-spacing: 0.05em;
+}
+
+/* Pre-question state: when histogram is empty, hide bars to keep layout clean */
+.big-options.pre-vote .opt-bar,
+.big-options.pre-vote .opt-count {
+ visibility: hidden;
+}
+
+.big-explanation {
+ font-family: var(--font-display);
+ font-style: italic;
+ font-size: clamp(1rem, 1.35vw, 1.3rem);
+ line-height: 1.5;
+ color: var(--text-soft);
+ border-left: 3px solid var(--correct-border);
+ padding: 6px 0 6px clamp(10px, 1.2vw, 18px);
+ margin: 0;
+ animation: fade-up 600ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
+}
+@keyframes fade-up {
+ from { opacity: 0; transform: translateY(6px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+/* Submission progress strip at the bottom of the question card */
+.submission-strip {
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ align-items: center;
+ gap: clamp(10px, 1.2vw, 16px);
+ padding-top: clamp(8px, 1vh, 12px);
+ border-top: 1px solid var(--border);
+}
+.submission-strip .label {
+ font-family: var(--font-sans);
+ font-size: clamp(0.7rem, 0.9vw, 0.84rem);
+ font-weight: 600;
+ letter-spacing: 0.2em;
+ text-transform: uppercase;
+ color: var(--muted);
+}
+.submission-strip .track {
+ height: clamp(6px, 0.8vh, 9px);
+ background: var(--surface-2);
+ border: 1px solid var(--border);
+ position: relative;
+ overflow: hidden;
+}
+.submission-strip .track .fill {
+ position: absolute;
+ inset: 0 auto 0 0;
+ width: var(--p, 0%);
+ background: var(--primary);
+ transition: width 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+.submission-strip .nums {
+ font-family: var(--font-mono);
+ font-size: clamp(0.95rem, 1.2vw, 1.2rem);
+ font-weight: 500;
+ font-variant-numeric: tabular-nums;
+ color: var(--text);
+ letter-spacing: -0.01em;
+}
+.submission-strip .nums small {
+ font-size: 0.66em;
+ color: var(--muted);
+ font-family: var(--font-sans);
+ letter-spacing: 0.06em;
+ margin-left: 4px;
+}
+
+
+/* ---------- Side card (response time + top-5) ---------- */
+
+.side-card {
+ gap: clamp(8px, 1.2vh, 14px);
+ align-content: start;
+ grid-template-rows: auto auto auto 1fr;
+}
+.side-meta {
+ margin: 0;
+ text-align: right;
+ font-family: var(--font-mono);
+ font-size: clamp(0.78rem, 0.95vw, 0.95rem);
+ color: var(--muted);
+ font-variant-numeric: tabular-nums;
+}
+
+
+/* ============================================================
+ * Bar charts (response time, score histogram)
+ * ============================================================ */
+
+.bar-chart {
+ --baseline: 1px;
+ display: grid;
+ grid-template-rows: 1fr auto auto;
+ align-items: end;
+ gap: 6px;
+ padding: 4px 0 0;
+ height: clamp(140px, 22vh, 240px);
+ position: relative;
+}
+.bar-chart.small { height: clamp(110px, 16vh, 180px); }
+
+.bar-chart .bars {
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-columns: 1fr;
+ gap: clamp(4px, 0.6vw, 8px);
+ align-items: end;
+ position: relative;
+ height: 100%;
+ border-bottom: 1px solid var(--rule);
+}
+/* Faint horizontal gridlines at 25 / 50 / 75 / 100 % */
+.bar-chart .bars::before {
+ content: "";
+ position: absolute;
+ inset: 0;
+ background-image: repeating-linear-gradient(
+ to top,
+ transparent 0 calc(25% - 0.5px),
+ var(--border) calc(25% - 0.5px) calc(25% + 0.5px),
+ transparent calc(25% + 0.5px) 25%
+ );
+ opacity: 0.4;
+ pointer-events: none;
+}
+.bar-chart .bars > * { z-index: 1; position: relative; }
+
+.bar-cell {
+ display: grid;
+ grid-template-rows: 1fr;
+ height: 100%;
+ align-items: end;
+ text-align: center;
+ min-width: 0;
+}
+.bar-fill {
+ display: block;
+ background: var(--primary);
+ height: var(--h, 2%);
+ width: 100%;
+ border-radius: 1px 1px 0 0;
+ transition: height 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
+ align-self: end;
+ position: relative;
+}
+.bar-fill::after {
+ /* thin top-cap, like a printed almanac bar */
+ content: "";
+ position: absolute;
+ top: 0; left: 0; right: 0;
+ height: 2px;
+ background: color-mix(in srgb, var(--text) 55%, var(--primary));
+ opacity: 0.85;
+}
+.bar-fill[data-empty="true"] { background: transparent; border-top: 1px dashed var(--border); }
+.bar-fill[data-empty="true"]::after { display: none; }
+
+.bar-num {
+ font-family: var(--font-mono);
+ font-size: clamp(0.7rem, 0.9vw, 0.92rem);
+ font-weight: 600;
+ font-variant-numeric: tabular-nums;
+ color: var(--text);
+ line-height: 1;
+}
+.bar-label {
+ font-family: var(--font-mono);
+ font-size: clamp(0.58rem, 0.74vw, 0.74rem);
+ color: var(--muted);
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ letter-spacing: 0;
+ line-height: 1;
+}
+.bar-chart .nums,
+.bar-chart .labels {
+ display: grid;
+ grid-auto-flow: column;
+ grid-auto-columns: 1fr;
+ gap: clamp(4px, 0.6vw, 8px);
+ text-align: center;
+}
+
+
+/* ============================================================
+ * Score-distribution area chart (between + finished)
+ * ============================================================ */
+
+.area-chart {
+ position: relative;
+ width: 100%;
+ height: clamp(180px, 28vh, 320px);
+ display: grid;
+ grid-template-rows: 1fr auto;
+ gap: 4px;
+}
+.area-chart svg {
+ width: 100%;
+ height: 100%;
+ display: block;
+ overflow: visible;
+}
+.area-chart .grid-line {
+ stroke: var(--border);
+ stroke-width: 1;
+ vector-effect: non-scaling-stroke;
+ opacity: 0.55;
+ stroke-dasharray: 2 4;
+}
+.area-chart .axis {
+ stroke: var(--rule);
+ stroke-width: 1;
+ vector-effect: non-scaling-stroke;
+}
+.area-chart .area-fill {
+ fill: var(--primary);
+ fill-opacity: 0.14;
+ transition: d 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+.area-chart .area-line {
+ fill: none;
+ stroke: var(--primary);
+ stroke-width: 3;
+ stroke-linejoin: round;
+ stroke-linecap: round;
+ transition: d 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
+ /* tell the renderer not to scale the stroke when SVG is stretched
+ non-uniformly; the perceived width stays consistent */
+ vector-effect: non-scaling-stroke;
+}
+.area-chart .data-point {
+ fill: var(--surface);
+ stroke: var(--primary);
+ stroke-width: 2.5;
+ vector-effect: non-scaling-stroke;
+ transition: cx 700ms cubic-bezier(0.22, 0.61, 0.36, 1), cy 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+.area-chart .data-label {
+ font-family: var(--font-mono);
+ font-size: 18px;
+ font-weight: 600;
+ font-variant-numeric: tabular-nums;
+ fill: var(--text);
+ text-anchor: middle;
+ dominant-baseline: hanging;
+}
+.area-chart .x-tick-label {
+ font-family: var(--font-mono);
+ font-size: 16px;
+ fill: var(--muted);
+ text-anchor: middle;
+}
+.area-chart .y-tick-label {
+ font-family: var(--font-mono);
+ font-size: 14px;
+ fill: var(--muted);
+ text-anchor: end;
+ dominant-baseline: middle;
+}
+.area-chart .axis-title {
+ font-family: var(--font-sans);
+ font-size: 14px;
+ font-weight: 600;
+ fill: var(--muted);
+ text-transform: uppercase;
+ letter-spacing: 0.18em;
+}
+.area-chart .median-line {
+ stroke: var(--text);
+ stroke-width: 1.5;
+ stroke-dasharray: 4 3;
+ opacity: 0.6;
+ vector-effect: non-scaling-stroke;
+}
+.area-chart .median-tag {
+ font-family: var(--font-mono);
+ font-size: 16px;
+ font-weight: 600;
+ fill: var(--text);
+}
+
+.chart-legend {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 16px;
+ font-family: var(--font-sans);
+ font-size: clamp(0.68rem, 0.86vw, 0.82rem);
+ color: var(--muted);
+ letter-spacing: 0.14em;
+ text-transform: uppercase;
+ font-weight: 600;
+ padding-top: 4px;
+}
+.chart-legend .stat {
+ font-family: var(--font-mono);
+ letter-spacing: -0.01em;
+ text-transform: none;
+ color: var(--text);
+}
+.chart-legend .stat b {
+ font-weight: 600;
+}
+
+
+/* ============================================================
+ * Big leaderboard
+ * ============================================================ */
+
+.big-leaderboard {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: grid;
+ gap: clamp(2px, 0.4vh, 6px);
+ align-content: start;
+}
+.big-leaderboard li {
+ display: grid;
+ grid-template-columns: clamp(40px, 3.4vw, 64px) 1fr auto;
+ align-items: baseline;
+ gap: clamp(10px, 1vw, 18px);
+ padding: clamp(7px, 0.95vh, 11px) clamp(10px, 1vw, 16px);
+ border-bottom: 1px solid var(--border);
+ border-left: 3px solid transparent;
+ position: relative;
+ animation: row-in 500ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
+ animation-delay: var(--d, 0ms);
+}
+.big-leaderboard li:last-child { border-bottom: 0; }
+@keyframes row-in {
+ from { opacity: 0; transform: translateX(-8px); }
+ to { opacity: 1; transform: translateX(0); }
+}
+
+.big-leaderboard .rank {
+ font-family: var(--font-mono);
+ font-size: clamp(1.05rem, 1.4vw, 1.45rem);
+ font-weight: 600;
+ font-variant-numeric: tabular-nums;
+ color: var(--muted);
+ letter-spacing: -0.02em;
+ text-align: right;
+}
+.big-leaderboard .name {
+ font-family: var(--font-display);
+ /* Per spec: leaderboard names >= 1.4vw */
+ font-size: clamp(1.05rem, 1.45vw, 1.55rem);
+ font-weight: 500;
+ color: var(--text);
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-feature-settings: "ss01";
+}
+.big-leaderboard .score {
+ font-family: var(--font-mono);
+ font-size: clamp(1.05rem, 1.5vw, 1.5rem);
+ font-weight: 600;
+ font-variant-numeric: tabular-nums;
+ color: var(--text);
+ letter-spacing: -0.02em;
+}
+.big-leaderboard li:nth-child(1) {
+ background: color-mix(in srgb, var(--medal-gold) 10%, var(--surface));
+ border-left-color: var(--medal-gold);
+}
+.big-leaderboard li:nth-child(2) {
+ background: color-mix(in srgb, var(--medal-silver) 10%, var(--surface));
+ border-left-color: var(--medal-silver);
+}
+.big-leaderboard li:nth-child(3) {
+ background: color-mix(in srgb, var(--medal-bronze) 10%, var(--surface));
+ border-left-color: var(--medal-bronze);
+}
+.big-leaderboard li:nth-child(1) .rank,
+.big-leaderboard li:nth-child(1) .score { color: var(--medal-gold); }
+.big-leaderboard li:nth-child(2) .rank,
+.big-leaderboard li:nth-child(2) .score { color: var(--medal-silver); }
+.big-leaderboard li:nth-child(3) .rank,
+.big-leaderboard li:nth-child(3) .score { color: var(--medal-bronze); }
+
+
+/* ============================================================
+ * Finished: hero banner
+ * ============================================================ */
+
+.finished-banner {
+ display: grid;
+ align-content: center;
+ justify-items: center;
+ gap: clamp(8px, 1.2vh, 14px);
+ padding: clamp(16px, 2vh, 28px) clamp(20px, 2vw, 32px);
+ border: 1px solid var(--border);
+ background:
+ linear-gradient(180deg, color-mix(in srgb, var(--primary) 5%, transparent), transparent 60%),
+ var(--surface);
+ border-radius: 4px;
+ position: relative;
+}
+.finished-banner .kicker {
+ font-family: var(--font-sans);
+ font-size: clamp(0.7rem, 0.92vw, 0.86rem);
+ font-weight: 700;
+ letter-spacing: 0.32em;
+ text-transform: uppercase;
+ color: var(--primary);
+}
+.finished-banner h2 {
+ margin: 0;
+ font-family: var(--font-display);
+ font-style: italic;
+ font-size: clamp(2rem, 3.4vw, 3.4rem);
+ font-weight: 600;
+ letter-spacing: -0.018em;
+ color: var(--text);
+ line-height: 1.05;
+ border: 0;
+ padding: 0;
+ text-transform: none;
+ display: block;
+}
+.finished-banner .summary {
+ font-family: var(--font-display);
+ font-size: clamp(1rem, 1.3vw, 1.3rem);
+ color: var(--text-soft);
+ font-style: italic;
+ margin: 0;
+ text-align: center;
+ line-height: 1.4;
+}
+
+.finished-grid {
+ grid-template-rows: auto 1fr;
+}
+
+
+/* ============================================================
+ * Misc: error / empty states
+ * ============================================================ */
+
+.empty-state {
+ display: grid;
+ place-items: center;
+ height: 100%;
+ text-align: center;
+ gap: 8px;
+ color: var(--muted);
+}
+.empty-state .glyph {
+ font-family: var(--font-display);
+ font-style: italic;
+ font-size: clamp(1.4rem, 2vw, 2rem);
+ color: var(--muted-2);
+}
+.empty-state p {
+ font-family: var(--font-sans);
+ font-size: clamp(0.78rem, 1vw, 0.95rem);
+ letter-spacing: 0.08em;
+ margin: 0;
+}
+
+.fatal-card {
+ align-content: center;
+ justify-items: center;
+ text-align: center;
+ gap: 12px;
+ height: 60vh;
+ align-self: center;
+ margin: auto;
+}
+
+
+/* ============================================================
+ * Footer (tickerline)
+ * ============================================================ */
+
+.projector-foot {
+ display: grid;
+ grid-template-columns: auto 1fr auto;
+ align-items: center;
+ gap: clamp(10px, 1.4vw, 18px);
+ padding-top: clamp(6px, 0.8vh, 10px);
+ border-top: 1px solid var(--rule);
+ font-family: var(--font-mono);
+ font-size: clamp(0.66rem, 0.84vw, 0.78rem);
+ font-variant-numeric: tabular-nums;
+ letter-spacing: 0.04em;
+ color: var(--muted);
+}
+.projector-foot .left,
+.projector-foot .right {
+ display: inline-flex;
+ align-items: center;
+ gap: 10px;
+}
+.projector-foot .dot {
+ width: 7px;
+ height: 7px;
+ border-radius: 999px;
+ background: var(--correct-border);
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--correct-border) 18%, transparent);
+}
+.projector-foot .dot.dim { background: var(--muted-2); box-shadow: none; }
+.projector-foot .center {
+ text-align: center;
+ font-family: var(--font-sans);
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ font-weight: 600;
+}
+
+
+/* ============================================================
+ * Responsive — keep everything visible on 1366×768 and below
+ * ============================================================ */
+
+@media (max-width: 1280px) {
+ .projector-grid.lobby { grid-template-columns: 0.95fr 1fr; }
+ .projector-grid.question { grid-template-columns: 1.5fr 1fr; }
+}
+
+@media (max-width: 1100px) {
+ .projector-grid.question { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
+ .side-card { display: none; }
+ .topbar-mid { display: none; }
+}
+
+@media (max-aspect-ratio: 5/4) {
+ /* Boxy aspect: stack lobby vertically */
+ .projector-grid.lobby { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
+ .qr-big { width: clamp(220px, 32vw, 380px); }
+}
+
+
+/* ============================================================
+ * Reduced motion — defer to global rule, but explicitly silence
+ * the ones we introduce here
+ * ============================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+ .countdown-ring.urgent { animation: none; }
+ .participant-count.bump b { animation: none; }
+ .constellation li { animation: none; opacity: 0.78; }
+ .big-leaderboard li { animation: none; }
+ .big-explanation { animation: none; }
+}
diff --git a/static/projector.html b/static/projector.html
new file mode 100644
index 0000000..1158eb6
--- /dev/null
+++ b/static/projector.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+ Suspicious join attempts
+-
+ ${orphans.map((o) => `
+
-
+
${escapeText(o.student_id)}+ ${o.count}× attempted${o.latest_ts ? ` · last ${escapeText(o.latest_ts)}` : ""} +
+ `).join("")}
+
No real participant holds these IDs yet. If a student claims one of them and asks for help, you can clear it from the presence list.
Loading projector
+
+
+
+ Projector view
+Open /projector/?sid=<your-sid>
+
+
+ Quiz unavailable
+No live session at ${escapeText(sid)}.
State: ${escapeText(s.state)}
+
+ `;
+}
+
+// --------------------------------------------------------------
+// State: QUESTION (open + closed/reveal)
+// --------------------------------------------------------------
+
+function renderQuestion(s, revealed) {
+ const q = s.question;
+ if (!q) return `
+
+
+
+
+ Scan to join
+Open the quiz on your phone.
+Point your camera at the code, or type the address below into a browser.
+
+ 
+
+ ${escapeText(s.join_url || "")}
+
+
+ Joined so far
+
+ ${n}
+
+
+
+ student${n === 1 ? "" : "s"} ready,
+
+
+ -
+ ${Array.from({ length: dots }).map((_, i) => {
+ const d = (i % 24) * 18;
+ return ``;
+ }).join("")}
+
+
+ — how it runs —
+
+ Loading question…
+
+ `;
+}
+
+// --------------------------------------------------------------
+// State: BETWEEN
+// --------------------------------------------------------------
+
+function renderBetween(s) {
+ const next = (s.question?.idx ?? -1) >= 0
+ ? `Next: question ${s.question.idx + 2} of ${s.pool_meta?.question_count ?? "?"}`
+ : "";
+ return `
+
+
+
+
+
+
+
+
+ ${revealed && reveal?.explanation
+ ? `${escapeText(q.text)}
+
+ ${revealed ? "0s" : initialSec + "s"}
+
+ ${escapeText(reveal.explanation)}
` + : `
+ Submissions
+
+ ${submitted}of ${s.live_histogram?.total_count || s.participant_count || 0}
+
`
+ }
+
+
+ Response time
+ ${renderResponseTime(s.response_time_distribution)} +Top 5
+ ${renderLeaderboard((s.leaderboard || []).slice(0, 5))} + +
+
+ `;
+}
+
+// --------------------------------------------------------------
+// State: FINISHED
+// --------------------------------------------------------------
+
+function renderFinished(s) {
+ const dist = s.score_distribution;
+ const top = (s.leaderboard || [])[0];
+ const headline = top
+ ? `${escapeText(top.name)} took the broadside.`
+ : `The quiz is complete.`;
+ return `
+
+
+ Score distribution
+ ${renderScoreArea(s.score_distribution)} + +
+
+ Standings
+ ${renderLeaderboard((s.leaderboard || []).slice(0, 10))} +
+
+ `;
+}
+
+// --------------------------------------------------------------
+// Leaderboard
+// --------------------------------------------------------------
+
+function renderLeaderboard(rows) {
+ if (!rows || !rows.length) {
+ return `
+
+ ${renderScoreArea(dist)}
+
+
+
+ Final leaderboard
+ ${renderLeaderboard(s.leaderboard || [])} +— no scores yet —
`;
+ }
+ return `
+ Standings appear after the first question is scored.
-
+ ${rows.map((r, i) => `
+
- + ${r.rank} + ${escapeText(r.name)} + ${fmtScore(r.score)} + + `).join("")} +
— awaiting submissions —
`;
+ }
+ const max = Math.max(1, ...dist.buckets.map((b) => b.count));
+ const cells = dist.buckets.map((b) => {
+ const h = Math.max(2, Math.round(100 * b.count / max));
+ const empty = b.count === 0;
+ return `
+ `;
+ }).join("");
+ const nums = dist.buckets.map((b) => ``).join("");
+ const labels = dist.buckets.map((b) => ``).join("");
+ return `
+
+ `;
+}
+
+/**
+ * Score distribution as a smoothed step-area chart. Gives a feel for the
+ * shape of the class result rather than 10 detached bars; reads well at
+ * lecture-hall distance because the silhouette is unambiguous.
+ *
+ * The SVG is intentionally drawn in a fixed 1000×360 box and stretched.
+ * We use a stepped path so each x-bucket looks like a flat top (since the
+ * bucket is a range, not a point), then close it down to the axis to fill.
+ */
+function renderScoreArea(dist) {
+ if (!dist || !dist.buckets || !dist.buckets.length) {
+ return `— scores not yet tallied —
`;
+ }
+ const W = 1000, H = 360;
+ const padL = 56, padR = 16, padT = 22, padB = 44;
+ const innerW = W - padL - padR;
+ const innerH = H - padT - padB;
+ const buckets = dist.buckets;
+ const n = buckets.length;
+ const total = dist.n || buckets.reduce((a, b) => a + b.count, 0) || 0;
+ const max = Math.max(1, ...buckets.map((b) => b.count));
+
+ // X coords for the *edges* between buckets (n+1 edges)
+ const xEdge = (i) => padL + (innerW * i) / n;
+ const yFor = (count) => padT + innerH * (1 - count / max);
+
+ // Stepped polyline: for each bucket draw flat top from xEdge(i) to xEdge(i+1)
+ const linePath = [];
+ buckets.forEach((b, i) => {
+ const x0 = xEdge(i), x1 = xEdge(i + 1), y = yFor(b.count);
+ if (i === 0) linePath.push(`M ${x0} ${y}`);
+ else linePath.push(`L ${x0} ${y}`);
+ linePath.push(`L ${x1} ${y}`);
+ });
+ const fillPath = [
+ ...linePath,
+ `L ${xEdge(n)} ${padT + innerH}`,
+ `L ${xEdge(0)} ${padT + innerH}`,
+ `Z`,
+ ];
+
+ // Y gridlines at 0, .25, .5, .75, 1
+ const yGrid = [0, 0.25, 0.5, 0.75, 1].map((t) => {
+ const y = padT + innerH * t;
+ const v = Math.round(max * (1 - t));
+ return `
+ The distribution appears after the first question is scored.
+
+
+ `;
+}
+
+// --------------------------------------------------------------
+// Countdown ring (partial update, runs at 4Hz)
+// --------------------------------------------------------------
+
+function startCountdown(deadlineMs, totalSec) {
+ stopCountdown();
+ const tick = () => {
+ const ring = document.querySelector("#big-countdown");
+ if (!ring) return stopCountdown();
+ const remaining = Math.max(0, deadlineMs - Date.now());
+ const sec = Math.ceil(remaining / 1000);
+ const pct = clamp(100 * (remaining / 1000) / Math.max(1, totalSec), 0, 100);
+ ring.style.setProperty("--pct", pct.toFixed(2));
+ const num = ring.querySelector(".num");
+ if (num) num.textContent = `${sec}s`;
+ const isUrgent = remaining > 0 && remaining <= 10000;
+ ring.classList.toggle("urgent", isUrgent);
+ if (remaining <= 0) {
+ ring.classList.add("spent");
+ stopCountdown();
+ }
+ };
+ tick();
+ store.countdownTimer = setInterval(tick, 250);
+}
+
+function stopCountdown() {
+ if (store.countdownTimer) clearInterval(store.countdownTimer);
+ store.countdownTimer = null;
+}
+
+// --------------------------------------------------------------
+// Boot
+// --------------------------------------------------------------
+
+boot();
diff --git a/static/quiz.js b/static/quiz.js
index 4b26ee4..ed54fbd 100644
--- a/static/quiz.js
+++ b/static/quiz.js
@@ -34,6 +34,61 @@ const RECONNECT = {
let countdownTimer = null;
+/* Tab-blur audit. We POST a server event whenever the student
+ * backgrounds the page (visibilitychange) or moves focus away from the
+ * window (blur). Both are debounced so a rapid alt-tab roundtrip
+ * doesn't spam events. The server records each event in `student_events`
+ * and surfaces a count to the instructor presence panel.
+ *
+ * We only ping during a question_open state — switching tabs between
+ * questions is fine and we don't want to noise the audit. */
+const FOCUS = {
+ lastBlur: 0,
+ lastHidden: 0,
+ debounceMs: 1500,
+};
+
+function postEvent(kind) {
+ if (!sid || !store.currentQuestion || store.submitted) return;
+ // Use sendBeacon when leaving the page so the event survives the
+ // navigation; otherwise fetch with credentials so the cookie rides.
+ const body = JSON.stringify({ kind, question_idx: store.currentQuestion.question_idx });
+ const url = `/api/session/${sid}/event`;
+ if (kind === "visibility_hidden" && navigator.sendBeacon) {
+ const blob = new Blob([body], { type: "application/json" });
+ navigator.sendBeacon(url, blob);
+ return;
+ }
+ fetch(url, {
+ method: "POST",
+ credentials: "same-origin",
+ headers: { "Content-Type": "application/json" },
+ body,
+ keepalive: true,
+ }).catch(() => {});
+}
+
+function onBlur() {
+ const now = Date.now();
+ if (now - FOCUS.lastBlur < FOCUS.debounceMs) return;
+ FOCUS.lastBlur = now;
+ postEvent("blur");
+}
+
+function onVisibility() {
+ const now = Date.now();
+ if (document.visibilityState === "hidden") {
+ if (now - FOCUS.lastHidden < FOCUS.debounceMs) return;
+ FOCUS.lastHidden = now;
+ postEvent("visibility_hidden");
+ } else if (document.visibilityState === "visible") {
+ postEvent("visibility_visible");
+ }
+}
+
+window.addEventListener("blur", onBlur);
+document.addEventListener("visibilitychange", onVisibility);
+
function fmtScore(value) {
// Scores are floats on a 0.05 grid in [0, 1]. Display as a fixed
// two-decimal string so users see e.g. "0.85" instead of
@@ -136,7 +191,15 @@ function renderJoin(error = null) {
connect();
} catch (err) {
submit.disabled = false;
- renderJoin(err.message || "Could not join.");
+ let msg = err.message || "Could not join.";
+ // The /join endpoint returns the FastAPI default JSON error envelope
+ // ({"detail": "..."}) — surface the human-readable detail rather
+ // than the raw JSON blob in the alert.
+ try {
+ const parsed = JSON.parse(msg);
+ if (parsed && parsed.detail) msg = parsed.detail;
+ } catch {}
+ renderJoin(msg);
}
});
}
diff --git a/static/style.css b/static/style.css
index 59adab3..34b6023 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1256,6 +1256,145 @@ h2.question-text.small {
.options.student-reveal li.yours.correct::before { color: var(--correct-border); }
.options.student-reveal li.yours.wrong-pick::before { color: var(--wrong-border); }
+/* ---------- Live presence panel (admin) ---------- */
+
+.presence-panel { padding: 18px 20px 16px; }
+
+.presence-list {
+ list-style: none;
+ margin: 0 0 12px;
+ padding: 0;
+ display: grid;
+ gap: 0;
+ max-height: 420px;
+ overflow-y: auto;
+}
+.presence-row {
+ display: grid;
+ grid-template-columns: 14px 1fr auto auto;
+ gap: 10px;
+ align-items: center;
+ padding: 9px 0;
+ border-bottom: 1px dotted var(--border);
+}
+.presence-row:last-child { border-bottom: 0; }
+.presence-row .dot {
+ width: 8px;
+ height: 8px;
+ border-radius: 999px;
+ background: var(--muted-2);
+ flex-shrink: 0;
+ transition: background 0.4s ease, box-shadow 0.4s ease;
+}
+.presence-row.is-online .dot {
+ background: var(--correct-border);
+ box-shadow: 0 0 0 3px color-mix(in srgb, var(--correct-border) 18%, transparent);
+}
+.presence-row.is-online.is-fresh .dot {
+ animation: rosterDotPulse 2.2s ease-in-out infinite;
+}
+.presence-row.is-stale .dot { background: var(--warn); }
+.presence-row.is-offline .dot { background: var(--muted-2); }
+
+.presence-row .who { display: grid; line-height: 1.2; min-width: 0; }
+.presence-row .who b {
+ font-weight: 500;
+ font-size: 0.92rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.presence-row .who small {
+ color: var(--muted);
+ font-size: 0.7rem;
+ font-family: var(--font-mono);
+ letter-spacing: 0;
+}
+
+.presence-flags {
+ display: inline-flex;
+ gap: 4px;
+ align-items: center;
+ flex-wrap: wrap;
+}
+.flag {
+ font-family: var(--font-mono);
+ font-size: 0.68rem;
+ font-weight: 600;
+ letter-spacing: 0;
+ padding: 2px 7px;
+ border-radius: 0;
+ border: 1px solid var(--border);
+ color: var(--muted);
+ background: var(--surface);
+ font-variant-numeric: tabular-nums;
+ min-width: 18px;
+ text-align: center;
+}
+.flag-ok { color: var(--correct-border); border-color: var(--correct-border); }
+.flag-pending { color: var(--muted-2); }
+.flag-warn { color: var(--warn); border-color: var(--warn); }
+.flag-danger {
+ color: var(--danger-text);
+ background: var(--danger);
+ border-color: var(--danger);
+}
+
+.btn.xtiny {
+ padding: 2px 8px;
+ font-size: 0.78rem;
+ min-height: 0;
+ letter-spacing: 0;
+ text-transform: none;
+ border-radius: 2px;
+}
+
+.legend-dot {
+ display: inline-block;
+ width: 7px;
+ height: 7px;
+ border-radius: 999px;
+ margin-right: 4px;
+ margin-left: 8px;
+ vertical-align: middle;
+ background: var(--muted-2);
+}
+.legend-dot:first-child { margin-left: 0; }
+.legend-dot.is-online { background: var(--correct-border); }
+.legend-dot.is-stale { background: var(--warn); }
+.legend-dot.is-offline { background: var(--muted-2); }
+
+.xsmall { font-size: 0.72rem; letter-spacing: 0.04em; }
+
+.duplicate-alerts {
+ margin: 0 32px 16px;
+}
+.duplicate-alerts .alert-title {
+ font-family: var(--font-sans);
+ font-size: 0.72rem;
+ letter-spacing: 0.18em;
+ text-transform: uppercase;
+ font-weight: 700;
+ color: var(--danger);
+ margin: 0 0 6px;
+ padding: 0;
+ border: 0;
+}
+.dup-list {
+ list-style: none;
+ padding: 0;
+ margin: 0 0 6px;
+ display: grid;
+ gap: 4px;
+ font-family: var(--font-mono);
+ font-size: 0.85rem;
+}
+.dup-list li { display: flex; gap: 12px; align-items: baseline; }
+
+@media (max-width: 900px) {
+ .duplicate-alerts { margin: 0 18px 12px; }
+}
+
/* ---------- Responsive: mobile student view ---------- */
@media (max-width: 480px) {
diff --git a/tests/test_anti_cheat.py b/tests/test_anti_cheat.py
new file mode 100644
index 0000000..468d031
--- /dev/null
+++ b/tests/test_anti_cheat.py
@@ -0,0 +1,89 @@
+"""Anti-cheat / audit-event coverage:
+ - tab-blur events are recorded and surfaced in CSV + presence
+ - duplicate-join attempts are 409 + audited
+ - admin clear-student removes the participant + submissions
+ - submit lockout (one answer per Q per student) is server-enforced
+"""
+
+from __future__ import annotations
+
+from conftest import admin_login, join_student
+
+
+def test_blur_event_is_logged_and_counted(client, sid):
+ join_student(client, sid, "s1", "Alice")
+ response = client.post(f"/api/session/{sid}/event", json={"kind": "blur", "question_idx": 0})
+ assert response.status_code == 200
+ response = client.post(f"/api/session/{sid}/event", json={"kind": "blur", "question_idx": 0})
+ assert response.status_code == 200
+ response = client.post(f"/api/session/{sid}/event", json={"kind": "visibility_hidden"})
+ assert response.status_code == 200
+
+ # The event count is exposed via CSV export. Two blur events + one
+ # visibility_hidden event should land on the s1 row.
+ admin_login(client)
+ csv_text = client.get("/admin/api/csv").text
+ s1_row = next(line for line in csv_text.splitlines() if ",s1," in line)
+ # Trailing fields are blur_count, hidden_count, duplicate_join_attempts.
+ assert s1_row.endswith(",2,1,0"), s1_row
+
+
+def test_event_endpoint_rejects_unknown_kind(client, sid):
+ join_student(client, sid, "s1", "Alice")
+ response = client.post(f"/api/session/{sid}/event", json={"kind": "screenshot"})
+ assert response.status_code == 422
+
+
+def test_event_endpoint_requires_student_cookie(client, sid):
+ response = client.post(f"/api/session/{sid}/event", json={"kind": "blur"})
+ assert response.status_code == 401
+
+
+def test_duplicate_join_is_logged_in_csv(client, sid):
+ """A 409 join attempt records a `duplicate_join` audit row whose
+ count rolls up into CSV + presence_update."""
+ join_student(client, sid, "s1", "Alice")
+ # Second client tries to claim s1 from a fresh cookie jar.
+ fresh = client.__class__(client.app)
+ response = fresh.post(f"/api/session/{sid}/join", json={"student_id": "s1", "name": "Hijacker"})
+ assert response.status_code == 409
+
+ admin_login(client)
+ csv_text = client.get("/admin/api/csv").text
+ s1_row = next(line for line in csv_text.splitlines() if ",s1," in line)
+ assert s1_row.endswith(",0,0,1"), s1_row
+
+
+def test_admin_clear_student_frees_id(client, sid):
+ """First-claim-wins recovery: admin can clear a participant so the
+ legitimate student (or anyone, since there's no further identity
+ check) can re-join with that id."""
+ join_student(client, sid, "s1", "Alice")
+ admin_login(client)
+ response = client.delete("/admin/api/students/s1")
+ assert response.status_code == 200
+ # The slot is now free; the same id can be re-claimed from a fresh
+ # cookie jar.
+ fresh = client.__class__(client.app)
+ response = fresh.post(f"/api/session/{sid}/join", json={"student_id": "s1", "name": "Alice Again"})
+ assert response.status_code == 200
+
+
+def test_admin_clear_student_404s_when_no_match(client, sid):
+ admin_login(client)
+ assert client.delete("/admin/api/students/nobody").status_code == 404
+
+
+def test_submit_lockout_is_server_enforced(client, sid):
+ """Server-side: a second submit for the same (sid, student_id, qidx)
+ returns the *original* ack rather than overwriting the answer. The
+ PK constraint + existing_submit_ack early-return guarantees this."""
+ join_student(client, sid, "s1", "Alice")
+ rooms = client.app.state.rooms
+ client.portal.call(rooms.open_question, sid, 0, 5)
+ first = client.portal.call(rooms.submit_answer, sid, "s1", 0, "B")
+ second = client.portal.call(rooms.submit_answer, sid, "s1", 0, "C")
+ assert first["type"] == "submit_ack"
+ assert second["type"] == "submit_ack"
+ assert second["answer"] == first["answer"] == "B"
+ assert second["score"] == first["score"]
diff --git a/tests/test_api_student.py b/tests/test_api_student.py
index 88c4698..2259c73 100644
--- a/tests/test_api_student.py
+++ b/tests/test_api_student.py
@@ -11,14 +11,25 @@ def test_session_metadata_join_me_and_stats(client, sid):
assert join["ok"] is True
assert "qz_student" in client.cookies
- join_student(client, sid, "s1", "Updated Name")
me = client.get(f"/api/session/{sid}/me")
assert me.status_code == 200
- assert me.json()["name"] == "Updated Name"
+ assert me.json()["name"] == "First Name"
stats = client.get(f"/api/session/{sid}/stats").json()
assert stats["question_idx"] is None
- assert stats["top5"][0]["name"] == "Updated Name"
+ assert stats["top5"][0]["name"] == "First Name"
+
+
+def test_duplicate_student_id_join_is_rejected(client, sid):
+ """First-claim-wins anti-hijack: a second join attempting the same
+ student_id must 409 (without overwriting name or rotating the cookie).
+ The original cookie keeps working; recovery is via admin clear-student."""
+ join_student(client, sid, "s1", "First Name")
+ response = client.post(f"/api/session/{sid}/join", json={"student_id": "s1", "name": "Hijacker"})
+ assert response.status_code == 409
+ assert "already in use" in response.text.lower()
+ me = client.get(f"/api/session/{sid}/me").json()
+ assert me["name"] == "First Name"
def test_root_without_sid_redirects_to_canonical(client, sid):
diff --git a/tests/test_csv_export.py b/tests/test_csv_export.py
index 4d95a08..1a86f4f 100644
--- a/tests/test_csv_export.py
+++ b/tests/test_csv_export.py
@@ -12,6 +12,9 @@ def test_csv_export_contains_one_row_per_submission(client, sid):
response = client.get("/admin/api/csv")
lines = response.text.strip().splitlines()
- assert lines[0] == "sid,student_id,name,question_idx,answer,elapsed_ms,score,status"
+ assert lines[0] == "sid,student_id,name,question_idx,answer,elapsed_ms,score,status,blur_count,hidden_count,duplicate_join_attempts"
assert len(lines) == 2
assert ",s1,Student One,0,B," in lines[1]
+ # Default audit-event counts are 0 for a clean run (no blur events,
+ # no duplicate-join attempts).
+ assert lines[1].endswith(",0,0,0")
diff --git a/tests/test_projector.py b/tests/test_projector.py
new file mode 100644
index 0000000..749cfd9
--- /dev/null
+++ b/tests/test_projector.py
@@ -0,0 +1,76 @@
+"""Projector view (public read-only):
+ - snapshot endpoint returns the expected shape
+ - leaderboard never carries student_ids (privacy)
+ - WS client receives a projector_state message on connect
+ - state changes (open question, submit, close) push fresh snapshots
+"""
+
+from __future__ import annotations
+
+import pytest
+from starlette.websockets import WebSocketDisconnect
+
+from conftest import admin_login, join_student
+
+
+def test_projector_snapshot_includes_required_fields(client, sid):
+ join_student(client, sid, "s1", "Alice")
+ response = client.get(f"/api/session/{sid}/projector")
+ assert response.status_code == 200
+ body = response.json()
+ assert body["type"] == "projector_state"
+ assert body["state"] == "lobby"
+ assert body["sid"] == sid
+ assert body["participant_count"] == 1
+ assert "qr_url" in body and body["qr_url"].startswith("data:image/svg+xml")
+ assert "join_url" in body
+ assert body["pool_meta"]["question_count"] >= 1
+ assert "score_distribution" in body
+ assert "leaderboard" in body
+
+
+def test_projector_leaderboard_redacts_student_ids(client, sid):
+ """The /admin board carries student_ids; the public projector
+ leaderboard must NOT — student_id namespace is private."""
+ join_student(client, sid, "s1", "Alice")
+ join_student(client, sid, "s2", "Bob")
+ rooms = client.app.state.rooms
+ client.portal.call(rooms.open_question, sid, 0, 5)
+ client.portal.call(rooms.submit_answer, sid, "s1", 0, "B")
+ client.portal.call(rooms.close_question, sid)
+
+ snapshot = client.get(f"/api/session/{sid}/projector").json()
+ for row in snapshot["leaderboard"]:
+ assert "student_id" not in row, "projector leaderboard leaks student_ids"
+
+
+def test_projector_ws_pushes_snapshot_on_state_change(client, sid):
+ join_student(client, sid, "s1", "Alice")
+ admin_login(client)
+ with client.websocket_connect(f"/ws/projector/{sid}") as ws:
+ initial = ws.receive_json()
+ assert initial["type"] == "projector_state"
+ assert initial["state"] == "lobby"
+
+ # Trigger a state change via the room manager directly.
+ rooms = client.app.state.rooms
+ client.portal.call(rooms.open_question, sid, 0, 5)
+ push = ws.receive_json()
+ assert push["type"] == "projector_state"
+ assert push["state"] == "question_open"
+ assert push["question"] is not None
+ assert push["question"]["idx"] == 0
+
+
+def test_projector_404_for_unknown_sid(client):
+ assert client.get("/api/session/UNKNOWN/projector").status_code == 404
+ with pytest.raises(WebSocketDisconnect) as exc:
+ with client.websocket_connect("/ws/projector/UNKNOWN"):
+ pass
+ assert exc.value.code == 4001
+
+
+def test_projector_page_redirects_when_no_sid(client, sid):
+ response = client.get("/projector/", follow_redirects=False)
+ assert response.status_code == 302
+ assert response.headers["location"].endswith(f"sid={sid}")
diff --git a/tests/test_ws_admin.py b/tests/test_ws_admin.py
index ec8d846..354b9dd 100644
--- a/tests/test_ws_admin.py
+++ b/tests/test_ws_admin.py
@@ -11,6 +11,17 @@ def test_instructor_ws_requires_admin_cookie(client, sid):
assert exc.value.code == 4001
+def _drain_until(ws, target_type, max_msgs=12):
+ """Helper: pull messages off `ws` until one matches `target_type`. Lets
+ tests skip auxiliary state-tracking messages (presence_update,
+ full_leaderboard) that fire as side-effects of state changes."""
+ for _ in range(max_msgs):
+ msg = ws.receive_json()
+ if msg["type"] == target_type:
+ return msg
+ raise AssertionError(f"did not see message {target_type!r} after {max_msgs} attempts")
+
+
def test_instructor_next_command_drives_full_loop(client, sid):
"""The 'next' WS message drives the entire lifecycle:
lobby → opens Q0 → closes Q0 + opens Q1 → ... → closes last + ends."""
@@ -19,16 +30,14 @@ def test_instructor_next_command_drives_full_loop(client, sid):
with client.websocket_connect(f"/ws/student/{sid}") as student_ws:
assert student_ws.receive_json()["type"] == "state"
with client.websocket_connect(f"/ws/instructor/{sid}") as admin_ws:
- # Drain lobby snapshot.
- assert admin_ws.receive_json()["type"] == "state"
- assert admin_ws.receive_json()["type"] == "lobby_update"
+ # Drain lobby snapshot (state + lobby_update + presence_update).
+ _drain_until(admin_ws, "presence_update")
# First "next" opens Q0 from lobby.
admin_ws.send_json({"type": "next"})
assert student_ws.receive_json()["type"] == "question_open"
- admin_open = admin_ws.receive_json()
- assert admin_open["type"] == "question_open"
- assert admin_ws.receive_json()["type"] == "live_histogram"
+ _drain_until(admin_ws, "question_open")
+ _drain_until(admin_ws, "live_histogram")
# Second "next" closes Q0 and opens Q1.
admin_ws.send_json({"type": "next"})
@@ -42,17 +51,16 @@ def test_instructor_close_then_next_emits_clean_open(client, sid):
with client.websocket_connect(f"/ws/student/{sid}") as student_ws:
assert student_ws.receive_json()["type"] == "state"
with client.websocket_connect(f"/ws/instructor/{sid}") as admin_ws:
- assert admin_ws.receive_json()["type"] == "state"
- assert admin_ws.receive_json()["type"] == "lobby_update"
+ _drain_until(admin_ws, "presence_update")
admin_ws.send_json({"type": "open_question", "question_idx": 0, "time_limit": 2})
assert student_ws.receive_json()["type"] == "question_open"
- assert admin_ws.receive_json()["type"] == "question_open"
- assert admin_ws.receive_json()["type"] == "live_histogram"
+ _drain_until(admin_ws, "question_open")
+ _drain_until(admin_ws, "live_histogram")
admin_ws.send_json({"type": "close_question"})
assert student_ws.receive_json()["type"] == "question_closed"
- admin_msgs = [admin_ws.receive_json(), admin_ws.receive_json()]
- assert {m["type"] for m in admin_msgs} == {"question_closed", "full_leaderboard"}
+ _drain_until(admin_ws, "question_closed")
+ _drain_until(admin_ws, "full_leaderboard")
admin_ws.send_json({"type": "next"})
assert student_ws.receive_json()["type"] == "question_open"
@@ -62,16 +70,12 @@ def test_reset_command_returns_session_to_lobby(client, sid):
join_student(client, sid, "s1", "Student One")
admin_login(client)
with client.websocket_connect(f"/ws/instructor/{sid}") as admin_ws:
- assert admin_ws.receive_json()["type"] == "state"
- assert admin_ws.receive_json()["type"] == "lobby_update"
+ _drain_until(admin_ws, "presence_update")
admin_ws.send_json({"type": "open_question", "question_idx": 0, "time_limit": 2})
- assert admin_ws.receive_json()["type"] == "question_open"
- assert admin_ws.receive_json()["type"] == "live_histogram"
+ _drain_until(admin_ws, "question_open")
+ _drain_until(admin_ws, "live_histogram")
admin_ws.send_json({"type": "reset"})
- # After reset, the instructor receives a state=lobby snapshot + lobby_update.
- msgs = []
- while len(msgs) < 2:
- msgs.append(admin_ws.receive_json())
- types = [m["type"] for m in msgs]
- assert "state" in types
+ # After reset, instructor receives a state=lobby snapshot.
+ msg = _drain_until(admin_ws, "state")
+ assert msg["state"] == "lobby"
+ 10 score bands · ${n} buckets
+ n = ${total} · mean ${mean.toFixed(2)} · max ${(dist.max_total || 0).toFixed(1)}
+
+