Write a reply worth answering: fictional worked example and reusable blank template.
HTML for this example
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>Write a reply worth answering</title><style>:root{--accent:#674fa3;--paper:#fcfaff}*{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="discussion"><main><header><p class="eyebrow">Fictional worked example · Reusable template</p><h1>Write a reply worth answering</h1><p class="context" id="review-date">Review date: November 6, 2026</p><p>What should a school learn from a four-week lunchtime study-room pilot?</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="thread"><div class="pair"><h3>Shared fictional case</h3><p>One unused room is available. A four-week pilot can use the current staffing arrangement. No earlier attendance figures are supplied.</p></div><section class="post"><div class="pair"><h3>Initial post</h3><p>The school should count how many people use the room. If attendance is high, it should continue.</p></div></section><div class="reply-switch" role="group" aria-label="Choose a sample reply"><button type="button" data-reply="a" aria-pressed="false">Reply A</button><button type="button" data-reply="b" aria-pressed="true">Reply B</button></div><section class="reply" id="reply-a" hidden><div class="pair"><h3>Reply A</h3><p>I agree. A study room is a great idea and would help lots of students.</p></div><p class="feedback">Agreement only; no development of the peer’s reasoning.</p></section><section class="reply" id="reply-b"><div class="pair"><h3>Reply B</h3><p>Counting use would help, but a total could hide whether a few students return every day. Could the pilot record daily visits and an anonymous question about whether students found space to study? That would let the school compare use with the problem the room is meant to address.</p></div><p class="feedback">Develops the peer’s counting proposal with a limitation and a useful question.</p></section><div class="pair"><h3>Closing reflection</h3><p>I still think the pilot should begin. The reply about repeat visits changed what I would count. I would now separate daily use from the number of different people who used the room, if the school can collect that information appropriately.</p></div></div><section class="rubrics"><h2>Criteria you can assess from the work</h2><section class="criterion"><h3>Initial contribution</h3><div class="levels"><p><strong>Demonstrated</strong> Answers the question with a reasoned position that another reader can examine.</p><p><strong>Developing</strong> Gives a relevant position but leaves its main reason unclear.</p><p><strong>Not yet visible</strong> Does not provide a position relevant to the question.</p></div></section><section class="criterion"><h3>Use of the shared material</h3><div class="levels"><p><strong>Demonstrated</strong> Uses an accurate detail from the supplied material and explains its connection to the position.</p><p><strong>Developing</strong> Includes a relevant detail but does not explain the connection, or overstates what the detail supports.</p><p><strong>Not yet visible</strong> Relies on unsupported statements or does not engage with the supplied material.</p></div></section><section class="criterion"><h3>Reply that develops the exchange</h3><div class="levels"><p><strong>Demonstrated</strong> Addresses a specific peer idea and adds evidence, a consequence, a qualification, or a question that can change the reasoning.</p><p><strong>Developing</strong> Identifies a peer idea but mainly repeats it or offers a broad question without development.</p><p><strong>Not yet visible</strong> Gives only agreement, disagreement, or a response unrelated to the peer’s idea.</p></div></section><section class="criterion"><h3>Closing reflection</h3><div class="levels"><p><strong>Demonstrated</strong> Explains whether an exchange changed or qualified the student’s position, with a reference to the relevant contribution.</p><p><strong>Developing</strong> States that the position changed or stayed the same but does not explain why.</p><p><strong>Not yet visible</strong> Does not connect the reflection to the discussion.</p></div></section></section><aside class="note">Reply A adds agreement and an unsupported benefit. Reply B develops a specific peer idea with a limitation and a question. Posting deadlines and contribution counts remain separate from reasoning quality.</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 / Question / learning purpose</h3><div class="write-space" aria-label="Space to write Question / learning purpose"></div></section><section><h3>02 / Shared material</h3><div class="write-space" aria-label="Space to write Shared material"></div></section><section><h3>03 / Initial-post window</h3><div class="write-space" aria-label="Space to write Initial-post window"></div></section><section><h3>04 / Reply window</h3><div class="write-space" aria-label="Space to write Reply window"></div></section><section><h3>05 / Contribution requirements / alternatives</h3><div class="write-space" aria-label="Space to write Contribution requirements / alternatives"></div></section><section><h3>06 / Criteria and levels</h3><div class="write-space" aria-label="Space to write Criteria and levels"></div></section><section><h3>07 / Actual post excerpt / feedback</h3><div class="write-space" aria-label="Space to write Actual post excerpt / feedback"></div></section><section><h3>08 / Closing reflection if assigned</h3><div class="write-space" aria-label="Space to write Closing reflection if assigned"></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>