A prior belief, a supported answer and a question the passage leaves open

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>KWL chart: what the text leaves open</title><style>
*{box-sizing:border-box}body{margin:0;background:#faf5ec;color:#382f24;font:17px/1.55 system-ui,sans-serif}main{max-width:1020px;margin:auto;padding:26px 22px 40px}h1{font-size:clamp(29px,5vw,43px);line-height:1.12;margin:10px 0 16px;max-width:21ch}h2{font-size:21px;margin:0 0 10px}p{margin:8px 0 16px}.eyebrow{color:#87612d;font-size:14px;font-weight:750;letter-spacing:.07em}.intro{max-width:70ch}.source{background:#fff;border:1px solid #d8c6a7;border-radius:8px;padding:18px 20px;margin:18px 0}.source p{margin-bottom:10px}.sid{font-weight:800;color:#815a27;display:inline-block;min-width:2.2em}.toolbar{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0}button{font:inherit;border:1px solid #855821;background:#fff;color:#52380f;border-radius:6px;padding:10px 14px;cursor:pointer}button[aria-pressed=true],.primary{background:#744d1b;color:#fff}button:focus-visible,textarea:focus-visible{outline:3px solid #165c93;outline-offset:3px}.chart{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:12px}.column{background:white;border:1px solid #dac8aa;border-radius:8px;padding:18px;min-width:0}.column h2{border-bottom:3px solid #c29d63;padding-bottom:10px}.column.learned h2{border-color:#5b8165}.entry{margin:14px 0;padding-bottom:14px;border-bottom:1px solid #e7dfd2}.entry:last-child{border-bottom:0;padding-bottom:0}.entry p{margin:7px 0}.label{font-size:14px;text-transform:uppercase;letter-spacing:.04em;font-weight:750;color:#66563e}.changed{border-left:4px solid #5b8165;padding-left:12px}.open{background:#fff0d3;border:1px solid #c5994c;border-radius:5px;padding:12px}.before-note{color:#786345;font-style:italic}.reason{background:#e8f0e9;border-radius:7px;padding:16px;margin-top:14px}.writing{background:#fff;border-top:4px solid #9a7137;padding:20px;margin-top:24px}label{display:block;font-weight:700;margin-bottom:8px}textarea{font:inherit;width:100%;padding:12px;color:inherit;border:1px solid #aa9372;border-radius:5px;min-height:110px;resize:vertical}.hint{font-size:15px;color:#6a5a45}.status{font-weight:650;min-height:1.6em}.confirm{background:#fff0d3;padding:14px;border:1px solid #b78b44;border-radius:6px}[hidden]{display:none!important}footer{font-size:14px;color:#6a5a45;margin-top:22px}@media(max-width:650px){main{padding:20px 14px 30px}.chart{grid-template-columns:1fr}.column{padding:16px}.toolbar button{flex-grow:1}}
</style></head><body><main><div class="eyebrow">READ · REVISE · KEEP THE QUESTION</div><h1>The passage gives a location. Does it give a limit?</h1><p class="intro">Follow a belief and two questions through a KWL chart. The seed library, passage and worked responses are fictional.</p><section class="source"><h2>Source passage</h2><p><span class="sid">S1</span>The seed library keeps labeled seed packets on a shelf beside the entrance.</p><p><span class="sid">S2</span>A visitor writes the packet name and date in the checkout notebook.</p><p><span class="sid">S3</span>The notice asks visitors to close the packet box after choosing.</p></section><div class="toolbar" aria-label="Reading stage"><button type="button" id="before" aria-pressed="true">Before reading</button><button type="button" id="after" aria-pressed="false">After reading</button></div><section class="chart" aria-label="Three-part KWL chart"><div class="column"><h2>K · Know or think</h2><div class="entry"><div class="label">Prior belief</div><p>I think seed packets are kept behind the desk.</p></div><div class="entry"><div class="label">Not yet known</div><p>I do not know the packet limit.</p></div></div><div class="column"><h2>W · Want to know</h2><div class="entry"><p>Where are the packets kept?</p></div><div class="entry"><p>How many packets may a visitor take?</p></div></div><div class="column learned"><h2>L · Learned</h2><p id="before-note" class="before-note">Leave this column blank until you have read the passage.</p><div id="after-entries" hidden><div class="entry changed"><div class="label">Belief revised · S1</div><p>The packets are on a shelf beside the entrance.</p><p class="hint">The earlier “behind the desk” belief stays visible in K.</p></div><div class="open"><strong>Still open</strong><p>The passage does not state how many packets one visitor may take.</p></div></div></div></section><div class="reason" id="reason" hidden><h2>Why the question stays open</h2><p>S1 gives a location. S2 gives a record-keeping step. S3 asks for the box to be closed. None states a packet limit. No stated limit does not mean unlimited permission.</p><button type="button" id="evidence" aria-expanded="false" aria-controls="evidence-note">Inspect the location evidence</button><p id="evidence-note" hidden><strong>S1:</strong> “on a shelf beside the entrance” supports the revised location. It says nothing about a packet limit.</p></div><section class="writing"><h2>Your response</h2><label for="response">Write a learned entry with its sentence ID, or keep a question open.</label><textarea id="response" placeholder="The text says… (S__). I still need to find out…"></textarea><p class="hint">A teacher or partner reviews your wording. Switching reading stages preserves this response.</p><p id="status" class="status" role="status">Before reading: the Learned column is blank.</p><button type="button" id="reset">Reset response</button><div id="confirm" class="confirm" hidden><p>Clear your writing and return to Before reading?</p><div class="toolbar"><button type="button" id="clear" class="primary">Clear response</button><button type="button" id="keep">Keep response</button></div></div></section><footer>Practice stays in the current page session. No student answers are sent or submitted.</footer></main><script>
'use strict';const $=id=>document.getElementById(id);
function stage(after){$('before-note').hidden=after;$('after-entries').hidden=!after;$('reason').hidden=!after;$('before').setAttribute('aria-pressed',String(!after));$('after').setAttribute('aria-pressed',String(after));$('confirm').hidden=true;$('status').textContent=after?'After reading: location revised from S1; the packet limit remains open. Your writing is preserved.':'Before reading: the Learned column is blank. Your writing is preserved.';}
$('before').addEventListener('click',()=>stage(false));$('after').addEventListener('click',()=>stage(true));$('evidence').addEventListener('click',()=>{const open=$('evidence-note').hidden;$('evidence-note').hidden=!open;$('evidence').setAttribute('aria-expanded',String(open));});$('reset').addEventListener('click',()=>{$('confirm').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirm').hidden=true;$('status').textContent='Reset canceled. Your response is unchanged.';$('reset').focus();});$('clear').addEventListener('click',()=>{$('response').value='';stage(false);$('evidence-note').hidden=true;$('evidence').setAttribute('aria-expanded','false');$('status').textContent='Response cleared. Before reading restored.';$('response').focus();});
</script></body></html>