Work through two reading stops and rotate the question, clarification, summary, and prediction leads

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>Crates and cases · reciprocal reading stops</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f0e6;color:#463f32;font:16px/1.55 system-ui,sans-serif}main{max-width:960px;margin:auto;padding:24px}h1{font-size:34px;line-height:1.16}h2{font-size:24px}h3{font-size:19px}.eyebrow{color:#847155;letter-spacing:.06em}.card{padding:20px;margin:18px 0;background:white;border:1px solid #d6ccb6;border-radius:6px}.text{border-left:6px solid #99734c}.text p{background:#faf6ef;padding:14px}.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}button,textarea{font:inherit;color:inherit}button{min-height:44px;padding:10px 14px;border:1px solid #947b51;border-radius:4px;background:white;cursor:pointer}button[aria-pressed=true]{background:#7f653b;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #a35b1c;outline-offset:3px}.leads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.leads p{background:#eef4e8;padding:12px;border-top:5px solid #8a9a68;margin:0}.leads strong{display:block}.model{background:#fff7e1;border-left:6px solid #bc9342}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:14px}.comparison>div{background:#f4f0e5;padding:16px}label{display:block;font-weight:650;margin:14px 0 6px}textarea{width:100%;min-width:0;max-width:100%;padding:10px;border:1px solid #a49579;border-radius:4px;min-height:95px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#7d521d}footer{margin:24px 0;color:#7a705c}[hidden]{display:none!important}@media(max-width:600px){main{padding:12px}h1{font-size:28px}.card{padding:14px}.leads{grid-template-columns:1fr 1fr}.comparison{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">COMPLETE ORIGINAL MUSEUM POP-UP TEXT · TWO READING STOPS</p><h1>Pass the lead, keep the earlier prediction</h1><section class="card text"><h2>Source text · unchanged</h2><p><strong>Section 1.</strong> The team labels three shipping crates A, B, and C. The display cases wait in the main hall. Instructions identifying the contents for each crate will arrive the next morning.</p><p><strong>Section 2.</strong> The instruction card assigns prints to crate A, models to B, and stands for supporting displays to C. The route through the east door is blocked for floor repair, so the team moves the crates to the side entrance.</p><p>A fictional teaching account. The first-stop prediction below models what could be proposed before reading Section 2; it is retained as originally worded.</p></section><div class="tabs" aria-label="Reading stop"><button id="stop1" type="button" aria-pressed="true">Stop 1 · Section 1</button><button id="stop2" type="button" aria-pressed="false">Stop 2 · Section 2</button></div><section class="card"><h2 id="stop-title">Stop 1 · teacher models, then learners lead</h2><p>Labels show who starts each part. Everyone can contribute. These are planned role labels, not actual participation records.</p><div id="leads" class="leads"></div><div class="tabs" aria-label="Reading strategy"><button id="question" type="button" aria-pressed="true">Question</button><button id="clarify" type="button" aria-pressed="false">Clarify</button><button id="summarize" type="button" aria-pressed="false">Summarize</button><button id="predict" type="button" aria-pressed="false">Predict / read further</button></div><section class="card model" aria-live="polite"><h3 id="lead"></h3><p><strong>Prompt:</strong> <span id="prompt"></span></p><p><strong>Teacher model:</strong> <span id="model"></span></p><p>Inspect this model separately from the group's blank responses below.</p></section></section><button id="compare" type="button" aria-expanded="false" aria-controls="comparison">Compare prediction with later text</button><section id="comparison" class="card" hidden><h2>Retain what the model actually predicted</h2><div class="comparison"><div><h3>Earlier prediction · Stop 1</h3><p>The next section may explain which items go in each crate because those instructions are expected next morning.</p><p>No route change was predicted in this model.</p></div><div><h3>Section 2 adds</h3><p>Prints → A, models → B, display stands → C.</p><p>It also introduces floor repair and a move to the side entrance. The prediction is supported in one respect, but did not anticipate everything.</p></div></div><p>There is no supplied Section 3. At the final stop, record a question for further reading rather than inventing the next event.</p></section><section class="card"><h2 id="blank-title">Group's temporary responses · Stop 1</h2><p id="note-scope">Five separate fields per stop. Switching stops preserves both sets in this open page.</p><div id="fields"></div><div class="tabs"><button id="build" type="button">Review this stop's responses</button><button id="reset" type="button">Reset both stops' notes</button></div><p id="status" role="status"></p><section id="confirm" hidden><h3>Clear all ten fields across both stops?</h3><div class="tabs"><button id="keep" type="button">Keep both stops</button><button id="clear" type="button">Clear both stops</button></div></section><section id="review" class="card copy" hidden><h3 id="review-title"></h3><div id="copy"></div><p>Group-supplied text only. No comprehension grade or actual participation is inferred.</p></section></section><footer>Temporary reading notes only, with no saved student work. Return to the text and discuss uncertainty before moving on.</footer></main><script>'use strict';const $=id=>document.getElementById(id),roles=['question','clarify','summarize','predict'],names=['Question lead','Clarification lead','Summary lead','Prediction lead'],models={1:[['What do we know about the crates, and what do we not know yet?','Three crates are labeled A, B and C. Their assigned contents are not stated yet.'],['Is a crate the same thing as a display case here?','No. Shipping crates and display cases are separate items in Section 1.'],['What is the main situation at this stop?','The labeled containers are ready, the cases are in the hall, and the team is waiting for contents instructions.'],['What might the next section explain, and what supports that prediction?','It may explain which items go in each crate because those instructions are expected next morning.']],2:[['Why did the route change?','The east door is blocked for floor repair. The crate assignments do not explain the move.'],['What does “stands” mean here?','Fixtures for supporting displays, assigned to crate C.'],['What two developments does Section 2 introduce?','The card assigns contents, and the blocked route moves the crates to the side entrance.'],['What question would you carry into further reading?','No next section is supplied. A possible question is: what additional instructions explain how the display stands will be used? This is a question, not a predicted event.']]};const fields=[['answer','Group question and answer with section evidence'],['clarification','Word or idea to clarify, and explanation'],['summary','Group summary of the main situation'],['prediction','Prediction and its reason, or final-stop further-reading question'],['later','Later text comparison with the earlier prediction']];let stop=1,role=0;const notes={1:Object.fromEntries(fields.map(([id])=>[id,''])),2:Object.fromEntries(fields.map(([id])=>[id,'']))};for(const[id,label]of fields){const l=document.createElement('label'),t=document.createElement('textarea');l.htmlFor=id;l.textContent=label;t.id=id;t.addEventListener('input',()=>{notes[stop][id]=t.value;$('review').hidden=true;$('status').textContent='Stop '+stop+' notes changed. Review again to use current wording.';});$('fields').append(l,t);}function model(){const row=models[stop][role];$('lead').textContent=names[role]+' · Learner '+String.fromCharCode(65+(role+stop-1)%4);$('prompt').textContent=row[0];$('model').textContent=row[1];for(const[i,id]of roles.entries())$(id).setAttribute('aria-pressed',String(i===role));}function render(){$('leads').replaceChildren();for(let i=0;i<4;i++){const p=document.createElement('p'),h=document.createElement('strong');h.textContent=names[i];p.append(h,document.createTextNode('Learner '+String.fromCharCode(65+(i+stop-1)%4)));$('leads').append(p);}$('stop-title').textContent=stop===1?'Stop 1 · teacher models, then learners lead':'Stop 2 · rotate each lead one place';$('blank-title').textContent="Group’s temporary responses · Stop "+stop;for(const[id]of fields)$(id).value=notes[stop][id];for(let n=1;n<=2;n++)$('stop'+n).setAttribute('aria-pressed',String(n===stop));$('review').hidden=true;$('status').textContent='Showing Stop '+stop+' temporary notes. Other-stop notes are retained.';model();}for(let n=1;n<=2;n++)$('stop'+n).addEventListener('click',()=>{stop=n;render();});for(const[i,id]of roles.entries())$(id).addEventListener('click',()=>{role=i;model();});render();$('compare').addEventListener('click',()=>{const open=$('comparison').hidden;$('comparison').hidden=!open;$('compare').setAttribute('aria-expanded',String(open));});$('build').addEventListener('click',()=>{const missing=['answer','summary'].filter(id=>!notes[stop][id].trim());$('review').hidden=true;if(missing.length){$('status').textContent='Complete for Stop '+stop+': '+missing.map(id=>id==='answer'?'group question/answer':'group summary').join(', ')+'.';return;}$('copy').replaceChildren();$('review-title').textContent='Supplied group responses · Stop '+stop;for(const[id,label]of fields){const h=document.createElement('h3'),p=document.createElement('p');h.textContent=label;p.textContent=notes[stop][id].trim()||'Not supplied.';$('copy').append(h,p);}$('review').hidden=false;$('status').textContent='Stop '+stop+' review assembled from supplied words.';});$('reset').addEventListener('click',()=>{$('confirm').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirm').hidden=true;$('reset').focus();});$('clear').addEventListener('click',()=>{for(const n of [1,2])for(const[id]of fields)notes[n][id]='';render();$('confirm').hidden=true;$('status').textContent='All ten fields across both stops cleared. Text, model prediction and rotation are unchanged.';$('answer').focus();});</script></body></html>