Open the valve, water flows. Close it, water stops. That's it.
A light switch on your wall is the exact same idea — only with
electricity. Flick it on, current flows, bulb glows. Flick it
off, no current, no glow.
) : (
<>
A switch is the simplest thing in electronics.
Two states. Open — the wire is broken, no current can flow.
Closed — the wire is whole, current flows like normal.
The water analogy: a valve in the pipe. Open valve, flow. Shut
valve, no flow.
We've been quietly assuming switches all along — every circuit
we drew had an implicit "battery is connected" state. Now we
make it explicit, and toggleable.
)}
{kids ? "On or off. Two choices. That's the whole gadget." : "Two states. From that simple kernel — your phone, your laptop, the internet."}
);
}
function OnOffBeat({ on, setOn, onView, kids }) {
const ref = useInViewCallback(onView);
return (
§ 02 · two states
Click it. Watch it happen.
{kids
? "Tap the buttons. The valve opens and closes. The bulb glows and goes dark."
: "Toggle the switch. Watch the whole circuit go from alive to dead and back."}
state
The switch is {on ? "CLOSED" : "OPEN"}.
The bulb is {on ? "LIT" : "DARK"}.
We can give the two states names:
"off" is 0, "on" is 1.
With just 0s and 1s
(called bits), you can do everything a computer does:
store pictures, send messages, play videos. Everything.
But you'd need billions of switches working together.
That's literally what a phone chip is.
) : (
<>
Once you commit to just two states, you've invented binary.
Off = 0. On = 1.
Every digital signal in every computer is built from this dichotomy.
Eight switches together hold a byte:{" "}
00000000 to{" "}
11111111. That's 256 distinct
patterns — enough to encode every Latin character.
A modern CPU has tens of billions of switches, each one
essentially a fancy version of the toggle you just flicked. The
whole digital world is this idea, repeated obsessively.
);
}
function LogicBeat({ a, b, setA, setB, onView, kids }) {
const ref = useInViewCallback(onView);
return (
§ 04 · combining switches
Two switches. Two ways to combine.
{kids
? <>Hook two switches into one circuit. Series means both have to be ON. Parallel means either one will do.
: <>Stick two switches in series and you've built an AND gate — the bulb lights only if both are closed. Wire them in parallel and you've built an OR — either one suffices.}
{!kids && (
AND, OR, plus a third gate called NOT (which inverts a
single input) is enough to build any digital function — adders,
multipliers, processors, the whole stack. This is the kernel of{" "}
Boolean algebra, invented by George Boole in 1854 and
retroactively perfect for computing.
);
}
function PlaygroundBeat({ on, setOn, V, setV, R, setR, onView, kids }) {
const ref = useInViewCallback(onView);
const I = on ? V / R : 0;
const P = V * I;
return (
§ 06 · all knobs unlocked
Drive it by hand.
{kids ? <>Toggle on and off. Slide everything else.
: <>The switch gates everything that came before — voltage, resistance, power. The switch decides if anything happens at all.}
state
{on ? <>I = {fmt(I, 2)} A · P = {fmt(P, 1)} W
: <>Switch open — nothing flows. The whole circuit is dead.}
);
}
/* ─── Worked example (adult): basement light ───────────────────────────── */
function WorkedExampleSection({ kids }) {
if (kids) return null;
return (
§ 07 · the two-way switch
A practical story: the staircase light.
A switch at the bottom of the stairs and another at the top —
either one can toggle the same light. Neither is "the
on switch." Both are full toggles.
The trick is a pair of SPDT (single-pole, double-throw)
switches — each one routes the wire down one of two paths. The
two paths cross at the bulb. The light is on when both switches
pick the same path, off when they pick opposite paths.
In logic terms, that's an XOR — exclusive or. Output is
1 if A ≠ B. The first circuit a kid wires correctly without
instructions feels like magic. It's just XOR.
XOR is the heart of binary addition. The "carry" bit when
summing 1+1=10 is exactly XOR's pattern. Half a CPU is built
from XOR.
);
}
/* ─── Quiz banks ──────────────────────────────────────────────────────── */
const ADULT_QUIZ = [
{
q: "A switch has how many useful states?", kind: "concept",
options: ["One", "Two: open and closed", "Three", "Infinitely many"],
correct: 1,
explain: "Open (no current) and closed (current flows). Two states — the seed of binary.",
},
{
q: "An open switch in a circuit means…", kind: "concept",
options: ["current flows freely", "the wire is broken, no current", "the voltage is zero", "the resistor melts"],
correct: 1,
explain: "Open = a gap in the loop. No complete path, so no current.",
},
{
q: "Two switches in SERIES light a bulb only when…", kind: "concept",
options: ["either is closed", "both are closed", "both are open", "neither is closed"],
correct: 1,
explain: "Series needs a continuous path — both must be closed. That's an AND gate.",
},
{
q: "Two switches in PARALLEL light a bulb when…", kind: "concept",
options: ["both are closed only", "either one (or both) is closed", "both are open", "never"],
correct: 1,
explain: "Parallel gives two paths — either closed switch completes the circuit. That's an OR gate.",
},
{
q: "Why are switches the foundation of digital computers?", kind: "concept",
options: [
"They're cheap",
"Two states map to 0 and 1, and gates build any logic",
"They glow nicely",
"They store water",
],
correct: 1,
explain: "On/off = 1/0. Combine switches into AND/OR/NOT and you can build any digital function.",
},
{
q: "Eight switches together can represent how many distinct patterns?", kind: "math",
options: ["8", "16", "64", "256"],
correct: 3,
explain: "Each switch doubles the count: 2⁸ = 256 patterns. That's one byte.",
},
{
q: "A NOT gate (inverter) does what to its input?", kind: "concept",
options: ["copies it", "flips it: 0→1, 1→0", "doubles it", "deletes it"],
correct: 1,
explain: "NOT inverts: a 1 becomes 0 and a 0 becomes 1. With AND/OR/NOT you can build anything.",
},
{
q: "A stairway light has a switch at the top AND the bottom. Which one is 'the on switch'?",
kind: "concept",
options: ["The bottom one", "The top one", "Neither — each is a full toggle; the light responds to the COMBINATION", "Whichever you flip first"],
correct: 2,
explain: "Two SPDT switches each route the wire down one of two paths. The bulb lights when both pick the same path — so flipping EITHER switch toggles the light. That's XOR in your wall.",
},
{
q: "An XOR gate outputs 1 when…",
kind: "concept",
options: ["both inputs are 1", "both inputs are 0", "its inputs are different", "its inputs are equal"],
correct: 2,
explain: "Exclusive-or: 1 if A ≠ B. It's the stairway-light circuit — and the heart of binary addition (the carry bit is XOR's pattern).",
},
{
q: "Two switches, four gates' worth of behavior. What decides whether they act as AND or OR?",
kind: "concept",
options: ["The brand of switch", "How they're WIRED — series makes AND, parallel makes OR", "The battery voltage", "The bulb's resistance"],
correct: 1,
explain: "Same parts, different shape: series demands both closed (AND); parallel accepts either (OR). Logic is topology.",
},
];
const KIDS_QUIZ = [
{
q: "A switch is like a…", kind: "concept",
options: ["bucket", "valve", "battery", "magnet"],
correct: 1,
explain: "A valve! Open lets water through, closed stops it.",
},
{
q: "When the switch is OFF (open), the bulb is…", kind: "concept",
options: ["bright", "dark", "warm", "blue"],
correct: 1,
explain: "Open switch = no flow = dark bulb.",
},
{
q: "We can call the two states by numbers. Off is — and on is —.", kind: "concept",
options: ["1 and 2", "0 and 1", "A and B", "yes and maybe"],
correct: 1,
explain: "Off = 0, on = 1. Those two numbers build everything a computer does!",
},
{
q: "Two switches in a ROW (series). The bulb lights when…", kind: "concept",
options: ["either one is on", "both are on", "both are off", "never"],
correct: 1,
explain: "In a row, the water must get through BOTH — so both have to be on.",
},
{
q: "Two switches SIDE BY SIDE (parallel). The bulb lights when…", kind: "concept",
options: ["both are off", "either one is on", "only both are on", "never"],
correct: 1,
explain: "Two roads — either open path lets the water through.",
},
{
q: "How many states does a light switch have?", kind: "concept",
options: ["one", "two", "ten", "a hundred"],
correct: 1,
explain: "Just two: on and off. That's all you need to build a computer!",
},
{
q: "Computers think using only…", kind: "concept",
options: ["colors", "0s and 1s", "letters", "pictures"],
correct: 1,
explain: "Everything inside is just 0s and 1s — offs and ons — billions of them.",
},
{
q: "The stairs have a switch at the top AND the bottom. Flipping EITHER one…",
kind: "concept",
options: ["does nothing", "toggles the light", "breaks the light", "only works at night"],
correct: 1,
explain: "Neither switch is 'the on switch' — each one flips the light from wherever you are. Clever wiring!",
},
{
q: "With 8 switches you can make enough patterns for…",
kind: "concept",
options: ["just 8 things", "every letter of the alphabet and more", "only numbers", "nothing useful"],
correct: 1,
explain: "Each switch doubles the patterns: 8 switches = 256 patterns — enough for every letter, number, and symbol!",
},
];
/* ─── App ─────────────────────────────────────────────────────────────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "paper",
"showCircuit": true,
"audience": "adult"
}/*EDITMODE-END*/;
function App() {
const [t, setTweak] = useTweaks(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: "begin", label: "Open/closed" },
{ id: "on-off", label: "Two states" },
{ id: "binary", label: kids ? "0 and 1" : "Binary" },
{ id: "logic", label: kids ? "Two switches" : "Logic" },
{ id: "predict", label: "Predict" },
{ id: "playground", label: "Playground" },
...(kids ? [] : [{ id: "example", label: "Stairs" }]),
{ id: "practice", label: "Practice" },
{ id: "quiz", label: "Quiz" },
{ id: "whats-next", label: "What's next" },
];
return (
<>
setTweak("audience", v)} />
The Switch.}
chapterSub="Chapter 5 · On, off, and binary"
kids={kids}
lede={kids
? <>The simplest gadget in electronics: on or off. Two states. Believe it or not, that's enough to build every computer ever made.
: <>Two states. From that brutally simple idea, the entire digital revolution. We'll meet binary, hint at logic gates, and set up the punchline for Chapter 6 — the thing that automates the switch.
} />
{
const n = rng.int(3, 5, 1);
return {
q: { adult: `How many distinct on/off combinations can ${n} switches make?`, kids: `Each switch is on or off. With ${n} switches, how many different combinations?` },
unit: "", answer: Math.pow(2, n),
hint: "Each switch doubles the count: 2 × 2 × …",
solution: { adult: `Each switch has 2 states, so 2^${n} = ${Math.pow(2, n)} combinations.`, kids: `${Array(n).fill(2).join(" × ")} = ${Math.pow(2, n)}.` } };
},
(rng) => {
const n = rng.int(3, 5, 1);
return {
q: { adult: `${n} switches are wired in series (an AND gate). Of all ${Math.pow(2, n)} combinations, how many light the lamp?`, kids: `All ${n} switches must be ON for the light (that's AND). Out of ${Math.pow(2, n)} combos, how many work?` },
unit: "", answer: 1,
hint: "AND needs every switch closed — only one combination does that.",
solution: { adult: `Series = AND: only the all-closed combination conducts. That's 1 of ${Math.pow(2, n)}.`, kids: "Only 'all on' works — just 1." } };
},
(rng) => {
const n = rng.int(2, 4, 1);
return {
q: { adult: `${n} switches are wired in parallel (an OR gate). Of the ${Math.pow(2, n)} combinations, how many light the lamp?`, kids: `With OR, the light works if any switch is on. Out of ${Math.pow(2, n)} combos, how many?` },
unit: "", answer: Math.pow(2, n) - 1,
hint: "OR fails only when every switch is open.",
solution: { adult: `Parallel = OR: it lights unless all are open, so ${Math.pow(2, n) - 1} of ${Math.pow(2, n)} combinations work.`, kids: `Only 'all off' fails — so ${Math.pow(2, n) - 1} of ${Math.pow(2, n)} work.` } };
},
]} />
{kids && (
Finished chapters 1–5 and the builds? That's the whole Explorer Route —
go pass the checkpoint and claim your Explorer Engineer certificate.
)}
You're one chapter from the punchline of all electronics.
: <>You've got every digital function in principle — but flipping switches by hand doesn't scale. Next: a switch that's flipped by electricity itself. That's the trick that built everything.}
prevHref="chapter4.html"
prevLabel="Chapter 4"
nextHref="chapter6.html"
nextLabel="Chapter 6 · The Transistor" />
);
}
ReactDOM.createRoot(document.getElementById("root")).render();