Compare an untested explanation with unknown exam coverage and choose a different next step for each

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>Find the gap before choosing the study task</title><style>*{box-sizing:border-box}body{margin:0;background:#f0f4eb;color:#293c22;font:16px/1.65 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}.eyebrow{font-weight:750;color:#5a7048;letter-spacing:.08em;text-transform:uppercase}.panel{padding:22px;border:1px solid #c7d7b7;border-radius:12px;background:white;margin:18px 0}.sources{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.source{padding:14px;background:#edf3e5;border-radius:8px}.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 #657e4b;border-radius:7px;background:white;color:#345022;cursor:pointer}button[aria-pressed=true],button.primary{background:#49672f;color:white}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #ab4a14;outline-offset:3px}dl{margin:0}dt{font-weight:750;margin-top:14px}dd{margin:4px 0}.notice{padding:13px;background:#edf4df;border-left:4px solid #769c4f}label{display:block;font-weight:650;margin-top:16px}input,textarea{display:block;width:100%;min-width:0;padding:10px;border:1px solid #859973;border-radius:6px;margin-top:5px}textarea{min-height:90px}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit}[hidden]{display:none!important}@media(max-width:600px){main{padding:16px}.panel{padding:16px}.sources{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">Course sources → study decision</p><h1>Find the gap before choosing the study task</h1><p>Original fictional environmental-science course. A source locator, exam inclusion, and your ability to explain a topic are separate records.</p><section class="panel"><h2>Source packet</h2><div class="sources"><article class="source"><strong>S1 · Exam scope</strong><p>Syllabus units 2–4. Topic weights not supplied.</p></article><article class="source"><strong>L3 · Lecture</strong><p>Pages 4–6 explain feedback loops in unit 3.</p></article><article class="source"><strong>T5 · Textbook</strong><p>Chapter 5.2 feedback loops; chapter 5.4 case extension, unit mapping absent.</p></article><article class="source"><strong>P1 · Practice</strong><p>Explain a feedback loop using a course diagram. No diagram or completed attempt supplied here.</p></article></div></section>
<section class="panel"><h2>Inspect a topic</h2><div class="actions"><button type="button" id="loops" aria-pressed="true">Feedback loops</button><button type="button" id="extension" aria-pressed="false">Case extension</button><button type="button" id="compare">Compare the two gaps</button><button type="button" id="question">Office-hours question</button></div><h3 id="topicTitle">Feedback loops</h3><dl><dt>Scope and locators</dt><dd id="locators">S1 unit 3 · L3 pages 4–6 · T5 section 5.2 · P1</dd><dt>Task type</dt><dd id="task">Explain relationships in the course diagram, not just list labels.</dd><dt>Evidence gap</dt><dd id="gap">Untested understanding: no explanation attempt supplied. This is not a proven weakness.</dd><dt>Next step</dt><dd id="next">Attempt P1, then compare the explanation with the course material. No automatic answer grade.</dd><dt>Exam weighting</dt><dd>Not supplied.</dd></dl><p id="inspection" class="notice" role="status">Choose a topic to inspect its source and gap.</p><p id="questionText" hidden></p></section>
<section class="panel"><h2>Your source-linked topic card</h2><label for="topicInput">Topic · required</label><input id="topicInput"><label for="locatorInput">Exact source locator · required</label><input id="locatorInput"><label for="taskInput">Expected or proposed task type</label><textarea id="taskInput"></textarea><label for="attempt">Actual explanation attempt or “not yet attempted”</label><textarea id="attempt"></textarea><label for="notes">Scope question or next review action</label><textarea id="notes"></textarea><div class="actions"><button type="button" id="build" class="primary">Build topic card</button><button type="button" id="reset">Reset practice</button></div><p id="notice" class="notice" role="status">Enter a topic and its source. No mastery percentage is calculated.</p><pre id="output" hidden></pre><div id="resetPanel" hidden><p>Clear your practice topic card?</p><button type="button" id="cancel">Keep card</button> <button type="button" id="confirm">Clear card</button></div></section><footer><p>Current page session only. Source presence does not confirm exam coverage, and an absent attempt does not prove misunderstanding. Use actual course materials and instructor clarification.</p></footer></main><script>
'use strict';const $=s=>document.querySelector(s);const data={loops:{title:'Feedback loops',locators:'S1 unit 3 · L3 pages 4–6 · T5 section 5.2 · P1',task:'Explain relationships in the course diagram, not just list labels.',gap:'Untested understanding: no explanation attempt supplied. This is not a proven weakness.',next:'Attempt P1, then compare the explanation with the course material. No automatic answer grade.'},extension:{title:'Chapter 5 case extension',locators:'T5 section 5.4 · syllabus unit mapping not supplied',task:'Case application is a possible study task, not a confirmed exam demand.',gap:'Scope uncertainty: exam inclusion and expected task type are unknown.',next:'Ask the instructor whether section 5.4 is included and what explanation or application to prepare.'}};for(const id of Object.keys(data))$('#'+id).addEventListener('click',()=>{const d=data[id];$('#topicTitle').textContent=d.title;for(const key of ['locators','task','gap','next'])$('#'+key).textContent=d[key];for(const k of Object.keys(data))$('#'+k).setAttribute('aria-pressed',String(k===id));$('#inspection').textContent='Topic selected: '+d.title+'. Your practice entries are retained.'});$('#compare').addEventListener('click',()=>{$('#inspection').textContent='Compare: feedback loops has a source and task but no personal attempt; section 5.4 has a locator but unknown exam inclusion. Practice the first; clarify scope for the second. Neither receives an invented weight.'});$('#question').addEventListener('click',()=>{$('#questionText').hidden=false;$('#questionText').textContent='Office-hours question: S1 names units 2–4, but I cannot map chapter 5.4 to those units. Is that section included in this exam? If so, what explanation or application should I prepare? Record an actual clarification later; no answer is supplied.'});const ids=['topicInput','locatorInput','taskInput','attempt','notes'];let built=false;for(const id of ids)$('#'+id).addEventListener('input',()=>{$('#output').hidden=true;$('#notice').textContent=built?'Entries changed. Topic card is stale; build again.':'Practice entries changed.';$('#resetPanel').hidden=true});$('#build').addEventListener('click',()=>{const missing=[['topicInput','Topic'],['locatorInput','Exact source locator']].filter(([id])=>!$('#'+id).value.trim()).map(([,n])=>n);if(missing.length){$('#notice').textContent='Complete: '+missing.join(', ')+'.';$('#output').hidden=true;return}$('#output').textContent='SOURCE-LINKED TOPIC CARD\nTopic: '+$('#topicInput').value+'\nLocator: '+$('#locatorInput').value+'\nTask type: '+($('#taskInput').value||'To confirm')+'\nActual attempt: '+($('#attempt').value||'Not supplied — not proof of weakness')+'\nNext question/action: '+($('#notes').value||'To develop')+'\nExam weight: not supplied.';$('#output').hidden=false;$('#notice').textContent='Topic card built. Review source coverage and understanding separately; no mastery score.';built=true});$('#reset').addEventListener('click',()=>{$('#resetPanel').hidden=false;$('#notice').textContent='Reset requested. Choose whether to keep the card.'});$('#cancel').addEventListener('click',()=>{$('#resetPanel').hidden=true;$('#notice').textContent='Reset canceled. Topic 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 card cleared. The fictional source packet is unchanged.'});
</script></body></html>