Separate direct observations, attributed accounts, actions, and unresolved details in a fictional report

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>Room 2 report · separate observation from account</title><style>*{box-sizing:border-box}body{margin:0;background:#f1f3f6;color:#384957;font:16px/1.55 system-ui,sans-serif}main{max-width:960px;margin:auto;padding:24px}h1{font-size:34px;line-height:1.16}h2{font-size:24px}h3{font-size:19px}.eyebrow{letter-spacing:.06em;color:#6c8090}.card{padding:20px;margin:18px 0;background:white;border:1px solid #cad3db;border-radius:6px}.timeline{display:grid;gap:12px}.timeline p{border-left:5px solid #8b9dad;padding:12px;background:#eff3f7;margin:0}.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}button,textarea{font:inherit;color:inherit}button{min-height:44px;padding:10px 14px;border:1px solid #788e9f;border-radius:4px;background:white;cursor:pointer}button[aria-pressed=true]{background:#506b81;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #b8792a;outline-offset:3px}.statement{border-left:6px solid #b9934a;background:#fff8e8}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:14px}.comparison>div{padding:16px;background:#f0f4f7}.factual{border-left:6px solid #6d9486;background:#eff6f2}label{display:block;font-weight:650;margin:14px 0 6px}textarea{width:100%;max-width:100%;min-width:0;min-height:95px;padding:10px;border:1px solid #9aabba;border-radius:4px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#7d551f}footer{margin:24px 0;color:#667e8f}[hidden]{display:none!important}@media(max-width:560px){main{padding:12px}h1{font-size:28px}.card{padding:14px}.comparison{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">FICTIONAL TRAINING PACKET · NOVEMBER 3 / ROOM 2 / AMERICA/NEW_YORK</p><h1>What did you observe, and what was reported to you?</h1><section class="card"><h2>Supplied timeline</h2><div class="timeline"><p><strong>14:05 · R1 observes:</strong> display board on the floor beside easels; small dent in a frame corner. R1 did not see it fall.</p><p><strong>14:07 · W1 says:</strong> “I saw a cart touch the left leg.”</p><p><strong>14:08 · recorded action:</strong> facilitator pauses setup and moves participants to the adjacent designated waiting area.</p><p><strong>14:20 · report prepared by R1.</strong> Actual fall time is not supplied.</p></div><p>A3 is a photo reference showing the board's position after the fall. Cause and injury information are not supplied. R1 and W1 are training identifiers, not real identities.</p></section><section class="card statement"><h2>Inspect a statement and its source</h2><div class="tabs"><button id="observation" type="button" aria-pressed="true">Direct observation</button><button id="witness" type="button" aria-pressed="false">Witness account</button><button id="action" type="button" aria-pressed="false">Recorded action</button><button id="unknown" type="button" aria-pressed="false">Unresolved detail</button><button id="attachment" type="button" aria-pressed="false">Attachment A3</button><button id="times" type="button" aria-pressed="false">Three different times</button></div><h3 id="type">Direct observation · R1</h3><p id="statement">At 14:05, R1 saw the board on the floor beside the easels and observed a small dent in a frame corner.</p><p id="limit">R1 did not see the fall. This observation does not establish its time or cause.</p></section><div class="tabs"><button id="compare" type="button" aria-expanded="false" aria-controls="comparison">Compare unsupported wording</button><button id="narrative" type="button" aria-expanded="false" aria-controls="narrative-view">Read complete fixed narrative</button></div><section id="comparison" class="card" hidden><h2>Remove the claims the packet cannot support</h2><div class="comparison"><div><h3>Unsupported account</h3><p>A reckless volunteer hit the display with a cart and caused it to fall. Nobody was injured.</p></div><div><h3>What needs correction</h3><p>“Reckless” assigns a speculative label. Cause is unconfirmed. Injury information is absent. W1's account must stay attributed instead of becoming R1's direct observation.</p></div></div></section><section id="narrative-view" class="card factual" hidden><h2>Complete attributed narrative · fixed training facts</h2><p>On November 3 at 14:05 America/New_York, I observed a display board lying on the floor beside the easels in Room 2. I did not see it fall. I observed a small dent in one frame corner. At 14:07, W1 told me, “I saw a cart touch the left leg.” At 14:08, the facilitator paused setup and moved participants to the adjacent designated waiting area. Photo reference A3 shows the board's position after the fall. It does not show how the board fell. The time of the fall and its cause remain unconfirmed. Injury information was not supplied in this training packet. I prepared this report at 14:20.</p><p>The facilitator's action is a recorded scenario fact, not general instructions for responding to other incidents.</p></section><section class="card"><h2>Separate blank training report</h2><p>Use sanitized practice information here. Actual reports use the organization's designated reporting channel.</p><div id="fields"></div><div class="tabs"><button id="build" type="button">Build local report review</button><button id="reset" type="button">Reset typed work</button></div><p id="status" role="status"></p><section id="confirm" hidden><h3>Clear all ten training fields?</h3><div class="tabs"><button id="keep" type="button">Keep my report</button><button id="clear" type="button">Clear typed report</button></div></section><section id="review" class="card copy" hidden><h3>Your supplied training report</h3><div id="copy"></div><p>Review text only. Nothing has been filed or notified; no cause, injury status or fault has been inferred.</p></section></section><footer>Temporary training text only. No filing, notification, disciplinary decision or saved incident record. Keep unknown values visibly unknown.</footer></main><script>'use strict';const $=id=>document.getElementById(id),statements={observation:['Direct observation · R1','At 14:05, R1 saw the board on the floor beside the easels and observed a small dent in a frame corner.','R1 did not see the fall. This observation does not establish its time or cause.'],witness:['Attributed witness account · W1','At 14:07, W1 told R1: “I saw a cart touch the left leg.”','Retain W1 as the source. This is not an event R1 directly witnessed and does not itself settle the cause.'],action:['Recorded immediate action','At 14:08, the facilitator paused setup and moved participants to the adjacent designated waiting area.','This is a supplied scenario action, not general advice for other incidents.'],unknown:['Unresolved detail','Actual fall time, cause and injury information are not supplied.','Do not turn absence of injury information into “Nobody was injured,” or turn the first observation into the fall time.'],attachment:['Attachment reference · A3','A3 shows the board’s position after the fall.','It does not show how the board fell or establish the sequence before the photo. No actual image file is supplied.'],times:['Event, observation and report times','Actual event time: unknown. First observation: 14:05. Report prepared: 14:20. Times use America/New_York.','The 14:07 witness statement and 14:08 action are additional recorded times. Do not copy 14:05 into the event-time field as established fact.']};for(const[id,row]of Object.entries(statements))$(id).addEventListener('click',()=>{for(const key of Object.keys(statements))$(key).setAttribute('aria-pressed',String(key===id));for(const[i,target]of ['type','statement','limit'].entries())$(target).textContent=row[i];});for(const[button,panel]of [['compare','comparison'],['narrative','narrative-view']])$(button).addEventListener('click',()=>{const open=$(panel).hidden;$(panel).hidden=!open;$(button).setAttribute('aria-expanded',String(open));});const fields=[['date','Date and time-zone context · required'],['location','Location · required'],['event-time','Event time, if known'],['first-observation','First observation time'],['report-time','Report preparation time'],['own-observations','Direct observations with source'],['own-witness','Attributed accounts and statement times'],['own-actions','Recorded actions and times'],['attachments','Attachment references, what they show and limits'],['questions','Unresolved details and follow-up questions']];for(const[id,label]of fields){const l=document.createElement('label'),t=document.createElement('textarea');l.htmlFor=id;l.textContent=label;t.id=id;t.addEventListener('input',()=>{$('review').hidden=true;$('status').textContent='Training report changed. Build again to review current words.';});$('fields').append(l,t);}$('build').addEventListener('click',()=>{const missing=['date','location'].filter(id=>!$(id).value.trim());$('review').hidden=true;if(missing.length){$('status').textContent='Complete: '+missing.map(id=>id==='date'?'date/time-zone context':'location').join(', ')+'.';return;}$('copy').replaceChildren();for(const[id,title]of fields){const h=document.createElement('h3'),p=document.createElement('p');h.textContent=title;p.textContent=$(id).value.trim()||'Not supplied.';$('copy').append(h,p);}$('review').hidden=false;$('status').textContent='Local training review assembled from supplied words.';});$('reset').addEventListener('click',()=>{$('confirm').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirm').hidden=true;$('reset').focus();});$('clear').addEventListener('click',()=>{for(const[id]of fields)$(id).value='';$('review').hidden=true;$('confirm').hidden=true;$('status').textContent='Ten training fields cleared. Fixed facts and worked views are unchanged.';$('date').focus();});</script></body></html>