Six task choices, one task from each group and a shared evidence exit

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>Reading choice board · one route, shared evidence</title><style>
*{box-sizing:border-box}body{margin:0;background:#f5f0e5;color:#263a33;font:16px/1.6 system-ui,sans-serif}main{max-width:1000px;margin:auto;padding:28px}h1{font:700 clamp(30px,5vw,46px)/1.12 Georgia,serif;margin:12px 0 18px}h2{font-size:23px}h3{font-size:19px;margin:0 0 10px}p{margin:8px 0 16px}section,article,fieldset,div{min-width:0}p,h1,h2,h3,label,button,textarea{overflow-wrap:anywhere}.eyebrow{font-size:16px;letter-spacing:.08em;font-weight:750}.source,.rule,.panel{padding:20px;border-radius:10px;margin:20px 0}.source{background:#fffdf7;border:1px solid #b9bcaa}.rule{background:#284e43;color:white}.rule strong{font-size:20px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.task{display:block;border:1px solid #aeb8aa;border-radius:8px;background:#fffef8;padding:16px;margin:12px 0;cursor:pointer}.task:has(input:checked){border:2px solid #285f4a;background:#eaf2e7;padding:15px}.task strong{display:block}.task input{accent-color:#285f4a;width:20px;height:20px;margin:0 8px 8px 0;vertical-align:middle}.panel{background:white;border:1px solid #b9bcaa}button,textarea{font:inherit}button{min-height:44px;padding:10px 16px;border:1px solid #496854;border-radius:6px;background:white;color:#263a33;cursor:pointer}button:hover{background:#eaf2e7}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #b95b22;outline-offset:3px}textarea{display:block;width:100%;min-height:110px;margin:8px 0 18px;padding:12px;border:1px solid #6b7d70;border-radius:5px;resize:vertical;color:inherit;background:#fff}.toolbar{display:flex;gap:10px;flex-wrap:wrap}.status{border-left:5px solid #b26a27;padding:12px 16px;background:#fff3d7}.worked{border-top:5px solid #56816c}ul{padding-left:22px}li{margin:10px 0}label{font-weight:650}small,.muted{color:#4c6055}footer{margin-top:26px;border-top:1px solid #b9bcaa;padding-top:18px}[hidden]{display:none!important}@media(max-width:600px){main{padding:16px}.grid{grid-template-columns:1fr}.source,.rule,.panel{padding:16px}.toolbar button{flex:1 1 140px}}
</style></head><body><main><p class="eyebrow">ORIGINAL FICTIONAL PASSAGE · READING EVIDENCE</p><h1>Choose how to show what the text says.</h1><p>Read the same three sentences on every route. Your two tasks lead to one shared exit: a supported claim and something still unknown.</p>
<section class="source" aria-labelledby="source-title"><h2 id="source-title">The passage</h2><p><strong>S1.</strong> Maya placed a folded map beside the closed gate.</p><p><strong>S2.</strong> She walked to the visitor desk and asked when the gate would open.</p><p><strong>S3.</strong> When the bell rang, she picked up the map and waited by the gate.</p></section>
<div class="rule"><strong>Choose one Observe task and one Explain task.</strong><br>Then complete the shared evidence exit. Choosing a task does not complete the work.</div>
<div class="grid"><section aria-labelledby="observe-title"><h2 id="observe-title">1 · Observe</h2><label class="task"><input id="o1" name="observe" type="radio" value="O1"><strong>O1 · Annotate the passage</strong>Mark two stated details and identify their sentence IDs.</label><label class="task"><input id="o2" name="observe" type="radio" value="O2"><strong>O2 · Draw and caption</strong>Sketch two details the text supplies. Caption them with sentence IDs; label imagined additions separately. Draw on paper or in your assigned tool.</label><label class="task"><input id="o3" name="observe" type="radio" value="O3"><strong>O3 · Sort four claims</strong>Classify the four claims below as stated, inference or unknown. Give a reason for each.</label><div class="source"><h3>O3 claim set</h3><ul><li>The gate was closed when Maya put down the map.</li><li>Maya asked when the gate would open.</li><li>Maya may want to enter.</li><li>Maya entered the gate.</li></ul></div></section>
<section aria-labelledby="explain-title"><h2 id="explain-title">2 · Explain</h2><label class="task"><input id="e1" name="explain" type="radio" value="E1"><strong>E1 · Compare two readings</strong>Compare “Maya may want to enter” with “Maya has entered.” Explain what supports or limits each claim.</label><label class="task"><input id="e2" name="explain" type="radio" value="E2"><strong>E2 · Revise a summary</strong>Correct “Maya entered the open gate when the bell rang,” using only S1–S3. Keep the original beside your revision.</label><label class="task"><input id="e3" name="explain" type="radio" value="E3"><strong>E3 · Write and question</strong>Write one defensible inference with a source reference. Ask one question the passage cannot answer.</label></section></div>
<section class="panel" aria-labelledby="route-title"><h2 id="route-title">Your route</h2><p id="route">No tasks selected yet.</p><p id="route-detail">Select one task from each group to see what to hand in.</p><label for="task-notes">Your task work or notes</label><textarea id="task-notes" placeholder="Write here, or note where you completed the drawing or annotations."></textarea><h3>Shared evidence exit</h3><label for="claim">One supported claim, with its sentence ID</label><textarea id="claim" placeholder="Claim + S1, S2 or S3"></textarea><label for="unknown">One thing the passage leaves unknown</label><textarea id="unknown" placeholder="What can this passage not tell you?"></textarea><div class="toolbar"><button id="review" type="button">Check route and exit fields</button><button id="clear" type="button">Clear my route and notes</button></div><p id="status" class="status" role="status" aria-live="polite">The check identifies missing choices or exit fields. Read the work against the passage yourself.</p><div id="confirmation" hidden><p>Clear both task choices, your task notes and both exit fields? The worked example will stay.</p><div class="toolbar"><button id="confirm-clear" type="button">Clear my work</button><button id="keep" type="button">Keep my work</button></div></div></section>
<section class="panel worked" aria-labelledby="worked-title"><h2 id="worked-title">Worked route · O3 + E2</h2><p>A discussion example, separate from your own choices and notes.</p><button id="toggle-worked" type="button" aria-expanded="true" aria-controls="worked-content">Hide worked route</button><div id="worked-content"><h3>O3 · Claim sort</h3><ul><li><strong>Stated:</strong> The gate was closed when Maya put down the map. S1 says “closed gate.”</li><li><strong>Stated:</strong> Maya asked when the gate would open. S2 supplies the question.</li><li><strong>Inference:</strong> Maya may want to enter. Asking about opening and waiting by the gate in S2–S3 can support this reading; the text does not state it directly.</li><li><strong>Unknown:</strong> Maya entered the gate. S3 ends with waiting. No sentence supplies entry.</li></ul><h3>E2 · Keep the original beside the revision</h3><p><strong>Original:</strong> “Maya entered the open gate when the bell rang.”</p><p><strong>Supported revision:</strong> “Maya asked when the gate would open. When the bell rang, she picked up her map and waited by the gate.”</p><h3>Shared exit example</h3><p>Maya asked about the opening time, according to S2. The passage does not establish whether she eventually entered.</p></div></section><footer>Notes remain only in this open page; reloading clears them. Nothing is saved or submitted. Use your teacher’s classroom process to hand in the actual work. This page does not grade writing, drawings or interpretations.</footer></main>
<script>(()=>{'use strict';const $=id=>document.getElementById(id);const tasks={O1:'Two annotated stated details, each with its sentence ID.',O2:'A sketch of two supplied details, captions with sentence IDs, and separate labels for imagined additions.',O3:'Four claim classifications with a reason for each.',E1:'A comparison of the two readings, with support and limits.',E2:'The original unsupported summary beside a supported revision.',E3:'One defensible inference with a source reference and one unanswered question.'};const chosen=name=>document.querySelector('input[name="'+name+'"]:checked')?.value;function route(){const o=chosen('observe'),e=chosen('explain');$('route').textContent=(o||'Observe not selected')+' + '+(e||'Explain not selected');$('route-detail').textContent=[o?tasks[o]:'Choose an Observe task.',e?tasks[e]:'Choose an Explain task.','Shared exit: one supported claim with its sentence ID, plus one thing still unknown.'].join(' ');$('status').textContent='Route choices updated. Your written work and exit fields are unchanged.';}for(const radio of document.querySelectorAll('input[type="radio"]'))radio.addEventListener('change',route);for(const id of ['task-notes','claim','unknown'])$(id).addEventListener('input',()=>{$('status').textContent='Written work changed. Check route and exit fields again; no work was graded.';});$('review').addEventListener('click',()=>{const missing=[];if(!chosen('observe'))missing.push('one Observe task');if(!chosen('explain'))missing.push('one Explain task');if(!$('claim').value.trim())missing.push('a supported claim with its sentence ID');if(!$('unknown').value.trim())missing.push('one thing still unknown');$('status').textContent=missing.length?'Still needed: '+missing.join('; ')+'. No work was graded.':'Two task choices and both exit fields are present. Check the task work and evidence against S1–S3; this is not a completion or accuracy grade.';});$('toggle-worked').addEventListener('click',()=>{const open=$('worked-content').hidden;$('worked-content').hidden=!open;$('toggle-worked').setAttribute('aria-expanded',String(open));$('toggle-worked').textContent=open?'Hide worked route':'Show worked route';});$('clear').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('clear').focus();$('status').textContent='Kept your route and notes.';});$('confirm-clear').addEventListener('click',()=>{for(const r of document.querySelectorAll('input[type="radio"]'))r.checked=false;for(const id of ['task-notes','claim','unknown'])$(id).value='';$('route').textContent='No tasks selected yet.';$('route-detail').textContent='Select one task from each group to see what to hand in.';$('confirmation').hidden=true;$('status').textContent='Your route and notes were cleared. The source and worked example are unchanged.';$('o1').focus();});})();</script></body></html>