Four practice funder requirements connected to a narrative, budget, and attachment check

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>Four questions, one grant application</title><style>
:root{font:16px/1.6 system-ui,sans-serif;color:#263e3c;background:#edf1ec}*{box-sizing:border-box}body{margin:0}main{max-width:1080px;margin:auto;padding:24px}h1{font:700 2.7rem/1.12 Georgia,serif;max-width:20ch}h2{font:700 1.7rem/1.3 Georgia,serif}h3{font-size:1.15rem;line-height:1.4}p{margin:12px 0}.eyebrow{font-weight:750;letter-spacing:.04em}.context{padding:18px;border-left:5px solid #9b6030;background:#fff3de}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}button,textarea{font:inherit}button{padding:11px 15px;min-height:46px;border:1px solid #496b61;border-radius:4px;background:#fff;color:#263e3c;text-align:left;white-space:normal;cursor:pointer}button[aria-pressed=true]{background:#254b40;color:#fff}button:focus-visible,textarea:focus-visible{outline:3px solid #b15115;outline-offset:4px}.panel{padding:24px;background:#fff;border:1px solid #b3c1b5;margin:24px 0}.question-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.question-grid button{display:flex;gap:13px;align-items:flex-start}.question-grid strong{font-size:1.3rem}.crosswalk{border:2px solid #486958;background:#e8eee5;padding:22px;margin-top:18px}.crosswalk dt{font-weight:750;margin-top:16px}.crosswalk dd{margin:5px 0;overflow-wrap:anywhere}.gap{padding:14px;background:#fff3de;border-left:4px solid #9b6030}.outline{counter-reset:answer}.answer{border-top:1px solid #bdcbbd;padding:18px 0}.answer.selected{border-left:5px solid #486958;padding-left:15px}.answer h3{margin:0 0 10px}.note{background:#f1f3e9;padding:18px;border:1px solid #bcc6ae}blockquote{margin:12px 0;padding-left:16px;border-left:3px solid #7c8e6c}.budget-grid{display:grid;grid-template-columns:1fr;gap:18px}table{width:100%;border-collapse:collapse;table-layout:fixed}caption{text-align:left;font-weight:750;margin-bottom:10px}th,td{padding:12px 8px;border-bottom:1px solid #bdcbbd;text-align:left;vertical-align:top;overflow-wrap:anywhere}th:last-child,td:last-child{width:25%;text-align:right}.income th:last-child,.income td:last-child{width:38%;text-align:left}tfoot{font-weight:750;background:#eef2e9}.balance{padding:18px;background:#e8eee5;font-weight:750}.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{font-weight:700}textarea{display:block;width:100%;min-height:116px;padding:12px;margin-top:8px;border:1px solid #647e72;border-radius:3px;color:#263e3c;resize:vertical}.confirm{padding:18px;background:#fff3de}#note-status{min-height:3em}footer{padding:18px 0;border-top:1px solid #a7b9a9}[hidden]{display:none!important}@media(max-width:560px){main{padding:18px}h1{font-size:2.1rem}.panel{padding:18px}.question-grid,.notes-grid{grid-template-columns:1fr}th,td{padding:10px 5px}.toolbar button{flex:1 1 100%}.crosswalk{padding:16px}}
</style></head><body><main>
<header><p class="eyebrow">PRACTICE APPLICATION · COMMUNITY READING ORIENTATION</p><h1>Does the answer meet the question?</h1><p>Four proposed sessions. A $1,200 expense plan. Two missing supporting items that a polished narrative cannot supply.</p><p class="context">Original fictional teaching application. The practice instructions, note N1 and costs are authored examples. No real funder, funded project or delivered program is represented.</p></header>
<section class="panel" aria-labelledby="requirements-title"><h2 id="requirements-title">The practice funder's questions</h2><p>Select a requirement to connect its answer, supporting item, gap and next action. The complete application stays below.</p><div class="question-grid" aria-label="Practice application requirements">
<button id="question-G1" aria-pressed="true"><strong>G1</strong><span>What community need would the project address, and what source supports it?</span></button>
<button id="question-G2" aria-pressed="false"><strong>G2</strong><span>What would you do, deliver, and expect participants to be able to do?</span></button>
<button id="question-G3" aria-pressed="false"><strong>G3</strong><span>What would the project cost, and how would you pay for it?</span></button>
<button id="question-G4" aria-pressed="false"><strong>G4</strong><span>How would you review the work, and where is the required budget worksheet?</span></button></div>
<div class="toolbar" aria-label="Application version"><button id="incomplete" aria-pressed="true">Incomplete draft</button><button id="aligned" aria-pressed="false">Aligned review draft</button></div><p id="version-note" role="status" aria-live="polite">Incomplete draft: G1 claims community need without a source; the G4 worksheet is omitted from the outline. Four sessions and the proposed budget remain unchanged.</p>
<div class="crosswalk" aria-labelledby="selected-title"><h3 id="selected-title">G1 · Community need and source</h3><dl><dt>Answer in this draft</dt><dd id="selected-answer"></dd><dt>Supporting item</dt><dd id="selected-support"></dd><dt>Unresolved item</dt><dd id="selected-gap" class="gap"></dd><dt>Next action</dt><dd id="selected-next"></dd></dl></div></section>
<section class="panel" aria-labelledby="application-title"><h2 id="application-title">The complete application outline</h2><p><strong>Project summary.</strong> Propose four community reading-orientation sessions about locating reading materials and understanding borrowing steps. Request $1,000 toward a total planned cost of $1,200, with a proposed $200 organizational contribution. Project period, venue, applicant details and contribution approval: TO CONFIRM.</p><div class="outline">
<article class="answer selected" id="answer-G1"><h3>G1 · Community need and source</h3><p id="need-answer">We need $1,000 to buy materials and run four sessions. The community needs this program.</p><p id="need-limit" class="gap">The resource request does not establish community need. No community source or citation supports the claim.</p></article>
<article class="answer" id="answer-G2"><h3>G2 · Activities, outputs and intended outcome</h3><p>Prepare an orientation handout, arrange a suitable venue, and offer four sessions using a demonstration followed by participant practice. Planned output: four delivered sessions. Intended outcome: participants can locate a suitable reading item and describe its borrowing steps.</p><p>Actual delivery, attendance and participant results are unknown. Record them after the work occurs.</p></article>
<article class="answer" id="answer-G3"><h3>G3 · Budget and proposed income</h3><p>Planned expenses total $1,200. The grant request is $1,000, not awarded. The proposed organizational contribution is $200, with approval TO CONFIRM. The two budget tables give the calculation bases and statuses.</p></article>
<article class="answer" id="answer-G4"><h3>G4 · Evaluation and supporting materials</h3><p>Record sessions delivered and attendance, keeping repeat attendances separate from unique participants. Ask participants to demonstrate locating an item and describing its borrowing steps. The task, recording method and reviewer remain TO CONFIRM.</p><p id="worksheet-entry" class="gap" hidden><strong>Required separate budget worksheet: Not supplied.</strong> The evaluation paragraph does not supply this attachment.</p></article></div></section>
<section class="panel" aria-labelledby="source-title"><h2 id="source-title">Planning note N1</h2><div class="note"><p><strong>Authored practice note</strong></p><blockquote>Prepare a proposal for four sessions explaining how to find reading materials and follow the borrowing steps.</blockquote><p>N1 supports the planning assignment only. It does not establish prevalence, community barriers or whether the proposed approach fits community needs. Community evidence and its citation: TO CONFIRM.</p></div></section>
<section class="panel" aria-labelledby="budget-title"><h2 id="budget-title">The same four-session plan, on both sides</h2><div class="budget-grid"><table id="expense-table"><caption>Planned expenses</caption><thead><tr><th scope="col">Expense</th><th scope="col">Calculation</th><th scope="col">Amount</th></tr></thead><tbody><tr><th scope="row">Session facilitation</th><td>4 × $150</td><td>$600</td></tr><tr><th scope="row">Room use</th><td>4 × $75</td><td>$300</td></tr><tr><th scope="row">Session materials</th><td>4 × $50</td><td>$200</td></tr><tr><th scope="row">Handout printing</th><td>1 × $100</td><td>$100</td></tr></tbody><tfoot><tr><th scope="row" colspan="2">Total expenses</th><td>$1,200</td></tr></tfoot></table>
<table class="income" id="income-table"><caption>Proposed income</caption><thead><tr><th scope="col">Source</th><th scope="col">Amount</th><th scope="col">Current status</th></tr></thead><tbody><tr><th scope="row">Grant request</th><td>$1,000</td><td>Requested; not awarded.</td></tr><tr><th scope="row">Organizational contribution</th><td>$200</td><td>Proposed; approval TO CONFIRM.</td></tr></tbody><tfoot><tr><th scope="row">Total proposed income</th><td>$1,200</td><td>Neither amount secured.</td></tr></tfoot></table></div><p class="balance" id="balance">$1,200 proposed income − $1,200 planned expenses = $0 difference.</p><p>The proposed amounts balance. This does not confirm available income, allowed costs, contribution approval or a grant award. No in-kind amount is included.</p></section>
<section class="panel" aria-labelledby="own-title"><h2 id="own-title">One question from your application</h2><p>Keep your own answer and follow-up beside the worked example. Changing its question or version preserves these four notes.</p><div class="notes-grid"><label>Actual question ID<textarea id="own-question"></textarea></label><label>Draft answer<textarea id="own-answer"></textarea></label><label>Evidence or attachment to obtain<textarea id="own-evidence"></textarea></label><label>Review owner and next action<textarea id="own-next"></textarea></label></div><div class="toolbar"><button id="reset" aria-expanded="false" aria-controls="confirmation">Clear my four notes</button></div><div class="confirm" id="confirmation" hidden><p>Clear these four notes? The worked application and selected question/version will stay as they are.</p><div class="toolbar"><button id="keep">Keep my notes</button><button id="clear">Clear all four notes</button></div></div><p id="note-status" role="status" aria-live="polite">Your four notes are blank. Nothing is submitted.</p></section>
<footer>Notes last in this open page only and disappear on reload. Nothing is sent or stored. Carry agreed wording into the maintained application and use the funder's required submission format.</footer>
</main><script>
'use strict';
const byId=id=>document.getElementById(id),questionIds=['G1','G2','G3','G4'];
const alignedNeed='Planning note N1 asks for four sessions explaining how to find reading materials and follow the borrowing steps. It supports the planning assignment only. Community need, prevalence, barriers and a supporting citation: TO CONFIRM.';
const incompleteNeed='We need $1,000 to buy materials and run four sessions. The community needs this program.';
const requirements={
G1:{title:'G1 · Community need and source',support:'N1 is an authored planning assignment, not community-need evidence.',gap:'Community evidence and its citation remain TO CONFIRM in both drafts.',next:'Obtain a traceable community source that addresses the proposed need. Check what it supports and retain its limits.'},
G2:{title:'G2 · Activities, outputs and intended outcome',answer:'Prepare an orientation handout, arrange a venue and offer four demonstration-and-practice sessions. Planned output: four delivered sessions. Intended outcome: participants locate a suitable item and describe its borrowing steps.',support:'The worked activity and output plan; no delivered sessions or participant results are supplied.',gap:'Project period, venue and actual delivery/attendance/results: TO CONFIRM.',next:'Confirm the period and venue, then define how the team will record delivery and investigate the intended ability.'},
G3:{title:'G3 · Cost and proposed income',answer:'Expenses: $600 facilitation + $300 room + $200 materials + $100 printing = $1,200. Proposed income: $1,000 request + $200 organizational contribution = $1,200. Difference: $0.',support:'Both complete budget tables, using the same four-session project scope.',gap:'The request is not awarded; organizational contribution approval is TO CONFIRM. Neither amount is secured.',next:'Confirm calculation bases and funder cost rules. Obtain the contribution decision and keep proposed amounts separate from secured funds.'},
G4:{title:'G4 · Evaluation and required worksheet',answer:'Record delivered sessions and attendance, distinguish repeat attendances from unique people, and ask participants to locate an item and describe its borrowing steps.',support:'The proposed evaluation paragraph. No completed evaluation or separate budget worksheet is supplied.',gap:'Task, recording method and reviewer: TO CONFIRM. Required budget worksheet: Not supplied in both versions.',next:'Define the task, method and reviewer; obtain the separate required budget worksheet before submission.'}
};
let selected='G1',version='incomplete';
function render(){
const aligned=version==='aligned',entry=requirements[selected];
byId('need-answer').textContent=aligned?alignedNeed:incompleteNeed;
byId('need-limit').textContent=aligned?'N1 does not establish community need. Obtain a community source and citation; the evidence gap remains open.':'The resource request does not establish community need. No community source or citation supports the claim.';
byId('worksheet-entry').hidden=!aligned;
byId('version-note').textContent=aligned?'Aligned review draft: G1 uses N1 with its evidence gap; G4 names the worksheet as Not supplied. The missing source and worksheet remain unresolved.':'Incomplete draft: G1 claims community need without a source; the G4 worksheet is omitted from the outline. Four sessions and the proposed budget remain unchanged.';
for(const id of questionIds){byId('question-'+id).setAttribute('aria-pressed',String(id===selected));byId('answer-'+id).classList.toggle('selected',id===selected);}
for(const id of ['incomplete','aligned'])byId(id).setAttribute('aria-pressed',String(id===version));
byId('selected-title').textContent=entry.title;
byId('selected-answer').textContent=selected==='G1'?(aligned?alignedNeed:incompleteNeed):entry.answer;
byId('selected-support').textContent=entry.support;
byId('selected-gap').textContent=entry.gap+(selected==='G4'&&!aligned?' This draft also omits the worksheet from its application outline.':'');
byId('selected-next').textContent=entry.next;
}
for(const id of questionIds)byId('question-'+id).addEventListener('click',()=>{selected=id;render();});
for(const id of ['incomplete','aligned'])byId(id).addEventListener('click',()=>{version=id;render();});
const ownFields=['own-question','own-answer','own-evidence','own-next'];
function closeConfirmation(){byId('confirmation').hidden=true;byId('reset').setAttribute('aria-expanded','false');}
for(const id of ownFields)byId(id).addEventListener('input',()=>{byId('note-status').textContent="Draft changed. Review your current answers, evidence and next steps.";});byId('reset').addEventListener('click',()=>{byId('confirmation').hidden=false;byId('reset').setAttribute('aria-expanded','true');byId('keep').focus();});
byId('keep').addEventListener('click',()=>{closeConfirmation();byId('note-status').textContent='Kept all four notes. The worked application is unchanged.';byId('reset').focus();});
byId('clear').addEventListener('click',()=>{for(const id of ownFields)byId(id).value='';closeConfirmation();byId('note-status').textContent='All four notes were cleared. The selected question, draft version and worked application are unchanged.';byId('own-question').focus();});
render();
</script></body></html>