An ordered shape sequence with a diagnostic blue example, separate learner hypothesis, and transfer cases

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>Labeled shape inquiry · teacher preparation</title><style>*{box-sizing:border-box}body{margin:0;background:#f4f1e9;color:#343e39;font:16px/1.6 system-ui,sans-serif}main{max-width:1080px;margin:auto;padding:28px}h1{font:700 clamp(31px,5vw,48px)/1.12 Georgia,serif;margin:12px 0 18px}h2{font-size:24px;line-height:1.3}h3{font-size:20px}p{margin:8px 0 16px}p,h1,h2,h3,label,button{overflow-wrap:anywhere}div,section,article{min-width:0}.eyebrow{font-size:16px;letter-spacing:.08em;font-weight:750}.panel{padding:22px;margin:22px 0;background:#fffefa;border:1px solid #c6c8b5;border-radius:8px}.scope{padding:20px;background:#405d49;color:white;border-radius:8px}.cards{display:grid;grid-template-columns:1fr 1fr;gap:18px}.card{padding:16px;border:1px solid #bbc9b1;border-top:5px solid #688955;background:#f0f5e9}.card.no{border-color:#a37e56;background:#faf0e2}.card h3{margin:0 0 10px}.classification{font-size:20px;font-weight:750}.card svg{display:block;width:100%;max-width:320px;height:auto;margin:10px auto;background:white;border-radius:5px}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}button,textarea{font:inherit}button{min-height:44px;padding:10px 15px;border:1px solid #6d845b;border-radius:5px;background:white;color:inherit;cursor:pointer}button:disabled{cursor:default;opacity:.6}button:hover:not(:disabled){box-shadow:inset 0 0 0 1px #405d49}button:focus-visible,textarea:focus-visible{outline:3px solid #b35a25;outline-offset:3px}.note{padding:16px;background:#fff0d7;border-left:5px solid #b17d3e}label{display:block;font-weight:650;margin:14px 0 6px}textarea{display:block;width:100%;min-width:0;min-height:125px;padding:10px;border:1px solid #859570;border-radius:4px;background:white;color:inherit;resize:vertical}footer{border-top:1px solid #c6c8b5;padding-top:18px;margin-top:26px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}.panel{padding:16px}.cards{grid-template-columns:1fr}.toolbar button{flex:1 1 140px}}</style></head><body><main><h1>Which shapes belong?</h1><p>Reveal labeled cases and test a rule. This is an authored teaching exercise.</p>
<section class="panel" aria-labelledby="sequence-title"><h2 id="sequence-title">Ordered labeled cases</h2><div id="cases" class="cards"></div><p>Ordinary, noncrossing flat shapes. Color is also named in text. Every small square angle mark means 90°; angle labels state the supplied geometry rather than asking you to infer it from pixels.</p><div class="toolbar"><button id="next" type="button">Next labeled case</button><button id="model" type="button" aria-expanded="false" aria-controls="model-content" disabled>Read modeled hypothesis</button><button id="target" type="button" aria-expanded="false" aria-controls="target-content">Show target/key</button></div><p id="sequence-status" role="status" aria-live="polite">1 of 6 labeled cases shown. Earlier cases remain available.</p><div id="model-content" hidden><h3>Authored modeled hypothesis after A–C</h3><p>“The Yes group contains red shapes with four right angles.”</p><p>This invented teaching hypothesis fits A–C. D’s Yes label challenges red as necessary. A revised modeled rule is a quadrilateral with four right angles. E tests a rule that excludes equal sides; F prevents accepting all blue shapes.</p><p>This is not a recorded learner response and never fills your writing area.</p></div><p class="note">Target and key controls are public, not secure teacher-only access. Keep the key out of learners’ initial display in an actual lesson. No pupil response, learning gain or performance result is represented.</p><div id="target-content" class="note" hidden><h3>Public teacher key</h3><p>Rectangle: an ordinary, noncrossing flat quadrilateral with four right angles. A square meets this definition. A, C, D and E are Yes; B and F are No.</p><p>D varies color while retaining the defining angles. E retains them with four equal sides. This key is visible on request to any viewer.</p></div><label for="hypothesis">Your own tentative rule · retained as cases reveal</label><textarea id="hypothesis" placeholder="Which attributes account for the Yes and No cases? What would test your rule?"></textarea></section>
<section class="panel" aria-labelledby="transfer-title"><h2 id="transfer-title">Try new cases before reading their key</h2><button id="transfer" type="button" aria-expanded="false" aria-controls="transfer-content">Transfer cases</button><div id="transfer-content" hidden><p>Place G and H in Yes or No and explain the deciding attribute before opening the transfer key.</p><div id="transfer-cards" class="cards"></div><label for="answer-g">Your G placement and reason</label><textarea id="answer-g"></textarea><label for="answer-h">Your H placement and reason</label><textarea id="answer-h"></textarea><button id="transfer-key" type="button" aria-expanded="false" aria-controls="transfer-key-content">Show transfer key</button><div id="transfer-key-content" class="note" hidden><h3>Transfer key · authored explanation</h3><p><strong>G: Yes.</strong> Its four right angles remain right angles when tilted; unequal adjacent side lengths do not remove the property.</p><p><strong>H: No.</strong> Its equal sides do not supply four right angles. The supplied interior angles are 60°, 120°, 60° and 120°.</p><p>Discuss explanations without automatic prose scoring or saved-sentence matching.</p></div></div></section>
<section class="panel" aria-labelledby="reset-title"><h2 id="reset-title">Reset only when you are ready to start again</h2><button id="reset" type="button">Reset sequence and writing</button><p id="reset-status" role="status" aria-live="polite">Your hypothesis and transfer writing start blank. No work is submitted.</p><div id="confirmation" hidden><p>Clear all three writing fields, return to card A only, and hide the model, target and transfer keys?</p><div class="toolbar"><button id="confirm-reset" type="button">Reset and clear writing</button><button id="keep" type="button">Keep my sequence and writing</button></div></div></section><footer>Typing is temporary in this open page; reloading clears it. The full card data and keys are public teaching material. No network, storage, submission, performance score or secure-key claim is used.</footer></main>
<script>(()=>{'use strict';const $=id=>document.getElementById(id);const svgNS='http://www.w3.org/2000/svg';function rightShape(x,y,w,h,color,rotate=false){const path=`M ${x+12} ${y} V ${y+12} H ${x} M ${x+w-12} ${y} V ${y+12} H ${x+w} M ${x+12} ${y+h} V ${y+h-12} H ${x} M ${x+w-12} ${y+h} V ${y+h-12} H ${x+w}`;const labels=[[x-32,y-6],[x+w+5,y-6],[x-32,y+h+20],[x+w+5,y+h+20]].map(([a,b])=>`<text x="${a}" y="${b}" font-size="16" fill="#20322e">90°</text>`).join('');return `<g${rotate?' transform="translate(140 120) rotate(30)"':''}><rect x="${x}" y="${y}" width="${w}" height="${h}" fill="${color}" fill-opacity=".2" stroke="${color}" stroke-width="3"/><path d="${path}" fill="none" stroke="#20322e" stroke-width="2"/>${labels}</g>`;}function slanted(equal,color){const tr=equal?190:220,br=equal?140:170;const ticks=equal?'<path d="M140 68.4v10 M90 155v10 M61.5 114.7l7 4 M161.5 114.7l7 4" stroke="#20322e" stroke-width="2"/>':'';return `<polygon points="90,73.39745962155614 ${tr},73.39745962155614 ${br},160 40,160" fill="${color}" fill-opacity=".2" stroke="${color}" stroke-width="3"/><text x="94" y="98" font-size="16">120°</text><text x="${tr-43}" y="97" font-size="16">60°</text><text x="${br-34}" y="149" font-size="16">120°</text><text x="53" y="146" font-size="16">60°</text>${ticks}`;}const cards=[{id:'A',yes:true,text:'Red, wide quadrilateral with four marked right angles.',drawing:rightShape(40,55,180,90,'#b33d35')},{id:'B',yes:false,text:'Red, slanted parallelogram with two 60° and two 120° angles.',drawing:slanted(false,'#b33d35')},{id:'C',yes:true,text:'Red, tall quadrilateral with four marked right angles.',drawing:rightShape(90,30,80,150,'#b33d35')},{id:'D',yes:true,text:'Blue, wide quadrilateral with four marked right angles.',drawing:rightShape(40,55,180,90,'#2b62a3')},{id:'E',yes:true,text:'Blue square with four equal sides and four marked right angles.',drawing:rightShape(60,35,140,140,'#2b62a3')},{id:'F',yes:false,text:'Blue oval with a curved boundary.',drawing:'<ellipse cx="140" cy="115" rx="95" ry="55" fill="#2b62a3" fill-opacity=".2" stroke="#2b62a3" stroke-width="3"/>'}];const transfers=[{id:'G',text:'Tilted blue quadrilateral with four marked right angles and unequal adjacent side lengths.',drawing:rightShape(-75,-35,150,70,'#2b62a3',true)},{id:'H',text:'Blue rhombus with equal sides, two 60° angles and two 120° angles. Matching side ticks indicate equal sides.',drawing:slanted(true,'#2b62a3')}];let shown=1;function renderCard(c,labeled){const a=document.createElement('article');a.id='card-'+c.id;a.className='card'+(labeled&&!c.yes?' no':'');const h=document.createElement('h3');h.textContent='Card '+c.id+(labeled?' · '+(c.yes?'Yes':'No'):' · place and explain');const svg=document.createElementNS(svgNS,'svg');svg.setAttribute('viewBox','0 0 280 240');svg.setAttribute('role','img');svg.setAttribute('aria-label','Card '+c.id+': '+c.text);const title=document.createElementNS(svgNS,'title');title.textContent='Card '+c.id+': '+c.text;svg.append(title);const group=document.createElementNS(svgNS,'g');group.innerHTML=c.drawing;svg.append(group);const p=document.createElement('p');p.textContent=c.text;a.append(h,svg,p);return a;}function sequence(){ $('cases').replaceChildren();for(const c of cards.slice(0,shown))$('cases').append(renderCard(c,true));$('next').disabled=shown===6;$('model').disabled=shown<3;$('sequence-status').textContent=shown+' of 6 labeled cases shown. Earlier cases remain available.';}$('next').addEventListener('click',()=>{if(shown<6){shown++;sequence();if(shown===6)$('model').focus();}});for(const c of transfers)$('transfer-cards').append(renderCard(c,false));function toggle(button,content,show,hide){const open=$(content).hidden;$(content).hidden=!open;$(button).setAttribute('aria-expanded',String(open));$(button).textContent=open?hide:show;}$('model').addEventListener('click',()=>toggle('model','model-content','Read modeled hypothesis','Hide modeled hypothesis'));$('target').addEventListener('click',()=>toggle('target','target-content','Show target/key','Hide target/key'));$('transfer').addEventListener('click',()=>toggle('transfer','transfer-content','Transfer cases','Hide transfer cases'));$('transfer-key').addEventListener('click',()=>toggle('transfer-key','transfer-key-content','Show transfer key','Hide transfer key'));$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('reset-status').textContent='Kept your sequence, open views and all writing.';$('reset').focus();});$('confirm-reset').addEventListener('click',()=>{for(const field of document.querySelectorAll('textarea'))field.value='';for(const [button,content,caption]of [['model','model-content','Read modeled hypothesis'],['target','target-content','Show target/key'],['transfer','transfer-content','Transfer cases'],['transfer-key','transfer-key-content','Show transfer key']]){$(content).hidden=true;$(button).setAttribute('aria-expanded','false');$(button).textContent=caption;}shown=1;sequence();$('confirmation').hidden=true;$('reset-status').textContent='Sequence returned to A only; all three writing fields cleared and keys hidden.';$('next').focus();});sequence();})();</script></body></html>