Same task. Three response routes.

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 task. Three response routes.</title><style>:root{--paper:#faf8ee;--ink:#243c3a;--accent:#28635b;--line:#ccd6c5;--panel:#fffdf6;--soft:#e9efde}*{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 task. Three response routes.</h1><p>30-minute coordinate lesson. Group model: (1,1) → (3,1) → (3,2). Individual work stays separate.</p></header><div class="grid"><div><svg viewBox="0 0 340 340" role="img" aria-label="Coordinate grid from zero to four, x right and y up"><title>Coordinate grid zero through four</title><path d="M50 290H270 M50 70V290" stroke="#c6d2c9"/><text x="50" y="320" text-anchor="middle">0</text><text x="25" y="296">0</text><path d="M50 235H270 M105 70V290" stroke="#c6d2c9"/><text x="105" y="320" text-anchor="middle">1</text><text x="25" y="241">1</text><path d="M50 180H270 M160 70V290" stroke="#c6d2c9"/><text x="160" y="320" text-anchor="middle">2</text><text x="25" y="186">2</text><path d="M50 125H270 M215 70V290" stroke="#c6d2c9"/><text x="215" y="320" text-anchor="middle">3</text><text x="25" y="131">3</text><path d="M50 70H270 M270 70V290" stroke="#c6d2c9"/><text x="270" y="320" text-anchor="middle">4</text><text x="25" y="76">4</text><path d="M50 55V290H290" fill="none" stroke="#274840" stroke-width="2"/><text x="300" y="295">x</text><text x="40" y="45">y</text></svg><p>x increases right; y increases up. Group tracer moves right two, then up one. Reporter explains the route.</p></div><div><fieldset><legend>Participation route</legend><div class="choices"><button type="button" id="route-voice" aria-pressed="false">Live voice</button><button type="button" id="route-text" aria-pressed="false">Approved text</button><button type="button" id="route-paper" aria-pressed="false">Delayed paper</button></div></fieldset><div id="route-note" class="feedback" role="status" aria-live="polite">Not checked yet.</div><section ><h2>Live clock</h2><table><thead><tr><th scope="col">Phase</th><th scope="col">Minutes</th></tr></thead><tbody><tr><td>Access / instructions</td><td>5</td></tr><tr><td>Model</td><td>5</td></tr><tr><td>Paired trace</td><td>8</td></tr><tr><td>Compare</td><td>6</td></tr><tr><td>Individual transfer</td><td>4</td></tr><tr><td>Route check</td><td>2</td></tr></tbody></table></section></div></div><section ><h2>Your individual trace</h2><p>Start (2,1), move left one, then up two. Give the intermediate point and endpoint.</p><div class="grid"><div><label for="mid-x">After left one: x</label><input id="mid-x" type="text" aria-label="After left one: x" value="" autocomplete="off"><label for="mid-y">After left one: y</label><input id="mid-y" type="text" aria-label="After left one: y" value="" autocomplete="off"></div><div><label for="end-x">Endpoint: x</label><input id="end-x" type="text" aria-label="Endpoint: x" value="" autocomplete="off"><label for="end-y">Endpoint: y</label><input id="end-y" type="text" aria-label="Endpoint: y" value="" autocomplete="off"></div></div><label for="reason">Explain which coordinate each move changes</label><textarea id="reason" rows="3"></textarea><button type="button" id="check" >Check coordinates</button><button type="button" id="reset" >Reset</button><div id="answer" class="feedback" role="status" aria-live="polite">Not checked yet.</div></section><p class="note">Proposed delayed window: 24 hours, separate from the 30-minute live session. Actual dates, zone, recipient and return channel TO CONFIRM. No response is not automatically an incorrect answer or absence.</p><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=['mid-x','mid-y','end-x','end-y'];const route=pick('route',['voice','text','paper'],v=>put('route-note',(v==='voice'?'Live voice':v==='text'?'Approved text':'Delayed paper')+': return the same individual intermediate point, endpoint, operations, and explanation. '+(v==='paper'?'Use the supplied sheet; proposed 24-hour window needs confirmed dates and route.':'Use the teacher-approved channel.')+' No submission receipt is created.'));route.set('voice');put('route-note','Live voice: give the intermediate point, endpoint, operations, and explanation. No submission receipt is created.');on('check',()=>{try{const [mx,my,ex,ey]=fields.map(id=>number(id,0,4,true));put('answer',mx!==1||my!==1?'Recheck the first move: left one changes (2,1) to (1,1).':ex!==1||ey!==3?'Recheck up two: add 2 to y, giving (1,3).':'Matching trace: (2,1) → (1,1) → (1,3). Left changes x; up changes y. Discuss your explanation with the teacher.');}catch(e){put('answer',e.message);}});edit([...fields,'reason'],()=>put('answer','Response changed. Check the current coordinates.'));on('reset',()=>{blank([...fields,'reason']);route.set('voice');put('route-note','Live voice: give the intermediate point, endpoint, operations, and explanation. No submission receipt is created.');put('answer','Not checked yet.');});
})();
</script></body></html>