Cloud clue lab

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>Cloud clue lab</title><style>*{box-sizing:border-box}body{margin:0;background:#f3f1eb;color:#202e35;font:16px/1.5 system-ui,sans-serif}main{max-width:1160px;margin:auto;padding:32px 28px 70px}h1{font-size:clamp(26px,4vw,42px);line-height:1.12;margin:8px 0 12px;letter-spacing:-.04em}h2{font-size:22px;margin:0 0 16px}h3{font-size:17px;margin:0 0 8px}p{margin:8px 0 16px}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:750;color:#45665e}.lede{color:#55636a;max-width:780px}.panel{background:#fff;border:1px solid #d9dfd9;border-radius:16px;padding:24px;margin:20px 0}.hero{background:#193f38;color:white}.hero .muted{color:#bfd6cb}.split{display:grid;grid-template-columns:1.1fr 1fr;gap:24px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.big{font-size:clamp(32px,5vw,58px);line-height:1.15;font-weight:750;letter-spacing:-.04em}.muted,small{color:#61716e}.badge{display:inline-block;padding:4px 9px;border-radius:20px;background:#e5efe8;color:#284e40;font-size:13px;font-weight:650}.warn{background:#fff2d2;color:#795213}.rule{border-top:1px solid #dce2dd;padding-top:16px;margin-top: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%;border:1px solid #aebbb5;border-radius:7px;background:white;color:#20332c;padding:10px;min-height:44px}textarea{min-height:96px;resize:vertical}button{min-height:44px;border:1px solid #80968c;border-radius:7px;padding:9px 14px;background:white;color:#1c4637;cursor:pointer}button.primary{background:#245d47;color:white;border-color:#245d47}button:disabled{opacity:.5;cursor:default}button[aria-pressed=true]{background:#d8eb90;color:#1c3d29;border-color:#536a2d}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid #d5782a;outline-offset:3px}.error{color:#913920;min-height:24px}pre,.record{white-space:pre-wrap;overflow-wrap:anywhere;font:14px/1.6 ui-monospace,monospace;background:#eef2ec;border-radius:8px;padding:16px}table{border-collapse:collapse;width:100%;font-size:14px}th,td{border-bottom:1px solid #dce2dd;text-align:left;padding:12px 8px;vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.06em}.scroll{overflow:auto}details{margin:24px 0}summary{cursor:pointer;min-height:44px;font-weight:650}svg{max-width:100%;height:auto}.small{font-size:13px}.stack>*+*{margin-top:12px}@media(max-width:720px){main{padding:22px 16px 48px}.split{grid-template-columns:1fr}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.panel{padding:18px;margin:16px 0}h1{font-size:32px}.desktop-table{min-width:680px}}@media(max-width:400px){.grid{grid-template-columns:1fr}main{padding:18px 14px}.panel{padding:16px}.row>button{flex:1}h1{font-size:29px}}</style></head><body><main><div class="eyebrow">Science desk · Four fictional clue cards</div><h1>Which cloud form fits?</h1><p class="lede">Use visible features to choose a broad form—or explain why the evidence is insufficient.</p><section class="panel split"><div><div class="row"><span class="badge" id="cardNumber"></span><span class="small">Original teaching schematic</span></div><div id="drawing" style="margin-top:14px"></div><label for="clue">Clue supplied on this card</label><textarea id="clue"></textarea><p id="version" class="small"></p></div><div><h2>Your evidence-based response</h2><label for="choice">Broad form</label><select id="choice"><option value="">Choose a response</option><option value="cirro">Cirro-form</option><option value="cumulo">Cumulo-form</option><option value="strato">Strato-form</option><option value="unknown">Insufficient features</option></select><label for="reason">Which features support your choice?</label><textarea id="reason" placeholder="Name the evidence you used"></textarea><label for="extra">What additional feature would help?</label><input id="extra"><div class="row" style="margin-top:16px"><button class="primary" id="check">Check reasoning against key</button><button id="reveal">Reveal teacher key</button></div><p id="feedback" class="record" role="status">Worked example: high, thin, hair-like wisps support cirro-form. Your response is blank.</p></div></section><nav class="row" aria-label="Card navigation"><button id="prev">Previous card</button><button id="next">Next card</button><button id="restore">Restore this card's clue</button><button id="reset">Reset all responses</button></nav><details><summary>Teacher key and scope</summary><div id="key"></div><p>These are broad form descriptions, not a complete cloud taxonomy. Nimbo-form also exists. The schematics are original illustrations, not photographs or observed weather. No forecast or rain certainty follows from this game. Editing a clue removes automatic key checking until the original clue is restored. Free-text reasoning is for teacher discussion, not automatically graded. Nothing is saved after reload.</p></details></main><script>const $=id=>document.getElementById(id),put=(id,v)=>$(id).textContent=String(v),esc=s=>String(s).replace(/[&<>"']/g,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
const cards=[{id:'C1',clue:'High, thin, wispy and hair-like',key:'cirro',why:'High, thin, hair-like wisps support cirro-form.',alt:'Thin curved wisps drawn as separated hair-like lines.',art:'<path d="M30 70 Q100 20 170 45 M55 95 Q125 40 240 65 M125 110 Q180 75 270 80" fill="none" stroke="white" stroke-width="8" stroke-linecap="round"/>'},{id:'C2',clue:'Detached, fluffy, sharply outlined, flat base',key:'cumulo',why:'Detached puffs with sharp outlines and flat bases support cumulo-form.',alt:'Two separate outlined cloud puffs with flat horizontal bases.',art:'<path d="M30 115V94Q26 70 52 72Q62 35 88 60Q125 47 133 82Q154 83 150 115Z M185 115V95Q180 73 201 75Q214 49 234 72Q271 65 274 115Z" fill="white" stroke="#67879b" stroke-width="3"/>'},{id:'C3',clue:'Broad blanket-like layer, diffuse edges',key:'strato',why:'A broad diffuse-edged blanket supports strato-form.',alt:'A long layered band with softly drawn diffuse upper and lower edges.',art:'<path d="M15 65Q70 40 125 63T285 62L285 118Q210 135 155 118T15 122Z" fill="#ecf3f5" stroke="#d2e2e8" stroke-width="13" stroke-linejoin="round"/>'},{id:'C4',clue:'Gray in the sky',key:'unknown',why:'Color alone does not identify a form. Ask about shape, edge definition, height or layering.',alt:'No cloud image: the supplied clue contains no shape information.',art:'<text x="150" y="88" text-anchor="middle" fill="#345164" font-size="16">No shape features supplied</text>'}];let index=0,answers=cards.map(c=>({clue:c.clue,choice:'',reason:'',extra:'',version:1}));
function evaluate(i,a){const c=cards[i];if(a.clue!==c.clue)return 'Edited clue: original key is suspended. Ask a teacher to review the new evidence.';if(!a.choice)return 'Choose a response. Unanswered is different from insufficient features.';if(!a.reason.trim())return 'Add the feature evidence behind your choice.';return (a.choice===c.key?'Choice matches the supplied features. ':'Revisit the supplied features. ')+c.why+' Your explanation still needs teacher review.'}
function show(){const c=cards[index],a=answers[index];put('cardNumber',c.id+' · '+(index+1)+' / 4');$('drawing').innerHTML='<svg viewBox="0 0 300 160" role="img" aria-label="'+c.alt+'"><rect width="300" height="160" rx="12" fill="#b9d6e6"/>'+ (a.clue===c.clue?c.art:'<text x="150" y="85" text-anchor="middle" font-size="16">Edited clue · schematic withheld</text>')+'</svg>';for(const id of ['clue','choice','reason','extra'])$(id).value=a[id];put('version','Clue revision '+a.version+(a.clue===c.clue?' · original key available':' · teacher review required'));$('prev').disabled=index===0;$('next').disabled=index===3;$('check').disabled=a.clue!==c.clue;$('reveal').disabled=a.clue!==c.clue;put('feedback',a.clue===c.clue?'Read the clues, choose a form and state your evidence.':'Edited clue: key checking suspended.');put('key','Teacher key is hidden. Reveal it for the current original card.')}
for(const id of ['clue','choice','reason','extra'])$(id).addEventListener(id==='choice'?'change':'input',()=>{const a=answers[index];a[id]=$(id).value;if(id==='clue'){a.version++;const pos=$('clue').selectionStart;show();$('clue').focus();if(typeof $('clue').setSelectionRange==='function')$('clue').setSelectionRange(pos,pos)}else put('feedback','Response changed; check again when ready.')});$('check').addEventListener('click',()=>put('feedback',evaluate(index,answers[index])));$('reveal').addEventListener('click',()=>put('key',cards[index].id+' · '+cards[index].why));$('prev').addEventListener('click',()=>{if(index>0)index--;show()});$('next').addEventListener('click',()=>{if(index<3)index++;show()});$('restore').addEventListener('click',()=>{answers[index].clue=cards[index].clue;answers[index].version++;show()});$('reset').addEventListener('click',()=>{answers=cards.map(c=>({clue:c.clue,choice:'',reason:'',extra:'',version:1}));index=0;show();$('choice').focus()});globalThis.Tool={cards,evaluate,getAnswers:()=>answers};show();</script></body></html>