A wire is a pipe. A battery is a barrel of water held up high.
Pinching the pipe is just like adding a resistor to a wire.
Anything water does, electricity does too — you just can't see it.
So we'll look at the water and trust that the wire is doing the same.
) : (
<>
An electron is a very tiny drop of water.
Not literally. But the math is the same, the intuition is the same,
and once you see the resemblance you'll never un-see it.
A wire is a pipe. A battery is a barrel of water held up high.
A resistor is a pinch in the pipe. The thing we care about — the thing
that does work at the other end — is the flow.
)}
"Voltage pushes. Current flows. Resistance gets in the way."
{kids ? "wait — where does the water go?" : "one honest note about the picture"}
{kids
? <>We let the water splash out of the pipe so you can see it move. But a real circuit is a loop — look at the wires in the ELECTRICITY picture (on a phone, tap the CIRCUIT tab above the animation). The battery is like a pump: it scoops the water back up to the top of the barrel, again and again. The water never runs out, and that's why the electrons just keep circling around.
: <>The animation lets the water spill from the pipe so the flow is easy to watch — but a real circuit is a closed loop: see the ELECTRICITY panel below the water scene (on a phone, flip to it with the CIRCUIT tab). Picture the battery as a pump: it catches the spent water at the bottom and lifts it back up to the barrel, over and over. The water is never used up — only its pressure is spent crossing the pinch. Charge behaves the same way: the same electrons circle the loop forever, and the battery just keeps re-energizing them.}
The barrel is at {fmt(v, 1)} V right
now. The taller the water column, the harder it pushes down on
the pipe.
A tiny AA battery is a 1.5 V barrel.
A wall outlet is a giant 120 V tower —
don't stick your finger in it.
) : (
<>
Think of a barrel held up high. The taller the water column, the
harder it presses down on whatever's at the spigot. That{" "}
pressure is voltage.
A AA battery is a 1.5 V barrel.
A car battery is a 12 V reservoir.
Same idea — different ceiling.
Aside. "Volt" is named after Alessandro Volta, who in 1799
stacked discs of copper and zinc with brine-soaked cardboard and
got electricity to come out.
)}
try it · fill the barrel →
);
}
function CurrentBeat({ v, r, onView, kids }) {
const ref = useInViewCallback(onView);
const I = v / r;
return (
§ 03 · the flow
I · amperes
Current is what comes out.
{kids ? (
<>
Right now, {fmt(I, 2)} A of
water is rushing through the pipe. "A" means amperes, or{" "}
amps for short — the count of how fast it flows.
More push (V), more flow. Tighter pinch (R), less flow.
You don't drag a "current" slider — current is what happens{" "}
when you mess with the other two.
And here's how to SEE it: the wavy streaks inside the pipe are{" "}
the current. Crank the push way up and they sprint. Tighten the pinch
and they slow to a crawl — the same water, just barely creeping along.
Faster streaks = more water passing every second = more current. Try it!
Current is the answer.
) : (
<>
Stand under the spigot. How fast is the water actually moving
through? That's current.
In a wire, it's the count of electrons passing a point each second.
One ampere ≈ 6.24 × 10¹⁸ electrons per
second. (Yes. Per second.)
You never set current directly. You choose the pressure and you
choose the resistance — the current is simply whatever flow those
two allow.
The animation makes this literal: the drifting streaks in the pipe
move at the water's speed, and in a pipe of fixed size, speed and
flow are the same thing. Drag V up and watch them sprint; drag R up
and watch the same streaks slow to a crawl. When the streaks barely
creep, barely any charge is passing — that is low current.
The pipe is pinched to {fmt(r, 1)} Ω right
now. Ω is the Greek letter omega — that's the unit for
squeeze.
Bigger Ω, tighter pinch, less water gets through. A toaster's
wire has lots of Ω, and that's why it gets hot — squeezing
flow turns into heat.
Look at the pipe's color: it's deep (lots of push) before the
pinch, and pale after it. The pinch is where the push gets used up.
) : (
<>
Pinch the pipe. Less water gets through, even though the barrel
hasn't moved. In a circuit, that pinch is a resistor.
Every wire has a little. Every component has its own. A toaster
filament has a lot — and on purpose, because squeezing flow is how
we make heat (and light, and motion).
Named for Georg Ohm, who in 1827 wrote down the relationship we're
about to meet. Nobody believed him for ten years.
Notice the tint along the pipe: deep (high pressure) before
the pinch, pale after it. The flow rate is the same on both sides — what the
pinch spends is the push.
)}
try it · tighten the pinch
);
}
/* New predict-then-reveal beat — sits BEFORE Ohm's Law */
function PredictBeat({ onView, kids }) {
const ref = useInViewCallback(onView);
return (
§ 05 · check your gut
Before you scroll — a question.
You've seen push, flow, and squeeze in motion. Without scrolling
down to the answer, what's your prediction?
);
}
function OhmsLawBeat({ v, r, onView, kids }) {
const ref = useInViewCallback(onView);
const I = v / r;
if (kids) {
return (
§ 06 · the three friends
V, I, and R are friends.
When you change one, the others change too. That's the secret of
how everything electric works.
{[
{ sym: "V", color: "var(--water)", name: "Volts", desc: "How hard the push." },
{ sym: "I", color: "var(--current)", name: "Amps", desc: "How fast the flow." },
{ sym: "R", color: "var(--ink)", name: "Ohms", desc: "How tight the pinch." },
].map(t => (
{t.sym}
{t.name}
{t.desc}
))}
right now
Barrel: {fmt(v, 1)} V.
Pinch: {fmt(r, 1)} Ω.
Flow: {fmt(I, 2)} A.
Pump up the barrel → flow gets faster.
Squeeze the pipe tighter → flow gets slower.
That's it. That's the whole trick.
);
}
return (
§ 06 · the law
One equation, three names.
Ohm noticed something obvious-in-hindsight: the push, the flow, and
the squeeze are locked together by a single relationship.
V=IR
V volts · pushI amperes · flowR ohms · squeeze
Read it any of three ways. Same fact, different hat:
{[
{ eq: <>V=IR, hint: "Find the push." },
{ eq: <>I=VR, hint: "Find the flow." },
{ eq: <>R=VI, hint: "Find the squeeze." },
].map((x, i) => (
{x.eq}
{x.hint}
))}
current bookkeeping
{fmt(v, 1)}V={fmt(I, 2)}A×{fmt(r, 1)}Ω
);
}
function PlaygroundBeat({ v, r, setV, setR, onView, kids }) {
const ref = useInViewCallback(onView);
const I = v / r;
const P = v * I;
const tone = useToneFollow();
const idle = React.useRef(null);
// "hear the current": pitch tracks I, loudness tracks power; fades after idle
const sing = (nv, nr) => {
const cur = nv / nr;
tone.set(Math.min(1, cur / 24), Math.min(1, (nv * cur) / 60));
if (idle.current) clearTimeout(idle.current);
idle.current = setTimeout(() => tone.stop(), 280);
};
const onV = (x) => { setV(x); sing(x, r); };
const onR = (x) => { setR(x); sing(v, x); };
return (
§ 07 · all knobs unlocked
Now you turn the knobs.
{kids
? "Drag both sliders. Make the bulb glow as bright as you can."
: "Push harder. Squeeze tighter. Both at once. The bookkeeping always balances, and the bulb glows in proportion to power — voltage times current."
}
{kids ? (
power · how bright the bulb is
{fmt(P, 1)} watts of glow
Power is how much real stuff is happening — light, heat,
motion. Next chapter: more on power.
) : (
power · what the bulb feels
P=V×I={fmt(P, 1)}watts
Watts is the answer to "how much actual work is happening?" —
heat, light, motion, all of it. We'll dig in next chapter.
{kids ? <>Follow one drop around the loop. : <>Follow one charge around the loop.}
{kids
? <>The barrel-and-pipe let the water splash out so you could see it. A real circuit is a loop that never spills. Each dot is a bit of charge, and they go round forever — none get used up. Watch the colour: a dot leaves the battery bright (full of push) and comes back pale (push spent), and the battery fills it up again.
: <>Each dot is a particle of charge, and they ride the loop forever — none are ever used up. What changes is the colour: a charge leaves the battery bright, loaded with energy. Crossing the pinch it hands that energy over — as heat — and coasts back pale and empty, until the battery reloads it for another lap.}
{kids ? "“Full of push”" : "“Full of push”"} = the charge is carrying the energy the battery just gave it.“Push spent” = it handed that energy to the resistor and coasts back empty for a refill.The charge is never consumed — only its energy is spent and renewed.
They’re already there. A wire is packed wall-to-wall with free electrons before you connect
anything — like a pipe that’s already full of water. The battery doesn’t supply the
charges; it just pushes the ones already in the wire, and the whole loop starts shuffling at once.
So a bigger battery doesn’t mean more electrons. The water picture can mislead here — a taller
barrel looks like “more water,” but a bigger battery only pushes harder (more voltage) or
longer (more stored energy). The number of charges in the wire never changes.
{kids
? <>Look inside the pinch: it's packed with stuff! The dots have to weave past every little atom of the material. Turn the squeeze up and the atoms pack in tighter — more bumping, slower flow, and every bump makes a little heat.
: <>Zoom into the pinch and you'll see it's a material — an ordered lattice of atoms the electrons must weave through. Raise the resistance and the lattice packs denser — more collisions, less flow. Each collision hands energy to the lattice, which is exactly why resistance makes heat. Watch the wisps rise off the pinch: every bit of push the battery pours in leaves the loop right there.}
The two gates always read the same. Whatever flows past Gate A flows past Gate B — once the
loop settles, the charge isn’t consumed on the way, it just circulates. The Flow readout is the
current itself, I = V ÷ R: more push raises it, a tighter pinch lowers it.
The faint glow at the pinch is heat — energy the charges drop there. How much, and the V×I tug-of-war behind it, is Chapter 3.
);
}
/* ─── Quiz question banks ─────────────────────────────────────────────── */
const ADULT_QUIZ = [
{
q: "In the water analogy, what does voltage correspond to?", kind: "concept",
options: ["The flow rate of water", "The water pressure / push", "The width of the pipe", "The temperature of the water"],
correct: 1,
explain: "Voltage is the push — the pressure behind the flow. Flow rate is current; pipe width is resistance.",
},
{
q: "Ohm's law is written V = I × R. Solved for current, that's:", kind: "math",
options: ["I = V × R", "I = R ÷ V", "I = V ÷ R", "I = V − R"],
correct: 2,
explain: "Divide both sides by R: I = V / R. More push or less squeeze both raise the current.",
},
{
q: "You hold resistance fixed and double the voltage. The current…", kind: "math",
options: ["doubles", "halves", "stays the same", "quadruples"],
correct: 0,
explain: "With R fixed, I = V/R is linear in V. Double V → double I.",
},
{
q: "A 12 V source pushes current through a 4 Ω resistor. What's the current?", kind: "math",
options: ["48 A", "3 A", "0.33 A", "16 A"],
correct: 1,
explain: "I = V/R = 12 / 4 = 3 A. (48 would be V×R, a common slip.)",
},
{
q: "Why is current called 'an answer, not a knob'?", kind: "concept",
options: [
"Because you can never measure it",
"Because it's fixed by the wire's color",
"Because it's whatever voltage and resistance together produce",
"Because it only exists in water, not wires",
],
correct: 2,
explain: "You set V (the push) and R (the squeeze). Current is the result: I = V/R. You don't dial it directly.",
},
{
q: "Resistance is measured in…", kind: "concept",
options: ["volts (V)", "amperes (A)", "ohms (Ω)", "watts (W)"],
correct: 2,
explain: "Resistance is in ohms (Ω). Volts measure push, amps measure flow, watts measure power.",
},
{
q: "A 9 V battery drives 3 A through a load. The load's resistance is…", kind: "math",
options: ["27 Ω", "3 Ω", "12 Ω", "6 Ω"],
correct: 1,
explain: "R = V / I = 9 / 3 = 3 Ω.",
},
{
q: "Which change would LOWER the current, with everything else fixed?", kind: "concept",
options: ["Raise the voltage", "Increase the resistance", "Add a second battery", "Shorten the wire"],
correct: 1,
explain: "I = V/R — a bigger squeeze (R) means less flow. Raising V would do the opposite.",
},
{
q: "Where do the charges that flow in a wire come from?", kind: "concept",
options: [
"The battery manufactures them and injects them into the wire",
"They're already in the wire — the battery just pushes them",
"They come from the air around the wire",
"They're created by the resistor as it heats up",
],
correct: 1,
explain: "A wire is packed wall-to-wall with free electrons before you connect anything. The battery doesn't supply charges; it pushes the ones already there, and the whole loop starts shuffling at once.",
},
{
q: "As a charge goes around the loop, what actually gets used up?", kind: "concept",
options: [
"The charge itself — electrons are consumed by the bulb",
"Nothing — circuits don't use anything up",
"The charge's energy — the charge itself survives and comes back for a refill",
"The wire, which slowly dissolves",
],
correct: 2,
explain: "Charge is conserved — the same charges circulate forever. What's spent is the ENERGY each charge carries: delivered to the resistor, then topped up again at the battery.",
},
{
q: "A bigger battery (more voltage) means…", kind: "concept",
options: [
"more electrons in the wire",
"a harder push on the same electrons",
"faster-moving electrons only, with less current",
"thicker wire",
],
correct: 1,
explain: "The number of charges in the wire never changes. A bigger battery pushes the same charges harder — more voltage, not more electrons.",
},
{
q: "Why does a real circuit have to be a closed loop?", kind: "concept",
options: [
"So the charges can splash out at the end",
"It doesn't — a one-way wire works fine",
"Because charges aren't consumed — they must circulate back to the battery",
"To keep the wire from overheating",
],
correct: 2,
explain: "Nothing gets spilled or consumed — the same charges go round and round. Break the loop anywhere and the whole flow stops.",
},
{
q: "A charge leaves the battery 'bright' and returns 'pale.' What faded?", kind: "concept",
options: [
"Its electric charge",
"Its size",
"Its speed",
"Its energy — handed to the resistor along the way",
],
correct: 3,
explain: "Bright = carrying fresh energy from the battery; pale = energy delivered. The charge itself is unchanged — the battery refills it and around it goes again.",
},
];
const KIDS_QUIZ = [
{
q: "Voltage is like… what, in the water world?", kind: "concept",
options: ["How fast the water flows", "How hard the water pushes", "How wide the pipe is", "How cold the water is"],
correct: 1,
explain: "Voltage is the push! A taller barrel pushes harder.",
},
{
q: "What is current?", kind: "concept",
options: ["How hard it pushes", "How tight the pinch is", "How fast the water actually flows", "The color of the wire"],
correct: 2,
explain: "Current is the flow — how much water is actually rushing through.",
},
{
q: "You push HARDER (more voltage) but keep the same pinch. The flow…", kind: "concept",
options: ["gets bigger", "gets smaller", "stops completely", "stays exactly the same"],
correct: 0,
explain: "More push on the same pinch = more flow. Push harder, more comes out!",
},
{
q: "You squeeze the pipe TIGHTER but push the same. The flow…", kind: "concept",
options: ["gets bigger", "gets smaller", "gets hotter", "turns blue"],
correct: 1,
explain: "A tighter pinch lets less through. Tighter squeeze = less flow.",
},
{
q: "What are the three friends from this chapter?", kind: "concept",
options: [
"Red, green, and blue",
"Push (V), flow (I), and squeeze (R)",
"Hot, cold, and warm",
"Up, down, and sideways",
],
correct: 1,
explain: "V is the push, I is the flow, R is the squeeze. Change one and the others follow!",
},
{
q: "Ohms (Ω) measure…", kind: "concept",
options: ["how hard the push is", "how tight the pinch is", "how fast it flows", "how heavy it is"],
correct: 1,
explain: "Ohms tell you how tight the squeeze is. Bigger Ω = tighter pinch = less flow.",
},
{
q: "You can't drag a 'flow' slider directly because flow…", kind: "concept",
options: ["doesn't exist", "comes FROM the push and the pinch", "is always the same", "is too fast"],
correct: 1,
explain: "Flow is the answer! Set the push and the pinch, and the flow comes out of those two.",
},
{
q: "Where do the tiny charges in a wire come from?", kind: "concept",
options: [
"The battery makes new ones",
"They're already inside the wire, waiting",
"They fall in from the air",
"You have to pour them in",
],
correct: 1,
explain: "The wire is already FULL of tiny charges — like a pipe already full of water. The battery just gives them a push!",
},
{
q: "Do the charges get used up as they go around?", kind: "concept",
options: [
"Yes — the bulb eats them",
"No — the same ones go around forever; only their push gets spent",
"Only the blue ones get used up",
"Yes — that's why batteries die",
],
correct: 1,
explain: "The charges never get used up! They hand over their energy, come back tired, and the battery fills them up again.",
},
{
q: "Why does the wire have to make a full loop back to the battery?", kind: "concept",
options: [
"So the charges can come back for a refill",
"To make the wire longer",
"It doesn't — half a loop works too",
"To keep the battery warm",
],
correct: 0,
explain: "The charges go round and round — if you break the loop anywhere, everything stops.",
},
];
/* ─── App ───────────────────────────────────────────────────────────── */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"theme": "paper",
"showCircuit": true,
"audience": "adult"
}/*EDITMODE-END*/;
/* ─── tiny pinch toy for the cover — first interaction in five seconds ── */
function CoverPinchDemo({ kids }) {
const [r, setR] = useState(3);
const open = 1 - (r - 0.5) / 11.5; // 1 wide open … ~0 pinched
const I = 12 / r;
const W = 340, py = 46, bh = 16;
const nh = bh * (0.14 + 0.86 * open); // half-height of the opening
const gXa = 130, gXb = 185;
const reach = 14 + I * 7.5;
const jetW = 1.5 + I * 0.55;
return (
{kids ? "try it right now" : "before you scroll — try it"}
);
}
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: "The map" },
{ id: "voltage", label: "Voltage" },
{ id: "current", label: "Current" },
{ id: "resistance", label: "Resistance" },
{ id: "predict", label: "Predict" },
{ id: "ohms-law", label: kids ? "Three friends" : "Ohm's Law" },
{ id: "playground", label: "Playground" },
{ id: "loop", label: kids ? "The loop" : "The loop" },
{ id: "practice", label: "Practice" },
{ id: "quiz", label: "Quiz" },
{ id: "bench", label: kids ? "Build it!" : "The bench" },
{ id: "whats-next", label: "What's next" },
];
return (
<>
setTweak("audience", v)} />
Fathohm.}
chapterSub="Chapter 1 · The Flow"
kids={kids}
lede={kids
? <>Electricity is invisible. Water isn't. So let's start with water — it does almost exactly the same thing, and you can see it happen.
: <>Before transistors, before computers, before any of the clever stuff — there is a thing that flows, and a thing that pushes it, and a thing that gets in the way. Learn those three and you've cracked the door to electronics.
}>
Scroll, slide, fiddle. You can't break it. (That comes in Chapter 4.)
{
const v = rng.int(6, 24, 2), r = rng.pick([2, 3, 4, 5, 6, 8]);
return {
q: { adult: `A ${v} V battery drives a ${r} Ω resistor. What current flows?`,
kids: `The push is ${v} and the pinch is ${r}. Flow = push ÷ pinch. What's the flow?` },
unit: "A", answer: +(v / r).toFixed(3), tol: 0.04,
hint: { adult: "Ohm's law solved for current: I = V ÷ R.",
kids: "Divide the push by the pinch." },
solution: { adult: `I = V ÷ R = ${v} V ÷ ${r} Ω = ${+(v / r).toFixed(2)} A.`,
kids: `Flow = ${v} ÷ ${r} = ${+(v / r).toFixed(2)}.` },
};
},
(rng) => {
const i = rng.pick([1, 2, 2.5, 4, 5]), v = rng.int(10, 30, 5);
return {
q: { adult: `What resistance lets exactly ${i} A flow from a ${v} V supply?`,
kids: `Push is ${v}, and you want a flow of ${i}. Pinch = push ÷ flow. What pinch?` },
unit: "Ω", answer: +(v / i).toFixed(3), tol: 0.04,
hint: { adult: "Rearrange to R = V ÷ I.",
kids: "Divide the push by the flow you want." },
solution: { adult: `R = V ÷ I = ${v} V ÷ ${i} A = ${+(v / i).toFixed(2)} Ω.`,
kids: `Pinch = ${v} ÷ ${i} = ${+(v / i).toFixed(2)}.` },
};
},
(rng) => {
const i = rng.pick([0.25, 0.5, 0.75, 1.5, 2]), r = rng.int(4, 18, 2);
return {
q: { adult: `How much voltage sits across a ${r} Ω resistor carrying ${i} A?`,
kids: `Flow is ${i} through a pinch of ${r}. Push = flow × pinch. What push?` },
unit: "V", answer: +(i * r).toFixed(3), tol: 0.04,
hint: { adult: "Ohm's law in its original form: V = I × R.",
kids: "Multiply the flow by the pinch." },
solution: { adult: `V = I × R = ${i} A × ${r} Ω = ${+(i * r).toFixed(2)} V.`,
kids: `Push = ${i} × ${r} = ${+(i * r).toFixed(2)}.` },
};
},
]}
/>
You know how electricity works. Most grown-ups don't even know this!
: <>You now know more about electricity than 95% of the people who flip a light switch today. Next: two resistors instead of one.
}
nextHref="chapter2.html"
nextLabel="Chapter 2 · Branching"
/>
);
}
ReactDOM.createRoot(document.getElementById("root")).render();