Same room, two scales · geography lesson — Teach learners to distinguish map distance from ground distance, construct a scaled classroom plan and explain why a second scale changes…

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>Same room, two scales · geography lesson</title><style>
*{box-sizing:border-box}body{margin:0;background:#edf5ee;color:#2d4a3f;font:16px/1.5 system-ui,sans-serif}main{max-width:1110px;margin:auto;padding:30px}h1{font:clamp(32px,4vw,46px)/1.15 Georgia,serif;letter-spacing:-.03em;margin:6px 0 12px}h2{font:27px/1.2 Georgia,serif;margin:0 0 15px}h3{font-size:17px;margin:0 0 10px}p{margin:0 0 12px}.eyebrow{font-size:11px;letter-spacing:.13em;font-weight:750;text-transform:uppercase;color:#62816f}.small{font-size:13px;color:#62796c}.review{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin:24px 0}.panel{background:#fffef8;border:1px solid #cbdcc7;border-radius:12px;padding:24px}.map{width:100%;display:block;background:#f9fbf1;border:1px solid #dbe5d1;border-radius:7px}.map text{font-family:system-ui;fill:#315a47}.row{display:flex;gap:9px;align-items:center;flex-wrap:wrap}button{font:700 14px system-ui;min-height:44px;background:#4c765c;color:white;border:1px solid #4c765c;border-radius:6px;padding:10px 17px;cursor:pointer}button.secondary{background:#fffef8;color:#4c765c}button[aria-pressed=true]{background:#294d39;color:white}button:disabled{opacity:.5;cursor:default}:focus-visible{outline:3px solid #bd822e;outline-offset:3px}.result{font-size:38px;letter-spacing:-.035em;font-weight:750;line-height:1.2;margin:12px 0}.conversion{background:#e8f0de;padding:16px;border-left:4px solid #90a879;border-radius:5px;margin:15px 0;font-size:15px}.legend{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin-top:15px;font-size:13px}.desk{display:inline-block;width:28px;height:15px;border:2px solid #667d64;vertical-align:middle;margin-right:5px}.model{display:grid;grid-template-columns:1fr 1fr;gap:22px}.formula{font-size:29px;font-weight:700;color:#406b4e;margin-top:9px}label{display:block;font-size:13px;font-weight:650}input,textarea{display:block;width:100%;padding:10px;border:1px solid #9db492;border-radius:5px;font:16px/1.5 system-ui;color:#2d4a3f;background:white;margin:6px 0 14px}textarea{min-height:100px;resize:vertical}.error{min-height:23px;color:#a43a27;font-size:14px}.timetable{margin-top:25px}.time-row{display:grid;grid-template-columns:75px 1fr 70px;gap:15px;padding:15px 0;border-top:1px solid #dbe5d1}.time-row p{font-size:14px;margin:5px 0}.range{font-size:13px;font-weight:700;color:#658151}.time-row input{margin:0;text-align:center}.total{font-size:27px;font-weight:750}.learner{margin-top:25px}.drawing-spaces{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}.drawing-space{height:155px;background:radial-gradient(#cbd7c7 1px,transparent 1px) 0 0/15px 15px;border:1px dashed #8da486;border-radius:5px;padding:13px;font-size:13px}.learner textarea[readonly]{font:13px/1.7 ui-monospace,Consolas,monospace;min-height:280px;background:#fcfdf8}.observations{display:grid;grid-template-columns:1fr 1fr;gap:18px}details{margin-top:25px;padding-top:17px;border-top:1px solid #cbdcc7}summary{cursor:pointer;min-height:44px;font-weight:700}footer{font-size:13px;color:#62796c;max-width:100ch;margin:25px 0}@media(max-width:770px){main{padding:23px 16px}.review,.model,.observations{grid-template-columns:1fr}.panel{padding:20px}.result{font-size:33px}.time-row{grid-template-columns:65px 1fr 65px;gap:10px}}@media(max-width:400px){main{padding:20px 12px}.drawing-spaces{grid-template-columns:1fr}.time-row{grid-template-columns:1fr 65px}.range{grid-column:1/-1}.row button{flex:1;padding:10px}}
</style></head><body><main><p class="eyebrow">Original illustrative geography lesson · 45 minutes</p><h1>Change the map. Keep the room.</h1><p>Compare two representations of the same fictional 6 m × 4 m classroom.</p><section class="review"><div class="panel"><h2>Teacher scale comparison</h2><svg class="map" viewBox="0 0 570 270" role="img" aria-label="Schematic comparison: 1 to100 intended6 by4centimeters, 1 to200 intended3 by2centimeters; same6 by4meter ground room"><text x="40" y="30" font-size="18" font-weight="700">1:100</text><rect id="room-100" x="40" y="55" width="240" height="160" fill="#e8efd9" stroke="#4b7657" stroke-width="4"/><text x="160" y="140" text-anchor="middle" font-size="20">6 cm × 4 cm</text><text x="350" y="105" font-size="18" font-weight="700">1:200</text><rect id="room-200" x="350" y="135" width="120" height="80" fill="#f2f5e8" stroke="#a4b69a" stroke-width="2"/><text x="410" y="182" text-anchor="middle" font-size="16">3 cm × 2 cm</text><text x="40" y="249" font-size="15">Both represent ground dimensions 6 m × 4 m.</text></svg><p class="small" style="margin-top:12px">Schematic; intended print dimensions shown. Screen pixels are not physical centimeters.</p><div class="legend"><span><b>D</b> = door marker</span><span><i class="desk"></i>desk outline = desk symbol</span></div><p class="small" style="margin-top:9px">Feature positions are not supplied. Add them only from the teacher's brief; symbols do not supply measured sizes.</p></div><div class="panel"><p class="eyebrow">Current teacher review scale</p><div class="row"><button id="scale-100" type="button" aria-pressed="true">1:100</button><button id="scale-200" type="button" class="secondary" aria-pressed="false">1:200</button></div><div id="plan-size" class="result" role="status">6 cm × 4 cm</div><p>Intended paper plan dimensions</p><div class="conversion"><p id="length-trace">6 m = 600 cm; 600 ÷ 100 = 6 cm.</p><p id="width-trace" style="margin-bottom:0">4 m = 400 cm; 400 ÷ 100 = 4 cm.</p></div><p id="ground-size"><strong>Ground size stays 6 m × 4 m.</strong></p><p class="small">Materials: ruler, paper, pencil, source dimensions, both scale labels and teacher-supplied legend/feature positions. Verify physical print dimensions with a ruler under the intended print settings.</p></div></section><section class="panel model"><div><h2>Teacher model: map line to ground</h2><label for="line-cm">Drawing line length · cm<input id="line-cm" value="2" inputmode="decimal"></label><p class="small">Uses the currently selected ratio. Convert to ground centimeters, then meters.</p></div><div><p class="eyebrow" id="line-scale">At 1:100</p><div id="line-ground" class="formula">2 m on the ground</div><p id="line-trace">2 cm × 100 = 200 cm = 2 m.</p><p id="line-error" class="error" role="alert"></p></div></section><section class="panel timetable"><div class="row" style="justify-content:space-between"><h2>Editable lesson timetable</h2><div id="total" class="total">45 minutes</div></div><div id="time-rows"></div><p id="time-error" class="error" role="alert"></p><button id="restore-times" type="button" class="secondary">Restore original minutes</button></section><section class="panel learner"><h2>Learner drawing brief · answer-free copy</h2><p class="small">Blank paper tasks are separate from the teacher comparison above. These boxes mark drawing space; they do not establish print scale.</p><div class="drawing-spaces"><div class="drawing-space">Plan A · scale 1:100<br>Ground dimensions 6 m × 4 m<br><br>Draw and label your plan on paper.</div><div class="drawing-space">Plan B · scale 1:200<br>Ground dimensions 6 m × 4 m<br><br>Draw and label the same room.</div></div><label for="learner-brief">Exact learner brief · manually copy to the required worksheet<textarea id="learner-brief" readonly></textarea></label><button id="select-brief" type="button" class="secondary">Select learner text</button><p id="selection-status" class="small" role="status" style="margin-top:10px"></p></section><details><summary>Separate teacher key</summary><p class="small">6 m = 600 cm and 4 m = 400 cm. Divide both by 100 for 6 cm × 4 cm; divide both by 200 for 3 cm × 2 cm. A 2 cm line at 1:100 represents 200 cm = 2 m. Ground size stays 6 m × 4 m. The screen schematic's physical size is not measured print evidence.</p></details><section class="panel" style="margin-top:25px"><h2>Actual teaching evidence · starts blank</h2><div class="observations"><label for="drawing-evidence">Drawing evidence / source reference<textarea id="drawing-evidence"></textarea></label><label for="explanation">Learner's actual explanation<textarea id="explanation"></textarea></label><label for="review-next">Teacher review / conversion to revisit<textarea id="review-next"></textarea></label></div></section><footer>Original fictional room, not a survey. This HTML teacher-review and arithmetic companion does not create a physically scaled print file, invoke browser printing, collect student answers, grade explanations, store records or establish curriculum approval. Keep the required paper task and school record authoritative. The learner text excludes the teacher dimensions and conversion answers.</footer></main><script>
'use strict';const $=id=>document.getElementById(id);let scale=100;const blocks=[['Context','Distinguish the room from its representation.',5],['Model','Convert 6 m to 600 cm; apply 1:100 to a ground side.',7],['Draw','Produce both labeled paper plans with the supplied ground dimensions.',12],['Compare','Identify what changes and what stays; check D and desk-outline legend.',10],['Explain','Use the 2 cm line question and a written explanation of scale.',7],['Review','Record actual drawing/explanation evidence; choose the conversion to revisit.',4]];
function roomModel(denominator){return{length:600/denominator,width:400/denominator,ground:[6,4]};}
function lineModel(raw,denominator){const s=raw.trim();if(!/^(?:\d+\.?\d*|\.\d+)$/.test(s)||!Number.isFinite(+s)||+s<0||+s>1000)return{error:'Enter a finite drawing length from 0 to 1000 cm; blank is not zero.'};return{cm:+s*denominator,meters:+s*denominator/100,line:+s};}
function line(){const r=lineModel($('line-cm').value,scale);$('line-scale').textContent='At 1:'+scale;$('line-error').textContent=r.error||'';$('line-ground').textContent=r.error?'Not calculated':r.meters+' m on the ground';$('line-trace').textContent=r.error?'':r.line+' cm ×'+scale+' = '+r.cm+' cm = '+r.meters+' m.';}
function render(){const r=roomModel(scale);$('plan-size').textContent=r.length+' cm × '+r.width+' cm';$('length-trace').textContent='6 m = 600 cm; 600 ÷'+scale+' = '+r.length+' cm.';$('width-trace').textContent='4 m = 400 cm; 400 ÷'+scale+' = '+r.width+' cm.';for(const n of[100,200]){$('scale-'+n).setAttribute('aria-pressed',String(scale===n));$('room-'+n).setAttribute('stroke',scale===n?'#4b7657':'#a4b69a');$('room-'+n).setAttribute('stroke-width',scale===n?'4':'2');}line();}
function schedule(values){if(values.some(v=>!/^\d+$/.test(v.trim())||!Number.isSafeInteger(+v)||+v<1||+v>180))return{error:'Enter whole positive minutes from 1 to 180 for each phase.'};let elapsed=0;return{ranges:values.map(v=>{const start=elapsed;elapsed+=+v;return start+'–'+elapsed+' min';}),total:values.reduce((a,b)=>a+(+b),0)};}
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===45?'':'Current plan differs from the original 45 minutes by '+Math.abs(r.total-45)+' minutes. Review the lesson length.');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.className='range';range.id='range-'+i;row.appendChild(range);const content=document.createElement('div'),strong=document.createElement('strong'),p=document.createElement('p');strong.textContent=b[0];p.textContent=b[1];content.appendChild(strong);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('inputmode','numeric');input.setAttribute('aria-label',b[0]+' minutes');input.addEventListener('input',timing);label.appendChild(input);row.appendChild(label);$('time-rows').appendChild(row);});for(const n of[100,200])$('scale-'+n).addEventListener('click',()=>{scale=n;render();});$('line-cm').addEventListener('input',line);$('restore-times').addEventListener('click',()=>{blocks.forEach((b,i)=>$('minutes-'+i).value=String(b[2]));timing();});$('learner-brief').value=['CLASSROOM SCALE DRAWING TASK','Original fictional room: ground length 6 m, ground width 4 m.','Plan A: draw and label the room at 1:100.','Plan B: draw and label the same room at 1:200.','First convert ground measurements to matching units, then apply each ratio.','Leave space on paper for both plans.','Legend: D = door marker; desk outline = desk symbol.','Door/desk positions and sizes: teacher to supply. Do not infer measurements from symbols.','My Plan A intended paper length: ______ cm; width: ______ cm.','My Plan B intended paper length: ______ cm; width: ______ cm.','A 2 cm drawing line at 1:100 represents ______ on the ground.','What changes when scale changes? __________________________','What stays the same? _____________________________________','Screen images are schematic. Check any required physical print scale with a ruler.'].join('\n');$('select-brief').addEventListener('click',()=>{$('learner-brief').focus();$('learner-brief').select();$('selection-status').textContent='Learner text selected. Copy manually into your required worksheet; no teacher key is included.';});render();timing();
</script></body></html>