Same triangle. New side roles.

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html>
<html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Same triangle. New side roles.</title><style>:root{--paper:#f5f7fb;--ink:#23344d;--accent:#375a91;--line:#c7d3e5;--panel:#fff;--soft:#e8eef8}*{box-sizing:border-box}:root{color-scheme:light}body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif}main{max-width:960px;margin:auto;padding:28px 24px 54px}.strap{font-weight:750;letter-spacing:.07em;font-size:16px;color:var(--accent)}header{padding:20px 0 24px;border-top:7px solid var(--accent);border-bottom:2px solid var(--line);margin-bottom:24px}h1{font:700 clamp(30px,5vw,45px)/1.2 Georgia,serif;margin:10px 0 18px;max-width:780px}h2{font:700 25px/1.35 Georgia,serif;margin:0 0 16px}h3{font-size:19px;margin:18px 0 10px}p{margin:12px 0}section{margin:24px 0;padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:8px;min-width:0}.plain section{border-radius:0;border-width:0 0 2px;padding:24px 0;background:transparent}.studio header{border-top-style:double;border-top-width:10px}.studio section{box-shadow:5px 5px 0 var(--line)}.board section{border-top:5px solid var(--accent)}.metric{font-size:clamp(26px,5vw,38px);font-weight:750;line-height:1.3}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.cell{padding:16px;background:var(--panel);border-left:4px solid var(--accent);min-width:0}.choices,.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 18px}button,input,textarea{font:inherit}button{padding:11px 16px;min-height:46px;border:1px solid var(--accent);border-radius:6px;background:var(--panel);color:var(--accent);cursor:pointer;max-width:100%;line-height:1.4}button:hover{box-shadow:0 0 0 2px var(--line)}button[aria-pressed=true],button.primary{background:var(--accent);color:#fff}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #a25718;outline-offset:3px}label,legend{font-weight:650;display:block;margin:12px 0 7px}fieldset{border:0;padding:0;margin:16px 0;min-width:0}input,textarea{border:1px solid #6a7c7d;background:#fff;color:#182f32;padding:11px;width:100%;min-width:0;border-radius:5px}textarea{resize:vertical}.feedback{padding:16px;border-left:4px solid var(--accent);background:var(--soft);margin:18px 0;white-space:pre-line;overflow-wrap:anywhere}.note{border-left:4px solid var(--accent);padding:12px 16px;background:var(--soft)}table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:16px}th,td{text-align:left;vertical-align:top;padding:11px 8px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}th{background:var(--soft)}svg{display:block;width:100%;height:auto;max-width:540px;margin:16px auto;background:#fff}svg text{font:24px system-ui;fill:var(--ink)}footer{border-top:2px solid var(--line);margin-top:30px;padding-top:18px;font-size:16px}[hidden]{display:none!important}.sentence{font:26px/1.7 Georgia,serif;padding:16px;background:var(--soft)}.map-node{border:2px solid var(--accent);padding:16px;text-align:center;font-size:23px;background:var(--panel);max-width:460px;margin:auto}.map-link{text-align:center;padding:10px;font-weight:700}.lane{padding:18px;border:2px dashed var(--line)}@media(max-width:640px){main{padding:20px 16px 40px}.grid,.three{grid-template-columns:1fr}section{padding:18px 14px}.studio section{box-shadow:3px 3px 0 var(--line)}th,td{padding:9px 5px}}</style></head><body class="plain"><main><header><div class="strap">ORIGINAL WORKED EXAMPLE</div><h1>Same triangle. New side roles.</h1><p>ABC: right angle C, AC = 9, BC = 12, AB = 15. Three reasoning rounds; no angle measurement needed.</p></header><fieldset><legend>Reference round</legend><div class="choices"><button type="button" id="round-A" aria-pressed="false">Round 1 / A</button><button type="button" id="round-B" aria-pressed="false">Round 2 / B</button><button type="button" id="round-D" aria-pressed="false">Round 3 / distractor</button></div></fieldset><div class="grid"><div><svg viewBox="0 0 340 400" role="img" aria-label="Triangle ABC, right at C, AC nine, BC twelve, AB fifteen"><title>Fixed 9:12:15 right triangle; right angle C</title><path d="M60 325H276L60 37Z" fill="#e8eef8" stroke="#375a91" stroke-width="3"/><path d="M60 306H79V325" fill="none" stroke="#375a91" stroke-width="2"/><text x="42" y="350">C</text><text x="285" y="345">A</text><text x="42" y="27">B</text><text x="170" y="30" id="diagram-angle">Angle A</text><text x="155" y="355">AC = 9</text><text x="8" y="190">12</text><text x="175" y="170">AB = 15</text><text x="170" y="385" text-anchor="middle" style="font-size:20px">BC = 12; right angle C</text></svg><div id="angle-context" class="feedback" role="status" aria-live="polite">Reference angle A. AB stays the hypotenuse.</div></div><div><section id="A-panel" ><h2>Angle A</h2><label for="A-opposite">Opposite side name</label><input id="A-opposite" type="text" aria-label="Opposite side name" value="" autocomplete="off"><label for="A-adjacent">Adjacent leg name</label><input id="A-adjacent" type="text" aria-label="Adjacent leg name" value="" autocomplete="off"><label for="A-hypotenuse">Hypotenuse name</label><input id="A-hypotenuse" type="text" aria-label="Hypotenuse name" value="" autocomplete="off"><label for="A-sin">Sine fraction</label><input id="A-sin" type="text" aria-label="Sine fraction" value="" autocomplete="off"><label for="A-cos">Cosine fraction</label><input id="A-cos" type="text" aria-label="Cosine fraction" value="" autocomplete="off"><label for="A-tan">Tangent fraction</label><input id="A-tan" type="text" aria-label="Tangent fraction" value="" autocomplete="off"><label for="A-reason">Explain the side choices</label><textarea id="A-reason" rows="3"></textarea><button type="button" id="A-check" >Check angle A</button><div id="A-feedback" class="feedback" role="status" aria-live="polite">Not checked yet.</div></section><section id="B-panel" hidden><h2>Angle B</h2><label for="B-opposite">Opposite side name</label><input id="B-opposite" type="text" aria-label="Opposite side name" value="" autocomplete="off"><label for="B-adjacent">Adjacent leg name</label><input id="B-adjacent" type="text" aria-label="Adjacent leg name" value="" autocomplete="off"><label for="B-hypotenuse">Hypotenuse name</label><input id="B-hypotenuse" type="text" aria-label="Hypotenuse name" value="" autocomplete="off"><label for="B-sin">Sine fraction</label><input id="B-sin" type="text" aria-label="Sine fraction" value="" autocomplete="off"><label for="B-cos">Cosine fraction</label><input id="B-cos" type="text" aria-label="Cosine fraction" value="" autocomplete="off"><label for="B-tan">Tangent fraction</label><input id="B-tan" type="text" aria-label="Tangent fraction" value="" autocomplete="off"><label for="B-reason">Explain the side choices</label><textarea id="B-reason" rows="3"></textarea><button type="button" id="B-check" >Check angle B</button><div id="B-feedback" class="feedback" role="status" aria-live="polite">Not checked yet.</div></section><section id="D-panel" hidden><h2>Is sin A = 9/15?</h2><fieldset><legend>Choose a response</legend><div class="choices"><button type="button" id="distractor-accept" aria-pressed="false">Accept</button><button type="button" id="distractor-reject" aria-pressed="false">Reject</button></div></fieldset><label for="D-reason">Explain the numerator</label><textarea id="D-reason" rows="3"></textarea><button type="button" id="D-check" >Check distractor</button><div id="D-feedback" class="feedback" role="status" aria-live="polite">Not checked yet.</div></section></div></div><div class="toolbar"><button type="button" id="reveal" aria-expanded="false" aria-controls="teacher-key">Show / hide teacher derivation</button><button type="button" id="reset" >Reset</button></div><div id="teacher-key" hidden class="note">A: opposite BC=12; adjacent AC=9; hypotenuse AB=15. sin=12/15=4/5; cos=9/15=3/5; tan=12/9=4/3. B: opposite AC=9; adjacent BC=12; hypotenuse AB=15. sin=9/15=3/5; cos=12/15=4/5; tan=9/12=3/4. Distractor: reject; 9/15 is cos A, not sin A.</div><footer>Local review only. Entries and changes stay in this open page; reload restores the example. Keep actual records in the required native document or workflow.</footer></main><script>
(()=>{'use strict';
const $=id=>document.querySelector('#'+id); const on=(id,fn,event='click')=>$(id).addEventListener(event,fn); const put=(id,text)=>{$(id).textContent=text;};
function pick(groupId,values,changed=()=>{}){let selected='';for(const value of values)on(groupId+'-'+value,()=>{selected=value;for(const v of values)$(groupId+'-'+v).setAttribute('aria-pressed',String(v===value));changed(value);});return {get:()=>selected,set:value=>{selected=value;for(const v of values)$(groupId+'-'+v).setAttribute('aria-pressed',String(v===value));}};}
function number(id,min,max,integer=false,optional=false){const raw=$(id).value.trim();if(!raw){if(optional)return null;throw Error('Enter '+$(id).getAttribute('aria-label')+' before checking.');}const n=Number(raw);if(!Number.isFinite(n)||n<min||n>max||(integer&&!Number.isInteger(n)))throw Error('Use '+(integer?'an integer':'a number')+' from '+min+' to '+max+' for '+$(id).getAttribute('aria-label')+'.');return n;}
function edit(ids,fn){for(const id of ids)on(id,fn,'input');}function blank(ids){for(const id of ids)$(id).value='';}function toggle(id,button){on(button,()=>{const e=$(id);e.hidden=!e.hidden;$(button).setAttribute('aria-expanded',String(!e.hidden));});}

const fields=["opposite","adjacent","hypotenuse","sin","cos","tan"];const keys={A:['BC','AC','AB',[4,5],[3,5],[4,3]],B:['AC','BC','AB',[3,5],[4,5],[3,4]]};for(const angle of ['A','B']){const ids=fields.map(f=>angle+'-'+f);edit([...ids,angle+'-reason'],()=>put(angle+'-feedback','Response changed. Check again.'));on(angle+'-check',()=>{const values=ids.map(id=>$(id).value.trim());if(values.some(v=>!v)){put(angle+'-feedback','Unanswered: complete side names and all three fractions.');return;}try{const fractions=values.slice(3).map(v=>{const match=/^(\d+)\s*\/\s*(\d+)$/.exec(v);if(!match||Number(match[1])<1||Number(match[2])<1||Number(match[1])>1000000||Number(match[2])>1000000)throw Error('Use positive integer fractions with a nonzero denominator.');return [Number(match[1]),Number(match[2])];});const key=keys[angle];const validSides=values.slice(0,3).every((v,i)=>[key[i],key[i].split('').reverse().join('')].includes(v.toUpperCase()));const validFractions=fractions.every((f,i)=>f[0]*key[i+3][1]===f[1]*key[i+3][0]);put(angle+'-feedback',(validSides&&validFractions?'Matching side roles and ratios. ':'Recheck side roles and ratios. ')+(angle==='A'?'A: BC opposite, AC adjacent, AB hypotenuse; sin 4/5, cos 3/5, tan 4/3.':'B: AC opposite, BC adjacent, AB hypotenuse; sin 3/5, cos 4/5, tan 3/4.')+' Teacher reviews the explanation.');}catch(e){put(angle+'-feedback',e.message);}});}const rounds=pick('round',['A','B','D'],v=>{for(const angle of ['A','B','D']){$(angle+'-panel').hidden=angle!==v;put(angle+'-feedback','Not checked yet.');}put('diagram-angle','Angle '+(v==='D'?'A':v));put('angle-context',v==='D'?'Distractor uses reference angle A. AC=9 is adjacent; AB=15 is hypotenuse.':'Reference angle '+v+'. AB stays the hypotenuse; the two leg roles depend on this angle.');});rounds.set('A');const distractor=pick('distractor',['accept','reject'],()=>put('D-feedback','Choice changed. Check again.'));on('D-check',()=>put('D-feedback',!distractor.get()?'Unanswered: accept or reject the statement.':distractor.get()==='reject'?'Correct rejection: AC=9 is adjacent for A, so 9/15 is cos A. sin A uses BC/AB = 12/15 = 4/5.':'Recheck: sine uses the opposite BC=12, not adjacent AC=9. Reject sin A = 9/15.'));edit(['D-reason'],()=>put('D-feedback','Explanation changed. Check again.'));toggle('teacher-key','reveal');on('reset',()=>{for(const angle of ['A','B'])blank([...fields.map(f=>angle+'-'+f),angle+'-reason']);blank(['D-reason']);distractor.set('');rounds.set('A');for(const angle of ['A','B','D']){$(angle+'-panel').hidden=angle!=='A';put(angle+'-feedback','Not checked yet.');}$('teacher-key').hidden=true;$('reveal').setAttribute('aria-expanded','false');put('angle-context','Reference angle A. AB stays the hypotenuse.');put('diagram-angle','Angle A');});
})();
</script></body></html>