Read-aloud • pause, predict, revisit — Mark an exact pause, preserve a listener's prediction and its then-available reason, reveal the continuation and distinguish supported,…

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>Read-aloud • pause, predict, revisit</title><style>*{box-sizing:border-box}body{margin:0;background:var(--bg,#eef3f6);color:#172a39;font:16px/1.5 system-ui,sans-serif}main{max-width:1200px;margin:auto;padding:28px}h1{font-size:clamp(27px,4vw,42px);line-height:1.12;margin:8px 0 12px;letter-spacing:-.035em}h2{font-size:23px;line-height:1.2;margin:0 0 18px}h3{font-size:17px;margin:14px 0 8px}p{margin:8px 0 16px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.15em;font-weight:800;color:var(--accent,#176b71)}.lead{max-width:75ch;color:#405568}.panel{background:#fff;border:1px solid #cdd9e1;border-radius:14px;padding:24px;margin:18px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.wide{grid-template-columns:1.6fr 1fr}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.metric{border-left:4px solid var(--accent,#176b71);background:#f4f8fa;padding:18px}.big{display:block;font-size:36px;font-weight:800;line-height:1.2}.muted,small{color:#536879;font-size:14px}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}button{background:var(--accent,#176b71);color:white;border:2px solid transparent;border-radius:8px;padding:10px 16px;min-height:44px;cursor:pointer;font:inherit;font-weight:650}button.secondary{background:#e8eff4;color:#172a39}button:disabled{opacity:.48;cursor:default}button[aria-pressed=true]{outline:3px solid #172a39;outline-offset:2px}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #de7616;outline-offset:3px}label{display:block;font-weight:650;margin:12px 0 6px}input,select,textarea{font:inherit;color:inherit;border:1px solid #8b9eae;border-radius:6px;background:white;padding:10px;width:100%;min-height:44px}textarea{resize:vertical;min-height:110px}input[type=checkbox]{width:22px;min-height:22px;vertical-align:middle}table{border-collapse:collapse;width:100%;font-size:14px}th{text-align:left;background:#eff4f7;color:#3d5261}th,td{padding:12px;border-bottom:1px solid #dce5eb;vertical-align:top}.scroll{overflow-x:auto}caption{text-align:left;margin-bottom:12px;font-weight:700}.notice{background:#eef5f9;border-left:4px solid #628ba1;padding:14px;margin:14px 0}.error{color:#9c2924;font-weight:650}.pill{display:inline-block;border-radius:30px;padding:4px 10px;background:#e5f3ee;color:#17614f;font-size:13px;font-weight:750}.draft{white-space:pre-wrap;font:17px/1.65 Georgia,serif}.rule{display:block;width:100%;text-align:left;margin:10px 0}.rule strong{font-size:26px}details{margin:18px 0}summary{cursor:pointer;font-weight:700;padding:12px;background:#e9eff3;border-radius:6px;min-height:44px}footer{margin:30px 0;color:#536879;font-size:14px}ol,ul{padding-left:23px}.time-input{max-width:90px}.section-no{font-size:52px;color:#b5c8d5;font-weight:800;line-height:1}.tag{font-weight:700;color:var(--accent,#176b71)}[hidden]{display:none!important}@media(max-width:760px){main{padding:18px}.grid,.wide{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr}.panel{padding:18px}.big{font-size:30px}th,td{padding:9px}}:root{--accent:#806141;--bg:#f7f2e9}.story{background:#fffdf7;border:1px solid #d9cbb6}.story-line{font:clamp(21px,3vw,29px)/1.6 Georgia,serif;max-width:60ch}.pause{font-size:14px;font-weight:750;border-top:2px dashed #bd9a68;border-bottom:2px dashed #bd9a68;padding:14px 0;margin:20px 0;color:#805f35}</style></head><body><main>
<span class="eyebrow">Original 25-minute lesson / teacher-operated script</span><h1>Keep the first prediction.</h1><p class="lead">Pause after S2, preserve the reason, then compare it with later evidence.</p><section class="panel story"><span class="pill" id="story-state">Pause after S2</span><p id="s1" class="story-line">S1: Ari carried a paper kite to the park.</p><p id="s2" class="story-line">S2: The wind grew stronger, and Ari held the string tightly.</p><div class="pause">PAUSE / What might happen next? Which words gave you that idea?</div><div id="continuation" hidden><p id="s3" class="story-line">S3: Rain began before Ari could lift the kite.</p><p id="s4" class="story-line">S4: Ari packed the kite and walked home.</p></div><div class="row"><button type="button" id="reveal">Preserve log and reveal S3–S4</button><button type="button" id="new-log" class="secondary">Start a new blank log</button></div><p id="reveal-error" class="error" role="status"></p></section>
<div class="grid"><section class="panel"><h2>Then / before the reveal</h2><label for="prediction">Initial prediction</label><textarea id="prediction"></textarea><label for="clue">Then-available word or sentence clue</label><input id="clue" type="text" value=""><label for="reason">Initial reason</label><textarea id="reason"></textarea><p id="preserve-state" class="muted">Only S1–S2 are available. Actual responses start blank.</p></section><section class="panel"><h2>Now / later evidence</h2><p id="later-lock" class="notice">Reveal the continuation after recording the initial prediction, clue and reason.</p><div id="later-fields" hidden><label for="later-evidence">Later sentence evidence</label><textarea id="later-evidence"></textarea><label for="comparison">Your comparison status</label><select id="comparison"><option value="">Choose an answer</option><option value="supported">Supported</option><option value="contradicted">Contradicted</option><option value="unestablished">Unestablished</option><option value="not-confirmed">Not confirmed</option></select><label for="changed-thinking">Changed thinking / explanation</label><textarea id="changed-thinking"></textarea><label for="retell">Retell: separate story facts from the prediction</label><textarea id="retell"></textarea><label for="exit">Which later sentence changed your thinking, and which earlier clue supported the original prediction?</label><textarea id="exit"></textarea></div></section></div>
<section class="panel"><h2>Lesson sequence</h2><div class="scroll"><table><caption>Editable planned minutes</caption><thead><tr><th>Activity</th><th>Minutes</th><th>Elapsed</th></tr></thead><tbody><tr><td>Purpose and listening focus</td><td><label class="muted" for="t-0">Purpose and listening focus minutes</label><input class="time-input" id="t-0" type="number" min="1" max="120" value="3"></td><td id="t-range-0"></td></tr><tr><td>Read S1–S2 / pause</td><td><label class="muted" for="t-1">Read S1–S2 / pause minutes</label><input class="time-input" id="t-1" type="number" min="1" max="120" value="5"></td><td id="t-range-1"></td></tr><tr><td>Partner predictions and reasons</td><td><label class="muted" for="t-2">Partner predictions and reasons minutes</label><input class="time-input" id="t-2" type="number" min="1" max="120" value="6"></td><td id="t-range-2"></td></tr><tr><td>Reveal S3–S4 / compare</td><td><label class="muted" for="t-3">Reveal S3–S4 / compare minutes</label><input class="time-input" id="t-3" type="number" min="1" max="120" value="5"></td><td id="t-range-3"></td></tr><tr><td>Retell fact versus prediction</td><td><label class="muted" for="t-4">Retell fact versus prediction minutes</label><input class="time-input" id="t-4" type="number" min="1" max="120" value="4"></td><td id="t-range-4"></td></tr><tr><td>Exit response</td><td><label class="muted" for="t-5">Exit response minutes</label><input class="time-input" id="t-5" type="number" min="1" max="120" value="2"></td><td id="t-range-5"></td></tr></tbody></table></div><p id="t-total" class="tag" aria-live="polite"></p><button type="button" id="t-restore" class="secondary">Restore original timing</button><label for="log-text">Script and before/after record for teacher review</label><textarea id="log-text" readonly></textarea><button type="button" id="select-log-text" class="secondary">Select text</button><p id="log-text-status" class="muted">Select the text, then use your device’s copy command. Nothing is saved.</p></section>
<details id="teacher-key" hidden><summary>Teacher comparison key — only after the reveal</summary><p>P1 “Ari will fly the kite” is plausible from kite, park and wind in S1–S2, not fact. S3 places rain before lifting; S4 describes packing and walking home, so flight in this sequence is not confirmed.</p><p>“Ari will go home” is supported by S4. “Ari will stay at the park at the story’s end” is contradicted by S4. “The kite will tear” remains unestablished: neither tear nor no-tear is stated. Never add rain as an earlier clue.</p><div class="row"><button type="button" id="example-home" class="secondary">Compare: go home</button><button type="button" id="example-stay" class="secondary">Compare: stay at the end</button><button type="button" id="example-tear" class="secondary">Compare: kite tears</button></div><p id="example-feedback" class="notice"></p></details><footer>Original story; no source curriculum text is reproduced. Notes are local and unsaved; prose is not graded. Keep actual classroom records in the approved school workflow.</footer></main><script>const $=id=>document.getElementById(id);const on=(id,fn)=>$(id).addEventListener('click',fn);const text=(id,value)=>$(id).textContent=value;const bind=(id,fn,event='input')=>$(id).addEventListener(event,fn);const selectText=id=>{if(!$(id).value){text(id+'-status','Complete the required fields before selecting text.');return;}$(id).focus();$(id).select();text(id+'-status','Text selected. Use your device’s copy command; nothing has been sent or saved.');};
const NL=String.fromCharCode(10);let revealed=false,initial=null;const initialIDs=['prediction','clue','reason'],laterIDs=['later-evidence','comparison','changed-thinking','retell','exit'];function log(){const s=schedule();$('log-text').value=s?['Read-aloud lesson — '+s.total+' minutes',...timeNames.map((n,i)=>s.blocks[i].start+'–'+s.blocks[i].end+' min: '+n),'S1: Ari carried a paper kite to the park.','S2: The wind grew stronger, and Ari held the string tightly.','PAUSE after S2.','Initial prediction: '+(initial?.prediction||$('prediction').value||'[not recorded]'),'Then-available clue: '+(initial?.clue||$('clue').value||'[not recorded]'),'Initial reason: '+(initial?.reason||$('reason').value||'[not recorded]'),...(revealed?['S3: Rain began before Ari could lift the kite.','S4: Ari packed the kite and walked home.',...laterIDs.map(k=>k+': '+($(k).value||'[not recorded]'))]:['Continuation not revealed; no later evidence available in this view.'])].join(NL):'';}function reveal(){const missing=initialIDs.filter(k=>!$(k).value.trim());if(missing.length){text('reveal-error','Record the initial prediction, then-available clue and reason before revealing.');return;}if(!revealed){initial=Object.fromEntries(initialIDs.map(k=>[k,$(k).value]));revealed=true;}initialIDs.forEach(k=>$(k).readOnly=true);$('continuation').hidden=false;$('later-fields').hidden=false;$('later-lock').hidden=true;$('teacher-key').hidden=false;$('reveal').disabled=true;text('reveal-error','');text('story-state','Continuation revealed / original log preserved');text('preserve-state','Initial prediction, clue and reason preserved for this local review. Start a new blank log to begin again.');log();}on('reveal',reveal);on('new-log',()=>{revealed=false;initial=null;[...initialIDs,...laterIDs].forEach(k=>$(k).value='');initialIDs.forEach(k=>$(k).readOnly=false);$('continuation').hidden=true;$('later-fields').hidden=true;$('later-lock').hidden=false;$('teacher-key').hidden=true;$('reveal').disabled=false;text('story-state','Pause after S2');text('preserve-state','Only S1–S2 are available. Actual responses start blank.');text('reveal-error','');text('example-feedback','');log();});initialIDs.forEach(k=>bind(k,()=>{text('reveal-error','');log();}));laterIDs.forEach(k=>bind(k,log,k==='comparison'?'change':'input'));on('example-home',()=>text('example-feedback','Supported by S4: Ari walked home. Keep the original pre-rain reason; do not rewrite it after reveal.'));on('example-stay',()=>text('example-feedback','Contradicted for the specified story ending: S4 says Ari walked home.'));on('example-tear',()=>text('example-feedback','Unestablished: S3–S4 state neither a tear nor an untorn kite. Packing alone does not settle it.'));on('select-log-text',()=>selectText('log-text'));const timeNames=["Purpose and listening focus","Read S1–S2 / pause","Partner predictions and reasons","Reveal S3–S4 / compare","Retell fact versus prediction","Exit response"],timeDefaults=[3,5,6,5,4,2];function schedule(){let total=0;const blocks=[];for(let i=0;i<timeDefaults.length;i++){const v=$('t-'+i).value;if(!/^\d+$/.test(v)||+v<1||+v>120)return null;blocks.push({start:total,end:total+(+v)});total+=+v;}return {total,blocks};}function updateTiming(){const s=schedule();text('t-total',s?s.total+' minutes':'Timing incomplete');timeDefaults.forEach((_,i)=>text('t-range-'+i,s?s.blocks[i].start+'–'+s.blocks[i].end+' min':'—'));log();}timeDefaults.forEach((_,i)=>bind('t-'+i,updateTiming));on('t-restore',()=>{timeDefaults.forEach((v,i)=>$('t-'+i).value=String(v));updateTiming();});updateTiming();globalThis.app={schedule,reveal,get:()=>({revealed,initial})};</script></body></html>