Equal rounds, visible leftovers — Coordinate a whole-group model, two group rotations and independent checks while learners verify quotient/remainder with the original…

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>Equal rounds, visible leftovers</title><style>*{box-sizing:border-box}body{margin:0;font:16px/1.55 system-ui,sans-serif;color:var(--ink);background:var(--bg)}main{max-width:1120px;margin:auto;padding:30px}h1{font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-.035em;margin:5px 0 12px}h2{font-size:23px;line-height:1.3;margin:0 0 15px}h3{font-size:17px;margin:0 0 8px}p{margin:0 0 12px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:750;color:var(--accent)}.small,footer{font-size:13px;color:var(--muted)}footer{margin:27px 0}.panel{background:white;border:1px solid var(--line);padding:23px;border-radius:9px;margin-top:22px}.two{display:grid;grid-template-columns:1.35fr 1fr;gap:23px}.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}button{font:700 14px system-ui;min-height:44px;padding:10px 16px;border:1px solid var(--accent);background:var(--accent);color:white;border-radius:5px;cursor:pointer}button.secondary{color:var(--accent);background:white}button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ink)}button:disabled{opacity:.45;cursor:default}:focus-visible{outline:3px solid #d28b25;outline-offset:3px}label{display:block;font-size:13px;font-weight:650}input,textarea,select{display:block;width:100%;padding:11px;font:16px/1.5 system-ui;color:var(--ink);background:white;border:1px solid #9baab6;border-radius:4px;margin:6px 0 15px}textarea{min-height:100px;resize:vertical}.error{color:#a02b20;font-size:14px;min-height:23px}.result{font-size:40px;line-height:1.25;letter-spacing:-.04em;font-weight:750}.notice{padding:15px;background:#fff3db;border-left:4px solid #cf9d3e;font-size:14px;margin:16px 0}details{margin-top:23px;border-top:1px solid var(--line);padding-top:15px}summary{cursor:pointer;min-height:44px;font-weight:700}.time-row{display:grid;grid-template-columns:75px 1fr 70px;gap:14px;padding:15px 0;border-top:1px solid var(--line)}.time-row p{font-size:14px;margin:5px 0}.time-row input{margin:0;text-align:center}.range{font-size:13px;font-weight:700;color:var(--accent)}[hidden]{display:none!important}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 ui-monospace,Consolas,monospace} @media(max-width:740px){main{padding:23px 16px}.two{grid-template-columns:1fr;gap:0}.panel{padding:20px}}@media(max-width:380px){main{padding:20px 12px}.panel{padding:17px}.time-row{grid-template-columns:1fr 65px}.range{grid-column:1/-1}.row button{flex:1}}:root{--ink:#244b52;--bg:#eff6f5;--accent:#2e7c82;--muted:#648086;--line:#c9dddf}.mathboard{background:white;border:1px solid var(--line);border-radius:13px;margin-top:25px;padding:25px}.trays{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}.tray{background:#e9f2f1;border:2px solid #9bbebd;padding:14px;border-radius:9px;min-height:95px;text-align:center}.badge{display:inline-block;width:19px;height:19px;background:#d7a552;border:1px solid #aa7f36;border-radius:50%;margin:3px}.equation{font:30px/1.4 Georgia,serif;color:#27636b;margin:16px 0}.rotation{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:18px}.group{padding:20px;border-radius:8px;background:#fbefd8}.group.teal{background:#dcefee}.proposal{background:#f7f8ef;border-left:4px solid #9faa66;padding:17px;margin-top:20px}@media(max-width:500px){.trays{grid-template-columns:repeat(2,1fr)}.rotation{grid-template-columns:1fr}.mathboard{padding:20px}}</style></head><body><main><p class="eyebrow">Teacher planning review · original indivisible-counter tasks</p><h1>Equal rounds. Visible leftovers.</h1><p>Keep the original total and the same whole-number quantity in every tray.</p><section class="mathboard"><div class="row"><button id="task-model" type="button" aria-pressed="true">Model · 14 ÷ 4</button><button id="task-main" type="button" class="secondary">Teacher task · 11 ÷ 4</button><button id="task-partner" type="button" class="secondary">Partner · 17 ÷ 5</button><button id="task-exit" type="button" class="secondary">Exit · 23 ÷ 6</button></div><p id="task-title" style="margin-top:17px">Teacher model: 14 counters, 4 trays</p><div id="trays" class="trays"></div><p id="leftover"></p><p id="equation" class="equation">4 × 3 + 2 = 14; 2 &lt; 4</p><p class="small">Teacher reference only. Maximize complete equal rounds; keep leftovers unassigned and unsplit.</p></section><div class="two"><section class="panel"><h2>One teacher group at a time</h2><div class="row"><button id="rotation-1" type="button" aria-pressed="true">Rotation 1</button><button id="rotation-2" type="button" class="secondary">Rotation 2</button></div><div class="rotation"><div class="group"><h3>Amber</h3><p id="amber">Teacher task · 11 ÷ 4</p></div><div class="group teal"><h3>Teal</h3><p id="teal">Partner task · 17 ÷ 5</p></div></div><p id="teacher-owner" class="small" style="margin-top:15px">Teacher works with Amber only.</p><p class="small">Fictional groups. Confirm memberships, partner routines, materials and support. Station completion does not establish independent explanation.</p></section><section class="panel"><h2>Compare two proposals for 11 ÷ 4</h2><div class="row"><button id="proposal-extra" type="button">Three in every tray</button><button id="proposal-unequal" type="button" class="secondary">Give three trays an extra</button></div><p id="proposal-result" class="proposal" role="status">4 × 3 = 12. Three in every tray requires one badge more than the supplied 11.</p><p>Ask: How many complete equal rounds fit? What remains? How does the equation recover eleven? Which condition does each proposal violate?</p></section></div><section class="panel"><div class="row" style="justify-content:space-between"><h2>45-minute workshop sequence</h2><strong id="total" class="result">45 minutes</strong></div><div id="time-rows"></div><p id="time-error" class="error" role="alert"></p><button id="restore-times" type="button" class="secondary">Restore workshop times</button></section><section class="panel"><h2>Clean learner task copy · no teacher answers</h2><label for="learner-copy">Exact task text · manual copy<textarea id="learner-copy" readonly></textarea></label><button id="select-copy" type="button">Select learner text</button><p id="select-status" class="small" role="status"></p></section><section class="panel"><h2>Actual learner evidence · blank before use</h2><label for="actual-count">Actual counts / equation / work reference<textarea id="actual-count"></textarea></label><label for="actual-explanation">Actual equal-group and remainder explanation / support<textarea id="actual-explanation"></textarea></label><label for="next-step">Teacher’s next step<textarea id="next-step"></textarea></label></section><footer>HTML teacher-review companion to paper counters and school records. No simulated learner distribution, automatic grading, group diagnosis or collected/saved assessment. This remainder interpretation is for indivisible counters, not a financial rounding policy.</footer></main><script>
'use strict';const $=id=>document.getElementById(id);

const tasks={model:{name:'Teacher model',total:14,groups:4},main:{name:'Teacher task',total:11,groups:4},partner:{name:'Partner task',total:17,groups:5},exit:{name:'Independent exit',total:23,groups:6}};let task='model',rotation=1;function divide(total,groups){if(!Number.isSafeInteger(total)||total<0||!Number.isSafeInteger(groups)||groups<1)return{error:'Supply nonnegative whole counters and a positive tray count.'};const q=Math.floor(total/groups),r=total%groups;return{q,r,equation:groups+' × '+q+' + '+r+' = '+total+'; '+r+' < '+groups};}function renderTask(){const t=tasks[task],r=divide(t.total,t.groups);$('task-title').textContent=t.name+': '+t.total+' counters, '+t.groups+' trays';$('equation').textContent=r.equation;$('leftover').textContent=r.r+' counters remain unassigned.';$('trays').replaceChildren();for(let i=0;i<t.groups;i++){const tray=document.createElement('div');tray.className='tray';const p=document.createElement('p');p.textContent='Tray '+(i+1)+' · '+r.q;tray.appendChild(p);for(let k=0;k<r.q;k++){const b=document.createElement('span');b.className='badge';b.setAttribute('aria-hidden','true');tray.appendChild(b);}$('trays').appendChild(tray);}for(const id of Object.keys(tasks))$('task-'+id).setAttribute('aria-pressed',String(id===task));}for(const id of Object.keys(tasks))$('task-'+id).addEventListener('click',()=>{task=id;renderTask();});function rotate(){const teacher=rotation===1?'Amber':'Teal';$('amber').textContent=rotation===1?'Teacher task · 11 ÷ 4':'Partner task · 17 ÷ 5';$('teal').textContent=rotation===1?'Partner task · 17 ÷ 5':'Teacher task · 11 ÷ 4';$('teacher-owner').textContent='Teacher works with '+teacher+' only.';for(const n of[1,2])$('rotation-'+n).setAttribute('aria-pressed',String(n===rotation));}for(const n of[1,2])$('rotation-'+n).addEventListener('click',()=>{rotation=n;rotate();});$('proposal-extra').addEventListener('click',()=>{$('proposal-result').textContent='4 × 3 = 12. Three in every tray requires one badge more than the supplied 11.';});$('proposal-unequal').addEventListener('click',()=>{$('proposal-result').textContent='3 + 3 + 3 + 2 = 11 preserves the total, but the trays are unequal. It does not satisfy the same-quantity condition.';});$('learner-copy').value=['EQUAL-ROUND COUNTER TASKS','Use the same whole-number quantity in every tray; maximize complete rounds. Keep leftovers unassigned; do not split counters.','Teacher station: 11 badges and 4 trays.','Partner station: 17 counters and 5 trays.','Independent exit: 23 counters and 6 trays.','For each: quantity per tray __; leftovers __; groups × quantity + leftovers = total __.','Explain why another complete equal round cannot fit.','Compare three in each of four trays with the supplied total of 11.','Record actual support used.'].join('\n');$('select-copy').addEventListener('click',()=>{$('learner-copy').focus();$('learner-copy').select();$('select-status').textContent='Answer-free learner text selected. Copy manually into the required worksheet.';});const target=45,blocks=[['Warm-up','Name supplied total and equal-group condition.',4],['Mini-model','Model 14 ÷ 4 with separate total, trays, per-tray and leftover fields.',8],['Rotation 1','Amber: teacher11/4; Teal: partner17/5. Only Amber with teacher.',10],['Transition','Swap groups and materials under the confirmed routine.',2],['Rotation 2','Teal: teacher11/4; Amber: partner17/5. Only Teal with teacher.',10],['Share','Compare total preservation and equal quantities using both invalid proposals.',5],['Independent exit','23/6: supply counts, equation and explanation; record actual support.',6]];renderTask();rotate();function schedule(values){if(values.some(v=>!/^\d+$/.test(v.trim())||+v<1||+v>180))return{error:'Enter whole positive minutes from 1 to 180 for every phase.'};let n=0;return{total:values.reduce((a,b)=>a+(+b),0),ranges:values.map(v=>{const s=n;n+=+v;return s+'–'+n+' min';})};}function timing(){const r=schedule(blocks.map((_,i)=>$('minutes-'+i).value));$('total').textContent=r.error?'Pending':r.total+' minutes';$('time-error').textContent=r.error||(r.total===target?'':'Review the edited length: original '+target+' minutes.');blocks.forEach((_,i)=>$('range-'+i).textContent=r.error?'Not calculated':r.ranges[i]);}blocks.forEach((b,i)=>{const row=document.createElement('div');row.className='time-row';const range=document.createElement('span');range.id='range-'+i;range.className='range';row.appendChild(range);const content=document.createElement('div'),h=document.createElement('strong'),p=document.createElement('p');h.textContent=b[0];p.textContent=b[1];content.appendChild(h);content.appendChild(p);row.appendChild(content);const label=document.createElement('label');label.textContent='Minutes';label.setAttribute('for','minutes-'+i);const input=document.createElement('input');input.id='minutes-'+i;input.value=String(b[2]);input.setAttribute('aria-label',b[0]+' minutes');input.setAttribute('inputmode','numeric');input.addEventListener('input',timing);label.appendChild(input);row.appendChild(label);$('time-rows').appendChild(row);});$('restore-times').addEventListener('click',()=>{blocks.forEach((b,i)=>$('minutes-'+i).value=String(b[2]));timing();});timing();
</script></body></html>