⚠️ ${esc(msg)}

`; if (interp) interp.innerHTML = ""; if (steps) steps.innerHTML = ""; if (copy) copy.style.display = "none"; form.dataset.copyText = ""; } function statGridHtml(stats) { return `

${stats.map(stat => `

${esc(stat.label)}

${esc(stat.value)}

`).join("")}

`; } function renderInputs(form) { const mode = getMode(form); const box = q(form, '[data-ratio="dynamicInputs"]'); if (!box) return; if (mode === "simplify") { box.innerHTML = `

Enter the ratio to simplify

First term

Second term

Use nonnegative values. Example: 12:18 simplifies to 2:3.

`; return; } if (mode === "scale") { box.innerHTML = `

Scale a ratio

First term

Second term

Scale method

Scale factor

Target term

Target applies to

`; return; } if (mode === "proportion") { box.innerHTML = `

Solve a proportion

Enter exactly one missing value as x.

This solves a:b = c:d, or a / b = c / d.

`; return; } if (mode === "split") { box.innerHTML = `

Split a total using a ratio

First ratio part

Second ratio part

Total

First label

Second label

`; return; } if (mode === "compare") { box.innerHTML = `

Compare two ratios

Ratio 1 — first term

Ratio 1 — second term

Ratio 2 — first term

Ratio 2 — second term

`; return; } if (mode === "convert") { box.innerHTML = `

Convert a ratio

First term

Second term

This shows first-to-second fraction, decimal, percent, and each part’s share of the total.

`; } } function syncPanels(form) { const scaleMethod = getInputValue(form, "scaleMethod") || "factor"; qa(form, "[data-ratio-scale-panel]").forEach(el => { el.classList.toggle("ratioHidden", el.getAttribute("data-ratio-scale-panel") !== scaleMethod); }); } function syncMeta(form) { const mode = getMode(form); const meta = MODE_META[mode] || MODE_META.simplify; const label = q(form, '[data-ratio="modeLabel"]'); const badge = q(form, '[data-ratio="formulaBadge"]'); const hint = q(form, '[data-ratio="modeHint"]'); if (label) label.textContent = meta.label; if (badge) badge.textContent = meta.formula; if (hint) hint.textContent = meta.hint; } function syncUI(form) { const previous = {}; qa(form, "[data-ratio-input]").forEach(el => previous[el.getAttribute("data-ratio-input")] = el.value); syncMeta(form); renderInputs(form); Object.entries(previous).forEach(([k, v]) => setInputValue(form, k, v)); syncPanels(form); clearOutput(form); } function computeSimplify(form) { const a = parseNumber(getInputValue(form, "simpA")); const b = parseNumber(getInputValue(form, "simpB")); if (needNumber(a, "First term")) return { error:needNumber(a, "First term") }; if (needNumber(b, "Second term")) return { error:needNumber(b, "Second term") }; if (needNonNegative(a, "First term")) return { error:needNonNegative(a, "First term") }; if (needPositive(b, "Second term")) return { error:"Second term must be greater than 0." }; if (a === 0 && b === 0) return { error:"At least one ratio term must be nonzero." }; const simp = simplifyTwo(a, b); const decimal = a / b; const percent = decimal * 100; const decimalMode = simp.scaleToIntegers > 1; return { mode:"simplify", ratioA:a, ratioB:b, simpleA:simp.left, simpleB:simp.right, decimal, percent, decimalMode, scaleToIntegers:simp.scaleToIntegers, formula:"a:b → a ÷ GCF : b ÷ GCF", substitution:`${a}:${b} → ${simp.left}:${simp.right}`, interpretation:`The ratio ${a}:${b} has the same relationship as ${simp.left}:${simp.right}, but it is written in simplest whole-number terms.`, steps:[ `Start with the ratio ${a}:${b}.`, decimalMode ? `Because at least one term is a decimal, first multiply both terms by ${simp.scaleToIntegers} to make whole-number terms.` : `Both terms are already whole-number friendly.`, `Find the greatest common factor of the whole-number terms.`, `Divide both terms by that common factor.`, `The simplified ratio is ${simp.left}:${simp.right}.` ] }; } function computeScale(form) { const a = parseNumber(getInputValue(form, "scaleA")); const b = parseNumber(getInputValue(form, "scaleB")); const method = getInputValue(form, "scaleMethod") || "factor"; if (needNumber(a, "First term")) return { error:needNumber(a, "First term") }; if (needNumber(b, "Second term")) return { error:needNumber(b, "Second term") }; if (needNonNegative(a, "First term")) return { error:needNonNegative(a, "First term") }; if (needPositive(b, "Second term")) return { error:"Second term must be greater than 0." }; let factor; let newA; let newB; let methodText; if (method === "target") { const target = parseNumber(getInputValue(form, "targetTerm")); const which = getInputValue(form, "targetWhich") || "left"; if (needNumber(target, "Target term")) return { error:needNumber(target, "Target term") }; if (needNonNegative(target, "Target term")) return { error:needNonNegative(target, "Target term") }; if (which === "left") { if (a === 0) return { error:"Cannot target the first term when the original first term is 0." }; factor = target / a; newA = target; newB = b * factor; methodText = `Target first term ${target}, so scale factor = ${target} ÷ ${a} = ${factor}.`; } else { factor = target / b; newA = a * factor; newB = target; methodText = `Target second term ${target}, so scale factor = ${target} ÷ ${b} = ${factor}.`; } } else { factor = parseNumber(getInputValue(form, "scaleFactor")); if (needNumber(factor, "Scale factor")) return { error:needNumber(factor, "Scale factor") }; if (needPositive(factor, "Scale factor")) return { error:"Scale factor must be greater than 0." }; newA = a * factor; newB = b * factor; methodText = `Multiply both terms by ${factor}.`; } const simp = simplifyTwo(newA, newB); return { mode:"scale", ratioA:newA, ratioB:newB, originalA:a, originalB:b, factor, simpleA:simp.left, simpleB:simp.right, formula:"a:b → ka:kb", substitution:`${a}:${b} × ${factor} = ${newA}:${newB}`, interpretation:`The new ratio ${newA}:${newB} is equivalent to ${a}:${b} because both terms were scaled by the same positive factor.`, steps:[ `Start with the ratio ${a}:${b}.`, methodText, `First term: ${a} × ${factor} = ${newA}.`, `Second term: ${b} × ${factor} = ${newB}.`, `The equivalent ratio is ${newA}:${newB}.` ] }; } function parseProportionTerm(raw) { const s = String(raw ?? "").trim().toLowerCase(); if (s === "x" || s === "?") return { missing:true, value:NaN }; return { missing:false, value:parseNumber(raw) }; } function computeProportion(form) { const terms = { a: parseProportionTerm(getInputValue(form, "propA")), b: parseProportionTerm(getInputValue(form, "propB")), c: parseProportionTerm(getInputValue(form, "propC")), d: parseProportionTerm(getInputValue(form, "propD")) }; const missing = Object.entries(terms).filter(([, item]) => item.missing).map(([key]) => key); if (missing.length !== 1) return { error:"Enter exactly one missing value as x." }; for (const [key, item] of Object.entries(terms)) { if (!item.missing && !Number.isFinite(item.value)) return { error:`Term ${key} must be a valid number or x.` }; if (!item.missing && item.value < 0) return { error:`Term ${key} must be 0 or greater.` }; } const a = terms.a.value; const b = terms.b.value; const c = terms.c.value; const d = terms.d.value; const xKey = missing[0]; if (!terms.b.missing && b === 0) return { error:"Term b cannot be 0 because it is a denominator." }; if (!terms.d.missing && d === 0) return { error:"Term d cannot be 0 because it is a denominator." }; let x; let solveLine; if (xKey === "a") { if (d === 0) return { error:"Term d cannot be 0." }; x = b * c / d; solveLine = `x × ${d} = ${b} × ${c}, so x = (${b} × ${c}) ÷ ${d}.`; } else if (xKey === "b") { if (c === 0) return { error:"Term c cannot be 0 when solving for b." }; x = a * d / c; solveLine = `${a} × ${d} = x × ${c}, so x = (${a} × ${d}) ÷ ${c}.`; } else if (xKey === "c") { if (b === 0) return { error:"Term b cannot be 0." }; x = a * d / b; solveLine = `${a} × ${d} = ${b} × x, so x = (${a} × ${d}) ÷ ${b}.`; } else { if (a === 0) return { error:"Term a cannot be 0 when solving for d." }; x = b * c / a; solveLine = `${a} × x = ${b} × ${c}, so x = (${b} × ${c}) ÷ ${a}.`; } if (!Number.isFinite(x) || x < 0) return { error:"This proportion does not produce a valid nonnegative missing value." }; const finalTerms = { a: xKey === "a" ? x : a, b: xKey === "b" ? x : b, c: xKey === "c" ? x : c, d: xKey === "d" ? x : d }; return { mode:"proportion", missing:xKey, x, ratioA:finalTerms.a, ratioB:finalTerms.b, ratioC:finalTerms.c, ratioD:finalTerms.d, formula:"a / b = c / d, so ad = bc", substitution:`${finalTerms.a} / ${finalTerms.b} = ${finalTerms.c} / ${finalTerms.d}`, interpretation:`The missing value is ${x}. This makes both ratios equivalent.`, steps:[ `Write the proportion as a / b = c / d.`, `Use cross multiplication: a × d = b × c.`, solveLine, `The missing value is x = ${x}.` ] }; } function computeSplit(form) { const a = parseNumber(getInputValue(form, "splitA")); const b = parseNumber(getInputValue(form, "splitB")); const total = parseNumber(getInputValue(form, "splitTotal")); const labelA = String(getInputValue(form, "labelA") || "Part A").trim(); const labelB = String(getInputValue(form, "labelB") || "Part B").trim(); if (needPositive(a, "First ratio part")) return { error:needPositive(a, "First ratio part") }; if (needPositive(b, "Second ratio part")) return { error:needPositive(b, "Second ratio part") }; if (needNumber(total, "Total")) return { error:needNumber(total, "Total") }; if (needNonNegative(total, "Total")) return { error:"Total must be 0 or greater." }; const sum = a + b; const unit = total / sum; const partA = total * a / sum; const partB = total * b / sum; const pctA = a / sum * 100; const pctB = b / sum * 100; return { mode:"split", labelA, labelB, ratioA:a, ratioB:b, total, sum, unit, partA, partB, pctA, pctB, formula:"part = total × ratio part / sum of ratio parts", substitution:`${labelA} = ${total} × ${a} / (${a} + ${b}); ${labelB} = ${total} × ${b} / (${a} + ${b})`, interpretation:`A total of ${total} split in the ratio ${a}:${b} gives ${partA} to ${labelA} and ${partB} to ${labelB}.`, steps:[ `Start with the ratio ${a}:${b}.`, `Add the ratio parts: ${a} + ${b} = ${sum}.`, `Each ratio unit is ${total} ÷ ${sum} = ${unit}.`, `${labelA}: ${a} × ${unit} = ${partA}.`, `${labelB}: ${b} × ${unit} = ${partB}.` ] }; } function computeCompare(form) { const a = parseNumber(getInputValue(form, "compA")); const b = parseNumber(getInputValue(form, "compB")); const c = parseNumber(getInputValue(form, "compC")); const d = parseNumber(getInputValue(form, "compD")); if (needNumber(a, "Ratio 1 first term")) return { error:needNumber(a, "Ratio 1 first term") }; if (needNumber(b, "Ratio 1 second term")) return { error:needNumber(b, "Ratio 1 second term") }; if (needNumber(c, "Ratio 2 first term")) return { error:needNumber(c, "Ratio 2 first term") }; if (needNumber(d, "Ratio 2 second term")) return { error:needNumber(d, "Ratio 2 second term") }; if (a < 0 || b <= 0 || c < 0 || d <= 0) return { error:"Use nonnegative first terms and positive second terms when comparing ratios." }; const v1 = a / b; const v2 = c / d; const cross1 = a * d; const cross2 = b * c; const equivalent = Math.abs(cross1 - cross2) < 1e-10; const simp1 = simplifyTwo(a, b); const simp2 = simplifyTwo(c, d); let comparison = "Ratio 1 is larger"; if (equivalent) comparison = "The ratios are equivalent"; else if (v1 < v2) comparison = "Ratio 2 is larger"; return { mode:"compare", ratioA:a, ratioB:b, ratioC:c, ratioD:d, v1, v2, cross1, cross2, equivalent, comparison, simple1:`${simp1.left}:${simp1.right}`, simple2:`${simp2.left}:${simp2.right}`, formula:"Compare a / b and c / d, or check ad = bc", substitution:`${a} × ${d} = ${cross1}; ${b} × ${c} = ${cross2}`, interpretation: equivalent ? `The ratios ${a}:${b} and ${c}:${d} are equivalent because their cross products are equal.` : `${comparison}. The ratios are not equivalent because their cross products are different.`, steps:[ `Write the ratios as fractions: ${a}/${b} and ${c}/${d}.`, `Cross multiply: ${a} × ${d} = ${cross1}.`, `Cross multiply the other way: ${b} × ${c} = ${cross2}.`, equivalent ? `Because ${cross1} = ${cross2}, the ratios are equivalent.` : `Because ${cross1} ≠ ${cross2}, the ratios are not equivalent.`, `Simplified forms: ${a}:${b} → ${simp1.left}:${simp1.right}; ${c}:${d} → ${simp2.left}:${simp2.right}.` ] }; } function computeConvert(form) { const a = parseNumber(getInputValue(form, "convA")); const b = parseNumber(getInputValue(form, "convB")); if (needNumber(a, "First term")) return { error:needNumber(a, "First term") }; if (needNumber(b, "Second term")) return { error:needNumber(b, "Second term") }; if (needNonNegative(a, "First term")) return { error:needNonNegative(a, "First term") }; if (needPositive(b, "Second term")) return { error:"Second term must be greater than 0." }; const simp = simplifyTwo(a, b); const decimal = a / b; const percent = decimal * 100; const total = a + b; const partPctA = total === 0 ? NaN : a / total * 100; const partPctB = total === 0 ? NaN : b / total * 100; return { mode:"convert", ratioA:a, ratioB:b, simpleA:simp.left, simpleB:simp.right, decimal, percent, total, partPctA, partPctB, formula:"a:b → a / b, decimal, first-to-second percent, and part-of-total percent", substitution:`${a}:${b} → ${a}/${b} = ${decimal}`, interpretation:`The ratio ${a}:${b} can be read as ${a} to ${b}. As a first-to-second comparison, it equals ${decimal}. As parts of a total, the first part is ${partPctA}% of the total.`, steps:[ `Start with the ratio ${a}:${b}.`, `As a fraction comparing first term to second term: ${a}/${b}.`, `Decimal form: ${a} ÷ ${b} = ${decimal}.`, `First-to-second percent: ${decimal} × 100 = ${percent}%.`, `Part-of-total view: total parts = ${a} + ${b} = ${total}.`, `First part of total: ${a} ÷ ${total} × 100 = ${partPctA}%.`, `Second part of total: ${b} ÷ ${total} × 100 = ${partPctB}%.` ] }; } function compute(form) { const mode = getMode(form); if (mode === "simplify") return computeSimplify(form); if (mode === "scale") return computeScale(form); if (mode === "proportion") return computeProportion(form); if (mode === "split") return computeSplit(form); if (mode === "compare") return computeCompare(form); if (mode === "convert") return computeConvert(form); return { error:"Unsupported ratio mode." }; } function ratioVisualHtml(out, dp, nice, unit) { let a; let b; let labelA = "First term"; let labelB = "Second term"; let note = "The visual is scaled to show the relationship between the two quantities."; if (out.mode === "split") { a = out.partA; b = out.partB; labelA = out.labelA; labelB = out.labelB; note = "The visual shows how the total is divided between the two parts."; } else if (out.mode === "compare") { a = out.v1; b = out.v2; labelA = "Ratio 1 value"; labelB = "Ratio 2 value"; note = "For compare mode, the bars show each ratio as a decimal value: first term ÷ second term."; } else { a = out.ratioA ?? out.simpleA ?? 0; b = out.ratioB ?? out.simpleB ?? 0; } if (!Number.isFinite(a) || !Number.isFinite(b) || (a === 0 && b === 0)) return ""; const max = Math.max(a, b, 1e-12); const pctA = Math.max(4, a / max * 100); const pctB = Math.max(4, b / max * 100); return `

Ratio visual

${esc(labelA)}

${esc(qty(a, dp, nice, unit))}

${esc(labelB)}

${esc(qty(b, dp, nice, unit))}

${esc(note)}

`; } function conceptHtml(out) { const map = { simplify:"Simplifying a ratio does not change the relationship. It only rewrites the same comparison with smaller, cleaner numbers.", scale:"Equivalent ratios are made by multiplying or dividing both terms by the same positive number.", proportion:"A proportion says two ratios are equal. Cross multiplication is a fast way to solve the missing value.", split:"When splitting a total, the ratio parts tell you how many equal shares each group receives.", compare:"Two ratios are equivalent when they simplify to the same ratio or when their cross products match.", convert:"A ratio can be interpreted as a fraction, a decimal, a first-to-second percent, or as parts of a total." }; return `

Concept summary

💡 ${esc(map[out.mode] || "This result describes the selected ratio relationship.")}

`; } function examStyleHtml(out, dp, nice, unit) { if (out.mode === "simplify") { return `

Exam-style solution

The ratio ${esc(out.ratioA)}:${esc(out.ratioB)} simplifies to ${esc(out.simpleA)}:${esc(out.simpleB)}.

`; } if (out.mode === "proportion") { return `

Exam-style solution

Using cross multiplication, the missing value is x = ${esc(fmt(out.x, dp, nice))}. Therefore, the completed proportion is ${esc(fmt(out.ratioA, dp, nice))}:${esc(fmt(out.ratioB, dp, nice))} = ${esc(fmt(out.ratioC, dp, nice))}:${esc(fmt(out.ratioD, dp, nice))}.

`; } if (out.mode === "split") { return `

Exam-style solution

The total ${esc(qty(out.total, dp, nice, unit))} is split in the ratio ${esc(out.ratioA)}:${esc(out.ratioB)}. The two parts are ${esc(qty(out.partA, dp, nice, unit))} and ${esc(qty(out.partB, dp, nice, unit))}.

`; } if (out.mode === "compare") { return `

Exam-style solution

Compare the cross products: ${esc(fmt(out.cross1, dp, nice))} and ${esc(fmt(out.cross2, dp, nice))}. Therefore, ${esc(out.comparison)}.

`; } if (out.mode === "convert") { return `

Exam-style solution

The ratio ${esc(out.ratioA)}:${esc(out.ratioB)} simplifies to ${esc(out.simpleA)}:${esc(out.simpleB)}. As a first-to-second percent, it is ${esc(fmt(out.percent, dp, nice))}%.

`; } return ""; } function renderResult(form) { const out = compute(form); if (out.error) { showError(form, out.error); return; } const dp = getDp(form); const nice = isNice(form); const unit = getUnit(form); const showInterp = !!q(form, '[data-ratio="showInterp"]')?.checked; const showSteps = !!q(form, '[data-ratio="showSteps"]')?.checked; const showVisual = !!q(form, '[data-ratio="showVisual"]')?.checked; const showConcept = !!q(form, '[data-ratio="showConcept"]')?.checked; const showExam = !!q(form, '[data-ratio="showExam"]')?.checked; const noRes = q(form, '[data-ratio="noRes"]'); const result = q(form, '[data-ratio="result"]'); const interp = q(form, '[data-ratio="interp"]'); const steps = q(form, '[data-ratio="steps"]'); const copy = q(form, '[data-ratio="copyBtn"]'); if (noRes) noRes.style.display = "none"; if (copy) copy.style.display = "inline-flex"; let html = ""; let copyText = ""; if (out.mode === "simplify") { html = statGridHtml([ { label:"Simplified ratio", value:`${out.simpleA}:${out.simpleB}` }, { label:"Original ratio", value:`${fmt(out.ratioA, dp, nice)}:${fmt(out.ratioB, dp, nice)}` }, { label:"First ÷ second", value:fmt(out.decimal, dp, nice) }, { label:"First-to-second percent", value:`${fmt(out.percent, dp, nice)}%` } ]); copyText = `Ratio result: ${out.ratioA}:${out.ratioB} simplifies to ${out.simpleA}:${out.simpleB}.`; } if (out.mode === "scale") { html = statGridHtml([ { label:"Equivalent ratio", value:`${fmt(out.ratioA, dp, nice)}:${fmt(out.ratioB, dp, nice)}` }, { label:"Original ratio", value:`${fmt(out.originalA, dp, nice)}:${fmt(out.originalB, dp, nice)}` }, { label:"Scale factor", value:fmt(out.factor, dp, nice) }, { label:"Simplified form", value:`${out.simpleA}:${out.simpleB}` } ]); copyText = `Ratio result: ${out.originalA}:${out.originalB} scaled by ${out.factor} = ${out.ratioA}:${out.ratioB}.`; } if (out.mode === "proportion") { html = statGridHtml([ { label:"Missing value", value:`x = ${fmt(out.x, dp, nice)}` }, { label:"Completed proportion", value:`${fmt(out.ratioA, dp, nice)}:${fmt(out.ratioB, dp, nice)} = ${fmt(out.ratioC, dp, nice)}:${fmt(out.ratioD, dp, nice)}` }, { label:"Missing term", value:out.missing }, { label:"Check", value:`${fmt(out.ratioA / out.ratioB, dp, nice)} = ${fmt(out.ratioC / out.ratioD, dp, nice)}` } ]); copyText = `Proportion result: x = ${out.x}. Completed proportion: ${out.ratioA}:${out.ratioB} = ${out.ratioC}:${out.ratioD}.`; } if (out.mode === "split") { html = statGridHtml([ { label:out.labelA, value:qty(out.partA, dp, nice, unit) }, { label:out.labelB, value:qty(out.partB, dp, nice, unit) }, { label:"Ratio unit value", value:qty(out.unit, dp, nice, unit) }, { label:"Total", value:qty(out.total, dp, nice, unit) }, { label:`${out.labelA} part of total`, value:`${fmt(out.pctA, dp, nice)}%` }, { label:`${out.labelB} part of total`, value:`${fmt(out.pctB, dp, nice)}%` } ]); copyText = `Split ratio result: ${out.total} split by ${out.ratioA}:${out.ratioB} gives ${out.partA} and ${out.partB}.`; } if (out.mode === "compare") { html = statGridHtml([ { label:"Comparison", value:out.comparison }, { label:"Ratio 1 simplified", value:out.simple1 }, { label:"Ratio 2 simplified", value:out.simple2 }, { label:"Cross products", value:`${fmt(out.cross1, dp, nice)} and ${fmt(out.cross2, dp, nice)}` }, { label:"Ratio 1 value", value:fmt(out.v1, dp, nice) }, { label:"Ratio 2 value", value:fmt(out.v2, dp, nice) } ]); copyText = `Compare ratios result: ${out.comparison}. ${out.ratioA}:${out.ratioB} vs ${out.ratioC}:${out.ratioD}.`; } if (out.mode === "convert") { html = statGridHtml([ { label:"Simplified ratio", value:`${out.simpleA}:${out.simpleB}` }, { label:"First-to-second fraction", value:`${fmt(out.ratioA, dp, nice)} / ${fmt(out.ratioB, dp, nice)}` }, { label:"First ÷ second decimal", value:fmt(out.decimal, dp, nice) }, { label:"First-to-second percent", value:`${fmt(out.percent, dp, nice)}%` }, { label:"First part of total", value:Number.isFinite(out.partPctA) ? `${fmt(out.partPctA, dp, nice)}%` : "Not available" }, { label:"Second part of total", value:Number.isFinite(out.partPctB) ? `${fmt(out.partPctB, dp, nice)}%` : "Not available" } ]); copyText = `Ratio conversion: ${out.ratioA}:${out.ratioB} = ${out.simpleA}:${out.simpleB}; first-to-second percent = ${out.percent}%; first part of total = ${out.partPctA}%.`; } form.dataset.copyText = copyText; if (result) { result.innerHTML = ` ${html}

Formula: ${esc(out.formula)}

Substitution: ${esc(out.substitution)}

${showExam ? examStyleHtml(out, dp, nice, unit) : ""} ${showVisual ? ratioVisualHtml(out, dp, nice, unit) : ""} ${showConcept ? conceptHtml(out) : ""} `; } if (interp) { interp.innerHTML = showInterp ? `

Interpretation: ${esc(out.interpretation)}

` : ""; } if (steps) { steps.innerHTML = showSteps ? `

Step-by-step

${esc(step)}

` : ""; } } function applyPreset(form, key) { const preset = PRESETS[key]; if (!preset) return; clearActiveChips(form); const btn = q(form, `[data-ratio-qp="${key}"]`); if (btn) btn.classList.add("is-active"); setMode(form, preset.mode); syncUI(form); Object.entries(preset.values || {}).forEach(([k, v]) => setInputValue(form, k, v)); syncPanels(form); renderResult(form); } function bindControls(form) { qa(form, "[data-ratio-mode]").forEach(btn => { if (btn.dataset.ratioBound === "1") return; btn.dataset.ratioBound = "1"; btn.addEventListener("click", () => { clearActiveChips(form); setMode(form, btn.getAttribute("data-ratio-mode") || "simplify"); syncUI(form); }); }); qa(form, "[data-ratio-qp]").forEach(btn => { if (btn.dataset.ratioBound === "1") return; btn.dataset.ratioBound = "1"; btn.addEventListener("click", () => applyPreset(form, btn.getAttribute("data-ratio-qp"))); }); const calcBtn = q(form, '[data-ratio="calcBtn"]'); if (calcBtn && calcBtn.dataset.ratioBound !== "1") { calcBtn.dataset.ratioBound = "1"; calcBtn.addEventListener("click", () => renderResult(form)); } const resetBtn = q(form, '[data-ratio="resetBtn"]'); if (resetBtn && resetBtn.dataset.ratioBound !== "1") { resetBtn.dataset.ratioBound = "1"; resetBtn.addEventListener("click", () => { form.reset(); clearActiveChips(form); setMode(form, "simplify"); syncUI(form); }); } const copyBtn = q(form, '[data-ratio="copyBtn"]'); if (copyBtn && copyBtn.dataset.ratioBound !== "1") { copyBtn.dataset.ratioBound = "1"; copyBtn.addEventListener("click", async () => { const txt = form.dataset.copyText || ""; if (!txt) return; try { await navigator.clipboard.writeText(txt); copyBtn.textContent = "Copied!"; setTimeout(() => { copyBtn.textContent = "Copy result"; }, 1200); } catch { copyBtn.textContent = "Copy failed"; setTimeout(() => { copyBtn.textContent = "Copy result"; }, 1200); } }); } if (form.dataset.ratioInputBound !== "1") { form.dataset.ratioInputBound = "1"; form.addEventListener("change", (e) => { if (e.target && e.target.matches('[data-ratio-input="scaleMethod"]')) { syncPanels(form); clearOutput(form); } }); form.addEventListener("keydown", (e) => { if (e.key === "Enter") { e.preventDefault(); renderResult(form); } }); } } function initOne(form) { if (!form || form.dataset.ratioInit === "1") return; form.dataset.ratioInit = "1"; form.dataset.ratioMode = "simplify"; bindControls(form); syncUI(form); } window[NS] = { isInitialized: true, init() { qa(document, 'form[data-ratio="form"]').forEach(initOne); } }; const boot = () => window[NS].init(); if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", boot, { once:true }); } else { boot(); } })();

Ratio Calculator

Background

Choose ratio mode

How to use this calculator

How this calculator works

Formula & Equations Used

Example Problems & Step-by-Step Solutions

Frequently Asked Questions