diff --git a/static/admin.js b/static/admin.js index 0cf1588..57a1bcf 100644 --- a/static/admin.js +++ b/static/admin.js @@ -178,12 +178,16 @@ function renderJoinPanel() { function renderRosterPanel() { const r = store.roster || []; + // Newest-first so late joiners are visible at the top of the list. The + // first three are tagged so the CSS can warm their dot — gives the + // operator a quick "yes the room is live" cue without an explicit log. + const ordered = r.slice().reverse(); return `

Joined ${r.length}

- ${r.length - ? `
@@ -200,11 +204,18 @@ function renderStatePanel(state) { function renderLobby() { const total = store.session.pool_meta.question_count; + const joined = (store.roster || []).length; return ` -
+
-

Ready to start

-

When you start, question 1 of ${total} opens for everyone in the room. Late joiners can still join after a question opens; they get whatever time remains.

+

02 Pre-flight

+

Ready to start.

+

When you start, question 1 of ${total} opens for everyone in the room. Late joiners can still hop in mid-question; they get whatever time remains on the clock.

+
+
Joined${joined}
+
Questions${total}
+
Per question${store.session.pool_meta.time_limit_default}s
+
@@ -240,15 +251,29 @@ function renderQuestionOpen() { } function renderLiveHistogram() { - if (!store.histogram) return `

Waiting for first submission…

`; + if (!store.histogram) return `

Awaiting the first submission…

`; const h = store.histogram; + const submitted = store.submittedCount || 0; const total = Math.max(1, store.totalCount || 0); + // While nobody has submitted yet, suppress the bar rows — empty bars + // read as broken rather than "no data". Show a calm awaiting line. + if (submitted === 0) { + return ` +
+
+ 0 submitted + ${store.totalCount ? `of ${store.totalCount} joined` : ""} +
+

Bars appear once the first answer comes in.

+
+ `; + } return `
- ${store.submittedCount} submitted + ${submitted} submitted ${store.totalCount ? `of ${store.totalCount} joined` : ""} - ${h.pending != null ? `· ${h.pending} pending` : ""} + ${h.pending != null && h.pending > 0 ? `${h.pending} pending` : ""}
${["A","B","C","D"].map((k) => { @@ -326,10 +351,13 @@ function renderQuestionClosed() { } function renderFinished() { + const total = store.session.pool_meta.question_count; return `
-

Quiz finished

-

${store.session.pool_meta.question_count} questions complete. Final leaderboard below.

+
+

That's a wrap.

+

${total} question${total === 1 ? "" : "s"} complete. Final standings below; download the CSV when you're ready to grade.

+

Final leaderboard

${renderLeaderboardList(store.leaderboard)}
diff --git a/static/quiz.js b/static/quiz.js index 1fa138d..db563fc 100644 --- a/static/quiz.js +++ b/static/quiz.js @@ -314,15 +314,23 @@ function renderFinished(message) { function renderBoard(rows = []) { if (!rows || !rows.length) return `

No scores yet.

`; + // The server's student-facing top5 doesn't include student_id, so match + // on display name. Same-name collisions are rare in a single classroom + // session; if it ever happens both rows highlight, which still reads + // as "yours might be one of these" to the student. + const myName = store.me?.name; return `
    - ${rows.map((r) => ` -
  1. + ${rows.map((r) => { + const isYou = myName && r.name && r.name === myName; + return ` +
  2. ${r.rank} ${escapeText(r.name)} ${r.score}
    3. - `).join("")} + `; + }).join("")}
`; } diff --git a/static/style.css b/static/style.css index 2281b3f..ad6370c 100644 --- a/static/style.css +++ b/static/style.css @@ -48,9 +48,9 @@ --wrong-border: #7a221c; --wrong-bg: rgba(122, 34, 28, 0.08); - /* Top-3 medals — subtle, restrained */ + /* Top-3 medals — subtle, restrained, but readable across a hall */ --medal-gold: #a07a1f; - --medal-silver: #6f6f72; + --medal-silver: #595c66; --medal-bronze: #8a4a1f; --shadow-sm: 0 1px 0 rgba(20, 22, 28, 0.04); @@ -550,10 +550,18 @@ input:focus, textarea:focus, select:focus { width: 6px; height: 6px; border-radius: 999px; - background: var(--correct-border); + background: var(--muted-2); flex-shrink: 0; + transition: background 0.5s ease, box-shadow 0.5s ease; +} +.roster li.is-fresh .dot { + background: var(--correct-border); box-shadow: 0 0 0 2px color-mix(in srgb, var(--correct-border) 22%, transparent); } +.roster li.is-fresh:first-child .dot { + /* Newest-first emphasis — soft pulsing halo on the top row only. */ + animation: rosterDotPulse 2.2s ease-in-out infinite; +} .roster .who { display: grid; line-height: 1.25; } .roster .who b { font-weight: 500; font-size: 0.95rem; } .roster .who small { @@ -566,15 +574,22 @@ input:focus, textarea:focus, select:focus { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } } +@keyframes rosterDotPulse { + 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--correct-border) 22%, transparent); } + 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--correct-border) 12%, transparent); } +} -/* ---------- State CTA panel (lobby / finished) ---------- */ +/* ---------- State CTA panel (lobby / finished) ---------- + * The right column gets editorial weight here so the page doesn't read + * empty before the quiz starts (or after it ends). */ .state-cta { display: grid; gap: 14px; } .state-cta h2 { font-family: var(--font-display); - font-size: 1.5rem; - font-weight: 600; - letter-spacing: -0.01em; + font-size: clamp(1.6rem, 2.4vw, 2.1rem); + font-weight: 500; + line-height: 1.12; + letter-spacing: -0.014em; text-transform: none; color: var(--text); border-bottom: 0; @@ -588,7 +603,73 @@ input:focus, textarea:focus, select:focus { line-height: 1.55; max-width: 60ch; } -.state-cta .btn.big { justify-self: start; margin-top: 6px; } +.state-cta .cta-eyebrow { + font-family: var(--font-sans); + font-size: 0.7rem; + font-weight: 600; + letter-spacing: 0.22em; + text-transform: uppercase; + color: var(--muted); + margin: 0 0 -6px; + display: flex; + align-items: baseline; + gap: 10px; + max-width: none; +} +.state-cta .cta-num { + font-family: var(--font-mono); + font-weight: 500; + font-size: 0.72rem; + letter-spacing: 0; + color: var(--muted-2); +} +.state-cta .btn.big { justify-self: start; margin-top: 14px; } + +/* Inline numeric stats inside a CTA panel — gives the lobby/finished + * card visual mass without needing a hero illustration. Cap the strip + * width so it stays a coherent eye-block on a 1920px projector. */ +.cta-stats { + display: flex; + flex-wrap: wrap; + gap: 0; + margin: 14px 0 4px; + max-width: 580px; + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); +} +.cta-stat { + flex: 1 1 0; + min-width: 110px; + padding: 14px 18px; + border-right: 1px dotted var(--border); +} +.cta-stat:first-child { padding-left: 0; } +.cta-stat:last-child { border-right: 0; padding-right: 0; } +.cta-stat span { + display: block; + font-family: var(--font-sans); + font-size: 0.66rem; + font-weight: 600; + letter-spacing: 0.18em; + text-transform: uppercase; + color: var(--muted); +} +.cta-stat b { + display: block; + font-family: var(--font-mono); + font-size: 1.6rem; + font-weight: 500; + font-variant-numeric: tabular-nums; + letter-spacing: -0.02em; + margin-top: 6px; + color: var(--text); +} +.cta-stat b small { + font-size: 0.78rem; + margin-left: 2px; + color: var(--muted); + letter-spacing: 0; +} .action-row { display: flex; @@ -794,6 +875,12 @@ h2.question-text.small { padding-bottom: 6px; } .hist-summary b { color: var(--text); font-weight: 600; } +.hist-awaiting { + margin: 4px 0 0; + padding: 0; + font-style: italic; + color: var(--muted); +} .hist-rows { display: grid; gap: 6px; } .hist-row { display: grid; @@ -853,8 +940,10 @@ h2.question-text.small { grid-template-columns: 36px 1fr auto; gap: 14px; align-items: center; - padding: 10px 12px; + /* Reserve the 3px medal stripe space on every row so rank columns align. */ + padding: 10px 12px 10px 15px; border-radius: 0; + border-left: 3px solid transparent; border-bottom: 1px solid var(--border); position: relative; transition: background 0.18s ease; @@ -897,15 +986,11 @@ h2.question-text.small { letter-spacing: -0.01em; } -/* Top-3 medal treatment — restrained left-border accent */ -.leaderboard li:nth-child(1), -.leaderboard li:nth-child(2), -.leaderboard li:nth-child(3) { - padding-left: 18px; -} -.leaderboard li:nth-child(1) { border-left: 3px solid var(--medal-gold); background: color-mix(in srgb, var(--medal-gold) 6%, var(--surface)); } -.leaderboard li:nth-child(2) { border-left: 3px solid var(--medal-silver); background: color-mix(in srgb, var(--medal-silver) 4%, var(--surface)); } -.leaderboard li:nth-child(3) { border-left: 3px solid var(--medal-bronze); background: color-mix(in srgb, var(--medal-bronze) 5%, var(--surface)); } +/* Top-3 medal treatment — colored stripe + tinted plate. Stripe width is + * already reserved on every row, so rank columns stay aligned. */ +.leaderboard li:nth-child(1) { border-left-color: var(--medal-gold); background: color-mix(in srgb, var(--medal-gold) 9%, var(--surface)); } +.leaderboard li:nth-child(2) { border-left-color: var(--medal-silver); background: color-mix(in srgb, var(--medal-silver) 9%, var(--surface)); } +.leaderboard li:nth-child(3) { border-left-color: var(--medal-bronze); background: color-mix(in srgb, var(--medal-bronze) 9%, var(--surface)); } .leaderboard li:nth-child(1) .rank { color: var(--medal-gold); } .leaderboard li:nth-child(2) .rank { color: var(--medal-silver); } .leaderboard li:nth-child(3) .rank { color: var(--medal-bronze); } @@ -915,6 +1000,36 @@ h2.question-text.small { font-weight: 600; } +/* "That's me" highlight on the student leaderboard. Blue stripe + name + * recolour + small inline "you" tag below the name. The tag rides the + * existing grid row of .who so it never collides with the score. */ +.leaderboard li.is-you { + background: color-mix(in srgb, var(--primary) 10%, var(--surface)); + border-left-color: var(--primary); +} +.leaderboard li.is-you .who { gap: 1px; } +.leaderboard li.is-you .who b { color: var(--primary); font-weight: 600; } +.leaderboard li.is-you .who::after { + content: "you"; + font-family: var(--font-sans); + font-size: 0.58rem; + letter-spacing: 0.22em; + text-transform: uppercase; + color: var(--primary); + font-weight: 600; + opacity: 0.85; +} +.leaderboard li.is-you .score { color: var(--primary); } +.leaderboard li.is-you:nth-child(1), +.leaderboard li.is-you:nth-child(2), +.leaderboard li.is-you:nth-child(3) { + /* When the student IS on the podium, keep the medal stripe; brighten + * the row tint so they still read as "you". */ + background: + linear-gradient(90deg, color-mix(in srgb, var(--primary) 12%, transparent), color-mix(in srgb, var(--primary) 6%, transparent)), + var(--surface); +} + /* ---------- Student-side answer buttons ---------- */ .quiz-card { width: min(680px, 100%); padding: 28px 30px 32px; } @@ -1098,25 +1213,28 @@ h2.question-text.small { margin-top: 24px; } -/* ---------- Student-specific reveal trims ---------- */ +/* ---------- Student-specific reveal trims ---------- + * The "Your pick" tag sits as a thin top-edge ribbon so it can't collide + * with the count column on narrow phones. */ .options.student-reveal li.yours { position: relative; + padding-top: 22px; } -.options.student-reveal li.yours::after { +.options.student-reveal li.yours::before { content: "Your pick"; position: absolute; top: 4px; - right: 12px; + left: 16px; font-family: var(--font-sans); - font-size: 0.6rem; - letter-spacing: 0.18em; + font-size: 0.58rem; + letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); font-weight: 600; } -.options.student-reveal li.yours.correct::after { color: var(--correct-border); } -.options.student-reveal li.yours.wrong-pick::after { color: var(--wrong-border); } +.options.student-reveal li.yours.correct::before { color: var(--correct-border); } +.options.student-reveal li.yours.wrong-pick::before { color: var(--wrong-border); } /* ---------- Responsive: mobile student view ---------- */ @@ -1174,9 +1292,9 @@ h2.question-text.small { --wrong-border: #d36556; --wrong-bg: rgba(211, 101, 86, 0.10); - --medal-gold: #d8b06a; - --medal-silver: #a4a8b6; - --medal-bronze: #c98a5a; + --medal-gold: #e1bd72; + --medal-silver: #c2c6d3; + --medal-bronze: #d99165; --shadow-sm: 0 1px 0 rgba(0, 0, 0, 0.4); --shadow: 0 1px 0 rgba(0, 0, 0, 0.5), 0 16px 38px -22px rgba(0, 0, 0, 0.7);