Animal evidence • backbone field cards — Have learners classify supplied dog, fish, octopus and spider records by presence or absence of a backbone and justify the choice from…

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>Animal evidence • backbone field cards</title><style>*{box-sizing:border-box}body{margin:0;background:var(--bg,#eef3f6);color:#172a39;font:16px/1.5 system-ui,sans-serif}main{max-width:1200px;margin:auto;padding:28px}h1{font-size:clamp(27px,4vw,42px);line-height:1.12;margin:8px 0 12px;letter-spacing:-.035em}h2{font-size:23px;line-height:1.2;margin:0 0 18px}h3{font-size:17px;margin:14px 0 8px}p{margin:8px 0 16px}.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.15em;font-weight:800;color:var(--accent,#176b71)}.lead{max-width:75ch;color:#405568}.panel{background:#fff;border:1px solid #cdd9e1;border-radius:14px;padding:24px;margin:18px 0}.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.wide{grid-template-columns:1.6fr 1fr}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.metric{border-left:4px solid var(--accent,#176b71);background:#f4f8fa;padding:18px}.big{display:block;font-size:36px;font-weight:800;line-height:1.2}.muted,small{color:#536879;font-size:14px}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}button{background:var(--accent,#176b71);color:white;border:2px solid transparent;border-radius:8px;padding:10px 16px;min-height:44px;cursor:pointer;font:inherit;font-weight:650}button.secondary{background:#e8eff4;color:#172a39}button:disabled{opacity:.48;cursor:default}button[aria-pressed=true]{outline:3px solid #172a39;outline-offset:2px}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid #de7616;outline-offset:3px}label{display:block;font-weight:650;margin:12px 0 6px}input,select,textarea{font:inherit;color:inherit;border:1px solid #8b9eae;border-radius:6px;background:white;padding:10px;width:100%;min-height:44px}textarea{resize:vertical;min-height:110px}input[type=checkbox]{width:22px;min-height:22px;vertical-align:middle}table{border-collapse:collapse;width:100%;font-size:14px}th{text-align:left;background:#eff4f7;color:#3d5261}th,td{padding:12px;border-bottom:1px solid #dce5eb;vertical-align:top}.scroll{overflow-x:auto}caption{text-align:left;margin-bottom:12px;font-weight:700}.notice{background:#eef5f9;border-left:4px solid #628ba1;padding:14px;margin:14px 0}.error{color:#9c2924;font-weight:650}.pill{display:inline-block;border-radius:30px;padding:4px 10px;background:#e5f3ee;color:#17614f;font-size:13px;font-weight:750}.draft{white-space:pre-wrap;font:17px/1.65 Georgia,serif}.rule{display:block;width:100%;text-align:left;margin:10px 0}.rule strong{font-size:26px}details{margin:18px 0}summary{cursor:pointer;font-weight:700;padding:12px;background:#e9eff3;border-radius:6px;min-height:44px}footer{margin:30px 0;color:#536879;font-size:14px}ol,ul{padding-left:23px}.time-input{max-width:90px}.section-no{font-size:52px;color:#b5c8d5;font-weight:800;line-height:1}.tag{font-weight:700;color:var(--accent,#176b71)}[hidden]{display:none!important}@media(max-width:760px){main{padding:18px}.grid,.wide{grid-template-columns:1fr}.metric-grid{grid-template-columns:1fr}.panel{padding:18px}.big{font-size:30px}th,td{padding:9px}}:root{--accent:#48703d;--bg:#f0f5ea}.animal{border-top:7px solid #90ad64}.animal h2{font-size:31px;margin-top:10px}.record{font:750 13px ui-monospace,monospace;color:#54703b}.trait{background:#edf4e4;padding:12px;border-radius:5px}.animal textarea{min-height:70px}</style></head><body><main>
<span class="eyebrow">Biology / supplied teaching records</span><h1>Classify the evidence.</h1><p class="lead">Use one criterion: backbone present or absent. Keep your reason beside your choice.</p><div class="row"><span class="pill" id="score" aria-live="polite"></span><button type="button" id="check">Check four group choices</button><button type="button" id="reset" class="secondary">Reset practice</button></div><div class="grid"><section class="panel animal"><span class="record">A01 / Q1</span><h2>Dog</h2><p class="trait">Supplied trait: <strong>Backbone present</strong></p><label for="group-0">Group for A01</label><select id="group-0"><option value="">Choose an answer</option><option value="v">Vertebrate</option><option value="i">Invertebrate</option></select><label for="reason-0">Which supplied trait supports your choice?</label><textarea id="reason-0"></textarea><p id="feedback-0" class="notice">Unanswered.</p><button type="button" id="retry-0" class="secondary">Retry A01</button></section><section class="panel animal"><span class="record">A02 / Q2</span><h2>Bony fish</h2><p class="trait">Supplied trait: <strong>Backbone present</strong></p><label for="group-1">Group for A02</label><select id="group-1"><option value="">Choose an answer</option><option value="v">Vertebrate</option><option value="i">Invertebrate</option></select><label for="reason-1">Which supplied trait supports your choice?</label><textarea id="reason-1"></textarea><p id="feedback-1" class="notice">Unanswered.</p><button type="button" id="retry-1" class="secondary">Retry A02</button></section><section class="panel animal"><span class="record">A03 / Q3</span><h2>Octopus</h2><p class="trait">Supplied trait: <strong>Backbone absent</strong></p><label for="group-2">Group for A03</label><select id="group-2"><option value="">Choose an answer</option><option value="v">Vertebrate</option><option value="i">Invertebrate</option></select><label for="reason-2">Which supplied trait supports your choice?</label><textarea id="reason-2"></textarea><p id="feedback-2" class="notice">Unanswered.</p><button type="button" id="retry-2" class="secondary">Retry A03</button></section><section class="panel animal"><span class="record">A04 / Q4</span><h2>Spider</h2><p class="trait">Supplied trait: <strong>Backbone absent</strong></p><label for="group-3">Group for A04</label><select id="group-3"><option value="">Choose an answer</option><option value="v">Vertebrate</option><option value="i">Invertebrate</option></select><label for="reason-3">Which supplied trait supports your choice?</label><textarea id="reason-3"></textarea><p id="feedback-3" class="notice">Unanswered.</p><button type="button" id="retry-3" class="secondary">Retry A04</button><button type="button" id="spider-hint" class="secondary">Show A04 hint</button><p id="hint" hidden>Check the specific trait in A04. An outer covering and a backbone are different structures.</p></section></div>
<section class="panel"><h2>A02 and A03 / the water comparison</h2><p>Bony fish and octopuses are both aquatic examples. Their supplied backbone traits differ; water habitat does not explain their grouping.</p><p>Which rule does this activity use?</p><div class="row"><button type="button" id="rule-backbone">Backbone presence</button><button type="button" id="rule-water" class="secondary">Water habitat</button><button type="button" id="rule-legs" class="secondary">Has legs</button></div><p id="rule-feedback" class="notice" aria-live="polite">Separate rule discussion — outside the four-item count.</p><h3>View your current selections</h3><label for="filter">Selection view</label><select id="filter"><option value="">Choose an answer</option><option value="all">All original records</option><option value="v">Your Vertebrate choices</option><option value="i">Your Invertebrate choices</option></select><div id="group-view" class="notice"></div></section>
<section class="panel"><span class="record">A05 / unscored discussion</span><h2>Backbone evidence unknown</h2><p>An ordinary picture without a visible spine would not establish that a backbone is absent.</p><div class="row"><button type="button" id="unknown-insufficient">Not enough evidence</button><button type="button" id="unknown-invertebrate" class="secondary">Call it Invertebrate</button></div><p id="unknown-feedback" class="notice" aria-live="polite">What evidence would this record need before classification?</p></section><details><summary>Separate teacher key and boundaries</summary><p>A01/A02: Vertebrate. A03/A04: Invertebrate. Key set: two in each group, not an assumed learner score. All four are animals. Rule: Backbone presence. A05: Not enough evidence, outside the count.</p><p>Written reasons require teacher review; a correct group does not establish that a reason is sound. These authored records are not specimen observations, X-rays or a complete taxonomy.</p></details><footer>Local practice has no collection, saving or automatic written-reason grading.</footer></main><script>const $=id=>document.getElementById(id);const on=(id,fn)=>$(id).addEventListener('click',fn);const text=(id,value)=>$(id).textContent=value;const bind=(id,fn,event='input')=>$(id).addEventListener(event,fn);const selectText=id=>{if(!$(id).value){text(id+'-status','Complete the required fields before selecting text.');return;}$(id).focus();$(id).select();text(id+'-status','Text selected. Use your device’s copy command; nothing has been sent or saved.');};
const records=[{id:'A01',key:'v',trait:'present'},{id:'A02',key:'v',trait:'present'},{id:'A03',key:'i',trait:'absent'},{id:'A04',key:'i',trait:'absent'}],checked=[null,null,null,null];function score(){return {correct:checked.filter(x=>x===true).length,unanswered:records.filter((_,i)=>!$('group-'+i).value).length,unreviewed:records.filter((_,i)=>$('group-'+i).value&&checked[i]===null).length};}function view(){const f=$('filter').value,rows=records.filter((_,i)=>!f||f==='all'||$('group-'+i).value===f);text('group-view',rows.length?rows.map(r=>r.id+' · backbone '+r.trait).join(' | '):'No records in this selection view. Original cards are retained.');}function update(){const s=score();text('score',s.correct+' of 4 currently correct and checked · '+s.unanswered+' unanswered · '+s.unreviewed+' not checked');view();}function check(){records.forEach((r,i)=>{const v=$('group-'+i).value;if(!v){checked[i]=null;text('feedback-'+i,'Unanswered — select a group.');return;}checked[i]=v===r.key;text('feedback-'+i,checked[i]?r.id+' matches the supplied backbone trait ('+r.trait+'). Your written reason still needs teacher review.':i===1?'A02 states that a backbone is present. Use that trait to choose its group; water habitat is not the rule here.':i===2?'A03 states that a backbone is absent. Being in water does not make its backbone trait the same as A02’s.':i===3?'A04 states that a backbone is absent. An outer covering and a backbone are different structures.':'A01 states that a backbone is present. Use that supplied trait rather than habitat or legs.');});update();}function retry(i){$('group-'+i).value='';checked[i]=null;text('feedback-'+i,'Unanswered.');update();}records.forEach((_,i)=>{bind('group-'+i,()=>{checked[i]=null;text('feedback-'+i,$('group-'+i).value?'Choice changed — check again.':'Unanswered.');update();},'change');on('retry-'+i,()=>retry(i));});on('check',check);on('reset',()=>{records.forEach((_,i)=>{retry(i);$('reason-'+i).value='';});$('hint').hidden=true;$('filter').value='';text('rule-feedback','Separate rule discussion — outside the four-item count.');text('unknown-feedback','What evidence would this record need before classification?');update();});on('spider-hint',()=>{$('hint').hidden=!$('hint').hidden;});on('rule-backbone',()=>text('rule-feedback','Backbone presence is the supplied criterion. This discussion does not add a fifth scored item.'));['water','legs'].forEach(k=>on('rule-'+k,()=>text('rule-feedback','Recheck the stated criterion: backbone presence or absence. Habitat and legs do not replace that trait.')));on('unknown-insufficient',()=>text('unknown-feedback','Not enough evidence. Keep A05 unknown and seek backbone evidence; no fifth point is awarded.'));on('unknown-invertebrate',()=>text('unknown-feedback','Unknown is not the same as absent. Do not classify A05 as Invertebrate without the required evidence.'));bind('filter',view,'change');update();globalThis.app={score,get:()=>[...checked]};</script></body></html>