Build a rain-garden statement set and inspect its evidence and discussion stops

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

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Anticipation guide · prepare the discussion</title><style>*{box-sizing:border-box}body{margin:0;background:#f2f5eb;color:#253b30;font:16px/1.55 system-ui,sans-serif}main{max-width:960px;margin:auto;padding:24px}h1{font-size:32px;line-height:1.18}h2{font-size:23px}h3{font-size:19px}.eyebrow{letter-spacing:.06em;color:#526555}.source,.card,.key-row{padding:18px;margin:14px 0;border:1px solid #becdb9;border-radius:6px;background:white}.source{border-left:6px solid #536f38}.source p{margin:9px 0}.toolbar{display:flex;flex-wrap:wrap;gap:9px;margin:18px 0}button,textarea,select{font:inherit;color:inherit}button{min-height:44px;padding:9px 13px;border:1px solid #536d48;background:white;border-radius:4px;cursor:pointer}button[aria-pressed=true]{background:#36583c;color:white}button:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #aa551b;outline-offset:3px}.statements{display:grid;gap:9px}.statements button{text-align:left}.comparison{border-left:6px solid #b06b2b;background:#fff3dd}label{display:block;font-weight:650;margin:12px 0 5px}textarea,select{width:100%;max-width:100%;min-width:0;padding:9px;border:1px solid #74866c;background:white;border-radius:4px}select{min-height:44px}textarea{min-height:92px;resize:vertical}.responses{display:grid;grid-template-columns:1fr 1fr;gap:16px}#status{font-weight:650}footer{margin:24px 0;color:#53624f}[hidden]{display:none!important}@media(max-width:520px){main{padding:12px}h1{font-size:27px}.responses{grid-template-columns:1fr}.card,.source{padding:14px}}</style></head><body><main><p class="eyebrow">ORIGINAL PASSAGE · TEACHER PREPARATION</p><h1>Which statements will start a useful discussion?</h1><p>Select a statement, inspect its purpose, then revisit it with passage evidence.</p><section class="source"><h2>A school rain garden</h2><p><strong>S1.</strong> A shallow basin planted beside the school receives water running off the roof.</p><p><strong>S2.</strong> The soil in the basin allows some of this water to soak into the ground.</p><p><strong>S3.</strong> An overflow pipe carries excess water from the basin to a drain.</p><p><strong>S4.</strong> The garden needs weeding and checks to keep its inlet clear.</p><p>Fictional classroom passage. It describes this garden, not a real school's drainage system.</p></section><nav class="toolbar" aria-label="Guide view"><button id="prep" aria-pressed="true" type="button">Teacher preparation</button><button id="learner" aria-pressed="false" type="button">Blank learner sheet</button></nav><section id="prep-view"><h2>Four statements, four teaching purposes</h2><div class="statements"><button id="s1" type="button" aria-pressed="true">1 · All incoming water stays in the garden.</button><button id="s2" type="button" aria-pressed="false">2 · Some water soaks into the ground.</button><button id="s3" type="button" aria-pressed="false">3 · A planted garden needs no upkeep.</button><button id="s4" type="button" aria-pressed="false">4 · Roof runoff enters the basin.</button></div><section class="card" aria-live="polite"><h3 id="selected-statement">All incoming water stays in the garden.</h3><p><strong>Teaching purpose:</strong> <span id="purpose">Examine whether water can leave the basin.</span></p><p><strong>Discussion stop:</strong> <span id="stop">After S3: ask what “all” would require.</span></p><p>The evidence for each statement is in the separate teacher key below.</p></section><button id="compare" type="button" aria-expanded="false" aria-controls="comparison">Compare statements</button><section id="comparison" class="card comparison" hidden><h3>Repair an isolated-detail prompt</h3><p><strong>Draft:</strong> What date did the school open its rain garden?</p><p>The passage supplies no date. This asks for an isolated detail rather than a concept to discuss.</p><p><strong>Proposed statement:</strong> All the water entering the rain garden stays there.</p><p>Test “all” against S3's overflow pipe. Keep maintenance in its own statement; joining both claims would make a learner's position ambiguous.</p></section><div class="toolbar"><button id="teacher-key" type="button" aria-expanded="false" aria-controls="key">Teacher key</button></div><p>This key is available to anyone using this page. A closed button does not make it private. Prepare a separate student copy if needed.</p><section id="key" hidden aria-label="Supplied teacher evidence map"><h2>Teacher evidence map</h2><div id="key-rows"></div></section></section><section id="learner-view" hidden><h2>Your before-and-after reasons</h2><p>Before reading, record your position and reason. After reading, retain or revise your position and cite passage evidence. Nothing is graded here.</p><div id="response-rows"></div><div class="toolbar"><button id="reset" type="button">Reset learner notes</button></div><section id="confirmation" class="card" hidden><h3>Clear all learner positions and notes?</h3><div class="toolbar"><button id="keep" type="button">Keep my notes</button><button id="clear" type="button">Clear learner notes</button></div></section></section><p id="status" role="status" aria-live="polite">Select a statement to inspect its teaching purpose.</p><footer>Temporary preparation copy. Positions and notes remain only in this open page; they are not saved or submitted.</footer></main><script>(()=>{'use strict';const $=s=>document.querySelector(s);const rows=[['All incoming water stays in the garden.','Examine whether water can leave the basin.','Contradicted by S3: excess water leaves through an overflow pipe.','After S3: ask what “all” would require.'],['Some water soaks into the ground.','Trace water movement through the soil.','Supported by S2: some water soaks into the ground.','After S2: ask which words identify that route.'],['A planted garden needs no upkeep.','Distinguish planting from continued maintenance.','Contradicted by S4: weeding and inlet checks are needed.','After S4: identify the two maintenance actions.'],['Roof runoff enters the basin.','Identify the source of incoming water in this passage.','Supported by S1: water runs off the roof into the basin.','After S1: trace the water from roof to basin.']];for(const [n,row]of rows.entries()){const key=document.createElement('article');key.className='key-row';for(const text of [String(n+1)+' · '+row[0],'Purpose: '+row[1],'Evidence: '+row[2],'Stop: '+row[3]]){const p=document.createElement('p');p.textContent=text;key.append(p);}$('#key-rows').append(key);const card=document.createElement('section');card.className='card';const h=document.createElement('h3');h.textContent=String(n+1)+' · '+row[0];card.append(h);const columns=document.createElement('div');columns.className='responses';for(const phase of ['before','after']){const col=document.createElement('div');for(const kind of ['position','reason']){const id=phase+'-'+kind+'-'+(n+1),label=document.createElement('label');label.htmlFor=id;label.textContent=phase==='before'?(kind==='position'?'Before-reading position':'Before-reading reason'):(kind==='position'?'After-reading position':'After-reading passage evidence');const field=document.createElement(kind==='position'?'select':'textarea');field.id=id;if(kind==='position')for(const value of ['','Agree','Disagree','Not sure yet']){const option=document.createElement('option');option.value=value;option.textContent=value||'Choose a position';field.append(option);}col.append(label,field);}columns.append(col);}card.append(columns);$('#response-rows').append(card);$('#s'+(n+1)).addEventListener('click',()=>{for(let i=1;i<=4;i++)$('#s'+i).setAttribute('aria-pressed',String(i===n+1));$('#selected-statement').textContent=row[0];$('#purpose').textContent=row[1];$('#stop').textContent=row[3];$('#status').textContent='Statement '+(n+1)+' selected. Learner responses are unchanged.';});}for(const [button,panel]of [['compare','comparison'],['teacher-key','key']])$('#'+button).addEventListener('click',()=>{const open=$('#'+panel).hidden;$('#'+panel).hidden=!open;$('#'+button).setAttribute('aria-expanded',String(open));});for(const id of ['prep','learner'])$('#'+id).addEventListener('click',()=>{const learner=id==='learner';$('#prep-view').hidden=learner;$('#learner-view').hidden=!learner;$('#prep').setAttribute('aria-pressed',String(!learner));$('#learner').setAttribute('aria-pressed',String(learner));$('#confirmation').hidden=true;$('#status').textContent='View changed. All learner positions and reasons are retained.';});$('#reset').addEventListener('click',()=>{$('#confirmation').hidden=false;$('#keep').focus();});$('#keep').addEventListener('click',()=>{$('#confirmation').hidden=true;$('#reset').focus();$('#status').textContent='Kept all learner positions and notes.';});$('#clear').addEventListener('click',()=>{for(const el of document.querySelectorAll('#response-rows textarea,#response-rows select'))el.value='';$('#confirmation').hidden=true;$('#before-position-1').focus();$('#status').textContent='All learner positions and notes were cleared. Teacher preparation is unchanged.';});})();</script></body></html>