Two teachers • one instruction sequence — Prepare a phase-by-phase TeacherA/TeacherB responsibility map with shared objective, observation focus, explicit lead handover and joint…

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>Two teachers • one instruction sequence</title><style>*{box-sizing:border-box}body{margin:0;background:var(--bg,#f3f7fa);color:var(--ink,#203342);font:16px/1.55 system-ui,Segoe UI,sans-serif}main{max-width:1100px;margin:auto;padding:28px 30px 50px}h1{font-size:clamp(27px,3.5vw,40px);line-height:1.18;letter-spacing:-.035em;margin:8px 0 12px}h2{font-size:21px;line-height:1.35;margin:0 0 16px}h3{font-size:18px}.eyebrow{color:var(--accent,#176783);font-size:12px;letter-spacing:.12em;font-weight:800;text-transform:uppercase}.intro,.muted,small{color:#516272}.intro{margin:0 0 24px}.panel{padding:24px;border:1px solid var(--line,#d6e0e7);border-radius:12px;background:white;margin:18px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.grid>*{min-width:0}.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:16px 0}button,input,textarea,select{font:inherit}button{border:1px solid var(--accent,#176783);background:var(--accent,#176783);color:white;padding:10px 16px;min-height:44px;border-radius:7px;font-weight:700;cursor:pointer}button.secondary{background:white;color:var(--accent,#176783)}button[aria-pressed=true]{background:var(--tint,#e3f2f8);color:var(--ink,#203342);box-shadow:inset 0 0 0 2px var(--accent,#176783)}button:hover{filter:brightness(.96)}:focus-visible{outline:3px solid #d56b00;outline-offset:3px}label{display:block;margin:12px 0 5px;font-size:14px;font-weight:650}input:not([type=checkbox]),select,textarea{width:100%;padding:10px 12px;min-height:44px;border:1px solid #94a5b2;background:white;color:inherit;border-radius:7px}textarea{resize:vertical;min-height:120px}input[type=checkbox]{width:20px;height:20px;margin-right:9px}label.inline{display:flex;align-items:center;font-weight:500;gap:7px}.result{padding:24px;background:var(--tint,#e3f2f8);border:1px solid var(--line,#c8dce7);border-radius:12px}.big{font-size:clamp(30px,5vw,48px);font-weight:780;line-height:1.25;letter-spacing:-.035em;margin:10px 0}.trace{font:15px/1.7 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.error{color:#a12820;font-weight:650;min-height:24px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:15px}th,td{text-align:left;border-bottom:1px solid var(--line,#d6e0e7);padding:12px 9px;vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.03em;color:#516272}code,pre,.code{font:14px/1.65 ui-monospace,Consolas,monospace}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--tint,#eef3f7);padding:16px;border-radius:6px}details{border-top:1px solid var(--line,#d6e0e7);margin:24px 0;padding-top:16px}summary{cursor:pointer;font-weight:700;min-height:44px}footer{border-top:1px solid var(--line,#d6e0e7);margin-top:26px;padding-top:16px;font-size:13px;color:#516272}.bar{height:16px;background:#dce4ea;border-radius:20px;overflow:hidden;margin:12px 0}.bar span{display:block;height:100%;background:var(--accent,#176783)}[hidden]{display:none!important}@media(max-width:720px){main{padding:20px}.grid{grid-template-columns:1fr;gap:12px}.panel,.result{padding:20px}}@media(max-width:400px){main{padding:16px}.panel,.result{padding:16px}button{padding:10px 13px}} .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}.metric{padding:20px;background:white;border:1px solid var(--line,#d6e0e7);border-radius:9px}.metric h2{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#516272;margin:0}.metric .big{font-size:clamp(25px,4vw,39px);margin:8px 0}.metric small{font-size:12px;display:block}.badge{display:inline-block;padding:4px 10px;background:var(--tint,#e3f2f8);border-radius:20px;font-size:13px;font-weight:700}.paper{background:white;padding:26px;border:1px solid var(--line,#d6e0e7)}.feedback{padding:18px;background:var(--tint,#e3f2f8);border-left:4px solid var(--accent,#176783)}.preview{white-space:pre-wrap;overflow-wrap:anywhere}.fact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.fact-grid article{padding:20px;background:white;border:1px solid var(--line,#d6e0e7)}.record-row{display:grid;grid-template-columns:70px 1fr 1fr 1fr;gap:12px;align-items:start;padding:16px 0;border-bottom:1px solid var(--line,#d6e0e7)}.record-row small{display:block}.record-row b{display:block}.export textarea{min-height:170px}@media(max-width:720px){.metrics{grid-template-columns:1fr 1fr}.fact-grid{grid-template-columns:1fr}.record-row{grid-template-columns:55px 1fr 1fr}.record-row .row-extra{grid-column:2/4}}@media(max-width:400px){.metrics{gap:10px}.metric{padding:14px}.metric .big{font-size:29px}.metric h2{font-size:11px}.paper{padding:18px}.record-row{gap:9px;font-size:14px}}
body{--accent:#426b8d;--bg:#f4f6f8;--tint:#e4edf5;--ink:#2c4050;--line:#d2dce5}.shared-task{background:white;border-left:5px solid #426b8d;padding:24px}.shared-task h2{font:27px Georgia,serif}.shared-task li{padding:4px 0}.shared-task p{font-size:14px}.phase-heading{display:flex;gap:16px;align-items:center;margin-bottom:15px}.phase-heading span{font-size:14px;background:white;border:1px solid #d2dce5;padding:6px 12px;white-space:nowrap}.phase-heading h2{margin:0}.role-lanes{display:grid;grid-template-columns:1fr 1fr;gap:18px}.role-lanes article{background:#e2edf8;border:2px solid transparent;padding:22px;border-radius:7px}.role-lanes article:nth-child(2){background:#f7e6dd}.role-lanes span{font-size:12px;font-weight:800;letter-spacing:.12em}.role-lanes h3{font:23px/1.45 Georgia,serif;margin-top:12px}.role-lanes [data-focus=true]{border-color:#426b8d}.role-lanes article:nth-child(2)[data-focus=true]{border-color:#a56648}.handover{background:white;border-left:4px solid #a56648;padding:18px;font-size:17px}.co-time{display:grid;grid-template-columns:1fr 90px 95px;align-items:center;gap:15px;padding:15px 0;border-bottom:1px solid #d2dce5}.co-time label{margin-top:0}.practice-board{width:100%;max-height:300px;background:white;border:1px solid #d2dce5}.practice-board text{font:16px system-ui;fill:#3b5368}.learner-instructions{font-size:19px}.learner-instructions li{padding:7px 0}@media(max-width:720px){.role-lanes{gap:12px}.role-lanes article{padding:16px}.role-lanes h3{font-size:20px}}@media(max-width:400px){.role-lanes{grid-template-columns:1fr}.co-time{grid-template-columns:1fr 55px 65px;gap:10px;font-size:14px}.phase-heading{align-items:flex-start}.phase-heading h2{font-size:20px}}</style></head><body><main>
<div id="teacher-view"><header><span class="eyebrow">Co-teaching plan / original 30-minute sequence</span><h1>Both teachers have a next action.</h1><p class="intro">Shared goal: follow three written instructions in order and point to the step used.</p></header>
<section class="shared-task"><h2>One unchanged learner task</h2><ol><li>Place a square token in the tray.</li><li>Put a circle token beside the tray.</li><li>Draw a star on the card.</li></ol><p>Materials: tray, square and circle tokens, card, writing materials. Agree the setup meaning of “beside.”</p><div class="controls"><button type="button" id="show-learner" class="secondary">Open sequence practice</button></div></section>
<nav class="controls" aria-label="Lesson phase"><button type="button" id="phase-0" class="secondary">1 · Joint preview</button><button type="button" id="phase-1" class="secondary">2 · Model</button><button type="button" id="phase-2" class="secondary">3 · Pair practice</button><button type="button" id="phase-3" class="secondary">4 · Lead handover and review</button><button type="button" id="phase-4" class="secondary">5 · Joint exit and readback</button></nav>
<section class="role-map"><div class="phase-heading"><span id="phase-range">0–5 min</span><h2 id="phase-title">Joint preview</h2></div><div class="role-lanes"><article id="a-lane"><span>TEACHER A</span><h3 id="a-action"></h3></article><article id="b-lane"><span>TEACHER B</span><h3 id="b-action"></h3></article></div><div class="controls"><button type="button" id="focus-a" class="secondary">Highlight A</button><button type="button" id="focus-b" class="secondary">Highlight B</button><button type="button" id="focus-both" class="secondary">Both roles</button></div><p id="handover" class="handover"></p></section>
<section class="panel"><h2>Preparation and timetable</h2><p>A prepares shared task text and model materials. B checks three sample copies and the tray/token/card descriptions. The actual class quantity is a separate joint decision.</p><div class="grid"><div><label for="copies">Actual learner copies / material sets — to confirm</label><input id="copies" type="text" value="" ><label for="supports">Supplied learner needs and approved supports — to confirm</label><textarea id="supports" rows="3"></textarea></div><div><label for="available">Available lesson minutes</label><input id="available" type="number" value="30" ><p id="plan-total" class="badge">30-minute plan ready</p><p id="schedule-error" class="error" role="alert"></p></div></div>
<div class="co-time"><b>Joint preview</b><span id="range-0"></span><div><label for="minutes-0">Minutes</label><input id="minutes-0" type="number" value="5"></div></div><div class="co-time"><b>Model</b><span id="range-1"></span><div><label for="minutes-1">Minutes</label><input id="minutes-1" type="number" value="6"></div></div><div class="co-time"><b>Pair practice</b><span id="range-2"></span><div><label for="minutes-2">Minutes</label><input id="minutes-2" type="number" value="10"></div></div><div class="co-time"><b>Lead handover and review</b><span id="range-3"></span><div><label for="minutes-3">Minutes</label><input id="minutes-3" type="number" value="6"></div></div><div class="co-time"><b>Joint exit and readback</b><span id="range-4"></span><div><label for="minutes-4">Minutes</label><input id="minutes-4" type="number" value="3"></div></div></section>
<section class="panel"><h2>Actual evidence and joint readback</h2><p><b>Exit question:</b> Which written step did you use?</p><div class="grid"><div><label for="observed-phase">Phase observed — blank until supplied</label><input id="observed-phase" type="text" value="" ><label for="step-ref">Written step referenced — actual, if supplied</label><input id="step-ref" type="text" value="" ><label for="actual">Actual learner question / explanation</label><textarea id="actual" rows="3"></textarea></div><div><label for="observer">Observer — actual, if supplied</label><input id="observer" type="text" value="" ><label for="followup">Question for joint follow-up</label><textarea id="followup" rows="3"></textarea><label for="next-teaching">Joint next teaching step — blank until agreed</label><textarea id="next-teaching" rows="3"></textarea></div></div></section>
<details><summary>Separate teacher placement key</summary><p>Square token in the tray; circle token beside the tray; star on the card. This expected placement is teacher guidance, not observed learner evidence. Role labels A/B are neutral, proposed responsibilities until agreed by the actual team.</p></details>
<section class="panel export"><h2>Paired responsibility plan</h2><div class="controls"><button type="button" id="prepare">Prepare text</button><button type="button" id="select-text" class="secondary">Select text</button></div><p id="export-error" class="error" role="alert"></p><label for="export-text">Exact generated plain text — manual copying</label><textarea id="export-text" rows="10" readonly></textarea><small>Select text, then copy it manually into your maintained document. Nothing is saved or sent.</small></section>
<footer>Local planning and demonstration copy. Practice actions do not populate the actual observation log or establish learner mastery. No diagnosis, teacher-performance grade, collection, persistence, staff assignment, or school-compliance claim.</footer></div>
<section id="learner-view" hidden><span class="eyebrow">Written sequence practice</span><h1>Follow the steps in order.</h1><ol class="learner-instructions"><li>Place a square token in the tray.</li><li>Put a circle token beside the tray.</li><li>Draw a star on the card.</li></ol><svg class="practice-board" viewBox="0 0 600 250" role="img" aria-label="Practice surface: tray on the left, empty space beside it, and a card on the right."><rect x="25" y="60" width="210" height="150" rx="18" fill="#d4e4f3" stroke="#426b8d" stroke-width="3"/><text x="95" y="240">Tray</text><rect x="395" y="55" width="170" height="155" rx="4" fill="#fff6cf" stroke="#b19a56" stroke-width="2"/><text x="450" y="240">Card</text><rect id="square" x="90" y="105" width="45" height="45" fill="#5c81b1" visibility="hidden"/><circle id="circle" cx="307" cy="135" r="25" fill="#d78e64" visibility="hidden"/><path id="star" d="M480 92 L490 117 L518 117 L496 134 L504 160 L480 145 L457 160 L464 134 L442 117 L470 117 Z" fill="#c69b25" stroke="#8c6b12" visibility="hidden"/></svg><div class="controls"><button type="button" id="action-0">1 · Place square</button><button type="button" id="action-1">2 · Place circle</button><button type="button" id="action-2">3 · Draw star</button></div><p id="practice-feedback" class="feedback" aria-live="polite">Start with the first written step.</p><div class="controls"><button type="button" id="reset-practice" class="secondary">Reset practice</button><button type="button" id="back-teacher" class="secondary">Back to teacher plan</button></div><p>Which written step did you use? Point to it and explain your action to your teacher.</p></section>
</main><script>const $=id=>document.getElementById(id);const on=(id,e,fn)=>$(id).addEventListener(e,fn);const txt=(id,v)=>$(id).textContent=v;const esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));const positive=x=>String(x).trim()!==''&&Number.isFinite(Number(x))&&Number(x)>0;const num=x=>Number(x.toPrecision(10)).toString();function enter(id,fn){on(id,'keydown',e=>{if(e.key==='Enter'&&!e.isComposing&&e.keyCode!==229){e.preventDefault();fn()}})}function selectText(id){$(id).focus();$(id).select()}
function clockMinute(s){if(!/^(?:[01]\d|2[0-3]):[0-5]\d$/.test(s))throw Error('Use a valid 24-hour time as HH:MM.');const [h,m]=s.split(':').map(Number);return h*60+m}
function whole(s,label){if(!/^\d+$/.test(String(s))||!Number.isSafeInteger(Number(s)))throw Error(label+' must be a nonnegative whole number.');return Number(s)}
function isoDay(s){if(!/^\d{4}-\d{2}-\d{2}$/.test(s))throw Error('Use a real calendar date as YYYY-MM-DD.');const d=new Date(s+'T00:00:00Z');if(!Number.isFinite(d.getTime())||d.toISOString().slice(0,10)!==s)throw Error('Use a real calendar date as YYYY-MM-DD.');return d.getTime()/86400000}

const phases=[["Joint preview", 5, "Read the shared task and identify model materials.", "Check three sample learner copies and object descriptions with A."], ["Model", 6, "Read and model each step in order.", "Observe whether the token/card action matches the written instruction."], ["Pair practice", 10, "Facilitate practice using the unchanged instructions.", "Record actual step-reference questions in the blank observation log."], ["Lead handover and review", 6, "Observe which written step learners refer to.", "Lead a review of the same three-step sequence."], ["Joint exit and readback", 3, "Ask the exit question and read back the evidence.", "Check the readback and agree what still needs explanation."]];const steps=["Place a square token in the tray.", "Put a circle token beside the tray.", "Draw a star on the card."];

let active=0,focus='both',valid=false,ranges=[],practiceStep=0;
function coSchedule(values,available){if(!/^[1-9]\d*$/.test(available)||Number(available)>480)throw Error('Use 1–480 whole available minutes.');if(values.some(v=>!/^[1-9]\d*$/.test(v)||Number(v)>180))throw Error('Each phase needs 1–180 whole minutes.');let total=0;const ranges=values.map(v=>{const start=total;total+=Number(v);return start+'–'+total});return {total,ranges,valid:total===Number(available)}}
function phaseView(){txt('phase-title',phases[active][0]);txt('phase-range',ranges[active]?ranges[active]+' min':'Time pending');txt('a-action',phases[active][2]);txt('b-action',phases[active][3]);txt('handover',active===3?'Spoken handover: “Teacher B will now lead the sequence review. I will observe which written step learners refer to.”':active===4?'Joint exit: “Which written step did you use?” Read back actual evidence and distinguish it from interpretation.':'Keep both actions tied to the same written task. No actual learner result is prefilled.');$('a-lane').setAttribute('data-focus',String(focus==='a'||focus==='both'));$('b-lane').setAttribute('data-focus',String(focus==='b'||focus==='both'));for(let i=0;i<phases.length;i++)$('phase-'+i).setAttribute('aria-pressed',String(i===active));for(const f of ['a','b','both'])$('focus-'+f).setAttribute('aria-pressed',String(f===focus))}
function updateSchedule(){try{const s=coSchedule(phases.map((_,i)=>$('minutes-'+i).value),$('available').value);valid=s.valid;ranges=s.ranges;txt('plan-total',valid?s.total+'-minute plan ready':s.total+' scheduled / '+$('available').value+' available');txt('schedule-error',valid?'':'Reconcile phase times before preparing the plan.')}catch(e){valid=false;ranges=[];txt('plan-total','Time allocation needs input');txt('schedule-error',e.message)}for(let i=0;i<phases.length;i++)txt('range-'+i,ranges[i]||'—');$('export-text').value='';phaseView()}
for(let i=0;i<phases.length;i++){on('phase-'+i,'click',()=>{active=i;phaseView()});on('minutes-'+i,'input',updateSchedule)}on('available','input',updateSchedule);for(const f of ['a','b','both'])on('focus-'+f,'click',()=>{focus=f;phaseView()});
function resetPractice(){practiceStep=0;for(const id of ['square','circle','star'])$(id).setAttribute('visibility','hidden');txt('practice-feedback','Start with the first written step.')}
for(let i=0;i<3;i++)on('action-'+i,'click',()=>{if(i!==practiceStep){txt('practice-feedback',practiceStep===3?'Sequence is already shown. Reset to practice it again.':'That action is out of order. Use written step '+(practiceStep+1)+' next.');return}$(['square','circle','star'][i]).setAttribute('visibility','visible');practiceStep++;txt('practice-feedback',practiceStep===3?'All three actions are shown in the supplied order. Point to the written step for each action; your teacher reviews the explanation.':'Action matches written step '+practiceStep+'. Continue with step '+(practiceStep+1)+'.')});
on('show-learner','click',()=>{$('teacher-view').hidden=true;$('learner-view').hidden=false;resetPractice();$('action-0').focus()});on('back-teacher','click',()=>{$('teacher-view').hidden=false;$('learner-view').hidden=true;$('show-learner').focus()});on('reset-practice','click',resetPractice);
for(const n of ['copies','supports','observed-phase','step-ref','actual','observer','followup','next-teaching'])on(n,'input',()=>{$('export-text').value='';txt('export-error','')});
on('prepare','click',()=>{try{if(!valid)throw Error('Resolve the timetable before preparing the plan.');$('export-text').value='CO-TEACHING RESPONSIBILITY PLAN — TEACHER COPY\nGoal: follow three written instructions in order and point to the step used.\n'+steps.map((s,i)=>(i+1)+'. '+s).join('\n')+'\n\nPreparation: A prepares text/model materials; B checks three sample learner copies and object descriptions. Actual class quantity: '+($('copies').value||'TO CONFIRM')+'\nApproved supports: '+($('supports').value||'TO CONFIRM')+'\n\n'+phases.map((p,i)=>ranges[i]+' min · '+p[0]+'\nA: '+p[2]+'\nB: '+p[3]).join('\n\n')+'\n\nHandover: Teacher B will now lead the sequence review. I will observe which written step learners refer to.\nExit question: Which written step did you use?\n\nActual observation phase: '+($('observed-phase').value||'NOT RECORDED')+'\nWritten step referenced: '+($('step-ref').value||'NOT RECORDED')+'\nActual question/explanation: '+($('actual').value||'NOT RECORDED')+'\nObserver: '+($('observer').value||'NOT RECORDED')+'\nJoint follow-up question: '+($('followup').value||'NOT RECORDED')+'\nJoint next teaching step: '+($('next-teaching').value||'NOT RECORDED');txt('export-error','')}catch(e){$('export-text').value='';txt('export-error',e.message)}});on('select-text','click',()=>selectText('export-text'));updateSchedule();
</script></body></html>