Change the support, keep the goal

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>Change the support, keep the goal</title><style>*{box-sizing:border-box}:root{--ink:#26353e;--muted:#526771;--accent:#285f77;--line:#d0dade;--soft:#edf3f5;color-scheme:light}body{margin:0;background:#f2f5f5;color:var(--ink);font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}main{max-width:1120px;margin:auto;padding:28px 32px 64px}header{margin-bottom:20px}h1{font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.2;letter-spacing:-.035em;margin:0 0 8px}header p{margin:0}h2{font-size:1.2rem;line-height:1.3;margin:0 0 16px}h3{font-size:1rem;margin:0 0 8px}p{margin:9px 0 16px}.panel{background:white;border:1px solid var(--line);border-radius:10px;padding:24px}.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.below{margin-top:24px}.muted,small{color:var(--muted)}.big{font-size:clamp(2rem,5vw,3.6rem);font-weight:750;line-height:1.14;letter-spacing:-.04em;margin:9px 0;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.subresult{font-size:1.2rem;font-weight:700}.formula{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;overflow-wrap:anywhere}label{display:block;font-size:.9rem;font-weight:650}input,select,textarea,button{font:inherit}input,select,textarea{display:block;width:100%;min-width:0;margin-top:6px;padding:10px 12px;border:1px solid #879da8;border-radius:6px;background:white;color:var(--ink)}input,select{min-height:46px}textarea{line-height:1.6;resize:vertical}button{min-height:44px;padding:9px 15px;border:1px solid var(--accent);border-radius:6px;background:var(--accent);color:white;font-weight:650;cursor:pointer}button.secondary{background:white;color:var(--accent)}button:disabled{opacity:.5;cursor:not-allowed}:focus-visible{outline:3px solid #bf6a22;outline-offset:3px}.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.check{display:flex;align-items:flex-start;gap:10px;font-weight:500}.check input{width:20px;height:20px;min-height:20px;margin:2px 0 0;flex:none;accent-color:var(--accent)}.badge{display:inline-block;background:var(--soft);color:var(--accent);font-size:.78rem;font-weight:700;padding:4px 9px;border-radius:24px}.error{min-height:24px;color:#a52f29;font-weight:650;margin:8px 0 0}.status{font-size:.88rem;color:var(--muted)}.note{background:#fff3de;border-left:3px solid #b47e3d;padding:12px 16px;color:#63491f}.rule{border-top:1px solid var(--line);margin:18px 0}table{border-collapse:collapse;width:100%;font-size:.92rem}th{font-size:.82rem;color:var(--muted);text-align:left}th,td{border-bottom:1px solid var(--line);padding:10px 8px;vertical-align:top}th:first-child,td:first-child{padding-left:0}details{border-top:1px solid var(--line);padding:16px 0}summary{font-weight:650;cursor:pointer}svg{display:block;width:100%;height:auto}figure{margin:0}figcaption{font-size:.84rem;color:var(--muted);margin-top:10px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:.86rem/1.6 ui-monospace,Consolas,monospace;background:#eaf0f3;border-radius:6px;padding:18px}ol{padding-left:24px}li{margin:7px 0}[hidden]{display:none!important}@media(max-width:720px){main{padding:22px 20px 44px}.grid{grid-template-columns:1fr;gap:18px}.panel{padding:20px}}@media(max-width:400px){main{padding:18px 16px 36px}.panel{padding:16px}.big{font-size:2.3rem}.fields{gap:12px}th,td{padding:8px 5px}}@media print{body{background:white}main{padding:0;max-width:none}.actions,button{display:none}.panel{break-inside:avoid}details>*{display:block}}:root{--accent:#6b5a80}body{background:#f4f0f7}.common-goal{background:#fff;border-top:5px solid #8d7b9e;padding:24px}.common-goal h2{font-size:1.35rem;margin:12px 0}.practice-text{font:1.2rem/1.5 ui-serif,Georgia,serif;margin-bottom:0}.route-workbench{background:#fff;border:1px solid #d6cddd;padding:24px;border-radius:10px}#practice{display:grid;grid-template-columns:1fr 1.3fr;gap:24px}.route-evidence,.route-task{border-top:3px solid #b6a6c2;padding-top:14px}.route-evidence span,.route-task span{display:block;font-size:.82rem;color:var(--muted);margin-bottom:8px}.route-evidence h2,.route-task h2{font-size:1.1rem}.phase-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:20px}.phase-strip span{font-size:.78rem;border-top:3px solid #b4a3c3;padding-top:8px}.phase-strip b{display:block;font-size:1.5rem}.exit-text{font:1.25rem/1.5 ui-serif,Georgia,serif}#exit p{overflow-wrap:anywhere}@media(max-width:600px){#practice{grid-template-columns:1fr;gap:16px}.common-goal,.route-workbench{padding:18px}.phase-strip{grid-template-columns:repeat(3,1fr);gap:16px}}.response-text{grid-column:1/-1;padding:12px 16px;background:#f4edf7;border-left:3px solid #aa94bb;margin:0}</style></head><body><main><header><h1>Change the support, keep the goal</h1><p>Plan temporary tasks from fictional response patterns, then use the same new exit for everyone.</p></header>
<section class="common-goal"><span class="badge">Common criterion · all routes</span><h2>Quote a stated cause and explain how it connects to the action.</h2><p class="practice-text">“The club moved the display indoors because rain was expected.”</p></section>
<section class="route-workbench below"><div class="fields"><label for="card">Fictional response pattern<select id="card"><option value="R01">R01 · “indoors”</option><option value="R02">R02 · “because rain was expected”</option><option value="R03">R03 · cause plus explanation</option></select></label><label for="view">Review copy<select id="view"><option value="practice">Practice route</option><option value="exit">Common new exit</option></select></label></div><div id="practice" class="below" aria-live="polite"><p id="response" class="response-text"></p><div class="route-evidence"><span>Evidence in this fictional response</span><h2 id="evidence"></h2></div><div class="route-task"><span>Proposed temporary task</span><h2 id="task"></h2><p id="prompt"></p><p id="limit" class="status"></p></div></div><div id="exit" class="below" hidden><h2>Same new exit · actual response blank</h2><p class="exit-text">“The team carried the papers inside because wind was rising.”</p><p>Why did the team carry the papers inside? Quote the reason and explain its connection to the action.</p><p>Actual response: ______________________________________________</p><p>Assistance, if any: ____________________________________________</p><p class="note">Exit review and next support/group decision remain undecided. Record any access assistance; supported work is not automatically independent evidence.</p></div></section>
<section class="panel below"><h2>30-minute lesson sequence</h2><div class="phase-strip"><span><b>4</b>Launch</span><span><b>5</b>Inspect responses</span><span><b>4</b>Teacher decision</span><span><b>9</b>Different tasks</span><span><b>5</b>Same exit</span><span><b>3</b>Next-group review</span></div><p>Present the goal and text; inspect actual short responses; choose temporary support and record why; run the selected tasks; give everyone the new exit; review actual evidence before deciding the next support. Teacher confirms class context, language access, materials, and supports.</p></section>
<details class="below"><summary>Separate teacher exit key</summary><p>Cause: <b>because wind was rising</b>.</p><p>Action: <b>carried the papers inside</b>.</p><p>The explanation must connect that stated cause to the action. The key is not an actual learner response.</p></details><details><summary>Blank actual evidence and regrouping record</summary><p>Pre-response evidence / reference: ____________________</p><p>Chosen temporary task / support / reason: ____________________</p><p>Practice assistance: ____________________</p><p>Actual exit response / assistance: ____________________</p><p>Cause evidence and explanation reviewed: ____________________</p><p>Next support/group decision / reason: ____________________</p><p>A response outside these patterns needs teacher review, not nearest-label placement. No ability labels, diagnoses, standards claim, automatic assessment/group assignment, student collection, or saved edits. A blank or unreviewed exit leaves decisions open.</p></details></main><script>const $=id=>document.getElementById(id),put=(id,s)=>{$(id).textContent=s};
function esc(s){return String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));}
function gcd(a,b){a=a<0n?-a:a;b=b<0n?-b:b;while(b){[a,b]=[b,a%b]}return a||1n;}
function R(n,d=1n){n=BigInt(n);d=BigInt(d);if(d===0n)throw Error('Undefined denominator.');if(d<0n){n=-n;d=-d}const g=gcd(n,d);return {n:n/g,d:d/g};}
function mul(a,b){return R(a.n*b.n,a.d*b.d)}function div(a,b){return R(a.n*b.d,a.d*b.n)}function add(a,b){return R(a.n*b.d+b.n*a.d,a.d*b.d)}function sub(a,b){return R(a.n*b.d-b.n*a.d,a.d*b.d)}function cmp(a,b){const x=a.n*b.d-b.n*a.d;return x<0n?-1:x>0n?1:0}
function parse(s,{max=1000000,positive=false,places=6}={}){const t=String(s).trim();if(!t)throw Error('Enter a value; blank is not zero.');const re=new RegExp('^[0-9]+(?:\.[0-9]{1,'+places+'})?$');if(!re.test(t))throw Error('Use digits and a US decimal point, up to '+places+' places; no signs, commas, or exponents.');const v=Number(t);if(!Number.isFinite(v)||v>max||(positive&&v===0))throw Error('Value must be '+(positive?'greater than zero':'nonnegative')+' and at most '+max+'.');const [a,b='']=t.split('.');return R(BigInt(a+b),10n**BigInt(b.length));}
function format(a,places=6){const neg=a.n<0n,n=neg?-a.n:a.n,scale=10n**BigInt(places),v=n*scale,q=v/a.d,rem=v%a.d,k=q+(rem*2n>=a.d?1n:0n);const f=(k%scale).toString().padStart(places,'0').replace(/0+$/,'');return {text:(neg&&k!==0n?'-':'')+(k/scale)+(f?'.'+f:''),approx:rem!==0n};}
function exact(a){let d=a.d;while(d%2n===0n)d/=2n;while(d%5n===0n)d/=5n;if(d!==1n)return a.n+'/'+a.d;let places=0,p=1n;while(p%a.d!==0n&&places<40){p*=10n;places++}return format(a,places).text;}
function display(a,places=6){if(a.n>0n&&cmp(a,R(1n,10n**BigInt(places)))<0)return '< '+format(R(1n,10n**BigInt(places)),places).text;const f=format(a,places);return (f.approx?'≈ ':'')+f.text;}
function listen(ids,fn){ids.forEach(id=>{ $(id).addEventListener('input',fn);$(id).addEventListener('change',fn); });}


const routes={R01:{evidence:'Locates the result/place; the stated cause is missing.',task:'Locate the “why” words, then connect them.',prompt:'Which words answer why rather than where? Mark “because rain was expected,” identify “moved the display indoors,” then explain their connection in your own words.',limit:'The marked clause is guided practice, not independent exit evidence.'},R02:{evidence:'Identifies the cause; no explanation is supplied.',task:'Explain the link between cause and action.',prompt:'What did the club do in response to expected rain? Use a planning frame: “The text says ____. That gives the reason for ____.”',limit:'Keep the exact cause words and add an explanation; quoting alone does not supply the link.'},R03:{evidence:'Supplies cause and a connection in this fictional fixture.',task:'Compare a counterfactual without inventing a decision.',prompt:'Compare “rain was expected” with “rain was not expected.” Which stated reason changes? Does the revised wording establish what the club would actually decide?',limit:'The original reason no longer applies as written. No new real decision follows from that counterfactual alone.'}};
function route(id){if(!Object.hasOwn(routes,id))throw Error('Unknown fictional response pattern.');return routes[id];}
const responses={R01:'indoors',R02:'because rain was expected',R03:'because rain was expected; the club moved indoors in response to that expected rain'};function update(){const practice=$('view').value==='practice',r=route($('card').value);put('response','Fictional response: “'+responses[$('card').value]+'”');$('practice').hidden=!practice;$('exit').hidden=practice;put('evidence',r.evidence);put('task',r.task);put('prompt',r.prompt);put('limit',r.limit);}
listen(['card','view'],update);globalThis.Tool={route,update};update();</script></body></html>