/* polish/leren-herhaalsessie-frames.jsx Herhaal-runner — focus-flow voor 12 kaarten over 4 vakken. Twee frames in deze basis-run: - Kaart-flip-moment (3/12, antwoord-zijde, 4 grade-knoppen) - Sessie-einde-rapport (9/12 goed, +18 XP, +24 Snaps, streak 12 → 13) Sidebar blijft staan — gebruiker kan altijd uit de sessie via nav. */ const SESSIE_KAARTEN = [ { subject: 'biologie', source: 'Bio H3 — Cellen' }, { subject: 'engels', source: 'Engels U5 — Past Tenses' }, { subject: 'wiskunde', source: 'Wis H4 — Vergelijkingen' }, { subject: 'geschiedenis', source: 'Gesch H7 — Industrialisatie' }, ]; const HUIDIGE_KAART = { subject: 'biologie', source: 'Biologie voor jou · havo-3 · H3', front: 'Wat is mitose?', back: 'Een vorm van celdeling waarbij uit één moedercel twee identieke dochtercellen ontstaan.', note: 'Belangrijk: het DNA wordt eerst verdubbeld vóór de deling.', }; /* ─── FRAME 1 — Kaart-flip-moment ─────────────────────────── */ function FrameSessieKaart({ t }) { return ( } >
Geen druk — kies eerlijk hoe het ging. We plannen op basis daarvan wanneer je deze kaart weer ziet.
); } function SessieControls({ t }) { return (
Pauzeer Stop sessie
); } function SessieVoortgangsBalk({ t, idx, total, verdeling }) { return (
Kaart {idx} / {total} ~ {Math.max(1, Math.round((total - idx) * 0.6))} min resterend
{verdeling.map((v, i) => { const c = SUBJECTS[v.subject] || t.fgMute; const flexTotal = v.total; const fillFlex = v.done; return (
); })}
{verdeling.map((v, i) => { const c = SUBJECTS[v.subject] || t.fgMute; return (
{v.done} / {v.total}
); })}
); } /* ─── FRAME 2 — Sessie-einde-rapport ─────────────────────── */ function FrameSessieRapport({ t }) { return (
Terug naar Leren Nóg een rondje Naar Oefenen — toets-mini-quiz
); } function RapportHero({ t }) { const dark = t.mode === 'dark'; return (
Sessie afgerond

Klaar voor vandaag — netjes door 12 kaarten.

Drie kaarten zaten lastig — die zien we morgen weer. De rest mag nu even rusten.

); } function RapportStat({ t, icon, label, value, sub, accent }) { const dark = t.mode === 'dark'; const accentColor = accent === 'primary' ? t.primary : accent === 'gold' ? t.gold : t.fgDim; return (
{label}
{value}
{sub}
); } function WatHebJeGeleerdCard({ t }) { const onderwerpen = [ { subject: 'biologie', count: 5, topic: 'Mitose, organellen, osmose' }, { subject: 'engels', count: 4, topic: 'Past tenses & onregelmatige werkwoorden' }, { subject: 'wiskunde', count: 2, topic: 'Vergelijkingen oplossen' }, { subject: 'geschiedenis', count: 1, topic: 'Industriële Revolutie — start' }, ]; return (
Wat zat er in deze sessie?
{onderwerpen.map((o, i) => (
{o.topic} {o.count} kaart{o.count > 1 ? 'en' : ''}
))}
); } Object.assign(window, { FrameSessieKaart, FrameSessieRapport, FrameSessieFront, FrameSessiePostGrade, FrameSessiePauze, FrameSessieRapportMastered, }); /* ─── FRAME 6 — Sessie-rapport: hoofdstuk gemastered ───────── Speciale variant van het rapport. Deze sessie heeft het laatste subkopje van een hoofdstuk naar 4/4 mastery getild. Hero is pijler-blauw getint, mastery-delta-card vervangt 'wat hebben we gedaan', en de standaard CTA-rij wordt vervangen door een prominente cross-pijler HandoffCard naar Oefenen. ────────────────────────────────────────────────────────────── */ function FrameSessieRapportMastered({ t }) { return (
} hideArrow title="Klaar om te oefenen?" subtitle="Je beheerst de stof. In Oefenen ga je 'm toepassen op echte toetsvragen — daar leer je 'm écht vasthouden onder druk." >
Terug naar Leren Onderhoudsherhaling plannen
); } /* Hero-variant: pijler-blauw getinte achtergrond, kicker boven titel, grotere mascot, "HOOFDSTUK BEHEERST"-uppercase. */ function RapportHeroMastered({ t }) { const dark = t.mode === 'dark'; const blue = pillarColor('leren', dark); return (
Hoofdstuk beheerst

Je kent dit hoofdstuk!

De Gouden Eeuw — alle 4 subkopjes op mastery.

); } /* Mastery-delta: 4 subkopjes met before→after MasteryDots. Het laatste subkopje krijgt een groene check + delta — dat is wat deze sessie heeft opgeleverd. De andere drie zijn al langer mastered en worden subtieler getoond. */ function MasteryDeltaCard({ t }) { const dark = t.mode === 'dark'; const greenInk = dark ? '#22C55E' : '#15803D'; const subkopjes = [ { title: 'VOC en wereldhandel', before: 4, after: 4, deltaThisSession: false }, { title: 'Republiek der Zeven Provinciën', before: 4, after: 4, deltaThisSession: false }, { title: 'Rembrandt en de schilderkunst', before: 4, after: 4, deltaThisSession: false }, { title: 'Wetenschap en Spinoza', before: 3, after: 4, deltaThisSession: true }, ]; return (
Hoofdstuk-voortgang De Gouden Eeuw
{subkopjes.map((s, i) => { const muted = !s.deltaThisSession; return (
{s.title}
{s.deltaThisSession ? ( <> {s.before}/4 {s.after}/4 ) : ( {s.after}/4 )}
); })}
Pulse plant onderhouds-herhalingen — ongeveer 1× per week, 3 minuten.
); } /* Oefenen-pijler-kleur primary CTA, single-line, radius 10. */ function OefenenStartButton({ t }) { const dark = t.mode === 'dark'; const green = pillarColor('oefenen', dark); return ( ); } /* ─── FRAME 3 — Kaart-front (vraagzijde, kaart 5/12) ───────── Sam ziet alléén de vraag. Geen grade-knoppen, één primary CTA "Toon antwoord". Pulse moedigt aan om eerst zelf te formuleren. ────────────────────────────────────────────────────────────── */ function FrameSessieFront({ t }) { return ( } >
Neem even de tijd. Hardop zeggen helpt.
); } /* ─── FRAME 4 — Post-grade feedback ────────────────────────── Tussenstate na "Goed". Kaart krijgt subtiel groene tint, vinkje + "Goed gedaan — morgen weer". Pulse=happy. Voortgangsbalk is al bijgewerkt naar 6/12 (auto-advance impliceert volgende kaart). ────────────────────────────────────────────────────────────── */ function FrameSessiePostGrade({ t }) { const dark = t.mode === 'dark'; const greenTint = dark ? 'rgba(34,197,94,0.10)' : 'rgba(21,128,61,0.06)'; const greenBorder = dark ? 'rgba(34,197,94,0.32)' : 'rgba(21,128,61,0.28)'; const greenInk = dark ? '#22C55E' : '#15803D'; return ( } >
{/* Kaart met groen-getinte achtergrond */}
{HUIDIGE_KAART.source} Kaart 6 / 12
Goed gedaan — morgen weer
Mitose · genoteerd als 'Goed'.
Lekker bezig. Volgende kaart komt eraan. Volgende kaart…
); } function PulseSpinner({ color }) { return ( ); } /* ─── FRAME 5 — Vroege-stop modal ──────────────────────────── Modal-overlay binnen view. Achterliggende flow gedimd zichtbaar. Twee CTA's: Doorgaan (primary) / Pauzeren en stoppen (secondary). Geen Pulse-card IN modal — Pulse blijft op de gedimde flow erachter. ────────────────────────────────────────────────────────────── */ function FrameSessiePauze({ t }) { return ( } > {/* Achterliggende (gedimde) flow — zelfde als FrameSessieKaart */}
{/* Dim-overlay */}
{/* Modal */}

Sessie pauzeren?

Je hebt 6 van 12 kaarten gedaan. Je voortgang blijft bewaard — Pulse onthoudt waar je gebleven was.

Pauzeren en stoppen Doorgaan
); }