Two Boxes · Shared Reading Plan — Plan who reads each exact text segment across modeled, echo and choral reading, with phrase pauses, meaning checks and observation.

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>Two Boxes · Shared Reading Plan</title><style>:root{--bg:#f7f4ed;--ink:#374736;--accent:#58734b;--line:#d0d5c4;--wash:#eaf0df;}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif}main{max-width:1120px;margin:auto;padding:26px 24px 55px}h1,h2,h3,p{margin:0}h1{font-size:clamp(27px,4vw,39px);line-height:1.17;letter-spacing:-.03em}h2{font-size:23px}h3{font-size:18px}header{margin-bottom:18px}header p{margin-top:8px}.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:bold;color:var(--accent)}button,input,select,textarea{font:inherit}button{min-height:44px;padding:9px 15px;background:var(--accent);color:white;border:1px solid var(--accent);border-radius:6px;cursor:pointer;font-weight:bold}button.secondary{background:white;color:var(--accent)}button[aria-pressed=true]{box-shadow:inset 0 0 0 2px currentColor}button:disabled{opacity:.45;cursor:default}input,select,textarea{width:100%;min-height:44px;padding:9px 11px;border:1px solid #969fb0;background:white;color:var(--ink);border-radius:5px}textarea{min-height:90px;resize:vertical}input[type=checkbox]{width:20px;min-height:20px;vertical-align:middle;margin-right:8px}label{display:block;font-size:14px;font-weight:bold;margin:11px 0 5px}:focus-visible{outline:3px solid #d98c22;outline-offset:3px}.actions{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}.panel{background:white;border:1px solid var(--line);border-radius:10px;padding:22px;min-width:0}.columns{display:grid;grid-template-columns:1.55fr 1fr;gap:22px}.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.muted{font-size:14px;color:#556173}.notice{background:var(--wash);border-left:4px solid var(--accent);padding:13px 16px;margin:14px 0;overflow-wrap:anywhere}.error{color:#a42b25;font-weight:bold}.below{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}.below>p{margin:9px 0}.tag{font-size:12px;padding:4px 8px;background:var(--wash);border-radius:4px}.big{font-size:32px;line-height:1.2;font-weight:bold}.foot{font-size:14px;color:#556173;margin-top:24px}.readonly{min-height:180px;font:13px/1.6 ui-monospace,monospace}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.6 ui-monospace,monospace}.stage{display:grid;grid-template-columns:95px 1fr;gap:15px;padding:17px 0;border-top:1px solid var(--line)}.stage input{width:78px}.stage p{margin-top:6px}.range{font-weight:bold}.total{font-size:30px;font-weight:bold;color:var(--accent)}.schedule-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}summary{cursor:pointer;min-height:44px;padding:10px 0;font-weight:bold}details{margin:18px 0}table{width:100%;border-collapse:collapse;font-size:14px}td,th{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:9px}.scroll{overflow:auto}[hidden]{display:none!important}@media(max-width:800px){.columns{grid-template-columns:1fr}}@media(max-width:520px){main{padding:18px 14px 40px}.panel{padding:16px}.two,.three{grid-template-columns:1fr}.actions button{flex-grow:1}.stage{grid-template-columns:78px 1fr;gap:10px}.stage input{width:65px}td,th{padding:7px}}h1,h2{font-family:Georgia,serif}.reading-page{padding:30px;background:#fffdf5;border:1px solid #dbd6c4;border-radius:8px}.sentence{font:clamp(25px,3vw,34px)/1.7 Georgia,serif;padding:13px 0;border-bottom:1px solid #e3dfce}.sentence small{display:block;font:12px Arial;letter-spacing:.1em;color:#6f775e}.sentence.active{background:#eef1dd}.pass-buttons{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap}.cue{background:#edf2e5;padding:22px;border-radius:10px;border:1px solid #cbd9bc}.cue .big{font-family:Georgia,serif}.view-buttons{display:flex;gap:9px;margin-bottom:15px}.clean-title{font-size:15px;margin-bottom:8px}.question-panel{background:#fff;border:1px solid var(--line);padding:20px;border-radius:10px}.question-panel p{margin-top:9px}</style></head><body><main><header><p class="eyebrow">Original fictional passage · exact-text reading</p><h1>Same words. A different reader role.</h1><p>Plan a model, echo and choral pass without changing either sentence.</p></header><div class="view-buttons"><button type="button" id="teacher-view">Teacher view</button><button type="button" id="learner-view" class="secondary">Clean learner view</button></div><div class="columns"><section class="reading-page"><p class="clean-title">The box passage</p><p class="sentence" id="sentence-1"><small>S1</small><span id="s1-text">Mina put the blue box beside the door.</span></p><p class="sentence" id="sentence-2"><small>S2</small><span id="s2-text">Then she carried the red box to the shelf.</span></p><p class="muted" id="clean-note" hidden>Read the sentences in this order.</p></section><aside class="cue" id="teacher-cue"><div class="pass-buttons"><button type="button" id="model" class="secondary">Model</button><button type="button" id="echo" class="secondary">Echo</button><button type="button" id="choral" class="secondary">Choral</button></div><p class="eyebrow" id="pass-id">Model · S1</p><p class="big" id="role">Teacher reads; learners follow.</p><p id="cue-text" style="margin-top:13px">Read S1. Pause at its end after “door.”</p><div class="actions"><button type="button" id="echo-cue" class="secondary">Cue learner repetition</button></div><p class="muted">A cue display does not play audio or assess a reader.</p></aside></div><section class="below question-panel"><h2>Meaning check · point back to the words</h2><div class="actions"><button type="button" id="question-blue" class="secondary">Blue box question</button><button type="button" id="question-red" class="secondary">Red box question</button></div><p class="big" id="meaning-question">Where did Mina put the blue box?</p><div class="actions"><button type="button" id="answer-0" class="secondary">Beside the door</button><button type="button" id="answer-1" class="secondary">To the shelf</button><button type="button" id="answer-2" class="secondary">On the shelf</button></div><div class="actions"><button type="button" id="check-meaning">Check selected answer</button><button type="button" id="retry-meaning" class="secondary">Retry question</button></div><p class="notice" id="meaning-feedback" role="status">Not answered.</p></section><div id="teacher-materials"><section class="below"><div class="schedule-heading"><h2>Teacher sequence</h2><p class="total" id="total">20 minutes</p></div><p id="schedule-error" class="error" role="status"></p><article class="stage"><div><p class="range" id="range-0"></p><label for="minutes-0">Minutes</label><input id="minutes-0" value="3" inputmode="numeric"></div><div><h3>1. Introduce visible text</h3><p><strong>Teacher:</strong> Display S1/S2; confirm teacher-supplied access arrangements.</p><p><strong>Learner / evidence:</strong> Follow the same visible words; do not assume access.</p></div></article><article class="stage"><div><p class="range" id="range-1"></p><label for="minutes-1">Minutes</label><input id="minutes-1" value="4" inputmode="numeric"></div><div><h3>2. Model S1</h3><p><strong>Teacher:</strong> Read S1; pause at the end after “door.”</p><p><strong>Learner / evidence:</strong> Learners follow S1; note actual tracking later.</p></div></article><article class="stage"><div><p class="range" id="range-2"></p><label for="minutes-2">Minutes</label><input id="minutes-2" value="5" inputmode="numeric"></div><div><h3>3. Echo S1</h3><p><strong>Teacher:</strong> Read S1, then cue learners to repeat the identical segment.</p><p><strong>Learner / evidence:</strong> Teacher first, learners after the cue; observe words actually read.</p></div></article><article class="stage"><div><p class="range" id="range-3"></p><label for="minutes-3">Minutes</label><input id="minutes-3" value="5" inputmode="numeric"></div><div><h3>4. Choral and meaning</h3><p><strong>Teacher:</strong> Read S1 then S2 together; ask the two location questions.</p><p><strong>Learner / evidence:</strong> Keep red-box answer to the shelf, not on the shelf.</p></div></article><article class="stage"><div><p class="range" id="range-4"></p><label for="minutes-4">Minutes</label><input id="minutes-4" value="3" inputmode="numeric"></div><div><h3>5. Reflect</h3><p><strong>Teacher:</strong> Review segment-level observations and choose next support.</p><p><strong>Learner / evidence:</strong> Record actual reading, cues/support and next step; no speed score.</p></div></article><div class="actions"><button type="button" id="restore-time" class="secondary">Restore 20-minute timing</button></div><label for="access">Teacher-confirmed access / reader arrangements</label><textarea id="access" placeholder="[TO CONFIRM for the actual class]"></textarea></section><section class="below"><h2>Actual reading observation · blank before teaching</h2><label for="observed-segment">Exact observed segment</label><input id="observed-segment" placeholder="For example S1, only after it is observed"><label for="actual-reading">What the learner actually read / tracked</label><textarea id="actual-reading"></textarea><div class="two"><div><label for="support">Cue or support actually used</label><textarea id="support"></textarea></div><div><label for="next-step">Relevant next step</label><textarea id="next-step"></textarea></div></div></section><details><summary>Teacher meaning key</summary><p>Blue box: beside the door, S1. Red box: carried to the shelf, S2. Placement on the shelf and motives are not established. Participation in group reading does not prove comprehension or an individual reading speed.</p></details></div><section class="below"><h2>Clean learner text</h2><label for="learner-text">Original passage and open questions · no role notes or answer key</label><textarea readonly id="learner-text" class="readonly"></textarea><div class="actions"><button type="button" id="select-learner" class="secondary">Select learner text</button></div><p id="copy-status" class="muted" role="status"></p><p class="foot">This is an original preparation/display companion. Reader roles are visual cues, with no narration, recording, automatic fluency rating, saved responses or standards claim. The learner view removes teacher annotations from view; client-side content is inspectable. Retain actual evidence in the school’s approved records. Printing, actual class access and browser inspection remain unverified.</p></section></main><script>'use strict';const $=id=>document.getElementById(id);const lesson=[["Introduce visible text","Display S1/S2; confirm teacher-supplied access arrangements.","Follow the same visible words; do not assume access."],["Model S1","Read S1; pause at the end after “door.”","Learners follow S1; note actual tracking later."],["Echo S1","Read S1, then cue learners to repeat the identical segment.","Teacher first, learners after the cue; observe words actually read."],["Choral and meaning","Read S1 then S2 together; ask the two location questions.","Keep red-box answer to the shelf, not on the shelf."],["Reflect","Review segment-level observations and choose next support.","Record actual reading, cues/support and next step; no speed score."]];const original=['Mina put the blue box beside the door.','Then she carried the red box to the shelf.'];let pass='model',phase=0,view='teacher',question='blue',answer=null;function schedule(){const values=Array.from({length:5},(_,i)=>$('minutes-'+i).value.trim());if(values.some(v=>!/^\d+$/.test(v)||Number(v)<1||Number(v)>120))return {error:'Use whole minutes from 1 to 120 in every block.'};let end=0;return {blocks:values.map((v,i)=>{const start=end;end+=Number(v);return {start,end,minutes:Number(v),step:lesson[i]};}),total:values.reduce((a,v)=>a+Number(v),0)};}function renderSchedule(){const s=schedule();$('schedule-error').textContent=s.error||'';$('total').textContent=s.error?'Timing incomplete':s.total+' minutes';for(let i=0;i<5;i++)$('range-'+i).textContent=s.error?'—':s.blocks[i].start+'–'+s.blocks[i].end+' min';return s;}
function setPass(p){pass=p;phase=0;renderPass();}
function renderPass(){const teacher=view==='teacher';$('teacher-cue').hidden=!teacher;$('teacher-materials').hidden=!teacher;$('clean-note').hidden=teacher;$('sentence-1').className='sentence'+(teacher?' active':'');$('sentence-2').className='sentence'+(teacher&&pass==='choral'?' active':'');for(const id of ['model','echo','choral'])$(id).setAttribute('aria-pressed',String(pass===id));$('teacher-view').setAttribute('aria-pressed',String(teacher));$('learner-view').setAttribute('aria-pressed',String(!teacher));$('echo-cue').hidden=pass!=='echo';$('pass-id').textContent=pass==='choral'?'Choral · S1, then S2':(pass==='echo'?'Echo':'Model')+' · S1';$('role').textContent=pass==='model'?'Teacher reads; learners follow.':pass==='choral'?'Teacher and learners read together.':phase?'Learners repeat the same S1.':'Teacher reads S1 first.';$('cue-text').textContent=pass==='choral'?'Read S1 and then S2 together, in the original order.':pass==='model'?'Read S1. Pause at its end after “door.”':phase?'Repeat: '+original[0]:'Read: '+original[0]+' Then cue the learners.';$('echo-cue').textContent=phase?'Return to teacher cue':'Cue learner repetition';}
function chooseQuestion(q){question=q;answer=null;$('meaning-question').textContent=q==='blue'?'Where did Mina put the blue box?':'Where did she carry the red box?';$('meaning-feedback').textContent='Not answered.';for(let i=0;i<3;i++)$('answer-'+i).setAttribute('aria-pressed','false');}
function checkMeaning(){if(answer===null){$('meaning-feedback').textContent='Not answered — choose an answer first.';return;}if(question==='blue'&&answer===0)$('meaning-feedback').textContent='Supported by S1: beside the door.';else if(question==='red'&&answer===1)$('meaning-feedback').textContent='Supported by S2: to the shelf. Placement on the shelf is not established.';else $('meaning-feedback').textContent=question==='red'?'Recheck S2: it says carried to the shelf, not placed on the shelf.':'Recheck S1: use the blue box’s location, not the red box’s destination.';}
for(const p of ['model','echo','choral'])$(p).addEventListener('click',()=>setPass(p));$('echo-cue').addEventListener('click',()=>{phase=1-phase;renderPass();});$('teacher-view').addEventListener('click',()=>{view='teacher';renderPass();});$('learner-view').addEventListener('click',()=>{view='learner';renderPass();});for(const q of ['blue','red'])$('question-'+q).addEventListener('click',()=>chooseQuestion(q));for(let i=0;i<3;i++)$('answer-'+i).addEventListener('click',()=>{answer=i;for(let j=0;j<3;j++)$('answer-'+j).setAttribute('aria-pressed',String(i===j));$('meaning-feedback').textContent='Answer changed — check again.';});$('check-meaning').addEventListener('click',checkMeaning);$('retry-meaning').addEventListener('click',()=>chooseQuestion(question));for(let i=0;i<5;i++)$('minutes-'+i).addEventListener('input',renderSchedule);$('restore-time').addEventListener('click',()=>{[3,4,5,5,3].forEach((v,i)=>$('minutes-'+i).value=String(v));renderSchedule();});$('learner-text').value='THE BOX PASSAGE\nS1: '+original[0]+'\nS2: '+original[1]+'\n\nWhere did Mina put the blue box? __________________\nWhere did she carry the red box? __________________\nWhich sentence supports each answer? __________________';$('select-learner').addEventListener('click',()=>{$('learner-text').focus();$('learner-text').select();$('copy-status').textContent='Learner text selected. Use your device’s copy command and paste manually.';});globalThis.app={original,setPass,renderPass,chooseQuestion,checkMeaning,schedule,get:()=>({pass,phase,view,question,answer})};renderPass();renderSchedule();</script></body></html>