Original fictional peer-observation record and an unfilled reusable layout

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>Classroom observation: a bounded running record</title><style>*{box-sizing:border-box}body{margin:0;background:#f2efe8;color:#303139;font:17px/1.6 system-ui,sans-serif}main{max-width:880px;margin:28px auto;background:#fff;padding:28px;border-top:5px solid #8a553e}h1{font:500 clamp(30px,6vw,43px)/1.15 Georgia,serif;margin:12px 0 18px}h2{font-size:22px;margin:28px 0 10px}h3{font-size:18px;margin:0 0 8px}p{max-width:67ch}.eyebrow{color:#79533d;font-size:14px;letter-spacing:.04em}.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0}button{font:inherit;padding:9px 14px;border:1px solid #8a553e;border-radius:3px;background:white;color:#663f2e;cursor:pointer}button[aria-pressed=true]{background:#663f2e;color:white}.context{border-block:1px solid #d9d2c8;padding:14px 0;margin:18px 0}.context p{margin:5px 0}.record{display:grid;grid-template-columns:68px 1fr;border-top:1px solid #d9d2c8;padding:17px 0;gap:15px}.record:last-child{border-bottom:1px solid #d9d2c8}time{font-size:19px;font-weight:650;color:#663f2e}.record p{margin:4px 0 13px}.record p:last-child{margin-bottom:0}.label{font-weight:650}.question{border-left:3px solid #9b735b;padding:12px 16px;background:#f7f1eb}.line{min-height:46px;border-bottom:1px solid #a8a198;margin:8px 0 18px}.blank-note{min-height:145px;border:1px solid #bdb5ac;padding:12px;margin:14px 0}.status{color:#6b5b4f;font-size:15px}[hidden]{display:none!important}footer{border-top:1px solid #d9d2c8;padding-top:20px;margin-top:26px;font-size:15px}a{color:#71432f}@media(max-width:600px){main{margin:0;padding:22px 16px}.record{grid-template-columns:1fr;gap:4px}}@media print{body{background:white}main{margin:0;max-width:none;border-top:0}.tabs,footer{display:none}.record,.blank-note{break-inside:avoid}}</style></head><body><main><p class="eyebrow">ORIGINAL FICTIONAL PRACTICE · NO ACTUAL SCHOOL RECORDS</p><h1>Leave a record someone can revisit</h1><p>Keep observed words and actions beside their time. Discuss the interpretation separately.</p><nav class="tabs" aria-label="Observation views"><button id="view-filled" aria-pressed="true" aria-controls="filled">Filled example</button><button id="view-blank" aria-pressed="false" aria-controls="blank">Blank layout</button></nav><section id="filled"><h2>Filled fictional observation</h2><div class="context"><p><strong>Purpose:</strong> Peer-feedback practice; no evaluation rating.</p><p><strong>Window:</strong> <span id="window">9:10–9:18 · 8 minutes</span></p><p><strong>Focus:</strong> How responses connect a claim to the supplied reading.</p><p><strong>Context:</strong> Original fictional reading lesson. Observer, teacher and date are not actual records.</p></div><p><strong>Supplied reading:</strong> “At the library, four books were placed on each of two display tables.”</p><div id="evidence"><article class="record" data-record="E1"><time>9:10</time><div><h3>E1</h3><p><span class="label">Teacher:</span> <span class="teacher">Points to the supplied sentence and asks, “What supports the claim that eight books were placed?”</span></p><p><span class="label">Student evidence:</span> <span class="student">One student underlines “four books” and “two display tables.”</span></p></div></article><article class="record" data-record="E2"><time>9:13</time><div><h3>E2</h3><p><span class="label">Teacher:</span> <span class="teacher">Asks, “How do those details connect?”</span></p><p><span class="label">Student evidence:</span> <span class="student">The same student says, “Two tables with four on each means eight.”</span></p></div></article><article class="record" data-record="E3"><time>9:17</time><div><h3>E3</h3><p><span class="label">Teacher:</span> <span class="teacher">Asks whether the sentence establishes that eight books were borrowed.</span></p><p><span class="label">Student evidence:</span> <span class="student">A second student says, “It says they placed books, not that anyone borrowed them.”</span></p></div></article></div><h2>Interpretation to discuss</h2><p id="interpretation">The recorded responses connect the book-count claim with the two quantities in the sentence and distinguish placing from borrowing.</p><p class="status">Scope: E1 and E2 concern the same student; E3 concerns a second student. Three entries do not represent the entire class.</p><div class="question"><h3>Question for the teacher</h3><p>What did you notice in the other pairs' explanations?</p><p><strong>Teacher response:</strong> Not supplied.</p><p><strong>Agreed action:</strong> Not supplied.</p></div></section><section id="blank" hidden><h2>Unfilled observation layout</h2><p>Use the required school record for actual notes. This browser page does not collect or store entries.</p><p><strong>Purpose / required form:</strong></p><div class="line"></div><p><strong>Permitted observer / teacher reference / date:</strong></p><div class="line"></div><p><strong>Lesson context / observed start and end / focus:</strong></p><div class="line"></div><div class="blank-note"><h3>E1 · Time: __________</h3><p>Teacher actions or words:</p><div class="line"></div><p>Student evidence and its scope:</p><div class="line"></div></div><div class="blank-note"><h3>E2 · Time: __________</h3><p>Teacher actions or words:</p><div class="line"></div><p>Student evidence and its scope:</p><div class="line"></div></div><div class="blank-note"><h3>E3 · Time: __________</h3><p>Teacher actions or words:</p><div class="line"></div><p>Student evidence and its scope:</p><div class="line"></div></div><p><strong>Interpretation and supporting entry IDs:</strong></p><div class="line"></div><p><strong>Question / actual teacher response:</strong></p><div class="line"></div><p><strong>Actual agreed action / next check:</strong></p><div class="line"></div></section><footer>Reading and layout example only. No notes are saved or sent. <a href="/examples/files/classroom-observation-form.blank.html">Download the blank HTML layout</a></footer></main><script>for(const view of ['filled','blank'])document.getElementById('view-'+view).addEventListener('click',()=>{for(const name of ['filled','blank']){document.getElementById(name).hidden=name!==view;document.getElementById('view-'+name).setAttribute('aria-pressed',String(name===view));}});</script></body></html>