Draw, guess, explain

Select the code and use your copy shortcut. Changes in this preview are temporary.

<!doctype html>
<html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Draw, guess, explain</title><style>*{box-sizing:border-box}body{margin:0;background:#f3f4f2;color:#202c32;font:16px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}main{max-width:1120px;margin:auto;padding:30px 28px 60px}header{margin-bottom:22px}.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:750;color:#59676b}h1{font-size:clamp(25px,4vw,36px);line-height:1.15;letter-spacing:-.035em;margin:7px 0 10px}h2{font-size:21px;line-height:1.3;margin:0 0 16px}h3{font-size:17px;margin:0 0 10px}p{margin:8px 0 16px}label{display:block;font-size:14px;font-weight:650;margin:12px 0 5px}input,select,textarea,button{font:inherit}input,select,textarea{width:100%;min-width:0;border:1px solid #b6c0bf;border-radius:7px;background:#fff;color:#202c32;padding:10px 12px}textarea{resize:vertical;min-height:88px}input[type=checkbox]{width:18px;height:18px;vertical-align:middle;margin-right:8px}button{border:1px solid #b8c3c1;border-radius:7px;padding:10px 15px;background:#fff;color:#203632;font-weight:650;cursor:pointer}button.primary{background:#243f3c;color:white;border-color:#243f3c}button:hover{filter:brightness(.95)}button:disabled{opacity:.48;cursor:not-allowed}:focus-visible{outline:3px solid #b05814;outline-offset:3px}.buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}.panel{background:#fff;border:1px solid #d7ddda;border-radius:12px;padding:24px}.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px}.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.result{background:#e4eee8;border:1px solid #c5d6ca;border-radius:12px;padding:28px}.big{font-size:clamp(32px,5vw,56px);font-weight:740;line-height:1.14;letter-spacing:-.04em;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.muted{color:#59686a;font-size:14px}.tag{display:inline-block;background:#edf0ed;border-radius:4px;padding:3px 8px;font-size:12px;font-weight:700}.error{color:#9d301b;font-weight:650;min-height:24px;margin-top:10px}.note{border-left:3px solid #9a794a;padding:10px 15px;background:#faf5e9;margin:18px 0}.below{margin-top:28px}.record{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;background:#f2f4f1;padding:18px;border-radius:8px}table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;vertical-align:top;border-bottom:1px solid #dce1dd;padding:12px 10px;overflow-wrap:anywhere}th{color:#59686a;font-size:12px}a{color:#2c5a6a;overflow-wrap:anywhere}details{margin-top:20px}summary{cursor:pointer;font-weight:650}hr{border:0;border-top:1px solid #d6dcd6;margin:22px 0}[hidden]{display:none!important}ol,ul{padding-left:23px}.statline{display:flex;gap:20px;flex-wrap:wrap;margin:18px 0}.statline strong{display:block;font-size:24px}.inline{display:flex;align-items:center;gap:8px}.inline label{margin:0} .blank{min-height:36px;border-bottom:1px dashed #aebbb5;color:#66736d;font-size:13px;padding:8px 0}@media(max-width:720px){main{padding:22px 18px 45px}.split{grid-template-columns:1fr}.panel,.result{padding:20px}.row{gap:12px}th,td{padding:10px 6px}}@media(max-width:400px){main{padding:18px 14px 40px}.big{font-size:34px}button{padding:10px 12px}.row{grid-template-columns:1fr}.panel,.result{padding:17px}}.inline{flex-wrap:wrap}input[type=range]{padding:0}pre{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.metric{font-size:42px;font-weight:750;line-height:1.15;letter-spacing:-.035em}.caption{font-size:13px;color:#55656b}.readout{font:15px/1.6 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}.strip{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.chip{padding:5px 10px;background:#e5eaf0;border-radius:5px;font-size:13px}button[aria-pressed=true]{background:#263b50;color:white}.subtle{background:#f6f7f7}.fileCode{min-height:230px;font:14px/1.6 ui-monospace,Consolas,monospace}.wideButton{width:100%}.visuallyHidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}svg{max-width:100%}.nowrap{white-space:nowrap}.debrief{display:grid;grid-template-columns:240px 1fr;gap:30px;align-items:center;border:1px solid #cad8c7;background:#e8eee3;border-radius:12px;padding:24px}.debrief h2{font-size:28px;line-height:1.35;margin-top:10px}.sketch{text-align:center}.sketch svg{display:block;width:190px;margin:auto}.wordBank{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;border-top:1px solid #d7ded2;padding-top:20px}.wordBank h3{font-size:24px;margin-top:5px}.wordBank p{font-size:14px}@media(max-width:650px){.debrief{grid-template-columns:1fr;gap:18px;padding:20px}.sketch svg{width:145px}.debrief h2{font-size:24px}.wordBank{grid-template-columns:1fr;gap:10px}}</style></head><body><main><header><div class="eyebrow">Classroom vocabulary · Teacher preparation copy</div><h1>Draw, guess, explain</h1></header>
<p>Keep the intended word, the guess and the visual reasoning as separate observations.</p><section class="debrief"><div class="sketch"><svg viewBox="0 0 180 180" role="img" aria-labelledby="sketchTitle"><title id="sketchTitle">Original demonstration sketch with two upright lines and four connecting crosspieces</title><g fill="none" stroke="#344a41" stroke-width="4" stroke-linecap="round"><path d="M58 20V160 M122 20V160 M58 50H122 M58 76H122 M58 102H122 M58 128H122"/></g></svg><span class="caption">Original teacher demonstration · W2</span></div><div><span class="eyebrow">Fictional worked debrief</span><h2>Intended: ladder<br>Guess: stairs</h2><p><strong>Visible feature:</strong> repeated horizontal marks suggest steps for climbing.</p><p><strong>After reveal:</strong> side supports and connecting rungs distinguish the intended ladder here.</p><span class="chip">Plausible guess · Different target word</span></div></section>
<section class="panel below"><div class="strip"><h2>Prepare the next observation</h2><span id="turn" class="tag">Turn 1 · W2</span></div><p id="roleLine">Rotate drawer, observer and explainer; allow pass or a planned support route.</p><div class="row"><div><label for="role">Active observation role</label><select id="role"><option>Drawer</option><option>Observer</option><option>Explainer</option></select></div><div><label for="support">Participation route</label><select id="support"><option>Paper or board drawing</option><option>Teacher-supplied original picture</option><option>Written explanation</option><option>Pass acting role</option></select></div></div><label for="drawing">Actual drawing or source reference</label><input id="drawing" placeholder="Leave blank until supplied"><div class="row"><div><label for="guess">Observed guess</label><input id="guess" placeholder="Actual learner response"></div><div><label for="feature">Visible feature cited</label><input id="feature" placeholder="Actual observed evidence"></div></div><label for="identification">Teacher-reviewed target identification</label><select id="identification"><option value="">Not reviewed</option><option>Matches intended target</option><option>Differs from intended target</option><option>Not assessed / pass</option></select><label for="explanation">After-reveal explanation</label><textarea id="explanation" placeholder="I guessed ___ because I noticed ___. The revealed word is ___. The feature that helps distinguish it is ___."></textarea><div class="buttons"><button id="archive" class="primary">Archive turn & prepare next</button></div><p id="feedback" class="error" role="status"></p></section>
<section class="panel below"><h2>Reviewed word cards · Teacher key</h2><p class="muted">This teacher preparation page contains the key openly. Use only the separate student slip for projection or learner printouts; collapsed panels cannot secure answers.</p><div id="bank" class="wordBank"></div><div class="buttons"><button id="student">Show student slip to copy</button><button id="key">Show teacher key to copy</button></div><p id="downloadStatus" class="muted" role="status"></p><h3 class="below">Earlier local observations</h3><div id="ledger" class="record">No actual observations recorded.</div><p class="muted">Archived turns remain only in this open session. No timed score, support penalty, automatic judging or mastery inference is used. Drawing happens on paper, a board or through the chosen support route.</p><a href="https://www.education.ne.gov/wp-content/uploads/2017/07/LessonActivitiesYr4.pdf">Nebraska: vocabulary, drawing roles and turn rotation</a></section><footer class="muted below">Local working copy · Changes are not saved after this page closes.</footer></main><script data-app>
(()=>{
const $=id=>document.getElementById(id);const text=(id,v)=>$(id).textContent=String(v);const on=(id,type,fn)=>$(id).addEventListener(type,fn);const escapeHTML=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));const decimal=s=>{const raw=String(s).trim();if(!/^[0-9]+(?:[.][0-9]{1,6})?$/.test(raw)||!Number.isFinite(+raw)||+raw>1000000)throw Error('Use a number from 0 to 1,000,000 with at most six decimal places. Blank is missing.');return +raw};const display=n=>n>0&&n<0.000001?n.toExponential(6):Number(n.toFixed(6)).toString();const download=(filename,content,type='text/plain')=>{let panel=document.getElementById('manualCopyPanel');if(!panel){panel=document.createElement('section');panel.id='manualCopyPanel';panel.className='panel below';panel.style.cssText='max-width:100%;margin:24px 0';const heading=document.createElement('h2');heading.id='manualCopyName';const hint=document.createElement('p');hint.textContent='Select the content below, then press Ctrl+C or Command+C to copy it into your own file. This preview does not download files.';const area=document.createElement('textarea');area.id='manualCopyContent';area.readOnly=true;area.rows=12;area.spellcheck=false;area.setAttribute('aria-label','Generated file content to copy');area.style.cssText='display:block;width:100%;max-width:100%;box-sizing:border-box;font:13px/1.5 ui-monospace,monospace';const select=document.createElement('button');select.type='button';select.id='manualCopySelect';select.textContent='Select content';select.addEventListener('click',()=>{area.focus();area.select();});panel.append(heading,hint,area,select);(document.querySelector('main')||document.body).append(panel);}document.getElementById('manualCopyName').textContent=String(filename);const area=document.getElementById('manualCopyContent');area.value=String(content);area.dataset.mimeType=String(type);panel.scrollIntoView({block:'nearest'});area.focus();area.select();};

const bank=[{id:'W1',word:'bridge',meaning:'A structure that provides a way across a gap or obstacle'},{id:'W2',word:'ladder',meaning:'A climbing tool with two side supports and connecting rungs'},{id:'W3',word:'umbrella',meaning:'A handheld covering used for protection from rain'}];let cardIndex=1,turnNumber=1,records=[];
function page(title,body){return '<!doctype html><html lang="en-US"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>'+title+'</title><style>body{max-width:760px;margin:30px auto;padding:24px;font:18px/1.6 system-ui;color:#243a30}section{margin:24px 0}.line{min-height:55px;border-bottom:1px solid #718277}.space{height:260px;border:1px dashed #718277}h1{line-height:1.2}@media print{body{margin:0}}</style></head><body>'+body+'</body></html>'}
function studentHTML(){return page('Draw, guess, explain · Student slip','<h1>Draw, guess, explain</h1><p>Turn/card reference: __________ · Role: __________</p><p>Draw the teacher-supplied word without writing it. Choose paper, an approved picture, a written route or pass.</p><div class="space" aria-label="Drawing space"></div><section><strong>My guess</strong><div class="line"></div><strong>What visible feature did I use?</strong><div class="line"></div><strong>After the teacher reveals the word, compare the features.</strong><div class="line"></div><p>I guessed ___ because I noticed ___. The revealed word is ___. The feature that helps distinguish it is ___.</p></section>')}
function keyHTML(){return page('Teacher word and meaning key','<h1>Teacher word and meaning key</h1><p>Give the selected word privately to the drawer. Keep this file separate from learner printouts.</p>'+bank.map(c=>'<section><h2>'+c.id+' · '+c.word+'</h2><p>'+c.meaning+'</p></section>').join('')+'<p>Short exercise meanings; review pronunciation, context and support needs before use. No support penalty.</p>')}
function archive(){const support=$('support').value,passed=support==='Pass acting role';if(!passed&&(!$('guess').value.trim()||!$('feature').value.trim()||!$('explanation').value.trim()||!$('identification').value)){text('feedback','Record the observed guess, cited feature, reviewed identification and explanation before preparing the next turn.');return false}records.push({turn:turnNumber,card:bank[cardIndex].id,role:$('role').value,support,drawing:$('drawing').value,guess:$('guess').value,feature:$('feature').value,revealedWord:bank[cardIndex].word,identification:passed?'Not assessed / pass':$('identification').value,explanation:$('explanation').value});turnNumber++;cardIndex=(cardIndex+1)%bank.length;['drawing','guess','feature','explanation','identification'].forEach(id=>$(id).value='');$('role').selectedIndex=(turnNumber-1)%3;$('support').selectedIndex=0;render();text('feedback','Prior observation archived locally. New turn is blank; reviewed card '+bank[cardIndex].id+' selected.');return true}
function render(){text('turn','Turn '+turnNumber+' · '+bank[cardIndex].id);text('roleLine','Current teacher card: '+bank[cardIndex].word+'. Roles rotate; the next learner response remains blank.');$('bank').innerHTML=bank.map(c=>'<div><span class="eyebrow">'+c.id+'</span><h3>'+c.word+'</h3><p>'+c.meaning+'</p></div>').join('');text('ledger',records.length?records.map(r=>'Turn '+r.turn+' / '+r.card+' / '+r.role+'\nRoute: '+r.support+'\nDrawing reference: '+r.drawing+'\nObserved guess: '+r.guess+'\nVisible feature: '+r.feature+'\nRevealed word: '+r.revealedWord+'\nTeacher review: '+r.identification+'\nExplanation: '+r.explanation).join('\n\n'):'No actual observations recorded.')}
on('archive','click',archive);on('student','click',()=>{download('student-drawing-slip.html',studentHTML(),'text/html');text('downloadStatus','Student-only HTML file shown below for manual copying; it contains no word key.')});on('key','click',()=>{download('teacher-word-key.html',keyHTML(),'text/html');text('downloadStatus','Separate teacher key HTML file shown below for manual copying. Keep it off the student projection.')});window.app={archive,studentHTML,keyHTML,getRecords:()=>records,getCard:()=>bank[cardIndex]};render();
})();
</script></body></html>