Classroom measurement scavenger hunt: subtract the two endpoints

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html>
<html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Classroom measurement scavenger hunt: subtract the two endpoints</title><style>:root{--bg:#f6f0e3;--paper:#fffdf7;--ink:#283f38;--accent:#376548;--tint:#e4efdc;--line:#c3cdbb;--muted:#4c6051;--button:#fff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.55 system-ui,sans-serif}main{max-width:1000px;margin:auto;padding:22px clamp(18px,4vw,42px) 38px}header{border-bottom:2px solid var(--accent);padding-bottom:14px;margin-bottom:18px}h1{font-size:clamp(26px,4vw,36px);line-height:1.15;margin:4px 0 10px}h2{font-size:22px;line-height:1.3;margin:0 0 14px}h3{font-size:19px}p{margin:0 0 14px}.eyebrow{font-size:16px;font-weight:750;color:var(--accent)}.lede{max-width:800px}.panel{background:var(--paper);border:1px solid var(--line);border-radius:9px;padding:20px;margin:18px 0}.workbench{border-top:4px solid var(--accent)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.grid>*{min-width:0}label{display:block;font-size:16px;font-weight:650;margin:12px 0 6px}input,textarea,select{font:inherit;color:var(--ink);background:var(--paper);border:1px solid #7b8893;border-radius:5px;padding:10px;width:100%;min-width:0}textarea{resize:vertical;line-height:1.45}input[type=checkbox],input[type=radio]{width:21px;height:21px;vertical-align:middle;margin-right:9px}button{font:650 16px/1.4 system-ui,sans-serif;padding:11px 15px;min-height:46px;background:var(--accent);border:2px solid var(--accent);color:var(--button);border-radius:5px;cursor:pointer}button:disabled{opacity:.55;cursor:default}.buttons{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}.buttons>*{flex:1 1 auto}button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #c05b00;outline-offset:3px}.result{font:600 17px/1.6 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--tint);padding:16px;border-left:4px solid var(--accent);min-height:65px;margin:16px 0}.sample{padding:14px 16px;border-left:3px solid var(--accent);background:var(--tint);margin:12px 0}.muted{color:var(--muted)}pre,code{font:16px/1.6 ui-monospace,monospace;white-space:pre-wrap;overflow-wrap:anywhere}pre{margin:12px 0}table{border-collapse:collapse;width:100%;table-layout:fixed;font-size:16px}th,td{text-align:left;vertical-align:top;padding:10px 8px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}th{background:var(--tint)}svg{max-width:100%;height:auto;display:block}details{margin:20px 0}summary{font-weight:700;cursor:pointer}footer{margin-top:28px;border-top:1px solid var(--line);padding-top:18px;font-size:16px}a{color:var(--accent)}.reading{font-family:Georgia,serif}.codeview{border-radius:0;box-shadow:7px 7px 0 var(--tint)}.token{display:inline-block;padding:8px 12px;margin:4px;border:1px solid var(--line);border-radius:4px;background:var(--paper)}.swatch{min-height:30px}.split{display:grid;grid-template-columns:1.1fr 1fr;gap:22px}ol{padding-left:25px}li{margin:9px 0}@media(max-width:600px){main{padding:16px}.grid,.split{grid-template-columns:1fr}.panel{padding:16px;margin:14px 0}h1{font-size:27px}header{padding-bottom:10px}.buttons{gap:8px}.result{padding:13px}th,td{padding:8px 5px}}</style></head><body><main><header><div class="eyebrow">Illustrative ruler cards · centimeters</div><h1>An endpoint is not the length</h1><p class="lede">M1: 3 cm → 9 cm. Subtract start from end to find the span. Results are rounded to ten decimal places with trailing zeros removed.</p></header><svg id="ruler" viewBox="0 0 360 138" role="img" aria-label="Schematic ruler with strip spanning 3 to 9 centimeters"><path d="M30 96H330" stroke="#334f42" stroke-width="2"/><path id="span" d="M105 78H255" stroke="#b16524" stroke-width="14"/><text id="start-label" x="105" y="25" text-anchor="middle" font-size="20">Start: 3 cm</text><text id="end-label" x="255" y="52" text-anchor="middle" font-size="20">End: 9 cm</text><text id="diagram-state" x="180" y="62" text-anchor="middle" font-size="20"></text><text x="30" y="126" font-size="20">Scale: 0</text><text x="330" y="126" text-anchor="end" font-size="20">12 cm</text></svg><pre id="result" class="result" role="status" aria-live="polite" aria-atomic="true">M1 worked result: 9 − 3 = 6 cm.</pre><div class="grid"><label for="start">Start reading</label><input id="start" value="3" ><label for="end">End reading</label><input id="end" value="9" ></div><label for="unit">Declared unit</label><input id="unit" value="cm" ><div class="buttons"><button type="button" id="calculate">Calculate span</button><button type="button" id="shift">Load M2 · 0 to 6</button></div><section class="panel"><h2>Actual hunt record · leave blank until measured</h2><table><tr><th>Object / feature</th><th>Estimate</th><th>Readings / length</th></tr><tr><td>H1 paper strip, end-to-end</td><td></td><td></td></tr><tr><td>H2 notebook, long edge</td><td></td><td></td></tr><tr><td>H3 pencil, tip-to-end</td><td></td><td></td></tr></table></section><footer><p>The screen ruler is schematic and not a calibrated measuring tool. Use a suitable real ruler for actual classroom observations.</p><p>Use a prepared HTML explanation in <a href="https://nos-workspace.com/">NOS</a> when reviewing these ruler cards. Eligible static instructions can be revised in visual editing mode; dynamic outputs follow their controls.</p></footer></main><script>
(()=>{'use strict';const $=s=>document.querySelector(s);const out=s=>{$('#result').textContent=s;};const val=id=>$('#'+id).value;const num=id=>{const s=val(id).trim();return s===''?NaN:Number(s);};const on=(id,fn)=>$('#'+id).addEventListener('click',fn);const watch=ids=>{for(const id of ids)for(const event of ['input','change'])$('#'+id).addEventListener(event,()=>out('Inputs changed. Run the action to update this result.'));};const fmt=(n,d=4)=>Math.abs(n)<1e-10?(0).toFixed(d):n.toFixed(d);
function pendingDiagram(){for(const id of ['span','start-label','end-label'])$('#'+id).setAttribute('visibility','hidden');$('#diagram-state').textContent='Diagram pending calculation.';$('#ruler').setAttribute('aria-label','Schematic ruler: diagram pending calculation.');}function draw(a,b){const x=n=>30+n*25;$('#span').setAttribute('d','M'+x(a)+' 78H'+x(b));for(const [id,n,prefix]of [['start-label',a,'Start'],['end-label',b,'End']]){$('#'+id).textContent=prefix+': '+n+' cm';$('#'+id).setAttribute('x',Math.max(80,Math.min(280,x(n))));}for(const id of ['span','start-label','end-label'])$('#'+id).setAttribute('visibility','visible');$('#diagram-state').textContent='';$('#ruler').setAttribute('aria-label','Schematic ruler with strip spanning '+a+' to '+b+' centimeters');}watch(['start','end','unit']);for(const id of ['start','end','unit'])for(const event of ['input','change'])$('#'+id).addEventListener(event,pendingDiagram);on('shift',()=>{$('#start').value='0';$('#end').value='6';$('#unit').value='cm';pendingDiagram();out('M2 loaded. Calculate its span.');});on('calculate',()=>{pendingDiagram();const a=num('start'),b=num('end');if(!Number.isFinite(a)||!Number.isFinite(b)){out('Insufficient evidence: both endpoint readings are required.');return;}if(val('unit').trim()!=='cm'){out('Unit unresolved: use the declared cm scale before reporting a length.');return;}if(a<0||b>12||a>12||b<0||b<a){out('Check readings: use 0–12 cm and end greater than or equal to start.');return;}draw(a,b);out(b+' − '+a+' = '+Number((b-a).toFixed(10))+' cm. Source: illustrative card, not an observed object.');});
})();
</script></body></html>