/* explorer.jsx — The Explorer Route: a complete, finishable arc for younger learners (and anyone who wants the ideas before the math). It does NOT fork the course — every stop is a normal page in Explorer reading mode. The route runs Story → Primer → Chapters 1–5 → the matching builds → a checkpoint quiz → an Explorer certificate. After that, the trail continues into Ch6+ with a signpost to the Math for Builders stream. Names exr*. */ const { useState: exrUseState, useEffect: exrUseEffect, useMemo: exrUseMemo } = React; /* ─── checkpoint bank — kid-level, covers ch1–5 + the story ─────────────── */ const EXR_BANK = [ { q: "In the water picture, VOLTAGE is…", opts: ["the push (how hard the pump squeezes)", "the pipe itself", "the colour of the water"], a: 0, why: "Voltage is the push — pressure from the battery-pump." }, { q: "CURRENT is…", opts: ["how much charge flows past each second", "how hot the wire is", "the length of the wire"], a: 0, why: "Current counts the flow — charge passing by per second." }, { q: "A RESISTOR is like…", opts: ["a pinch in the hose", "a bigger pump", "a bucket"], a: 0, why: "Pinch the hose and less water flows. Resistance fights flow." }, { q: "If the loop is broken anywhere, what flows?", opts: ["nothing at all", "half as much", "only the fast charges"], a: 0, why: "Charge needs a complete round trip — one gap stops everything." }, { q: "Make the resistor BIGGER and the flow…", opts: ["gets smaller", "gets bigger", "stays the same"], a: 0, why: "More pinch, less flow — that's Ohm's rule in words." }, { q: "Turn the battery UP and the flow…", opts: ["gets bigger", "gets smaller", "turns around"], a: 0, why: "More push, more flow." }, { q: "Two resistors in a row (series) — the current through them is…", opts: ["the same through both", "bigger in the first one", "zero in the second one"], a: 0, why: "One path = one flow. The same charges pass through both." }, { q: "Two resistors side by side (parallel) — the charges…", opts: ["split up, more taking the easy path", "all take the hard path", "stop and wait"], a: 0, why: "Parallel paths share the flow; the easier path gets more." }, { q: "A resistor doing lots of work gets…", opts: ["warm", "colder", "heavier"], a: 0, why: "Pushing charge through a pinch makes heat — that's power." }, { q: "A capacitor is like…", opts: ["a bucket that stores charge", "a one-way door", "a faster pump"], a: 0, why: "It fills up, holds charge, and can pour it back out later." }, { q: "A bigger bucket (capacitor) fills…", opts: ["slower", "faster", "at the same speed"], a: 0, why: "More room to fill = more time — that's the RC idea." }, { q: "An open switch…", opts: ["breaks the path so nothing flows", "makes the flow faster", "stores the charge"], a: 0, why: "Open = a gap in the loop. Closed = path complete." }, { q: "Two switches in a ROW both have to be on. That's…", opts: ["AND", "OR", "NOT"], a: 0, why: "In a row = AND: both gates must be open." }, { q: "Two switches SIDE BY SIDE — either one works. That's…", opts: ["OR", "AND", "NEITHER"], a: 0, why: "Side by side = OR: either path completes the loop." }, { q: "An LED lets charge through…", opts: ["one way only", "both ways", "only when it's dark"], a: 0, why: "It's a one-way light — backwards, it blocks." }, { q: "A schematic is…", opts: ["a clean drawing of a real circuit", "a photo of a breadboard", "a kind of battery"], a: 0, why: "The drawing and the board are the same circuit, two ways." }, ]; function exrShuffle(arr) { const a = arr.slice(); for (let i = a.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [a[i], a[j]] = [a[j], a[i]]; } return a; } /* ─── the checkpoint quiz ────────────────────────────────────────────────── */ const EXR_PICK = 8, EXR_PASS = 6; function ExrQuiz({ onPass, kids }) { const [seed, setSeed] = exrUseState(0); const qs = exrUseMemo(() => exrShuffle(EXR_BANK).slice(0, EXR_PICK).map(q => { const order = exrShuffle(q.opts.map((_, i) => i)); return { ...q, order, aAt: order.indexOf(q.a) }; }), [seed]); const [answers, setAnswers] = exrUseState({}); // qIdx -> chosen opt position const answered = Object.keys(answers).length; const score = qs.reduce((s, q, i) => s + (answers[i] === q.aAt ? 1 : 0), 0); const done = answered === qs.length; const passed = done && score >= EXR_PASS; exrUseEffect(() => { if (passed) onPass(); }, [passed]); return (
{qs.map((q, i) => { const chosen = answers[i]; return (
{String(i + 1).padStart(2, "0")} {q.q}
{q.order.map((optIdx, pos) => { const isChosen = chosen === pos, isRight = pos === q.aAt; let border = "var(--rule)", bg = "transparent"; if (chosen != null && isChosen) { border = isRight ? "#1fc463" : "#d23f34"; bg = isRight ? "rgba(31,196,99,0.08)" : "rgba(210,63,52,0.08)"; } if (chosen != null && !isChosen && isRight) border = "#1fc463"; return ( ); })}
{chosen != null && (
{chosen === q.aAt ? "✓ " : "✗ "}{q.why}
)}
); })} {done && (
{score} / {qs.length} {passed ? "You passed the Explorer Checkpoint! Your certificate is below." : `You need ${EXR_PASS} to pass — the questions reshuffle every try.`} {!passed && ( )}
)}
); } /* ─── the certificate (capstone.css classes) ─────────────────────────────── */ function ExrCertificate({ date }) { return (
Fathohm
Explorer Engineer
· The Explorer Route ·
This certifies that the bearer has walked the Explorer Route — the story, the ideas of push, flow, pinch, buckets and switches, real circuits built and working — and passed the Explorer Checkpoint.
Checkpoint passed
Awarded {date}
Ω
Back to course
); } /* ─── route step list ────────────────────────────────────────────────────── */ function ExrStep({ num, title, note, items, progress }) { return (
{num}

{title}

{note &&

{note}

}
{items.map(it => { const st = progress[it.n]; return ( {st === "done" ? "✓" : st === "in-progress" ? "…" : "○"} {it.t} ); })}
); } function ExplorerRoute() { const [t, setTweak] = window.useTweaks({ audience: "kids", theme: "paper" }); window.useCrossChapterPersistence(t, setTweak); exrUseEffect(() => { document.body.setAttribute("data-theme", t.theme); }, [t.theme]); const kids = t.audience === "kids"; const progress = window.useProgressState(); const [cert, setCert] = exrUseState(() => { try { return JSON.parse(localStorage.getItem("hte-explorer") || "null"); } catch { return null; } }); const onPass = () => { if (cert && cert.passed) return; const c = { passed: true, date: new Date().toLocaleDateString(undefined, { year: "numeric", month: "long", day: "numeric" }) }; try { localStorage.setItem("hte-explorer", JSON.stringify(c)); } catch {} setCert(c); }; const L0 = window.L0_CHAPTERS.filter(c => c.ready !== false); const primer = [{ n: "L0-00", t: "Before You Start", href: "primer.html" }]; const theory = window.ALL_CHAPTERS.slice(0, 5); const builds = window.L2_CHAPTERS.filter(c => c.ready !== false && (c.n === "L2-00" || (c.applies && parseInt(c.applies, 10) <= 5))); const tools = [{ n: "_lab", t: "Circuit Lab", href: "circuit-lab.html" }, { n: "_wb", t: "The Workbench", href: "sandbox.html" }]; return ( <> setTweak("audience", v)} />
a complete trail · no heavy math

The Explorer Route

{kids ? <>A start-to-finish adventure: the story of how people tamed electricity, the five big ideas, and real circuits you build and light up yourself. Finish the trail, pass the checkpoint, and the Explorer Engineer certificate is yours. : <>A guaranteed-finishable arc for younger learners: the story, chapters 1–5 in Explorer reading mode, and the matching hands-on builds — everything before the course starts leaning on algebra. It ends with its own checkpoint and certificate.}

{kids ? <>Tip: every page has an Explorer / Engineer switch at the top. Explorer keeps it plain — flip to Engineer any time you're curious. : <>The route doesn't fork the course — every stop is a normal page with the Explorer/Engineer toggle. A kid who outgrows Explorer flips one switch and the same pages deepen.}

{/* checkpoint */}
★

The Explorer Checkpoint

{kids ? <>Eight questions, all ideas — no math. Get six right and you've earned it. Try as many times as you like. : <>Eight concept questions drawn from a larger bank, {EXR_PASS} to pass, unlimited retries. Passing stores the certificate on this device.}

{cert && cert.passed ? : }
{/* where the trail continues */}
the trail continues

{kids ? <>Chapter 6 is where the real magic starts — the transistor, the tiny valve inside every computer. It uses a bit more number-work. When you're ready, warm up with Math for Builders (short and friendly, promise), then head to Chapter 6. : <>From Chapter 6 the course starts using light algebra (Ohm's law rearrangement, powers of ten). The Math for Builders stream (5 × 10 min) covers exactly that toolkit — take it alongside, then continue to Chapter 6 · The Transistor. Explorer mode stays available the whole way.}

); } ReactDOM.createRoot(document.getElementById("root")).render();