Compare technical-layer tasks with two outcome slices and inspect a concrete acceptance 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>Event-board stories · useful first slices</title><style>*{box-sizing:border-box}body{margin:0;background:#edf2f7;color:#30455a;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:#657c92}.card{padding:20px;margin:18px 0;background:white;border:1px solid #c4d0df;border-radius:6px}.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}button,textarea{font:inherit;color:inherit}button{min-height:44px;padding:10px 14px;background:white;border:1px solid #66839e;border-radius:4px;cursor:pointer}button[aria-pressed=true]{background:#386283;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #b87526;outline-offset:3px}.story{background:#ecf5f3;border-left:6px solid #668f83}.comparison,.events{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.comparison>div,.events>div{padding:16px;background:#f0f4f8}.question{background:#fff8e6;border-left:6px solid #bd913c}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 #92a5ba;border-radius:4px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#7d551d}footer{margin:24px 0;color:#627b92}[hidden]{display:none!important}@media(max-width:600px){main{padding:12px}h1{font-size:28px}.card{padding:14px}.comparison,.events{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">FICTIONAL CLUB EVENT BOARD · CARD / CONVERSATION / CONFIRMATION</p><h1>Would the visitor benefit if you stopped after this slice?</h1><div class="tabs" aria-label="Outcome story"><button id="s1" type="button" aria-pressed="true">S1 · usable upcoming list</button><button id="s2" type="button" aria-pressed="false">S2 · narrow by topic</button></div><section class="card story"><h2 id="story-title">S1 · upcoming published events</h2><p id="sentence">As a visitor, I want to see upcoming published events in date order so I can choose an available session.</p><h3>Usable increment</h3><p id="increment">The visitor can choose from an ordered list without a topic filter.</p><h3>Boundary</h3><p id="boundary">Include upcoming published-event list. Topic filtering stays in S2; date boundaries and time zones remain conversation questions.</p></section><button id="compare" type="button" aria-expanded="false" aria-controls="comparison">Compare splits</button><section id="comparison" class="card" hidden><h2>Implementation tasks support a user outcome</h2><div class="comparison"><div><h3>Technical layers</h3><p>Database table. API. Card styling.</p><p>Each can be necessary; none alone lets a visitor choose a session.</p></div><div><h3>S1</h3><p>A usable upcoming published-event list.</p><p>A visitor can benefit without the filter.</p></div><div><h3>S2</h3><p>Narrow the usable list by topic.</p><p>Supporting tasks belong under the relevant story.</p></div></div></section><section class="card"><h2>S1 confirmation example · as of November 1</h2><p>This authored fixture supplies a narrow agreed example, not delivered software or a complete date specification.</p><div class="events"><div><h3>E1 · Drawing</h3><p>November 4 · published</p></div><div><h3>E2 · Coding</h3><p>November 6 · published</p></div><div><h3>E3 · Clay</h3><p>October 1 · past</p></div></div><button id="fixture" type="button" aria-expanded="false" aria-controls="expected">Inspect the agreed expected list</button><section id="expected" class="card" hidden><h3>Expected example, not an executed test</h3><ol><li>E1 · Drawing · November 4</li><li>E2 · Coding · November 6</li></ol><p>Exclude E3: October 1 is past relative to this November 1 fixture.</p></section></section><section class="card question"><h2>Conversation still needed</h2><ul><li>How are time zones and multi-date events handled?</li><li>What is the precise boundary for an event ending today?</li><li>Which topic values and filter rules belong in S2?</li></ul><p>Drawing and Coding are event names here, not an agreed topic taxonomy. Conversation owner: not assigned. Story points, delivery commitments and actual test results: not supplied.</p></section><section class="card"><h2>Your separate story working record</h2><div id="fields"></div><div class="tabs"><button id="build" type="button">Build story 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 story fields?</h3><div class="tabs"><button id="keep" type="button">Keep my story</button><button id="clear" type="button">Clear typed story</button></div></section><section id="review" class="card copy" hidden><h3 id="own-story"></h3><div id="copy"></div><p>Planning review only. No story quality score, implementation completion or acceptance result has been inferred.</p></section></section><footer>Temporary planning text only; nothing is saved or connected to a project system. Keep the example and unresolved boundaries beside the card.</footer></main><script>'use strict';const $=id=>document.getElementById(id);for(const id of ['s1','s2'])$(id).addEventListener('click',()=>{const first=id==='s1';$('s1').setAttribute('aria-pressed',String(first));$('s2').setAttribute('aria-pressed',String(!first));$('story-title').textContent=first?'S1 · upcoming published events':'S2 · topic filtering of the usable list';$('sentence').textContent=first?'As a visitor, I want to see upcoming published events in date order so I can choose an available session.':'As a visitor, I want to filter that usable list by topic so I can narrow the sessions relevant to me.';$('increment').textContent=first?'The visitor can choose from an ordered list without a topic filter.':'The visitor can narrow an already useful list. This builds on S1 rather than replacing its usable outcome.';$('boundary').textContent=first?'Include upcoming published-event list. Topic filtering stays in S2; date boundaries and time zones remain conversation questions.':'Add topic filtering to S1. Topic values and exact filter rules remain undefined; the fixture event names do not settle them.';});for(const[button,panel]of [['compare','comparison'],['fixture','expected']])$(button).addEventListener('click',()=>{const open=$(panel).hidden;$(panel).hidden=!open;$(button).setAttribute('aria-expanded',String(open));});const fields=[['role','User role · required'],['goal','Useful user goal · required'],['benefit','Benefit to the user · required'],['context','Product context and assumptions'],['questions','Conversation questions'],['owner','Conversation owner, if assigned'],['examples','Exact fixture and expected confirmation examples'],['boundary-input','Included scope and later work'],['tasks','Supporting implementation tasks'],['notes','Other planning notes']];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='Story notes changed. Build again to review current words.';});$('fields').append(l,t);}$('build').addEventListener('click',()=>{const missing=['role','goal','benefit'].filter(id=>!$(id).value.trim());$('review').hidden=true;if(missing.length){$('status').textContent='Complete: '+missing.map(id=>({role:'user role',goal:'useful goal',benefit:'user benefit'})[id]).join(', ')+'.';return;}$('own-story').textContent='As '+$('role').value.trim()+', I want '+$('goal').value.trim()+' so '+$('benefit').value.trim()+'.';$('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='Story 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 story fields cleared. Worked story and original fixture unchanged.';$('role').focus();});</script></body></html>