Compare a personal story alone with a response that returns to an exact passage detail

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>Mara's lamp · return the response to the text</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f0e7;color:#493e36;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{letter-spacing:.06em;color:#86715f}.card{padding:20px;margin:18px 0;background:#fff;border:1px solid #d7c9b5;border-radius:6px}.passage{border-left:6px solid #9c805a}.passage p{background:#faf5ea;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 #a18a66;border-radius:4px;background:white;cursor:pointer}button[aria-pressed=true]{background:#82613d;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #ad5e1d;outline-offset:3px}.model{border-left:6px solid #738f79;background:#f0f6ee}.part{border-left:6px solid #bc9645;background:#fff8e7}label{display:block;font-weight:650;margin:14px 0 6px}textarea{width:100%;max-width:100%;min-width:0;min-height:100px;padding:10px;border:1px solid #ae9a7b;border-radius:4px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#80551e}footer{margin:24px 0;color:#81715e}[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 SCENE · FICTIONAL READER RESPONSES</p><h1>Bring your connection back to the passage</h1><section class="card passage"><h2>Source passage</h2><p><strong>P1:</strong> Mara left the painted gate unlatched for her brother's arrival.</p><p><strong>P2:</strong> At dusk she closed it, but set a small lamp beside the path.</p><p><strong>P3:</strong> Her brother did not arrive that night.</p><p>Mara's full motive and later feelings are not stated. Nothing explains why her brother stayed away.</p></section><section class="card model"><h2>Two defensible reader reactions</h2><div class="tabs"><button id="model" type="button" aria-pressed="true">R1 · connection to waiting</button><button id="alternate" type="button" aria-pressed="false">R2 · disappointed reaction</button></div><h3 id="model-title">R1 · invented reader and cousin memory</h3><p id="response">The phrase “set a small lamp beside the path” in P2 makes the waiting feel unfinished to me. It reminds me of waiting for a cousin before a celebration, when I kept checking whether someone had arrived. That memory makes me notice the contrast between Mara closing the gate and leaving a light outside. I read the lamp as a possible sign that she still hopes her brother might come, although the passage does not tell us her motive. I wonder what she would do with the lamp the next morning.</p><p>The model reader's memory is fictional, not a learner's experience to copy as their own or a fact about Mara. A connection can instead concern another text or a changed reading expectation.</p></section><section class="card part"><h2>Inspect R1's connection to the text</h2><div class="tabs"><button id="detail" type="button" aria-pressed="true">Text detail</button><button id="connection" type="button" aria-pressed="false">Reader connection</button><button id="effect" type="button" aria-pressed="false">Effect on reading</button><button id="interpretation" type="button" aria-pressed="false">Return and question</button></div><h3 id="part-title">Exact passage detail · P2</h3><p id="part">“set a small lamp beside the path”</p><p id="limit">This phrase is in the source. The reader's interpretation of it remains a separate claim.</p></section><button id="compare" type="button" aria-expanded="false" aria-controls="comparison">Compare memory alone with a return to the text</button><section id="comparison" class="card" hidden><h2>Make the connection do reading work</h2><p><strong>Memory alone:</strong> “I once waited for a cousin.”</p><p><strong>Return:</strong> that waiting memory makes R1 notice the closed-gate / lit-path contrast in P2 and consider the lamp as a possible sign of continuing hope.</p><p>The full response explains why the memory affects the reading. It does not establish that Mara recalls a cousin or shares R1's feeling.</p></section><section class="card"><h2>Your own detail, reaction and question</h2><p>Use a personal memory only if you want to. A reaction to the text or another reading connection is equally available.</p><div id="fields"></div><div class="tabs"><button id="build" type="button">Preview my response</button><button id="reset" type="button">Reset typed work</button></div><p id="status" role="status"></p><section id="confirm" hidden><h3>Clear all four response fields?</h3><div class="tabs"><button id="keep" type="button">Keep my response</button><button id="clear" type="button">Clear typed response</button></div></section><section id="review" class="card copy" hidden><h3>Your supplied reading response</h3><p id="own-response"></p><p>Presence check only. This page has not judged whether the interpretation is correct.</p></section></section><footer>Temporary learner notes only; no literature grade or saved student work. Different supported reactions can remain available for discussion.</footer></main><script>'use strict';const $=id=>document.getElementById(id),responses={model:['R1 · invented reader and cousin memory','The phrase “set a small lamp beside the path” in P2 makes the waiting feel unfinished to me. It reminds me of waiting for a cousin before a celebration, when I kept checking whether someone had arrived. That memory makes me notice the contrast between Mara closing the gate and leaving a light outside. I read the lamp as a possible sign that she still hopes her brother might come, although the passage does not tell us her motive. I wonder what she would do with the lamp the next morning.'],alternate:['R2 · a different supported reaction','“Her brother did not arrive that night” makes me feel disappointed because the earlier details prepared me to expect a meeting. The lamp now seems like part of the waiting that went unanswered. I still do not know why the brother stayed away.']};for(const[id,row]of Object.entries(responses))$(id).addEventListener('click',()=>{for(const key of Object.keys(responses))$(key).setAttribute('aria-pressed',String(id===key));$('model-title').textContent=row[0];$('response').textContent=row[1];});const parts={detail:['Exact passage detail · P2','“set a small lamp beside the path”','This phrase is in the source. The reader’s interpretation of it remains a separate claim.'],connection:['Reader connection · fictional R1','Waiting for a cousin before a celebration and checking whether someone had arrived.','An invented example of R1’s memory, not Mara’s history or a required learner memory.'],effect:['Effect on the reading','The memory makes R1 notice the contrast between Mara closing the gate and leaving a light outside.','A personal story earns its place by explaining attention to this exact contrast.'],interpretation:['Qualified return and open question','R1 reads the lamp as a possible sign of continuing hope and wonders what happens to it the next morning.','Mara’s motive is not stated. No next-morning event or reason for the absence is supplied.']};for(const[id,row]of Object.entries(parts))$(id).addEventListener('click',()=>{for(const key of Object.keys(parts))$(key).setAttribute('aria-pressed',String(id===key));for(const[i,target]of ['part-title','part','limit'].entries())$(target).textContent=row[i];});$('compare').addEventListener('click',()=>{const open=$('comparison').hidden;$('comparison').hidden=!open;$('compare').setAttribute('aria-expanded',String(open));});const fields=[['own-detail','Exact detail and paragraph reference'],['own-connection','Your connection or reaction'],['own-effect','How it affects your reading and returns to the text'],['question','An open question']];for(const[id,label]of fields){const l=document.createElement('label'),t=document.createElement('textarea');l.htmlFor=id;l.textContent=label+' · required';t.id=id;t.addEventListener('input',()=>{$('review').hidden=true;$('status').textContent='Response changed. Preview again to review current words.';});$('fields').append(l,t);}$('build').addEventListener('click',()=>{const missing=fields.filter(([id])=>!$(id).value.trim());$('review').hidden=true;if(missing.length){$('status').textContent='Complete: '+missing.map(([id])=>({'own-detail':'text detail/reference','own-connection':'connection or reaction','own-effect':'effect on reading',question:'open question'})[id]).join(', ')+'.';return;}$('own-response').textContent=fields.map(([id])=>$(id).value.trim()).join(' ');$('review').hidden=false;$('status').textContent='Your supplied response is ready for review beside the source.';});$('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 response fields cleared. Original source and model selection unchanged.';$('own-detail').focus();});</script></body></html>