24 Tiles · Two Division Meanings — Match a division situation to its unknown group quantity and state the quotient's unit rather than report a bare number.

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>24 Tiles · Two Division Meanings</title><style>:root{--bg:#f3f7ff;--ink:#243c60;--accent:#325db0;--line:#c8d7ef;--wash:#e9effc;}*{box-sizing:border-box}body{margin:0;font:16px/1.5 Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg)}main{max-width:1120px;padding:24px;margin:auto}h1,h2,h3,p{margin:0}h1{font-size:clamp(26px,4vw,38px);line-height:1.15;letter-spacing:-.03em}h2{font-size:23px}h3{font-size:18px}header{margin-bottom:20px}header p{margin-top:8px}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:12px;font-weight:bold;color:var(--accent)}button,input,select,textarea{font:inherit}button{cursor:pointer;min-height:44px;padding:9px 15px;border:1px solid var(--accent);background:var(--accent);color:white;border-radius:7px;font-weight:600}button.secondary{background:white;color:var(--accent)}button:disabled{opacity:.45;cursor:default}input,select,textarea{width:100%;min-height:44px;border:1px solid #a2aaba;border-radius:5px;background:white;color:var(--ink);padding:9px}textarea{resize:vertical;min-height:95px}label{display:block;font-size:14px;font-weight:bold;margin:12px 0 5px}input[type=checkbox]{width:20px;min-height:20px;vertical-align:middle;margin-right:8px}:focus-visible{outline:3px solid #df7a16;outline-offset:3px}.actions{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}.panel{padding:22px;background:white;border:1px solid var(--line);border-radius:12px;min-width:0}.columns{display:grid;grid-template-columns:1.6fr 1fr;gap:20px}.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}.stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:15px}.stat{flex:1;min-width:92px;background:var(--wash);padding:10px 14px;border-radius:8px}.stat small{display:block}.stat strong{font-size:25px}.muted{color:#526178;font-size:14px}.notice{padding:14px 16px;background:var(--wash);border-left:4px solid var(--accent);margin:14px 0;overflow-wrap:anywhere}.error{color:#a12e25;font-weight:bold}.below{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}.below p{margin-top:9px}svg.board{width:100%;display:block;border-radius:10px;border:1px solid var(--line)}table{border-collapse:collapse;width:100%;font-size:14px}td,th{text-align:left;padding:10px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}th{font-size:12px;text-transform:uppercase;letter-spacing:.04em}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.6 ui-monospace,monospace}.scroll{overflow-x:auto}.tag{font-size:12px;padding:4px 8px;background:var(--wash);border-radius:4px}.big{font-size:clamp(36px,6vw,62px);font-weight:bold;line-height:1.15}.foot{font-size:14px;color:#526178;margin-top:25px}details{margin:18px 0}summary{cursor:pointer;font-weight:bold;min-height:44px;padding:10px 0}[hidden]{display:none!important}@media(max-width:800px){.columns{grid-template-columns:1fr}.two{grid-template-columns:1fr}}@media(max-width:480px){main{padding:18px 14px}.panel{padding:16px}.stat{min-width:78px;padding:8px}.actions button{flex-grow:1}td,th{padding:7px}.big{font-size:38px}}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:16px 0}.model{background:white;padding:18px;border:1px solid var(--line);border-radius:12px}.tray{display:flex;flex-wrap:wrap;gap:5px;padding:8px;border:2px solid #a3b7d9;border-radius:8px;margin:7px 0;min-height:32px}.tile{padding:3px 5px;border-radius:4px;background:#f4cc65;color:#514321;font:12px/1.4 ui-monospace,monospace}.mini-tile{height:13px;width:13px;border-radius:3px;background:#e7ae40}.equation{font-size:32px;font-weight:bold;margin:8px 0}.bank{display:flex;flex-wrap:wrap;gap:5px;padding:12px;background:#edf2fb;border-radius:7px}.allocation{font:14px/1.5 ui-monospace,monospace;min-height:180px}#model-preview:empty::after{content:'Trays will appear after you enter tile IDs.';color:#526178}.student-copy{height:200px}@media(max-width:480px){.comparison{grid-template-columns:1fr}}</style></head><body><main><header><p class="eyebrow">Teacher preparation · authored comparison</p><h1>Give the quotient a unit</h1><p>The same 24 ÷ 6 = 4 describes two different arrangements.</p></header><div class="comparison"><article class="model"><span class="tag">D1 · known: 6 trays</span><h2>Share 24 tiles among 6 trays</h2><div id="d1-diagram"></div><p class="equation">4 <small>tiles per tray</small></p></article><article class="model"><span class="tag">D2 · known: 6 tiles per tray</span><h2>Make trays of 6 from 24 tiles</h2><div id="d2-diagram"></div><p class="equation">4 <small>trays</small></p></article></div><section class="below"><p class="eyebrow">Learner turn · entries begin blank</p><h2>Build a model, then explain the four</h2><div class="columns" style="margin-top:15px"><section class="panel"><label for="scenario">Situation card</label><select id="scenario"><option value="D1">D1 · share 24 tiles equally among 6 trays</option><option value="D2">D2 · put 6 tiles in each tray until all 24 are used</option></select><p class="notice" id="situation">I know the number of trays; I need to find tiles per tray.</p><label for="allocation">Tile allocation · one tray per line</label><textarea id="allocation" class="allocation" placeholder="Enter IDs T01–T24, separated by commas or spaces. Put each tray on its own line."></textarea><label for="unit">Quotient unit</label><select id="unit"><option value="">Choose the unknown quantity</option><option value="tiles per tray">tiles per tray</option><option value="trays">trays</option></select><label for="explanation">I know … and I need to find … Why does this model fit?</label><textarea id="explanation" placeholder="Your explanation for a partner or teacher to review"></textarea><div class="actions"><button type="button" id="check">Check allocation &amp; unit</button><button type="button" id="reset" class="secondary">Reset learner turn</button></div><p class="notice" id="feedback" role="status">No learner response checked.</p></section><aside class="panel"><h3>Unique tile bank</h3><div class="bank" id="bank"></div><h3 style="margin-top:18px">Your tray preview</h3><div id="model-preview"></div><p id="allocation-count" class="muted">0 placements</p></aside></div></section><details><summary>Teacher tools · keep separate from student distribution</summary><p>Load the authored allocation for the selected situation. This replaces the learner draft with demonstration data.</p><div class="actions"><button type="button" id="load-example" class="secondary">Load teacher example</button></div><p>D1: six groups of four; D2: four groups of six. Other tile-ID groupings are valid if every tile is used once and the requested grouping matches. A correct numeric total alone does not establish the correct division meaning.</p></details><section class="below"><h2>Student-only text · no worked answers</h2><label for="student-text">Manual-copy packet with situation cards and blank ledger</label><textarea readonly id="student-text" class="student-copy"></textarea><div class="actions"><button type="button" id="select-student" class="secondary">Select student text</button></div><p id="copy-status" class="muted" role="status"></p><p class="foot">This adult preparation page includes teacher examples. Distribute only the student text for a student-only copy. Swap reader/model-builder roles on the second card; no speed contest. The fixed checker covers positive-divisor, nonnegative whole-number exact division only, not remainders, fractions or negative quantities. Free explanations require human review. No saved responses, printing or mastery claim.</p></section></main><script>'use strict';const $=id=>document.getElementById(id);const bank=Array.from({length:24},(_,i)=>'T'+String(i+1).padStart(2,'0'));let scenario='D1';
function parse(text){return text.trim()?text.trim().split(/\n/).filter(x=>x.trim()).map(x=>x.trim().split(/[\s,]+/).filter(Boolean)):[];}
function assess(groups,unit,explanation){const flat=groups.flat(),unknown=flat.filter(x=>!bank.includes(x)),dup=flat.filter((x,i)=>flat.indexOf(x)!==i),missing=bank.filter(x=>!flat.includes(x));if(unknown.length||dup.length||missing.length)return 'Invalid or incomplete tile bank: '+(unknown.length?'unknown '+unknown.join(', ')+'; ':'')+(dup.length?'duplicate '+[...new Set(dup)].join(', ')+'; ':'')+(missing.length?'missing '+missing.join(', '):'');if(!groups.length||groups.some(g=>!g.length||g.length!==groups[0].length))return 'Use equal, nonempty groups.';if(scenario==='D1'&&groups.length!==6)return 'The total is 24, but the number of trays does not match D1: use 6 trays.';if(scenario==='D2'&&groups.some(g=>g.length!==6))return 'The total is 24, but the tiles per tray do not match D2: use 6 tiles per tray.';const wanted=scenario==='D1'?'tiles per tray':'trays';if(unit!==wanted)return 'Check the quotient unit: '+scenario+' asks for '+wanted+'.';if(!explanation.trim())return 'Allocation and unit match. Add your explanation for human review.';return 'Model matches: 24 ÷ 6 = 4 '+wanted+'. Explanation review pending.';}
function preview(){const groups=parse($('allocation').value);$('model-preview').textContent='';for(let i=0;i<groups.length;i++){const tray=document.createElement('div');tray.className='tray';tray.textContent='Tray '+(i+1)+': '+groups[i].join(' · ');$('model-preview').append(tray);}$('allocation-count').textContent=groups.flat().length+' placements · '+new Set(groups.flat()).size+' unique IDs';$('feedback').textContent='Draft changed — check allocation and unit again.';}
function reset(){for(const k of ['allocation','unit','explanation'])$(k).value='';preview();$('feedback').textContent='No learner response checked.';}
function choose(v){scenario=v;$('situation').textContent=scenario==='D1'?'I know the number of trays; I need to find tiles per tray.':'I know the tiles per tray; I need to find the number of trays.';reset();}
function load(){const size=scenario==='D1'?4:6,groups=[];for(let i=0;i<24;i+=size)groups.push(bank.slice(i,i+size));$('allocation').value=groups.map(g=>g.join(', ')).join('\n');$('unit').value=scenario==='D1'?'tiles per tray':'trays';$('explanation').value=scenario==='D1'?'Authored example: 6 trays are known; 24 tiles shared equally gives 4 tiles per tray.':'Authored example: 6 tiles per tray are known; 24 tiles fill 4 trays.';preview();check();}
function check(){$('feedback').textContent=assess(parse($('allocation').value),$('unit').value,$('explanation').value);}
for(const [id,count,size] of [['d1-diagram',6,4],['d2-diagram',4,6]])$(id).innerHTML=Array.from({length:count},()=>'<div class="tray">'+Array.from({length:size},()=>'<span class="mini-tile"></span>').join('')+'</div>').join('');$('bank').innerHTML=bank.map(x=>'<span class="tile">'+x+'</span>').join('');$('scenario').addEventListener('change',()=>choose($('scenario').value));$('allocation').addEventListener('input',preview);$('unit').addEventListener('change',preview);$('explanation').addEventListener('input',()=>{$('feedback').textContent='Draft changed — check allocation and unit again.';});$('check').addEventListener('click',check);$('reset').addEventListener('click',reset);$('load-example').addEventListener('click',load);$('student-text').value='DIVISION COMPARISON — STUDENT PACKET\nTile bank: '+bank.join(', ')+'\n\nD1: Distribute all 24 tiles equally among 6 trays.\nD2: Put 6 tiles in each tray until all 24 tiles are used.\n\nFor each card use a fresh allocation. Use every tile once, in equal nonempty groups.\n\nCard ID: ____\nKnown quantities (with units): __________________\nUnknown quantity: __________________\nEquation: __________________\nAllocation (tile IDs in each labeled tray): __________________\nQuotient with unit: __________________\nI know ___ and I need to find ___. My model fits because: __________________\n\nSwap situation-reader and model-builder roles on the second card. Ask a partner or teacher to review your explanation.';$('select-student').addEventListener('click',()=>{$('student-text').focus();$('student-text').select();$('copy-status').textContent='Student text selected. Use your device’s copy command and paste into a separate document.';});globalThis.app={parse,assess,choose,load,reset,bank};reset();</script></body></html>