/* capstone.jsx — Master Engineer Lv.1 final exam. A sequence of design briefs. Each: read the spec, pick component values, the sim judges pass/fail with real consequences (LEDs pop, etc). Adult & kids modes. Certificate on completion. Depends on shared.jsx (TopBar, CommonTweaks, useTweaks, useCrossChapterPersistence, ChapterStrip, fmt) and visuals.jsx helpers indirectly. Self-contained SVGs here. */ const { useState, useEffect, useRef } = React; /* ─── small helpers ─────────────────────────────────────────────────────── */ function clamp(x, lo, hi) { return Math.max(lo, Math.min(hi, x)); } /* Standard E12 resistor values (the real ones you can actually buy). */ const E12 = [10, 12, 15, 18, 22, 27, 33, 39, 47, 56, 68, 82, 100, 120, 150, 180, 220, 270, 330, 390, 470, 560, 680, 820, 1000, 1200, 1500, 2200, 3300, 4700, 6800, 10000]; function ohmLabel(r) { if (r >= 1000) return (r / 1000).toFixed(r % 1000 ? 1 : 0).replace(/\.0$/, "") + " kΩ"; return r + " Ω"; } /* ─── A reusable "pick from a dropdown of real parts" control ───────────── */ function PartPicker({ label, value, options, fmtOption, onChange, accent }) { return (

{label}

); } /* ─── Verdict banner ────────────────────────────────────────────────────── */ function Verdict({ state, children }) { if (!state) return null; return (

{state === "pass" ? "✓" : state === "warn" ? "!" : "✕"}

{children}

); } /* ═══════════════════════════════════════════════════════════════════════ BRIEF 1 — Light an LED from a battery without frying it. Spec: LED wants ~2 V @ ~20 mA from a battery. Choose a series resistor. ═══════════════════════════════════════════════════════════════════════ */ function BriefLED({ kids, onResult }) { // Randomized each mount so retries differ. const [params] = useState(() => { const supplies = [5, 6, 9, 12]; const vBatt = supplies[Math.floor(Math.random() * supplies.length)]; const vLed = 2.0; const iTargetMa = 20; return { vBatt, vLed, iTargetMa }; }); const idealR = (params.vBatt - params.vLed) / (params.iTargetMa / 1000); const [r, setR] = useState(E12[Math.floor(E12.length / 2)]); const [checked, setChecked] = useState(false); // Actual current with chosen R (assuming LED clamps at vLed) const iActual = Math.max(0, (params.vBatt - params.vLed) / r) * 1000; // mA // LED outcome const ledState = iActual > 35 ? "pop" : iActual > 25 ? "bright" : iActual >= 12 ? "good" : iActual >= 4 ? "dim" : "off"; const pass = ledState === "good" || ledState === "bright"; const ideal = ledState === "good"; useEffect(() => { if (checked) onResult(pass); }, [checked]); const glow = ledState === "pop" ? 0 : clamp(iActual / 22, 0, 1.1); return (

Brief 1 · The LED

{kids ? "Light the bulb without popping it." : "Drive the LED safely."}

{kids ? <>You have a {params.vBatt} V battery and a little LED. The LED is happy with a gentle trickle — about 20 mA. Too much and it pops! Pick a pinch (resistor) that protects it. : <>Battery: {params.vBatt} V. LED forward voltage ≈ 2 V, target current ≈ 20 mA. Choose a series resistor so the LED runs bright but safe.}

{!kids && (

Hint: the resistor drops the leftover voltage. R = (V_batt − V_LED) / I.

)}

{ setR(v); setChecked(false); }} accent="current" />

Current through LED {ledState === "pop" ? "—" : iActual.toFixed(1) + " mA"}

{checked && ( {ledState === "pop" && (kids ? <>Pop! Too much flow — that resistor is too small. Try a bigger one to pinch the flow down. : <>LED destroyed. {iActual.toFixed(0)} mA is well over the ~20 mA rating. Bigger resistor needed — aim near {ohmLabel(E12.find(v => v >= idealR) || 470)}.)} {ledState === "bright" && (kids ? <>It works — but it's running hot. A slightly bigger pinch would be safer. : <>Lit, but a touch over. {iActual.toFixed(0)} mA is above target; fine briefly, but a larger R is kinder to the LED.)} {ideal && (kids ? <>Perfect! Nice steady glow. You protected the LED. : <>Nailed it. {iActual.toFixed(0)} mA — right in the LED's happy zone. Ideal R ≈ {ohmLabel(E12.find(v => v >= idealR) || 220)}.)} {ledState === "dim" && (kids ? <>Too dim. That pinch is too tight — barely any flow. Try a smaller resistor. : <>Under-driven. Only {iActual.toFixed(1)} mA — visible but dim. A smaller R gets you closer to 20 mA.)} {ledState === "off" && <>Basically off. Way too much resistance. Pick a much smaller value.} )}

); } function LEDDiagram({ vBatt, r, ledState, glow, kids }) { const W = 460, H = 230; const popped = ledState === "pop"; const flowing = ledState !== "off" && !popped; const period = flowing ? clamp(1.8 / (glow + 0.2), 0.3, 4).toFixed(2) + "s" : "9999s"; const loop = "M 70 60 L 390 60 L 390 180 L 70 180 Z"; return ( ); } /* ═══════════════════════════════════════════════════════════════════════ BRIEF 2 — Voltage divider: hit a target output voltage. ═══════════════════════════════════════════════════════════════════════ */ function BriefDivider({ kids, onResult }) { const [params] = useState(() => { const vIn = [9, 10, 12][Math.floor(Math.random() * 3)]; const targets = [vIn / 3, vIn / 2, (2 * vIn) / 3]; const vTarget = Math.round(targets[Math.floor(Math.random() * targets.length)] * 10) / 10; return { vIn, vTarget }; }); const [r1, setR1] = useState(1000); const [r2, setR2] = useState(1000); const [checked, setChecked] = useState(false); const vOut = params.vIn * (r2 / (r1 + r2)); const err = Math.abs(vOut - params.vTarget); const tol = kids ? 0.6 : 0.25; const pass = err <= tol; useEffect(() => { if (checked) onResult(pass); }, [checked]); return (

Brief 2 · {kids ? "The Splitter" : "The Voltage Divider"}

{kids ? "Split the push to hit a target." : "Build a divider for the target voltage."}

{kids ? <>You have a {params.vIn} V push. Using two pinches stacked up, make the spot between them read about {params.vTarget} V. : <>Source: {params.vIn} V. Using two resistors in series, set the midpoint to {params.vTarget} V. (V_out = V_in · R₂/(R₁+R₂).)}

{ setR1(v); setChecked(false); }} accent="water" /> { setR2(v); setChecked(false); }} accent="water" />

{kids ? "Reading at the middle" : V_out} {vOut.toFixed(2)} V

{checked && ( {pass ? (kids ? <>Bang on! {vOut.toFixed(1)} V — that's the target. The bigger the bottom pinch compared to the top, the more push is left at the middle. : <>Within spec. {vOut.toFixed(2)} V vs target {params.vTarget} V. The ratio R₂/(R₁+R₂) sets the fraction of V_in that appears at the midpoint.) : (kids ? <>Not yet. You got {vOut.toFixed(1)} V, aiming for {params.vTarget} V. {vOut > params.vTarget ? "Make the bottom pinch smaller (or the top bigger)." : "Make the bottom pinch bigger (or the top smaller)."} : <>Off target. {vOut.toFixed(2)} V vs {params.vTarget} V. {vOut > params.vTarget ? "Lower R₂/(R₁+R₂): shrink R₂ or grow R₁." : "Raise R₂/(R₁+R₂): grow R₂ or shrink R₁."} Equal resistors give exactly half.)} )}

); } function DividerDiagram({ vIn, r1, r2, vOut, kids }) { const W = 460, H = 230; const frac = r2 / (r1 + r2); return ( ); } /* ═══════════════════════════════════════════════════════════════════════ BRIEF 3 — RC timing: keep a lamp glowing N seconds after power off. ═══════════════════════════════════════════════════════════════════════ */ function BriefRC({ kids, onResult }) { const [params] = useState(() => { const targetS = [2, 3, 4][Math.floor(Math.random() * 3)]; return { targetS }; }); // We use arbitrary-but-consistent units: time-to-dim ≈ 0.7 * R * C (seconds), // with R in kΩ and C in "units" (×100µF feel). Keep watchable. const rOpts = [1, 2, 5, 10, 22, 47]; // kΩ const cOpts = [0.5, 1, 2, 4, 6, 8]; // bucket size (6 added so 4 s target is reachable: R10·C6 = 4.2 s) const [r, setR] = useState(10); const [c, setC] = useState(1); const [checked, setChecked] = useState(false); const [playing, setPlaying] = useState(false); const holdTime = 0.7 * r * c * 0.1; // seconds the lamp stays lit-ish const err = Math.abs(holdTime - params.targetS); const tol = kids ? 1.2 : 0.6; const pass = err <= tol; useEffect(() => { if (checked) onResult(pass); }, [checked]); return (

Brief 3 · {kids ? "The Afterglow" : "RC Timing"}

{kids ? "Keep the light on after you cut power." : "Hold the lamp lit after power-off."}

{kids ? <>Add a bucket (capacitor) so the lamp keeps glowing for about {params.targetS} seconds after you flip the power off. Bigger pinch and bigger bucket = longer glow. : <>Spec: the lamp must stay lit ≈ {params.targetS} s after the supply is cut. Pick R and C. (Hold time grows with R·C — the time constant.)}

v + " kΩ"} onChange={(v) => { setR(v); setChecked(false); setPlaying(false); }} /> "×" + v} onChange={(v) => { setC(v); setChecked(false); setPlaying(false); }} accent="water" />

{kids ? "Glow lasts" : "Hold time"} {holdTime.toFixed(1)} s

{checked && ( {pass ? (kids ? <>Great timing! About {holdTime.toFixed(1)} seconds of afterglow — right on target. : <>On spec. Hold ≈ {holdTime.toFixed(1)} s vs {params.targetS} s target. Hold time scales with R·C, so trade one against the other.) : (kids ? <>Close-ish. The glow lasted {holdTime.toFixed(1)} s, but you want {params.targetS} s. {holdTime < params.targetS ? "Use a bigger bucket or tighter pinch." : "Use a smaller bucket or looser pinch."} : <>Off target. {holdTime.toFixed(1)} s vs {params.targetS} s. {holdTime < params.targetS ? "Increase R·C (bigger R or C)." : "Decrease R·C."})} )}

); } function RCDiagram({ r, c, holdTime, playing, kids }) { const W = 460, H = 230; const [t, setT] = useState(0); useEffect(() => { if (!playing) { setT(0); return; } let raf, start = performance.now(); const tick = (now) => { const elapsed = (now - start) / 1000; setT(elapsed); if (elapsed < holdTime + 1.5) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [playing, holdTime]); // brightness: full until power cut at t=0.6s, then exponential decay over holdTime const cutAt = 0.6; let bright; if (!playing) bright = 1; else if (t < cutAt) bright = 1; else bright = Math.exp(-(t - cutAt) / (holdTime / 2.2)); const lit = bright > 0.08; return ( ); } /* ═══════════════════════════════════════════════════════════════════════ BRIEF 4 — Transistor switch: control a big load with a tiny signal. ═══════════════════════════════════════════════════════════════════════ */ function BriefTransistor({ kids, onResult }) { const [params] = useState(() => { const loadMa = [200, 300, 500][Math.floor(Math.random() * 3)]; return { loadMa }; }); // Learner picks: a component to drive the load, and the base drive level. const [device, setDevice] = useState("resistor"); // resistor | switch | transistor const [signalOn, setSignalOn] = useState(true); const [checked, setChecked] = useState(false); // Only the transistor lets a tiny 3V signal control the big load. const correct = device === "transistor"; const pass = correct; useEffect(() => { if (checked) onResult(pass); }, [checked]); return (

Brief 4 · {kids ? "The Tiny Boss" : "The Transistor Switch"}

{kids ? "Use a tiny signal to run a big motor." : "Switch a big load with a small signal."}

{kids ? <>A little 3 V control wire needs to turn a big motor on and off. The control wire is too weak to power the motor directly. Which part lets the small signal boss the big flow? : <>A microcontroller pin gives a weak 3 V signal. The load needs ~{params.loadMa} mA — far more than the pin can source. Pick the device that lets the small signal control the large current.}

{kids ? "Pick a part" : "Device under the signal"} {[ { id: "resistor", label: kids ? "Just a resistor" : "A resistor" }, { id: "switch", label: kids ? "A hand switch" : "A manual switch" }, { id: "transistor", label: kids ? "A transistor (magic valve)" : "A transistor" }, ].map(o => ( ))}

{checked && ( {device === "transistor" ? (kids ? <>Yes! The transistor lets the tiny 3 V signal open a big gate for the motor. Flip the signal and watch the motor follow. : <>Correct. The transistor's base takes the weak 3 V signal and switches the full {params.loadMa} mA load. Small control, big result.) : device === "switch" ? (kids ? <>Not quite. A hand switch needs a finger! The whole point is the electric signal should do the switching by itself. : <>No. A manual switch needs a human. The signal can't actuate it — you need an electrically-controlled switch: a transistor.) : (kids ? <>Nope. A plain resistor just pinches flow — it can't turn things on and off from a signal. You need the magic valve. : <>No. A resistor only limits current; it can't switch. Only the transistor uses the small signal to gate the large current.)} )}

); } function TransistorDiagram({ device, signalOn, kids, loadMa }) { const W = 460, H = 230; // Load runs only if device==transistor AND signalOn, or device==switch AND signalOn (but switch is "wrong" answer conceptually—still show it works manually), resistor never really switches. const loadRuns = (device === "transistor" && signalOn) || (device === "switch" && signalOn); const spin = loadRuns; const period = "1.4s"; return ( ); } /* ═══════════════════════════════════════════════════════════════════════ BRIEF 5 — Diode: let current flow one way only (block the backflow). ═══════════════════════════════════════════════════════════════════════ */ function BriefDiode({ kids, onResult }) { // Randomize which orientation is "correct" so retries differ. const [params] = useState(() => ({ scenario: ["solar", "battery", "usb"][Math.floor(Math.random() * 3)], })); const [part, setPart] = useState("resistor"); // resistor | capacitor | diode const [flip, setFlip] = useState(false); // diode orientation const [checked, setChecked] = useState(false); // Correct: a diode, oriented forward (flip === false = anode to source). const pass = part === "diode" && !flip; useEffect(() => { if (checked) onResult(pass); }, [checked]); const scenarioText = { solar: { a: "a solar panel", b: "the battery it charges", why: "at night the battery would drain backward into the dark panel" }, battery: { a: "a backup battery", b: "your circuit", why: "you don't want current sneaking back into the battery" }, usb: { a: "a USB port", b: "your gadget", why: "plugging in backward could push current the wrong way" }, }[params.scenario]; return (

Brief 5 · {kids ? "The One-Way Gate" : "The Diode"}

{kids ? "Let current flow one way only." : "Block the backflow."}

{kids ? <>You're connecting {scenarioText.a} to {scenarioText.b}. Current should flow only forward — because {scenarioText.why}. Which part lets flow go one way and blocks the other? And which way should it face? : <>Connecting {scenarioText.a} to {scenarioText.b}: current must pass forward only ({scenarioText.why}). Choose the component and its orientation.}

{kids ? "Pick a part" : "Component"} {[ { id: "resistor", label: kids ? "A resistor (pinch)" : "A resistor" }, { id: "capacitor", label: kids ? "A capacitor (bucket)" : "A capacitor" }, { id: "diode", label: kids ? "A diode (one-way gate)" : "A diode" }, ].map(o => ( ))}

{checked && ( {part === "diode" && !flip && (kids ? <>Perfect! The diode is a one-way gate, facing the right way — forward flow passes, backflow is blocked. : <>Correct. A forward-biased diode (anode toward the source) conducts one way and blocks reverse. Exactly what's needed.)} {part === "diode" && flip && (kids ? <>Right part, wrong way! Flip the diode around — facing this way it blocks the flow you actually want. : <>Right component, reversed. Backward, the diode blocks the forward current you need. Flip it: anode to the source.)} {part === "resistor" && (kids ? <>Nope. A resistor pinches flow in both directions — it can't tell forward from backward. : <>No. A resistor limits current symmetrically; it has no sense of direction. You need a diode.)} {part === "capacitor" && (kids ? <>Not this time. A bucket stores and releases — it doesn't block a direction. : <>No. A capacitor blocks steady (DC) current and passes changes, but doesn't enforce direction. The diode does.)} )}

); } function DiodeBriefDiagram({ part, flip, kids }) { const W = 460, H = 230; const blocks = part === "diode" && flip; const flows = (part === "diode" && !flip) || part === "resistor"; const loop = "M 70 70 L 390 70 L 390 170 L 70 170 Z"; const period = flows ? "1.3s" : "9999s"; return ( ); } /* ═══════════════════════════════════════════════════════════════════════ BRIEF 6 — Inductor: smooth a bumpy current / resist sudden change. ═══════════════════════════════════════════════════════════════════════ */ function BriefInductor({ kids, onResult }) { const [params] = useState(() => ({ goal: ["smooth", "spike"][Math.floor(Math.random() * 2)], })); const [part, setPart] = useState("resistor"); // resistor | capacitor | inductor const [checked, setChecked] = useState(false); const pass = part === "inductor"; useEffect(() => { if (checked) onResult(pass); }, [checked]); const prompt = params.goal === "smooth" ? { k: <>The current to your motor is jumpy — it surges and dips. You want to smooth out the bumps so the flow stays steady. Which part fights sudden changes in flow?, a: <>A load draws a bumpy current. You need to smooth the current (resist sudden changes in flow), keeping it steady through dips. Which component? } : { k: <>When you switch a motor off, the current tries to stop instantly and makes a nasty spike. Which part resists the sudden change and carries the flow through the gap?, a: <>Switching off an inductive load creates a current spike. You need a component that opposes sudden current change, carrying flow smoothly through transitions. Which one? }; return (

Brief 6 · {kids ? "The Flywheel" : "The Inductor"}

{kids ? "Keep the flow steady." : "Resist the sudden change in current."}

{kids ? prompt.k : prompt.a}

{!kids && (

Hint: a capacitor resists changes in voltage; its mirror resists changes in current.

)}

{kids ? "Pick a part" : "Component"} {[ { id: "resistor", label: kids ? "A resistor (pinch)" : "A resistor" }, { id: "capacitor", label: kids ? "A capacitor (bucket)" : "A capacitor" }, { id: "inductor", label: kids ? "An inductor (flywheel)" : "An inductor" }, ].map(o => ( ))}

{checked && ( {part === "inductor" && (kids ? <>Yes! The inductor is a flywheel for current — heavy to speed up, heavy to slow down. It smooths the bumps and carries flow through gaps. : <>Correct. An inductor opposes changes in current (it stores energy in a magnetic field), smoothing surges and carrying current through switching gaps.)} {part === "capacitor" && (kids ? <>Close — wrong twin! The bucket smooths the push (voltage), not the flow. You want its mirror: the flywheel. : <>Not quite. A capacitor smooths voltage. Its mirror — the inductor — is what smooths current.)} {part === "resistor" && (kids ? <>Nope. A resistor just pinches flow and makes heat — it can't store momentum. : <>No. A resistor only dissipates energy; it has no memory of current. The inductor does.)} )}

); } function InductorBriefDiagram({ part, kids }) { const W = 460, H = 230; const smooth = part === "inductor"; // a wavy input line; output is smoothed only for inductor const inPts = Array.from({ length: 60 }, (_, i) => { const x = 60 + i * 5.5; const y = 80 + Math.sin(i * 0.8) * 18 + (i % 7 === 0 ? 10 : 0); return `${x},${y}`; }).join(" "); const outPts = Array.from({ length: 60 }, (_, i) => { const x = 60 + i * 5.5; const base = 160; const y = smooth ? base + Math.sin(i * 0.8) * 3 : part === "capacitor" ? base + Math.sin(i * 0.8) * 14 : base + Math.sin(i * 0.8) * 18 + (i % 7 === 0 ? 10 : 0); return `${x},${y}`; }).join(" "); return ( ); } Object.assign(window, { BriefLED, BriefDivider, BriefRC, BriefTransistor, BriefDiode, BriefInductor, E12, ohmLabel });