2e:null 2f:["$","title",null,{"children":"Square Root by Hand | Christophe Yamahata | Observable"}] 34:T89e,md` This notebook provides an interactive visual demonstration of the **digit-by-digit algorithm** for extracting square roots manually. * **How it works:** Enter any positive number in the **Number M** field. The notebook instantly computes the extraction process: ${tex`\sqrt{M} = \sqrt{${M}} ${stepsData.isExact ? "=" : "\\approx"} ${stepsData.finalResultStr}`} * **Visual Features:** * The consecutive subtractions are highlighted in red. * The extracted root digits appear in blue directly above the radical line ${tex`(\sqrt{\quad})`}. * The green vertical arrows (↓↓) guide your eye through each descending step. * **Calculations on the Right:** The formulas to the right of the vertical line showcase the validation step used to find each new root digit ${tex`Y`}. * **Why 20?** In digit-by-digit calculations, expanding a base-10 square yields the algebraic identity: ${tex`(10X + Y)^2 = 100X^2 + (20X + Y)Y`}. Once the first part (${tex`100X^2`}) is subtracted, we are left with a remainder that must absorb the remaining expansion block: ${tex`(20X + Y)Y`}. * **The Constraint:** At each stage, the algorithm tests the largest single digit ${tex`Y`} (from 9 to 0) that satisfies the algebraic constraint: ${tex`(20X + Y) \times Y \;\le\; \text{Remainder}`}, where ${tex`X`} represents the partial root discovered up to that point. ✦︎ This notebook was built with the assistance of Gemini AI. --- ` 35:T572,viewof M = { const form = Inputs.text({ value: "2.000000000000000000", label: "Number M", maxlength: 26 }); const inputEl = form.querySelector("input"); if (inputEl) { inputEl.addEventListener("keypress", (event) => { const allowedChars = /[0-9.]/; if (!allowedChars.test(event.key)) { event.preventDefault(); return; } if (event.key === "." && inputEl.value === "") { event.preventDefault(); inputEl.value = "0."; form.value = "0."; form.dispatchEvent(new Event("input", { bubbles: true })); return; } if (event.key === "." && inputEl.value.includes(".")) { event.preventDefault(); } }); inputEl.addEventListener("input", (event) => { let cleaned = inputEl.value.replace(/[^0-9.]/g, ''); if (cleaned.startsWith(".")) { cleaned = "0" + cleaned; } const parts = cleaned.split('.'); if (parts.length > 2) { cleaned = parts[0] + '.' + parts.slice(1).join(''); } if (cleaned.trim() === "") { cleaned = "0"; inputEl.value = "0"; form.value = "0"; setTimeout(() => inputEl.select(), 0); return; } if (inputEl.value !== cleaned) { inputEl.value = cleaned; } form.value = cleaned; }); } return form; } 36:Te26,calculation_notebook = { const maxStep = stepsData.stepsCount - 1; const activeStep = Math.min(step, maxStep); const renderData = stepsData.getStepData(maxStep); return html`

${renderData.gridElements.map(el => html`

${el.text}

`)}

${renderData.formulas.map(f => html`

${f.text}

`)}

`; }37:Tacf,viewof step = { const btnStyle = "cursor:pointer; padding: 6px 12px; font-weight: bold; border-radius: 4px; border: 1px solid #cbd5e1; background: white; color: #1e293b; font-size: 13px; line-height: 1;"; const playBtn = html``; const firstBtn = html``; const prevBtn = html``; const nextBtn = html``; const lastBtn = html``; const statusLabel = html``; const container = html`

${playBtn} ${firstBtn} ${prevBtn} ${nextBtn} ${lastBtn} ${statusLabel}

`; const maxStep = stepsData.stepsCount - 1; container.value = maxStep; let timer = null; function updateValue(val) { container.value = Math.max(0, Math.min(val, maxStep)); statusLabel.textContent = `Step ${container.value} / ${maxStep}`; container.dispatchEvent(new Event("input", { bubbles: true })); if (container.onStepChange) { container.onStepChange(container.value); } if (container.value >= maxStep && timer) { stop(); } } function stop() { if (timer) { clearTimeout(timer); timer = null; } playBtn.textContent = "▶ Play"; playBtn.style.background = "#2563eb"; } function loop() { if (container.value >= maxStep) { stop(); return; } updateValue(container.value + 1); timer = setTimeout(loop, stepDelay); } function play() { stop(); if (container.value >= maxStep) { updateValue(0); playBtn.textContent = "⏸ Pause"; playBtn.style.background = "#dc2626"; timer = setTimeout(loop, 50); } else { updateValue(container.value + 1); playBtn.textContent = "⏸ Pause"; playBtn.style.background = "#dc2626"; timer = setTimeout(loop, stepDelay); } } playBtn.onclick = () => (timer ? stop() : play()); firstBtn.onclick = () => { stop(); updateValue(0); }; prevBtn.onclick = () => { stop(); updateValue(container.value - 1); }; nextBtn.onclick = () => { stop(); updateValue(container.value + 1); }; lastBtn.onclick = () => { stop(); updateValue(maxStep); }; updateValue(maxStep); invalidation.then(() => stop()); return container; }38:T433,viewof stepDelay = { const delays = [200, 500, 1000, 3000]; const input = Inputs.range([0, delays.length - 1], { step: 1, value: 1, label: html`Animation
delay (ms)`, format: i => `${delays[i]}` }); const numInput = input.querySelector("input[type=number]"); if (numInput) { numInput.readOnly = true; numInput.style.cssText += ` -moz-appearance: textfield; pointer-events: none; `; const style = document.createElement("style"); style.textContent = ` input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } `; input.appendChild(style); } const container = html`

${input}

`; container.value = delays[input.value]; input.addEventListener("input", () => { container.value = delays[input.value]; container.dispatchEvent(new Event("input", { bubbles: true })); }); return container; }39:T9e2,exam_examples = { const container = html`

The video explains the underlying mathematical mechanics and demonstrates the algorithm using historical examples: the 1869 Harvard and 1876 MIT entrance exams where students had to extract square roots entirely by hand. (Click on a formula below to automatically load its value into field M) 🡆 Example 1: ${tex`\sqrt{2025}`}
🡆 Example 2: ${tex`\sqrt{831744}`}
🡆 Example 3: ${tex`\sqrt{13689}`}
🡆 Example 4 (MIT exam): ${tex`\sqrt{11.56}`}
🡆 Example 5: ${tex`\sqrt{1234}`}
🡆 Example 6 (Harvard exam): ${tex`\sqrt{531.5}`}

`; const updateInput = (value) => { const inputEl = viewof M.querySelector("input"); if (inputEl) { inputEl.value = value; viewof M.value = value; viewof M.dispatchEvent(new Event("input", { bubbles: true })); } }; container.querySelector(".link-1").addEventListener("click", () => updateInput("2025")); container.querySelector(".link-2").addEventListener("click", () => updateInput("831744")); container.querySelector(".link-3").addEventListener("click", () => updateInput("13689")); container.querySelector(".link-mit").addEventListener("click", () => updateInput("11.56")); container.querySelector(".link-5").addEventListener("click", () => updateInput("1234")); container.querySelector(".link-harvard").addEventListener("click", () => updateInput("531.5")); return container; } 3a:T411,viewof display_inspect = { const el = htl.html`

Appendix

⇣ Check to inspect the notebook script

`; const checkbox = el.querySelector("input"); const spacer = el.querySelector("div"); function update() { const show = checkbox.checked; document.querySelectorAll(".observablehq--inspect").forEach(node => { if (el.contains(node)) return; node.style.display = show ? "" : "none"; }); spacer.style.height = show ? "0" : "20vh"; } checkbox.addEventListener("change", update); const observer = new MutationObserver(update); observer.observe(document.body, { childList: true, subtree: true }); update(); invalidation.then(() => observer.disconnect()); return el; }3b:T142a,stepsData = { if (!M || String(M).trim() === "") { return { stepsCount: 1, finalResultStr: "", isExact: false, getStepData: () => ({ gridElements: [], formulas: [], potenceColumn: 20, maxRows: 5 }) }; } const textM = String(M).trim().replace(',', '.').replace(/[^0-9.]/g, ''); const parts = textM.split('.'); let intStr = parts && parts[0] !== "" ? String(parts[0]) : "0"; let decStr = parts ? String(parts[1] || "") : ""; if (intStr.length % 2 === 1) intStr = "0" + intStr; if (decStr.length % 2 === 1) decStr += "0"; const intPairs = []; for (let i = 0; i < intStr.length; i += 2) { intPairs.push(intStr.substring(i, i + 2)); } const decPairs = []; for (let i = 0; i < decStr.length; i += 2) { decPairs.push(decStr.substring(i, i + 2)); } while (decPairs.length < 3) decPairs.push("00"); const allPairs = [...intPairs, ...decPairs]; const decIdx = intPairs.length; const formattedTopNumber = intPairs.join(" ") + (decPairs.length > 0 ? " . " + decPairs.join(" ") : ""); const potenceColumn = formattedTopNumber.length + 3; const baseGridElements = []; let dotCol = 0; formattedTopNumber.split("").forEach((char, idx) => { const colPosition = 2 + idx; if (char === ".") dotCol = colPosition; baseGridElements.push({ text: char, col: colPosition, row: 2, class: char === "." ? "text-comma" : "", stepIndex: 0 }); }); if (dotCol > 0) baseGridElements.push({ text: ".", col: dotCol, row: 1, class: "text-blue", stepIndex: 0 }); baseGridElements.push({ text: "√", col: 2, row: 2, class: "radical-symbol", stepIndex: 0 }); baseGridElements.push({ text: "", col: 2, row: 2, class: "radical-roof", style: `grid-column-end: ${2 + formattedTopNumber.length};`, stepIndex: 0 }); const pairPositions = []; let currentIdx = 0; for (let i = 0; i < allPairs.length; i++) { pairPositions.push(currentIdx); currentIdx += 3; if (i === decIdx - 1) currentIdx += 2; } let R = 0; let P = 0; let currentLine = 4; const stepsGrid = []; const stepsFormulas = []; for (let i = 0; i < allPairs.length; i++) { const pairStr = allPairs[i]; const Y = isNaN(parseInt(pairStr)) ? 0 : parseInt(pairStr); const currentR = R * 100 + Y; let x = 9; while ((20 * P + x) * x > currentR && x >= 0) { x--; } const partialDivisor = 20 * P + x; const product = partialDivisor * x; const newR = currentR - product; const startColIdx = pairPositions[i]; const rightCol = 2 + startColIdx + 2; const stepElements = []; const stepIdx = i + 1; stepElements.push({ text: String(x), col: rightCol - 1, row: 1, class: "text-blue", stepIndex: stepIdx }); const currentRStr = String(currentR); for (let c = 0; c < currentRStr.length; c++) { const char = currentRStr[currentRStr.length - 1 - c]; stepElements.push({ text: char, col: rightCol - 1 - c, row: currentLine, class: "", stepIndex: stepIdx }); } if (i > 0) { stepElements.push({ text: "", col: rightCol - 2, row: 3, class: "descending-arrow", style: `grid-row-end: ${currentLine};`, stepIndex: stepIdx }); stepElements.push({ text: "", col: rightCol - 1, row: 3, class: "descending-arrow", style: `grid-row-end: ${currentLine};`, stepIndex: stepIdx }); } currentLine++; const prodStr = String(product); for (let c = 0; c < prodStr.length; c++) { stepElements.push({ text: prodStr[prodStr.length - 1 - c], col: rightCol - 1 - c, row: currentLine, class: "text-red", stepIndex: stepIdx }); } stepElements.push({ text: "-", col: rightCol - 1 - prodStr.length, row: currentLine, class: "text-red", stepIndex: stepIdx }); const maxLen = Math.max(currentRStr.length, prodStr.length + 1); stepElements.push({ text: "", col: rightCol - maxLen, row: currentLine, class: "cell-underline", style: `grid-column-end: ${rightCol};`, stepIndex: stepIdx }); currentLine++; const remainderStr = String(newR); for (let c = 0; c < remainderStr.length; c++) { stepElements.push({ text: remainderStr[remainderStr.length - 1 - c], col: rightCol - 1 - c, row: currentLine, class: "", stepIndex: stepIdx }); } stepsGrid.push(...stepElements); stepsFormulas.push({ text: `(20 × ${P} + ${x}) × ${x} = ${product}`, row: currentLine - 1, stepIndex: stepIdx }); currentLine += 2; P = (P * 10) + x; R = newR; } const pStr = String(P).padStart(allPairs.length, "0"); const rootInt = parseInt(pStr.substring(0, decIdx)); let rootDec = pStr.substring(decIdx).replace(/0+$/, ''); const finalResultStr = rootDec.length > 0 ? `${rootInt}.${rootDec}` : `${rootInt}`; const isExact = R === 0; const getStepData = (currentStep) => { return { gridElements: [...baseGridElements, ...stepsGrid.filter(el => el.stepIndex <= currentStep)], formulas: stepsFormulas.filter(f => f.stepIndex <= currentStep), potenceColumn, maxRows: currentLine }; }; return { stepsCount: allPairs.length + 1, finalResultStr, isExact, getStepData }; }3c:[] 32:{"id":"5444d81a93d96a4d","slug":"square-root-by-hand-digit-by-digit-method","title":"Square Root by Hand","thumbnail":"7103bc3b11ecc4e4092b8df0739b55a8f36b8c3c56fad2655dd389993a3a5733","access_level":"public","create_time":"$D2026-07-19T09:50:55.632Z","update_time":"$D2026-09-04T23:50:33.580Z","view_time":null,"first_public_time":"$D2026-07-19T13:59:18.230Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024"},"version":772,"publish_version":772,"role":null,"authored":false,"authors":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null}],"members":[{"type":"individual","id":"06f083eba60f5a76","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":null,"role":"editor"},{"type":"team","id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata","avatar_url":"https://avatars-next.observableusercontent.com/8256ac716aa8395babba412b2835913d186874fa4190df57a4a28f2e60129876","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"19262496cb287a16","slug":"mathematics","title":"Mathematics","owner":{"id":"dd67891d326bcfb1","login":"christophe-yamahata","name":"Christophe Yamahata"}},"type":"notebook","body":{"title":"Square Root by Hand","cells":[{"id":0,"value":"# Square Root by Hand \n### (Digit-by-Digit Method)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":237,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"tex`\n{\\small\n\\begin{aligned}\n\\text{Digit-by-digit calculation: } & \\sqrt{M} ${stepsData.isExact ? \"=\" : \"\\\\approx\"} ${stepsData.finalResultStr} \\\\\n\\text{Computed value: } & \\sqrt{M} ${stepsData.isExact ? \"=\" : \"\\\\approx\"} ${square_root}\n\\end{aligned}\n}\n`\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":605,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":633,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"---\n## Useful Video\n\nIf you found this notebook helpful, you can watch the video below for a comprehensive, step-by-step walkthrough of the digit-by-digit method. \n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":414,"value":"

\n \n

\n How to Calculate the Square Root of Any Number, Digit-by-Digit Method\n
[ Source: Mind Your Decisions, YouTube. ]\n

\n\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":501,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":602,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"square_root = {\n const num = parseFloat(String(M).replace(',', '.'));\n if (isNaN(num)) return \"0\";\n\n const rawRoot = Math.sqrt(num);\n \n const cleanedNumber = Number(rawRoot.toFixed(20));\n \n let result = String(cleanedNumber);\n \n if (result.includes('.')) {\n result = result.replace(/0+$/, '');\n if (result.endsWith('.')) result = result.slice(0, -1);\n }\n \n return result;\n}\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"2","titling":"auto"}} 33:"$32:body"