Share the pen, retain the evidence — Plan a purpose/audience conversation, oral rehearsal, explicit teacher/learner pen handovers and shared rereading while keeping the joint…

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>Share the pen, retain the evidence</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:#4e3c49;--bg:#fcf5f7;--accent:#9b5379;--muted:#816977;--line:#e2ceda}.message{font:clamp(28px,4vw,39px)/1.75 Georgia,serif;background:#fff;padding:23px;border:1px solid var(--line);border-left:6px solid var(--accent);margin:25px 0}.message span{display:inline-block;padding:0 3px}.message .turn{background:#f4d7e4;border-bottom:3px solid #a65e81}.handover{background:#f7e8f0;padding:19px;border-radius:7px;margin-top:17px}.actual{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.turn-note{padding:18px;border:1px solid var(--line);border-radius:7px}.turn-note textarea{min-height:75px}.reread{background:#fefbf0}.features{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}@media(max-width:600px){.actual{grid-template-columns:1fr}.message{padding:18px}}</style></head><body><main><p class="eyebrow">Interactive writing · fictional 20-minute plan</p><h1>A message for classmates.</h1><p>Agree, rehearse, share the pen and reread: keep proposed turns separate from actual writing.</p><section class="message" aria-label="Agreed eight-word message"><span id="word-0">We</span> <span id="word-1">put</span> <span id="word-2">the</span> <span id="word-3" class="turn">blue</span> <span id="word-4">markers</span> <span id="word-5">in</span> <span id="word-6">the</span> <span id="word-7">tray.</span></section><div class="two"><section class="panel"><h2>Prepare the next pen handover</h2><div class="row"><button id="turn-1" type="button" class="secondary">1 · We put the</button><button id="turn-2" type="button">2 · blue</button><button id="turn-3" type="button" class="secondary">3 · markers</button><button id="turn-4" type="button" class="secondary">4 · in the tray.</button></div><div class="handover"><h3 id="planned-holder">Proposed learner turn · support to confirm</h3><p id="handover-cue">Our next word is blue. Let’s rehearse that word before your turn.</p><p id="planned-action" class="small">Teacher confirms actual support; this is a plan, not learner writing.</p></div></section><section class="panel"><h2>Purpose and oral rehearsal</h2><p><strong>Reader:</strong> classmates.<br><strong>Purpose:</strong> tell them where the blue markers are placed.</p><p>Ask: “Who will read our message?” and “What do our classmates need to know?” Then rehearse the complete agreed sentence before anyone writes.</p><p class="small">Materials: message strip/shared writing surface, writing tools and agreed planning text. This fictional message is not a room observation or permission to install a physical label.</p></section></div><section class="panel reread"><h2>Review an exact-text draft</h2><label for="draft">Teacher review text · no child-writing simulation<textarea id="draft">We put the blue markers in the tray.</textarea></label><p id="draft-result" role="status">Matches the agreed eight-word message.</p><div class="features"><span id="capital">Capital W: present</span><span id="spacing">Word spacing: exact</span><span id="period">Final period: present</span></div><p class="small" style="margin-top:14px">This checks local text against this fixed agreement, not handwriting, actual readability or independent spelling. A genuine class revision needs a newly recorded agreement.</p></section><section class="panel"><div class="row" style="justify-content:space-between"><h2>Conversation → rehearsal → writing → review</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 original phase times</button></section><section class="panel"><h2>Actual contribution log · blank before teaching</h2><div id="actual-turns" class="actual"></div></section><section class="panel"><h2>Separate individual exit observation</h2><p>Consult the actual log. Ask the learner to point to a word they actually contributed and explain a written feature. If no written contribution occurred, record that.</p><label for="exit-response">Actual contribution / response / support<textarea id="exit-response"></textarea></label><label for="next-step">Next teaching step<textarea id="next-step"></textarea></label></section><footer>HTML plan and text-review companion; actual message strip, learner evidence and native school records remain authoritative. No click-to-write claim, saved records, automatic ability grade, US curriculum alignment or learning-effect promise. Joint writing does not replace systematic spelling/handwriting instruction.</footer></main><script>
'use strict';const $=id=>document.getElementById(id);

const agreed='We put the blue markers in the tray.';const turns=[{words:[0,1,2],holder:'Proposed teacher turn',cue:'Teacher writes “We put the” while modeling the agreed message.',action:'Record actual writing and modeling; teacher writing stays teacher writing.'},{words:[3],holder:'Proposed learner turn · support to confirm',cue:'Our next word is blue. Let’s rehearse that word before your turn.',action:'Teacher confirms actual support; displaying this plan is not a learner writing blue.'},{words:[4],holder:'Teacher or confirmed supported learner turn',cue:'The next word is markers. Confirm the actual pen holder and support before handover.',action:'Do not assume independent spelling or a learner contribution.'},{words:[5,6,7],holder:'Agreed remaining turns · holders to confirm',cue:'Rehearse “in the tray.” and agree each remaining handover.',action:'Keep the location phrase and final period; record actual contributions.'}];let current=1;function render(){for(let i=0;i<8;i++)$('word-'+i).className=turns[current].words.includes(i)?'turn':'';for(let i=0;i<4;i++)$('turn-'+(i+1)).setAttribute('aria-pressed',String(i===current));$('planned-holder').textContent=turns[current].holder;$('handover-cue').textContent=turns[current].cue;$('planned-action').textContent=turns[current].action;}for(let i=0;i<4;i++)$('turn-'+(i+1)).addEventListener('click',()=>{current=i;render();});function inspect(text){if(!text)return{message:'No draft supplied.',capital:false,period:false,spacing:false};return{message:text===agreed?'Matches the agreed eight-word message.':!text.includes('in the tray')?'Does not match: the location phrase “in the tray” is missing or changed.':'Does not match the exact agreed text. Compare wording, case, spacing and final period.',capital:text.startsWith('W'),period:text.endsWith('.'),spacing:text===text.trim()&&!/\s{2,}/.test(text)&&text.split(' ').length===8};}function review(){const r=inspect($('draft').value);$('draft-result').textContent=r.message;$('capital').textContent='Capital W: '+(r.capital?'present':'missing');$('spacing').textContent='Word spacing: '+(r.spacing?'eight single-spaced words':'review needed');$('period').textContent='Final period: '+(r.period?'present':'missing');}$('draft').addEventListener('input',review);for(let i=1;i<=4;i++){const div=document.createElement('div');div.className='turn-note';const h=document.createElement('h3');h.textContent='Turn '+i+' · actual, not proposed';div.appendChild(h);for(const[k,name]of[['holder','Actual pen holder / record reference'],['written','Actual word(s) written'],['support','Actual support / modeling used']]){const l=document.createElement('label');l.textContent=name;l.setAttribute('for','actual-'+i+'-'+k);const field=document.createElement('textarea');field.id='actual-'+i+'-'+k;l.appendChild(field);div.appendChild(l);}$('actual-turns').appendChild(div);}const target=20,blocks=[['Purpose and audience','Ask who reads the message and what location information they need.',3],['Oral rehearsal','Say the complete agreed sentence; check its location meaning.',5],['Joint writing and pen sharing','Name next contribution, confirm holder/support and log actual handovers.',7],['Reread and compare','Check exact words, initial W, spaces, final period and purpose.',3],['Individual exit','Consult actual contributions; ask about one written feature and record the response.',2]];render();review();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>