Move four events into chronological order and inspect the before, after, and once clues

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>Museum setup · sequence from time signals</title><style>*{box-sizing:border-box}body{margin:0;background:#eef3ef;color:#374b3e;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{letter-spacing:.06em;color:#6c856e}.card{padding:20px;margin:18px 0;background:white;border:1px solid #c7d5c4;border-radius:6px}.source{border-left:6px solid #75946c}.source p{padding:12px;background:#f0f6ec}.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 #779368;border-radius:4px;background:white;cursor:pointer}button:disabled{opacity:.5;cursor:default}button:focus-visible,textarea:focus-visible{outline:3px solid #b77727;outline-offset:3px}.event{padding:16px;background:#eef5ed;border:1px solid #b6ccb2;margin:12px 0}.event .tabs{margin-bottom:0}.clues{background:#fff8e5;border-left:6px solid #be9641}.clues li{padding:12px 0}.event strong{font-size:19px}label{display:block;font-weight:650;margin:14px 0 6px}textarea{width:100%;max-width:100%;min-width:0;min-height:95px;padding:10px;border:1px solid #98ac8d;border-radius:4px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status,#sequence-status{font-weight:650;color:#80551d}footer{margin:24px 0;color:#6c8365}[hidden]{display:none!important}@media(max-width:560px){main{padding:12px}h1{font-size:28px}.card{padding:14px}}</style></head><body><main><p class="eyebrow">COMPLETE ORIGINAL MUSEUM-SETUP PASSAGE · TIME SIGNALS</p><h1>Sentence order is not always event order</h1><section class="card source"><h2>Read the three sentences</h2><p><strong>S1:</strong> The team hung the labels after the panels were fixed.</p><p><strong>S2:</strong> Before fixing the panels, the team numbered the backs.</p><p><strong>S3:</strong> Once all labels were hung, the guide checked the walkway.</p><p>No reason for numbering, label author or walkway-check result is supplied. The passage describes a process, not a conflict/climax/resolution.</p></section><section class="card"><h2>Move stable event cards into chronological order</h2><p>Initial practice follows early mentions: C, A, B, D. Each event keeps its identity while moving.</p><div id="events"></div><div class="tabs"><button id="check" type="button">Check sequence</button><button id="clues" type="button" aria-expanded="false" aria-controls="clues-view">Reveal signal-word explanations</button></div><p id="sequence-status" role="status"></p><h3>Inspect a practice-input problem</h3><div class="tabs"><button id="restore" type="button">Restore complete practice</button><button id="missing" type="button">Practice missing event B</button><button id="duplicate" type="button">Practice duplicate event A</button></div><p>Missing or duplicate cards must be corrected before judging their order. These controls change only the supplied exercise.</p></section><section id="clues-view" class="card clues" hidden><h2>Every arrow needs its clue</h2><ol><li><strong>A → B · S2:</strong> “Before fixing the panels” places numbering before fixing.</li><li><strong>B → C · S1:</strong> labels hung “after the panels were fixed” places fixing before hanging, although labels are mentioned first.</li><li><strong>C → D · S3:</strong> “Once all labels were hung” places the guide's check after label completion.</li></ol><p>Supported order: A → B → C → D. A check occurred; its result is not given. Chronology does not establish why each event happened.</p><p>Main idea: the passage describes the order of preparing the display and checking its walkway.</p></section><section class="card"><h2>Your separate sequence notes</h2><div id="fields"></div><div class="tabs"><button id="build" type="button">Build organizer review</button><button id="reset" type="button">Reset typed notes</button></div><p id="status" role="status"></p><section id="confirm" hidden><h3>Clear all four organizer fields?</h3><div class="tabs"><button id="keep" type="button">Keep my organizer</button><button id="clear" type="button">Clear typed notes</button></div></section><section id="review" class="card copy" hidden><h3>Your supplied organizer</h3><div id="copy"></div><p>No arbitrary source or event order has been assessed. Review each proposed arrow against the actual text.</p></section></section><footer>Temporary practice only; no saved learner work. Correct-order feedback covers these supplied events, not overall comprehension.</footer></main><script>'use strict';const $=id=>document.getElementById(id),texts={a:'Number the panel backs.',b:'Fix the panels.',c:'Hang the labels.',d:'Guide checks the walkway.'};let cards=['c','a','b','d'].map(id=>({id,key:id}));function render(){const focused=document.activeElement?.id;$('events').replaceChildren();for(const[card,index]of cards.map((card,index)=>[card,index])){const section=document.createElement('section');section.className='event';section.dataset.event=card.id;const h=document.createElement('strong');h.textContent=(index+1)+'. '+card.id.toUpperCase()+' · '+texts[card.id];const controls=document.createElement('div');controls.className='tabs';for(const[dir,delta]of [['up',-1],['down',1]]){const button=document.createElement('button');button.type='button';button.id=dir+'-'+card.key;button.textContent=dir==='up'?'Up':'Down';button.setAttribute('aria-label',button.textContent+' event '+card.id.toUpperCase()+(card.key.includes('copy')?' duplicate instance':''));button.disabled=index+delta<0||index+delta>=cards.length;button.addEventListener('click',()=>{[cards[index],cards[index+delta]]=[cards[index+delta],cards[index]];render();$('sequence-status').textContent='Arrangement changed. Check the explicit time relationships.';});controls.append(button);}section.append(h,controls);$('events').append(section);}if(focused&&$(focused)){const other=focused.startsWith('up-')?'down-'+focused.slice(3):focused.startsWith('down-')?'up-'+focused.slice(5):'';if(!$(focused).disabled)$(focused).focus();else if(other&&$(other)&&!$(other).disabled)$(other).focus();}}function practice(kind){cards=(kind==='missing'?['c','a','d']:kind==='duplicate'?['c','a','b','a','d']:['c','a','b','d']).map((id,i)=>({id,key:id==='a'&&i===3?'a-copy':id}));render();$('sequence-status').textContent=kind==='missing'?'Missing-event practice loaded. Check the input before ordering.':kind==='duplicate'?'Duplicate-event practice loaded. Check the input before ordering.':'Complete C,A,B,D practice restored.';}for(const id of ['restore','missing','duplicate'])$(id).addEventListener('click',()=>practice(id));render();$('check').addEventListener('click',()=>{const ids=cards.map(c=>c.id),missing=Object.keys(texts).filter(id=>!ids.includes(id)),duplicate=Object.keys(texts).filter(id=>ids.filter(x=>x===id).length>1);if(missing.length||duplicate.length){$('sequence-status').textContent='Correct the event set first: '+[missing.length?'missing '+missing.map(x=>x.toUpperCase()).join(', '):'',duplicate.length?'duplicate '+duplicate.map(x=>x.toUpperCase()).join(', '):''].filter(Boolean).join('; ')+'. Order has not been evaluated.';return;}const violations=[['a','b','S2: A before B'],['b','c','S1: B before C'],['c','d','S3: C before D']].filter(([a,b])=>ids.indexOf(a)>ids.indexOf(b));$('sequence-status').textContent=violations.length?'Revisit '+violations.map(x=>x[2]).join('; ')+'. Use the stated time signals.':'A → B → C → D matches all three supplied temporal relationships. This is not an overall comprehension grade.';});$('clues').addEventListener('click',()=>{const open=$('clues-view').hidden;$('clues-view').hidden=!open;$('clues').setAttribute('aria-expanded',String(open));});const fields=[['topic','Your source or topic · required'],['own-events','Stable event IDs and descriptions'],['own-clues','Each proposed relationship and exact textual clue'],['main-idea','Main idea and uncertain or implied steps']];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',()=>{$('review').hidden=true;$('status').textContent='Organizer notes changed. Build again to review current words.';});$('fields').append(l,t);}$('build').addEventListener('click',()=>{$('review').hidden=true;if(!$('topic').value.trim()){$('status').textContent='Complete: source or topic.';return;}$('copy').replaceChildren();for(const[id,title]of fields){const h=document.createElement('h3'),p=document.createElement('p');h.textContent=title;p.textContent=$(id).value.trim()||'Not supplied.';$('copy').append(h,p);}$('review').hidden=false;$('status').textContent='Organizer 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[id]of fields)$(id).value='';$('review').hidden=true;$('confirm').hidden=true;$('status').textContent='Four organizer fields cleared. Current exercise arrangement and source unchanged.';$('topic').focus();});</script></body></html>