A weak flashlight uses a little power. A toaster uses a lot. A jet
engine uses an enormous amount.
We measure power in watts (W). The bigger
the watts, the more is going on — more light, more heat, more spin.
) : (
<>
Power = work, per second.
One watt is one joule of energy delivered every second. A 60-watt
bulb dumps 60 joules per second into the room (mostly as heat, in
the case of an old incandescent).
In an electrical context, power is the simplest possible quantity:
P=V×I
Volts times amps. That's it. Big push and big flow means
a lot is happening; either alone doesn't.
Named for James Watt, the Scottish engineer who improved the steam
engine. (Yes, his unit is named after him. Also his name is on
every light bulb you've ever owned.)
)}
{kids ? "Lots of watts → lots of stuff happening." : "Watts is the answer to “how much, how fast?”"}
);
}
function ThreeWaysBeat({ v, r, onView, kids }) {
const ref = useInViewCallback(onView);
const I = v / r;
const P = v * I;
if (kids) {
return (
§ 03 · the heat is real
A pinch in the pipe gets warm.
Right now the bulb is glowing at {fmt(P, 1)} watts.
The little thermometer right at the pinch shows it heating up — the heat
happens where the squeeze is, not at the end of the pipe.
At the end of the pipe the water isn't hot — it's just moving. There it
turns a wheel: that's the useful work. Heat at the pinch,
work at the wheel.
The tighter the pinch, the hotter it gets. The bigger the push,
the hotter it gets. Both matter.
A toaster is a very tight pinch with lots of push behind it —
on purpose, so it gets bright orange and warms your bread. A wire is
a wide pipe, so it barely heats up at all.
);
}
return (
§ 03 · three faces of the same law
One law, three ways.
Combine P = V·I with Ohm's law (V = I·R) and the same fact pops out
in three convenient shapes. Use whichever you have the numbers for:
V·I = {fmt(v, 1)} × {fmt(I, 2)} = {fmt(P, 1)} W
I²·R = {fmt(I * I, 2)} × {fmt(r, 1)} = {fmt(I * I * r, 1)} W
V²/R = {fmt(v * v, 0)} ÷ {fmt(r, 1)} = {fmt((v * v) / r, 1)} W
);
}
function HeatBeat({ v, r, onView, kids }) {
const ref = useInViewCallback(onView);
const P = (v * v) / r;
return (
§ 04 · where it all goes
Almost everything becomes heat.
{kids ? (
<>
Here's the secret: nearly all electricity, somewhere along the way,
turns into heat. Even the light from a regular bulb is
mostly heat — only a little becomes light.
That's why a phone gets warm when it's working hard. Why your
laptop has a little fan. Why a hairdryer feels nice on cold
mornings — that's the whole point!
) : (
<>
Every electron that pushes through a resistor jostles its way
past atoms, and those bumps add up to heat. Old incandescent
bulbs are ~5% light, 95% heat — the filament glows because it's
hot enough to emit visible light. The light is a side-effect.
This is why power matters in design:
A resistor needs a power rating high enough to handle the heat without melting.
A laptop CPU has a heat sink bolted to it for exactly this reason.
An LED is so efficient (~30% of power becomes light) it can run cool on a coin cell.
this resistor is dissipating
P={fmt(P, 1)}watts
resistor power ratings · how much heat a part can shed
A rating isn't resistance — it's a heat budget. A bigger body sheds
heat faster, so it survives more watts. The common little ones on a breadboard
are ¼ W. Crossed-out sizes above would cook at today's {fmt(P, 1)} W —
{P > 5 ? " even a 5 W power resistor isn't enough; you'd need a heatsink." : P > 0.25 ? " pick one of the surviving sizes." : " any of them would survive this."}
)}
);
}
function PlaygroundBeat({ v, r, setV, setR, onView, kids }) {
const ref = useInViewCallback(onView);
const I = v / r;
const P = v * I;
return (
§ 05 · turn it up
Crank it. Watch it heat up.
{kids
? "Push hard and squeeze tight at the same time. The bulb glows brighter, the thermometer at the pinch climbs, and the wheel at the end spins faster."
: "Push harder or squeeze tighter — either grows power. The pinch's thermometer and the wheel's spin both respond live."
}
{kids ? "right now" : "power"}
{kids ? (
{fmt(P, 1)} watts of glow.
The pipe is at about {P > 12 ? "scalding" : P > 6 ? "hot" : P > 2 ? "warm" : "barely warm"}.
) : (
P=V·I={fmt(P, 1)}W
)}
why does squeezing make heat?
{kids
? <>When water shoves past a tight spot, it bumps and rubs — and those bumps are heat. In a wire, electrons bump into the metal atoms as they squeeze through, and every bump warms it up.
: <>Drop the resistor and the wire lets more current through — so far more electrons crowd past the metal atoms each second. More electrons jostling means more collisions per second, and each collision sheds heat. (P = I²R captures it: R falls but I climbs faster.)}
Power vs. energy — watch the wheel. The waterwheel at the
end of the pipe is the load — the thing the flow actually drives.
How fast it spins right now is power (watts).
The counter under it — total energy delivered so far — is energy (joules
= watts × seconds). Turn the power down and the wheel slows, but the counter{" "}
keeps climbing — a trickle for a long time can deliver more energy than a blast for a moment.
That counter is exactly what your electricity bill meters (in kWh).
);
}
/* ─── Worked example: car battery & headlights (DC) ──────────────────── */
function WorkedExampleSection({ kids }) {
if (kids) return null;
return (
§ 07 · a 12 V car battery, in practice
A practical story: your car.
A car battery is a 12 V reservoir of DC —
same shape as the barrel-and-pipe we've been drawing. Every accessory
draws current from it. The total power budget matters a lot,
because a flat battery means you're walking.
A typical car battery holds ~50 Ah of charge.
At 15.7 A, that's roughly 3 hours of
"everything on" before it's flat. Which is why you don't leave the
lights on overnight.
Note on units. Amp-hours (Ah) is a sloppy but practical capacity unit —
how much current the battery can supply for how long. 50 Ah × 12 V ≈ 600 Wh of
stored energy. We'll meet Wh again in Chapter 4 (capacitors store the same kind
of thing, much less of it, much faster).
);
}
/* ─── WhatsNext handled by shared component ──────────────────────────── */
/* ─── Quiz banks ──────────────────────────────────────────────────────── */
/* ─── Where the heat lives — the push budget ────────────────────── */
function HeatBudgetSection({ kids }) {
const [rPinch, setRPinch] = useState(3);
const rLamp = 6, V = 9;
const I = V / (rPinch + rLamp);
const pPinch = I * I * rPinch;
const pLamp = I * I * rLamp;
const maxP = (V * V) / rLamp; // all power lands in the lamp at rPinch = 0
const bar = (p) => `${Math.max(1.5, (p / maxP) * 100)}%`;
return (
§ 06 · the heat has an address
The heat doesn't vanish. It moves house.
{kids
? <>Squeeze the pinch tight: the pinch gets hot and the bulb goes dim. Open it wide: the bulb blazes bright — and warm! Either way something heats up. The heat just changes address.
: <>Tighten the pinch and it heats up while the lamp starves. Open it wide and the lamp blazes — now the lamp is where the power lands. Resistance doesn't make heat go away; it decides where the heat shows up.}
{kids
? <>The rule is simple: heat appears wherever the push gets used up. Whoever takes the biggest share of the push collects the most heat. A bulb glowing IS heat — that's the part doing the useful work.
: <>The rule: heat lands wherever push is dropped. In a series loop, parts split the voltage in proportion to their resistance — the pinch's share warms the pinch, the lamp's share lights (and warms) the lamp. One honest catch: tightening the pinch also shrinks the total flow, so the whole heat budget gets smaller even as the pinch claims a bigger slice of it.}
{kids
? <>A toaster and a dim lamp obey the same rule — the only question is where you want the heat to show up.
: <>A space heater and a dimmed lamp are the same physics. Engineering is mostly choosing the address: put the drop where the work is useful, keep it away from where it isn't.}
try it · 9 V barrel · lamp fixed at 6 Ω
{[{ label: kids ? "heat at the pinch" : "heat at the pinch · I²Rₚ", p: pPinch },
{ label: kids ? "heat & light at the bulb" : "heat & light at the lamp · I²Rₗ", p: pLamp }].map((row, i) => (
{row.label}{row.p.toFixed(1)} W
))}
{kids ? "total heat being made" : "total · P = V²/(Rₚ+Rₗ)"}{(pPinch + pLamp).toFixed(1)} W
{kids
? <>Slide it! Tight pinch: the pinch wins the heat (and there's less heat overall). Open pinch: the bulb gets everything.
: <>Watch both effects at once: the pinch's share grows as you tighten, while the total shrinks. At Rₚ = 0, every watt lands in the lamp.}
);
}
/* ─── Battery capacity: mAh — the size of the barrel ────────────────── */
/* Two barrels filled to the same height — one skinny, one fat. Same push
(height), wildly different capacity (girth). AAA vs D cell, drawn. */
function TwoBarrelsFigure({ kids }) {
const top = 54, bot = 240, fillF = 0.8;
const waterY = top + (1 - fillF) * (bot - top);
return (
);
}
function BatteryCapacitySection({ kids }) {
const [drawMa, setDrawMa] = useState(50);
const capacity = 500; // a typical 9 V alkaline, in mAh
const hours = capacity / drawMa;
const hLabel = hours >= 48 ? `${(hours / 24).toFixed(1)} days` : `${hours.toFixed(1)} hours`;
return (
§ {kids ? "07" : "08"} · how long will the barrel last?
The barrel has a size.
{kids
? <>Volts tell you how hard the barrel pushes — but not how much water is in it. A battery's size is written in mAh, and it works just like litres in a barrel.
: <>Voltage is the height of the barrel — the push. mAh (milliamp-hours) is the girth — how much water it holds. Capacity, not pressure. Two batteries can push identically and last wildly different lengths of time.}
{kids
? <>Picture a skinny barrel and a fat barrel filled to the same height. The water squirts out of both just as hard — the push only cares about how high the water is! But the skinny one runs dry fast, while the fat one keeps pouring and pouring. That's a little AAA battery next to a big chunky D battery: the exact same push, just way more water inside the big one.
: <>Picture two barrels filled to the same height — one skinny, one fat. A pressure gauge at each spigot reads identically: pressure cares about height, not girth. But open the taps and the skinny one runs dry while the fat one is still pouring. That's a AAA next to a D cell — both 1.5 V, both light a bulb to the exact same brightness. The D just holds roughly ten times the charge, so it keeps that push up ten times longer.}
{kids
? <>One more battery secret: as a battery gets used up, it doesn't just hold less water — it gets worse at pushing. It's like the barrel's own spigot slowly furring up with gunk: a tired battery has a tight built-in squeeze, so the moment something thirsty asks for a big gulp, the push droops. That's why a "dying" flashlight can still run a clock for months — the clock only sips!
: <>And a depletion footnote: a draining battery doesn't just lose capacity — its internal resistance climbs. Picture the barrel growing its own built-in pinch that slowly tightens with age and use. An old cell can still read 1.5 V on a meter (no load, no flow, no drop across that internal pinch) yet sag badly the moment a real load draws current. That's why "dead" remote batteries still run a wall clock, and why the car cranks weakly on cold mornings — cold tightens the internal pinch further.}
{kids
? <>The maths is friendly: a 500 mAh battery can pour out 500 “units” — use 50 each hour and it lasts 10 hours. Use 100 each hour, only 5. The faster you drink, the sooner it's empty.
: <>Read it literally: 500 mAh = 500 mA for 1 hour, or 50 mA for 10 hours, or 5 mA for 100 — the product stays the same. Halve the draw, double the life.}
{kids
? <>The Beacon sips about 14 mA — so one battery runs it for about a day and a half of nights!
: <>The Beacon draws ~14 mA → ~36 h on one 9 V. This is the budget you'll design against in Level 2: brightness costs current; current costs hours.}
{kids
? <>Watch out: a barrel twice as tall (more volts) is NOT twice as big (more mAh). Push and size are different things!
: <>mAh compares batteries of the same voltage. For true stored energy, multiply by volts: 500 mAh × 9 V = 4.5 Wh — watt-hours, the wheel-counter unit from above.}
);
}
const ADULT_QUIZ = [
{
q: "Electrical power is…", kind: "math",
options: ["V + I", "V × I", "V − I", "V ÷ I"],
correct: 1,
explain: "Power P = V × I. Volts times amps gives watts — the rate work happens.",
},
{
q: "A device runs at 12 V and draws 2 A. Its power is…", kind: "math",
options: ["6 W", "14 W", "24 W", "10 W"],
correct: 2,
explain: "P = V × I = 12 × 2 = 24 W.",
},
{
q: "Most of the energy an old incandescent bulb uses becomes…", kind: "concept",
options: ["light", "heat", "sound", "motion"],
correct: 1,
explain: "~95% is heat; the visible light is almost a side-effect of the hot filament.",
},
{
q: "Hold voltage fixed. You lower the resistance. The power dissipated…", kind: "math",
options: ["goes up", "goes down", "stays the same", "becomes zero"],
correct: 0,
explain: "P = V²/R. Lower R → more current → more power. (Same V, easier path, harder work.)",
},
{
q: "Why does a resistor need a 'power rating'?", kind: "concept",
options: [
"To set its resistance",
"So it can handle the heat it makes without melting",
"To pick its color",
"To store charge",
],
correct: 1,
explain: "Power becomes heat. Exceed the rating and the part cooks. Pick a part rated above its dissipation.",
},
{
q: "A 60 W bulb on a 120 V line draws how much current?", kind: "math",
options: ["0.5 A", "2 A", "60 A", "7200 A"],
correct: 0,
explain: "I = P / V = 60 / 120 = 0.5 A.",
},
{
q: "Double the current through a fixed resistor. The heat it makes…", kind: "math",
options: ["doubles", "halves", "quadruples", "stays the same"],
correct: 2,
explain: "P = I²R — power goes with the SQUARE of current. Double I → 4× the heat.",
},
{
q: "A 500 mAh battery feeds a circuit drawing 25 mA. Roughly how long does it last?", kind: "math",
options: ["25 minutes", "2 hours", "20 hours", "500 hours"],
correct: 2,
explain: "Life = capacity ÷ draw = 500 mAh ÷ 25 mA = 20 hours. mAh is the size of the barrel.",
},
{
q: "A resistor's power rating (⅛ W, ¼ W, ½ W…) tells you…", kind: "concept",
options: ["its resistance in ohms", "how much heat it can shed without cooking", "its physical length", "its voltage limit only"],
correct: 1,
explain: "The rating is a heat budget, set by the part's size. Dissipate more than it and the part burns up.",
},
{
q: "mAh measures a battery's…", kind: "concept",
options: ["push (pressure)", "capacity — how much charge it holds", "resistance", "temperature"],
correct: 1,
explain: "mAh is the barrel's SIZE, not its push. Volts are the push; mAh says how long it can keep it up.",
},
{
q: "In a series loop with a pinch and a lamp, where does the heat show up?",
kind: "concept",
options: ["Always at the battery", "Wherever the push is dropped — each part's share warms that part", "Only in the wires", "Nowhere — it cancels out"],
correct: 1,
explain: "Heat lands where voltage is dropped. The pinch's share warms the pinch; the lamp's share lights (and warms) the lamp. Resistance decides the heat's address.",
},
{
q: "A 'dying' flashlight battery can still run a wall clock for months. Why?",
kind: "concept",
options: [
"Clocks recharge batteries",
"A tired battery's internal resistance has climbed — big gulps make its push droop, but tiny sips are fine",
"The clock runs on zero power",
"Flashlights drain batteries backwards",
],
correct: 1,
explain: "As a battery depletes, its built-in squeeze tightens. A thirsty load (flashlight) makes the voltage sag; a clock only sips, so the droop barely matters.",
},
{
q: "Your electricity bill charges you for…",
kind: "concept",
options: ["peak power (W)", "voltage (V)", "energy — power added up over time (kWh)", "current (A)"],
correct: 2,
explain: "The meter integrates: energy = power × time. A trickle for a long time can cost more than a blast for a moment.",
},
{
q: "A AAA and a D cell are both 1.5 V. The D cell…",
kind: "concept",
options: ["pushes harder", "lights a bulb brighter", "holds the same push but far more charge — it lasts longer", "is more dangerous"],
correct: 2,
explain: "Same height of water, fatter barrel. Identical push (same brightness), roughly 10× the capacity.",
},
];
const KIDS_QUIZ = [
{
q: "Power means…", kind: "concept",
options: ["how pretty it looks", "how much stuff is happening", "how heavy it is", "what color it is"],
correct: 1,
explain: "Lots of watts = lots happening: more light, more heat, more spin.",
},
{
q: "To make LOTS of power, you want…", kind: "concept",
options: ["big push AND big flow", "no push", "a cold wire", "a longer wire"],
correct: 0,
explain: "Power is push times flow. Big push and big flow together = lots of power.",
},
{
q: "When electricity does work, where does most of the energy end up?", kind: "concept",
options: ["as heat", "as sound", "it disappears", "as water"],
correct: 0,
explain: "Almost everything turns into heat in the end — that's why gadgets get warm.",
},
{
q: "Why does a toaster glow but a normal wire doesn't?", kind: "concept",
options: [
"The toaster wire squeezes the flow hard, making heat",
"The toaster is painted orange",
"Normal wires are broken",
"Toasters use magic",
],
correct: 0,
explain: "A tight squeeze with lots of push makes heat — on purpose, to toast your bread.",
},
{
q: "Your laptop gets warm when it works hard because…", kind: "concept",
options: ["it's sad", "electricity turns into heat", "the sun is out", "it's full of water"],
correct: 1,
explain: "Working hard means using power, and power becomes heat. That's why there's a little fan!",
},
{
q: "Which uses the MOST power?", kind: "concept",
options: ["a tiny LED night-light", "a toaster", "a phone charger", "a clock"],
correct: 1,
explain: "A toaster! It makes lots of heat on purpose, so it uses lots of power.",
},
{
q: "Watts is a way to measure…", kind: "concept",
options: ["how much stuff is happening", "how blue something is", "how far away it is", "how old it is"],
correct: 0,
explain: "Watts = how much is happening. More watts, more light/heat/spin.",
},
{
q: "A battery's mAh number tells you…", kind: "concept",
options: ["how hard it pushes", "how big its barrel is — how long it lasts", "what colour it is", "how heavy it is"],
correct: 1,
explain: "mAh is the SIZE of the barrel. A thirstier circuit empties it faster.",
},
{
q: "The wheel at the end of the pipe spins faster when…", kind: "concept",
options: ["there's more power", "the water is colder", "the pipe is longer", "you watch it closely"],
correct: 0,
explain: "Spin speed = power, how fast work is happening. The counter under it adds up the energy.",
},
{
q: "Where does the pipe get HOT?",
kind: "concept",
options: ["Right at the squeeze", "At the very start", "Nowhere", "Only at night"],
correct: 0,
explain: "The bumping and rubbing happens where the water squeezes past the tight spot — that's where the heat is made.",
},
{
q: "A big D battery and a little AAA both push the same. What's different?",
kind: "concept",
options: ["The big one pushes harder", "The big one holds more water, so it lasts longer", "The little one is faster", "Nothing"],
correct: 1,
explain: "Same push (same brightness!) — but the fat barrel keeps pouring long after the skinny one runs dry.",
},
];
/* ─── 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: "big-idea", label: kids ? "What's power" : "Power" },
{ id: "three-ways", label: kids ? "Heat" : "Three forms" },
{ id: "heat", label: kids ? "Why warm?" : "Where it goes" },
{ id: "playground", label: "Playground" },
{ id: "heat-budget", label: kids ? "Heat moves" : "Heat budget" },
...(kids ? [] : [{ id: "example", label: "Car battery" }]),
{ id: "battery-life", label: kids ? "Battery life" : "mAh" },
{ id: "practice", label: "Practice" },
{ id: "quiz", label: "Quiz" },
{ id: "whats-next", label: "What's next" },
];
return (
<>
setTweak("audience", v)} />
Power & Heat.}
chapterSub="Chapter 3 · How much actually happens?"
kids={kids}
lede={kids
? <>When water rushes through a tight pipe, the pipe warms up. When electricity rushes through a resistor, it does the same. That heat is the price of getting work done.
: <>Voltage tells you the push. Current tells you the flow. Together they tell you power — the rate at which electricity is actually doing something. Almost all of it eventually becomes heat.
} />
{
const v = rng.int(5, 24, 1), i = rng.pick([0.25, 0.5, 0.75, 1.5, 2]);
const p = +(v * i).toFixed(2);
return {
q: { adult: `A device runs at ${v} V and draws ${i} A. How much power does it use?`, kids: `Push is ${v}, flow is ${i}. Power = push × flow. How many watts?` },
unit: "W", answer: p, tol: 0.04,
hint: "P = V × I.",
solution: { adult: `P = V × I = ${v} V × ${i} A = ${p} W.`, kids: `${v} × ${i} = ${p}.` } };
},
(rng) => {
const i = rng.pick([1, 2, 3, 0.5]), r = rng.int(2, 12, 1);
const p = +(i * i * r).toFixed(2);
return {
q: { adult: `${i} A flows through a ${r} Ω resistor. How much power does it turn into heat?`, kids: `${i} of flow through a pinch of ${r}. Heat = flow × flow × pinch. How many watts?` },
unit: "W", answer: p, tol: 0.04,
hint: "P = I²R.",
solution: { adult: `P = I²R = ${i}² × ${r} = ${+(i * i).toFixed(2)} × ${r} = ${p} W.`, kids: `${i} × ${i} × ${r} = ${p}.` } };
},
(rng) => {
const v = rng.int(5, 20, 1), r = rng.pick([2, 4, 5, 10]);
const p = +(v * v / r).toFixed(2);
return {
q: { adult: `What power is dissipated by a ${r} Ω resistor with ${v} V across it?`, kids: `${v} of push across a pinch of ${r}. Power = push × push ÷ pinch. Watts?` },
unit: "W", answer: p, tol: 0.04,
hint: "P = V² ÷ R.",
solution: { adult: `P = V² ÷ R = ${v}² ÷ ${r} = ${v * v} ÷ ${r} = ${p} W.`, kids: `${v} × ${v} ÷ ${r} = ${p}.` } };
},
]} />
Now you know why your laptop gets warm and why toasters glow.
: <>Power = V × I. Heat is the side-effect of pushing current through resistance. Engineering is mostly about getting useful work and shedding the heat.
}
prevHref="chapter2.html"
prevLabel="Chapter 2"
nextHref="chapter4.html"
nextLabel="Chapter 4 · The Bucket"
/>
);
}
ReactDOM.createRoot(document.getElementById("root")).render();