A completed card-layout reflection, a blank sheet, and a sentence to revise

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>A reflection before the conversation</title><style>
:root{font:16px/1.65 system-ui,sans-serif;color:#3d3530;background:#f2eee6}*{box-sizing:border-box}body{margin:0}main{max-width:920px;margin:auto;padding:24px}h1{font:700 2.6rem/1.14 Georgia,serif;max-width:20ch}h2{font:700 1.7rem/1.3 Georgia,serif}h3{font-size:1.13rem}.eyebrow{font-weight:750;letter-spacing:.04em}.event{border-left:5px solid #82623c;background:#fff8e9;padding:18px}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}button,textarea{font:inherit}button{padding:10px 14px;min-height:46px;border:1px solid #806b59;border-radius:4px;background:#fffdf8;color:#3d3530;white-space:normal;cursor:pointer;text-align:left}button[aria-pressed=true]{background:#574b3f;color:#fff}button:focus-visible,textarea:focus-visible{outline:3px solid #a64316;outline-offset:4px}.sheet{background:#fffdf8;border:1px solid #c5bbaa;margin:24px 0;padding:24px}.sheet-title{border-bottom:2px solid #9c886d;padding-bottom:16px}.responses{list-style:none;padding:0;counter-reset:row}.response{border-bottom:1px solid #cfc7b9;padding:20px 16px;counter-increment:row;border-left:5px solid transparent}.response h3:before{content:counter(row) '. ';color:#715638}.response h3{margin:0 0 9px}.response p{margin:0}.response.selected{border-left-color:#80603c;background:#f6ecd8}.tag{display:block;font-weight:750;color:#6d4d27;margin-bottom:8px}.open-answer{min-height:65px;border-bottom:1px dashed #9c886d}.followup{padding:14px;background:#f2eee5}.practice{display:grid;gap:22px}.practice label{font-weight:700}textarea{display:block;width:100%;min-height:125px;margin-top:8px;padding:12px;border:1px solid #9b8d7a;border-radius:3px;background:#fff;color:#3d3530;resize:vertical}.comparison{border-left:5px solid #80603c;background:#f4eee1;padding:20px}blockquote{font-size:1.2rem;line-height:1.6;margin:12px 0}.confirm{padding:18px;background:#fff0d3}#practice-status{min-height:3em}footer{padding:18px 0;border-top:1px solid #bdad95}[hidden]{display:none!important}@media(max-width:520px){main{padding:18px}h1{font-size:2.05rem}.sheet{padding:18px}.response{padding:18px 10px}.toolbar button{flex:1 1 auto}}
</style></head><body><main>
<header><p class="eyebrow">CLASSROOM PREPARATION · ORIGINAL FICTIONAL MODEL</p><h1>Describe the action. Leave room to hear the other person.</h1><p>A reflection can name what happened and what to ask next without supplying someone else's feelings.</p><div class="event"><h2>The card-layout event</h2><p>Rowan moved three labeled cards from a group display without asking. Sam put those three cards back. Rowan thought the changed order would read more clearly; Rowan now notices that the group had already agreed on an order.</p><p>No account from Sam or later agreement is supplied.</p></div></header>
<section aria-labelledby="view-title"><h2 id="view-title">A model and a separate blank sheet</h2><div class="toolbar" aria-label="Reflection view"><button id="model-view" aria-pressed="true">Model reflection</button><button id="blank-view" aria-pressed="false">Blank sheet</button></div><div class="toolbar" aria-label="Model response to inspect"><button id="highlight-action" aria-pressed="true">Action</button><button id="highlight-effect" aria-pressed="false">Observed effect</button><button id="highlight-perspective" aria-pressed="false">Unknown perspective</button><button id="highlight-repair" aria-pressed="false">Proposed repair</button></div><p id="highlight-note" role="status" aria-live="polite">Action: model response 1 names what Rowan did. The labeled highlight is shown in Model reflection.</p></section>
<section class="sheet" id="model-sheet" aria-labelledby="model-title"><div class="sheet-title"><h2 id="model-title">Rowan's model reflection</h2><p>A fictional learner's account. The final response stays blank for a later conversation.</p></div><ol class="responses">
<li class="response selected" id="model-action"><h3>Describe what you did.</h3><span class="tag" id="tag-action">Action</span><p>I moved three labeled cards from our group display without asking.</p></li>
<li class="response"><h3>Explain your thinking at that moment.</h3><p>I thought my order would make the display easier to read.</p></li>
<li class="response"><h3>Describe your thinking now.</h3><p>I notice that the others had already agreed on an order. I changed their work without checking with them.</p></li>
<li class="response" id="model-effect"><h3>Record what you observed afterward.</h3><span class="tag" id="tag-effect" hidden>Observed effect</span><p>Sam put the three cards back.</p></li>
<li class="response" id="model-perspective"><h3>Identify what you still need to ask or hear.</h3><span class="tag" id="tag-perspective" hidden>Unknown perspective</span><p>I have not heard Sam's account or how the change affected Sam.</p></li>
<li class="response" id="model-repair"><h3>Propose a next step to discuss.</h3><span class="tag" id="tag-repair" hidden>Proposed repair</span><p>I could ask Sam whether help restoring the layout would be useful and suggest checking together before a future change.</p></li>
<li class="response"><h3>Record a later agreement or observation.</h3><div class="open-answer" id="model-agreement" aria-label="Later agreement response, intentionally blank"></div></li></ol><p class="followup">Leave the last response blank until the conversation happens. A proposal does not establish that Sam agreed or that a repair worked.</p></section>
<section class="sheet" id="blank-sheet" aria-labelledby="blank-title" hidden><div class="sheet-title"><h2 id="blank-title">Your blank practice sheet</h2><p>Use your own words. These entries are separate from Rowan's model and remain while you change the teaching views.</p></div><div class="practice">
<label>Describe what you did:<textarea id="own-action"></textarea></label>
<label>Explain your thinking at that moment:<textarea id="own-then"></textarea></label>
<label>Describe your thinking now:<textarea id="own-now"></textarea></label>
<label>Record what you observed afterward:<textarea id="own-effect"></textarea></label>
<label>Identify what you still need to ask or hear:<textarea id="own-perspective"></textarea></label>
<label>Propose a next step to discuss:<textarea id="own-repair"></textarea></label>
<label>Record a later agreement or observation:<textarea id="own-agreement" aria-describedby="later-hint"></textarea></label></div><p id="later-hint">Leave the final field open until there is an actual agreement or observation to record.</p><div class="toolbar"><button id="reset" aria-expanded="false" aria-controls="confirmation">Clear practice entries</button></div><div class="confirm" id="confirmation" hidden><p>Clear all seven practice entries? The model, selected highlight and sentence comparison will stay unchanged.</p><div class="toolbar"><button id="keep">Keep my entries</button><button id="clear">Clear all seven entries</button></div></div><p id="practice-status" role="status" aria-live="polite">All seven practice fields are blank. Writing is not graded here.</p></section>
<section class="sheet" aria-labelledby="sentence-title"><h2 id="sentence-title">Which part of the sentence is supplied?</h2><div class="toolbar" aria-label="Sentence comparison"><button id="unsupported" aria-pressed="true">Unsupported sentence</button><button id="revised" aria-pressed="false">Revised sentence</button></div><div class="comparison"><h3 id="comparison-title">Unsupported sentence</h3><blockquote id="comparison-text">Sam was angry and forgave me.</blockquote><p id="comparison-reason">This invents a feeling and forgiveness. The supplied event says only that Sam put the three cards back; Sam's account has not been heard.</p></div><p>A learner can describe their own feelings. Another person's account still needs to be heard. Neither comparison changes the model answers or fills the later-agreement response.</p></section>
<footer>Practice typing lasts only in this open page and disappears on reload. Nothing is stored or submitted. Use the teacher's usual classroom materials for actual responses and later follow-up; this page supplies no score or judgment of a learner.</footer>
</main><script>
'use strict';
const byId=id=>document.getElementById(id),parts=['action','effect','perspective','repair'];
const partNotes={action:'Action: model response 1 names what Rowan did.',effect:'Observed effect: model response 4 records Sam putting the three cards back.',perspective:'Unknown perspective: model response 5 leaves room for Sam\'s account.',repair:'Proposed repair: model response 6 suggests a next step to discuss; no agreement is supplied.'};
let currentView='model',highlight='action',sentence='unsupported';
function renderView(){byId('model-sheet').hidden=currentView!=='model';byId('blank-sheet').hidden=currentView!=='blank';for(const key of ['model','blank'])byId(key+'-view').setAttribute('aria-pressed',String(currentView===key));}
function renderHighlight(){for(const key of parts){byId('highlight-'+key).setAttribute('aria-pressed',String(key===highlight));byId('model-'+key).classList.toggle('selected',key===highlight);byId('tag-'+key).hidden=key!==highlight;}byId('highlight-note').textContent=partNotes[highlight]+' The labeled highlight is shown in Model reflection.';}
function renderSentence(){const revised=sentence==='revised';for(const key of ['unsupported','revised'])byId(key).setAttribute('aria-pressed',String(key===sentence));byId('comparison-title').textContent=revised?'Revised sentence':'Unsupported sentence';byId('comparison-text').textContent=revised?'Sam put the three cards back. I have not heard how the change affected Sam. I can ask what would help.':'Sam was angry and forgave me.';byId('comparison-reason').textContent=revised?'The observation stays separate from the account still to hear and a proposed question. No feeling, forgiveness or completed repair is supplied.':'This invents a feeling and forgiveness. The supplied event says only that Sam put the three cards back; Sam\'s account has not been heard.';}
for(const key of ['model','blank'])byId(key+'-view').addEventListener('click',()=>{currentView=key;renderView();});
for(const key of parts)byId('highlight-'+key).addEventListener('click',()=>{highlight=key;renderHighlight();});
for(const key of ['unsupported','revised'])byId(key).addEventListener('click',()=>{sentence=key;renderSentence();});
const ownFields=['own-action','own-then','own-now','own-effect','own-perspective','own-repair','own-agreement'];
function closeConfirmation(){byId('confirmation').hidden=true;byId('reset').setAttribute('aria-expanded','false');}
for(const id of ownFields)byId(id).addEventListener('input',()=>{byId('practice-status').textContent="Practice entries changed. Review your current words.";});byId('reset').addEventListener('click',()=>{byId('confirmation').hidden=false;byId('reset').setAttribute('aria-expanded','true');byId('keep').focus();});
byId('keep').addEventListener('click',()=>{closeConfirmation();byId('practice-status').textContent='Kept all seven practice entries. The teaching views are unchanged.';byId('reset').focus();});
byId('clear').addEventListener('click',()=>{for(const id of ownFields)byId(id).value='';closeConfirmation();byId('practice-status').textContent='All seven practice entries were cleared. The model, highlight and sentence comparison are unchanged.';byId('own-action').focus();});
renderView();renderHighlight();renderSentence();
</script></body></html>