Two passage-and-response entries, a plot-summary comparison, and a later reading that preserves the earlier interpretation

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>Dialectical journal · passage and response</title><style>*{box-sizing:border-box}body{margin:0;background:#f3efe8;color:#443b33;font:16px/1.65 system-ui,sans-serif}main{max-width:1040px;margin:auto;padding:28px}h1{font:700 clamp(30px,5vw,44px)/1.15 Georgia,serif;margin:10px 0 16px}h2{font-size:24px}h3{font-size:19px}section{padding:22px;background:#fffdf8;border:1px solid #c8bda9;margin:22px 0}.scene{border-left:5px solid #9b7e54;padding-left:18px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.record{padding:18px;background:#eee7da;border-top:5px solid #a78b63;margin:16px 0}.response{background:#eaf0df;border-color:#869960}.later{padding:18px;background:#f7edda;border-left:5px solid #a9844e}.controls{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}button,textarea,input{font:inherit}button{min-height:44px;padding:10px 14px;border:1px solid #948467;background:#fffdf8;color:inherit;border-radius:4px;cursor:pointer}button[aria-pressed=true]{background:#655239;color:#fff}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ad6b27;outline-offset:3px}label{display:block;font-weight:650;margin:14px 0 6px}textarea,input{display:block;width:100%;padding:10px;border:1px solid #9a8e76;color:inherit;background:#fff}textarea{min-height:115px;resize:vertical}input{min-height:44px}p,h1,h2,h3,label,button{overflow-wrap:break-word}footer{margin:26px 0}[hidden]{display:none!important}@media(max-width:600px){main{padding:16px}section{padding:16px}.grid{grid-template-columns:1fr}.controls button{flex:1 1 170px}}</style></head><body><main><h1>Put the passage beside your thinking.</h1><p>Original fictional practice scene; no published edition, byline or page numbers. P1–P3 are its paragraph locators. Sample responses are possible readings, not an answer key.</p>
<section aria-labelledby="scene-title"><h2 id="scene-title">Complete practice scene</h2><div class="scene" id="scene"><p id="p1"><strong>P1.</strong> Nora laid three chairs by the window. She left a fourth against the wall.</p><p id="p2"><strong>P2.</strong> Ivo said, "You said anyone could join." Nora looked at the empty place, then carried the fourth chair to the table.</p><p id="p3"><strong>P3.</strong> When rain tapped the glass, she pushed all four chairs closer.</p></div></section>
<section><h2>Worked passage-and-response entries</h2><div class="controls" role="group" aria-label="Worked journal entry"><button id="J1" type="button" aria-pressed="true">J1</button><button id="J2" type="button" aria-pressed="false">J2</button></div><h3 id="entry-title"></h3><div class="grid"><article class="record"><h3>Exact passage</h3><p id="entry-location"></p><p id="excerpt"></p></article><article class="record response"><h3>Reader's commentary · one possible reading</h3><p id="commentary"></p></article></div><div id="comparison" hidden><div class="controls" role="group" aria-label="J2 response comparison"><button id="plot" type="button" aria-pressed="false">Plot-only response</button><button id="analytical" type="button" aria-pressed="true">Analytical response</button></div><p id="response-note">The analytical response connects the movement to Ivo's preceding dialogue, while leaving Nora's reason unstated.</p></div><p><button id="later" type="button" aria-expanded="false" aria-controls="later-reading">Later reading</button></p><div id="later-reading" class="later" hidden><h3>Revisit J1 · original response retained above</h3><p id="later-excerpt">P3: "When rain tapped the glass, she pushed all four chairs closer."</p><p id="later-note">The chairs are now described as a group, so I would qualify my initial exclusion reading. P2 and P3 show changed placement, but neither explicitly states Nora's intention.</p><p>This later note qualifies the earlier possible reading; it does not replace J1 or settle Nora's motive.</p></div><p>Copied wording and the reader's commentary stay distinct. Use actual assignment length/count rules and real locators for your own source.</p></section>
<section><h2>Build your own blank entry</h2><p>Supply your own excerpt and thinking. This practice copy checks only whether three fields are present; it does not write or assess your interpretation.</p><label for="own-excerpt">Exact excerpt</label><textarea id="own-excerpt"></textarea><label for="own-location">Location</label><input id="own-location"><label for="own-response">My response</label><textarea id="own-response" aria-describedby="response-prompt"></textarea><p id="response-prompt">Which word or detail prompted your question or interpretation?</p><div class="controls"><button id="build" type="button">Build entry</button><button id="reset" type="button">Clear my entry</button></div><p id="status" role="status">Three fields start blank. Worked views preserve your typing.</p><div id="built" hidden><h3>Your reading copy · supplied text only</h3><div class="grid"><article class="record"><h3>Exact excerpt and location</h3><p id="built-location"></p><p id="built-excerpt"></p></article><article class="record response"><h3>My response</h3><p id="built-response"></p></article></div></div><div id="confirmation" hidden><p>Clear all three own-entry fields and its built copy? The source and worked entries stay unchanged.</p><div class="controls"><button id="clear" type="button">Clear typed entry</button><button id="keep" type="button">Keep typed entry</button></div></div></section><footer>Work lasts only in this open page and disappears on reload. Keep actual entries in your course's required notebook, document or classroom system. No interpretation score, saved student record, generated assignment answer, submission, network or storage is provided.</footer></main><script>(()=>{'use strict';const $=id=>document.getElementById(id);const j1='The fourth chair is placed apart from the other three. I initially read that separation as possible exclusion, but the text does not say why Nora leaves it there. Why is the fourth chair apart?';const j2='Ivo\'s words "anyone could join" are followed by Nora moving the fourth chair. The sequence makes me wonder whether she is changing who can join, although the passage does not name her reason.';let entry='J1',plot=false;function render(){for(const id of ['J1','J2'])$(id).setAttribute('aria-pressed',String(id===entry));$('entry-title').textContent=entry==='J1'?'J1 · A chair set apart':'J2 · A change after Ivo speaks';$('entry-location').textContent=entry==='J1'?'Location: P1':'Location: P2';$('excerpt').textContent=entry==='J1'?'She left a fourth against the wall.':'Nora looked at the empty place, then carried the fourth chair to the table.';$('commentary').textContent=entry==='J1'?j1:plot?'She moved a chair.':j2;$('comparison').hidden=entry!=='J2';$('plot').setAttribute('aria-pressed',String(plot));$('analytical').setAttribute('aria-pressed',String(!plot));$('response-note').textContent=plot?'This plot note recounts the event. It does not connect the movement to the preceding dialogue.':'The analytical response connects the movement to Ivo\'s preceding dialogue, while leaving Nora\'s reason unstated.';}for(const id of ['J1','J2'])$(id).addEventListener('click',()=>{entry=id;$('later-reading').hidden=true;$('later').setAttribute('aria-expanded','false');render();});$('plot').addEventListener('click',()=>{plot=true;render();});$('analytical').addEventListener('click',()=>{plot=false;render();});$('later').addEventListener('click',()=>{const open=$('later-reading').hidden;entry='J1';render();$('later-reading').hidden=!open;$('later').setAttribute('aria-expanded',String(open));});const fields=['own-excerpt','own-location','own-response'];function clearBuilt(){$('built').hidden=true;for(const id of ['built-location','built-excerpt','built-response'])$(id).textContent='';}for(const id of fields)$(id).addEventListener('input',()=>{clearBuilt();$('status').textContent='Entry changed. Previous built output cleared; choose Build entry to arrange the current text.';});$('build').addEventListener('click',()=>{const missing=fields.filter(id=>!$(id).value.trim()).map(id=>({'own-excerpt':'Exact excerpt','own-location':'Location','own-response':'My response'}[id]));if(missing.length){clearBuilt();$('status').textContent='Still needed: '+missing.join('; ')+'. Completeness only; no interpretation was assessed.';return;}$('built-location').textContent=$('own-location').value.trim();$('built-excerpt').textContent=$('own-excerpt').value.trim();$('built-response').textContent=$('own-response').value.trim();$('built').hidden=false;$('status').textContent='Three fields are present. Check quotation, location and your response yourself; no interpretation was assessed.';});$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('status').textContent='Kept all three fields and the current built-output state.';$('reset').focus();});$('clear').addEventListener('click',()=>{for(const id of fields)$(id).value='';clearBuilt();$('confirmation').hidden=true;$('status').textContent='All three entry fields and the built copy were cleared. Source and worked views are unchanged.';$('own-excerpt').focus();});render();})();</script></body></html>