// Test flow: mode chooser, sample/mock test UI, PDF scan upload const { useState: useState_T, useEffect: useEffect_T, useRef: useRef_T } = React; // ---------- Sample questions (placeholder) ---------- // NOTE: actual questions are supplied by user's code later. // This is a design-time placeholder with representative shape. const PLACEHOLDER_QUESTIONS = [ { id: 1, topicId: 1, en: "Calculate: 348 + 276 − 149", ko: "계산하세요: 348 + 276 − 149", options: ["475", "485", "475", "575"], optionsLabeled: ["365", "475", "485", "575"], correct: 1, solutionEn: "348 + 276 = 624. Then 624 − 149 = 475.", solutionKo: "348 + 276 = 624. 이어서 624 − 149 = 475.", }, { id: 2, topicId: 3, en: "Which of these is a common factor of 24 and 36?", ko: "24와 36의 공약수는 어느 것입니까?", optionsLabeled: ["5", "7", "12", "16"], correct: 2, solutionEn: "Factors of 24: 1, 2, 3, 4, 6, 8, 12, 24. Factors of 36: 1, 2, 3, 4, 6, 9, 12, 18, 36. Common factors include 12.", solutionKo: "24의 약수: 1, 2, 3, 4, 6, 8, 12, 24. 36의 약수: 1, 2, 3, 4, 6, 9, 12, 18, 36. 공약수 중 12가 포함됩니다.", }, { id: 3, topicId: 4, en: "What is 3/4 written as a decimal?", ko: "3/4을 소수로 나타내면?", optionsLabeled: ["0.25", "0.34", "0.75", "0.8"], correct: 2, solutionEn: "3 ÷ 4 = 0.75.", solutionKo: "3 ÷ 4 = 0.75.", }, { id: 4, topicId: 5, en: "A coat costs £80. In a sale it is reduced by 25%. What is the sale price?", ko: "코트가 £80입니다. 세일에서 25% 할인되면 판매가는?", optionsLabeled: ["£20", "£55", "£60", "£65"], correct: 2, solutionEn: "25% of 80 = 20. 80 − 20 = £60.", solutionKo: "80의 25% = 20. 80 − 20 = £60.", }, { id: 5, topicId: 9, en: "A train leaves at 09:47 and the journey takes 1 hour 25 minutes. What time does it arrive?", ko: "열차가 09:47에 출발하고 1시간 25분 걸립니다. 도착 시각은?", optionsLabeled: ["10:12", "11:02", "11:12", "11:22"], correct: 2, solutionEn: "09:47 + 1h = 10:47. Then +25 min = 11:12.", solutionKo: "09:47 + 1시간 = 10:47. 거기에 25분 더하면 11:12.", }, { id: 6, topicId: 7, en: "The numbers 6, 8, 11, 3, 7 have what mean?", ko: "6, 8, 11, 3, 7의 평균은?", optionsLabeled: ["5", "7", "8", "9"], correct: 1, solutionEn: "Sum = 35. Mean = 35 ÷ 5 = 7.", solutionKo: "합 = 35. 평균 = 35 ÷ 5 = 7.", }, { id: 7, topicId: 11, en: "A rectangle is 8 cm long and 5 cm wide. What is its area?", ko: "가로 8cm, 세로 5cm인 직사각형의 넓이는?", optionsLabeled: ["13 cm²", "26 cm²", "40 cm²", "45 cm²"], correct: 2, solutionEn: "Area = length × width = 8 × 5 = 40 cm².", solutionKo: "넓이 = 가로 × 세로 = 8 × 5 = 40 cm².", }, { id: 8, topicId: 6, en: "If 3n + 4 = 19, what is n?", ko: "3n + 4 = 19 일 때, n은?", optionsLabeled: ["3", "5", "6", "7"], correct: 1, solutionEn: "3n = 19 − 4 = 15. n = 15 ÷ 3 = 5.", solutionKo: "3n = 19 − 4 = 15. n = 15 ÷ 3 = 5.", }, { id: 9, topicId: 13, en: "A bag has 3 red and 7 blue marbles. The probability of drawing red?", ko: "빨간 구슬 3개와 파란 구슬 7개. 빨간 구슬을 뽑을 확률은?", optionsLabeled: ["3/10", "7/10", "1/3", "3/7"], correct: 0, solutionEn: "Total = 10. P(red) = 3/10.", solutionKo: "전체 = 10. P(빨강) = 3/10.", }, { id: 10, topicId: 14, en: "Point A is at (2, 3). After translation (+3, −1), where is A?", ko: "점 A는 (2, 3)입니다. (+3, −1) 평행이동 후 위치는?", optionsLabeled: ["(5, 4)", "(5, 2)", "(−1, 2)", "(2, 2)"], correct: 1, solutionEn: "(2+3, 3−1) = (5, 2).", solutionKo: "(2+3, 3−1) = (5, 2).", }, ]; // ---------- Mode chooser ---------- function ModeChooser({ onPick, onCancel, paperName }) { const { t, lang } = useT(); const [selected, setSelected] = useState_T(null); return (
e.stopPropagation()} style={{ background: "var(--paper)", borderRadius: 16, maxWidth: 720, width: "100%", padding: 36, boxShadow: "var(--shadow-lg)", }}>
{paperName}

{t("mode_title")}

{t("mode_sub")}

{[ { id: "online", title: t("mode_online"), desc: t("mode_online_desc"), recommended: true, icon: ( ) }, { id: "paper", title: t("mode_paper"), desc: t("mode_paper_desc"), icon: ( ) }, ].map((opt) => ( ))}
); } // ---------- Test taking UI ---------- function TestUI({ questions, isSample, paperName, durationMin = 50, onFinish, onExit, initialState, stateRef }) { const { t, lang } = useT(); const [idx, setIdx] = useState_T(() => initialState?.idx ?? 0); const [answers, setAnswers] = useState_T(() => { if (initialState?.answers && initialState.answers.length === questions.length) return initialState.answers; return questions.map(() => null); }); const [flagged, setFlagged] = useState_T(() => new Set()); const [timeLeft, setTimeLeft] = useState_T(() => initialState?.timeLeft ?? durationMin * 60); const q = questions[idx]; useEffect_T(() => { const id = setInterval(() => setTimeLeft(t => Math.max(0, t - 1)), 1000); return () => clearInterval(id); }, []); // Auto-submit when timer reaches zero (sample + mock). const submittedRef = useRef_T(false); useEffect_T(() => { if (timeLeft === 0 && !submittedRef.current) { submittedRef.current = true; onFinish(answers, flagged); } }, [timeLeft]); // 5-minute warning banner (sample + mock). const [warn5Shown, setWarn5Shown] = useState_T(false); const [warnVisible, setWarnVisible] = useState_T(false); useEffect_T(() => { if (timeLeft === 300 && !warn5Shown) { setWarn5Shown(true); setWarnVisible(true); } }, [timeLeft]); // Auto-save progress to localStorage on every answer/navigation change (mock only). useEffect_T(() => { if (!paperName || isSample) return; try { localStorage.setItem(`epl_inprogress_${paperName}`, JSON.stringify({ idx, answers, timeLeft })); } catch {} }, [answers, idx]); // Expose current state to parent so the Save-progress flow can snapshot it. useEffect_T(() => { if (stateRef) stateRef.current = { idx, answers, timeLeft }; }, [idx, answers, timeLeft, stateRef]); if (!q) return null; const mm = String(Math.floor(timeLeft / 60)).padStart(2, "0"); const ss = String(timeLeft % 60).padStart(2, "0"); const pick = (opt) => setAnswers(a => { const c = [...a]; c[idx] = opt; return c; }); const toggleFlag = () => setFlagged(f => { const n = new Set(f); n.has(idx) ? n.delete(idx) : n.add(idx); return n; }); const stem = lang === "ko" ? q.ko : q.en; const useHtml = !!q._html; const diagramHtml = q._diagramHtml || ""; const followHtml = q._questionHtml || ""; return (
{/* Top bar */}
{isSample ? (lang === "ko" ? "샘플 · 비공개" : "SAMPLE · UNGRADED") : paperName}
{t("test_time")} {mm}:{ss}
{warnVisible && (
⏰ {lang === "ko" ? "시험 종료 5분 전입니다." : "5 minutes remaining."}
)}
{/* Question area */}
{t("test_q")} {idx + 1} {t("test_of")} {questions.length}
{useHtml ? (

) : (

{stem}

)} {diagramHtml && (
)} {followHtml && (
)}
{q.optionsLabeled.map((opt, i) => { const active = answers[idx] === i; return ( ); })}
{idx < questions.length - 1 ? : }
{/* Navigator sidebar */}
); } // ---------- PDF upload / scan flow ---------- function ScanUpload({ paperName, onDone, onCancel, printUrl, durationMin = 50, previewQuestions = null }) { const { t, lang } = useT(); const [files, setFiles] = useState_T([]); const printedKey = `epl_printed_${paperName}`; const alreadyPrinted = (() => { try { return localStorage.getItem(printedKey) === "1"; } catch { return false; } })(); const [phase, setPhase] = useState_T(alreadyPrinted ? "idle" : "print"); // print | idle | marking const [step, setStep] = useState_T(0); const inputRef = useRef_T(null); const markPrinted = () => { try { localStorage.setItem(printedKey, "1"); } catch {} setPhase("idle"); }; useEffect_T(() => { if (phase !== "marking") return; const steps = [1200, 1400, 1200]; let i = 0; const advance = () => { if (i >= steps.length) { onDone(); return; } setStep(i); setTimeout(() => { i++; advance(); }, steps[i]); }; advance(); }, [phase]); const addFiles = (fileList) => { const arr = Array.from(fileList).slice(0, 6).map((f, i) => ({ name: f.name || `sheet-${i + 1}.jpg`, size: f.size ? `${Math.round(f.size / 1024)} KB` : "~340 KB" })); setFiles(f => [...f, ...arr]); }; if (phase === "print") { return (
{paperName} · {lang === "ko" ? "1단계 / 2" : "Step 1 of 2"}

{lang === "ko" ? "시험지를 출력하세요" : "Print the paper"}

{lang === "ko" ? "시험지와 답안지를 출력해 주세요. 아이가 답안지를 작성한 뒤, 그 답안지를 스캔해서 올리면 채점해 드립니다." : "Print the question paper and the answer sheet. Your child fills it in on paper — we mark the scanned answer sheet."}

{/* PDF preview */}
PREVIEW · PDF
Daddy's Lab 11+
{paperName}
{lang === "ko" ? "50문제" : "50 questions"} {lang === "ko" ? `${durationMin}분` : `${durationMin} minutes`} v2.1
{previewQuestions ? previewQuestions.map((q, n) => (
0 ? "1px solid var(--line)" : "none", paddingTop: n > 0 ? 10 : 0 }}>
{n + 1}.
{q.en && (
)} {q._questionHtml && (
)} {q._diagramHtml && (
{lang === "ko" ? "[도형 포함]" : "[diagram]"}
)}
{["A","B","C","D","E"].map(x => (
{x}
))}
)) : [1,2,3,4,5].map(n => (
{n}.
{["A","B","C","D"].map(x => (
{x}
))}
))}
{lang === "ko" ? "… 45문제 더" : "… 45 more questions"}
{/* Action card */}
{lang === "ko" ? "포함 내용" : "Included"}
{[ { en: "Question paper (12 pp.)", ko: "시험지 (12쪽)" }, { en: "Answer sheet (1 p.)", ko: "답안지 (1쪽)" }, { en: "Parent instructions", ko: "학부모 안내문" }, ].map((it, i) => (
{lang === "ko" ? it.ko : it.en}
))}
{lang === "ko" ? "출력 후 스캔 화면으로 넘어갑니다. 다음번에 다시 열어도 스캔 화면부터 시작해요." : "After printing you'll go to the scan step. Next time you'll jump straight there."}
); } if (phase === "marking") { const steps = [t("scan_step_1"), t("scan_step_2"), t("scan_step_3")]; return (

{t("scan_marking")}

{steps.map((s, i) => (
step ? 0.5 : 1, }}>
{i < step ? "✓" : i + 1}
{s}
{i === step && (
)}
))}
); } return (
{paperName} · {lang === "ko" ? "2단계 / 2" : "Step 2 of 2"}

{t("scan_title")}

{t("scan_sub")}

{alreadyPrinted && ( )} {/* Disclaimer */}
{t("scan_disclaimer")}
{/* Dropzone */}
inputRef.current?.click()} onDragOver={(e) => e.preventDefault()} onDrop={(e) => { e.preventDefault(); addFiles(e.dataTransfer.files); }} style={{ marginTop: 20, padding: "56px 32px", border: "2px dashed var(--line-2)", borderRadius: 14, background: "var(--paper-2)", textAlign: "center", cursor: "pointer", transition: "all .15s", }}> addFiles(e.target.files)} />
{t("scan_drop")}
JPG · PNG · PDF · {lang === "ko" ? "최대 6장" : "up to 6 images"}
{files.length > 0 && (
{files.map((f, i) => (
PAGE {i + 1}
{f.name}
{f.size}
))}
)}
); } // ---------- Sutton → design shape adapter ---------- // Transforms window.SuttonEngine output (from sutton_core.js) into the shape // TestUI, ResultsView and QuestionReview expect: { id, topicId, en, ko, optionsLabeled, correct, solutionEn, solutionKo }. // Marks each question with `_html: true` so renderers pipe content through dangerouslySetInnerHTML. function buildSuttonQuestions(count) { const engine = window.SuttonEngine; if (!engine) return PLACEHOLDER_QUESTIONS.slice(0, count || PLACEHOLDER_QUESTIONS.length); const all = engine.generateAll(); const slice = count ? all.slice(0, count) : all; return slice.map((s) => { const idx = s.choices ? s.choices.findIndex(c => c.value === s.answerKey) : 0; const correct = idx < 0 ? 0 : idx; const options = s.choices ? s.choices.map(c => c.html) : ["—", "—", "—", "—", "—"]; const solution = `Answer: ${s.answerHtml}`; const solutionKo = `정답: ${s.answerHtml}`; return { id: s.id, topicId: s.topicId, _html: true, _diagramHtml: s.diagramHtml, _questionHtml: s.questionHtml, en: s.promptHtml, ko: s.promptHtml, optionsLabeled: options, correct, solutionEn: solution, solutionKo, }; }); } Object.assign(window, { PLACEHOLDER_QUESTIONS, ModeChooser, TestUI, ScanUpload, buildSuttonQuestions });