Turn a handoff event into a bounded lesson and compare its use in two new contexts

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>Lesson L1 · decide where it applies</title><style>*{box-sizing:border-box}body{margin:0;background:#f3f1e9;color:#394438;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:#68745a}.card{padding:20px;margin:18px 0;background:#fff;border:1px solid #cbd1bb;border-radius:5px}.evidence{border-left:6px solid #7a854b}.parts{display:grid;grid-template-columns:1fr 1fr;gap:16px}.parts>div{padding:16px;background:#f3f5eb}.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}button,textarea,select{font:inherit;color:inherit}button{min-height:44px;padding:10px 14px;border:1px solid #738353;border-radius:4px;background:white;cursor:pointer}button[aria-pressed=true]{background:#5f743f;color:white}button:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b77827;outline-offset:3px}.reuse{background:#fff8e6;border-left:5px solid #bd913e}label{display:block;font-weight:650;margin:14px 0 6px}textarea,select{width:100%;min-width:0;max-width:100%;padding:10px;border:1px solid #969f80;border-radius:4px;background:white}textarea{min-height:95px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#7a551f}footer{margin:24px 0;color:#657259}[hidden]{display:none!important}@media(max-width:560px){main{padding:12px}h1{font-size:28px}.card{padding:14px}.parts{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">FICTIONAL POSTER HANDOFF · LESSON L1</p><h1>Give the next team a condition to check</h1><section class="card evidence"><h2>The original record</h2><p><strong>E1:</strong> Approved V3 has the title “Room B.”</p><p><strong>P1:</strong> The print packet contains V2 with the title “Room A.”</p><p><strong>E2:</strong> A review note identifies the mismatch before printing.</p><p>The mismatch was caught. These records do not explain why V2 was selected.</p></section><button id="compare" type="button" aria-expanded="false" aria-controls="comparison">Compare event-only and reusable note</button><section id="comparison" class="card" hidden><h2>Keep the condition with the principle</h2><div class="parts"><div><h3>Event-only</h3><p>Fix the version issue.</p><p>The next team cannot tell which condition this addresses.</p></div><div><h3>Candidate lesson L1</h3><p>When a handoff contains several versions, identify the exact source version beside the review item instead of relying on the folder name.</p><p>A condition and a principle to examine, not a proven prevention result.</p></div></div></section><section class="card"><h2>The complete lesson record</h2><div class="parts"><div><h3>Context and event</h3><p>A poster handoff contains more than one source version. P1 contains V2; approved V3 differs. E2 catches it before printing.</p></div><div><h3>Candidate lesson</h3><p id="lesson">When a handoff contains several versions, identify the exact source version beside the review item instead of relying on the folder name.</p></div><div><h3>Proposed recommendation</h3><p>Add a source-version field to the next handoff checklist and rehearse comparison with the supplied item.</p></div><div><h3>Limit</h3><p>Selection cause is not established. The proposed change has not been shown to prevent a later mismatch.</p></div></div></section><section class="card reuse"><h2>Check applicability in the next project</h2><div class="tabs"><button id="case-a" type="button" aria-pressed="true">Case A · multiple versions</button><button id="case-b" type="button" aria-pressed="false">Case B · fixed single source</button></div><h3 id="case-title">Case A · multiple versioned source files</h3><p id="case-fit">This resembles L1's multiple-version condition. Examine the exact reference the reviewer can access.</p><p id="case-question">Which reference identifies the approved source, and how would the reviewer rehearse that comparison?</p><button id="proposal" type="button" aria-expanded="false" aria-controls="proposed">Inspect proposed checklist edit</button><section id="proposed" class="card" hidden><h3>Proposal, not an adopted change</h3><p>Proposed field: “Exact source version/reference to compare with this review item.”</p><p>Rehearse how the reviewer finds the reference and checks the item. Suitability depends on the next project's actual handoff.</p></section><p><strong>Actual adoption:</strong> not supplied.</p><p><strong>Later result:</strong> not supplied.</p></section><section class="card"><h2>Your reusable lesson and reuse review</h2><p>Leave adoption and results blank until actual records exist. Recording a proposed action does not update a team's checklist.</p><div id="fields"></div><label for="decision">Proposed reuse decision</label><select id="decision"><option>Investigate</option><option>Apply</option><option>Adapt</option><option>Leave unused</option></select><div class="tabs"><button id="build" type="button">Build lesson 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 twelve lesson-review fields?</h3><div class="tabs"><button id="keep" type="button">Keep my note</button><button id="clear" type="button">Clear typed note</button></div></section><section id="review" class="card copy" hidden><h3>Your supplied lesson review</h3><div id="copy"></div><p id="decision-copy"></p><p>User-proposed reuse only. No checklist update, adoption or benefit has been inferred.</p></section></section><footer>Temporary note only; nothing is saved or applied. Take the condition and its evidence to the people who would use the lesson.</footer></main><script>'use strict';const $=id=>document.getElementById(id);for(const[button,panel]of [['compare','comparison'],['proposal','proposed']])$(button).addEventListener('click',()=>{const open=$(panel).hidden;$(panel).hidden=!open;$(button).setAttribute('aria-expanded',String(open));});for(const id of ['a','b'])$('case-'+id).addEventListener('click',()=>{for(const key of ['a','b'])$('case-'+key).setAttribute('aria-pressed',String(key===id));$('case-title').textContent=id==='a'?'Case A · multiple versioned source files':'Case B · fixed single source file';$('case-fit').textContent=id==='a'?"This resembles L1's multiple-version condition. Examine the exact reference the reviewer can access.":'The supplied case has not shown the same multiple-version selection problem. Do not add L1 automatically; a review is still needed.';$('case-question').textContent=id==='a'?'Which reference identifies the approved source, and how would the reviewer rehearse that comparison?':'What actual handoff condition would justify applying, adapting or leaving L1 unused?';});const fields=[['context','Original project and context · required'],['evidence','Event and source evidence IDs · required'],['own-lesson','Candidate lesson and conditions · required'],['limits','Known limits and cause questions'],['audience','Intended audience'],['question','Next-project context and applicability question'],['recommendation','Proposed recommendation'],['owner','Actual reuse owner, if supplied'],['reason','Reason for proposed reuse decision'],['adoption','Actual adoption record, only if supplied'],['result','Later evidence or result, only if supplied']];for(const[id,label]of fields){const l=document.createElement('label'),t=document.createElement('textarea');l.htmlFor=id;l.textContent=label;t.id=id;$('fields').append(l,t);}const ids=fields.map(x=>x[0]).concat('decision');for(const id of ids)$(id).addEventListener('input',()=>{$('review').hidden=true;$('status').textContent='Lesson notes changed. Build again before using the review.';});$('build').addEventListener('click',()=>{const missing=['context','evidence','own-lesson'].filter(id=>!$(id).value.trim());$('review').hidden=true;if(missing.length){$('status').textContent='Complete: '+missing.map(id=>({context:'context',evidence:'event/evidence','own-lesson':'lesson/conditions'})[id]).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);}$('decision-copy').textContent='Proposed reuse decision: '+$('decision').value;$('review').hidden=false;$('status').textContent='Local lesson 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='';$('decision').value='Investigate';$('review').hidden=true;$('confirm').hidden=true;$('status').textContent='Twelve lesson-review fields reset. Original evidence and selected case are unchanged.';$('context').focus();});</script></body></html>