42:null 43:["$","title",null,{"children":"Interactive long division teaching visual | Sean Dotson | Observable"}] 49:T44f,// Core algorithm: compute the classic "Divide, Multiply, Subtract, Bring down" steps // for a given dividend (positive integer) and divisor (positive integer). function computeLongDivision(dividendStr, divisor) { const digits = dividendStr.split("").map(Number); const n = digits.length; const cols = []; // one entry per dividend digit column let remainder = 0; let started = false; for (let i = 0; i < n; i++) { const before = remainder * 10 + digits[i]; const qDigit = Math.floor(before / divisor); const product = qDigit * divisor; const after = before - product; const wasStarted = started; if (qDigit > 0) started = true; cols.push({ i, digit: digits[i], before, qDigit, product, after, showCycle: started, // whether this column gets a full divide/multiply/subtract row firstStart: !wasStarted && started // this column is where the quotient "begins" }); remainder = after; } return { digits, n, divisor, cols, finalRemainder: remainder }; } const testLD = computeLongDivision("936", 4); testLD4a:T1153,// Build a fine-grained "microstep" script (Divide / Multiply / Subtract / Bring down) // plus a registry of drawable elements (ids -> {col, kind, text}) each tagged with // the microstep index at which it should first appear. function buildDivisionScript(ld) { const { digits, n, divisor, cols, finalRemainder } = ld; const elements = new Map(); // id -> {id, col, kind, text, appear, rowIndex} const microsteps = []; // rowIndex for each showCycle column, in order let rowIndex = -1; const rowIndexOf = {}; cols.forEach((c) => { if (c.showCycle) { rowIndex++; rowIndexOf[c.i] = rowIndex; } }); function digitIds(prefix, i, value) { const s = String(value); return s.split("").map((ch, j) => { const col = i - (s.length - 1 - j); // right-aligned ending at column i return { id: `${prefix}${i}_${col}`, col, text: ch }; }); } function addEl(id, col, kind, text, appear, rowIndex) { elements.set(id, { id, col, kind, text, appear, rowIndex }); } // Always-visible base elements (appear at step 0 / -1 meaning "always shown") digits.forEach((d, i) => addEl(`d${i}`, i, "dividend", String(d), -1, null)); addEl("divisor", -1, "divisor", String(divisor), -1, null); let s = 0; for (const col of cols) { const i = col.i; if (!col.showCycle) { if (i < n - 1) { microsteps.push({ type: "toosmall", caption: `${divisor} does not go into ${col.before}, so bring down the next digit.`, highlight: [`d${i}`], step: s }); s++; } else { addEl(`q${i}`, i, "quotient", "0", s, null); microsteps.push({ type: "quotient-zero", caption: `${divisor} does not go into ${col.before}. The quotient is 0, remainder ${col.before}.`, highlight: [`d${i}`, `q${i}`], step: s }); s++; } continue; } const k = rowIndexOf[i]; // DIVIDE addEl(`q${i}`, i, "quotient", String(col.qDigit), s, k); microsteps.push({ type: "divide", caption: `Divide: ${col.before} ÷ ${divisor} = ${col.qDigit}`, highlight: [`q${i}`], step: s }); s++; // MULTIPLY const prodDigits = digitIds("p", i, col.product); addEl(`minus${i}`, prodDigits[0].col - 1, "minus", "−", s, k); prodDigits.forEach((d) => addEl(d.id, d.col, "product", d.text, s, k)); microsteps.push({ type: "multiply", caption: `Multiply: ${col.qDigit} × ${divisor} = ${col.product}`, highlight: [`minus${i}`, ...prodDigits.map((d) => d.id)], step: s }); s++; // SUBTRACT (line) const leftMostCol = prodDigits.length ? Math.min(...prodDigits.map((d) => d.col)) : i; addEl(`line${i}`, i, "line", null, s, k); elements.get(`line${i}`).fromCol = leftMostCol - 1; // include minus sign width elements.get(`line${i}`).toCol = i; microsteps.push({ type: "subtract-line", caption: `Subtract ${col.product} from ${col.before}.`, highlight: [`line${i}`], step: s }); s++; // SUBTRACT (result) const remDigits = digitIds("r", i, col.after); remDigits.forEach((d) => addEl(d.id, d.col, "remainder", d.text, s, k)); microsteps.push({ type: "subtract-result", caption: `${col.before} − ${col.product} = ${col.after}`, highlight: remDigits.map((d) => d.id), step: s }); s++; // BRING DOWN if (i < n - 1) { const nextDigit = digits[i + 1]; addEl(`carry${i + 1}`, i + 1, "carry", String(nextDigit), s, k); microsteps.push({ type: "bringdown", caption: `Bring down the next digit: ${nextDigit}`, highlight: [`d${i + 1}`, `carry${i + 1}`], step: s }); s++; } else { if (col.after > 0) { microsteps.push({ type: "remainder-final", caption: `No more digits to bring down. The remainder is ${col.after}.`, highlight: remDigits.map((d) => d.id), step: s }); } else { microsteps.push({ type: "done", caption: `No more digits to bring down and the remainder is 0. Division is complete!`, highlight: [], step: s }); } s++; } } return { elements: [...elements.values()], microsteps, rowCount: rowIndex + 1, ld }; } const testScript = buildDivisionScript(testLD); testScript4b:Tdc4,// Renderer: turns a script + a "how far have we revealed" step index into an SVG. const LD_STYLE = { cw: 38, // column width rh: 40, // row height originX: 110, // x of column 0 fontSize: 26, padTop: 30, padBottom: 30, padRight: 40 }; function ldX(col) { return LD_STYLE.originX + col * LD_STYLE.cw; } function renderLongDivision(script, stepIndex, manualHighlight = new Set(), onDigitClick = null) { const { elements, microsteps, rowCount, ld } = script; const cw = LD_STYLE.cw, rh = LD_STYLE.rh; const bracketX = LD_STYLE.originX - 16; const divisorX = bracketX - 14; const topLineY = LD_STYLE.padTop + 34 + 50; const quotientRowY = topLineY - 14; const dividendRowY = topLineY + 30; const lastDigitCol = ld.n - 1; const width = ldX(lastDigitCol) + cw * 0.8 + LD_STYLE.padRight; const height = dividendRowY + rh * (2 * rowCount + 1) + LD_STYLE.padBottom; function productY(k) { return dividendRowY + rh * (2 * k + 1); } function lineY(k) { return productY(k) + 16; } function remainderY(k) { return dividendRowY + rh * (2 * k + 2); } const currentHighlight = new Set((microsteps[stepIndex]?.highlight) || []); const visible = elements.filter((e) => e.appear <= stepIndex); const nodes = []; // Bracket: vertical line + top horizontal line nodes.push(svg``); nodes.push(svg``); for (const el of visible) { const isHi = currentHighlight.has(el.id) || manualHighlight.has(el.id); const fill = isHi ? "#d9480f" : "#1c1c1c"; const weight = isHi ? "700" : "400"; let x, y, textAnchor = "middle"; if (el.kind === "divisor") { x = divisorX; y = dividendRowY; textAnchor = "end"; } else if (el.kind === "quotient") { x = ldX(el.col); y = quotientRowY; } else if (el.kind === "dividend") { x = ldX(el.col); y = dividendRowY; } else if (el.kind === "product") { x = ldX(el.col); y = productY(el.rowIndex); } else if (el.kind === "minus") { x = ldX(el.col); y = productY(el.rowIndex); } else if (el.kind === "remainder") { x = ldX(el.col); y = remainderY(el.rowIndex); } else if (el.kind === "carry") { x = ldX(el.col); y = remainderY(el.rowIndex); } if (el.kind === "line") { const y0 = lineY(el.rowIndex); nodes.push(svg``); continue; } const clickable = ["quotient", "dividend", "product", "remainder", "carry"].includes(el.kind); nodes.push(svg`${el.text}`); } const root = svg``; if (onDigitClick) { root.querySelectorAll("[data-id]").forEach((node) => { node.addEventListener("click", () => onDigitClick(node.getAttribute("data-id"))); }); } return root; } display(renderLongDivision(testScript, testScript.microsteps.length - 1));4c:T6e7,function setLdProblem(dividend, divisor) { dividend = String(dividend).replace(/[^0-9]/g, "").replace(/^0+(?=\d)/, ""); divisor = Math.max(1, Math.floor(Number(divisor) || 1)); if (!dividend) dividend = "0"; ldProblemM.value = { dividend, divisor }; ldStepM.value = -1; ldHighlightM.value = new Set(); } const dividendInput = html``; const divisorInput = html``; const applyBtn = html``; const presetSelect = html``; applyBtn.addEventListener("click", () => setLdProblem(dividendInput.value, divisorInput.value)); dividendInput.addEventListener("keydown", (e) => { if (e.key === "Enter") applyBtn.click(); }); divisorInput.addEventListener("keydown", (e) => { if (e.key === "Enter") applyBtn.click(); }); presetSelect.addEventListener("change", () => { if (presetSelect.value === "") return; const p = ldPresets[+presetSelect.value]; dividendInput.value = p.dividend; divisorInput.value = String(p.divisor); setLdProblem(p.dividend, p.divisor); }); const problemPanel = html`

Dividend ${dividendInput} ÷ Divisor ${divisorInput} ${applyBtn} or ${presetSelect}

`; display(problemPanel);4d:T7ba,const ldMaxStep = ldScript.microsteps.length - 1; const prevBtn = html``; const nextBtn = html``; const resetBtn = html``; const allBtn = html``; const playBtn = html``; const stepSlider = html``; function clamp(v) { return Math.max(-1, Math.min(ldMaxStep, v)); } let ldPlayTimer = null; function stopPlay() { if (ldPlayTimer) { clearInterval(ldPlayTimer); ldPlayTimer = null; playBtn.textContent = "▶ Play"; } } prevBtn.addEventListener("click", () => { stopPlay(); ldStepM.value = clamp(ldStepM.value - 1); }); nextBtn.addEventListener("click", () => { stopPlay(); ldStepM.value = clamp(ldStepM.value + 1); }); resetBtn.addEventListener("click", () => { stopPlay(); ldStepM.value = -1; ldHighlightM.value = new Set(); }); allBtn.addEventListener("click", () => { stopPlay(); ldStepM.value = ldMaxStep; }); stepSlider.addEventListener("input", () => { stopPlay(); ldStepM.value = clamp(+stepSlider.value); }); playBtn.addEventListener("click", () => { if (ldPlayTimer) { stopPlay(); return; } playBtn.textContent = "⏸ Pause"; ldPlayTimer = setInterval(() => { if (ldStepM.value >= ldMaxStep) { stopPlay(); return; } ldStepM.value = ldStepM.value + 1; }, 1200); }); const controlPanel = html`

${resetBtn}${prevBtn}${nextBtn}${playBtn}${allBtn} step ${stepSlider}

`; display(controlPanel);4e:T59f,// Keep the slider in sync with the reactive step value stepSlider.value = ldStepM.value; function ldToggleHighlight(id) { const next = new Set(ldHighlightM.value); if (next.has(id)) next.delete(id); else next.add(id); ldHighlightM.value = next; } const currentCaption = ldStepM.value === -1 ? `Set up: ${ld.divisor} into ${ldProblemM.dividend}. Press “Next” to start dividing.` : ldScript.microsteps[ldStepM.value].caption; const stepTypeLabel = ldStepM.value === -1 ? "Setup" : { divide: "① Divide", multiply: "② Multiply", "subtract-line": "③ Subtract", "subtract-result": "③ Subtract", bringdown: "④ Bring down", toosmall: "① Divide", "quotient-zero": "① Divide", "remainder-final": "Remainder", done: "✓ Done" }[ldScript.microsteps[ldStepM.value].type]; const captionPanel = html`

${stepTypeLabel}

${currentCaption}

Step ${ldStepM.value + 1} of ${ldMaxStep + 1} · click any digit to highlight it manually

`; const diagram = renderLongDivision(ldScript, ldStepM.value, ldHighlightM.value, ldToggleHighlight); display(html`

${captionPanel}${diagram}

`);4f:T53a,// --- Reactive state, implemented as hidden elements driven via view() --- // (Each dispatches a native "input" event so downstream cells reactively rerun.) const ldProblemEl = document.createElement("input"); ldProblemEl.type = "hidden"; ldProblemEl.value = JSON.stringify({ dividend: "936", divisor: 4 }); const ldStepEl = document.createElement("input"); ldStepEl.type = "hidden"; ldStepEl.value = "-1"; const ldHighlightEl = document.createElement("input"); ldHighlightEl.type = "hidden"; ldHighlightEl.value = "[]"; function fireInput(el) { el.dispatchEvent(new Event("input", { bubbles: true })); } function ldSetProblem(dividend, divisor) { dividend = String(dividend).replace(/[^0-9]/g, "").replace(/^0+(?=\d)/, "") || "0"; divisor = Math.max(1, Math.floor(Number(divisor) || 1)); ldProblemEl.value = JSON.stringify({ dividend, divisor }); ldStepEl.value = "-1"; ldHighlightEl.value = "[]"; fireInput(ldProblemEl); fireInput(ldStepEl); fireInput(ldHighlightEl); } function ldSetStep(n) { ldStepEl.value = String(n); fireInput(ldStepEl); } function ldToggleHighlight(id) { const cur = new Set(JSON.parse(ldHighlightEl.value)); if (cur.has(id)) cur.delete(id); else cur.add(id); ldHighlightEl.value = JSON.stringify([...cur]); fireInput(ldHighlightEl); } display("reactive state ready");50:T5ab,const ldDividendInput = html``; const ldDivisorInput = html``; const ldApplyBtn = html``; const ldPresetSelect = html``; ldApplyBtn.addEventListener("click", () => ldSetProblem(ldDividendInput.value, ldDivisorInput.value)); ldDividendInput.addEventListener("keydown", (e) => { if (e.key === "Enter") ldApplyBtn.click(); }); ldDivisorInput.addEventListener("keydown", (e) => { if (e.key === "Enter") ldApplyBtn.click(); }); ldPresetSelect.addEventListener("change", () => { if (ldPresetSelect.value === "") return; const p = ldPresets[+ldPresetSelect.value]; ldDividendInput.value = p.dividend; ldDivisorInput.value = String(p.divisor); ldSetProblem(p.dividend, p.divisor); }); const ldProblemPanel = html`

Dividend ${ldDividendInput} ÷ Divisor ${ldDivisorInput} ${ldApplyBtn} or ${ldPresetSelect}

`; display(ldProblemPanel);51:[] 47:{"id":"3d966cbff802518f","slug":"interactive-long-division-teaching-visual","title":"Interactive long division teaching visual","thumbnail":"e11fdecc6afb0ff5b32e167879f2d0291cd48712708d86dc6e4582a6f2d89ca9","access_level":"public","create_time":"$D2026-08-24T22:33:17.552Z","update_time":"$D2026-08-24T22:34:40.133Z","view_time":null,"first_public_time":"$D2026-08-24T22:36:06.491Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"e348977810892d2f","login":"seandotson","name":"Sean Dotson","avatar_url":"https://avatars-next.observableusercontent.com/c61d9da0bd83238722b135d49bce39981bd92661b4ab2d550f05a35eaf94161c","tier":"starter_2024","bio":"","following":false},"version":91,"publish_version":91,"role":null,"authored":false,"authors":[{"type":"individual","id":"a8c2112fc99656c6","login":"seandotson","name":"Sean Dotson","avatar_url":"https://avatars-next.observableusercontent.com/c61d9da0bd83238722b135d49bce39981bd92661b4ab2d550f05a35eaf94161c","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"e348977810892d2f","login":"seandotson","name":"Sean Dotson","avatar_url":"https://avatars-next.observableusercontent.com/c61d9da0bd83238722b135d49bce39981bd92661b4ab2d550f05a35eaf94161c","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Interactive long division teaching visual","cells":[{"id":2,"value":"","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"$49","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Compute per-column long division data","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$4a","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Generate divide/multiply/subtract/bring-down microstep script","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$4b","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Build SVG renderer for the long-division diagram","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"typeof Mutable","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Check if Mutable helper is available","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"// Preset practice problems (feel free to add more, e.g. from a curriculum data source)\nconst ldPresets = [\n { label: \"936 ÷ 4\", dividend: \"936\", divisor: 4 },\n { label: \"125 ÷ 5\", dividend: \"125\", divisor: 5 },\n { label: \"784 ÷ 7\", dividend: \"784\", divisor: 7 },\n { label: \"3915 ÷ 3\", dividend: \"3915\", divisor: 3 },\n { label: \"417 ÷ 8 (remainder)\", dividend: \"417\", divisor: 8 },\n { label: \"6042 ÷ 6 (zero digit)\", dividend: \"6042\", divisor: 6 },\n { label: \"104 ÷ 5 (leading skip)\", dividend: \"104\", divisor: 5 }\n];\n\n// Reactive state for the current problem, the reveal step, and manual highlights\nconst ldProblemM = Mutable({ dividend: \"936\", divisor: 4 });\nconst ldStepM = Mutable(-1);\nconst ldHighlightM = Mutable(new Set());\n\ndisplay(\"state initialized\");","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Set up presets and mutable state (problem, step, highlights)","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1,"value":"I need to create a visual for teaching long division. we need to be able to draw what a student might draw to solve a problem. but we need to be able to drive this view with data and inputs, buttons, etc. also, we need to be able to control the flow of drawing the numbers and then be able to highlight specific digits.","pinned":false,"hidden":false,"mode":"md","author":"user","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$4c","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Build dividend/divisor inputs and preset selector panel","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"// Recompute the division script whenever the problem changes\nconst ld = computeLongDivision(ldProblemM.dividend, ldProblemM.divisor);\nconst ldScript = buildDivisionScript(ld);\ndisplay(ldScript.microsteps.map(m => m.caption));","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Recompute algorithm + script from current problem state","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"Now let's build the step controls (Prev/Next/Play/Reset/Show all + slider) and the caption panel.","pinned":false,"hidden":false,"mode":"md","author":"agent","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"$4d","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Build Prev/Next/Play/Reset/slider step controls","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$4e","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Render caption + SVG diagram, wired to reactive state","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"display(ldStepM.value);\ndisplay(ldMaxStep);\ndisplay(ldScript.microsteps.length);","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Debug current step value","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"display(ldStepM);\ndisplay(typeof ldStepM.value);","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Inspect ldStepM mutable object","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"const testMutable = Mutable(5);\ndisplay(testMutable);\ndisplay(Object.keys(testMutable));\ndisplay(Object.getPrototypeOf(testMutable));","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Inspect Mutable API shape","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"display(testMutable.value);\ntestMutable.value = 42;\ndisplay(testMutable.value);","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Test reading/writing Mutable .value directly","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"const testMutable2 = Mutable(5);\ndisplay(typeof testMutable2, testMutable2 && testMutable2.value);\ntestMutable2.value = 99;\ndisplay(testMutable2.value);","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Test Mutable .value access within same cell","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"// Quick sanity check of the view()-driven state pattern in this environment\nconst testStateEl = document.createElement(\"input\");\ntestStateEl.type = \"hidden\";\ntestStateEl.value = \"0\";\nfunction testBump() {\n testStateEl.value = String(Number(testStateEl.value) + 1);\n testStateEl.dispatchEvent(new Event(\"input\", { bubbles: true }));\n}\nconst testBtn2 = html``;\ntestBtn2.addEventListener(\"click\", testBump);\ndisplay(testBtn2);\ndisplay(testStateEl);","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Set up a hidden-input reactive state pattern to test view()","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"const testCounterValue = view(testStateEl);","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"View the hidden input as a generator","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"testBump();\ntestBump();","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Trigger the counter twice","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"display(testCounterValue);","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Check whether counter value updated reactively","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"$4f","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Recreate state using hidden-input view() pattern","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"function ldToggleHighlight2(id) {\n const cur = new Set(JSON.parse(ldHighlightEl.value));\n if (cur.has(id)) cur.delete(id); else cur.add(id);\n ldHighlightEl.value = JSON.stringify([...cur]);\n fireInput(ldHighlightEl);\n}\ndisplay(\"ok\");","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Fix naming collision for toggle-highlight function","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"Now the input panel wired to the new state functions, and the reactive views:","pinned":false,"hidden":false,"mode":"md","author":"agent","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"$50","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Build problem input panel wired to hidden-input state","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"Now let's set up the reactive views for problem and step, and compute the script:","pinned":false,"hidden":false,"mode":"md","author":"agent","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"const ldProblemJSON = view(ldProblemEl);\nconst ldStepRaw = view(ldStepEl);\nconst ldHighlightJSON = view(ldHighlightEl);","pinned":false,"hidden":false,"mode":"js","author":"agent","summary":"Create reactive views over the hidden state inputs","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W51","stdlib":"2"}} 48:"$47:body"