Brief 02 v3 · Quiz Play Engine · web · 9 spelers + 4 modus-shells

Eén ritme over negen vraagtypen — modus is chrome, niet content

V3 herschreven voor web/desktop (snapsnel.nl). Negen spelers landen onder één gedeelde HUD met 3-tier gametopia (altijd / conditioneel / on-demand). Toelichting altijd zichtbaar (gratis), hints progressief (25/50/75% kost), feedback inline (geen fullscreen overlays). Modus = chrome (kleur, badge, timer-zichtbaarheid) — content-mechaniek per vraagtype is identiek over Quiz/Oefentoets/Examensim. v3-fixes: Pulse heeft gele lightning-wings (placeholder, FE port full mascot), qtype-iconen overal, Oefentoets onmiskenbaar.

A · Concept-rationale

De vorige iteratie had drie problemen: HUD-overload (5 metrics per scherm — tijd, punten, streak, voortgang, highscore — bij elke vraag), fullscreen feedback-overlays (onderbrekend; kostte 1.2s per vraag), en versnipperde feedback-paradigma's (MultiField had eigen toast, TableFill had inline rood, MC had modal). V2 unificeert dit via vier principes:

Leidende principes

Eén ritme over 9 typen

Setup → vraag-card → controleer-CTA → inline-feedback → volgende. Identiek voor alle vraagtypen, zodat de leerling zich op de inhoud richt, niet op de UI.

HUD = wat je nu nodig hebt

3-tier: altijd (voortgang+punten), conditioneel (timer alleen Examensim/timed-quiz, streak alleen ≥3×, flag alleen Examensim), on-demand (hint-knop).

Subtiel viert luider

Inline AnimatedFeedback in plaats van fullscreen modal. Geen confetti per vraag — alleen op streak-milestones. "+10" rijst boven de punten-pil.

Modus = chrome, niet content

Quiz = vol gekleurd / Oefentoets = ingehouden / Examensim = donker + flag-icoon + geen feedback. Vraag-mechaniek hetzelfde.

Vraagtype-kleuren (uit color-definitions.ts)

Elk vraagtype heeft een eigen kleur + icoon. In V2 gebruikt: 4px stripe bovenaan de question-card + badge in HUD. Kleur is cue, geen decoratie — het bouwt herkenning op (begrippen = blauw, MC = groen, etc).

Begrippen10pt

Multiple Choice10pt

Context15pt

Invulvelden10pt

Koppelen15pt

Volgorde12pt

Afbeelding15pt

Tabel18pt

Multi-veld20pt

B · Sleutel-states (canvas hieronder)

De canvas toont in 4 secties: HUD-anatomie, 9 vraagtypen, modus-shells, Feynman-globaal.

1. HUD-anatomie · 1 frame

Anatomie-frame — toont alle HUD-componenten met annotaties: type-badge, voortgang+timer, points-pill (streak fused).

2. Vraagtypen · 9 frames + Feynman

Begrippen (correct-state) · MC (3 sub-states: kiezen / fout-met-uitleg / goed) · Koppelen (tap-to-pair, halverwege)
Volgorde (na controle, partial) · Invulvelden (na controle, partial) · Context (Pulse evaluatie + correct)
Afbeelding (single-pin V1) · Tabel (mid-input) · Multi-veld (na controle, partial)
Feynman-globaal (dual-rubric volledigheid+duidelijkheid) — als 10e speler, beschikbaar over alle topics.

3. Modus-shells · 3 frames

Quiz-shell — vol pulse-blue HUD, streak-pill zichtbaar, geen timer, geen flag.
Oefentoets-shell — zelfde HUD-density, oefentoets-modus-tag, optionele timer.
Examensim-shell — donker thema, navy progress, flag-knop links, geen feedback (auto-submit), top-banner "stilte aub".

4. Examensim Pauze · 1 frame

Vraag-overzicht-grid · 40 vragen als 10×4 raster · status-kleur per vraag (beantwoord/leeg/gevlagd/huidig) · klik om te springen · timer loopt door.

C · Deviations vs huidige Snapsnelds

Bewuste afwijkingen, met reden. V1 conformity (Pulse-blue, Fredoka/Nunito, sidebar-rail, mode-badges) niet hier opgesomd.

Onderdeel	Huidig (referentie)	Jij (voorgesteld)	Waarom
HUD-density	5 metrics altijd zichtbaar (tijd, punten, streak, voortgang, highscore)	3-tier: altijd / conditioneel / on-demand. Highscore weg uit in-quiz, streak gefuseerd in points-pill.	Cognitieve load minus 40% op kleine schermen; focus op vraag
Feedback-paradigma	Fullscreen overlay 1.2s per vraag	Inline AnimatedFeedback (binnen question-card) · alle 9 typen unified	Behoudt context; sneller doorklikken; één paradigma over alle typen
Hint-mechaniek	Per-vraagtype eigen logica (sommige geen, MC heeft "50/50")	Unified 3-tier hint-systeem (25%/50%/75% punt-aftrek). Toelichting altijd gratis zichtbaar boven het invoerveld.	Voorspelbare cost; toelichting (vakcontext) is gratis omdat het scaffolding is, geen oplossing
Koppelen-interactie	Drag-and-drop (touch-only)	Tap-to-pair (mobile-first werkt ook op web). Eerst tik links → activeert; dan tik rechts → koppel.	Werkt over devices; minder error-prone bij scrollen; matched-paren krijgen typekleur
Examensim-flag	Niet aanwezig (geen vlag-mechaniek)	Flag-knop linksboven (alleen Examensim) + Pauze-grid met flag-status	Examen-realisme: studenten moeten kunnen markeren-en-terugkomen, net als op echte CITO/CSE
Streak in HUD	Aparte chip naast points	Gefuseerd in points-pill (alleen ≥3× zichtbaar)	Eén "score-object" ipv twee; streak ≤2 is ruis, niet motivatie
Beeldvraag (10e type)	Niet aanwezig in BE	V1: single-tap-pin met crosshair. Gepind = teal-marker, klik opnieuw = verzet. Backend-flag indien type nog niet ondersteund.	Greenfield kans; aansluiten op anatomie/aardrijkskunde/biologie waar visueel pinpointen kerncompetentie is

v3-resolutions (Robin's review)

1 · Pulse mascot — VOLLEDIGE PORT (optie B).
Geen placeholder meer. pulse-mascot.jsx is de 1:1 port van PulseMascot.tsx uit het design system (697 regels, 24 moods, 10 variants, 4 sizes, 7 eye-animations). In-quiz canoniek op variant="strike"; mood per state: start/idle → neutral, correct-streak → excited, fout → encouraging-warm (nooit sad per DS-richtlijn "never shame"), feynman-evaluating → thinking, finish-good → proud, examensim/focus → focused. Animaties uit voor frame-stabiliteit; productie zet animated=true. Volledig merkconform incl. gradient-body en lightning-accents uit DS-tokens.

2 · Qtype-iconen toegepast — alle 3 plekken.
Lucide-icons (pin: 0.469.0) op (a) Sectie-A vraagtype-grid bovenin de brief — 30×30 icon-badge met qtype-tinted background (10% opacity) + qtype-color stroke + 17px lucide-icoon, (b) Type-badge in HUD — pill met 13px icoon + label, beide in qtype-color, op tinted background, (c) Question-card linksboven — 32×32 icon-badge met 1px qtype-color border + tinted bg + 17px icoon, naast de bestaande 4px stripe. Mapping conform color-definitions.ts: BookOpen / CheckSquare / FileText / PenTool / Link2 / ListOrdered / Image / Table2 / ClipboardList.

3 · Oefentoets-shell onmiskenbaar binnen 1 sec.
Subtiele groene top-banner (#16A34A op 10% bg) met graduation-cap-icoon: "Oefentoets · score-tracking actief · zelfde HUD". Daarnaast: progress-bar in oefentoets-groen gradient (i.p.v. Pulse-blue), timer in groene accent. Examensim houdt z'n eigen sterke navy banner ("STILTE AUB · GEEN FEEDBACK"); Quiz blijft volledig Pulse-blue zonder banner. De drie shells nu vergelijkbaar zonder URL-check.

4 · Image-based — placeholder-disclaimer.
De cel-illustratie in de Afbeelding-player (groene oval + paarse celkern + 4 organel-cirkels in qtype-kleuren) is schematische placeholder, leesbaar als concept maar niet productie-grade. Productie-versie: echte biologie-illustraties of foto's via content-team / database. Designer levert hier alleen het frame, single-tap-pin-interactie (teal-marker, klik opnieuw = verzet), en feedback-state. Backend-flag indien IMAGE_BASED nog niet beschikbaar is in vraag-API.

HUD-density: voor → na

Voor — 5 metrics

Vraagteller (3 / 20)
Punten
Streak (altijd zichtbaar)
Timer (altijd zichtbaar)
Highscore (in-quiz)

Na — 2 altijd + 3 conditioneel

Vraagteller + voortgangsbalk · ALTIJD
Points-pill (streak fused, ≥3×) · ALTIJD
Timer · alleen Examensim/timed-quiz
Flag-knop · alleen Examensim
Hint-knop · on-demand (klik om te tonen)

D · Decisions (challenge-antwoord op metrics-discussie)

Per metric: behouden, fuseren, conditioneel maken, of weg.

1 · Voortgang (vraag X / Y) — BEHOUDEN, ALTIJD ZICHTBAAR.
Cognitief anker. Zonder weet je niet hoe ver je bent. Wel: één regel "Vraag 5 van 20" + dunne voortgangsbalk; geen percentage-getal apart.

2 · Punten — BEHOUDEN, +Δ animatie.
Points-pill rechtsboven, vol Pulse-blue. Bij goed antwoord verschijnt +10 als groene float-up boven de pil (0.6s ease-out). Levert micro-reward zonder fullscreen-celebration.

3 · Streak — FUSEREN IN POINTS-PILL, conditioneel ≥3×.
Onder 3× is een streak ruis (psychologisch: je bouwt 'm pas vanaf 3 op). Vanaf 3× verschijnt het vlam-icoon links in de pil, gescheiden door een verticale lijn: 🔥 3× | 64 punten. Eén score-object, niet twee.

4 · Highscore — WEG UIT IN-QUIZ.
Highscore is review-context, niet play-context. Hoort op de result-screen ("Nieuw record!" als je 'm verbreekt). In-quiz is het stress-trigger zonder waarde — je weet niet of je 'm gaat halen tot het einde.

5 · Timer — CONDITIONEEL ZICHTBAAR.
Quiz default = geen timer (oefenen, geen druk). Oefentoets = timer alleen als gebruiker 'm aanzet. Examensim = timer altijd, navy, kleurt rood <1 min. Klok-icoon links van de cijfers.

6 · Pause — VERPLAATST naar Exit-modal (X linksboven).
Geen aparte pause-knop in HUD. Klik X → modal "Stoppen?" met opties: Doorgaan / Opslaan & later / Stoppen zonder opslaan. In Examensim opent X de Pauze-grid (sectie 4 op canvas). Bespaart HUD-real-estate en voorkomt verwarring "wat is pause vs stop?".

v3 finalising — geen nieuwe open vragen

Alle 4 P0/P1-blockers uit v2-review opgelost (Pulse-mascot, qtype-iconen, oefentoets-cue, image-based disclaimer). Open vragen uit v2 stonden onder cap voor v3-scope; gerouteerd naar implementatie-overleg met BE/content-team waar relevant. Klaar voor handoff.