Trace the First Wrong Step — Have learners execute an exact ordered command sequence, record each state, identify the first divergence and test a correction against a…

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>Trace the First Wrong Step</title><style>:root{--bg:#edf6fb;--ink:#203f59;--accent:#286894;--line:#bfd6e5;--wash:#e0f0fa;}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Arial,Helvetica,sans-serif}main{max-width:1120px;margin:auto;padding:26px 24px 55px}h1,h2,h3,p{margin:0}h1{font-size:clamp(27px,4vw,39px);line-height:1.17;letter-spacing:-.03em}h2{font-size:23px}h3{font-size:18px}header{margin-bottom:18px}header p{margin-top:8px}.eyebrow{font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:bold;color:var(--accent)}button,input,select,textarea{font:inherit}button{min-height:44px;padding:9px 15px;background:var(--accent);color:white;border:1px solid var(--accent);border-radius:6px;cursor:pointer;font-weight:bold}button.secondary{background:white;color:var(--accent)}button[aria-pressed=true]{box-shadow:inset 0 0 0 2px currentColor}button:disabled{opacity:.45;cursor:default}input,select,textarea{width:100%;min-height:44px;padding:9px 11px;border:1px solid #969fb0;background:white;color:var(--ink);border-radius:5px}textarea{min-height:90px;resize:vertical}input[type=checkbox]{width:20px;min-height:20px;vertical-align:middle;margin-right:8px}label{display:block;font-size:14px;font-weight:bold;margin:11px 0 5px}:focus-visible{outline:3px solid #d98c22;outline-offset:3px}.actions{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}.panel{background:white;border:1px solid var(--line);border-radius:10px;padding:22px;min-width:0}.columns{display:grid;grid-template-columns:1.55fr 1fr;gap:22px}.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}.three{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.muted{font-size:14px;color:#556173}.notice{background:var(--wash);border-left:4px solid var(--accent);padding:13px 16px;margin:14px 0;overflow-wrap:anywhere}.error{color:#a42b25;font-weight:bold}.below{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}.below>p{margin:9px 0}.tag{font-size:12px;padding:4px 8px;background:var(--wash);border-radius:4px}.big{font-size:32px;line-height:1.2;font-weight:bold}.foot{font-size:14px;color:#556173;margin-top:24px}.readonly{min-height:180px;font:13px/1.6 ui-monospace,monospace}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.6 ui-monospace,monospace}.stage{display:grid;grid-template-columns:95px 1fr;gap:15px;padding:17px 0;border-top:1px solid var(--line)}.stage input{width:78px}.stage p{margin-top:6px}.range{font-weight:bold}.total{font-size:30px;font-weight:bold;color:var(--accent)}.schedule-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}summary{cursor:pointer;min-height:44px;padding:10px 0;font-weight:bold}details{margin:18px 0}table{width:100%;border-collapse:collapse;font-size:14px}td,th{text-align:left;vertical-align:top;border-bottom:1px solid var(--line);padding:9px}.scroll{overflow:auto}[hidden]{display:none!important}@media(max-width:800px){.columns{grid-template-columns:1fr}}@media(max-width:520px){main{padding:18px 14px 40px}.panel{padding:16px}.two,.three{grid-template-columns:1fr}.actions button{flex-grow:1}.stage{grid-template-columns:78px 1fr;gap:10px}.stage input{width:65px}td,th{padding:7px}}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;max-width:420px;aspect-ratio:1;margin:15px auto}.cell{background:#fff;border:1px solid #bed2df;border-radius:8px;padding:9px;display:flex;flex-direction:column;justify-content:space-between;min-width:0}.cell.goal{background:#fff0bd;border:2px solid #b79a3b}.cell.visited{background:#def0f9}.token{font-size:27px;color:#2478a6;font-weight:bold;line-height:1}.cell small{font-size:12px}.command-cards{display:flex;gap:10px}.command-cards label{margin:0}.command-cards>div{flex:1}.command-cards select{font-size:25px;font-weight:bold;margin-top:5px}.reference{background:#fff;border:1px solid var(--line);border-radius:10px;padding:20px}.trace-row{padding:10px;border-bottom:1px solid var(--line);font:15px ui-monospace,monospace}.trace-row.wrong{background:#fff1d7}.coordinate{font-size:38px;font-weight:bold}.boundary-note{padding:12px;background:#eef2f7}.lesson-intro{background:#fff;padding:20px;border-radius:9px;margin-top:17px}</style></head><body><main><header><p class="eyebrow">Original unplugged lesson · teacher demonstration</p><h1>Find the first wrong step.</h1><p>Execute the cards as written, record every position, then test a one-command correction.</p></header><div class="columns"><section class="panel"><div class="schedule-heading"><h2>3 × 3 command field</h2><p class="coordinate" id="position">(0,0)</p></div><p class="muted">Origin bottom-left · E increases x · N increases y · goal (2,1)</p><div id="grid" class="grid" role="img" aria-label="Coordinate grid with current token and goal"></div><div class="command-cards"><div><label for="command-0">Command 1</label><select id="command-0"><option value="E">E · east</option><option value="N">N · north</option></select></div><div><label for="command-1">Command 2</label><select id="command-1"><option value="E">E · east</option><option value="N">N · north</option></select></div><div><label for="command-2">Command 3</label><select id="command-2"><option value="E">E · east</option><option value="N">N · north</option></select></div></div><div class="actions"><button type="button" id="step">Step one command</button><button type="button" id="run" class="secondary">Run remaining commands</button><button type="button" id="reset-trace" class="secondary">Reset trace</button></div><p class="notice" id="status" role="status">Start at (0,0). The buggy cards are E,N,N.</p></section><aside><section class="reference"><h2>Teacher model · comparison reference</h2><table><thead><tr><th>Row</th><th>E,E,N</th><th>E,N,N</th></tr></thead><tbody><tr><td>1</td><td>(1,0)</td><td>(1,0)</td></tr><tr><td>2</td><td>(2,0)</td><td>(1,1)</td></tr><tr><td>3</td><td>(2,1)</td><td>(1,2)</td></tr></tbody></table><p class="notice">First divergence: command 2. Replace its N with E; keep command count and goal unchanged.</p><div class="actions"><button type="button" id="correct">Apply the one-command correction</button></div><h3>Current executed trace</h3><div id="trace"></div></section><div class="actions"><button type="button" id="load-bug" class="secondary">Restore E,N,N</button><button type="button" id="load-model" class="secondary">Load E,E,N model</button><button type="button" id="load-individual" class="secondary">Load N,E,E check</button><button type="button" id="load-boundary" class="secondary">Load E,E,E boundary case</button></div><p class="boundary-note">An out-of-grid move stops before that command; the token never wraps or skips it.</p></aside></div><section class="below"><div class="schedule-heading"><h2>30-minute teaching sequence</h2><p id="total" class="total">30 minutes</p></div><p id="schedule-error" class="error" role="status"></p><article class="stage"><div><p class="range" id="range-0"></p><label for="minutes-0">Minutes</label><input id="minutes-0" value="4" inputmode="numeric"></div><div><h3>1. Set the map</h3><p><strong>Teacher:</strong> Locate origin, start and goal; rehearse E and N.</p><p><strong>Learner / evidence:</strong> Point to (1,0) and (0,1); resolve axis confusion.</p></div></article><article class="stage"><div><p class="range" id="range-1"></p><label for="minutes-1">Minutes</label><input id="minutes-1" value="5" inputmode="numeric"></div><div><h3>2. Model E,E,N</h3><p><strong>Teacher:</strong> Move once and record a coordinate after each card.</p><p><strong>Learner / evidence:</strong> Trace (1,0), (2,0), (2,1); label each numbered row.</p></div></article><article class="stage"><div><p class="range" id="range-2"></p><label for="minutes-2">Minutes</label><input id="minutes-2" value="8" inputmode="numeric"></div><div><h3>3. Partner trace E,N,N</h3><p><strong>Teacher:</strong> One learner reads; the other moves and records exactly.</p><p><strong>Learner / evidence:</strong> Follow cards rather than head directly for the goal; explain the trace.</p></div></article><article class="stage"><div><p class="range" id="range-3"></p><label for="minutes-3">Minutes</label><input id="minutes-3" value="7" inputmode="numeric"></div><div><h3>4. Debug one command</h3><p><strong>Teacher:</strong> Ask for the first row that differs; replace only command2.</p><p><strong>Learner / evidence:</strong> Reset to start and replay all3 commands to test the correction.</p></div></article><article class="stage"><div><p class="range" id="range-4"></p><label for="minutes-4">Minutes</label><input id="minutes-4" value="4" inputmode="numeric"></div><div><h3>5. Individual N,E,E check</h3><p><strong>Teacher:</strong> Give the independent N,E,E sequence.</p><p><strong>Learner / evidence:</strong> Record (0,1), (1,1), (2,1); explain same goal, different path.</p></div></article><article class="stage"><div><p class="range" id="range-5"></p><label for="minutes-5">Minutes</label><input id="minutes-5" value="2" inputmode="numeric"></div><div><h3>6. Reflect</h3><p><strong>Teacher:</strong> Ask which row located the bug and what replay showed.</p><p><strong>Learner / evidence:</strong> Keep actual explanation and next support separate from the key.</p></div></article><div class="actions"><button type="button" id="restore-time" class="secondary">Restore 30-minute timing</button></div><p class="lesson-intro"><strong>Materials:</strong> one labeled3×3 grid, a token, E/N cards and a trace sheet per pair. Offer larger squares, spoken commands or a partner mover while the learner directs and explains. No facing-direction rules.</p></section><section class="below"><h2>Actual evidence · blank until supplied</h2><div class="two"><div><label for="actual-trace">Learner’s recorded trace and exact sequence</label><textarea id="actual-trace"></textarea></div><div><label for="actual-explanation">First-difference explanation / next support</label><textarea id="actual-explanation"></textarea></div></div><label for="learner-text">Student recording sheet · no worked coordinate key</label><textarea id="learner-text" class="readonly" readonly></textarea><div class="actions"><button type="button" id="select-learner" class="secondary">Select learner sheet</button></div><p class="muted" id="copy-status" role="status"></p><p class="foot">The on-screen trace is a deterministic demonstration, not an observed learner result, robot controller or mastery grade. Paper lesson materials remain independently usable. No automatic school record, saved responses or standards-alignment claim. Student distribution should use the separate blank sheet; the full teacher page contains the model key.</p></section></main><script>'use strict';const $=id=>document.getElementById(id);const lesson=[["Set the map","Locate origin, start and goal; rehearse E and N.","Point to (1,0) and (0,1); resolve axis confusion."],["Model E,E,N","Move once and record a coordinate after each card.","Trace (1,0), (2,0), (2,1); label each numbered row."],["Partner trace E,N,N","One learner reads; the other moves and records exactly.","Follow cards rather than head directly for the goal; explain the trace."],["Debug one command","Ask for the first row that differs; replace only command2.","Reset to start and replay all3 commands to test the correction."],["Individual N,E,E check","Give the independent N,E,E sequence.","Record (0,1), (1,1), (2,1); explain same goal, different path."],["Reflect","Ask which row located the bug and what replay showed.","Keep actual explanation and next support separate from the key."]];const intended=[[1,0],[2,0],[2,1]];let state;function schedule(){const values=Array.from({length:6},(_,i)=>$('minutes-'+i).value.trim());if(values.some(v=>!/^\d+$/.test(v)||Number(v)<1||Number(v)>120))return {error:'Use whole minutes from 1 to 120 in every block.'};let end=0;return {blocks:values.map((v,i)=>{const start=end;end+=Number(v);return {start,end,minutes:Number(v),step:lesson[i]};}),total:values.reduce((a,v)=>a+Number(v),0)};}function renderSchedule(){const s=schedule();$('schedule-error').textContent=s.error||'';$('total').textContent=s.error?'Timing incomplete':s.total+' minutes';for(let i=0;i<6;i++)$('range-'+i).textContent=s.error?'—':s.blocks[i].start+'–'+s.blocks[i].end+' min';return s;}
function commands(){return [0,1,2].map(i=>$('command-'+i).value);}
function pureTrace(seq){let x=0,y=0;const rows=[];for(let i=0;i<seq.length;i++){const nx=x+(seq[i]==='E'?1:0),ny=y+(seq[i]==='N'?1:0);if(!['E','N'].includes(seq[i])||nx>2||ny>2)return {rows,x,y,invalid:i+1};x=nx;y=ny;rows.push([x,y]);}return {rows,x,y,invalid:null};}
function resetTrace(){state={x:0,y:0,index:0,rows:[],invalid:null};$('status').textContent='Start at (0,0). Execute the selected cards in order.';render();}
function firstDifference(){return state.rows.findIndex((p,i)=>p[0]!==intended[i][0]||p[1]!==intended[i][1]);}
function step(){if(state.invalid||state.index>=3)return;const seq=commands(),cmd=seq[state.index],nx=state.x+(cmd==='E'?1:0),ny=state.y+(cmd==='N'?1:0);if(!['E','N'].includes(cmd)||nx>2||ny>2){state.invalid=state.index+1;$('status').textContent='Stopped before invalid command '+state.invalid+'. Last valid position: ('+state.x+','+state.y+'). No wrap or skipped command.';render();return;}state.x=nx;state.y=ny;state.rows.push([nx,ny]);state.index++;const diff=firstDifference();if(state.index===3){$('status').textContent=nx===2&&ny===1?(diff<0?'Goal reached; trace matches E,E,N.':'Goal reached by a different path. First divergence from E,E,N: command '+(diff+1)+'.'):'Sequence finished at ('+nx+','+ny+'). First divergence from E,E,N: command '+(diff+1)+'.';}else $('status').textContent='After command '+state.index+': ('+nx+','+ny+'). '+(diff<0?'Matches the model so far.':'First divergence: command '+(diff+1)+'.');render();}
function load(seq){seq.forEach((v,i)=>$('command-'+i).value=v);resetTrace();}
function correct(){if(commands().join(',')!=='E,N,N'){$('status').textContent='Restore E,N,N to inspect its one-command correction.';return;}$('command-1').value='E';resetTrace();$('status').textContent='Only command 2 changed from N to E. Replay from the start to test E,E,N.';}
function render(){$('position').textContent='('+state.x+','+state.y+')';let grid='';for(let y=2;y>=0;y--)for(let x=0;x<3;x++){const here=x===state.x&&y===state.y,visited=state.rows.some(p=>p[0]===x&&p[1]===y);grid+='<div class="cell'+(x===2&&y===1?' goal':'')+(visited?' visited':'')+'"><small>('+x+','+y+')</small><span class="token">'+(here?'●':'')+'</span><small>'+(x===2&&y===1?'GOAL':x===0&&y===0?'START':'')+'</small></div>';}$('grid').innerHTML=grid;$('trace').innerHTML=state.rows.map((p,i)=>'<div class="trace-row'+(p[0]!==intended[i][0]||p[1]!==intended[i][1]?' wrong':'')+'">'+(i+1)+' · '+commands()[i]+' → ('+p[0]+','+p[1]+')</div>').join('')+(state.invalid?'<div class="trace-row wrong">'+state.invalid+' · stopped before invalid move</div>':'');$('step').disabled=!!state.invalid||state.index===3;$('run').disabled=$('step').disabled;}
for(let i=0;i<3;i++)$('command-'+i).addEventListener('change',resetTrace);$('step').addEventListener('click',step);$('run').addEventListener('click',()=>{for(let i=0;i<3;i++)step();});$('reset-trace').addEventListener('click',resetTrace);$('correct').addEventListener('click',correct);for(const [id,seq] of [['load-bug',['E','N','N']],['load-model',['E','E','N']],['load-individual',['N','E','E']],['load-boundary',['E','E','E']]])$(id).addEventListener('click',()=>load(seq));for(let i=0;i<6;i++)$('minutes-'+i).addEventListener('input',renderSchedule);$('restore-time').addEventListener('click',()=>{[4,5,8,7,4,2].forEach((v,i)=>$('minutes-'+i).value=String(v));renderSchedule();});$('learner-text').value='ALGORITHM TRACE — LEARNER SHEET\nGrid x/y each0..2; origin(0,0) bottom-left. E=east (+1x); N=north (+1y). Start(0,0), goal(2,1). No facing direction.\n\nTeacher model cards: E,E,N. Record each position as modeled.\nPartner cards: E,N,N. Follow the cards exactly.\nCommand1: ___ Position: ___\nCommand2: ___ Position: ___\nCommand3: ___ Position: ___\nFirst row different from the model: ___\nOne-command replacement to test: ___\nReturn to start; record all corrected positions: ___\n\nIndividual check N,E,E: record every position and explain whether the intermediate path matches the model.\nOut-of-grid move: stop before the invalid command, keep last valid position, no wrap/skip.\nActual observation / next support: ___';$('select-learner').addEventListener('click',()=>{$('learner-text').focus();$('learner-text').select();$('copy-status').textContent='Learner sheet selected. Use your device’s copy command and paste manually.';});globalThis.app={pureTrace,commands,load,correct,step,resetTrace,firstDifference,schedule,get:()=>state};load(['E','N','N']);renderSchedule();</script></body></html>