/* advelectronicslab.jsx — AdvElectronicsTutor: the advanced (circuit-laws) electronics workbench.
Six modules: Ohm's law, voltage divider (KVL), current divider (KCL), RC charging (τ = RC),
RC low-pass filter (f_c), series RLC resonance (f₀, Q). Built on window.BenchKit (loaded first),
so this file is just the FIGURES + their field computations. Each computeFields() mirrors
server/benches/advelectronics.js simulate() EXACTLY (same SI numerics + rounding), so client and
server agree on every graded field. Design study: docs/advancedElec/electronics-bench.html. */
(function () {
const { useState, useMemo, useEffect } = React;
const K = window.BenchKit, C = K.C, SVG_BG = K.SVG_BG, fmt = K.fmt, clamp = K.clamp;
const TaskStrip = K.TaskStrip, StatMeter = K.StatMeter;
/* ════ rounding — byte-for-byte identical to server/benches/advelectronics.js ════ */
const r1 = (x) => Math.round(x * 10) / 10;
const r2 = (x) => Math.round(x * 100) / 100;
const r3 = (x) => Math.round(x * 1000) / 1000;
const r5 = (x) => Math.round(x * 1e5) / 1e5;
const r6 = (x) => Math.round(x * 1e6) / 1e6;
const clampN = (x, a, b) => Math.max(a, Math.min(b, x));
const TWO_PI = 2 * Math.PI;
/* ════ field computations — EXACTLY the server's per-module simulate() ════ */
function fieldsOhm(s) {
const V = s.V, R = Math.max(1, s.R), I = V / R;
return { current: r6(I), power: r5(V * I), conductance: r6(1 / R), voltage: r2(V), resistance: Math.round(R) };
}
function fieldsVdiv(s) {
const Vin = s.Vin, R1 = Math.max(1, s.R1), R2 = Math.max(1, s.R2);
const I = Vin / (R1 + R2), v1 = I * R1, v2 = I * R2;
return { seriesCurrent: r6(I), vR1: r3(v1), vOut: r3(v2), divRatio: r3(R2 / (R1 + R2)), kvlSum: r3(v1 + v2), vIn: r2(Vin) };
}
function fieldsIdiv(s) {
const Iin = s.Iin, R1 = Math.max(1, s.R1), R2 = Math.max(1, s.R2);
const Rp = (R1 * R2) / (R1 + R2), i1 = Iin * R2 / (R1 + R2), i2 = Iin * R1 / (R1 + R2);
return { rParallel: r2(Rp), vShared: r3(Iin * Rp), i1: r6(i1), i2: r6(i2), kclSum: r6(i1 + i2), iIn: r5(Iin) };
}
function fieldsRc(s) {
const V = s.V, R = Math.max(1, s.R), Cc = Math.max(1e-12, s.Cuf * 1e-6);
const tau = R * Cc, tEff = clampN(s.t, 0, 5 * tau), vC = V * (1 - Math.exp(-tEff / tau));
return { tau: r6(tau), vC: r3(vC), pctCharged: r1(100 * vC / V), iCharge: r6((V / R) * Math.exp(-tEff / tau)), t: r5(tEff) };
}
function fieldsLpf(s) {
const R = Math.max(1, s.Rf), Cc = Math.max(1e-12, s.Cnf * 1e-9);
const fc = 1 / (TWO_PI * R * Cc), f = Math.pow(10, s.fx);
const gain = 1 / Math.sqrt(1 + (f / fc) ** 2), db = 20 * Math.log10(gain);
return { fc: r2(fc), freq: r2(f), gainDb: r2(db), gainRatio: r5(gain) };
}
function fieldsRlc(s) {
const R = Math.max(0.01, s.Rr), L = Math.max(1e-9, s.Lmh * 1e-3), Cc = Math.max(1e-12, s.Crnf * 1e-9);
const f0 = 1 / (TWO_PI * Math.sqrt(L * Cc)), Q = (1 / R) * Math.sqrt(L / Cc);
const f = Math.pow(10, s.fxr), w = TWO_PI * f, H = R / Math.sqrt(R * R + (w * L - 1 / (w * Cc)) ** 2);
return { f0: r2(f0), qFactor: r3(Q), bandwidth: r2(f0 / Q), freq: r2(f), gainDb: r2(20 * Math.log10(H)) };
}
/* ════ engineering-unit display formatter (visualization only — never feeds a graded field) ════ */
function eng(v, u) {
if (!isFinite(v)) return "∞";
if (v === 0) return "0 " + u;
const a = Math.abs(v), tab = [[1e9, "G"], [1e6, "M"], [1e3, "k"], [1, ""], [1e-3, "m"], [1e-6, "µ"], [1e-9, "n"], [1e-12, "p"]];
let m = 1e-12, pre = "p";
for (const [mm, p] of tab) { if (a >= mm) { m = mm; pre = p; break; } }
const x = v / m;
return (Math.abs(x) >= 100 ? x.toFixed(0) : Math.abs(x) >= 10 ? x.toFixed(1) : x.toFixed(2)) + " " + pre + u;
}
/* ════ plot helpers (visualization only) ════ */
const PW = 660, PH = 300, PADL = 50, PADR = 16, PADT = 16, PADB = 32;
function XF(xdom, ydom) {
const x0 = PADL, x1 = PW - PADR, y0 = PH - PADB, y1 = PADT;
return { sx: (x) => x0 + (x - xdom[0]) / ((xdom[1] - xdom[0]) || 1) * (x1 - x0), sy: (y) => y0 + (y - ydom[0]) / ((ydom[1] - ydom[0]) || 1) * (y1 - y0), x0, x1, y0, y1, xdom, ydom };
}
function curveD(f, xf, n = 280) { let d = ""; for (let i = 0; i <= n; i++) { const x = xf.xdom[0] + (xf.xdom[1] - xf.xdom[0]) * i / n; const y = clampN(f(x), xf.ydom[0], xf.ydom[1]); d += (i ? "L" : "M") + xf.sx(x).toFixed(1) + " " + xf.sy(y).toFixed(1); } return d; }
function Axis({ xf, ticks, fmtT, unit }) {
return (
{ticks.map((t, i) => ({fmtT ? fmtT(t) : t}))}
{unit ? {unit} : null}
);
}
function Slider({ label, value, set, min, max, step, color, fmtV }) {
return (
{label}
set(parseFloat(e.target.value))} style={{ flex: 1 }} />
{fmtV ? fmtV(value) : value}
);
}
function Frame({ children }) {
return ;
}
function Meters({ items }) {
return {items.map((m, i) => )}
;
}
function Status({ ok, children }) {
return {children}
;
}
// a vertical / horizontal proportion bar (KVL voltage split, KCL current split)
function StackBar({ x, y, w, h, parts, vertical }) {
let off = 0;
return (
{parts.map((p, i) => {
const seg = (vertical ? h : w) * (p.frac || 0);
const rect = vertical
? { x, y: y + off, width: w, height: seg }
: { x: x + off, y, width: seg, height: h };
const cx = vertical ? x + w / 2 : x + off + seg / 2, cy = vertical ? y + off + seg / 2 : y + h / 2;
off += seg;
return (
{seg > 18 ? {p.label} : null}
);
})}
);
}
/* ════ Module 1: Ohm's law — the I–V line ════ */
function OhmFig({ task, setTask, tasks, report, done }) {
const [s, setS] = useState({ V: 9, R: 1000 });
const fld = useMemo(() => fieldsOhm(s), [s]);
useEffect(() => { report(fld); }, [s]); // eslint-disable-line
const set = (k) => (v) => setS((o) => ({ ...o, [k]: v }));
const Imax = 12 / Math.max(200, s.R) * 1.15;
const xf = XF([0, 12], [0, Math.max(Imax, 0.002)]);
const I = s.V / s.R, t = tasks.find((x) => x.id === task) || tasks[0];
return (<>
v + "V"} unit="I vs V" />
v / s.R, xf)} fill="none" stroke={C.gold} strokeWidth="2.6" />
slope 1/R = {eng(1 / s.R, "S")} · I = {eng(I, "A")}
= 1}>V = {eng(s.V, "V")} · R = {eng(s.R, "Ω")} · I = V/R = {eng(I, "A")} · P = V·I = {eng(s.V * I, "W")} · the line is steeper for smaller R.
fmt(v, 1) + " V"} />
eng(v, "Ω")} />
);
}
/* ════ Module 2: voltage divider — KVL ════ */
function VdivFig({ task, setTask, tasks, report, done }) {
const [s, setS] = useState({ Vin: 12, R1: 1000, R2: 1000 });
const fld = useMemo(() => fieldsVdiv(s), [s]);
useEffect(() => { report(fld); }, [s]); // eslint-disable-line
const set = (k) => (v) => setS((o) => ({ ...o, [k]: v }));
const I = s.Vin / (s.R1 + s.R2), v1 = I * s.R1, v2 = I * s.R2, t = tasks.find((x) => x.id === task) || tasks[0];
return (<>
V_in = {eng(s.Vin, "V")} splits across R1 (top) and R2 (bottom)
V_out = {eng(v2, "V")}
= 0.45 && fld.divRatio <= 0.55}>I (series) = {eng(I, "A")} · V_R1 = {eng(v1, "V")} · V_out = {eng(v2, "V")} · ratio R2/(R1+R2) = {fmt(fld.divRatio, 3)} · V_R1 + V_R2 = V_in (KVL).
fmt(v, 1) + " V"} />
eng(v, "Ω")} />
eng(v, "Ω")} />
);
}
/* ════ Module 3: current divider — KCL ════ */
function IdivFig({ task, setTask, tasks, report, done }) {
const [s, setS] = useState({ Iin: 0.03, R1: 200, R2: 600 });
const fld = useMemo(() => fieldsIdiv(s), [s]);
useEffect(() => { report(fld); }, [s]); // eslint-disable-line
const set = (k) => (v) => setS((o) => ({ ...o, [k]: v }));
const Rp = (s.R1 * s.R2) / (s.R1 + s.R2), i1 = s.Iin * s.R2 / (s.R1 + s.R2), i2 = s.Iin * s.R1 / (s.R1 + s.R2);
const t = tasks.find((x) => x.id === task) || tasks[0];
return (<>
I_in = {eng(s.Iin, "A")} splits between the two parallel branches
current splits inversely to R — the smaller R carries more
R_parallel = {eng(Rp, "Ω")} · V (shared) = {eng(s.Iin * Rp, "V")} · I1 = {eng(i1, "A")} · I2 = {eng(i2, "A")} · I1 + I2 = I_in (KCL).
eng(v, "A")} />
eng(v, "Ω")} />
eng(v, "Ω")} />
);
}
/* ════ Module 4: RC charging — τ = RC ════ */
function RcFig({ task, setTask, tasks, report, done }) {
const [s, setS] = useState({ V: 10, R: 1000, Cuf: 100, t: 0.1 });
const fld = useMemo(() => fieldsRc(s), [s]);
useEffect(() => { report(fld); }, [s]); // eslint-disable-line
const set = (k) => (v) => setS((o) => ({ ...o, [k]: v }));
const tau = Math.max(1, s.R) * Math.max(1e-12, s.Cuf * 1e-6), tEnd = 5 * tau;
const tEff = clampN(s.t, 0, tEnd), vC = s.V * (1 - Math.exp(-tEff / tau));
const xf = XF([0, tEnd], [0, s.V * 1.12]), t = tasks.find((x) => x.id === task) || tasks[0];
return (<>
eng(v, "s")} unit="V_C vs t" />
63.2% @ τ
s.V * (1 - Math.exp(-x / tau)), xf)} fill="none" stroke={C.gold} strokeWidth="2.6" />
= 55 && fld.pctCharged <= 70}>τ = RC = {eng(tau, "s")} · t = {eng(tEff, "s")} · V_C = {eng(vC, "V")} · {fmt(fld.pctCharged, 1)}% charged · 63.2% at one time constant.
fmt(v, 1) + " V"} />
eng(v, "Ω")} />
v + " µF"} />
eng(tEff, "s")} />
);
}
/* ════ Module 5: RC low-pass filter — f_c ════ */
function LpfFig({ task, setTask, tasks, report, done }) {
const [s, setS] = useState({ Rf: 1000, Cnf: 100, fx: 3.2 });
const fld = useMemo(() => fieldsLpf(s), [s]);
useEffect(() => { report(fld); }, [s]); // eslint-disable-line
const set = (k) => (v) => setS((o) => ({ ...o, [k]: v }));
const fc = 1 / (TWO_PI * Math.max(1, s.Rf) * Math.max(1e-12, s.Cnf * 1e-9));
const dB = (lx) => { const f = Math.pow(10, lx); return 20 * Math.log10(1 / Math.sqrt(1 + (f / fc) ** 2)); };
const xf = XF([1, 6], [-42, 4]), db = dB(s.fx), t = tasks.find((x) => x.id === task) || tasks[0];
return (<>
eng(Math.pow(10, k), "Hz")} unit="|H| (dB) vs f" />
{[-3, -20, -40].map((d, i) => )}
−3 dB
dB(lx), xf)} fill="none" stroke={C.gold} strokeWidth="2.6" />
f_c
= -3.5 && fld.gainDb <= -2.5}>f_c = 1/(2πRC) = {eng(fc, "Hz")} · f = {eng(fld.freq, "Hz")} · |H| = {fmt(fld.gainDb, 1)} dB ({fmt(fld.gainRatio, 3)}) · −3 dB at the corner, then −20 dB/decade.
eng(v, "Ω")} />
v + " nF"} />
eng(Math.pow(10, v), "Hz")} />
);
}
/* ════ Module 6: series RLC resonance — f₀, Q ════ */
function RlcFig({ task, setTask, tasks, report, done }) {
const [s, setS] = useState({ Rr: 50, Lmh: 10, Crnf: 100, fxr: 3.7 });
const fld = useMemo(() => fieldsRlc(s), [s]);
useEffect(() => { report(fld); }, [s]); // eslint-disable-line
const set = (k) => (v) => setS((o) => ({ ...o, [k]: v }));
const R = Math.max(0.01, s.Rr), L = Math.max(1e-9, s.Lmh * 1e-3), Cc = Math.max(1e-12, s.Crnf * 1e-9);
const f0 = 1 / (TWO_PI * Math.sqrt(L * Cc));
const dB = (lx) => { const w = TWO_PI * Math.pow(10, lx); return 20 * Math.log10(R / Math.sqrt(R * R + (w * L - 1 / (w * Cc)) ** 2)); };
const xf = XF([1.5, 5.5], [-42, 4]), db = dB(s.fxr), t = tasks.find((x) => x.id === task) || tasks[0];
return (<>
eng(Math.pow(10, k), "Hz")} unit="|H| (dB) vs f" />
{[0, -3, -20, -40].map((d, i) => )}
dB(lx), xf, 380)} fill="none" stroke={C.gold} strokeWidth="2.6" />
f₀
= 5}>f₀ = 1/(2π√(LC)) = {eng(f0, "Hz")} · Q = (1/R)√(L/C) = {fmt(fld.qFactor, 2)} · bandwidth f₀/Q = {eng(fld.bandwidth, "Hz")} · smaller R ⇒ sharper peak.
eng(v, "Ω")} />
v + " mH"} />
v + " nF"} />
eng(Math.pow(10, v), "Hz")} />
);
}
const FIGS = { ohm: OhmFig, vdiv: VdivFig, idiv: IdivFig, rc: RcFig, lpf: LpfFig, rlc: RlcFig };
const MODULE_LABEL = {
ohm: "Ohm's law — V, I, R and power", vdiv: "Voltage divider (KVL)", idiv: "Current divider (KCL)",
rc: "RC charging — τ = RC", lpf: "RC low-pass filter — f_c", rlc: "Series RLC resonance — f₀, Q",
};
function AdvElectronicsFig(props) {
const module = FIGS[props.spec && props.spec.module] ? props.spec.module : "ohm";
const Fig = FIGS[module];
return ;
}
window.AdvElectronicsTutor = K.makeTutor(AdvElectronicsFig, {
benchId: "advelectronics",
moduleLabel: (spec) => MODULE_LABEL[spec && spec.module] || "Advanced electronics workbench",
});
})();