/* prototype/views/review.jsx LerenReviewView — stateful spaced-repetition session flow. 5 phases: front → back → post-grade → paused → rapport SRS-state: grade beïnvloedt post-grade messaging, kaart-volgorde en sessie-rapport. */ (function () { const { useState, useEffect, useRef } = React; /* ─── Mock card data (met difficulty + lastSeen) ─────────── */ const BASE_CARDS = [ { id: 'c1', 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: 'Het DNA wordt eerst verdubbeld vóór de deling.', difficulty: 2, lastSeenDaysAgo: 3 }, { id: 'c2', subject: 'biologie', source: 'Biologie voor jou · havo-3 · H3', front: 'Wat is meiose?', back: 'Een speciale vorm van celdeling die geslachtscellen produceert; halveert het aantal chromosomen.', note: null, difficulty: 3, lastSeenDaysAgo: 5 }, { id: 'c3', subject: 'biologie', source: 'Biologie voor jou · havo-3 · H3', front: 'Wat is osmose?', back: 'Diffusie van water door een semipermeabel membraan, van lage naar hoge opgeloste-stof-concentratie.', note: null, difficulty: 1, lastSeenDaysAgo: 7 }, { id: 'c4', subject: 'biologie', source: 'Biologie voor jou · havo-3 · H3', front: 'Verschil plant- vs diercel?', back: 'Plantencellen hebben celwand, bladgroenkorrels en vacuole. Dierlijke cellen hebben een centriool.', note: null, difficulty: 2, lastSeenDaysAgo: 2 }, { id: 'c5', subject: 'biologie', source: 'Biologie voor jou · havo-3 · H3', front: 'Wat doet een ribosoom?', back: 'Eiwitten aanmaken op basis van instructies van het DNA.', note: null, difficulty: 1, lastSeenDaysAgo: 1 }, { id: 'c6', subject: 'engels', source: 'Stepping Stones · U5', front: 'Past perfect: vorm', back: 'had + voltooid deelwoord — bv. "had eaten", "had walked"', note: null, difficulty: 2, lastSeenDaysAgo: 4 }, { id: 'c7', subject: 'engels', source: 'Stepping Stones · U5', front: '"I had already left" — wat drukt dit uit?', back: 'Een actie die afgerond was vóór een ander verleden moment.', note: null, difficulty: 3, lastSeenDaysAgo: 6 }, { id: 'c8', subject: 'engels', source: 'Stepping Stones · U5', front: 'Irregular verb: "go"', back: 'go / went / gone', note: null, difficulty: 1, lastSeenDaysAgo: 1 }, { id: 'c9', subject: 'engels', source: 'Stepping Stones · U5', front: 'Irregular verb: "see"', back: 'see / saw / seen', note: null, difficulty: 1, lastSeenDaysAgo: 2 }, { id: 'c10', subject: 'wiskunde', source: 'Getal & Ruimte · H4', front: 'Wat is een asymptoot?', back: 'Een lijn die de grafiek van een functie nadert, maar niet raakt of snijdt.', note: null, difficulty: 2, lastSeenDaysAgo: 3 }, { id: 'c11', subject: 'wiskunde', source: 'Getal & Ruimte · H4', front: 'Kwadratische formule abc', back: 'x = (−b ± √(b² − 4ac)) / 2a', note: null, difficulty: 3, lastSeenDaysAgo: 8 }, { id: 'c12', subject: 'geschiedenis', source: 'Geschiedeniswerkplaats · H7', front: 'Wanneer begon de Industriële Revolutie?', back: 'Circa 1760 in Engeland, door stoomkracht en mechanisering van de textielindustrie.', note: null, difficulty: 2, lastSeenDaysAgo: 5 }, ]; const VERDELING_TEMPLATE = [ { subject: 'biologie', total: 5 }, { subject: 'engels', total: 4 }, { subject: 'wiskunde', total: 2 }, { subject: 'geschiedenis', total: 1 }, ]; function buildVerdeling(cardIdx) { let remaining = cardIdx; return VERDELING_TEMPLATE.map(v => { const done = Math.min(remaining, v.total); remaining -= done; return { ...v, done }; }); } /* ─── SRS helper: next review date per grade ─────────────── */ function nextReviewFor(grade, baseDate) { const d = baseDate ? new Date(baseDate) : new Date(); const pad = n => String(n).padStart(2, '0'); const fmt = dt => `${pad(dt.getDate())}-${pad(dt.getMonth() + 1)}`; const addDays = n => { const r = new Date(d); r.setDate(r.getDate() + n); return r; }; switch (grade) { case 'vergeten': return { label: 'nog deze sessie', date: null, days: 0 }; case 'moeilijk': return { label: 'vanavond', date: null, days: 0 }; case 'goed': return { label: 'morgen', date: fmt(addDays(1)), days: 1 }; case 'makkelijk': return { label: `over 4 dagen`, date: fmt(addDays(4)), days: 4 }; default: return { label: 'morgen', date: fmt(addDays(1)), days: 1 }; } } /* ─── PulseSpinner ───────────────────────────────────────── */ function PulseSpinner({ color }) { return ( ); } /* ─── SessieVoortgangsBalk (with recovery indicator) ────── */ function SessieVoortgangsBalk({ t, idx, total, verdeling, recoveryCount }) { return (
Kaart {idx} / {total} {recoveryCount > 0 && ( {recoveryCount} kaart{recoveryCount > 1 ? 'en komen' : ' komt'} nog terug )} ~ {Math.max(1, Math.round((total - idx) * 0.6))} min resterend
{verdeling.map((v, i) => { const c = (window.SUBJECTS && window.SUBJECTS[v.subject]) || t.fgMute; return (
); })}
{verdeling.map((v, i) => { const c = (window.SUBJECTS && window.SUBJECTS[v.subject]) || t.fgMute; return (
{v.done} / {v.total}
); })}
); } /* ─── Phase: Front ───────────────────────────────────────── */ function PhaseFront({ t, card, cardIdx, totalCards, verdeling, recoveryCount, onShowAnswer, onPause }) { return (
Toon antwoord Probeer eerst zelf het antwoord te formuleren.
Neem even de tijd. Hardop zeggen helpt.
); } /* ─── Phase: Back (grade) ────────────────────────────────── */ function PhaseBack({ t, card, cardIdx, totalCards, verdeling, recoveryCount, onGrade, onPause }) { return (
Geen druk — kies eerlijk hoe het ging. We plannen op basis hiervan wanneer je deze kaart weer ziet.
); } /* ─── SRS feedback illustrations per grade ───────────────── */ function SrsFeedback({ t, grade, card }) { const dark = t.mode === 'dark'; const now = new Date(); const next = nextReviewFor(grade, now); const timeStr = (() => { const h = now.getHours(); const evening = h < 18 ? '19:00' : '21:00'; if (grade === 'moeilijk') return `vanavond rond ${evening}`; if (grade === 'goed') return `morgen rond 16:00`; if (grade === 'makkelijk') return `over 4 dagen (${next.date})`; return null; })(); if (grade === 'vergeten') { return (
{/* Mini card-stack illustratie */}
{[2, 1, 0].map(i => (
))}
Deze kaart komt later in deze sessie nog een keer terug.
); } if (grade === 'moeilijk') { return (
We zien deze kaart {timeStr} opnieuw.
); } if (grade === 'goed') { return (
Volgende keer: {timeStr}.
); } if (grade === 'makkelijk') { const pad = n => String(n).padStart(2, '0'); const today = new Date(); const days = Array.from({ length: 7 }, (_, i) => { const d = new Date(today); d.setDate(d.getDate() + i); return { label: ['zo','ma','di','wo','do','vr','za'][d.getDay()], isTarget: i === 4 }; }); return (
{/* Mini kalender */}
week
{days.map((d, i) => (
{d.label}
))}
Volgende keer: {timeStr}.
); } return null; } /* ─── Phase: Post-grade ──────────────────────────────────── */ function PhasePostGrade({ t, card, cardIdx, totalCards, gradeChoice, verdeling, recoveryCount }) { 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'; const gradeLabels = { vergeten: 'Vergeten', moeilijk: 'Moeilijk', goed: 'Goed gedaan', makkelijk: 'Makkelijk — toptijmen!', }; return (
{card.source} Kaart {cardIdx} / {totalCards}
{gradeLabels[gradeChoice] || 'Goed gedaan'}
{card.front.length > 40 ? card.front.slice(0, 40) + '…' : card.front}
{/* SRS-differentiated scheduling feedback */} {gradeChoice && }
{gradeChoice === 'vergeten' ? 'Geen zorgen — we oefenen hem nog een keer.' : gradeChoice === 'moeilijk' ? 'Goed eerlijk zijn! Vanavond nog even herhalen.' : 'Lekker bezig. Volgende kaart komt eraan.'} Volgende kaart…
); } /* ─── Phase: Paused (modal overlay) ─────────────────────── */ function PhasePaused({ t, cardIdx, totalCards, verdeling, recoveryCount, card, onResume, onStop }) { return (

Sessie pauzeren?

Je hebt {cardIdx - 1} van {totalCards} kaarten gedaan. Je voortgang blijft bewaard — Pulse onthoudt waar je gebleven was.

Pauzeren en stoppen Doorgaan
); } /* ─── Rapport: morgen-weer section ──────────────────────── */ function MorgenWeerSection({ t, gradeLog, cards }) { const dark = t.mode === 'dark'; const morgenCards = Object.entries(gradeLog) .filter(([, g]) => g === 'moeilijk' || g === 'vergeten') .map(([id, grade]) => ({ ...cards.find(c => c.id === id), grade })) .filter(c => c.front); if (morgenCards.length === 0) return null; return (
Wat zien we morgen weer?
{morgenCards.map((c, i) => { const next = nextReviewFor(c.grade, new Date()); const isVergeten = c.grade === 'vergeten'; const accent = isVergeten ? (dark ? '#F87171' : '#DC2626') : (dark ? '#FBBF24' : '#B45309'); return (
{c.front.length > 44 ? c.front.slice(0, 44) + '…' : c.front} {isVergeten ? 'hersessie vandaag' : next.label}
); })}
); } /* ─── Rapport: week-calendar section ────────────────────── */ function WeekCalendarSection({ t, gradeLog, cards }) { const dark = t.mode === 'dark'; const today = new Date(); // Build days 0..6 with dot-counts per grade const dayBuckets = Array.from({ length: 7 }, (_, i) => { const d = new Date(today); d.setDate(d.getDate() + i); return { label: ['Zo','Ma','Di','Wo','Do','Vr','Za'][d.getDay()], dateNum: d.getDate(), isToday: i === 0, dots: [], }; }); Object.entries(gradeLog).forEach(([id, grade]) => { const card = cards.find(c => c.id === id); if (!card) return; const next = nextReviewFor(grade, today); if (next.days >= 0 && next.days < 7) { dayBuckets[next.days].dots.push(card.subject); } }); const subjectColor = s => (window.SUBJECTS && window.SUBJECTS[s]) || '#94A3B8'; return (
Wat verwachten we deze week?
{dayBuckets.map((day, i) => (
{day.label} {day.dateNum} {day.dots.length > 0 ? (
{day.dots.slice(0, 4).map((s, j) => ( ))}
) : ( )}
))}
); } /* ─── Mastery-delta-card (variant B only) ───────────────── */ function MasteryDeltaCard({ t }) { const dark = t.mode === 'dark'; const subkopjes = [ { subject: 'biologie', label: 'Celdeling — mitose & meiose', from: 3, to: 4 }, { subject: 'biologie', label: 'Celstructuren & organellen', from: 3, to: 4 }, { subject: 'biologie', label: 'Transport — osmose & diffusie', from: 3, to: 4 }, { subject: 'biologie', label: 'Plant- vs dierlijke cel', from: 3, to: 4 }, ]; const green = dark ? '#22C55E' : '#15803D'; return (
Hoofdstuk-voortgang
{subkopjes.map((s, i) => (
{s.label} {s.from}/4 → {s.to}/4 ✓
))}
Pulse plant onderhouds-herhalingen — ongeveer 1× per week, 3 minuten.
); } /* ─── Phase: Rapport ─────────────────────────────────────── */ function PhaseRapport({ t, totalCards, gradeLog, cards, onBack, onAgain, onOefenen, chapterMastered }) { const dark = t.mode === 'dark'; const [bounceReady, setBounceReady] = useState(false); useEffect(() => { setBounceReady(true); }, []); const grades = Object.values(gradeLog); const goedCount = grades.filter(g => g === 'goed' || g === 'makkelijk').length; const moeiteCount = grades.filter(g => g === 'vergeten' || g === 'moeilijk').length; const displayedTotal = Math.max(totalCards, grades.length); 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' }, ]; const pillarBlue = dark ? '#00B4D8' : '#0096C7'; const oefenenGreen = dark ? '#22C55E' : '#15803D'; /* ── Variant B — Hoofdstuk gemastered ── */ if (chapterMastered) { const heroBg = dark ? 'rgba(0,180,216,0.08)' : 'rgba(0,150,199,0.06)'; const heroBorder = dark ? 'rgba(0,180,216,0.22)' : 'rgba(0,150,199,0.18)'; const masteredStats = [ { icon: 'check-circle', label: 'Vlot gekend', value: '12 / 12', sub: '100% — perfect ritme', accent: null }, { icon: 'clock', label: 'Tijd', value: '8 min', sub: 'gemiddeld 40 sec per kaart', accent: null }, { icon: 'zap', label: 'XP verdiend', value: '+45 XP', sub: 'level 7 · 136 / 272 naar level 8', accent: 'primary' }, { icon: 'sparkles', label: 'Snaps', value: '+75 Snaps', sub: 'incl. mastery-bonus · streak 12 → 13', accent: 'gold' }, ]; return (
{/* Hero — mastered */}
HOOFDSTUK BEHEERST

Je kent dit hoofdstuk!

De Gouden Eeuw — alle 4 subkopjes op mastery.

{/* 4-stat grid — mastered values */}
{masteredStats.map((stat, i) => { const accentColor = stat.accent === 'primary' ? t.primary : stat.accent === 'gold' ? t.gold : t.fgDim; return (
{stat.label}
{stat.value}
{stat.sub}
); })}
{/* Mastery-delta-card */} {/* HandoffCard prominent */} } hideArrow > {/* Secondary ghost row */}
Terug naar Leren { /* log */ }}> Onderhoudsherhaling plannen
); } /* ── Variant A — Standaard ── */ return (
{/* Hero */}
Sessie afgerond

Klaar voor vandaag — netjes door {displayedTotal} kaarten.

{moeiteCount > 0 ? `${moeiteCount} kaart${moeiteCount > 1 ? 'en zaten' : ' zat'} lastig — die zien we snel terug. De rest mag nu even rusten.` : 'Alles vlot gegaan — deze kaarten hoeven een tijdje niet terug.'}

{/* 4-stat grid */}
{[ { icon: 'check-circle', label: 'Vlot gekend', value: `${goedCount} / ${displayedTotal}`, sub: `${moeiteCount} snel terug`, accent: null }, { icon: 'clock', label: 'Tijd', value: '8 min', sub: 'gemiddeld 40 sec per kaart', accent: null }, { icon: 'zap', label: 'XP verdiend', value: '+18 XP', sub: 'level 7 · 91 / 272 naar level 8', accent: 'primary' }, { icon: 'sparkles', label: 'Snaps', value: '+24 Snaps', sub: 'totaal 1.264 · streak 12 → 13', accent: 'gold' }, ].map((stat, i) => { const accentColor = stat.accent === 'primary' ? t.primary : stat.accent === 'gold' ? t.gold : t.fgDim; return (
{stat.label}
{stat.value}
{stat.sub}
); })}
{/* Wat zat er in */}
Wat zat er in deze sessie?
{onderwerpen.map((o, i) => (
{o.topic} {o.count} kaart{o.count > 1 ? 'en' : ''}
))}
{/* Morgen weer — alleen als er moeilijke/vergeten kaarten zijn */} {/* Week-overzicht */} {/* CTA row */}
Terug naar Leren Nóg een rondje Naar Oefenen — toets-mini-quiz
); } /* ─── LerenReviewView ────────────────────────────────────── */ function LerenReviewView({ t, navigate, reviewCards }) { const baseCards = (reviewCards && reviewCards.length > 0) ? reviewCards.map((c, i) => ({ ...BASE_CARDS[i % BASE_CARDS.length], ...c })) : BASE_CARDS; // Session queue: starts as baseCards; vergeten-cards get appended at end const [sessionQueue, setSessionQueue] = useState(() => baseCards.map(c => ({ ...c }))); const [cardIdx, setCardIdx] = useState(0); const [phase, setPhase] = useState('front'); const [gradeChoice, setGradeChoice] = useState(null); // Map for rapport const [gradeLog, setGradeLog] = useState({}); const prevPhaseRef = useRef('front'); // Chapter mastered state — auto-derived at session end; dev-toggle available in rapport const [chapterMastered, setChapterMastered] = useState(false); const totalCards = sessionQueue.length; const currentCard = sessionQueue[cardIdx] || sessionQueue[0]; const verdeling = buildVerdeling(cardIdx); // Count recovery cards (vergeten ones appended after original end) const recoveryCount = sessionQueue.filter((c, i) => i >= baseCards.length).length; /* Auto-advance from post-grade */ useEffect(() => { if (phase !== 'post-grade') return; const tid = setTimeout(() => { const nextIdx = cardIdx + 1; if (nextIdx >= sessionQueue.length) { // Derive mastery: all original base cards graded 'goed' or 'makkelijk' const allMastered = baseCards.every(c => { const g = gradeLog[c.id]; return g === 'goed' || g === 'makkelijk'; }) && Object.keys(gradeLog).length >= baseCards.length; setChapterMastered(allMastered); setPhase('rapport'); } else { setCardIdx(nextIdx); setGradeChoice(null); setPhase('front'); } }, 1400); return () => clearTimeout(tid); }, [phase, cardIdx, sessionQueue.length]); function handleShowAnswer() { prevPhaseRef.current = 'front'; setPhase('back'); } function handleGrade(grade) { const card = sessionQueue[cardIdx]; // Log grade setGradeLog(prev => ({ ...prev, [card.id]: grade })); // For 'vergeten': append card copy at end of queue if (grade === 'vergeten') { setSessionQueue(prev => [...prev, { ...card, id: card.id + '_r' + Date.now() }]); } setGradeChoice(grade); prevPhaseRef.current = 'back'; setPhase('post-grade'); } function handlePause() { prevPhaseRef.current = phase; setPhase('paused'); } function handleResume() { setPhase(prevPhaseRef.current === 'paused' ? 'front' : prevPhaseRef.current); } function handleStop() { navigate('dashboard'); } function handleBack() { navigate('dashboard'); } function handleAgain() { setSessionQueue(baseCards.map(c => ({ ...c }))); setCardIdx(0); setGradeChoice(null); setGradeLog({}); setChapterMastered(false); setPhase('front'); } function handleOefenen() { navigate('oefenen'); } const isRapport = phase === 'rapport'; const subtitle = isRapport ? `Sessie afgerond · ${baseCards.length} kaarten · 8 min` : `${baseCards.length} kaarten · 4 vakken · ~ 8 min`; // Dev-toggle pill shown only in rapport phase (prototype-only, not user-facing) const rapportDevToggle = isRapport ? ( ) : null; function renderPhase() { switch (phase) { case 'front': return ( ); case 'back': return ( ); case 'post-grade': return ( ); case 'paused': return ( ); case 'rapport': return ( ); default: return null; } } return ( Pauzeer Stop sessie
) : rapportDevToggle } > {renderPhase()} ); } /* ─── Override FlashcardDeck to wire grade buttons ─────── */ window.FlashcardDeck = function FlashcardDeckInteractive({ t, card, flipped, idx, total, showStackHint, flipCtaSub, onGrade, }) { return (
{card.source} Kaart {idx} / {total}
{showStackHint && ( <>
)}
{flipped ? 'Antwoord' : 'Vraag'}
{card.front}
{flipped && (
{card.back}
{card.note && (
{card.note}
)}
)}
{flipped ? (

Hoe goed kende je deze kaart?

Pulse plant op basis hiervan wanneer je 'm weer ziet.
{[ { grade: 'vergeten', label: 'Vergeten', due: 'zo weer' }, { grade: 'moeilijk', label: 'Moeilijk', due: 'later vandaag' }, { grade: 'goed', label: 'Goed', due: 'morgen' }, { grade: 'makkelijk', label: 'Makkelijk', due: 'over 4 dagen' }, ].map(({ grade, label, due }) => { const dark = t.mode === 'dark'; const palette = { vergeten: { c: dark ? '#F87171' : '#DC2626', bg: dark ? 'rgba(248,113,113,0.12)' : 'rgba(220,38,38,0.06)' }, moeilijk: { c: dark ? '#FBBF24' : '#B45309', bg: dark ? 'rgba(251,191,36,0.12)' : 'rgba(180,83,9,0.06)' }, goed: { c: dark ? '#22C55E' : '#15803D', bg: dark ? 'rgba(34,197,94,0.12)' : 'rgba(21,128,61,0.06)' }, makkelijk: { c: dark ? '#22D3EE' : '#0369A1', bg: dark ? 'rgba(34,211,238,0.12)' : 'rgba(3,105,161,0.06)' }, }[grade]; return ( ); })}
) : null}
); }; window.LerenReviewView = LerenReviewView; })();