/* chapter-l2-language.jsx — Level 2 · opener: The Language (reading schematics). Three beats: the alphabet of symbols, tracing the current round a loop, and the heart — the same circuit shown as a schematic AND as the real board, cross-highlighted. Builds on schematic-kit.jsx + schematic-actualize.jsx. */ const { useState, useEffect, useRef } = React; const LANG_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "theme": "paper", "audience": "adult" }/*EDITMODE-END*/; function App() { const [t, setTweak] = useTweaks(LANG_TWEAK_DEFAULTS); useCrossChapterPersistence(t, setTweak); useEffect(() => { document.body.setAttribute("data-theme", t.theme); }, [t.theme]); const kids = t.audience === "kids"; const navItems = [ { id: "cover", label: "Cover" }, { id: "why", label: kids ? "Why?" : "Why diagrams" }, { id: "alphabet", label: kids ? "Symbols" : "The alphabet" }, { id: "loop", label: kids ? "Trace it" : "Read a loop" }, { id: "actualize", label: kids ? "Build vs draw" : "Schematic ↔ board" }, { id: "quiz", label: "Quiz" }, { id: "whats-next", label: "What's next" }, ]; return ( <> setTweak("audience", v)} />
{/* Cover */}
Level 2 · applied · Opener

The language.

How to read a schematic — and see it built
{kids ? <>Before you build, you need to read the map. Engineers draw circuits with little symbols. Learn the symbols, trace the flow, then watch a drawing turn into a real board. : <>Every build in Level 2 starts as a diagram. A schematic is just a circuit's map — symbols for parts, lines for wires. Learn the alphabet, trace the current, then watch each drawing become the physical breadboard it describes.}
{/* Why diagrams */}
§ 01 · why a drawing, not a photo

{kids ? "A map, not a photo." : "A schematic is a map."}

{kids ? <>A photo of a circuit is messy — wires everywhere. A schematic throws away the mess and keeps what matters: what connects to what. Same circuit, drawn neat, every time. : <>A photo shows tangled wires and hides what's actually connected. A schematic strips that away and keeps only the logic: which part joins which, in what order. It doesn't care where parts physically sit — only how current can flow.}

{kids ? "Keeps" : "It keeps"}
  • {kids ? "Which parts are in the circuit" : "Every part, as a symbol"}
  • {kids ? "What joins to what" : "Exactly what connects to what"}
  • {kids ? "Which way the flow goes" : "Direction & order of the loop"}
{kids ? "Drops" : "It drops"}
  • {kids ? "Where wires physically go" : "Physical wire routing & length"}
  • {kids ? "What the parts look like" : "What components look like"}
  • {kids ? "The mess!" : "Scale, position, clutter"}
{/* The alphabet */}
§ 02 · the alphabet · every symbol

{kids ? "The symbols." : "Learn the alphabet."}

{kids ? <>Each part has its own little drawing. Tap one to learn what it is and what it does. : <>A dozen symbols cover almost everything you'll meet. Tap any to see what it represents and how to read it.}

{/* Read a loop */}
§ 03 · reading is following the loop

{kids ? "Follow the flow." : "Reading = following the current."}

{kids ? <>To read a schematic, start at the battery's + and follow the line all the way round, naming each part you pass. Watch the dot do it. : <>Don't stare at the whole thing — trace it. Start at +, follow the wire through each symbol back to −. If the loop is broken anywhere, nothing flows. Watch the charge make the round trip.}

{/* Schematic ↔ board — the heart */}
§ 04 · the drawing, actualized

{kids ? "From drawing to real board." : "See the schematic become the board."}

{kids ? <>Here's the same circuit twice: the drawing on the left, the real breadboard on the right. Touch a part in either one — it lights up in both. That's how a diagram turns into something you can hold. : <>The same circuit, side by side: the schematic and the breadboard that realises it. Hover or tap any part — symbol, board component, or chip — and its match lights up in the other view. This is the translation you'll do for every build in Level 2.}

{kids ? <>Want more? The Circuit Lab has a whole shelf of circuits drawn both ways at once — with the charges really moving. Change anything and watch it happen in both views. : <>Drill the translation: the Circuit Lab runs one live simulation behind both views — resistors, switches, LEDs, capacitors — so every action you take lands in the schematic and on the board at the same instant.}

Open the Circuit Lab →
You can read a circuit map now — the symbols, the loop, and how a drawing becomes a real board. Next: grab parts and build your first one for real. : <>You can read a schematic, trace its current, and translate it into a physical build. Now do it for real — your first breadboard circuit is next.} prevHref="map.html" prevLabel="Course map" nextHref="breadboard.html" nextLabel="L2 · The Breadboard" />
); } const LANG_QUIZ_ADULT = [ { q: "A schematic mainly preserves…", kind: "concept", options: ["where each wire physically runs", "what connects to what", "the size of each part", "the colour of the board"], correct: 1, explain: "A schematic captures the logical connections — not physical position, size, or routing." }, { q: "Two crossing lines with a solid dot at the crossing means…", kind: "concept", options: ["they're joined", "they pass over, unconnected", "a resistor", "an error"], correct: 0, explain: "A dot = a junction (joined). No dot at a crossing = the wires pass without connecting." }, { q: "On a battery symbol, the long thin line is the…", kind: "concept", options: ["− terminal", "+ terminal", "ground", "fuse"], correct: 1, explain: "Long thin line = +, short fat line = −. Stacked pairs mean more cells." }, { q: "The triangle-and-bar LED symbol shows current flowing…", kind: "concept", options: ["either way", "in the direction the triangle points", "against the triangle", "only when off"], correct: 1, explain: "The triangle points the forward (conducting) direction; the bar is the cathode (−)." }, { q: "For any current to flow, the circuit must be…", kind: "concept", options: ["a closed loop", "a straight line", "grounded twice", "drawn in colour"], correct: 0, explain: "Break the loop anywhere and flow stops — current needs a complete path back to the source." }, { q: "On the breadboard, the schematic's resistor became…", kind: "concept", options: ["the 9 V block", "the beige banded part bridging two rows", "the domed LED", "a bare wire"], correct: 1, explain: "The rectangle symbol maps to the physical beige, colour-banded resistor." }, { q: "Two parallel plates on a branch is the symbol for a…", kind: "concept", options: ["resistor", "capacitor", "switch", "diode"], correct: 1, explain: "Two plates = a capacitor — it stores charge. A + by a plate means it's polarised." }, { q: "Why learn schematic ↔ board translation before building?", kind: "concept", options: ["it looks professional", "every build starts as a diagram you must realise", "it's required by law", "boards can't be photographed"], correct: 1, explain: "You read the schematic, then place the matching parts — that translation is the core build skill." }, ]; const LANG_QUIZ_KIDS = [ { q: "A schematic is like a…", kind: "concept", options: ["photo", "map", "song", "recipe for cake"], correct: 1, explain: "It's a neat map of the circuit — what joins to what, with no mess." }, { q: "On a battery symbol, the long line is the…", kind: "concept", options: ["− side", "+ side", "middle", "switch"], correct: 1, explain: "Long line = + (the push side). Short fat line = −." }, { q: "A dot where two wires cross means they are…", kind: "concept", options: ["joined", "not touching", "broken", "the same colour"], correct: 0, explain: "A dot = the wires are joined together at that spot." }, { q: "To read a circuit you should…", kind: "concept", options: ["stare at all of it", "follow the loop from + to −", "start in the middle", "count the dots"], correct: 1, explain: "Start at + and follow the line round, naming each part you pass." }, { q: "If the loop is broken somewhere, the flow…", kind: "concept", options: ["goes faster", "stops", "turns blue", "doubles"], correct: 1, explain: "No complete loop = no flow. The path has to go all the way round." }, { q: "The little box symbol on the wire is a…", kind: "concept", options: ["light", "resistor (pinch)", "battery", "bucket"], correct: 1, explain: "The rectangle is the resistor — the pinch that slows the flow." }, { q: "Two flat lines stacked on a branch is a…", kind: "concept", options: ["resistor", "capacitor (bucket)", "switch", "wire"], correct: 1, explain: "Two plates = the capacitor, the little bucket that fills and empties." }, { q: "The triangle light only glows when it's…", kind: "concept", options: ["the right way round", "upside down", "cold", "painted"], correct: 0, explain: "An LED is one-way — the flow must go the way the triangle points." }, { q: "The little rake/triangle symbol on a wire means…", kind: "concept", options: ["ground — the shared zero-point everything is measured from", "a broken part", "more push", "a speaker"], correct: 0, explain: "Ground is just a shared zero — every other voltage in the drawing is measured against it." }, ]; ReactDOM.createRoot(document.getElementById("root")).render();