Math intervention • tens and ones — Prepare a short explicit reteaching session using tens/ones objects, a corrected worked example, a parallel independent check and a blank…

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>Math intervention • tens and ones</title><style>*{box-sizing:border-box}body{margin:0;background:var(--bg,#eef3f6);color:#172a39;font:16px/1.5 system-ui,sans-serif}main{max-width:1200px;margin:auto;padding:28px}h1{font-size:clamp(27px,4vw,42px);line-height:1.12;margin:8px 0 12px;letter-spacing:-.035em}h2{font-size:23px;line-height:1.2;margin:0 0 18px}h3{font-size:17px;margin:14px 0 8px}p{margin:8px 0 16px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.15em;font-weight:800;color:var(--accent,#176b71)}.lead{max-width:75ch;color:#405568}.panel{background:#fff;border:1px solid #cdd9e1;border-radius:14px;padding:24px;margin:18px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.wide{grid-template-columns:1.6fr 1fr}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.metric{border-left:4px solid var(--accent,#176b71);background:#f4f8fa;padding:18px}.big{display:block;font-size:36px;font-weight:800;line-height:1.2}.muted,small{color:#536879;font-size:14px}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}button{background:var(--accent,#176b71);color:white;border:2px solid transparent;border-radius:8px;padding:10px 16px;min-height:44px;cursor:pointer;font:inherit;font-weight:650}button.secondary{background:#e8eff4;color:#172a39}button:disabled{opacity:.48;cursor:default}button[aria-pressed=true]{outline:3px solid #172a39;outline-offset:2px}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #de7616;outline-offset:3px}label{display:block;font-weight:650;margin:12px 0 6px}input,select,textarea{font:inherit;color:inherit;border:1px solid #8b9eae;border-radius:6px;background:white;padding:10px;width:100%;min-height:44px}textarea{resize:vertical;min-height:110px}input[type=checkbox]{width:22px;min-height:22px;vertical-align:middle}table{border-collapse:collapse;width:100%;font-size:14px}th{text-align:left;background:#eff4f7;color:#3d5261}th,td{padding:12px;border-bottom:1px solid #dce5eb;vertical-align:top}.scroll{overflow-x:auto}caption{text-align:left;margin-bottom:12px;font-weight:700}.notice{background:#eef5f9;border-left:4px solid #628ba1;padding:14px;margin:14px 0}.error{color:#9c2924;font-weight:650}.pill{display:inline-block;border-radius:30px;padding:4px 10px;background:#e5f3ee;color:#17614f;font-size:13px;font-weight:750}.draft{white-space:pre-wrap;font:17px/1.65 Georgia,serif}.rule{display:block;width:100%;text-align:left;margin:10px 0}.rule strong{font-size:26px}details{margin:18px 0}summary{cursor:pointer;font-weight:700;padding:12px;background:#e9eff3;border-radius:6px;min-height:44px}footer{margin:30px 0;color:#536879;font-size:14px}ol,ul{padding-left:23px}.time-input{max-width:90px}.section-no{font-size:52px;color:#b5c8d5;font-weight:800;line-height:1}.tag{font-weight:700;color:var(--accent,#176b71)}[hidden]{display:none!important}@media(max-width:760px){main{padding:18px}.grid,.wide{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr}.panel{padding:18px}.big{font-size:30px}th,td{padding:9px}}:root{--accent:#426f36;--bg:#f1f5eb}.mat{display:grid;grid-template-columns:1fr 1fr;border:3px solid #446c37;border-radius:12px;margin:24px 0;background:#f5faec}.mat>div{padding:18px}.mat>div+div{border-left:2px dashed #91ae78}.pieces{display:flex;flex-wrap:wrap;gap:10px;min-height:110px}.ten{display:flex;align-items:center;justify-content:center;width:32px;height:110px;background:repeating-linear-gradient(to bottom,#709849 0 9px,#b7ce8e 9px 11px);color:#fff;font-weight:800;border:1px solid #426d30}.one{width:31px;height:31px;border:2px solid #c98321;background:#ffe3a6;display:grid;place-items:center;font-size:12px}.metric .big{font-size:27px}@media(max-width:500px){.mat>div{padding:10px}.pieces{gap:6px}.ten{width:25px}.one{width:25px;height:25px}}</style></head><body><main>
<span class="eyebrow">Small-group teaching / fictional response 312</span><h1>Make the ten. Keep the total.</h1><p class="lead">Use a place-value mat to connect 27 + 15 to a written sum.</p>
<section class="panel"><div class="row"><button type="button" id="model">Model 27 + 15</button><button type="button" id="combine" class="secondary">Combine the quantities</button><button type="button" id="exchange" class="secondary">Exchange 10 ones</button><button type="button" id="contrast" class="secondary">Contrast 23 + 14</button></div><div class="mat"><div><h2>Tens</h2><div id="tens" class="pieces"></div></div><div><h2>Ones</h2><div id="ones" class="pieces"></div></div></div><div class="metric-grid"><div class="metric">Current representation<strong class="big" id="representation"></strong></div><div class="metric">Total value<strong class="big" id="total-value"></strong></div><div class="metric">Written sum<strong class="big" id="written"></strong></div></div><p id="mat-feedback" class="notice" aria-live="polite"></p></section>
<div class="grid"><section class="panel"><h2>Start with the learner’s meaning</h2><p>The fictional written response to 27 + 15 is <strong>312</strong>. It is incorrect; its cause is not established.</p><p>Ask: “What does each digit in 312 mean? Show 27 and 15 with tens and ones. What did you combine?”</p><p>Prepare five ten-strips, each worth 10 units, and 40 single-unit markers. Use accessible materials that suit the learner.</p><label for="initial-explanation">Actual explanation of 312 — teacher records after asking</label><textarea id="initial-explanation"></textarea></section><section class="panel"><h2>Independent task · 28 + 16</h2><p>Build or draw the quantities. Show any exchange. Record the answer and explain why its value stays the same.</p><label for="learner-answer">Learner’s written sum</label><input id="learner-answer" type="text" value=""><label for="learner-representation">Learner’s representation</label><textarea id="learner-representation"></textarea><label for="learner-explanation">Learner’s explanation</label><textarea id="learner-explanation"></textarea><button type="button" id="review-evidence" class="secondary">Review evidence completeness</button><p id="evidence-feedback" aria-live="polite">No learner evidence recorded.</p></section></div>
<section class="panel"><h2>20-minute teaching sequence</h2><div class="scroll"><table><caption>Editable planned minutes</caption><thead><tr><th>Activity</th><th>Minutes</th><th>Elapsed</th></tr></thead><tbody><tr><td>Inspect the written response</td><td><label class="muted" for="t-0">Inspect the written response minutes</label><input class="time-input" id="t-0" type="number" min="1" max="120" value="3"></td><td id="t-range-0"></td></tr><tr><td>Model 27 + 15</td><td><label class="muted" for="t-1">Model 27 + 15 minutes</label><input class="time-input" id="t-1" type="number" min="1" max="120" value="5"></td><td id="t-range-1"></td></tr><tr><td>Contrast 23 + 14</td><td><label class="muted" for="t-2">Contrast 23 + 14 minutes</label><input class="time-input" id="t-2" type="number" min="1" max="120" value="5"></td><td id="t-range-2"></td></tr><tr><td>Independent 28 + 16</td><td><label class="muted" for="t-3">Independent 28 + 16 minutes</label><input class="time-input" id="t-3" type="number" min="1" max="120" value="4"></td><td id="t-range-3"></td></tr><tr><td>Record evidence / next step</td><td><label class="muted" for="t-4">Record evidence / next step minutes</label><input class="time-input" id="t-4" type="number" min="1" max="120" value="3"></td><td id="t-range-4"></td></tr></tbody></table></div><p id="t-total" class="tag" aria-live="polite"></p><button type="button" id="t-restore" class="secondary">Restore original timing</button><label for="support">Support actually used</label><input id="support" type="text" value=""><label for="next-step">Teacher’s next step, based on observed evidence</label><textarea id="next-step"></textarea><label for="plan-text">Teacher plan and actual evidence</label><textarea id="plan-text" readonly></textarea><button type="button" id="select-plan-text" class="secondary">Select text</button><p id="plan-text-status" class="muted">Select the text, then use your device’s copy command. Nothing is saved.</p></section>
<details><summary>Teacher key — keep separate from the learner copy</summary><p>27 + 15: 3 tens and 12 ones become 4 tens and 2 ones, total 42. Remove 10 ones when adding the new ten. The written ones digit is 2; the extra ten joins the 3 tens to make 4.</p><p>23 + 14: 3 tens and 7 ones, total 37; no exchange needed. Independent 28 + 16: 3 tens and 14 ones become 4 tens and 4 ones, total 44. These are authored answers, not evidence of learner mastery.</p></details>
<section class="panel"><h2>Clean learner task</h2><label for="learner-text">Answer-free learner copy</label><textarea id="learner-text" readonly>28 + 16
Build or draw both quantities using tens and ones.
Show any exchange and explain why the total value stays the same.
Written sum: ______
Representation: ______
Explanation: ______</textarea><button type="button" id="select-learner-text" class="secondary">Select learner text</button><p id="learner-text-status" class="muted">Select, then manually copy. This copy contains no teacher answer.</p></section><footer>Screen representations support instruction; they do not diagnose the cause of an error, assign an intervention tier or establish mastery. Actual records are local and unsaved.</footer></main><script>const $=id=>document.getElementById(id);const on=(id,fn)=>$(id).addEventListener('click',fn);const text=(id,value)=>$(id).textContent=value;const bind=(id,fn,event='input')=>$(id).addEventListener(event,fn);const selectText=id=>{if(!$(id).value){text(id+'-status','Complete the required fields before selecting text.');return;}$(id).focus();$(id).select();text(id+'-status','Text selected. Use your device’s copy command; nothing has been sent or saved.');};
let stage='separate';function representationFor(s){return s==='separate'?{t:3,o:12,sum:42,label:'2t 7o + 1t 5o'}:s==='combined'?{t:3,o:12,sum:42,label:'3 tens + 12 ones'}:s==='exchanged'?{t:4,o:2,sum:42,label:'4 tens + 2 ones'}:{t:3,o:7,sum:37,label:'3 tens + 7 ones'};}function draw(){const r=representationFor(stage);$('tens').innerHTML=Array.from({length:r.t},(_,i)=>'<span class="ten" aria-label="ten units">'+(stage==='separate'?(i<2?'27':'15'):'10')+'</span>').join('');$('ones').innerHTML=Array.from({length:r.o},(_,i)=>'<span class="one" aria-label="one unit">'+(stage==='separate'?(i<7?'27':'15'):'1')+'</span>').join('');text('representation',r.label);text('total-value',String(r.sum));text('written',stage==='contrast'?'23 + 14 = 37':'27 + 15 = 42');text('mat-feedback',stage==='separate'?'The labels identify each addend: 27 has 2 tens and 7 ones; 15 has 1 ten and 5 ones.':stage==='combined'?'Combined: 3 tens and 12 ones. There are enough ones to exchange 10 for one ten.':stage==='exchanged'?'10 ones removed; 1 ten added. 4 tens and 2 ones still have value 42.':'3 tens and 7 ones have value 37. Fewer than 10 ones: no exchange is needed.');$('combine').disabled=stage!=='separate';$('exchange').disabled=stage!=='combined';}on('model',()=>{stage='separate';draw();});on('combine',()=>{if(stage==='separate')stage='combined';draw();});on('exchange',()=>{if(stage==='combined')stage='exchanged';draw();});on('contrast',()=>{stage='contrast';draw();});function plan(){const s=schedule();$('plan-text').value=s?'Math intervention plan — '+s.total+' minutes\n'+timeNames.map((n,i)=>s.blocks[i].start+'–'+s.blocks[i].end+' min: '+n).join('\n')+'\nPrompt about 312: ask what each digit means; cause unknown.\nModel 27 + 15, contrast 23 + 14, independent 28 + 16.\nActual explanation of 312: '+($('initial-explanation').value||'[not recorded]')+'\nIndependent answer: '+($('learner-answer').value||'[not recorded]')+'\nRepresentation: '+($('learner-representation').value||'[not recorded]')+'\nExplanation: '+($('learner-explanation').value||'[not recorded]')+'\nSupport: '+($('support').value||'[not recorded]')+'\nNext step: '+($('next-step').value||'[teacher review needed]'):'';} const timeNames=["Inspect the written response","Model 27 + 15","Contrast 23 + 14","Independent 28 + 16","Record evidence / next step"],timeDefaults=[3,5,5,4,3];function schedule(){let total=0;const blocks=[];for(let i=0;i<timeDefaults.length;i++){const v=$('t-'+i).value;if(!/^\d+$/.test(v)||+v<1||+v>120)return null;blocks.push({start:total,end:total+(+v)});total+=+v;}return {total,blocks};}function updateTiming(){const s=schedule();text('t-total',s?s.total+' minutes':'Timing incomplete');timeDefaults.forEach((_,i)=>text('t-range-'+i,s?s.blocks[i].start+'–'+s.blocks[i].end+' min':'—'));plan();}timeDefaults.forEach((_,i)=>bind('t-'+i,updateTiming));on('t-restore',()=>{timeDefaults.forEach((v,i)=>$('t-'+i).value=String(v));updateTiming();});updateTiming();['initial-explanation','learner-answer','learner-representation','learner-explanation','support','next-step'].forEach(k=>bind(k,()=>{text('evidence-feedback','Evidence edited — review again.');plan();}));on('review-evidence',()=>{const missing=['learner-answer','learner-representation','learner-explanation'].filter(k=>!$(k).value.trim());text('evidence-feedback',missing.length?'Independent evidence incomplete: '+missing.map(k=>k.replace('learner-','')).join(', ')+'.':'Answer, representation and explanation recorded. A teacher must interpret the evidence; no diagnosis or mastery decision has been made.');});on('select-plan-text',()=>selectText('plan-text'));on('select-learner-text',()=>selectText('learner-text'));draw();globalThis.app={representationFor,schedule,get:()=>stage};</script></body></html>