Find the uppercase partner — Have learners match a printed lowercase letter to its uppercase identity and distinguish b from d without pretending a clicked answer…

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>Find the uppercase partner</title><style>*{box-sizing:border-box}body{margin:0;font:16px/1.55 system-ui,sans-serif;color:var(--ink);background:var(--bg)}main{max-width:1120px;margin:auto;padding:30px}h1{font-size:clamp(30px,4vw,44px);line-height:1.12;letter-spacing:-.035em;margin:5px 0 12px}h2{font-size:23px;line-height:1.3;margin:0 0 15px}h3{font-size:17px;margin:0 0 8px}p{margin:0 0 12px}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.13em;font-weight:750;color:var(--accent)}.small,footer{font-size:13px;color:var(--muted)}footer{margin:27px 0}.panel{background:white;border:1px solid var(--line);padding:23px;border-radius:9px;margin-top:22px}.two{display:grid;grid-template-columns:1.35fr 1fr;gap:23px}.row{display:flex;gap:9px;flex-wrap:wrap;align-items:center}button{font:700 14px system-ui;min-height:44px;padding:10px 16px;border:1px solid var(--accent);background:var(--accent);color:white;border-radius:5px;cursor:pointer}button.secondary{color:var(--accent);background:white}button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--ink)}button:disabled{opacity:.45;cursor:default}:focus-visible{outline:3px solid #d28b25;outline-offset:3px}label{display:block;font-size:13px;font-weight:650}input,textarea,select{display:block;width:100%;padding:11px;font:16px/1.5 system-ui;color:var(--ink);background:white;border:1px solid #9baab6;border-radius:4px;margin:6px 0 15px}textarea{min-height:100px;resize:vertical}.error{color:#a02b20;font-size:14px;min-height:23px}.result{font-size:40px;line-height:1.25;letter-spacing:-.04em;font-weight:750}.notice{padding:15px;background:#fff3db;border-left:4px solid #cf9d3e;font-size:14px;margin:16px 0}details{margin-top:23px;border-top:1px solid var(--line);padding-top:15px}summary{cursor:pointer;min-height:44px;font-weight:700}.time-row{display:grid;grid-template-columns:75px 1fr 70px;gap:14px;padding:15px 0;border-top:1px solid var(--line)}.time-row p{font-size:14px;margin:5px 0}.time-row input{margin:0;text-align:center}.range{font-size:13px;font-weight:700;color:var(--accent)}[hidden]{display:none!important}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:13px/1.6 ui-monospace,Consolas,monospace} @media(max-width:740px){main{padding:23px 16px}.two{grid-template-columns:1fr;gap:0}.panel{padding:20px}}@media(max-width:380px){main{padding:20px 12px}.panel{padding:17px}.time-row{grid-template-columns:1fr 65px}.range{grid-column:1/-1}.row button{flex:1}}:root{--ink:#263d64;--bg:#eef5ff;--accent:#356cb0;--muted:#637694;--line:#c9d8ee}.play{display:grid;grid-template-columns:1fr 1.5fr;gap:25px;margin:25px 0;background:white;border:1px solid var(--line);padding:27px;border-radius:20px}.glyph{font:180px/1 Arial,Helvetica,sans-serif;text-align:center;background:#fff0b8;border-radius:15px;padding:10px}.choices{display:flex;gap:12px;margin:20px 0}.choices button{flex:1;font:54px/1 Arial,Helvetica,sans-serif;min-height:85px;background:#eff5ff;color:#2b568d;border:2px solid #8cadd6;border-radius:12px}.choices button[aria-pressed=true]{background:#d6e5fa}.feedback{padding:18px;background:#eaf1fc;border-radius:10px;min-height:100px}.feedback strong{display:block;font-size:21px}.count{background:#d8e7fb;padding:12px 17px;border-radius:20px;font-weight:750}@media(max-width:620px){.play{grid-template-columns:1fr;padding:20px;gap:20px}.glyph{font-size:120px}.choices button{font-size:44px;min-height:75px}}</style></head><body><main><p class="eyebrow">Printed letter matching · four original items</p><h1>Find its uppercase partner.</h1><p>Look at the lowercase letter, then choose the same letter in uppercase.</p><div class="row" style="justify-content:space-between;margin-top:22px"><div class="row"><button id="item-Q1" type="button" class="secondary">Q1 · a</button><button id="item-Q2" type="button">Q2 · b</button><button id="item-Q3" type="button" class="secondary">Q3 · d</button><button id="item-Q4" type="button" class="secondary">Q4 · m</button></div><span id="count" class="count" role="status">0 of 4 checked correct</span></div><section class="play"><div><div id="stimulus" class="glyph" aria-label="Lowercase b">b</div><p id="letter-label" class="small" style="text-align:center;margin-top:12px">Q2 · printed lowercase b</p></div><div><h2>Choose one uppercase letter</h2><div id="choices" class="choices"></div><div class="row"><button id="check" type="button">Check pair</button><button id="retry" type="button" class="secondary">Clear this item</button><button id="reset" type="button" class="secondary">Reset all four</button></div><div class="feedback" style="margin-top:20px" role="status"><strong id="verdict">Not answered.</strong><p id="feedback">Choose a printed uppercase partner, then check.</p></div></div></section><details><summary>Teacher reference · separate key and glyph check</summary><p>A–a, B–b, D–d, M–m. Q1=A, Q2=B, Q3=D, Q4=M. b and d are different letter identities. Exact uppercase choices are checked; lowercase responses are not substituted.</p><p>Plain Arial/Helvetica/sans-serif is requested. Before use, inspect the actual rendered b and d: b has its stem left/bowl right; d stem right/bowl left. Confirm the accessible presentation and record any added support. Rendered glyph review is required; decorative fonts are not assumed equivalent.</p></details><section class="panel"><h2>Optional teacher observation · starts blank</h2><label for="spoken">Actual spoken-name observation / support used<textarea id="spoken"></textarea></label><p class="small">Clicking a letter does not establish spoken naming, sounds, handwriting or decoding.</p></section><footer>Local practice only. Each unique item contributes at most one checked point; editing removes its old contribution until checked again. No diagnosis, alphabet mastery, collected grades, external audio/font or saved learner record.</footer></main><script>
'use strict';const $=id=>document.getElementById(id);

const items={Q1:{lower:'a',choices:['A','B','M'],key:'A'},Q2:{lower:'b',choices:['B','D','M'],key:'B'},Q3:{lower:'d',choices:['B','D','A'],key:'D'},Q4:{lower:'m',choices:['M','A','D'],key:'M'}};let current='Q2';const state=Object.fromEntries(Object.keys(items).map(id=>[id,{choice:null,checked:false}]));function assess(id,choice){const q=items[id];if(choice===null)return{title:'Not answered.',message:'Choose a printed uppercase partner, then check.',correct:false};if(choice===q.key)return{title:'The printed pair matches.',message:q.key+' pairs with '+q.lower+'.',correct:true};if(id==='Q2'&&choice==='D')return{title:'Compare b with its partner.',message:'D pairs with d. Look at b: its stem is on the left and its bowl is on the right in the plain letter shape used here. Choose the uppercase partner of b.',correct:false};if(id==='Q3'&&choice==='B')return{title:'Compare d with its partner.',message:'B pairs with b. Look at d: its stem is on the right and its bowl is on the left in the plain letter shape used here. Choose the uppercase partner of d.',correct:false};return{title:'Compare the letter identities.',message:choice+' is not the uppercase partner of '+q.lower+'. Compare the exact printed forms.',correct:false};}function count(){return Object.keys(items).filter(id=>state[id].checked&&state[id].choice===items[id].key).length;}function render(){const q=items[current],s=state[current];$('stimulus').textContent=q.lower;$('stimulus').setAttribute('aria-label','Lowercase '+q.lower);$('letter-label').textContent=current+' · printed lowercase '+q.lower;for(const id of Object.keys(items))$('item-'+id).setAttribute('aria-pressed',String(id===current));$('choices').replaceChildren();for(const choice of q.choices){const b=document.createElement('button');b.id='choice-'+choice;b.type='button';b.textContent=choice;b.setAttribute('aria-label','Uppercase '+choice);b.setAttribute('aria-pressed',String(s.choice===choice));b.addEventListener('click',()=>{s.choice=choice;s.checked=false;render();$('choice-'+choice).focus();});$('choices').appendChild(b);}const r=s.checked?assess(current,s.choice):{title:s.choice?'Not checked.':'Not answered.',message:'Choose a printed uppercase partner, then check.'};$('verdict').textContent=r.title;$('feedback').textContent=r.message;$('count').textContent=count()+' of 4 checked correct';}for(const id of Object.keys(items))$('item-'+id).addEventListener('click',()=>{current=id;render();});$('check').addEventListener('click',()=>{state[current].checked=state[current].choice!==null;render();});$('retry').addEventListener('click',()=>{state[current]={choice:null,checked:false};render();});$('reset').addEventListener('click',()=>{for(const id of Object.keys(items))state[id]={choice:null,checked:false};current='Q2';render();});render();
</script></body></html>