Turn a post-lesson observation into one bounded opening change and a next check
HTML for this example
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>Estimate first · lesson reflection</title><style>*{box-sizing:border-box}body{margin:0;background:#eef4ef;color:#344639;font:16px/1.55 system-ui,sans-serif}main{max-width:960px;margin:auto;padding:24px}h1{font-size:34px;line-height:1.16}h2{font-size:24px}h3{font-size:19px}.eyebrow{letter-spacing:.06em;color:#657c66}.card{padding:20px;margin:18px 0;background:white;border:1px solid #c4d3c2;border-radius:6px}.sample{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}button,textarea{font:inherit;color:inherit}button{min-height:44px;padding:10px 12px;background:white;border:1px solid #688769;border-radius:4px;cursor:pointer}button[aria-pressed=true]{background:#49734e;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #b57627;outline-offset:3px}.sample button{border-top:5px solid #6f9266;text-align:left}.sample button.blank{border-top-color:#be9241}.sample strong{display:block}.tentative{background:#fff8e7;border-left:6px solid #b88c36}.opening{background:#edf5f5;border-left:6px solid #528586}label{display:block;font-weight:650;margin:14px 0 6px}textarea{width:100%;min-width:0;max-width:100%;min-height:95px;padding:10px;border:1px solid #91a98e;border-radius:4px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#7d541e}footer{margin:24px 0;color:#637b63}[hidden]{display:none!important}@media(max-width:560px){main{padding:12px}h1{font-size:28px}.card{padding:14px}.sample{grid-template-columns:repeat(2,minmax(0,1fr))}}</style></head><body><main><p class="eyebrow">FICTIONAL 40-MINUTE LENGTH-ESTIMATION LESSON · POST-CLASS REVIEW</p><h1>Choose one change from the evidence</h1><section class="card"><h2>Activity and recorded scope</h2><p>Planned: eight-minute paired estimate activity, then measuring. The timing log records that the last practice activity ran four minutes late.</p><p><strong>Card sample:</strong> five of eight contain estimates before measuring; three estimate boxes are blank. The sample does not establish the cause or every learner's understanding.</p><div id="sample" class="sample" aria-label="Eight fictional sampled card states"></div><p id="sample-detail" aria-live="polite">Select a card to inspect the recorded field state. No learner identity or additional reasoning is supplied.</p></section><section class="card tentative"><h2>Observation and interpretation</h2><div class="tabs"><button id="observation" type="button" aria-pressed="true">Observation</button><button id="hypothesis" type="button" aria-pressed="false">Possible explanation</button><button id="alternatives" type="button" aria-pressed="false">Other explanations</button><button id="unsupported" type="button" aria-pressed="false">Check a conclusion</button></div><h3 id="statement">Three sampled estimate boxes are blank.</h3><p id="kind">Observation from the eight-card sample.</p><p id="reason">The recorded absence of an entry is visible. It does not show the learner's reasoning.</p><p><strong>Another perspective to seek:</strong> “What did you think you needed to write before using the ruler?”</p><p><strong>Actual response:</strong> not supplied.</p></section><section class="card opening"><h2>Compare the next lesson's first five minutes</h2><div class="tabs"><button id="original" type="button" aria-pressed="true">Original draft</button><button id="revised" type="button" aria-pressed="false">Revised draft · proposed</button></div><ol id="sequence"><li>Explain estimating and measuring together.</li><li>Distribute rulers.</li><li>Begin the paired task.</li></ol><p id="opening-limit">Original planning sequence, not a follow-up observation.</p><h3>Next evidence check</h3><p>Inspect whether estimates are recorded before rulers are distributed. Note prompts needed, state how the sample was chosen, and ask about a blank entry where appropriate.</p><p>Check remaining lesson timing when inserting this opening; the previous practice ran late. This change targets the task introduction, not an assumed universal cause.</p><p><strong>Actual follow-up observation:</strong> not supplied. No learning gain or successful result is established.</p></section><section class="card"><h2>Your lesson reflection and next check</h2><div id="fields"></div><div class="tabs"><button id="build" type="button">Build reflection review</button><button id="reset" type="button">Reset typed work</button></div><p id="status" role="status"></p><section id="confirm" hidden><h3>Clear all nine reflection fields?</h3><div class="tabs"><button id="keep" type="button">Keep my reflection</button><button id="clear" type="button">Clear typed reflection</button></div></section><section id="review" class="card copy" hidden><h3>Your supplied reflection</h3><div id="copy"></div><p>Proposed teaching changes remain separate from actual follow-up evidence. No assessment or feedback request has been performed.</p></section></section><footer>Temporary reflection only; nothing is saved or sent. A planned adjustment needs an actual later observation before you decide what worked.</footer></main><script>'use strict';const $=id=>document.getElementById(id),blank=[3,5,8];for(let n=1;n<=8;n++){const b=document.createElement('button');b.type='button';b.id='card-'+n;if(blank.includes(n))b.className='blank';b.setAttribute('aria-pressed','false');const h=document.createElement('strong');h.textContent='Card C'+n;const p=document.createElement('span');p.textContent=blank.includes(n)?'Estimate box blank':'Estimate entry present';b.append(h,p);b.addEventListener('click',()=>{for(let i=1;i<=8;i++)$('card-'+i).setAttribute('aria-pressed',String(i===n));$('sample-detail').textContent='C'+n+': '+(blank.includes(n)?'estimate box blank. This does not establish what the learner understood or why it was blank.':'estimate recorded before measuring. No quality judgment or numerical estimate is supplied in this teaching record.');});$('sample').append(b);}const rows={observation:['Three sampled estimate boxes are blank.','Observation from the eight-card sample.','The recorded absence of an entry is visible. It does not show the learner’s reasoning.'],hypothesis:['Learners may have started measuring before recording an estimate.','Possible explanation to investigate.','The supplied cards do not show the sequence each learner followed; ask or observe before concluding.'],alternatives:['The transition may have been rushed, or the estimate-first instruction unclear.','Alternative explanations; neither is established.','The four-minute delay is a separate timing observation. It does not prove the cause of the blank boxes.'],unsupported:['Three learners do not understand estimation.','Unsupported conclusion from these records.','Narrow it to: three sampled estimate boxes are blank. Seek the learner’s reasoning before deciding what to reteach.']};for(const[id,row]of Object.entries(rows))$(id).addEventListener('click',()=>{for(const key of Object.keys(rows))$(key).setAttribute('aria-pressed',String(key===id));for(const[i,target]of ['statement','kind','reason'].entries())$(target).textContent=row[i];});for(const id of ['original','revised'])$(id).addEventListener('click',()=>{for(const key of ['original','revised'])$(key).setAttribute('aria-pressed',String(key===id));$('sequence').replaceChildren();for(const text of id==='original'?['Explain estimating and measuring together.','Distribute rulers.','Begin the paired task.']:['Model an estimate before measuring.','Ask learners to record an estimate.','Check an estimate entry before distributing rulers.']){const li=document.createElement('li');li.textContent=text;$('sequence').append(li);}$('opening-limit').textContent=id==='original'?'Original planning sequence, not a follow-up observation.':'Proposed opening revision. It has not yet produced a follow-up result.';});const fields=[['activity','Lesson, learners, activity and date · required'],['purpose','Intended task and planned timing'],['evidence','Actual observed evidence, source and sample scope · required'],['explanation','Tentative explanation and missing information'],['perspective','Student or colleague perspective to request'],['change','One proposed adjustment · required'],['check','Next evidence check, timing and sample choice'],['actual','Actual follow-up evidence, only if available'],['timing','Remaining lesson timing or other open concern']];for(const[id,label]of fields){const l=document.createElement('label'),t=document.createElement('textarea');l.htmlFor=id;l.textContent=label;t.id=id;t.addEventListener('input',()=>{$('review').hidden=true;$('status').textContent='Reflection changed. Build again to review current wording.';});$('fields').append(l,t);}$('build').addEventListener('click',()=>{const missing=['activity','evidence','change'].filter(id=>!$(id).value.trim());$('review').hidden=true;if(missing.length){$('status').textContent='Complete: '+missing.map(id=>({activity:'lesson/activity',evidence:'observed evidence/source',change:'one proposed adjustment'})[id]).join(', ')+'.';return;}$('copy').replaceChildren();for(const[id,title]of fields){const h=document.createElement('h3'),p=document.createElement('p');h.textContent=title;p.textContent=$(id).value.trim()||'Not supplied.';$('copy').append(h,p);}$('review').hidden=false;$('status').textContent='Reflection review assembled from supplied words.';});$('reset').addEventListener('click',()=>{$('confirm').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirm').hidden=true;$('reset').focus();});$('clear').addEventListener('click',()=>{for(const[id]of fields)$(id).value='';$('review').hidden=true;$('confirm').hidden=true;$('status').textContent='Nine reflection fields cleared. Source observations and worked views are unchanged.';$('activity').focus();});</script></body></html>