Cue questions, source notes and a recall attempt that stays visible

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>Cornell notes: question, recall, compare</title><style>
*{box-sizing:border-box}body{margin:0;background:#eef3ef;color:#172f26;font:17px/1.55 system-ui,sans-serif}main{max-width:950px;margin:auto;padding:26px 20px 40px}h1{font-size:clamp(28px,5vw,40px);line-height:1.12;max-width:18ch;margin:10px 0 16px}h2{font-size:21px;margin:0 0 12px}p{margin:10px 0 16px}.eyebrow{font-size:14px;font-weight:700;letter-spacing:.08em;color:#426354}.intro{max-width:68ch}.toolbar{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0}button{font:inherit;border:1px solid #385e4a;border-radius:6px;background:white;color:#173d2b;padding:10px 14px;cursor:pointer}button[aria-pressed=true],.primary{background:#1d5a3e;color:white}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #bc6900;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.55}.paper{background:white;border:1px solid #b7cdbf;border-radius:10px;overflow:hidden}.sheet-head{padding:17px 20px;background:#e1ede5;border-bottom:1px solid #b7cdbf}.rows{display:grid;grid-template-columns:minmax(160px,.85fr) minmax(190px,1.25fr)}.cell{padding:16px 20px;border-bottom:1px solid #d2dfd7;min-width:0}.cue{background:#f4f8f5;border-right:1px solid #d2dfd7}.colname{font-size:14px;font-weight:750;color:#436551}.summary{padding:18px 20px;background:#fffdf2}.summary p{margin-bottom:0}label{display:block;font-weight:650;margin:14px 0 7px}textarea,input{display:block;font:inherit;color:inherit;border:1px solid #789884;border-radius:5px;background:white;width:100%;max-width:100%;padding:10px;min-width:0}textarea{min-height:110px;resize:vertical}.writing{margin-top:22px;padding:20px;border-left:5px solid #b6cf8a;background:white}.hint{font-size:15px;color:#426354}.status{min-height:1.6em;font-weight:650}.confirm{padding:15px;background:#fff0d1;border:1px solid #b88b40;border-radius:7px;margin:12px 0}.blank-row{display:grid;grid-template-columns:1fr 1.5fr;gap:12px;padding:16px 20px;border-top:1px solid #d2dfd7}.blank-row label{font-size:15px;margin:0 0 7px}[hidden]{display:none!important}footer{font-size:14px;margin-top:22px;color:#496554}@media(max-width:520px){main{padding:20px 14px 32px}.rows{grid-template-columns:1fr}.cue{border-right:0;padding-bottom:9px}.note{padding-top:8px}.blank-row{grid-template-columns:1fr}.cell{padding-left:16px;padding-right:16px}button{flex-grow:1}.toolbar{gap:8px}}
.notes-hidden .rows,.notes-hidden .blank-row{grid-template-columns:1fr}.notes-hidden .cue{border-right:0}</style></head><body><main><div class="eyebrow">STUDY SHEET · ORIGINAL FICTIONAL BRIEFING</div><h1>Ask a question. Then cover the notes.</h1><p class="intro">Three questions about collecting a reserved book. Hide the notes and summary, write what you remember, then reveal the source to compare.</p><div class="toolbar" aria-label="Choose notes view"><button type="button" id="filled" aria-pressed="true">Filled example</button><button type="button" id="blank" aria-pressed="false">Blank template</button><button type="button" id="hide">Hide notes</button><button type="button" id="reveal" disabled>Reveal notes</button></div>
<section class="paper" id="filled-view" aria-label="Filled Cornell notes"><div class="sheet-head"><h2>Reserved book collection</h2><span class="hint">Fictional practice details, not a real library policy.</span></div><div class="rows"><div class="cell cue colname">CUE QUESTIONS</div><div class="cell note colname" data-source>SOURCE NOTES</div><div class="cell cue">Where do visitors collect reserved books?</div><div class="cell note" data-source>Reserved books are collected at the front desk.</div><div class="cell cue">What must a visitor show?</div><div class="cell note" data-source>The visitor shows the reservation code.</div><div class="cell cue">What happens if the code is missing?</div><div class="cell note" data-source>A staff member checks the reservation before handing over the book.</div></div><div class="summary" data-source><h2>Summary</h2><p>Collect a reserved book at the front desk with the reservation code. If the code is missing, staff check the reservation first.</p></div></section>
<section class="paper" id="blank-view" aria-label="Blank reusable Cornell notes" hidden><div class="sheet-head"><h2>Use your own source notes</h2><label for="topic">Topic</label><input id="topic" autocomplete="off"></div><div class="blank-row"><div><label for="q1">Cue question 1</label><input id="q1"></div><div data-source><label for="n1">Source note 1</label><textarea id="n1"></textarea></div></div><div class="blank-row"><div><label for="q2">Cue question 2</label><input id="q2"></div><div data-source><label for="n2">Source note 2</label><textarea id="n2"></textarea></div></div><div class="blank-row"><div><label for="q3">Cue question 3</label><input id="q3"></div><div data-source><label for="n3">Source note 3</label><textarea id="n3"></textarea></div></div><div class="summary" data-source><label for="summary">Summary from your notes</label><textarea id="summary"></textarea></div></section>
<section class="writing"><h2>Your recall attempt</h2><label for="attempt">Answer the cue questions before revealing the notes.</label><textarea id="attempt" placeholder="Write what you remember. Include the missing-code case."></textarea><p class="hint">Your wording stays here when you switch views or reveal the source. Compare it yourself; this page does not grade it.</p><p class="status" id="status" role="status">Source notes and summary are visible.</p><button type="button" id="reset">Reset writing</button><div id="confirm" class="confirm" hidden><p>Clear your recall attempt and all blank-template writing?</p><div class="toolbar"><button type="button" id="clear" class="primary">Clear writing</button><button type="button" id="keep">Keep writing</button></div></div></section><footer>Practice stays in this page session. Copy work you need before leaving; no answers are sent or submitted.</footer></main><script>
'use strict';
const $=id=>document.getElementById(id);let sourceHidden=false;
function closeReset(){ $('confirm').hidden=true; }
function setSource(hidden){sourceHidden=hidden;document.body.classList.toggle('notes-hidden',hidden);document.querySelectorAll('[data-source]').forEach(el=>el.hidden=hidden);$('hide').disabled=hidden;$('reveal').disabled=!hidden;$('status').textContent=hidden?'Notes and summary are hidden. Answer the cue questions, then reveal them to compare.':'Source notes and summary are visible. Your recall attempt is unchanged.';closeReset();}
function view(blank){$('filled-view').hidden=blank;$('blank-view').hidden=!blank;$('filled').setAttribute('aria-pressed',String(!blank));$('blank').setAttribute('aria-pressed',String(blank));$('status').textContent=(blank?'Blank template selected. ':'Filled example selected. ')+(sourceHidden?'Notes and summary remain hidden.':'Notes and summary are visible.')+' Your writing is preserved.';closeReset();}
$('filled').addEventListener('click',()=>view(false));$('blank').addEventListener('click',()=>view(true));$('hide').addEventListener('click',()=>setSource(true));$('reveal').addEventListener('click',()=>setSource(false));$('reset').addEventListener('click',()=>{$('confirm').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{closeReset();$('status').textContent='Reset canceled. All writing is unchanged.';$('reset').focus();});$('clear').addEventListener('click',()=>{document.querySelectorAll('input,textarea').forEach(el=>el.value='');setSource(false);view(false);$('status').textContent='Writing cleared. Filled example restored with notes visible.';$('attempt').focus();});
</script></body></html>