The Bench by the Gate: fictional worked example and reusable blank template.

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>The Bench by the Gate</title><style>:root{--accent:#8b573b;--paper:#fffaf3}*{box-sizing:border-box}body{margin:0;color:#202b32;background:var(--paper);font:16px/1.55 Arial,sans-serif}main{max-width:1060px;margin:auto;padding:34px 40px 45px}.eyebrow{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);font-weight:700;margin:0 0 10px}h1{font:500 clamp(28px,4.2vw,42px)/1.12 Georgia,serif;letter-spacing:-.025em;margin:0 0 14px;max-width:850px}h2{font-size:20px;line-height:1.3;margin:0 0 12px}h3{font-size:12px;line-height:1.4;letter-spacing:.03em;color:var(--accent);margin:0 0 6px}p{margin:0 0 12px}.context,small{color:#5f6d76;font-size:13px}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0 26px}button,select{font:inherit;font-size:13px;border:1px solid #c3cbd0;background:white;border-radius:5px;padding:9px 14px;color:#26323a;cursor:pointer}button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:white}button:focus-visible,select:focus-visible{outline:3px solid #d5ad29;outline-offset:3px}[hidden]{display:none!important}section{min-width:0}main>header{border-bottom:1px solid #d7dbdc;padding-bottom:2px}main>footer{border-top:1px solid #d7dbdc;margin-top:28px;padding-top:13px;font-size:12px;color:#66747b}.two{display:grid;grid-template-columns:1fr 1fr;gap:22px}.pair{padding:14px 0;border-bottom:1px solid #dfe2e2;break-inside:avoid}.pair p:last-child{margin:0}.note{margin:26px 0 0;padding:16px 18px;border-left:3px solid var(--accent);background:#fff;font-size:14px}.number{font:600 16px/1 Arial;color:var(--accent)}.risk{display:grid;grid-template-columns:65px 1fr;gap:18px;padding:23px 0;border-bottom:1px solid #cfc9bd}.risk-id{font-size:15px;font-weight:700;color:var(--accent)}.risk-id span{display:block;margin-top:9px;font-size:10px;letter-spacing:.08em}.statement{font-size:18px}.action{margin-top:18px;background:#f3eee6;padding:0 18px}.status{font-size:12px;color:var(--accent);margin:16px 0 0}.column-label,.compare-row{display:grid;grid-template-columns:100px 1fr 1fr}.column-label{padding:15px 0;border-bottom:3px solid var(--accent);align-items:end}.column-label h2{font-size:22px;margin:0;padding-left:18px}.column-label span{font-size:10px;color:#66747b}.compare-row h3,.compare-row p{padding:18px;margin:0;border-bottom:1px solid #d0d9e2}.compare-row h3{padding-left:0;color:#485c6d}.compare-row p{border-left:1px solid #d0d9e2}.mobile-label{display:none}.decision{padding:22px;background:#edf2f8;margin:24px 0}.decision p{margin:0}.passage{padding-left:25px;margin:0}.passage li{padding:0 0 15px 7px}.passage li::marker{font-size:12px;color:var(--accent);font-weight:700}.chain{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:20px 0}.chain>div{padding:18px;border:1px solid #dfd7c7}.chain .number{display:block;margin-bottom:15px}.chain .arrow{color:var(--accent);font-size:25px;margin:3px 0}.step{display:grid;grid-template-columns:42px 1fr;gap:18px;padding:20px 0;border-bottom:1px solid #c9d6d2}.step .number{padding-top:5px}.step h2{margin-bottom:14px}.expected strong,.stop strong{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px}.stop{font-size:14px;background:#fff0df;border-left:3px solid #b77930;padding:10px 14px}.issue-filter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;margin-bottom:20px}.issue-filter output{margin-left:auto;color:var(--accent)}.issue{border:1px solid #d5cfe4;border-radius:6px;padding:22px;margin:20px 0;background:white}.issue-heading{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px;font:700 12px Arial;color:var(--accent)}.tag{font-weight:400;background:#eee9f6;padding:4px 7px;border-radius:3px}.closure{font-size:13px;padding-top:16px;color:#785329}.student-voice{font:italic 24px/1.35 Georgia,serif;color:var(--accent);margin:0 0 18px}.goal{max-width:800px}.opportunities{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}.opportunities>div{border:1px solid #cadde2;padding:18px}.opportunities .number{display:block;margin-bottom:12px}.story-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:35px}.story-layout>.story-map{border-left:1px solid #e1d2c4;padding-left:26px}.source-sheet{border-top:3px solid var(--accent)}.sample{margin-top:22px}.sample blockquote{margin:0;padding:20px;background:#f8ecef;font:18px/1.6 Georgia,serif}.revision{padding:5px 20px;background:#eef4ee;margin:22px 0}.rubrics{margin-top:30px}.criterion{border-top:1px solid #cbd1db;padding:18px 0}.criterion>h3{font-size:16px}.levels{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.levels p{font-size:13px;margin:0}.levels strong{display:block;font-size:11px;margin-bottom:5px;color:var(--accent)}.sources{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.sources>h2{grid-column:1/-1}.sources .pair{padding:18px;background:#fff;border:1px solid #d2d9e6}.sources .pair p{font-size:14px}.thread{max-width:800px}.post{padding:0 18px;border-left:3px solid #a897c3}.reply{margin:12px 0 18px 25px;padding:0 18px;border-left:3px solid var(--accent)}.reply-switch{margin:20px 0 0 25px;display:flex;gap:8px}.feedback{font-size:13px;color:var(--accent);padding-bottom:15px}.write-space{height:62px;background:repeating-linear-gradient(to bottom,transparent 0,transparent 29px,#d5d9dc 30px,#d5d9dc 31px)}.blank-fields>section{margin:22px 0}.blank-fields h3{font-size:14px}.empty-chart{border:1px solid #c4cbd1;margin-top:20px}.empty-chart .two{gap:0}.empty-chart .two>div{padding:20px;border-right:1px solid #c4cbd1}.empty-chart .write-space{height:340px}.mode-label{font-size:11px;color:#63717a;margin:0 0 12px}body[data-kind=story],body[data-kind=rubric]{font-family:Georgia,serif}body[data-kind=story] h3,body[data-kind=rubric] h3{font-family:Arial,sans-serif}.comparison-table{width:100%;border-collapse:collapse;table-layout:fixed}.comparison-table caption{text-align:left;font-size:12px;color:#63717a;margin-bottom:10px}.comparison-table th,.comparison-table td{text-align:left;vertical-align:top;padding:16px 12px;border-bottom:1px solid #d0d9e2;overflow-wrap:anywhere}.comparison-table thead th{border-bottom:3px solid var(--accent);color:var(--accent)}.comparison-table th:first-child{width:23%;font-size:12px}.comparison-table tbody td{font-size:15px}@media(max-width:620px){main{padding:22px 18px 32px}h1{font-size:30px}.two,.story-layout,.levels,.chain,.sources,.opportunities{grid-template-columns:1fr}.sources>h2{grid-column:auto}.risk{grid-template-columns:1fr;gap:10px}.risk-id span{display:inline;margin-left:12px}.risk .two{gap:0}.story-layout>.story-map{border-left:0;border-top:1px solid #e1d2c4;padding:20px 0 0}.column-label{grid-template-columns:1fr 1fr}.column-label span{display:none}.column-label h2{padding-left:0;font-size:20px}.compare-row{grid-template-columns:1fr 1fr}.compare-row h3{grid-column:1/-1;border:0;padding:12px 0 0;font-size:11px}.compare-row p{border-left:0;padding:10px 10px 14px 0;font-size:14px}.compare-row p:last-child{padding-left:12px;border-left:1px solid #d0d9e2}.step{grid-template-columns:25px 1fr;gap:10px}.issue{padding:16px}.issue-heading{align-items:start}.levels p{padding:8px 0;border-bottom:1px solid #eee}.note{padding:13px}.empty-chart .two{grid-template-columns:1fr 1fr}.empty-chart .two>div{padding:12px}.empty-chart .write-space{height:240px}}@media print{body{background:white}main{max-width:none;padding:0}.toolbar,.issue-filter,.reply-switch,footer{display:none!important}.pair,.step,.criterion,.risk,.issue{break-inside:avoid}.two,.story-layout{grid-template-columns:1fr 1fr}.levels{grid-template-columns:repeat(3,1fr)}button{display:none}}</style></head><body data-kind="story"><main><header><p class="eyebrow">Fictional worked example · Reusable template</p><h1>The Bench by the Gate</h1><p class="context" id="review-date">Review date: November 6, 2026</p><p>Follow Noor’s goal through the attempts and the ending.</p></header><nav class="toolbar" aria-label="Choose version"><button type="button" data-mode="worked" aria-pressed="true">Worked example</button><button type="button" data-mode="blank" aria-pressed="false">Blank template</button></nav><div id="worked"><div class="story-layout"><section><h2>The story</h2><ol class="passage"><li>Before the neighborhood reading morning, Noor carried a box of donated books to the garden gate. She wanted visitors to notice the reading table before they entered the garden.</li><li>The table stood behind a tall hedge. Noor put a paper arrow on the gate, but the wind folded it around the rail.</li><li>She taped the arrow to a box. The next arriving family walked past without seeing it.</li><li>Noor asked the caretaker whether she could use the bench beside the entrance. With permission, she moved a few books there and set the arrow flat against the backrest.</li><li>The next family stopped to look at the books. Noor showed them the table behind the hedge.</li><li>When the reading morning began, she left the remaining box at the table and returned to the bench to greet the next visitors.</li></ol></section><section class="story-map"><h2>The map</h2><div class="pair"><h3>Goal · paragraph 1</h3><p>Help arriving visitors notice the reading activity.</p></div><div class="pair"><h3>Setting · paragraphs 1–2</h3><p>Garden entrance; the hedge hides the table and wind folds the first sign.</p></div><div class="pair"><h3>Problem · paragraphs 2–3</h3><p>Visitors can pass without noticing the reading table.</p></div><div class="pair"><h3>Attempts · paragraphs 2–4</h3><p>Gate arrow folds; box sign is missed; Noor obtains permission to use the entrance bench.</p></div><div class="pair"><h3>Resolution · paragraphs 5–6</h3><p>A family stops. Noor directs them to the table and returns to greet later visitors.</p></div><div class="pair"><h3>Uncertainty</h3><p>One family stops. Total attendance and every later visitor’s behavior are unknown.</p></div></section></div><aside class="note">For an early retelling, use Beginning / Problem and attempt / Ending. For explaining the story, keep the goal and evidence references visible.</aside></div><div id="blank" hidden><p class="mode-label">BLANK WORKING COPY · Replace the fields for your task</p><section class="blank-fields"><p class="context">Use your own task and evidence. Leave unconfirmed details unfilled.</p><section><h3>01 / Story title / source</h3><div class="write-space" aria-label="Space to write Story title / source"></div></section><section><h3>02 / Character and goal</h3><div class="write-space" aria-label="Space to write Character and goal"></div></section><section><h3>03 / Relevant setting</h3><div class="write-space" aria-label="Space to write Relevant setting"></div></section><section><h3>04 / Problem</h3><div class="write-space" aria-label="Space to write Problem"></div></section><section><h3>05 / Attempts and results</h3><div class="write-space" aria-label="Space to write Attempts and results"></div></section><section><h3>06 / Resolution</h3><div class="write-space" aria-label="Space to write Resolution"></div></section><section><h3>07 / Evidence references</h3><div class="write-space" aria-label="Space to write Evidence references"></div></section><section><h3>08 / What remains uncertain</h3><div class="write-space" aria-label="Space to write What remains uncertain"></div></section></section></div><footer>Original illustrative material. Keep official records in your approved system.</footer></main><script>const modes=document.querySelectorAll("[data-mode]");modes.forEach(b=>b.addEventListener("click",()=>{const mode=b.dataset.mode;modes.forEach(x=>x.setAttribute("aria-pressed",String(x===b)));document.querySelector("#worked").hidden=mode!=="worked";document.querySelector("#blank").hidden=mode!=="blank";}));document.querySelectorAll("[data-reply]").forEach(b=>b.addEventListener("click",()=>{document.querySelectorAll("[data-reply]").forEach(x=>x.setAttribute("aria-pressed",String(x===b)));document.querySelector("#reply-a").hidden=b.dataset.reply!=="a";document.querySelector("#reply-b").hidden=b.dataset.reply!=="b";}));const filter=document.querySelector("#status");if(filter)filter.addEventListener("change",()=>{let n=0;document.querySelectorAll(".issue").forEach(x=>{x.hidden=filter.value!=="all"&&x.dataset.status!==filter.value;if(!x.hidden)n++});document.querySelector("#issue-count").textContent=n+" issue"+(n===1?"":"s")});</script></body></html>