feat: anti-cheat + presence panel + projector view
Refinement pass on top of the validated v1.2 base.
Hardening / quick fixes
- Caddyfile.tpl: CSP / HSTS / X-Frame / Referrer-Policy / Permissions-Policy,
1 MiB request body cap, X-Forwarded-For pass-through; stock-Caddy compatible.
- auth.py: STUDENT_MAX_AGE 1y -> 30d.
- bootstrap.sh: stage 5 prepends `git config --add safe.directory` so the
re-bootstrap path no longer 'detected dubious ownership' faults.
- admin.js: drop the misleading `closedPayload?.state || session.state`
shim; state derives from session only.
Anti-cheat
- New `student_events` audit table; new POST /api/session/{sid}/event for
blur / visibility_hidden / focus / visibility_visible. quiz.js debounces
events at 1.5s and uses sendBeacon for visibility_hidden so the event
survives a navigation. Counts surface in admin presence + CSV export.
- First-claim-wins on join: add_participant raises DuplicateStudentId on
PK violation; route returns 409 + records a duplicate_join audit event
with attempted name + IP + UA. Admin dashboard surfaces a per-row red
badge for hits on real participants and a top-of-page alert for orphan
attempts.
- DELETE /admin/api/students/{id} as the recovery hatch: clears the
participant + submissions, kicks active WS sockets so a stale cookie
cannot continue submitting. quiz.js surfaces the FastAPI detail message
in the join form so users see the 'already in use' guidance.
Presence panel
- New presence_update WS message; in-process presence map keyed on
student_id tracks ws_count + last_seen_ms. Admin dashboard renders
per-student rows: connected/idle/dropped dot, blur+hidden+duplicate
badges, 'answered current Q' tick, and a clear-student button.
Projector view (public, read-only)
- /projector/?sid=..., GET /api/session/{sid}/projector, WS
/ws/projector/{sid}. Single self-contained projector_state snapshot
pushed on every state change. Public leaderboard strips student_id;
QR rendered server-side as data: URL (CSP-compliant).
- Includes per-Q answer histogram, 8-bucket response-time distribution,
10-bucket score distribution.
- static/projector.{html,css,js}: editorial-broadside design — masthead,
registration crosses, conic-gradient countdown ring, SVG stepped-area
score distribution with median tick, leaderboard row-stagger. Inherits
light/dark tokens from style.css; honours prefers-reduced-motion. No
scroll at 1366x768 / 1920x1080 / 3440x1440.
Tests
- tests/test_anti_cheat.py: blur logging + CSV count, unknown-kind 422,
unauthenticated event 401, duplicate-join 409 + audit, admin
clear-student happy + 404, server-side submit lockout regression.
- tests/test_projector.py: snapshot shape, leaderboard student_id
redaction, WS push on state change, 404 for unknown sid, page redirect
when no sid.
- Existing tests updated for the new presence_update snapshot frame +
CSV header columns + first-claim-wins refusal of re-key.
57/57 pytest green; smoke-tested locally end-to-end.
This commit is contained in:
ameer
139
static/style.css
139
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) {
|
||||
|
||||
Reference in New Issue
Block a user