Trace an equipment-request problem from business outcome to stakeholder needs and open solution choices
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>Studio requests · business requirements review</title><style>*{box-sizing:border-box}body{margin:0;background:#f1f3f5;color:#263b4b;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{color:#5b7186;letter-spacing:.05em}.card{padding:18px;background:#fff;border:1px solid #c3cfda;border-radius:5px;margin:16px 0}.need{border-left:6px solid #4f748c}.columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}.columns>div{padding:16px;background:#eef3f6}.columns>div:last-child{background:#f8f0e2}.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 #56758c;border-radius:4px;background:white;cursor:pointer}button[aria-pressed=true]{background:#31536f;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #b46b24;outline-offset:3px}.register{display:grid;grid-template-columns:1fr 1.4fr;gap:16px}.entries{display:grid;gap:9px;align-content:start}.entries button{text-align:left}.details{padding:18px;background:#edf3f5;min-width:0}label{display:block;font-weight:650;margin:14px 0 5px}textarea{width:100%;min-width:0;max-width:100%;padding:10px;min-height:95px;border:1px solid #8194a6;border-radius:4px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{color:#7d4b21;font-weight:650}footer{color:#607180;margin:24px 0}[hidden]{display:none!important}@media(max-width:520px){main{padding:12px}h1{font-size:27px}.columns,.register{grid-template-columns:1fr}.card,.details{padding:14px}}</style></head><body><main><p class="eyebrow">FICTIONAL COMMUNITY STUDIO · REQUIREMENTS DISCUSSION</p><h1>Find the need behind “build an app”</h1><section class="card need"><h2>Keep the original notes</h2><p><strong>N1:</strong> Build a mobile app.</p><p><strong>N2:</strong> Staff cannot tell which open requests await equipment details and which await scheduling confirmation.</p><p>No measured volume, delay baseline, budget or evidence choosing a mobile app is supplied.</p></section><button id="compare" type="button" aria-expanded="false" aria-controls="comparison">Compare feature and outcome wording</button><section id="comparison" class="card" hidden><h2>Change the review question</h2><div class="columns"><div><h3>Original solution request N1</h3><p>Build a mobile app.</p><p>Names a technology before establishing the process need.</p></div><div><h3>Proposed outcome B1</h3><p>At daily review, the coordinator can identify each open request's next action and the role responsible for it.</p><p>The need remains useful while app, form and existing-tool approaches are investigated.</p></div></div></section><section class="card"><h2>Trace the needs register</h2><div class="register"><nav class="entries" aria-label="Requirement entry"><button id="B1" type="button" aria-pressed="true">B1 · Daily-review outcome</button><button id="S1" type="button" aria-pressed="false">S1 · Requester need</button><button id="S2" type="button" aria-pressed="false">S2 · Coordinator need</button><button id="solutions" type="button" aria-pressed="false">Open solution choices</button><button id="T1" type="button" aria-pressed="false">T1 · Existing-request transition</button></nav><section class="details" aria-live="polite"><h3 id="entry-title">B1 · Daily-review outcome</h3><p><strong>Category:</strong> <span id="category">Business outcome</span></p><p id="entry-text">At daily review, the coordinator can identify each open request's next action and the role responsible for it.</p><p><strong>Connection:</strong> <span id="connection">Describes what the process needs to achieve, without choosing a technology.</span></p><p><strong>Still open:</strong> <span id="open-question">Agree the scenario set, reviewer, baseline and acceptable result.</span></p></section></div></section><section class="card"><h2>Scope boundary</h2><div class="columns"><div><h3>Included</h3><p>Request clarification and next-action visibility.</p></div><div><h3>Excluded</h3><p>Payments and equipment allocation.</p></div></div><p>Adding booking, payment or allocation capabilities requires a separate scope decision; it is not implied by B1.</p></section><section class="card"><h2>Open decision log</h2><dl><dt><strong>Which solution?</strong></dt><dd>Open. Compare feasible approaches with S1 and S2.</dd><dt><strong>What does each status mean?</strong></dt><dd>To agree. Define next action and responsible role for each state.</dd><dt><strong>How does existing work move over?</strong></dt><dd>T1 requires mapping. Review a sanitized set of current request scenarios.</dd><dt><strong>Payments or allocation?</strong></dt><dd>Excluded. Treat proposed additions as separate scope decisions.</dd></dl><h3>Proposed evidence for success</h3><p>Review a declared set of sanitized scenarios: one missing equipment details, another awaiting scheduling confirmation. Define the intended action and role for each before using it to review a proposed process.</p><p>Scenario set, reviewer, baseline and acceptable result remain to agree. No “50% faster” target or approval is supplied.</p></section><section class="card"><h2>Your blank BRD scaffold</h2><div id="fields"></div><div class="toolbar"><button id="build" type="button">Build review copy</button><button id="reset" type="button">Reset typed work</button></div><section id="confirmation" hidden><h3>Clear all ten typed fields?</h3><div class="toolbar"><button id="keep" type="button">Keep my text</button><button id="clear" type="button">Clear typed fields</button></div></section><section id="review" class="card copy" hidden><h2>Your supplied business requirements</h2><div id="review-content"></div><p>No technology choice, sign-off, target, budget or execution is inferred.</p></section></section><p id="status" role="status" aria-live="polite">Requirement categories organize the discussion. They do not grant approval.</p><footer>Typed work stays only in this open page. No decision is saved or sent and no external system is integrated.</footer></main><script>(()=>{'use strict';const $=s=>document.querySelector(s),entries={B1:['B1 · Daily-review outcome','Business outcome',"At daily review, the coordinator can identify each open request's next action and the role responsible for it.",'Describes what the process needs to achieve, without choosing a technology.','Agree the scenario set, reviewer, baseline and acceptable result.'],S1:['S1 · Requester need','Stakeholder need','The requester needs to see which equipment details remain to be supplied.','Supports B1 by helping the requester provide the information needed for the next action.','Agree which equipment details are needed and who clarifies missing information.'],S2:['S2 · Coordinator need','Stakeholder need','The coordinator needs open requests grouped by next action.','Supports the daily review described in B1. It does not require an app.','Agree the next action and responsible role for each request state.'],solutions:['Open solution choices','Approaches to investigate','Mobile app, shared request form, or adapted existing tool.','Compare the approaches against S1 and S2 before choosing solution capabilities.','No approach has been selected; no solution specification is supplied.'],T1:['T1 · Existing-request transition','Transition requirement','Map existing open requests into the agreed status meanings before switching processes.','A temporary need for the move from the current process to the new one.','Review sanitized current scenarios; do not let older ambiguous requests disappear during transition.']};$('#compare').addEventListener('click',()=>{const open=$('#comparison').hidden;$('#comparison').hidden=!open;$('#compare').setAttribute('aria-expanded',String(open));});for(const[id,row]of Object.entries(entries))$('#'+id).addEventListener('click',()=>{for(const key of Object.keys(entries))$('#'+key).setAttribute('aria-pressed',String(key===id));for(const[n,target]of ['entry-title','category','entry-text','connection','open-question'].entries())$('#'+target).textContent=row[n];});const fields=[['problem','Business problem and its evidence'],['outcome','Desired business outcome'],['needs','Stakeholders and their distinct needs'],['scope','Included and excluded scope'],['constraints','Known constraints and assumptions'],['alternatives','Solution approaches still under consideration'],['transition','Transition needs for existing work or data'],['evidence','Proposed success evidence, baseline and agreed target'],['decisions','Open questions and decision owners'],['notes','Temporary review notes and original request reference']];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',()=>{$('#review').hidden=true;$('#status').textContent='BRD wording changed. Build a new review; original N1 and N2 remain unchanged.';});$('#fields').append(l,f);}$('#build').addEventListener('click',()=>{const missing=fields.slice(0,4).filter(([id])=>!$('#'+id).value.trim());$('#review').hidden=true;if(missing.length){$('#status').textContent='Complete: '+missing.map(([,label])=>label).join(', ')+'.';return;}$('#review-content').replaceChildren();for(const[id,label]of fields){const h=document.createElement('h3'),p=document.createElement('p');h.textContent=label;p.textContent=$('#'+id).value.trim()||'To agree / not supplied.';$('#review-content').append(h,p);}$('#review').hidden=false;$('#status').textContent='Review copy built from supplied wording; solution choice and approvals are not inferred.';});$('#reset').addEventListener('click',()=>{$('#confirmation').hidden=false;$('#keep').focus();});$('#keep').addEventListener('click',()=>{$('#confirmation').hidden=true;$('#reset').focus();$('#status').textContent='Kept all ten typed fields.';});$('#clear').addEventListener('click',()=>{for(const[id]of fields)$('#'+id).value='';$('#review').hidden=true;$('#confirmation').hidden=true;$('#problem').focus();$('#status').textContent='All ten typed fields were cleared. Needs register, original notes and scope are unchanged.';});})();</script></body></html>