/* prototype/views/chapter.jsx LerenChapterView — stateful chapter-detail with tabs + edge-states. Tabs: Samenvatting / Mindmap / Flashcards / Vraag aan Pulse Edge-states: nieuw / voltooid (passed as prop chapterState from app.jsx) */ (function () { const { useState } = React; /* ─── Mock data (same as polish/leren-hoofdstuk-frames.jsx) ── */ const HOOFDSTUK_BREADCRUMB = ['Bibliotheek', 'Biologie', 'havo-3', 'H3 — Cellen en celdeling']; const SAMENVATTING_SECTIONS = [ { heading: 'Wat is een cel?', body: 'Een cel is de kleinste levende bouwsteen van een organisme. Alle planten, dieren en mensen zijn opgebouwd uit cellen — soms uit één (zoals een bacterie), soms uit miljarden. Cellen kunnen voedingsstoffen opnemen, energie maken, en zich vermenigvuldigen. Onder een microscoop zie je dat ze een afgesloten ruimte hebben met daarin verschillende onderdelen die elk een taak hebben.', }, { heading: 'Mitose vs meiose', body: 'Mitose en meiose zijn twee soorten celdeling. Bij mitose ontstaan uit één moedercel twee identieke dochtercellen — dit gebruikt je lichaam voor groei en herstel. Bij meiose ontstaan vier verschillende geslachtscellen (eicel of zaadcel) met elk de helft van het DNA — dit is alleen voor voortplanting. Belangrijk: bij meiose verdubbelt het DNA niet voor de tweede deling, anders zou je nakomelingen veel te veel chromosomen krijgen.', }, { heading: 'Plantencel vs dierlijke cel', body: 'Plantencellen en dierlijke cellen lijken op elkaar, maar er zijn drie grote verschillen. Plantencellen hebben een celwand (stevigheid), bladgroenkorrels (om met zonlicht suikers te maken) en één grote vacuole (water-opslag). Dierlijke cellen hebben deze drie niet — wel hebben ze een centriool, waardoor ze sneller en gerichter kunnen delen.', }, ]; const SAMENVATTING_HEADINGS = SAMENVATTING_SECTIONS.map(s => s.heading); const SAMPLE_FLASHCARDS = [ { 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, zodat beide dochtercellen een complete set chromosomen krijgen.' }, { 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: 'Geen tweede DNA-verdubbeling tussen de delingen — anders zou het chromosoom-aantal blijven groeien.' }, { 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 }, { subject: 'biologie', source: 'Biologie voor jou · havo-3 · H3', front: 'Verschil plantencel en dierlijke cel?', back: 'Plantencellen hebben celwand, bladgroenkorrels en vacuole. Dierlijke cellen hebben een centriool.', note: null }, { 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 }, ]; const SAMPLE_FLASHCARD = SAMPLE_FLASHCARDS[0]; // backwards-compat const SAMPLE_CHAT_MESSAGES = [ { role: 'user', body: 'Wat is het verschil tussen mitose en meiose ook alweer?' }, { role: 'pulse', body: 'Korte versie:\n\n• Mitose maakt 2 identieke cellen (groei en herstel).\n• Meiose maakt 4 verschillende geslachtscellen met de helft van het DNA (voortplanting).\n\nDe truc om te onthouden: mit-OSE is voor het mensen-LIJF, mei-OSE is voor de zaad/eicel-LIJN. Bij meiose is er ook geen tweede DNA-verdubbeling — anders zou je nakomelingen elke generatie verdubbelen in chromosomen.', citations: ['Biologie voor jou · H3 §3.2', 'Biologie voor jou · H3 §3.3'], }, ]; const HOOFDSTUK_TABS = [ { id: 'samenvatting', label: 'Samenvatting', icon: 'file-text' }, { id: 'mindmap', label: 'Mindmap', icon: 'git-branch' }, { id: 'flashcards', label: 'Flashcards', icon: 'layers', count: 12 }, { id: 'pulse', label: 'Vraag aan Pulse', icon: 'message-circle' }, { id: 'test', label: 'Test jezelf', icon: 'brain' }, ]; /* ─── Mock data: Recall / Feynman / RAG ─────────────────── */ const RECALL_QUESTIONS = [ { q: 'Wat is mitose?', sample: 'Een soort celdeling waarbij twee identieke cellen ontstaan', score: 8, klopt: 'Celdeling — correct', mist: "'identieke dochtercellen' detail" }, { q: 'Wat is osmose?', sample: 'Water beweegt door een membraan van een lage naar hoge concentratie', score: 7, klopt: 'Bewegingsrichting van water — correct', mist: "'semipermeabel membraan' expliciet noemen" }, { q: 'Wat is meiose?', sample: 'Celdeling voor geslachtscellen, waarbij het DNA gehalveerd wordt', score: 9, klopt: 'Halvering chromosomen + geslachtscellen — goed', mist: 'tweede deling zonder DNA-verdubbeling niet benoemd' }, ]; const FEYNMAN_TOPICS = [ { id: 'mitose', label: 'Mitose', sampleAnswer: 'Stel je voor dat een cel zichzelf wil kopiëren. Eerst kopieert de cel al zijn DNA, daarna trekt hij die kopieën uit elkaar naar twee kanten en splitst hij in tweeën. Zo krijg je twee nieuwe cellen die precies hetzelfde zijn als het origineel. Dit gebeurt als je groeit of als een wond geneest.', feedback: { volledigheid: 4, helderheid: 5, eigenWoorden: 5, voorbeelden: 2, gaps: [ 'Je noemde de kerndeling (karyokinese) niet apart', 'De fases (profase, metafase, anafase, telofase) zijn niet besproken', ], tips: [ 'Voeg één concreet voorbeeld toe, bijv. wondheling of groei', 'Noem kort dat het DNA verdubbelt vóór de splitsing', 'Vergelijk met meiose om het contrast te benadrukken', ], }, }, { id: 'meiose', label: 'Meiose', sampleAnswer: 'Meiose is als mitose maar dan twee keer, en het doel is geslachtscellen maken. Je begint met één cel, deelt twee keer, en eindigt met vier cellen die elk de helft van het DNA hebben. Die cellen zijn allemaal een beetje anders, wat zorgt voor genetische variatie.', feedback: { volledigheid: 4, helderheid: 4, eigenWoorden: 5, voorbeelden: 3, gaps: [ 'Crossing-over (uitwisseling van genetisch materiaal) niet genoemd', 'Tweede deling zonder DNA-verdubbeling niet uitgelegd', ], tips: [ 'Leg uit waarom de tweede deling geen DNA-verdubbeling heeft', 'Geef een voorbeeld: eicel of zaadcel', ], }, }, { id: 'plant-dier', label: 'Plant- vs dierlijke cel', sampleAnswer: 'Een plantencel heeft een stijve celwand om hem stevigheid te geven, en chloroplasten om zonlicht te gebruiken voor voedsel. Een dierlijke cel heeft dat niet, maar heeft wel een centriool dat helpt bij celdeling. Verder lijken ze heel erg op elkaar.', feedback: { volledigheid: 3, helderheid: 5, eigenWoorden: 4, voorbeelden: 3, gaps: [ 'De grote centrale vacuole van plantencellen niet vermeld', 'Centriool van dierlijke cellen net iets te vaag omschreven', ], tips: [ 'Noem de vacuole: waterreservoir in de plantencel', 'Geef een aanschouwelijk voorbeeld: boomstam vs spiercel', ], }, }, { id: 'stofwisseling', label: 'Stofwisseling', sampleAnswer: 'Stofwisseling is alles wat een cel doet om energie te maken en te gebruiken. De cel breekt suikers af om ATP te maken, en gebruikt dat ATP voor alles: bewegen, groeien, stoffen transporteren.', feedback: { volledigheid: 3, helderheid: 4, eigenWoorden: 4, voorbeelden: 2, gaps: [ 'Fotosynthese als onderdeel van stofwisseling niet vermeld', 'Aerobe vs anaerobe ademhaling niet onderscheiden', ], tips: [ 'Onderscheid anabool (opbouwen) en katabool (afbreken)', 'Noem de rol van mitochondriën', ], }, }, ]; const RAG_QA = [ { q: 'Wat is het verschil tussen mitose en meiose?', a: 'Mitose levert 2 identieke dochtercellen op — voor groei en herstel. Meiose levert 4 verschillende geslachtscellen met de helft van het DNA — voor voortplanting. Bij meiose is er ook geen tweede DNA-verdubbeling, anders zou het chromosomenaantal elke generatie verdubbelen.', sources: ['Biologie voor jou · H3 §3.2', 'Biologie voor jou · H3 §3.3'], }, { q: 'Wat is osmose?', a: 'Osmose is de diffusie van water door een semipermeabel membraan, van de plek met de laagste opgeloste-stof-concentratie naar de plek met de hoogste. Het membraan laat water door, maar niet de grotere opgeloste deeltjes.', sources: ['Biologie voor jou · H3 §3.4'], }, { q: 'Welke onderdelen heeft een plantencel maar een dierlijke cel niet?', a: 'Drie unieke onderdelen: (1) celwand voor stevigheid, (2) chloroplasten voor fotosynthese, (3) een grote centrale vacuole voor wateropslag. Dierlijke cellen hebben wél een centriool, plantencellen niet (of slechts rudimentair).', sources: ['Biologie voor jou · H3 §3.1'], }, { q: 'Hoeveel cellen ontstaan er bij meiose?', a: 'Bij meiose ontstaan er uiteindelijk 4 cellen uit één moedercel. De eerste deling (meiose I) deelt het chromosomenaantal, de tweede deling (meiose II) lijkt op een gewone mitose. Alle 4 resulterende cellen bevatten de helft van het DNA van de moedercel.', sources: ['Biologie voor jou · H3 §3.3'], }, { q: 'Wat is de rol van de vacuole?', a: 'De vacuole is een met celzap gevulde blaas in de cel. In plantencellen is er één grote centrale vacuole die water opslaat, de cel onder druk houdt (turgor) en zo stevigheid geeft aan de plant. In dierlijke cellen zijn er kleinere, tijdelijke vacuolen voor opslag of afbraak.', sources: ['Biologie voor jou · H3 §3.1'], }, ]; const MINDMAP_NODES = [ { id: 'cel', label: 'Wat is een cel?', mastery: 3, angle: -90 }, { id: 'mitose', label: 'Mitose vs meiose', mastery: 2, angle: -30, hover: true }, { id: 'plant-dier', label: 'Plantencel vs dierlijk', mastery: 2, angle: 30 }, { id: 'osmose', label: 'Osmose & diffusie', mastery: 1, angle: 90 }, { id: 'organel', label: 'Organellen & functies', mastery: 3, angle: 150 }, { id: 'dna', label: 'DNA in de cel', mastery: 1, angle: 210 }, ]; /* ─── BronCertBadge ──────────────────────────────────────── */ function BronCertBadge({ t, compact }) { const dark = t.mode === 'dark'; const green = dark ? '#22C55E' : '#15803D'; if (compact) { return ( Gecertificeerd ); } return (
Biologie voor jou
Gecertificeerd lesmateriaal · uitgever Malmberg
); } /* ─── StandRow ───────────────────────────────────────────── */ function StandRow({ t, label, value, icon, emphasis }) { const dark = t.mode === 'dark'; const accent = emphasis ? (dark ? '#F472B6' : '#BE185D') : t.fgDim; return (
{label} {value}
); } /* ─── StandVanZakenCard ──────────────────────────────────── */ function StandVanZakenCard({ t, chapterState, onStartHoofdstuk, onStartHerhaling }) { const isNieuw = chapterState === 'nieuw'; const isVoltooid = chapterState === 'voltooid'; return (
Hoe sta je ervoor?
{isNieuw && ( <> )} {isVoltooid && ( <> )} {!isNieuw && !isVoltooid && ( <> )}
{isNieuw && ( <> Start hoofdstuk We beginnen rustig met de samenvatting )} {isVoltooid && ( <> console.log('[chapter] onderhoudsherhaling starten')}> Onderhoudsherhaling starten 1× per week · ~ 3 min )} {!isNieuw && !isVoltooid && ( <> Begin herhaling — dit hoofdstuk 8 kaarten · ~ 6 min )}
); } /* ─── Tab content: Samenvatting ──────────────────────────── */ function TabSamenvatting({ t }) { return (
{SAMENVATTING_SECTIONS.map((sec, i) => (

{sec.heading}

console.log('[chapter] leg verder uit:', sec.heading)}> Leg verder uit

{sec.body}

))}
Pulse heeft deze samenvatting opgesteld op basis van Biologie voor jou. Klopt iets niet, of mis je iets? Stel een vraag in de Pulse-tab.
); } /* ─── Tab content: Mindmap ───────────────────────────────── */ function MindmapNode({ t, label, mastery, hover, style }) { const dark = t.mode === 'dark'; return (
console.log('[chapter] mindmap node click:', label)} > {label}
); } function TabMindmap({ t }) { const dark = t.mode === 'dark'; const W = 580, H = 420; const cx = W / 2, cy = H / 2; const R = 160; const lineColor = dark ? 'rgba(148,163,184,0.28)' : 'rgba(100,116,139,0.30)'; return (
{MINDMAP_NODES.map((n, i) => { const rad = (n.angle * Math.PI) / 180; const x = cx + Math.cos(rad) * R; const y = cy + Math.sin(rad) * R; return ( ); })}
Hoofdstuk
Cellen en celdeling
{MINDMAP_NODES.map((n, i) => { const rad = (n.angle * Math.PI) / 180; const x = cx + Math.cos(rad) * R; const y = cy + Math.sin(rad) * R; return ( ); })}
Tip

Klik op een knooppunt om er dieper in te duiken — je krijgt de samenvatting van dat onderdeel + de bijhorende kaarten.

Open knooppunt: Mitose vs meiose
); } /* ─── Tab content: Flashcards ────────────────────────────── */ function TabFlashcards({ t, cardIdx, setCardIdx, onGrade }) { const { useState: useS } = React; const [flipped, setFlipped] = useS(false); const total = SAMPLE_FLASHCARDS.length; const safeIdx = ((cardIdx % total) + total) % total; const card = SAMPLE_FLASHCARDS[safeIdx]; function goPrev() { setFlipped(false); setCardIdx(idx => (idx - 1 + total) % total); } function goNext() { setFlipped(false); setCardIdx(idx => (idx + 1) % total); } function handleGradeAndAdvance(grade) { if (onGrade) onGrade(grade); setFlipped(false); setCardIdx(idx => (idx + 1) % total); } return (
{/* Flip-tap-zone over the card if not yet flipped */} {!flipped && (
setFlipped(true)} style={{ position: 'absolute', inset: 0, cursor: 'pointer', background: 'transparent', }} aria-label="Klik om te flippen" /> )}
{/* Prev / Flip / Next controls */}
{safeIdx + 1} / {total}
Verken hier rustig — de echte herhaalsessie zit in 'Begin herhaling'. Daar tellen je grades mee voor de planning.
); } /* ─── Tab content: Pulse (interactive RAG chat) ─────────── */ function TabPulse({ t, plan, creditsLeft, consumeCredit }) { const { useState: useS, useRef: useR } = React; const [messages, setMessages] = useS([]); const [draft, setDraft] = useS(''); const [thinking, setThinking] = useS(false); const [localCredits, setLocalCredits] = useS(creditsLeft); const inputRef = useR(null); const bottomRef = useR(null); const dark = t.mode === 'dark'; const SUGGESTIONS = [ 'Wat is het verschil tussen mitose en meiose?', 'Wat is osmose?', 'Welke onderdelen heeft een plantencel maar een dierlijke cel niet?', ]; const noCredits = plan === 'free' && localCredits <= 0; function findAnswer(question) { const q = question.toLowerCase(); for (const pair of RAG_QA) { if (pair.q.toLowerCase().split(' ').some(w => w.length > 4 && q.includes(w))) { return pair; } } return { a: 'Dat staat niet rechtstreeks in het materiaal van dit hoofdstuk. Probeer een specifiekere vraag over celdeling, osmose, of plantencel vs dierlijke cel.', sources: ['Biologie voor jou · H3'], }; } function submit(question) { const text = (question || draft).trim(); if (!text || thinking || noCredits) return; setDraft(''); if (plan === 'free') { consumeCredit(1); setLocalCredits(c => Math.max(0, c - 1)); } setMessages(ms => [...ms, { role: 'user', body: text }]); setThinking(true); setTimeout(() => { const pair = findAnswer(text); setThinking(false); // Append a streaming-placeholder pulse-message and reveal the body progressively (mock SSE) setMessages(ms => [...ms, { role: 'pulse', body: '', citations: [], streaming: true }]); const full = pair.a; const STEP = 3; // chars per tick let i = 0; const intervalId = setInterval(() => { i = Math.min(full.length, i + STEP); setMessages(ms => { if (ms.length === 0) return ms; const last = ms[ms.length - 1]; if (last.role !== 'pulse') return ms; return [...ms.slice(0, -1), { ...last, body: full.slice(0, i) }]; }); if (bottomRef.current) bottomRef.current.scrollIntoView({ behavior: 'smooth' }); if (i >= full.length) { clearInterval(intervalId); // Reveal citations + drop streaming flag setMessages(ms => { if (ms.length === 0) return ms; const last = ms[ms.length - 1]; if (last.role !== 'pulse') return ms; return [...ms.slice(0, -1), { ...last, body: full, citations: pair.sources, streaming: false }]; }); } }, 22); }, 900); } function handleKeyDown(e) { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); submit(); } } const purple = dark ? '#9D4EDD' : '#7C3AED'; return (
{/* Header */}
Pulse — vraag iets
Antwoorden uit: Biologie voor jou · H3
RAG {plan === 'free' && ( 0 ? t.fgDim : '#EF4444', fontWeight: 800, whiteSpace: 'nowrap', }}> {localCredits} credit{localCredits !== 1 ? 's' : ''} over )}
{/* Messages */}
{messages.length === 0 && !thinking ? (
Wat zou je willen weten?
Ik antwoord op basis van je lesmateriaal. Bronnen staan altijd onder het antwoord.
) : ( messages.map((m, i) => ) )} {thinking && (
Pulse denkt na…
)}
{/* Paywall when no credits */} {noCredits && (
Geen credits meer over deze maand. Wacht tot 1 mei of upgrade naar Premium.
)} {/* Suggestion chips — only when no messages yet */} {messages.length === 0 && !thinking && (
{SUGGESTIONS.map((s, i) => ( ))}
)} {/* Composer */}
setDraft(e.target.value)} onKeyDown={handleKeyDown} placeholder={noCredits ? 'Geen credits meer…' : 'Stel een vraag over dit hoofdstuk…'} disabled={noCredits || thinking} style={{ flex: 1, background: 'transparent', border: 'none', outline: 'none', fontSize: 13, color: t.fg, fontFamily: 'Nunito', fontWeight: 600, }} />
); } /* ─── Edge-state content: Nieuw ──────────────────────────── */ function ContentNieuw({ t, onStartHoofdstuk }) { const dark = t.mode === 'dark'; return (
Nieuw hoofdstuk

Klaar om dit hoofdstuk te ontdekken?

We beginnen rustig. Eerst een samenvatting in drie stukken, daarna 12 flashcards om het in te slijpen. Stel onderweg gerust vragen.

In dit hoofdstuk · 3 onderwerpen
{SAMENVATTING_HEADINGS.map((heading, i) => (
{i + 1} {heading}
))}
Start hoofdstuk
We openen de samenvatting en lopen 'm samen door
Start hoofdstuk
); } /* ─── Edge-state content: Voltooid ──────────────────────── */ function ContentVoltooid({ t }) { const dark = t.mode === 'dark'; const green = dark ? '#22C55E' : '#15803D'; return (
Hoofdstuk afgerond

Je beheerst dit hoofdstuk.

Ik laat je 'm rustig herhalen om het vast te houden — geen druk, gewoon één keer per week kort langslopen.

Volgende keer: ma 14 apr ~ 3 min
Beheersing per onderwerp
{SAMENVATTING_HEADINGS.map((heading, i) => (
{heading}
))}
Onderhoudsherhaling
1× per week · ~ 3 min · zo blijft het zitten
console.log('[chapter] onderhoudsherhaling starten')}> Nu starten
); } /* ─── LerenChapterView ───────────────────────────────────── */ function LerenChapterView({ t, navigate, view, chapters, chapterState: chapterStateProp, plan, creditsLeft, creditsMax, hasFeature, consumeCredit }) { const ch = (chapters && chapters.find(c => c.id === view.chapterId)) || { id: 'bio-h3', subject: 'biologie', method: 'Biologie voor jou', title: 'H3 — Cellen en celdeling', mastery: 2, }; const [tab, setTab] = useState('samenvatting'); const chapterState = chapterStateProp || (view && view.state) || 'normal'; const [cardIdx, setCardIdx] = useState(0); const isNieuw = chapterState === 'nieuw'; const isVoltooid = chapterState === 'voltooid'; const masteryLevel = isNieuw ? 0 : isVoltooid ? 4 : 2; const toetsContext = (!isNieuw && !isVoltooid) ? 'toets vrijdag' : null; const subtitle = isNieuw ? 'Bio H3 — nog niet begonnen · ~ 35 min materiaal' : isVoltooid ? 'Bio H3 — afgerond · onderhoudsherhaling 1× per week' : 'Bio H3 — vrijdag toets · ~22 min resterend · 8 te herhalen'; function handleStartHoofdstuk() { console.log('[chapter] start hoofdstuk:', ch.id); setTab('samenvatting'); } function handleStartHerhaling() { console.log('[chapter] start herhaling → navigate review'); navigate('review'); } function handleGrade(grade) { console.log('[chapter] flashcard grade:', grade, 'card', cardIdx); setCardIdx(idx => idx + 1); } function renderTabContent() { if (isNieuw) { return ; } if (isVoltooid) { return ; } switch (tab) { case 'samenvatting': return ; case 'mindmap': return ; case 'flashcards': return ; case 'pulse': return ; case 'test': return ; default: return ; } } return (
{/* Main column */}
} />
{!isNieuw && !isVoltooid && (
)} {(isNieuw || isVoltooid) && (
({ ...tb, label: isNieuw ? 'Samenvatting' : 'Overzicht', }))} active="samenvatting" onTabClick={() => {}} />
)}
{renderTabContent()}
{/* Right rail */}
); } /* Patch LerenTabs to accept onTabClick (prototype only) */ const _OrigLerenTabs = window.LerenTabs; window.LerenTabs = function LerenTabsInteractive({ t, tabs, active, accent, onTabClick }) { const c = accent || t.primary; return (
{tabs.map(tab => { const isActive = tab.id === active; return (
onTabClick && onTabClick(tab.id)} > {tab.icon && ( )} {tab.label} {tab.count != null && ( {tab.count} )}
); })}
); }; window.LerenChapterView = LerenChapterView; })();