🎮 Player & Library — Design Audit
Superseded — 2026-07-24
P3’s prose-only unavailable state is superseded by Program Masterplan as of 2026-08-02: current source renders an icon, heading, explanatory copy and an optional filtered Builder CTA, Catalog and Subjects now inherit the public
--qw-*root, and explicit player mood palettes remain intentional. Player chrome, loading/retry behavior and the original theme/geometry measurements were not browser-rerun. Preserved as observed.
TL;DR
Player has the cleanest content-first card and the only real theme system (6 presentations) — but themes fork the same token names 6× instead of layering overrides on one base. Library/embeds introduce a third namespace (
--qwizz-*). Loading spinner now fixed (FE-8). Grade: A themes-intent · C token craft · B chrome-less · B- library.
- surface:
[quizwizz_quiz]player ·[quizwizz_library]/ subjects embeds - files:
qwizz-player.css·qwizz-player.js·qwizz-embeds.css·QuizEmbed.php - themes: default +
dark·retro·cyber·love·aqua
🧭 Rubric scores (1–5)
| Lens | Score | One-line |
|---|---|---|
| Visual hierarchy | 4 | Legend clamp 1.28–1.9rem/800; answers as big targets |
| IA / progressive disclosure | 4 | One question at a time; review after submit |
| Information scent | 3 | Library cards OK; empty catalog is flat |
| Chrome-less / content-first | 5 | max-width:780px;margin:auto card — best chrome-less surface |
| Hook paths & density | 4 | Play loop tight; theme choice is a hook |
| Visual weight & Gestalt | 4 | Card + progress + answers group cleanly |
| AR / rhythm | 4 | Clamp padding; responsive stack at 620px |
| Art direction | 5 | Six distinct moods; strongest AD in the product |
| Design-token discipline | 2 | 6 full redefinitions of --qw-ink/--qw-line/--qw-soft… |
| Affordances & signifiers | 4 | Answer labels as buttons; result states via data-result |
| Fitts / Hicks | 4 | Full-width answer rows; primary actions spacious |
| Hover-intent vs instant | 3 | Instant select; limited hover foreshadow |
| Escape hatches | 4 | renderFailure() + Try again + Retry-After |
| Micro-interactions / continuity | 4 | Progress bar transition; FE-8 spinner; reduced-motion guard |
🔬 Findings
| # | Finding | Sev | Evidence |
|---|---|---|---|
| P1 | Theme system re-declares full palettes (no base+override) | 🟠 | Six scopes in qwizz-player.css: default + `[data-theme=dark |
| P2 | Third token namespace on embeds | 🟠 | .qwizz-catalog,.qwizz-subjects{--qwizz-violet:#6d28d9;--qwizz-ink:#241c30;--qwizz-muted:#706778} |
| P3 | Library empty / unavailable state is low-scent | 🟡 | QuizEmbed::unavailable() → .qwizz-library__empty prose only; no CTA into Studio |
| P4 | Loading state now has spinner | ✅ | FE-8: .qwizz-player__loading::before spin + QuizEmbed.php class |
| P5 | Failure/retry already solid | ✅ | renderFailure() + Try again + Retry-After |
Theme palette map (art direction — keep)
| Theme | --qw-v | Mood |
|---|---|---|
| default | #6d28d9 | violet product |
| dark | #a78bfa | night |
| retro | #b83d2b | sepia paper |
| cyber | #f5d90a | neon on #0e0b1e |
| love | #c2185b | rose |
| aqua | #0e7490 | ocean |
🩹 Prioritized fixes
- 🟠 Refactor themes to base on
.qwizz-player+ sparse[data-theme]overrides - 🟠 Migrate embeds
--qwizz-*→--qw-*aliases - 🟡 Enrich unavailable/empty with CTA → Studio
- Keep theme moods; document as AD SSOT in tokens-palette
🔗 Anchors
- css:
qwizz-player.csstheme scopes · FE-8 loading block - embeds:
qwizz-embeds.css.qwizz-library-card - related: tokens-palette · patch-spec
- auditor: CSS inventory + prior live FE-8 proof + QuizEmbed source