Compare a form confirmation with the downstream roster and inspect the acceptance gap

HTML for this example

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>RB-2 acceptance packet · the downstream gap</title><style>*{box-sizing:border-box}body{margin:0;background:#edf2f7;color:#2d4258;font:16px/1.55 system-ui,sans-serif}main{max-width:980px;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:#657d93}.card{padding:20px;background:white;border:1px solid #c3d0df;border-radius:6px;margin:18px 0}.outcome{background:#294e6c;color:white}.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 #66839c;border-radius:4px;background:#fff;cursor:pointer}button[aria-pressed=true]{background:#386885;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #bf7c26;outline-offset:3px}.checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.check{padding:16px;background:#f1f6f8;border-top:6px solid #8b9eae;min-width:0}.check.mismatch{border-color:#b47736;background:#fff7e7}.check p{overflow-wrap:anywhere}.gap{border-left:6px solid #bc8c3d;background:#fff8e8}.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}.compare>div{padding:16px;background:#f0f4f7}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 #8fa5ba;border-radius:4px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#7b551e}footer{margin:24px 0;color:#5f788e}[hidden]{display:none!important}@media(max-width:600px){main{padding:12px}h1{font-size:28px}.card{padding:14px}.checks,.compare{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">FICTIONAL ROOM-BOOKING CHANGE · RB-2 / ISOLATED TEST / M17</p><h1>The form confirmation is only part of the outcome</h1><section class="card outcome"><h2>A1 · agreed user outcome</h2><p>The coordinator can change an existing booking, the reception roster shows the new room and time, and the old slot is released.</p><p>Representative user role: office coordinator. Starting fixture: meeting M17 at Room Pine, 09:00.</p></section><div class="tabs" aria-label="Acceptance scenario"><button id="u1" type="button" aria-pressed="true">U1 · change booking</button><button id="u2" type="button" aria-pressed="false">U2 · cancellation</button></div><section class="card"><h2 id="scenario">U1 · change M17 to Room Cedar, 10:00</h2><p id="state"><strong>Supplied state: A1 unmet.</strong> Hypothetical evidence, not a test executed by this page.</p><div class="checks"><section class="check"><h3>Form confirmation</h3><p><strong>Expected:</strong> <span id="form-expected">Room Cedar, 10:00.</span></p><p><strong>Observed:</strong> <span id="form-observed">Room Cedar, 10:00.</span></p></section><section class="check mismatch"><h3>Reception roster</h3><p><strong>Expected:</strong> <span id="roster-expected">Room Cedar, 10:00.</span></p><p><strong>Observed:</strong> <span id="roster-observed">Still Room Pine, 09:00.</span></p></section><section class="check"><h3>Old-slot release</h3><p><strong>Expected:</strong> <span id="slot-expected">Room Pine, 09:00 slot released.</span></p><p><strong>Observed:</strong> <span id="slot-observed"></span></p><p id="slot-note">No observation supplied. Do not inherit a pass from the form.</p></section></div><section class="card gap"><h3>Gap and business impact</h3><p id="impact">The roster mismatch leaves A1 unmet: reception would still consult the earlier room and time in this supplied result. Old-slot release is an additional evidence gap.</p><p id="next">Investigate the roster mismatch, complete the old-slot check and attempt cancellation before a complete acceptance recommendation.</p></section></section><div class="tabs"><button id="compare" type="button" aria-expanded="false" aria-controls="comparison">Compare feature and user outcome</button><button id="retest" type="button" aria-expanded="false" aria-controls="retest-view">Inspect original and retest record</button></div><section id="comparison" class="card" hidden><h2>Different scope, different claim</h2><div class="compare"><div><h3>Feature-only claim</h3><p>The save confirmation shows Cedar, 10:00.</p><p>That does not establish the roster update or old-slot release.</p></div><div><h3>Agreed business outcome A1</h3><p>Form, reception roster and old-slot consequence must all be examined.</p><p>Unattempted U2 is Not run, distinct from U1's observed unmet outcome.</p></div></div></section><section id="retest-view" class="card" hidden><h2>Retain the original mismatch</h2><p><strong>Original U1:</strong> RB-2, isolated test, M17. Form Cedar 10:00; roster Pine 09:00; no old-slot observation supplied.</p><p><strong>Retest build / fixture / reference:</strong> not supplied.</p><p><strong>Actual retest observations:</strong> not supplied.</p><p><strong>Actual decision-owner disposition:</strong> not supplied.</p><p>A later entry must retain its own build, fixture, observed results and reference. Opening this panel does not retest or sign off the change.</p></section><section class="card"><h2>Your supplied UAT record</h2><div id="fields"></div><div class="tabs"><button id="build" type="button">Build review copy</button><button id="reset" type="button">Reset typed work</button></div><p id="status" role="status"></p><section id="confirm" hidden><h3>Clear all thirteen UAT fields?</h3><div class="tabs"><button id="keep" type="button">Keep my record</button><button id="clear" type="button">Clear typed record</button></div></section><section id="review" class="card copy" hidden><h3>Your supplied acceptance review</h3><div id="copy"></div><p>No test has been executed or acceptance disposition inferred. Recommendation and actual decision-owner response remain separate.</p></section></section><footer>Temporary review text only. No booking connection, real test execution, release control, saved acceptance record or signoff.</footer></main><script>'use strict';const $=id=>document.getElementById(id);function scenario(id){const u1=id==='u1';$('u1').setAttribute('aria-pressed',String(u1));$('u2').setAttribute('aria-pressed',String(!u1));$('scenario').textContent=u1?'U1 · change M17 to Room Cedar, 10:00':'U2 · cancellation scenario · not attempted';$('state').textContent=u1?'Supplied state: A1 unmet. Hypothetical evidence, not a test executed by this page.':'Supplied state: Not run. No execution observations are supplied; this is not a tested failure.';for(const[k,a,b]of [['form-expected','Room Cedar, 10:00.','Cancellation outcome must be specified before the attempt.'],['roster-expected','Room Cedar, 10:00.','Downstream roster consequence must be specified before the attempt.'],['slot-expected','Room Pine, 09:00 slot released.','Slot consequence must be specified before the attempt.'],['form-observed','Room Cedar, 10:00.',''],['roster-observed','Still Room Pine, 09:00.','']])$(k).textContent=u1?a:b;$('slot-observed').textContent='';$('slot-note').textContent=u1?'No observation supplied. Do not inherit a pass from the form.':'No observation supplied: scenario not run.';$('impact').textContent=u1?'The roster mismatch leaves A1 unmet: reception would still consult the earlier room and time in this supplied result. Old-slot release is an additional evidence gap.':'No actual cancellation result or business impact is supplied. Keep Not run separate from U1’s unmet outcome.';$('next').textContent=u1?'Investigate the roster mismatch, complete the old-slot check and attempt cancellation before a complete acceptance recommendation.':'Prepare the repeatable cancellation scenario, expected consequences and evidence record, then perform it through the actual test process.';}for(const id of ['u1','u2'])$(id).addEventListener('click',()=>scenario(id));for(const[button,panel]of [['compare','comparison'],['retest','retest-view']])$(button).addEventListener('click',()=>{const open=$(panel).hidden;$(panel).hidden=!open;$(button).setAttribute('aria-expanded',String(open));});const fields=[['outcome','Agreed business/user outcome and reference · required'],['role','Representative user role'],['build-ref','Build and environment · required'],['fixture','Fixture and prerequisites'],['journey','Repeatable user journey'],['expected','Expected downstream results'],['observed','Actual observed results, or explicit Not run'],['evidence','Evidence references or explicit absence · required'],['gap','Acceptance gaps'],['impact-input','Business impact'],['retest-input','Retest build, fixture, evidence and reference'],['recommendation','Team recommendation'],['owner','Actual decision-owner response, 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;t.addEventListener('input',()=>{$('review').hidden=true;$('status').textContent='UAT notes changed. Build again to review current wording.';});$('fields').append(l,t);}$('build').addEventListener('click',()=>{const missing=['outcome','build-ref','evidence'].filter(id=>!$(id).value.trim());$('review').hidden=true;if(missing.length){$('status').textContent='Complete: '+missing.map(id=>({outcome:'agreed outcome','build-ref':'build/environment',evidence:'evidence reference or explicit absence'})[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);}$('review').hidden=false;$('status').textContent='Review copy assembled from supplied text; no acceptance decision made.';});$('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='Thirteen UAT fields cleared; original fictional packet unchanged.';$('outcome').focus();});</script></body></html>