Compare beginning and ending evidence from a complete original story

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>Leena's backdrop · change and continuity</title><style>*{box-sizing:border-box}body{margin:0;background:#f4eee8;color:#443c38;font:16px/1.6 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:#85695a;letter-spacing:.06em}.card{padding:20px;margin:18px 0;background:#fff;border:1px solid #d7c8bd;border-radius:5px}.passage{border-left:6px solid #97704f}.passage p{padding:12px;background:#faf6ee}.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}button,textarea{font:inherit;color:inherit}button{min-height:44px;padding:10px 14px;background:white;border:1px solid #94775f;border-radius:4px;cursor:pointer}button[aria-pressed=true]{background:#805c43;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #b86e24;outline-offset:3px}.evidence{background:#f9f0df;border-left:5px solid #b68b43}.interpretation{background:#edf3ee;padding:14px}.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px}.compare>div{padding:16px;background:#f7f2eb}label{display:block;font-weight:650;margin:14px 0 6px}textarea{width:100%;min-width:0;max-width:100%;min-height:95px;padding:10px;border:1px solid #a18c7b;border-radius:4px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#80501d}footer{margin:24px 0;color:#7a6d61}[hidden]{display:none!important}@media(max-width:560px){main{padding:12px}h1{font-size:28px}.card{padding:14px}.compare{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">COMPLETE ORIGINAL THREE-SCENE STORY · LEENA AND OMAR</p><h1>A changed approach, a continuing concern</h1><section class="card passage"><h2>Read the whole passage</h2><p><strong>P1.</strong> Leena laid her carefully measured backdrop panels across the stage. When Omar offered to help, she pulled the design note toward her. “Someone else's changes will ruin it,” she said. “I'll finish it myself.” She checked that each edge lined up before fastening it.</p><p><strong>P2.</strong> A gust through the open side door tore one panel near the seam. Omar suggested folding a strip around the tear. Leena shook her head. “That won't hold.” He made a small sample with scrap material. She watched him pull gently on both ends; the folded repair stayed together.</p><p><strong>P3.</strong> Leena held the repaired panel up to the frame. “Can you test this side, Omar?” she asked. After they checked it, she wrote both names on the design note. She checked the edges again before fastening the panel.</p><p>This is a fictional teaching passage. All three scenes remain available while you compare the evidence.</p></section><section class="card evidence"><h2>Select the observable evidence</h2><div class="tabs"><button id="beginning" type="button" aria-pressed="true">Beginning · P1</button><button id="ending" type="button" aria-pressed="false">Ending · P3</button></div><p id="observation">P1: Leena pulls the design note toward her and says she will finish alone.</p><div class="interpretation"><h3>Interpretation of that evidence</h3><p id="inference">She guards sole control of this design. “Guards sole control” is an inference, not the narrator's exact phrase.</p></div></section><section class="card"><h2>Change or continuity?</h2><div class="tabs"><button id="change" type="button" aria-pressed="true">Change in collaboration</button><button id="continuity" type="button" aria-pressed="false">Continuing concern</button></div><h3 id="reading-title">From sole control to a tested contribution</h3><p id="reading">P1 refuses help. P2 shows the sample repair holding. P3 asks Omar to test and credits him. The demonstration plausibly changes how she approaches this collaboration.</p><p id="limit">The sequence suggests a cause; it does not directly state every thought or show that she trusts everyone in every situation.</p></section><div class="tabs"><button id="compare" type="button" aria-expanded="false" aria-controls="comparison">Compare the scope of the claim</button><button id="alternative" type="button" aria-expanded="false" aria-controls="alternative-view">Examine another reading</button></div><section id="comparison" class="card" hidden><h2>Make the claim checkable</h2><div class="compare"><div><h3>Unsupported breadth</h3><p>Leena becomes completely different and now trusts everyone.</p><p>The story supplies neither every relationship nor a permanent personality account.</p></div><div><h3>Bounded reading</h3><p>She accepts Omar's tested repair and credits his contribution in this task.</p><p>P2 and P3 give another reader evidence to inspect.</p></div></div></section><section id="alternative-view" class="card" hidden><h2>Possible alternative · practical necessity</h2><p>The damaged panel may leave Leena few practical options. Compare this reading with the sample demonstration in P2.</p><p>The sample supports that evidence matters to her. Adding both names supports recognition of Omar's contribution. Neither proves an offstage friendship or a permanent change in every relationship.</p><p>A reader can argue for another interpretation using the supplied passage; no automatic judgment is made here.</p></section><section class="card"><h2>Your separate evidence-based analysis</h2><div id="fields"></div><div class="tabs"><button id="build" type="button">Assemble my analysis</button><button id="reset" type="button">Reset typed work</button></div><p id="status" role="status"></p><section id="confirm" hidden><h3>Clear all six analysis fields?</h3><div class="tabs"><button id="keep" type="button">Keep my analysis</button><button id="clear" type="button">Clear typed analysis</button></div></section><section id="review" class="card copy" hidden><h3>Your supplied analysis</h3><div id="copy"></div><p>These are your words for review. The page has not graded or verified the interpretation.</p></section></section><footer>Temporary notes only; no saved learner record. Keep the claim beside the original words and actions before adding another trait.</footer></main><script>'use strict';const $=id=>document.getElementById(id);const evidence={beginning:['P1: Leena pulls the design note toward her and says she will finish alone.','She guards sole control of this design. “Guards sole control” is an inference, not the narrator’s exact phrase.'],ending:['P3: Leena asks Omar to test the repair and writes both names on the design note.','She accepts this specific contribution and gives Omar credit. This interprets the actions, without claiming universal trust.']};for(const[id,row]of Object.entries(evidence))$(id).addEventListener('click',()=>{for(const key of Object.keys(evidence))$(key).setAttribute('aria-pressed',String(key===id));$('observation').textContent=row[0];$('inference').textContent=row[1];});const readings={change:['From sole control to a tested contribution','P1 refuses help. P2 shows the sample repair holding. P3 asks Omar to test and credits him. The demonstration plausibly changes how she approaches this collaboration.','The sequence suggests a cause; it does not directly state every thought or show that she trusts everyone in every situation.'],continuity:['Careful, durable work still matters','Leena checks the edges in P1 and again in P3. In P2 she questions whether the repair will hold. Her concern for careful, durable work remains visible.','Accepting help can change while a concern for quality continues. The passage does not require a list of opposite traits.']};for(const[id,row]of Object.entries(readings))$(id).addEventListener('click',()=>{for(const key of Object.keys(readings))$(key).setAttribute('aria-pressed',String(key===id));for(const[i,target]of ['reading-title','reading','limit'].entries())$(target).textContent=row[i];});for(const[button,panel]of [['compare','comparison'],['alternative','alternative-view']])$(button).addEventListener('click',()=>{const open=$(panel).hidden;$(panel).hidden=!open;$(button).setAttribute('aria-expanded',String(open));});const fields=[['own-beginning','Beginning evidence with paragraph reference · required'],['own-ending','Ending evidence with paragraph reference · required'],['own-change','Change you infer · required'],['own-cause','Possible cause and its evidence'],['own-stable','Concern or trait that stays consistent'],['own-alternative','Alternative reading and what supports or limits it']];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='Analysis changed. Assemble again to review current wording.';});$('fields').append(l,t);}$('build').addEventListener('click',()=>{const missing=fields.slice(0,3).filter(([id])=>!$(id).value.trim());$('review').hidden=true;if(missing.length){$('status').textContent='Complete: '+missing.map(([id])=>({'own-beginning':'beginning evidence','own-ending':'ending evidence','own-change':'inferred change'})[id]).join(', ')+'.';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='Local analysis assembled from your 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='Six analysis fields cleared. Story and worked selections are unchanged.';$('own-beginning').focus();});</script></body></html>