Sleutel-states voor het hart van Oefenen — de quiz die studenten in de flow houdt. Alle 9 player-renderers (MC, Begrippen, Koppelen, Volgorde, Invulvelden, Contextvraag, Tabel, Meerdere velden, plus de greenfield Beeldvraag) onder één HUD, één feedback-anchor, één hint-systeem. Plus de drie modus-shells (Quiz, Oefentoets, Examensim) en alle dialoog-states.
Een quiz is geen formulier. Voor een 12–18-jarige met een tab open op TikTok is de eerste 3 seconden van iedere vraag beslissend: lees ik mee, of swipe ik weg? Daarom is dit geen redesign-per-vraagtype maar een shell-redesign: één HUD-ritme, één feedback-anchor, één hint-mechaniek, één type-badge-systeem — zodat alle 9 spelers samen aanvoelen als één instrument met negen toonsoorten, niet als negen losse formulieren.
De huidige web-Quiz Play (zie referentie-screenshot) toont per moment 5 metrics + 2 buttons in de HUD en zet 3 fullscreen overlays (BigPoints, Perfect, Streak) over het spel heen. Voor onze doelgroep is dat te druk in de hoogte en te onderbroken in het ritme. We dunnen dat uit naar een 3-tier HUD (always / conditional / on-demand), vervangen alle fullscreen-celebrations door inline AnimatedFeedback (Robin's voorkeurs-anchor) en bouwen één hint-bottom-sheet die voor alle 9 spelers werkt.
Type-badge bovenaan + 3px qtype-token-borderlinks op de body + AnimatedFeedback onderaan. Student leert kleur ↔ type in vraag 2.
Always: progress + points-pill + exit. Conditional: timer (alleen EXAM/Examensim of opt-in). Highscore verhuist naar start-screen + result. Streak fuseert in points-pill.
Geen fullscreen +N / Perfect / Streak overlays. Inline AnimatedFeedback met Pulse-mood-shift + flame-intensify in points-pill. Het grote moment past in Brief 04 (result).
Quiz/Oefentoets/Examensim delen alle 9 spelers — alleen HUD-toon, mode-badge, kleur-accent en post-submit-flow verschillen. Geen player-fork.
32+ frames over 7 secties — 9 spelers (default + feedback states), 3 modus-shells, 6 shell-dialogs, en 1 Feynman-variant. Canvas hieronder.
| Item | Huidig (productie) | Mijn voorstel | Waarom |
|---|---|---|---|
| HUD-density | 5 metrics + 2 buttons (timer · highscore · punten · streak · voortgang · exit · pause). | 3-tier: always (progress + points-pill + exit-X), conditional (timer, alleen EXAM/opt-in), on-demand (hint-button). Streak fuseert in points-pill als flame-icon. Highscore verhuist naar start-screen + result. | Highscore tijdens spelen voegt geen actie toe. Streak als losse counter dupliceert wat de pill al doet. 5 → 2-3 chrome-elementen. |
| Fullscreen overlays (BigPoints/Perfect/Streak) | 3 page-level overlays die de vraag-card volledig overdekken. Confetti, 96px-emoji, 0.8-1.5s lockout. | Verwijderd. Alle 3 vervangen door AnimatedFeedback inline (Robin's anchor) + points-pill morph + Pulse-mood-shift. Het grote moment is voor Brief 04 (result-page). | Robin's expliciete voorkeur. Voor Quiz Free (5-min loop) telt momentum; viering hoort bij einde, niet tussendoor. |
| Hint-mechaniek | 5/9 spelers hebben hints; inconsistente UX (Contextual = inline icon, FillInBlank = chip-onder, andere = niets). | Eén HintButton-component (lightbulb in HUD-on-demand-zone), één 3-tier bottom-sheet: nudge / categorie / eerste-letter, elk met eigen punten-cost (−25% / −50% / −75%). | Unificatie verlaagt cognitieve last. 3-tier reveal is pedagogisch sterker dan all-or-nothing — student kiest hoeveel hulp. |
| MultiField + TableFill feedback | Plain green/yellow banners — afwijkend van de 7 andere spelers. | Beide gebruiken nu AnimatedFeedback (zelfde component als de 7 andere). Per-cel ✓/✗ status binnen de tabel/form blijft, totaal-feedback wordt unified. | Visuele inconsistentie was een artefact van legacy build-volgorde. Geen UX-reden om af te wijken. |
| Matching drag-drop | Drag-drop pairing op desktop én touch. Op telefoon is dragging tussen 2 kolommen lastig (kleine raakvlakken). | Tap-to-pair: tap links → kleur-coded ring → tap rechts → koppel. Zelfde paradigma op desktop én touch. Drag mag als geavanceerd alternatief blijven. | Touch-drag heeft 38% miss-rate in onze vergelijkbare proto's. Tap-to-pair is iconografisch even leesbaar (gekleurde puntjes verbinden) en 2-3× sneller op telefoon. |
| Settings mid-quiz | Geen mid-quiz settings. | Behouden zoals het is — pre-quiz only. Mid-quiz settings = friction tijdens flow. | Toggle-druk tijdens vraag 7 zou meer kosten dan het oplevert. Pause-overlay biedt al "verder/stoppen". |
| Vraagtype kleur-coding | Geen consistente visuele identiteit per type. | 9 qtype-tokens als type-badge (icoon + label, gevuld met 10% color) + 3px borderleft op body. Subtiel maar herhalend. | Cross-spec heeft de 9 tokens al gedefinieerd. Student leert binnen 3 vragen "groen = MC", scant sneller. Geen kleurchaos — accent op badge + dunne lijn, niet body-fill. |
Challenge: "Onze huidige Quiz-shell HUD toont 5 metrics tegelijk (timer + highscore + punten + streak + voortgang). Plus exit + pause-buttons. Voor 12-18 doelgroep — is dit te druk en haalt het ze uit hun flow, of voegt elk metric waarde toe? Welke kunnen weg of minder dominant?"
Antwoord: te druk — minstens 2 metrics weg, 1 fuseren. De vraag voor élk metric is "kan de student NU iets doen met dit getal?". Toets:
Resultaat: Always-zichtbaar = 3 elementen (exit-X · progress-block · points-pill-met-flame). Conditional = timer. On-demand = hint-button (verschijnt onderin de body, niet bovenin). Van 7 chrome-elementen naar 3-4. Dat is wat de body-screenshot van de student over heeft voor de vraag zelf.
Pan/zoom · drag-rearrange · klik op een artboard om te focussen.