Inspect three evidence tracks and see why a completed shared guide cannot settle the other two

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>One guide, three evidence tracks</title><style>*{box-sizing:border-box}body{margin:0;background:#f5f2ec;color:#302e41;font:16px/1.6 system-ui,sans-serif}main{max-width:940px;margin:auto;padding:24px}h1{font-size:clamp(1.8rem,5vw,2.7rem);line-height:1.18}h2{font-size:1.35rem}h3{font-size:1.12rem}.eyebrow{letter-spacing:.08em;text-transform:uppercase;color:#665477;font-weight:700}.panel{background:white;border:1px solid #d9d0df;border-radius:12px;padding:20px;margin:18px 0}.tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.track{border-top:4px solid #716084;padding:14px;background:#f0edf5}.track p{margin:8px 0}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:16px 0}button,input,textarea{font:inherit}button{min-height:44px;padding:10px 14px;border:1px solid #756285;background:white;color:#48345c;border-radius:7px;cursor:pointer}button[aria-pressed=true],button.primary{background:#634779;color:white}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ab540e;outline-offset:3px}.notice{background:#eeebf8;padding:14px;border-left:4px solid #785c9b}label{display:block;font-weight:650;margin-top:15px}input,textarea{display:block;width:100%;min-width:0;padding:10px;border:1px solid #92839f;border-radius:6px;margin-top:5px}textarea{min-height:90px}pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}.levels{padding-left:22px}.levels li{margin:12px 0}[hidden]{display:none!important}@media(max-width:600px){main{padding:16px}.tracks{grid-template-columns:1fr}.panel{padding:16px}}</style></head><body><main><p class="eyebrow">Assessment design studio</p><h1>One guide, three evidence tracks</h1><p>Original fictional class project. A completed product can show one achievement while two other questions remain open.</p>
<section class="panel"><h2>The project packet</h2><p><strong>Assigned route:</strong> Welcome desk → map display → activity table.</p><p><strong>N1:</strong> “Begin at the welcome desk. A facilitator will explain the route before visitors continue.”</p><p><strong>G1:</strong> Includes all three stops in order and repeats N1's opening accurately.</p><p><strong>Process record:</strong> The class was asked to compare map-first and welcome-desk-first proposals; no decision record is supplied.</p><p><strong>L1 explanation:</strong> “Why does the guide begin at the welcome desk, using N1?” Response pending.</p></section>
<section class="panel"><h2>Inspect a track</h2><div class="actions"><button type="button" id="product" aria-pressed="true">Product</button><button type="button" id="process" aria-pressed="false">Process</button><button type="button" id="individual" aria-pressed="false">Individual</button></div><h3 id="criterion">Complete route and supported opening</h3><p id="record" class="notice">Product · Demonstrated in G1/N1: all assigned stops appear in order and the opening agrees with N1. This says nothing about unseen teamwork or L1's understanding.</p><ol id="levels" class="levels"><li>Demonstrated: all stops in order; opening agrees with notice.</li><li>Partly demonstrated: identifiable route omission or instruction mismatch.</li><li>Needs further development: insufficient route or opening information.</li></ol><p><strong>Not observed</strong> is a separate evidence status, not zero or proof that work did not happen.</p></section>
<section class="panel"><h2>Compare the review architecture</h2><div class="actions"><button type="button" id="productOnly">Product-only view</button><button type="button" id="separate">Separate the evidence</button></div><div id="architecture" class="tracks"><article class="track"><h3>Product</h3><p>Demonstrated · G1/N1</p></article><article class="track"><h3>Process</h3><p>Not observed · decision record missing</p></article><article class="track"><h3>Individual</h3><p>Not observed · L1 response pending</p></article></div><p id="comparison" role="status">Three tracks preserve three different evidence judgments. No combined grade or weights are supplied.</p></section>
<section class="panel"><h2>Design a criterion and evidence request</h2><label for="goal">Learning goal</label><input id="goal"><label for="criterionInput">Criterion · required</label><textarea id="criterionInput"></textarea><label for="evidenceInput">Evidence to request · required</label><textarea id="evidenceInput"></textarea><label for="descriptors">Observable descriptors</label><textarea id="descriptors"></textarea><label for="notes">Review notes</label><textarea id="notes"></textarea><div class="actions"><button type="button" id="build" class="primary">Build criterion card</button><button type="button" id="reset">Reset practice</button></div><p id="notice" class="notice" role="status">Choose what the evidence must reveal before assigning a level.</p><pre id="output" hidden></pre><div id="resetPanel" hidden><p>Clear your practice fields?</p><button type="button" id="cancel">Keep entries</button> <button type="button" id="confirm">Clear entries</button></div></section><footer><p>Local practice only; no student records or official grading. Actual weighting follows the course objectives and rules.</p></footer></main><script>
'use strict';const $=s=>document.querySelector(s);const data={product:{title:'Complete route and supported opening',record:'Product · Demonstrated in G1/N1: all assigned stops appear in order and the opening agrees with N1. This says nothing about unseen teamwork or L1\'s understanding.',levels:['Demonstrated: all stops in order; opening agrees with notice.','Partly demonstrated: identifiable route omission or instruction mismatch.','Needs further development: insufficient route or opening information.']},process:{title:'Consider conflicting route proposals',record:'Process · Not observed: the decision record comparing map-first and welcome-desk-first proposals is missing. Request that evidence; do not infer process quality from G1.',levels:['Demonstrated: identifies both proposals, compares implications, explains choice.','Partly demonstrated: alternatives named, but comparison or reason unclear.','Needs further development: available record states a choice without addressing the competing proposal.']},individual:{title:'Explain a route choice with evidence',record:'Individual · Not observed: L1 explanation is pending. The prompt asks why the route starts at the welcome desk using N1. A correct shared guide cannot establish each learner\'s understanding.',levels:['Demonstrated: learner explains a choice and connects relevant information.','Partly demonstrated: choice named but supporting connection unclear.','Needs further development: available explanation does not connect choice with relevant information.']}};for(const id of Object.keys(data))$('#'+id).addEventListener('click',()=>{for(const key of Object.keys(data))$('#'+key).setAttribute('aria-pressed',String(key===id));$('#criterion').textContent=data[id].title;$('#record').textContent=data[id].record;$('#levels').replaceChildren(...data[id].levels.map(text=>{const li=document.createElement('li');li.textContent=text;return li}))});$('#productOnly').addEventListener('click',()=>{$('#architecture').children[1].hidden=true;$('#architecture').children[2].hidden=true;$('#comparison').textContent='Product-only view: G1/N1 supports the product criterion. Process and individual questions are absent from this view, not resolved.'});$('#separate').addEventListener('click',()=>{for(const el of $('#architecture').children)el.hidden=false;$('#comparison').textContent='Separated review: Product demonstrated; Process not observed; Individual not observed. Do not assign an equal group-to-individual grade.'});let built=false;const ids=['goal','criterionInput','evidenceInput','descriptors','notes'];for(const id of ids)$('#'+id).addEventListener('input',()=>{$('#output').hidden=true;$('#notice').textContent=built?'Entries changed. Criterion card is stale; build again.':'Practice entries changed.';$('#resetPanel').hidden=true});$('#build').addEventListener('click',()=>{const missing=[['criterionInput','Criterion'],['evidenceInput','Evidence to request']].filter(([id])=>!$('#'+id).value.trim()).map(([,n])=>n);if(missing.length){$('#notice').textContent='Complete: '+missing.join(', ')+'.';$('#output').hidden=true;return}$('#output').textContent='WORKING CRITERION — no grade assigned\nGoal: '+($('#goal').value||'Not supplied')+'\nCriterion: '+$('#criterionInput').value+'\nEvidence to request: '+$('#evidenceInput').value+'\nDescriptors: '+($('#descriptors').value||'To develop')+'\nNotes: '+($('#notes').value||'None')+'\nMissing evidence stays Not observed.';$('#output').hidden=false;$('#notice').textContent='Criterion card built. Field completeness does not assess a learner.';built=true});$('#reset').addEventListener('click',()=>{$('#resetPanel').hidden=false;$('#notice').textContent='Reset requested; choose whether to keep entries.'});$('#cancel').addEventListener('click',()=>{$('#resetPanel').hidden=true;$('#notice').textContent='Reset canceled. Entries retained.'});$('#confirm').addEventListener('click',()=>{for(const id of ids)$('#'+id).value='';$('#output').hidden=true;$('#output').textContent='';$('#resetPanel').hidden=true;built=false;$('#notice').textContent='Practice cleared. G1/N1 and the three evidence tracks are unchanged.'});
</script></body></html>