Sleutel-states voor de drie post-game schermen: Quiz Free Result (5-min loop, celebratory), Oefentoets Rapport (cijfer + sterk/zwak), Examensim Rapport (examenrealisme + cooldown). De drie modi hebben dezelfde visuele DNA maar uiteenlopende emotionele toon — Quiz mag pop-en, Examensim moet sober zijn.
Een resultaatscherm is geen scoreboard — het is een overgang. Van "ik heb iets gedaan" naar "wat doe ik nu?" Voor 12-18 met examenstress is dat moment fragiel: te veel viering bij een matig resultaat voelt onecht; te weinig bij een sterk resultaat voelt zuinig. Onze drie schermen hebben daarom identieke architectuur (hero met cijfer/score → breakdown → cross-pijler-handoff → details) maar uiteenlopende toon: Quiz Free pop-t met confetti en Snaps-counter (5-min loop, pure dopamine), Oefentoets is feitelijk en pedagogisch (eindcijfer met sterk/zwak), Examensim is sober examenkamer-grijs met cooldown-card.
Drie ontwerpprincipes die door alle 10 states heen gaan: (1) fout = focus — antwoordoverzichten openen default op alleen-fout, niet chronologisch; (2) cross-pijler altijd zichtbaar — elke result-state heeft minstens één HandoffCard naar Leren of Plannen; (3) schaal toon met resultaat — een 27% en een 100% delen niet hetzelfde hero-component; bij low-scores verdwijnt confetti en verschuiven recommendations naar bovenaan.
Confetti bij ≥80%, geen confetti onder 60%. Snaps-counter-pop bij high tier; bij low tier alleen "+5 voor de poging". 12-18 ruikt fake.
Antwoordoverzicht opent op alleen-fout-modus. Bij Quiz: 4 fouten zichtbaar, "Toon alle 15"-knop is secundair. "Wat ging fout" is wat je wil weten — niet "wat ging goed (allemaal)".
Vijfde keer dezelfde quiz: score zichtbaar, Snaps op nul, helpende handoff naar nieuwe stof. Niet straffend, wel duidelijk.
Examensim opnieuw doen op dezelfde dag is pedagogisch nutteloos. Cooldown-card legt het uit, biedt alternatieven aan — voelt als hulp, niet als blokkade.
11 ontworpen states verdeeld over drie modi (canvas hieronder).
oefentoets-rapport.jsx). Standaard architectuur.examensim-rapport.jsx.examensim-rapport.jsx.Verplicht alleen voor Quiz Free Result (huidige mobile heeft compact horizontal hero + FilterPills). Oefentoets en Examensim zijn V1-nieuw — geen mobile-baseline.
| Onderdeel | Huidig (mobile) | Jij (web) | Waarom |
|---|---|---|---|
| Snaps/XP-feedback | Statische teller in compact-hero, vergelijkbaar gewicht als score-percentage | Geanimeerde counter-pop op aparte award-cards, met tier-gebaseerde +bedrag (perfect ×, high, medium, low) | Op web heb je ruimte voor sequence (score → cele-pulse → award-stack). Zelfde info, beter ritme. Plus: tier-scaling vermijdt dat 27% en 100% dezelfde +-celebratie krijgen. |
| Antwoord-filtering | FilterPills "alle / fout / gevlagd" | "Alleen fout + gevlagd" is default-aan; "Toon alle 15" als secundaire actie | Voor 12-18 is "wat ging fout" de éérste vraag. Filter-pills veronderstellen dat de gebruiker de filter-actie zelf maakt; vaak gebeurt dat niet. Defaulten op fout maakt de UI proactief pedagogisch. |
| Anti-farming | Niet aanwezig — speel zo vaak als je wilt, telkens dezelfde Snaps | First-class state vanaf 5e poging zelfde set: score zichtbaar, Snaps op nul met "Geen Snaps · je kent dit", handoff naar nieuwe stof prominent | Farming holt het Snaps-economie uit. Maar gewoon "geen Snaps meer" voelt straffend. Door het uit te leggen + alternatief aan te bieden wordt de blokkade educatief. |
| Low-score-architectuur | Identiek aan high-score (zelfde hero, zelfde CTA-volgorde) | Bij <30%: geen confetti, geen badge, Pulse-reframe-card, handoffs naar Leren boven antwoordoverzicht, primary CTA = "Eerst lezen, dan terug" | Een leeg compliment bij 27% voelt onecht. Door de architectuur ZELF mee te schalen met het resultaat ervaart de gebruiker de UI als attent, niet als generiek. |
| Quiz mascotte | Statische avatar in hero | Pulse-Lottie-animatie in hero (lopende glow), maar GEEN spraak-bubbel — die staat in een aparte Pulse-quote-card eronder | Mascotte + tekst-bubbel in één hero is druk; uit elkaar trekken geeft beide ruimte. Pulse blijft visueel aanwezig maar de quote (vaak het meest waardevol) is leesbaar. |
tier-prop ('perfect' / 'high' / 'medium' / 'low') die vier dingen tegelijk schaalt: (a) tint van de gradient — groen bij high, amber bij medium, neutraal grijs bij low; (b) confetti-presence — alleen ≥80%; (c) Snaps-bedrag — perfect 30, high 20, medium 10, low 5; (d) copy — "Alles goed!" / "Goed gedaan" / "Bijna" / "Oefenen aanbevolen". Bij low-tier (<30%) wijkt de architectuur verder af: geen confetti-component renderen, badge weglaten, handoffs boven antwoorden tonen. Eén component, vier verschijningsvormen die emotioneel kloppen.Snaps-multipliers schalen met inzet: Quiz Free 1× (max +30), Oefentoets 1.5× (+75 typisch), Examensim 2× (+200). Dat is bewust: hoe hoger de stake, hoe hoger de payoff. Maar het multipliers-mechanisme staat nooit centraal in de UI — Snaps-bedragen zijn altijd context, geen hoofdmoot. Het percentage / cijfer staat groot; Snaps zit in een award-chip rechts. Bij anti-farming en low-score states wordt dit letterlijk: Snaps gaan naar 0 of 5, en de UI verlegt de aandacht naar handoffs. Snaps motiveren, maar ze zijn nooit de échte reden om te oefenen — we behandelen ze ook zo.
Bij Quiz Free zijn rijen default collapsed (titel + status-badge + chevron) en uit te klappen naar jouw-antwoord + correct-antwoord. Uitzondering: rijen waar status="wrong" op een vraag waarbij Pulse aanvullende uitleg heeft, openen pre-expanded — dit zijn de zwaarste leer-momenten en horen dus standaard zichtbaar. Resultaat: een 11/15 quiz toont ~5 collapsed-correct-rijen + 1 expanded-wrong-rij — visueel asymmetrisch, maar dat asymmetrie is informatief: je oog gaat direct naar de uitgeklapte fout. De "Toon alle 15"-knop is altijd beschikbaar voor scanning.
↓ Sleutel-states canvas — sleep, klik om uit te vergroten ↓