Inspect a version-selection chain and a competing explanation against the same evidence

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>5 Whys · inspect each evidence link</title><style>*{box-sizing:border-box}body{margin:0;background:#f4f1ea;color:#3d3930;font:16px/1.55 system-ui,sans-serif}main{max-width:980px;margin:auto;padding:24px}h1{font-size:32px;line-height:1.18}h2{font-size:23px}h3{font-size:19px}.eyebrow{letter-spacing:.05em;color:#746653}.card{padding:18px;background:#fff;border:1px solid #d2c9b7;border-radius:5px;margin:16px 0}.source{border-left:6px solid #846435}.chain{display:grid;grid-template-columns:1fr 1.3fr;gap:16px}.links{display:grid;gap:10px;align-content:start}.links button{text-align:left;border-left:5px solid #a5874c}.detail{background:#fff9e9;padding:18px;min-width:0}.toolbar{display:flex;flex-wrap:wrap;gap:9px;margin:16px 0}button,textarea{font:inherit;color:inherit}button{min-height:44px;padding:9px 13px;border:1px solid #887040;border-radius:4px;background:#fff;cursor:pointer}button[aria-pressed=true]{background:#6d5630;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #a6501d;outline-offset:3px}.status{font-weight:750;border-top:1px solid #cdbb91;padding-top:12px}.branch{border-left:6px solid #9d613b}.proposal{border-left:6px solid #496f62}label{display:block;font-weight:650;margin:14px 0 5px}textarea{width:100%;min-width:0;max-width:100%;min-height:95px;padding:10px;border:1px solid #95856b;border-radius:4px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#78471c}footer{margin:24px 0;color:#6f6657}[hidden]{display:none!important}@media(max-width:520px){main{padding:12px}h1{font-size:27px}.chain{grid-template-columns:1fr}.card,.detail{padding:14px}}</style></head><body><main><p class="eyebrow">FICTIONAL WORKSHOP HANDOUT · VERSION-SELECTION INVESTIGATION</p><h1>Check the link before asking another why</h1><p>The printed handout shows 10:00. Approved V3 shows 11:00. Inspect what the records establish and where a question remains open.</p><section class="card source"><h2>Four supplied evidence records</h2><p><strong>E1:</strong> Approved V3, recorded at 08:30, shows the workshop time as 11:00.</p><p><strong>E2:</strong> The print job at 09:00 used V2, which shows 10:00.</p><p><strong>E3:</strong> The print queue's input was a link to a folder containing V2 and V3.</p><p><strong>E4:</strong> The folder listing has no marker identifying the current version.</p><p>These are original teaching records. They do not report what an actual operator saw, understood or intended.</p></section><section class="card"><h2>Inspect a working explanation</h2><div class="chain"><nav class="links" aria-label="Working why links"><button id="link1" type="button" aria-pressed="true">1 · Why did the handout show 10:00?</button><button id="link2" type="button" aria-pressed="false">2 · Why was V2 available for selection?</button><button id="link3" type="button" aria-pressed="false">3 · What could make the choice ambiguous?</button><button id="link4" type="button" aria-pressed="false">4 · Why was there no version marker?</button></nav><section class="detail" aria-live="polite"><h3 id="question-out">Why did the printed handout show 10:00?</h3><p id="answer-out">The print job used V2 instead of approved V3.</p><p><strong>Evidence:</strong> <span id="evidence-out">E1 and E2 establish the version and time discrepancy.</span></p><p id="link-status" class="status">Established discrepancy. No conclusion about personal attention is supplied.</p><p><strong>Still to check:</strong> <span id="open-out">How the source file was selected for the print job.</span></p></section></div></section><button id="late-branch" type="button" aria-expanded="false" aria-controls="late-view">Check late-approval branch</button><section id="late-view" class="card branch" hidden><h2>Rejected branch · approval arrived after printing</h2><p>E1: V3 approved at 08:30. E2: printing at 09:00.</p><p>The supplied chronology conflicts with the late-approval explanation: approval is recorded before printing.</p><p>Keep this rejected branch and its evidence. It does not establish which version-selection action actually occurred.</p></section><div class="toolbar"><button id="test-toggle" type="button" aria-expanded="false" aria-controls="test-view">Show proposed isolated sample</button></div><section id="test-view" class="card proposal" hidden><h2>Proposed test · not an established fix</h2><p>Use an explicit source-version reference instead of a folder link in an isolated sample. Record which file is selected and whether it matches the intended source.</p><p>No sample has been run here. Even a later successful sample would not explain why the original marker was absent or prove a permanent fix.</p></section><section class="card"><h2>Add a proposed next why</h2><p>Keep the question and its separate evidence note together. Every local addition stays Unverified; adding text does not validate an explanation.</p><div id="fields"></div><div class="toolbar"><button id="add" type="button">Add proposed answer</button><button id="reset" type="button">Reset local work</button></div><section id="confirmation" hidden><h3>Clear all six fields and local proposed entries?</h3><div class="toolbar"><button id="keep" type="button">Keep my work</button><button id="clear" type="button">Clear local work</button></div></section><section id="own-review" class="card copy" hidden><h2>Local proposed chain · Unverified</h2><div id="own-links"></div><p>Review each entry against its actual evidence. No root cause has been diagnosed.</p></section></section><p id="status" role="status" aria-live="polite">Stop at an unanswered question. Five is not a required row count.</p><footer>Temporary worksheet only. Nothing is saved, no request is sent, and no operator motive or proven correction is inferred.</footer></main><script>(()=>{'use strict';const $=s=>document.querySelector(s),links=[['Why did the printed handout show 10:00?','The print job used V2 instead of approved V3.','E1 and E2 establish the version and time discrepancy.','Established discrepancy. No conclusion about personal attention is supplied.','How the source file was selected for the print job.'],['Why was V2 available for selection in that job?','The queue input pointed to a folder containing both versions.','E3 establishes the input location.','Observed input condition. How the file was selected still needs checking.','Ask the operator how the source file was selected.'],['What could have made the choice ambiguous?','The folder had no current-version marker.','E4 establishes that the folder listing lacks a current marker.','Hypothesis: the missing marker may have contributed. Its role in the actual selection is unconfirmed.','Discuss what the operator saw and how the current file should be identified.'],['Why was there no current-version marker?','Unknown.','No supplied record explains why the marker was absent.','Unknown. Do not invent an answer to complete five rows.','Ask the process owner how the current file should be identified.']];for(let n=0;n<4;n++)$('#link'+(n+1)).addEventListener('click',()=>{for(let i=1;i<=4;i++)$('#link'+i).setAttribute('aria-pressed',String(i===n+1));for(const[i,target]of ['question-out','answer-out','evidence-out','link-status','open-out'].entries())$('#'+target).textContent=links[n][i];});for(const[button,panel]of [['late-branch','late-view'],['test-toggle','test-view']])$('#'+button).addEventListener('click',()=>{const open=$('#'+panel).hidden;$('#'+panel).hidden=!open;$('#'+button).setAttribute('aria-expanded',String(open));});const fields=[['discrepancy','Your expected state and observed discrepancy'],['question','Proposed next why question'],['answer','Proposed working answer'],['evidence','Separate evidence note: source IDs or the evidence still needed'],['open','What remains unknown and who or what to consult'],['test','Proposed next test and what would be observed']],entries=[];for(const[id,label]of fields){const l=document.createElement('label'),f=document.createElement('textarea');l.htmlFor=id;l.textContent=label;f.id=id;f.addEventListener('input',()=>{$('#own-review').hidden=true;$('#status').textContent='Draft changed. The prior local review is hidden; add a new proposed entry to review the current wording.';});$('#fields').append(l,f);}$('#add').addEventListener('click',()=>{const missing=['question','answer','evidence'].filter(id=>!$('#'+id).value.trim());$('#own-review').hidden=true;if(missing.length){$('#status').textContent='Complete: '+missing.map(id=>fields.find(f=>f[0]===id)[1]).join(', ')+'.';return;}entries.push(Object.fromEntries(fields.map(([id])=>[id,$('#'+id).value])));$('#own-links').replaceChildren();for(const[n,entry]of entries.entries()){const article=document.createElement('article');article.className='card';const h=document.createElement('h3');h.textContent='Proposed entry '+(n+1)+' · Unverified';article.append(h);for(const[id,label]of fields){const p=document.createElement('p');p.textContent=label+': '+(entry[id].trim()||'Not supplied.');article.append(p);}$('#own-links').append(article);}$('#own-review').hidden=false;$('#status').textContent='Proposed answer added as Unverified. Original E1-E4 records and rejected branch are unchanged.';});$('#reset').addEventListener('click',()=>{$('#confirmation').hidden=false;$('#keep').focus();});$('#keep').addEventListener('click',()=>{$('#confirmation').hidden=true;$('#reset').focus();$('#status').textContent='Kept all six fields and local proposed entries.';});$('#clear').addEventListener('click',()=>{for(const[id]of fields)$('#'+id).value='';entries.length=0;$('#own-links').replaceChildren();$('#own-review').hidden=true;$('#confirmation').hidden=true;$('#discrepancy').focus();$('#status').textContent='All six fields and local proposed entries were cleared. Worked chain and source records are unchanged.';});})();</script></body></html>