// Article detail page — News Oh,Ye! const { useState: useStateA, useMemo: useMemoA, useEffect: useEffectA } = React; function ArticlePage({ articleId, onBack, onComplete, progress, setProgress }) { const baseArticle = ARTICLES.find(a => a.id === articleId) || ARTICLES[0]; const [tab, setTab] = useStateA('read'); const [tabsVisited, setTabsVisited] = useStateA({ read: true }); const [detail, setDetail] = useStateA(null); const [detailError, setDetailError] = useStateA(null); // Lazy-fetch v1 detail payload for this article. Chinese cards (noDetail) are // routed away before reaching this page, so we only fetch English variants. useEffectA(() => { if (!baseArticle || baseArticle.noDetail) { setDetail(null); return; } let cancelled = false; setDetail(null); setDetailError(null); const payloadLevel = baseArticle.level === 'Sprout' ? 'easy' : 'middle'; const url = `article_payloads/payload_${baseArticle.storyId}/${payloadLevel}.json`; fetch(url) .then(r => r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))) .then(d => { if (cancelled) return; // Map v1 field shapes to the prototype's expected shape. // v1 detail pattern: full body lives in `summary`; `background_read` is // supplementary context (for the Analyze tab), not the body. const bgRead = Array.isArray(d.background_read) ? d.background_read.join('\n\n') : (typeof d.background_read === 'string' ? d.background_read : ''); const mapped = { body: d.summary || '', // FULL regenerated article body summary: d.summary || baseArticle.summary, backgroundRead: bgRead, // shown on Analyze tab whyItMatters: d.why_it_matters || '', keywords: (d.keywords || []).map(k => ({ term: k.term, def: k.explanation })), quiz: (d.questions || []).map(q => { const idx = q.options.findIndex(opt => opt === q.correct_answer); return { q: q.question, options: q.options, a: Math.max(0, idx) }; }), discussion: (d.perspectives || []).map(p => `${p.perspective}: ${p.description}`), articleStructure: Array.isArray(d.Article_Structure) ? d.Article_Structure : [], }; setDetail(mapped); }) .catch(e => { if (!cancelled) { console.warn('[article] detail fetch failed', url, e); setDetailError(e); } }); return () => { cancelled = true; }; }, [articleId]); // Merged article object: prefer detail fields when loaded, fall back to the // listing-level stub so the title block + header render even before detail // arrives. const article = useMemoA(() => { const d = detail || {}; return { ...baseArticle, summary: d.summary || baseArticle.summary, body: d.body || '', backgroundRead: d.backgroundRead || '', whyItMatters: d.whyItMatters || '', keywords: d.keywords || [], quiz: d.quiz || [], discussion: d.discussion || [], articleStructure: d.articleStructure || [], }; }, [articleId, detail]); // Each step completion bumps progress by 25%: read→25, analyze→50, quiz→75, discuss→100 const bumpProgress = (pct) => { setProgress(p => { const ap = p.articleProgress || {}; const cur = ap[article.id] || 0; if (cur >= pct) return p; const next = { ...p, articleProgress: { ...ap, [article.id]: pct } }; // When reaching 100, mark as fully read + add minutes if (pct === 100 && !p.readToday.includes(article.id)) { next.readToday = [...p.readToday, article.id]; next.minutesToday = (p.minutesToday || 0) + article.readMins; } return next; }); }; const [expandedKw, setExpandedKw] = useStateA(null); const [quizIdx, setQuizIdx] = useStateA(0); const [quizAns, setQuizAns] = useStateA([]); const [quizShow, setQuizShow] = useStateA(false); const [confetti, setConfetti] = useStateA(false); const stages = [ { id:'read', label:'Read & Words', emoji:'📖' }, { id:'analyze', label:'Background', emoji:'🔍' }, { id:'quiz', label:'Quiz', emoji:'🎯' }, { id:'discuss', label:'Think', emoji:'💭' }, ]; const catColor = getCatColor(article.category); // Build paragraphs for the Read tab from detail.body (preferred) or a // sentence-grouped fallback over the summary while detail is loading. const paragraphs = useMemoA(() => { const text = article.body || article.summary || ''; if (article.body) { // Detail body has explicit paragraph breaks ("\n\n") we can honor. const paras = text.split(/\n\n+/).map(s => s.trim()).filter(Boolean); if (paras.length > 0) return paras; } // Fallback: group sentences into 3-sentence paragraphs (prototype behavior). const sentences = text.split(/(?<=\.)\s+/); const groups = []; for (let i=0; i { setTab(id); setTabsVisited(v => ({...v, [id]: true})); }; // Block tabs until detail is loaded. Header/title block still render so the // user gets feedback while the payload arrives. const detailReady = !!detail; return (
{/* ——— Top bar ——— */}
News Oh,Ye!
{stages.map((s, i) => { const curPct = (progress.articleProgress || {})[article.id] || 0; const stepPct = (i + 1) * 25; const stepDone = curPct >= stepPct; return ( {i < stages.length-1 &&
} ); })}
{/* ——— Title block ——— */}

{article.title}

📰 {article.source}· {article.time}· ⏱ {article.readMins} min read
📷 {article.source}
{/* ——— TABS CONTENT ——— */} {!detailReady && !detailError && (
📡
Loading the full story…
Fetching keywords, quiz, and background.
)} {detailError && (
⚠️
Couldn't load this story.
Try again in a moment.
)} {detailReady && tab === 'read' && ( { bumpProgress(25); switchTab('analyze'); }} /> )} {detailReady && tab === 'analyze' && ( { bumpProgress(50); switchTab('quiz'); }} /> )} {detailReady && tab === 'quiz' && ( { bumpProgress(75); setConfetti(true); setTimeout(()=>setConfetti(false), 1800); switchTab('discuss'); }} /> )} {detailReady && tab === 'discuss' && ( { bumpProgress(100); onComplete(); }} /> )}
{confetti && }
); } // ——— Highlight keywords in a text string ——— // Matches base terms AND common English inflections (ban → banned, fine → fined). // The base term is captured as group 1 so we can look up the definition even // when the matched text is an inflected form like "banned". function highlightText(text, keywords, catColor) { if (!keywords || !keywords.length) return [text]; const termMap = {}; keywords.forEach(k => { termMap[k.term.toLowerCase()] = k; }); // Sort longer-first so multi-word terms ("prediction market") win over // single-word subsets ("prediction"). const terms = keywords.map(k => k.term).sort((a, b) => b.length - a.length); const SUFFIX = '(?:s|es|ed|d|ing|ning|ned|ting|ted|er|ers)?'; const alt = terms.map(t => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|'); const pattern = new RegExp(`\\b(${alt})${SUFFIX}\\b`, 'gi'); const result = []; let last = 0, m, idx = 0; while ((m = pattern.exec(text)) !== null) { if (m.index > last) result.push(text.substring(last, m.index)); const base = (m[1] || '').toLowerCase(); // captured base term const kw = termMap[base]; result.push(); last = m.index + m[0].length; } if (last < text.length) result.push(text.substring(last)); return result; } function KwTip({ text, def, color }) { const [show, setShow] = useStateA(false); return ( setShow(true)} onMouseLeave={()=>setShow(false)}> {text} {show && ( {text}: {def} )} ); } // ——————— READ & WORDS TAB (combined) ——————— function ReadAndWordsTab({ article, paragraphs, expanded, setExpanded, onFinish }) { const catColor = getCatColor(article.category); const [gameOpen, setGameOpen] = useStateA(false); return (
📖

The Story

Hover on the colored words!
{paragraphs.map((p, i) => (

{i === 0 && {p[0]}} {highlightText(i === 0 ? p.substring(1) : p, article.keywords, catColor)}

))}
✓ I read it! Next: Background →
{gameOpen && setGameOpen(false)}/>}
); } function WordMatchGame({ keywords, catColor, onClose }) { // Shuffle definitions once per open so user matches term → meaning. const shuffledDefs = useMemoA(() => { const defs = keywords.map((k, i) => ({ def: k.def, idx: i })); for (let i = defs.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [defs[i], defs[j]] = [defs[j], defs[i]]; } return defs; }, [keywords]); const [picks, setPicks] = useStateA(Array(keywords.length).fill('')); const [checked, setChecked] = useStateA(false); const correct = picks.filter((p, i) => String(p) === String(i)).length; const total = keywords.length; const stars = Math.round((correct / Math.max(total,1)) * 5); return (
e.stopPropagation()} style={{ background:'#fff', borderRadius:22, padding:'26px 28px', maxWidth:560, width:'100%', maxHeight:'90vh', overflowY:'auto', boxShadow:'0 20px 60px rgba(27,18,48,0.3)', }}>
🎮

Match the meanings

Pick the right meaning for each word.

{keywords.map((kw, i) => { const isRight = checked && String(picks[i]) === String(i); const isWrong = checked && picks[i] !== '' && String(picks[i]) !== String(i); return (
{kw.term}
); })}
{checked ? (
{'⭐'.repeat(stars)}{'☆'.repeat(5 - stars)}
{correct} / {total} correct {correct === total ? '🎉' : ''}
) : (
)}
); } function KeywordCard({ kw, idx, expanded, onToggle }) { const palette = [ {bg:'#ffece8', c:'#ff6b5b'}, {bg:'#e0f6f3', c:'#17b3a6'}, {bg:'#eee5ff', c:'#9061f9'}, {bg:'#fff4c2', c:'#c9931f'}, {bg:'#ffe4ef', c:'#ff6ba0'}, ][idx % 5]; return ( ); } // ——————— ANALYZE TAB (Background + Structure, with article reference) ——————— function AnalyzeTab({ article, paragraphs, onNext }) { const [articleOpen, setArticleOpen] = useStateA(false); const catColor = getCatColor(article.category); const isTree = article.level === 'Tree'; // Background paragraphs: prefer payload's background_read (deeper at middle, // simpler at easy). Fall back to a generic intro sentence only if missing. const bgParagraphs = (article.backgroundRead || '').trim() ? article.backgroundRead.split(/\n\n+/).map(s => s.trim()).filter(Boolean) : [`This story comes from ${article.source}, a ${article.category === 'Science' ? 'science source' : 'news source'} that covers stories for kids. When you read, think about WHO is doing something, WHAT is happening, WHERE it takes place, and WHY it matters.`]; // Easy level: parse WHO/WHAT/WHERE/WHY into a 5W grid. // Tree level: render Article_Structure as a nested mind-tree preserving // leading-whitespace + └─/├─ indentation from the payload. let structureBlock = null; if (isTree) { structureBlock = (
{(article.articleStructure || []).map((line, i) => { const raw = typeof line === 'string' ? line : String(line); const m = raw.match(/^(\s*)(.*)$/); const indent = m ? m[1].length : 0; const text = m ? m[2] : raw; // Split "LABEL: rest" so label can be bolded const lm = text.match(/^([A-Z][A-Z \/]*[A-Z]|[A-Z][a-z]+):\s*(.*)$/); return (
{lm ? ( {lm[1]} : {highlightText(lm[2], article.keywords, catColor)} ) : ( {highlightText(text, article.keywords, catColor)} )}
); })}
); } else { const structure = {}; for (const line of (article.articleStructure || [])) { const m = typeof line === 'string' ? line.match(/^\s*([A-Za-z]+)\s*:\s*(.*)$/) : null; if (m) structure[m[1].toUpperCase()] = m[2].trim(); } const who = structure.WHO || (article.title.split(' ').slice(0, 3).join(' ') + '…'); const what = structure.WHAT || ((article.summary || '').split('.')[0] + '.'); const where = structure.WHERE || (article.category === 'Science' ? 'In labs, field studies, or around the world' : 'Mentioned in the story'); const why = structure.WHY || `It matters because it affects ${article.category === 'Science' ? 'how we understand the world' : 'people, animals, or the planet'}.`; structureBlock = (
); } return (
{/* Left: Background */}
🧭

Background you need

{bgParagraphs.map((p, i) => (

{highlightText(p, article.keywords, catColor)}

))}
{/* Right: Structure (5W for easy, mind-tree for middle) */}
🔍

Break it down

{structureBlock}
{/* Full-width: Article reference collapsible */}
{articleOpen && (
{paragraphs.map((p, i) => (

{highlightText(p, article.keywords, catColor)}

))}
)}
Ready for the quiz →
); } function WRow({ label, emoji, value }) { return (
{emoji}
{label}
{value}
); } // ——————— QUIZ TAB (split view with article reference) ——————— function QuizTab({ article, paragraphs, quizIdx, setQuizIdx, quizAns, setQuizAns, quizShow, setQuizShow, onFinish }) { const q = article.quiz[quizIdx]; const done = quizAns.length === article.quiz.length && quizAns.every(a => a !== undefined); const correct = quizAns.filter((a,i) => a === article.quiz[i].a).length; const catColor = getCatColor(article.category); if (done) { return (
🎉

{correct === article.quiz.length ? 'Perfect!' : correct >= article.quiz.length/2 ? 'Nice work!' : 'Good try!'}

You got {correct} out of {article.quiz.length} right.

⭐ +{article.xp} XP earned!
{ setQuizAns([]); setQuizIdx(0); setQuizShow(false);}} style={{boxShadow:'0 4px 0 rgba(0,0,0,0.08)', border:'2px solid #f0e8d8'}}>🔁 Try again Next: Think time →
); } return (
{/* Left: article reference (scrollable, sticky) */}
📖
Look back at the story
{paragraphs.map((p, i) => (

{highlightText(p, article.keywords, catColor)}

))}
{/* Right: quiz */}
🎯

Quick quiz

Q {quizIdx+1}/{article.quiz.length}

{q.q}

{q.options.map((opt, i) => { const picked = quizShow && quizAns[quizIdx] === i; const isRight = quizShow && i === q.a; const isWrong = quizShow && picked && i !== q.a; return ( ); })}
{quizShow && (
{ setQuizShow(false); setQuizIdx(quizIdx+1); }}> {quizIdx+1 < article.quiz.length ? 'Next question →' : 'See results →'}
)}
); } // ——————— DISCUSS TAB ——————— function DiscussTab({ article, paragraphs, onDone }) { const [answer, setAnswer] = useStateA(''); const [submitted, setSubmitted] = useStateA(false); const [articleOpen, setArticleOpen] = useStateA(false); const catColor = getCatColor(article.category); return (
💭

Think & share

{article.discussion.map((d, i) => (
{d}
))}