A section hierarchy, three supplied source notes and a visible evidence gap

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>Research outline: section, purpose, support</title><style>
*{box-sizing:border-box}body{margin:0;background:#eef3f6;color:#233440;font:17px/1.55 system-ui,sans-serif}main{max-width:1050px;margin:auto;padding:26px 22px 40px}h1{font-size:clamp(29px,5vw,42px);line-height:1.12;margin:10px 0 16px;max-width:24ch}h2{font-size:21px;margin:0 0 12px}h3{font-size:18px;margin:16px 0 8px}p{margin:10px 0 16px}.eyebrow{font-size:14px;color:#4c6b7c;letter-spacing:.07em;font-weight:750}.brief{background:white;border:1px solid #b9ccd6;border-left:5px solid #4c7b92;border-radius:6px;padding:18px 20px;margin:20px 0}.sources{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.source{background:#fff;border:1px solid #b9ccd6;border-radius:7px;padding:16px}.source p{margin-bottom:0}.tag{font-weight:800;color:#416b81}.layout{display:grid;grid-template-columns:minmax(220px,.8fr) minmax(250px,1.2fr);gap:18px;margin-top:22px}.tree{background:#e0eaf0;padding:18px;border-radius:8px}.tree button{display:block;text-align:left;width:100%;margin:9px 0;padding:13px}.tree .sub{font-size:15px;margin:6px 0 10px 20px}.detail{padding:20px;background:#fff;border:1px solid #b9ccd6;border-radius:8px}.label{font-size:14px;letter-spacing:.04em;font-weight:750;color:#516f80;text-transform:uppercase}.source-ref{background:#e6f0ec;padding:10px 13px;border-radius:5px}.gaps{background:#fff3d9;border:1px solid #bd9450;padding:18px;margin-top:20px;border-radius:7px}.gaps ul{padding-left:23px}button{font:inherit;background:#fff;color:#2e566c;border:1px solid #6b8c9e;padding:10px 14px;border-radius:6px;cursor:pointer}button[aria-pressed=true],.primary{background:#315f77;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #ae6500;outline-offset:3px}.revision{background:#f1f5f7;padding:14px;border-radius:6px}.writing{margin-top:22px;padding:20px;background:#fff;border-top:4px solid #6b8c9e}label{display:block;font-weight:700;margin-bottom:8px}textarea{font:inherit;color:inherit;border:1px solid #8ba5b3;border-radius:5px;padding:12px;width:100%;min-height:110px;resize:vertical}.hint{font-size:15px;color:#4d6574}.toolbar{display:flex;flex-wrap:wrap;gap:9px;margin:15px 0}.status{min-height:1.6em}.confirm{background:#fff3d9;border:1px solid #bd9450;padding:14px;border-radius:6px}[hidden]{display:none!important}footer{margin-top:22px;font-size:14px;color:#4d6574}@media(max-width:650px){main{padding:20px 14px 30px}.sources,.layout{grid-template-columns:1fr}.tree{padding:16px}.toolbar button{flex-grow:1}}
</style></head><body><main><div class="eyebrow">FICTIONAL COURSE PAPER · SOURCE-BASED PLANNING</div><h1>A section heading needs support before it needs polish.</h1><section class="brief"><h2>Assignment question</h2><p>How do two library notices frame quiet reading and book discussion?</p><p><strong>Provisional thesis:</strong> A requests quiet reading before noon, while B invites book talk at noon. The paper will examine their action words and time boundaries.</p><p class="hint">Original fictional practice texts, not published research or real citations. This is textual analysis, not an experiment.</p></section><section class="sources" aria-label="Supplied source notes"><div class="source"><span class="tag">NOTE A</span><p>Notice A says: “Quiet reading until noon.”</p></div><div class="source"><span class="tag">NOTE B</span><p>Notice B says: “Talk about books at noon.”</p></div><div class="source"><span class="tag">NOTE C</span><p>The assignment brief says both notices were produced by the same fictional library.</p></div></section><div class="layout"><section class="tree"><h2>Outline hierarchy</h2><button type="button" data-section="intro" aria-pressed="false">I. Introduce the comparison</button><button type="button" data-section="wording" aria-pressed="true">II. Examine the activity wording</button><div class="sub">A's wording<br>B's wording<br>Compare the action words</div><button type="button" data-section="time" aria-pressed="false">III. Examine the time boundary</button><button type="button" data-section="conclusion" aria-pressed="false">IV. Bring the comparison together</button></section><section class="detail" aria-label="Selected section detail"><div id="intro" hidden><h2>I. Introduce the comparison</h2><div class="label">Purpose</div><p>State the assignment question and shared library context. Introduce A and B without assuming when the notices were published.</p><p class="source-ref">Support: C establishes the shared library; A and B supply the notice wording.</p></div><div id="wording"><h2>II. Examine the activity wording</h2><div class="label">Purpose</div><p>Compare A's “Quiet reading” with B's “Talk about books,” then explain the difference in the actions requested.</p><p class="source-ref">Support: A and B. Neither note reports reader preferences.</p><div class="revision"><h3>A heading to revise</h3><p><strong>Proposed:</strong> Readers wanted silence.</p><button type="button" id="revise" aria-expanded="false" aria-controls="revision">Compare a narrower heading</button><div id="revision" hidden><p><strong>Revision:</strong> Notice A asks for quiet reading.</p><p>The revision describes A's words. The original would require evidence about what readers wanted.</p></div></div></div><div id="time" hidden><h2>III. Examine the time boundary</h2><div class="label">Purpose</div><p>Compare “until noon” with “at noon.” Explain the time wording without inventing a publication date or a measured effect on noise.</p><p class="source-ref">Support: A gives “until noon”; B gives “at noon.”</p></div><div id="conclusion" hidden><h2>IV. Bring the comparison together</h2><div class="label">Purpose</div><p>Return to the provisional thesis and state the limits of a wording comparison.</p><p class="source-ref">Support: A–C. Audience responses, attendance and noise outcomes remain unestablished.</p></div></section></div><div class="toolbar"><button type="button" id="gap-toggle" aria-expanded="false" aria-controls="gaps">Evidence gaps</button></div><section class="gaps" id="gaps" hidden><h2>Evidence still missing</h2><ul><li>No note reports what readers wanted.</li><li>No publication dates or attendance figures are supplied.</li><li>No measurements establish an effect on noise.</li></ul><p>Narrow the claims to the supplied wording, or collect additional permitted sources before making them.</p></section><section class="writing"><h2>Plan your next section</h2><label for="plan">Section purpose, source IDs and support still needed</label><textarea id="plan" placeholder="This section will… It can use notes… I still need…"></textarea><p class="hint">A reviewer checks the reasoning. This page does not find sources, create citations or verify arbitrary claims.</p><p class="status" id="status" role="status">Section II selected. Inspect its purpose and source notes.</p><button type="button" id="reset">Reset planning</button><div id="confirm" class="confirm" hidden><p>Clear your planning text and restore the initial section view?</p><div class="toolbar"><button type="button" id="clear">Clear planning</button><button type="button" id="keep">Keep planning</button></div></div></section><footer>Keep your actual outline, source records and submission in the format your instructor requires. Current-page practice is not sent or saved.</footer></main><script>
'use strict';const $=id=>document.getElementById(id);const sections=['intro','wording','time','conclusion'];const titles={intro:'Section I',wording:'Section II',time:'Section III',conclusion:'Section IV'};
function selectSection(id){sections.forEach(k=>$(k).hidden=k!==id);document.querySelectorAll('[data-section]').forEach(b=>b.setAttribute('aria-pressed',String(b.dataset.section===id)));$('confirm').hidden=true;$('status').textContent=titles[id]+' selected. Your planning text is preserved.';}
document.querySelectorAll('[data-section]').forEach(b=>b.addEventListener('click',()=>selectSection(b.dataset.section)));$('revise').addEventListener('click',()=>{const open=$('revision').hidden;$('revision').hidden=!open;$('revise').setAttribute('aria-expanded',String(open));});$('gap-toggle').addEventListener('click',()=>{const open=$('gaps').hidden;$('gaps').hidden=!open;$('gap-toggle').setAttribute('aria-expanded',String(open));});$('reset').addEventListener('click',()=>{$('confirm').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirm').hidden=true;$('status').textContent='Reset canceled. Planning text and section choice are unchanged.';$('reset').focus();});$('clear').addEventListener('click',()=>{$('plan').value='';selectSection('wording');$('revision').hidden=true;$('revise').setAttribute('aria-expanded','false');$('gaps').hidden=true;$('gap-toggle').setAttribute('aria-expanded','false');$('status').textContent='Planning cleared. Initial Section II view restored.';$('plan').focus();});
</script></body></html>