⚠️ ${esc(msg)}

`; if (interp) interp.innerHTML = ""; if (steps) steps.innerHTML = ""; if (copy) copy.style.display = "none"; form.dataset.copyText = ""; } function sidesValid(a, b, c) { return a + b > c && a + c > b && b + c > a; } function areaHeron(a, b, c) { const s = (a + b + c) / 2; return Math.sqrt(Math.max(0, s * (s - a) * (s - b) * (s - c))); } function classifyBySides(a, b, c) { const eps = 1e-9; if (Math.abs(a - b) < eps && Math.abs(b - c) < eps) return "Equilateral"; if (Math.abs(a - b) < eps || Math.abs(a - c) < eps || Math.abs(b - c) < eps) return "Isosceles"; return "Scalene"; } function classifyByAngles(A, B, C) { const maxA = Math.max(A, B, C); if (Math.abs(maxA - 90) < 1e-7) return "Right"; if (maxA > 90) return "Obtuse"; return "Acute"; } function solveAnglesFromSides(a, b, c) { const A = acosD((b*b + c*c - a*a) / (2*b*c)); const B = acosD((a*a + c*c - b*b) / (2*a*c)); const C = 180 - A - B; return { A, B, C }; } function triangleObject(a, b, c, A, B, C, extra = {}) { return { a, b, c, A, B, C, perimeter:a + b + c, area:areaHeron(a, b, c), sideType:classifyBySides(a, b, c), angleType:classifyByAngles(A, B, C), ...extra }; } 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-tri="dynamicInputs"]'); if (!box) return; if (mode === "right") { box.innerHTML = `

What do you know?

Leg a

Leg b

Known leg

Hypotenuse

Adjacent leg

Acute angle, degrees

Right triangle output labels use legs a and b, hypotenuse c, and acute angles A and B.

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

Enter all three side lengths

Side a

Side b

Side c

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

Enter two sides and their included angle

Side a

Side b

Included angle C, degrees

This solves the missing side c opposite the included angle C.

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

Enter two angles and one known side

Angle A, degrees

Angle B, degrees

Known side

Known side length

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

Enter side a, side b, and angle A

Angle A, degrees

Side a, opposite A

Side b

This is the classic ambiguous case: side-side-angle may create 0, 1, or 2 triangles.

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

Area method

Base

Height

Side a

Side b

Included angle C, degrees

Side a

Side b

Side c

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

Enter three side lengths

Side a

Side b

Side c

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

Tell us what information you have

Number of known sides

Number of known angles

Special information

`; } } function syncPanels(form) { const rightKnown = getInputValue(form, "rightKnown") || "legs"; qa(form, "[data-tri-right-panel]").forEach(el => { el.classList.toggle("triHidden", el.getAttribute("data-tri-right-panel") !== rightKnown); }); const areaMethod = getInputValue(form, "areaMethod") || "baseHeight"; qa(form, "[data-tri-area-panel]").forEach(el => { el.classList.toggle("triHidden", el.getAttribute("data-tri-area-panel") !== areaMethod); }); } function syncMeta(form) { const mode = getMode(form); const meta = MODE_META[mode]; const label = q(form, '[data-tri="modeLabel"]'); const badge = q(form, '[data-tri="formulaBadge"]'); const hint = q(form, '[data-tri="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-tri-input]").forEach(el => previous[el.getAttribute("data-tri-input")] = el.value); syncMeta(form); renderInputs(form); Object.entries(previous).forEach(([k, v]) => setInputValue(form, k, v)); syncPanels(form); clearOutput(form); } function computeRight(form) { const known = getInputValue(form, "rightKnown") || "legs"; let a, b, c, A, B; const steps = []; if (known === "legs") { a = parseNumber(getInputValue(form, "legA")); b = parseNumber(getInputValue(form, "legB")); if (needPositive(a, "Leg a")) return { error:needPositive(a, "Leg a") }; if (needPositive(b, "Leg b")) return { error:needPositive(b, "Leg b") }; c = Math.sqrt(a*a + b*b); A = radToDeg(Math.atan2(a, b)); B = 90 - A; steps.push(`Use a² + b² = c².`, `c = √(${a}² + ${b}²) = ${c}.`, `Angle A = atan(a/b) = atan(${a}/${b}) = ${A}°.`, `Angle B = 90° − ${A}° = ${B}°.`); } if (known === "legHyp") { a = parseNumber(getInputValue(form, "legA")); c = parseNumber(getInputValue(form, "hypotenuse")); if (needPositive(a, "Known leg")) return { error:needPositive(a, "Known leg") }; if (needPositive(c, "Hypotenuse")) return { error:needPositive(c, "Hypotenuse") }; if (a >= c) return { error:"The hypotenuse must be longer than the known leg." }; b = Math.sqrt(c*c - a*a); A = radToDeg(Math.asin(a / c)); B = 90 - A; steps.push(`Use a² + b² = c² and solve for b.`, `b = √(${c}² − ${a}²) = ${b}.`, `Angle A = asin(a/c) = asin(${a}/${c}) = ${A}°.`, `Angle B = 90° − ${A}° = ${B}°.`); } if (known === "legAngle") { b = parseNumber(getInputValue(form, "legA")); A = parseNumber(getInputValue(form, "angleA")); if (needPositive(b, "Adjacent leg")) return { error:needPositive(b, "Adjacent leg") }; if (!Number.isFinite(A) || A <= 0 || A >= 90) return { error:"Acute angle must be greater than 0° and less than 90°." }; a = b * Math.tan(degToRad(A)); c = b / Math.cos(degToRad(A)); B = 90 - A; steps.push(`Use tan(A) = opposite/adjacent.`, `Opposite leg a = ${b} × tan(${A}°) = ${a}.`, `Hypotenuse c = ${b} ÷ cos(${A}°) = ${c}.`, `Angle B = 90° − ${A}° = ${B}°.`); } return { mode:"right", solution:triangleObject(a, b, c, A, B, 90, { right:true }), formula:"a² + b² = c², plus right-triangle trig ratios", substitution:`a = ${a}, b = ${b}, c = ${c}`, interpretation:"This is a right triangle, so one angle is 90°. The other two acute angles add to 90°.", steps }; } function computeSSS(form) { const a = parseNumber(getInputValue(form, "sideA")); const b = parseNumber(getInputValue(form, "sideB")); const c = parseNumber(getInputValue(form, "sideC")); if (needPositive(a, "Side a")) return { error:needPositive(a, "Side a") }; if (needPositive(b, "Side b")) return { error:needPositive(b, "Side b") }; if (needPositive(c, "Side c")) return { error:needPositive(c, "Side c") }; if (!sidesValid(a, b, c)) return { error:"These side lengths do not form a valid triangle because they fail the triangle inequality." }; const { A, B, C } = solveAnglesFromSides(a, b, c); const s = (a + b + c) / 2; return { mode:"sss", solution:triangleObject(a, b, c, A, B, C), formula:"Law of Cosines for angles; Heron’s formula for area", substitution:`s = (${a} + ${b} + ${c}) / 2 = ${s}`, interpretation:"With all three sides known, Law of Cosines can determine all angles and Heron’s formula can determine area.", steps:[ `Check triangle inequality: each pair of sides must add to more than the third side.`, `Use Law of Cosines to find angle A: cos A = (b² + c² − a²)/(2bc) = ${A}°.`, `Use Law of Cosines to find angle B: cos B = (a² + c² − b²)/(2ac) = ${B}°.`, `Find angle C: 180° − A − B = ${C}°.`, `Semi-perimeter s = (${a} + ${b} + ${c})/2 = ${s}.`, `Area = √[s(s−a)(s−b)(s−c)] = ${areaHeron(a,b,c)}.` ] }; } function computeSAS(form) { const a = parseNumber(getInputValue(form, "sasA")); const b = parseNumber(getInputValue(form, "sasB")); const C = parseNumber(getInputValue(form, "sasCdeg")); if (needPositive(a, "Side a")) return { error:needPositive(a, "Side a") }; if (needPositive(b, "Side b")) return { error:needPositive(b, "Side b") }; if (needAngle(C, "Included angle C")) return { error:needAngle(C, "Included angle C") }; const c = Math.sqrt(a*a + b*b - 2*a*b*cosD(C)); const A = acosD((b*b + c*c - a*a) / (2*b*c)); const B = 180 - A - C; return { mode:"sas", solution:triangleObject(a, b, c, A, B, C), formula:"c² = a² + b² − 2ab cos C", substitution:`c² = ${a}² + ${b}² − 2(${a})(${b})cos(${C}°)`, interpretation:"SAS is a perfect Law of Cosines setup because the known angle is between the two known sides.", steps:[ `Use Law of Cosines to find side c.`, `c = √(${a}² + ${b}² − 2(${a})(${b})cos(${C}°)) = ${c}.`, `Use Law of Cosines to find angle A = ${A}°.`, `Use angle sum to find B = 180° − ${A}° − ${C}° = ${B}°.` ] }; } function computeASA(form) { const A = parseNumber(getInputValue(form, "asaAdeg")); const B = parseNumber(getInputValue(form, "asaBdeg")); const sideName = getInputValue(form, "asaSideName") || "c"; const knownSide = parseNumber(getInputValue(form, "asaSide")); if (needAngle(A, "Angle A")) return { error:needAngle(A, "Angle A") }; if (needAngle(B, "Angle B")) return { error:needAngle(B, "Angle B") }; if (A + B >= 180) return { error:"Angles A and B must add to less than 180°." }; if (needPositive(knownSide, "Known side")) return { error:needPositive(knownSide, "Known side") }; const C = 180 - A - B; const knownAngle = sideName === "a" ? A : sideName === "b" ? B : C; const ratio = knownSide / sinD(knownAngle); const a = sideName === "a" ? knownSide : ratio * sinD(A); const b = sideName === "b" ? knownSide : ratio * sinD(B); const c = sideName === "c" ? knownSide : ratio * sinD(C); return { mode:"asa", solution:triangleObject(a, b, c, A, B, C), formula:"a / sin A = b / sin B = c / sin C", substitution:`${sideName} / sin(${knownAngle}°) = ${knownSide} / sin(${knownAngle}°)`, interpretation:"With two angles known, the third angle comes from 180°. Then Law of Sines finds the missing sides.", steps:[ `Find angle C: 180° − ${A}° − ${B}° = ${C}°.`, `Use Law of Sines with the known side ${sideName} = ${knownSide}.`, `Common ratio = known side / sin(known angle) = ${ratio}.`, `a = ${a}, b = ${b}, c = ${c}.` ] }; } function computeSSA(form) { const A = parseNumber(getInputValue(form, "ssaAdeg")); const a = parseNumber(getInputValue(form, "ssaA")); const b = parseNumber(getInputValue(form, "ssaB")); if (needAngle(A, "Angle A")) return { error:needAngle(A, "Angle A") }; if (needPositive(a, "Side a")) return { error:needPositive(a, "Side a") }; if (needPositive(b, "Side b")) return { error:needPositive(b, "Side b") }; const sinB = b * sinD(A) / a; const steps = [`Use Law of Sines: sin B / b = sin A / a.`, `sin B = ${b}sin(${A}°)/${a} = ${sinB}.`]; const sols = []; if (sinB > 1 + 1e-10) { return { mode:"ssa", ambiguous:true, noTriangle:true, solutions:[], formula:"sin B = b sin A / a", substitution:`sin B = ${b}sin(${A}°)/${a}`, interpretation:"No triangle is possible because sin B would need to be greater than 1.", steps:[...steps, `Because ${sinB} > 1, there is no possible angle B.`] }; } const B1 = asinD(sinB); const B2 = 180 - B1; [B1, B2].forEach((B, idx) => { const C = 180 - A - B; if (C > 1e-10) { const c = a * sinD(C) / sinD(A); sols.push(triangleObject(a, b, c, A, B, C, { label:`Triangle ${idx + 1}` })); } }); if (!sols.length) { return { mode:"ssa", ambiguous:true, noTriangle:true, solutions:[], formula:"Law of Sines", substitution:`sin B = ${sinB}`, interpretation:"No triangle is possible because the angles cannot add to 180°.", steps:[...steps, `Candidate angles do not produce a positive third angle.`] }; } return { mode:"ssa", ambiguous:true, solutions:sols, formula:"sin B = b sin A / a", substitution:`sin B = ${b}sin(${A}°)/${a} = ${sinB}`, interpretation:`SSA produces ${sols.length} possible triangle${sols.length === 1 ? "" : "s"}. This is why SSA is called the ambiguous case.`, steps:[...steps, `Possible B values are ${B1}°${B2 !== B1 ? ` and ${B2}°` : ""}.`, `Keep only candidates where A + B < 180°.`] }; } function computeArea(form) { const method = getInputValue(form, "areaMethod") || "baseHeight"; if (method === "baseHeight") { const base = parseNumber(getInputValue(form, "base")); const height = parseNumber(getInputValue(form, "height")); if (needPositive(base, "Base")) return { error:needPositive(base, "Base") }; if (needPositive(height, "Height")) return { error:needPositive(height, "Height") }; const area = 0.5 * base * height; return { mode:"area", areaOnly:true, area, base, height, formula:"Area = ½bh", substitution:`Area = ½(${base})(${height})`, interpretation:"Base-height area works for any triangle as long as the height is perpendicular to the base.", steps:[`Use Area = ½bh.`, `Area = ½(${base})(${height}) = ${area}.`] }; } if (method === "sine") { const a = parseNumber(getInputValue(form, "areaSide1")); const b = parseNumber(getInputValue(form, "areaSide2")); const C = parseNumber(getInputValue(form, "areaIncluded")); if (needPositive(a, "Side a")) return { error:needPositive(a, "Side a") }; if (needPositive(b, "Side b")) return { error:needPositive(b, "Side b") }; if (needAngle(C, "Included angle")) return { error:needAngle(C, "Included angle") }; const area = 0.5 * a * b * sinD(C); const c = Math.sqrt(a*a + b*b - 2*a*b*cosD(C)); const A = acosD((b*b + c*c - a*a) / (2*b*c)); const B = 180 - A - C; return { mode:"area", solution:triangleObject(a, b, c, A, B, C), area, formula:"Area = ½ab sin C", substitution:`Area = ½(${a})(${b})sin(${C}°)`, interpretation:"The sine area formula is ideal when two sides and the included angle are known.", steps:[`Use Area = ½ab sin C.`, `Area = ½(${a})(${b})sin(${C}°) = ${area}.`] }; } const a = parseNumber(getInputValue(form, "areaA")); const b = parseNumber(getInputValue(form, "areaB")); const c = parseNumber(getInputValue(form, "areaC")); if (needPositive(a, "Side a")) return { error:needPositive(a, "Side a") }; if (needPositive(b, "Side b")) return { error:needPositive(b, "Side b") }; if (needPositive(c, "Side c")) return { error:needPositive(c, "Side c") }; if (!sidesValid(a, b, c)) return { error:"These side lengths do not form a valid triangle." }; const s = (a + b + c) / 2; const area = areaHeron(a, b, c); const ang = solveAnglesFromSides(a, b, c); return { mode:"area", solution:triangleObject(a, b, c, ang.A, ang.B, ang.C), area, formula:"Area = √[s(s−a)(s−b)(s−c)]", substitution:`s = (${a}+${b}+${c})/2 = ${s}`, interpretation:"Heron’s formula finds area from only the three side lengths.", steps:[`Find semi-perimeter: s = ${s}.`, `Area = √[${s}(${s}-${a})(${s}-${b})(${s}-${c})] = ${area}.`] }; } function computeClassify(form) { const a = parseNumber(getInputValue(form, "classA")); const b = parseNumber(getInputValue(form, "classB")); const c = parseNumber(getInputValue(form, "classC")); if (needPositive(a, "Side a")) return { error:needPositive(a, "Side a") }; if (needPositive(b, "Side b")) return { error:needPositive(b, "Side b") }; if (needPositive(c, "Side c")) return { error:needPositive(c, "Side c") }; if (!sidesValid(a, b, c)) return { error:"These side lengths do not form a valid triangle." }; const { A, B, C } = solveAnglesFromSides(a, b, c); return { mode:"classify", solution:triangleObject(a,b,c,A,B,C), formula:"Compare sides and angles", substitution:`Sides: ${a}, ${b}, ${c}`, interpretation:"The triangle type is based on equal sides and the largest angle.", steps:[`Compare side lengths to classify by sides.`, `Find angles using Law of Cosines.`, `Largest angle determines acute, right, or obtuse type.`] }; } function computeChoose(form) { const sides = Number(getInputValue(form, "knownSides") || 0); const angles = Number(getInputValue(form, "knownAngles") || 0); const special = getInputValue(form, "special") || "none"; let recommendation = "Not enough information"; let why = "Most triangle solvers need at least 3 total facts, including at least one side."; if (special === "right") { recommendation = "Use Right Triangle mode"; why = "A 90° angle unlocks Pythagorean theorem and right-triangle trig ratios."; } else if (special === "height") { recommendation = "Use Area mode: base and height"; why = "Base and perpendicular height directly use Area = ½bh."; } else if (sides === 3) { recommendation = "Use SSS mode"; why = "Three sides are enough to find angles with Law of Cosines and area with Heron’s formula."; } else if (sides === 2 && angles === 1 && special === "included") { recommendation = "Use SAS mode"; why = "Two sides with the included angle are a Law of Cosines setup."; } else if (sides === 2 && angles === 1 && special === "nonIncluded") { recommendation = "Use SSA Ambiguous Case mode"; why = "Two sides and a non-included angle may create 0, 1, or 2 triangles."; } else if (sides === 1 && angles >= 2) { recommendation = "Use ASA / AAS mode"; why = "Two angles determine the third angle, then Law of Sines finds the remaining sides."; } else if (sides === 2 && angles === 0) { recommendation = "Need one more fact"; why = "Two sides alone do not determine a unique triangle."; } else if (sides === 0 && angles >= 2) { recommendation = "Need a side length"; why = "Angles determine shape but not size; infinitely many similar triangles are possible."; } return { mode:"choose", chooser:true, recommendation, why, formula:"Choose method from known sides, angles, and special information", substitution:`Known sides = ${sides}, known angles = ${angles}, special = ${special}`, interpretation:why, steps:[`Count the known sides and known angles.`, `Check whether the triangle is right, has a height, has an included angle, or has a non-included angle.`, `Recommended method: ${recommendation}.`] }; } function compute(form) { const mode = getMode(form); if (mode === "right") return computeRight(form); if (mode === "sss") return computeSSS(form); if (mode === "sas") return computeSAS(form); if (mode === "asa") return computeASA(form); if (mode === "ssa") return computeSSA(form); if (mode === "area") return computeArea(form); if (mode === "classify") return computeClassify(form); if (mode === "choose") return computeChoose(form); return { error:"Unsupported triangle mode." }; } function solutionToStats(sol, dp, nice, unit) { return [ { label:"Side a", value:lengthText(sol.a, dp, nice, unit) }, { label:"Side b", value:lengthText(sol.b, dp, nice, unit) }, { label:"Side c", value:lengthText(sol.c, dp, nice, unit) }, { label:"Angle A", value:`${fmt(sol.A, dp, nice)}°` }, { label:"Angle B", value:`${fmt(sol.B, dp, nice)}°` }, { label:"Angle C", value:`${fmt(sol.C, dp, nice)}°` }, { label:"Area", value:areaText(sol.area, dp, nice, unit) }, { label:"Perimeter / total boundary length", value:lengthText(sol.perimeter, dp, nice, unit) }, { label:"Side type", value:sol.sideType }, { label:"Angle type", value:sol.angleType } ]; } function conceptHtml(out) { const map = { right:"Right triangles are special because one angle is exactly 90°, so Pythagorean theorem and sine/cosine/tangent become powerful shortcuts.", sss:"SSS gives the triangle size completely. Law of Cosines turns the side lengths into angles.", sas:"SAS gives two sides and the angle between them. That included angle makes Law of Cosines the natural first move.", asa:"ASA/AAS gives enough angle information to find the third angle, then Law of Sines scales the triangle using the known side.", ssa:"SSA is tricky because the same information may create two different valid triangles. Always check the ambiguous case.", area:"Triangle area depends on what information you know: base-height, two sides and included angle, or three sides.", classify:"Triangle classification is about patterns: equal sides determine side type, and the largest angle determines angle type.", choose:"Choosing the method is often the hardest part. Count sides, count angles, and check if the known angle is included." }; return `

Concept summary

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

`; } function sideBarsHtml(sol, dp, nice) { if (!sol || !Number.isFinite(sol.a) || !Number.isFinite(sol.b) || !Number.isFinite(sol.c)) return ""; const vals = [ { label:"side a", value:sol.a }, { label:"side b", value:sol.b }, { label:"side c", value:sol.c } ]; const max = Math.max(sol.a, sol.b, sol.c); return `

Side comparison

${vals.map(item => { const pct = Math.max(2, Math.min(100, item.value / max * 100)); return `

${esc(item.label)}

${esc(fmt(item.value, dp, nice))}

`; }).join("")}

Longer bars represent longer side lengths.

`; } function triangleVisualHtml(sol, out, dp, nice) { if (!sol || !Number.isFinite(sol.a) || !Number.isFinite(sol.b) || !Number.isFinite(sol.c)) { if (out.areaOnly) { return `

Triangle visual

`; } return ""; } const a = sol.a, b = sol.b, c = sol.c; const scale = Math.min(220 / c, 170 / Math.max(a, b, c)); const xA = 55, yA = 255; const xB = xA + c * scale, yB = yA; const xC = xA + ((b*b + c*c - a*a) / (2*c)) * scale; const h2 = Math.max(0, b*b - Math.pow((xC - xA) / scale, 2)); const yC = yA - Math.sqrt(h2) * scale; const longest = Math.max(a, b, c); const longestName = longest === a ? "a" : longest === b ? "b" : "c"; function rightAngleMarker() { const size = 22; const rightAtA = Math.abs(sol.A - 90) < 1e-6; const rightAtB = Math.abs(sol.B - 90) < 1e-6; const rightAtC = Math.abs(sol.C - 90) < 1e-6; if (rightAtA) { return ``; } if (rightAtB) { return ``; } if (rightAtC) { return ``; } return ""; } return `

Triangle visual

Diagram is scaled for learning, not precise drafting. The highlighted side is the longest side, opposite the largest angle.

`; } function triangleInequalityHtml(sol, dp, nice, unit) { if (!sol || !Number.isFinite(sol.a) || !Number.isFinite(sol.b) || !Number.isFinite(sol.c)) return ""; return `

Triangle inequality check

A real triangle must satisfy: a + b > c, a + c > b, and b + c > a.

Here: ${esc(lengthText(sol.a + sol.b, dp, nice, unit))} > ${esc(lengthText(sol.c, dp, nice, unit))}, ${esc(lengthText(sol.a + sol.c, dp, nice, unit))} > ${esc(lengthText(sol.b, dp, nice, unit))}, and ${esc(lengthText(sol.b + sol.c, dp, nice, unit))} > ${esc(lengthText(sol.a, dp, nice, unit))}.

`; } function examStyleHtml(out, sol, dp, nice, unit) { if (!sol) return ""; return `

Exam-style solution

Given the triangle, the solved side lengths are a = ${esc(lengthText(sol.a, dp, nice, unit))}, b = ${esc(lengthText(sol.b, dp, nice, unit))}, and c = ${esc(lengthText(sol.c, dp, nice, unit))}.

The angles are A = ${esc(fmt(sol.A, dp, nice))}°, B = ${esc(fmt(sol.B, dp, nice))}°, and C = ${esc(fmt(sol.C, dp, nice))}°.

Therefore, the area is ${esc(areaText(sol.area, dp, nice, unit))} and the perimeter / total boundary length is ${esc(lengthText(sol.perimeter, dp, nice, unit))}.

`; } function renderResult(form) { const out = compute(form); if (out.error) { showError(form, out.error); return; } const dp = getDp(form); const nice = isNice(form); const showInterp = !!q(form, '[data-tri="showInterp"]')?.checked; const showSteps = !!q(form, '[data-tri="showSteps"]')?.checked; const showVisual = !!q(form, '[data-tri="showVisual"]')?.checked; const showBars = !!q(form, '[data-tri="showBars"]')?.checked; const showConcept = !!q(form, '[data-tri="showConcept"]')?.checked; const showExam = !!q(form, '[data-tri="showExam"]')?.checked; const unit = getUnit(form); const noRes = q(form, '[data-tri="noRes"]'); const result = q(form, '[data-tri="result"]'); const interp = q(form, '[data-tri="interp"]'); const steps = q(form, '[data-tri="steps"]'); const copy = q(form, '[data-tri="copyBtn"]'); if (noRes) noRes.style.display = "none"; if (copy) copy.style.display = "inline-flex"; let html = ""; let copyText = ""; let primarySol = out.solution || null; if (out.chooser) { html = statGridHtml([ { label:"Recommended method", value:out.recommendation }, { label:"Why", value:out.why } ]); copyText = `Triangle method recommendation: ${out.recommendation}. ${out.why}`; } else if (out.ambiguous) { if (out.noTriangle) { html = statGridHtml([{ label:"Possible triangles", value:"0" }]); copyText = `SSA ambiguous case: 0 possible triangles.`; } else { primarySol = out.solutions[0]; html = statGridHtml([{ label:"Possible triangles", value:String(out.solutions.length) }]); html += out.solutions.map((sol, idx) => `

${esc(sol.label || `Triangle ${idx + 1}`)}

${statGridHtml(solutionToStats(sol, dp, nice, unit))}

`).join(""); copyText = `SSA ambiguous case: ${out.solutions.length} possible triangle(s).`; } } else if (out.areaOnly) { html = statGridHtml([{ label:"Area", value:areaText(out.area, dp, nice, unit) }]); copyText = `Triangle area: ${fmt(out.area, dp, nice)}. Formula: ${out.formula}.`; } else if (out.solution) { html = statGridHtml(solutionToStats(out.solution, dp, nice, unit)); copyText = `Triangle result: a=${fmt(out.solution.a, dp, nice)}, b=${fmt(out.solution.b, dp, nice)}, c=${fmt(out.solution.c, dp, nice)}, A=${fmt(out.solution.A, dp, nice)}°, B=${fmt(out.solution.B, dp, nice)}°, C=${fmt(out.solution.C, dp, nice)}°, area=${fmt(out.solution.area, dp, nice)}, perimeter=${fmt(out.solution.perimeter, dp, nice)}.`; } form.dataset.copyText = copyText; if (result) { result.innerHTML = ` ${html}

Formula: ${esc(out.formula)}

Substitution: ${esc(out.substitution)}

${triangleInequalityHtml(primarySol, dp, nice, unit)} ${showExam ? examStyleHtml(out, primarySol, dp, nice, unit) : ""} ${showVisual ? triangleVisualHtml(primarySol, out, dp, nice) : ""} ${showBars ? sideBarsHtml(primarySol, dp, nice) : ""} ${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-tri-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-tri-mode]").forEach(btn => { if (btn.dataset.triBound === "1") return; btn.dataset.triBound = "1"; btn.addEventListener("click", () => { clearActiveChips(form); setMode(form, btn.getAttribute("data-tri-mode") || "right"); syncUI(form); }); }); qa(form, "[data-tri-qp]").forEach(btn => { if (btn.dataset.triBound === "1") return; btn.dataset.triBound = "1"; btn.addEventListener("click", () => applyPreset(form, btn.getAttribute("data-tri-qp"))); }); const calcBtn = q(form, '[data-tri="calcBtn"]'); if (calcBtn && calcBtn.dataset.triBound !== "1") { calcBtn.dataset.triBound = "1"; calcBtn.addEventListener("click", () => renderResult(form)); } const resetBtn = q(form, '[data-tri="resetBtn"]'); if (resetBtn && resetBtn.dataset.triBound !== "1") { resetBtn.dataset.triBound = "1"; resetBtn.addEventListener("click", () => { form.reset(); clearActiveChips(form); setMode(form, "right"); syncUI(form); }); } const copyBtn = q(form, '[data-tri="copyBtn"]'); if (copyBtn && copyBtn.dataset.triBound !== "1") { copyBtn.dataset.triBound = "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.triInputBound !== "1") { form.dataset.triInputBound = "1"; form.addEventListener("change", (e) => { if (e.target && (e.target.matches('[data-tri-input="rightKnown"]') || e.target.matches('[data-tri-input="areaMethod"]'))) { syncPanels(form); clearOutput(form); } }); form.addEventListener("keydown", (e) => { if (e.key === "Enter") { e.preventDefault(); renderResult(form); } }); } } function initOne(form) { if (!form || form.dataset.triInit === "1") return; form.dataset.triInit = "1"; form.dataset.triMode = "right"; bindControls(form); syncUI(form); } window[NS] = { isInitialized: true, init() { qa(document, 'form[data-tri="form"]').forEach(initOne); } }; const boot = () => window[NS].init(); if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", boot, { once:true }); } else { boot(); } })();

Triangle Calculator

Background

Choose triangle mode

How to use this calculator

How this calculator works

Formula & Equations Used

Example Problems & Step-by-Step Solutions

Frequently Asked Questions