Practice Club · Evidence Escape — Prepare independent task cards, a teacher answer ledger and final-code check so teams can show evidence for each solved task.

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>Practice Club · Evidence Escape</title>
<style>
:root{font-family:Arial,Helvetica,sans-serif;color:#253e3b;background:#f3f0e7;line-height:1.5;font-size:16px}*{box-sizing:border-box}body{margin:0}main{max-width:1160px;margin:auto;padding:28px 24px 60px}h1,h2,h3,p{margin:0}h1{font-family:Georgia,serif;font-size:clamp(27px,4vw,40px);line-height:1.15}h2{font-family:Georgia,serif;font-size:25px}h3{font-size:18px}.eyebrow{font-size:12px;letter-spacing:.13em;text-transform:uppercase;font-weight:bold;color:#5d6e66}.heading{margin-bottom:18px}.heading p:last-child{margin-top:8px}.result{background:#244f48;color:#fff;padding:20px 24px;border-radius:8px;display:grid;grid-template-columns:1fr 1.35fr;gap:24px;align-items:center}.result .eyebrow{color:#d6e9d8}.code{font-family:Georgia,serif;font-size:58px;line-height:1.1;letter-spacing:.12em;margin:5px 0;overflow-wrap:anywhere}.rule{font-size:14px;color:#e4eddf}.status{font-size:20px;font-weight:bold}.result p+p{margin-top:8px}.source{display:grid;grid-template-columns:160px 1fr;gap:20px;background:#fffdf6;border:1px solid #d4d3c4;margin:18px 0;padding:18px 22px;border-left:5px solid #b57534}.source ol{margin:0;padding-left:24px}.source li{padding-left:5px;margin:2px 0}.stations{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.station{background:#fffdf8;border:1px solid #d5d5c8;border-radius:6px;padding:18px;min-width:0}.station-head{display:flex;gap:10px;align-items:center;margin-bottom:10px}.badge{display:grid;place-items:center;background:#e5e8ce;border:1px solid #bcc49c;border-radius:50%;width:34px;height:34px;font-weight:bold;flex:none}.station p{font-size:15px;margin-bottom:12px}.station label{display:block;font-size:13px;font-weight:bold;margin:10px 0 4px}input,textarea,select,button{font:inherit}input,textarea,select{max-width:100%;width:100%;background:white;border:1px solid #87958c;border-radius:4px;color:#233e38;padding:9px 10px;min-height:44px}textarea{resize:vertical;min-height:78px}input.quantity{width:76px;font-size:22px;text-align:center}button{border:1px solid #37675b;border-radius:4px;background:#2c5e50;color:white;min-height:44px;padding:9px 15px;cursor:pointer;font-weight:bold}button.secondary{background:#fffdf8;color:#2c5146}.actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.logistics{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}.logistics select{width:auto}.help{font-size:14px;color:#51665c}.feedback{font-size:14px;color:#85501e;margin:8px 0;min-height:21px}.station[aria-invalid="true"]{border-color:#a25524}.station[aria-invalid="true"] input.quantity{border:2px solid #a25524}.clue{margin-top:16px;padding:15px;background:#e8ebda;border-radius:5px}.clue p{margin:8px 0}section.lower{margin-top:34px;border-top:1px solid #cccbbb;padding-top:24px}.lower>p{margin:8px 0 15px}.packet{padding:22px;background:#fffefa;border:1px solid #cecebd;margin:16px 0}.packet p{margin:8px 0}.packet ol{padding-left:25px}.blank{border-top:1px dashed #b8beaa;padding:13px 0}.blank strong{display:block}.blank span{display:block;margin-top:6px;font-size:14px}.copies{display:grid;grid-template-columns:1fr 1fr;gap:20px}.copies article{min-width:0}.copies textarea{height:270px;font:14px/1.5 ui-monospace,monospace;margin:10px 0}.foot{margin-top:25px;font-size:14px;color:#57665b}.debrief{background:#e6eadb;padding:18px;margin-top:18px}.debrief p{margin-top:8px}button:hover{filter:brightness(.94)}:focus-visible{outline:3px solid #b5641f;outline-offset:3px}[hidden]{display:none!important}@media(max-width:800px){.stations{grid-template-columns:1fr}.station{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.station-head,.station>p,.station>.feedback{grid-column:1/-1}.station .evidence-wrap{grid-column:2;grid-row:3/5}.station .quantity-wrap{grid-column:1}.station .clue-wrap{grid-column:1/-1}.copies{grid-template-columns:1fr}.result{grid-template-columns:1fr 1.4fr}}@media(max-width:480px){main{padding:18px 16px 40px}.result{grid-template-columns:1fr;gap:12px;padding:18px}.code{font-size:48px}.source{grid-template-columns:1fr;gap:9px;padding:16px}.station{display:block}.status{font-size:18px}.packet{padding:16px}} 
</style></head><body><main>
<header class="heading"><p class="eyebrow">Teacher preparation · adult worked demonstration</p><h1>Practice Club: follow the evidence</h1><p>Locate a quantity, cite its source, then join the answers in A → B → C order.</p></header>
<div class="result" aria-live="polite"><div><p class="eyebrow" id="code-label">Assembled code · A → B → C</p><div class="code" id="code">246</div><p class="rule">Join the strings. Do not add them.</p></div><div><p class="status" id="status">Code matches; teacher evidence review pending.</p><p id="detail">Three quantities match. A teacher must review the supporting details.</p></div></div>
<aside class="source"><div><p class="eyebrow">Source sheet · revision 1</p><h3>Club supplies</h3></div><ol><li>The practice club has 2 paintbrushes.</li><li>It has 4 drawing pads.</li><li>It has 6 paperclips.</li></ol></aside>
<div class="stations" id="stations">
<article class="station" id="station-a"><div class="station-head"><span class="badge">A</span><h3>Paintbrushes</h3></div><p>How many paintbrushes does the practice club have? Record the quantity and cite the supporting sentence or detail.</p><div class="quantity-wrap"><label for="quantity-a">Quantity A</label><input class="quantity" id="quantity-a" inputmode="numeric" value="2" aria-describedby="feedback-a"></div><div class="evidence-wrap"><label for="evidence-a">Supporting sentence / detail A</label><textarea id="evidence-a">Sentence 1: The practice club has 2 paintbrushes.</textarea></div><div class="clue-wrap"><label for="clue-a">Clue record A (optional)</label><input id="clue-a" placeholder="Record only what was requested or used"></div><div class="feedback" id="feedback-a"></div></article>
<article class="station" id="station-b"><div class="station-head"><span class="badge">B</span><h3>Drawing pads</h3></div><p>How many drawing pads does the practice club have? Record the quantity and cite the supporting sentence or detail.</p><div class="quantity-wrap"><label for="quantity-b">Quantity B</label><input class="quantity" id="quantity-b" inputmode="numeric" value="4" aria-describedby="feedback-b"></div><div class="evidence-wrap"><label for="evidence-b">Supporting sentence / detail B</label><textarea id="evidence-b">Sentence 2: It has 4 drawing pads.</textarea></div><div class="clue-wrap"><label for="clue-b">Clue record B (optional)</label><input id="clue-b" placeholder="Record only what was requested or used"></div><div class="feedback" id="feedback-b"></div></article>
<article class="station" id="station-c"><div class="station-head"><span class="badge">C</span><h3>Paperclips</h3></div><p>How many paperclips does the practice club have? Record the quantity and cite the supporting sentence or detail.</p><div class="quantity-wrap"><label for="quantity-c">Quantity C</label><input class="quantity" id="quantity-c" inputmode="numeric" value="6" aria-describedby="feedback-c"></div><div class="evidence-wrap"><label for="evidence-c">Supporting sentence / detail C</label><textarea id="evidence-c">Sentence 3: It has 6 paperclips.</textarea></div><div class="clue-wrap"><label for="clue-c">Clue record C (optional)</label><input id="clue-c" placeholder="Record only what was requested or used"></div><div class="feedback" id="feedback-c"></div></article>
</div>
<div class="logistics"><label for="visit-order">Visit order (logistics only)</label><select id="visit-order"><option>C / A / B</option><option>A / B / C</option><option>A / C / B</option><option>B / A / C</option><option>B / C / A</option><option>C / B / A</option></select><span class="help">Code order always stays A / B / C.</span></div>
<div class="actions"><button type="button" id="check">Check quantities &amp; completeness</button><button type="button" class="secondary" id="reset">Reset to blank</button><button type="button" class="secondary" id="worked">Load worked demonstration</button></div>
<div class="clue"><button type="button" class="secondary" id="show-clue" aria-expanded="false" aria-controls="clue-text">Request station B clue</button><p id="clue-text" hidden>Find the sentence about drawing pads.</p><p class="help">Requesting the clue adds a local note to B. Record actual use separately; no score is assigned.</p></div>
<section class="lower"><h2>Student packet preview</h2><p>Distribute only the student text below. It contains a blank evidence slip and no teacher ledger or worked responses.</p>
<div class="packet"><p class="eyebrow">Practice Club · team reading mission</p><h3>Find three quantities and show your evidence</h3><p>Read the numbered source sentences above. Visit the tasks in any order. A seated packet works too.</p><div class="blank"><strong>A · How many paintbrushes does the club have?</strong><span>Quantity: ______ &nbsp; Supporting sentence/detail: __________________</span><span>Clue requested or used: __________________</span></div><div class="blank"><strong>B · How many drawing pads does the club have?</strong><span>Quantity: ______ &nbsp; Supporting sentence/detail: __________________</span><span>Clue requested or used: __________________</span></div><div class="blank"><strong>C · How many paperclips does the club have?</strong><span>Quantity: ______ &nbsp; Supporting sentence/detail: __________________</span><span>Clue requested or used: __________________</span></div><p><strong>Final code: ______</strong> &nbsp; Join the quantity strings in A, then B, then C order. Do not add them. Bring your slip to the teacher and explain the evidence.</p></div>
<div class="copies"><article><h3>Student text · blank packet</h3><label for="student-text" class="help">Select and manually copy into your paper document.</label><textarea readonly id="student-text"></textarea><button type="button" class="secondary" id="select-student">Select student text</button></article><article><h3>Teacher text · separate ledger</h3><label for="teacher-text" class="help">Keep this copy separate from student distribution.</label><textarea readonly id="teacher-text"></textarea><button type="button" class="secondary" id="select-teacher">Select teacher text</button></article></div><p class="help" id="selection-status" aria-live="polite"></p>
<div class="debrief"><h3>Finish with an explanation</h3><p>Which source detail supports B? Why do C / A / B visits still use an A / B / C code?</p><p>If the drawing-pad quantity changed, which station answer and code position would change?</p></div>
<p class="foot">This fictional practice fixture checks quantity strings and evidence presence, not evidence quality or learning gains. The adult demonstration is inspectable and is not secure assessment storage. Copy only the student text for learners. No progress is saved. This HTML companion provides text for manual preparation; it does not print or generate PDF files. Keep teacher-vetted paper materials and the separate teacher key authoritative. No locks, countdown or required movement.</p></section>
</main><script>
'use strict';
const ids=['a','b','c'], expected=['2','4','6'];
const $=id=>document.getElementById(id);
function evaluate(values,evidence){
 const q=values.map(v=>v.trim());
 const invalid=q.map((v,i)=>!(/^[0-9]$/).test(v)?i:-1).filter(i=>i>=0);
 const wrong=q.map((v,i)=>/^[0-9]$/.test(v)&&v!==expected[i]?i:-1).filter(i=>i>=0);
 const missing=evidence.map((v,i)=>!v.trim()?i:-1).filter(i=>i>=0);
 return {q,invalid,wrong,missing,code:invalid.length?'':q.join(''),partial:q.filter(v=>/^[0-9]$/.test(v)).join('')};
}
function render(checked=false){
 const r=evaluate(ids.map(id=>$('quantity-'+id).value),ids.map(id=>$('evidence-'+id).value));
 $('code').textContent=r.invalid.length?(r.partial||'—'):r.code;
 $('code-label').textContent=r.invalid.length?'Partial only · final code incomplete':'Assembled code · A → B → C';
 ids.forEach((id,i)=>{let msg=r.invalid.includes(i)?(r.q[i]?'Use exactly one ASCII digit (0–9).':'Enter one digit for station '+id.toUpperCase()+'.'):checked&&r.wrong.includes(i)?'Recheck station '+id.toUpperCase()+': compare the quantity with the source.':!$('evidence-'+id).value.trim()?'Add supporting sentence/detail.':checked?'Quantity format and evidence presence checked.':'';
 $('feedback-'+id).textContent=msg;$('station-'+id).setAttribute('aria-invalid',String(r.invalid.includes(i)||(checked&&r.wrong.includes(i))));$('quantity-'+id).setAttribute('aria-invalid',String(r.invalid.includes(i)||(checked&&r.wrong.includes(i))));});
 if(r.invalid.length){$('status').textContent='Incomplete response — no final code.';$('detail').textContent='Check station '+r.invalid.map(i=>ids[i].toUpperCase()).join(', ')+'. Each quantity needs one digit.';}
 else if(!checked){$('status').textContent='Entries changed — check again.';$('detail').textContent='The assembled code is a draft. Previous check results have been cleared.';}
 else if(r.wrong.length){$('status').textContent='Quantity mismatch — recheck '+r.wrong.map(i=>ids[i].toUpperCase()).join(', ')+'.';$('detail').textContent='Your proposed code is '+r.code+'. Keep your entries and compare the flagged station with its source sentence.';}
 else if(r.missing.length){$('status').textContent='Incomplete response — evidence missing.';$('detail').textContent='Quantities match. Add supporting sentence/detail for '+r.missing.map(i=>ids[i].toUpperCase()).join(', ')+'.';}
 else{$('status').textContent='Code matches; teacher evidence review pending.';$('detail').textContent='Three quantities match. A teacher must review the supporting details.';}
 return r;
}
function loadWorked(){const e=['Sentence 1: The practice club has 2 paintbrushes.','Sentence 2: It has 4 drawing pads.','Sentence 3: It has 6 paperclips.'];ids.forEach((id,i)=>{$('quantity-'+id).value=expected[i];$('evidence-'+id).value=e[i];$('clue-'+id).value='';});$('visit-order').selectedIndex=0;clearClue();render(true);}
function clearClue(){$('clue-text').hidden=true;$('show-clue').setAttribute('aria-expanded','false');}
$('check').addEventListener('click',()=>render(true));
$('reset').addEventListener('click',()=>{ids.forEach(id=>{['quantity-','evidence-','clue-'].forEach(prefix=>$(prefix+id).value='');});$('visit-order').selectedIndex=0;clearClue();render();$('quantity-a').focus();});
$('worked').addEventListener('click',loadWorked);
ids.forEach(id=>{['quantity-','evidence-'].forEach(prefix=>$(prefix+id).addEventListener('input',()=>render(false)));$('quantity-'+id).addEventListener('keydown',e=>{if(e.key==='Enter'&&!e.isComposing&&e.keyCode!==229){e.preventDefault();render(true);}});});
$('show-clue').addEventListener('click',()=>{$('clue-text').hidden=false;$('show-clue').setAttribute('aria-expanded','true');if(!$('clue-b').value.trim())$('clue-b').value='Requested: Find the sentence about drawing pads.';});
const source='1. The practice club has 2 paintbrushes.\n2. It has 4 drawing pads.\n3. It has 6 paperclips.';
const tasks=['How many paintbrushes does the practice club have?','How many drawing pads does the practice club have?','How many paperclips does the practice club have?'];
$('student-text').value='PRACTICE CLUB — STUDENT PACKET\nTeam: __________  Visit order (optional): __________\n\nSOURCE SHEET — REVISION 1\n'+source+'\n\nDIRECTIONS\nLocate, record and cite at each independent station. Any visit order is allowed; a seated packet works too. Use one digit for each quantity.\n\n'+ids.map((id,i)=>id.toUpperCase()+'. '+tasks[i]+'\nQuantity: ______\nSupporting sentence/detail: __________________\nClue requested or used: __________________').join('\n\n')+'\n\nFINAL CODE: ______\nWrite the final code using A, then B, then C. Join the quantity strings; do not add them. Bring your evidence to the teacher.\n\nEXPLAIN\nWhich source detail supports B? Why do C/A/B visits still use an A/B/C code? If the drawing-pad quantity changed, which station answer and code position would change?\n\nOptional roles: reader, recorder, evidence explainer; switch roles if useful.';
$('teacher-text').value='PRACTICE CLUB — TEACHER LEDGER (KEEP SEPARATE)\nOriginal practice source — revision 1\n\nA: "2" — sentence 1, paintbrushes\nB: "4" — sentence 2, drawing pads\nC: "6" — sentence 3, paperclips\nExpected final code: "246". Concatenate strings in A/B/C order. C/A/B visits do not change this order; 624 is a visit-order error and 12 is a sum, not the code.\n\nProposed B clue: Find the sentence about drawing pads.\n\nTeam: __________\nActual evidence review A: __________________\nActual evidence review B: __________________\nActual evidence review C: __________________\nObserved clue use: __________________\nObserved participation / explanations: __________________\nTeacher acceptance / next step: __________________\n\nDEBRIEF KEY\nB is supported by sentence 2. Station labels determine code order. A revised drawing-pad quantity changes B and the middle component; review the whole revised packet before use.\n\nCode matching is not evidence approval. Review the supporting details yourself. No automatic grade, learning-gain claim or saved student record. Use a seated packet or paper rotation; no physical locks or countdown are needed.';
['student','teacher'].forEach(kind=>$('select-'+kind).addEventListener('click',()=>{const field=$(kind+'-text');field.focus();field.select();$('selection-status').textContent=(kind==='student'?'Student packet':'Teacher ledger')+' text selected. Use your device’s copy command, then paste into a separate document.';}));
render(true);
</script></body></html>