Rehearse one better question — Prepare a five-minute teaching segment plus peer evidence questions, select one instruction revision and rehearse the revised segment…

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>Rehearse one better question</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:#3c3455;--bg:#f4f1f9;--accent:#775694;--muted:#7a6d88;--line:#d9cfe4}.card{height:205px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:48px;border-radius:8px}.circle{width:77px;height:77px;border-radius:50%;background:#3579c2}.square{width:75px;height:75px;background:#cc514f}.prompt{font:27px/1.35 Georgia,serif;color:#68448b;background:#eee5f7;padding:20px;margin-top:18px;border-radius:6px}.script-row{padding:15px 0;border-top:1px solid var(--line)}.script-row p{font-size:14px}.attempts{display:grid;grid-template-columns:1fr 1fr;gap:22px}.attempts .panel{border-top:4px solid var(--accent)}@media(max-width:700px){.attempts{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">One presenter · peer rehearsal · 20-minute cycle</p><h1>Test one better question.</h1><p>Keep the card, content goal and five-minute segment fixed while changing one prompt.</p><div class="two"><section class="panel"><div class="card" role="img" aria-label="White card with one blue circle and one red square"><span class="circle" aria-hidden="true"></span><span class="square" aria-hidden="true"></span></div><p class="small" style="margin-top:12px">Complete card description: white card, one blue circle, one red square. Artist identity and preference are not supplied.</p><h3>Content goal</h3><p>Distinguish a visible observation from an unsupported inference.</p></section><section class="panel"><div class="row"><button id="first" type="button" aria-pressed="true">First script</button><button id="revised" type="button" class="secondary">Revised script</button></div><p id="question" class="prompt">What is the artist’s favorite color?</p><p id="question-note" class="small">Intentionally misaligned practice question: the card does not establish preference.</p><p id="fixed">Same card, goal, model, classification statements, exit question and five-minute timing.</p><button id="feedback-toggle" type="button" class="secondary">Show hypothetical feedback</button><p id="hypothetical" class="notice" hidden>Hypothetical, not collected feedback: the question asked for the artist’s favorite color rather than a visible feature. Proposed change: ask which shape and color are visible.</p></section></div><section class="panel"><h2>Complete five-minute teaching segment</h2><div class="script-row"><strong>0–1 min · Goal and card</strong><p>“We will separate what the card shows from what we would need more evidence to know.” Show the card or read its exact description.</p></div><div class="script-row"><strong>1–2 min · Model</strong><p>“I can identify a blue circle.” Contrast a visible feature with an unsupported preference; appearance does not establish why it was chosen.</p></div><div class="script-row"><strong>2–4 min · Classify and explain</strong><p id="script-question">Ask: What is the artist’s favorite color?</p><p>Then ask peers to classify “The card has a red square” and “The artist likes blue.” Ask what evidence supports each classification. Record the actual wording and response.</p></div><div class="script-row"><strong>4–5 min · Exit</strong><p>“Name one visible feature and one statement this card cannot establish.” Actual peer answers stay blank until the rehearsal.</p></div></section><section class="panel"><div class="row" style="justify-content:space-between"><h2>Brief → teach → feedback → revise → re-teach</h2><strong id="total" class="result">20 minutes</strong></div><div id="time-rows"></div><p id="time-error" class="error" role="alert"></p><button id="restore-times" type="button" class="secondary">Restore 20-minute cycle</button><p class="small" style="margin-top:15px">One presenter only; confirm additional time for more presenters. Peers roleplay learners. No filming or recording is required.</p></section><div class="attempts"><section class="panel"><h2>Attempt 1 · actual evidence</h2><div id="attempt-1"></div></section><section class="panel"><h2>Attempt 2 · separate actual evidence</h2><div id="attempt-2"></div></section></div><section class="panel"><h2>Debrief from evidence</h2><p>What exact question was heard? What response followed? What part of the goal did it invite? Compare actual notes before choosing the next test.</p><label for="comparison">Comparison / next question to test<textarea id="comparison"></textarea></label></section><details><summary>Teacher content key · separate from peer records</summary><p>The blue circle and red square are described visible features. “The card has a red square” is an observation. “The artist likes blue” is not established by the card. The revised prompt is “Which shape and color do you see?” This key does not fill actual response notes or prove improvement.</p></details><footer>Original rehearsal companion, not an institutional form or official lesson record. No peer response is prefilled, collected, scored or saved. Native required training records remain authoritative; rehearsal cannot prove classroom outcomes.</footer></main><script>
'use strict';const $=id=>document.getElementById(id);
let revision=false;function render(){const q=revision?'Which shape and color do you see?':'What is the artist’s favorite color?';$('question').textContent=q;$('script-question').textContent='Ask: '+q;$('question-note').textContent=revision?'Selected question revision: asks for an observable feature. Improvement still needs actual evidence.':'Intentionally misaligned practice question: the card does not establish preference.';$('first').setAttribute('aria-pressed',String(!revision));$('revised').setAttribute('aria-pressed',String(revision));}for(const id of['first','revised'])$(id).addEventListener('click',()=>{revision=id==='revised';render();});$('feedback-toggle').addEventListener('click',()=>{$('hypothetical').hidden=!$('hypothetical').hidden;$('feedback-toggle').textContent=$('hypothetical').hidden?'Show hypothetical feedback':'Hide hypothetical feedback';});for(const n of[1,2])for(const [key,text]of[['question','Exact question heard'],['time','Prompt timing'],['response','Exact actual peer response'],['interpretation','Interpretation · separate from observation'],['suggestion','Suggestion'],['next','Next step']]){const label=document.createElement('label');label.setAttribute('for','a'+n+'-'+key);label.textContent=text;const field=document.createElement('textarea');field.id='a'+n+'-'+key;label.appendChild(field);$('attempt-'+n).appendChild(label);}const target=20,blocks=[['Goal and focus brief','Confirm visible-feature goal, one question-wording focus and peer roles.',2],['First teaching attempt','Use the five-minute script; record exact prompt timing and actual responses.',5],['Evidence feedback','Separate observed words/actions, interpretation and suggestion.',4],['Choose one revision','Replace only the favorite-color question; record why.',2],['Revised teaching attempt','Keep the card, goal, key and timing; use a separate response record.',5],['Debrief','Compare both actual notes and choose the next question to test.',2]];render();function schedule(values){if(values.some(v=>!/^\d+$/.test(v.trim())||+v<1||+v>180))return{error:'Enter whole positive minutes from 1 to 180 for every phase.'};let n=0;return{total:values.reduce((a,b)=>a+(+b),0),ranges:values.map(v=>{const s=n;n+=+v;return s+'–'+n+' min';})};}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===target?'':'Review the edited length: original '+target+' minutes.');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.id='range-'+i;range.className='range';row.appendChild(range);const content=document.createElement('div'),h=document.createElement('strong'),p=document.createElement('p');h.textContent=b[0];p.textContent=b[1];content.appendChild(h);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('aria-label',b[0]+' minutes');input.setAttribute('inputmode','numeric');input.addEventListener('input',timing);label.appendChild(input);row.appendChild(label);$('time-rows').appendChild(row);});$('restore-times').addEventListener('click',()=>{blocks.forEach((b,i)=>$('minutes-'+i).value=String(b[2]));timing();});timing();
</script></body></html>