A fictional workshop-preparation SIPOC with two supplier/input pairs, two output/user pairs, and one missing-input review

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>Workshop preparation · SIPOC interfaces</title><style>*{box-sizing:border-box}body{margin:0;background:#f0f2ec;color:#3d4833;font:16px/1.65 system-ui,sans-serif}main{max-width:1100px;margin:auto;padding:28px}h1{font:700 clamp(30px,5vw,44px)/1.15 Georgia,serif;margin:10px 0 16px}h2{font-size:24px}h3{font-size:19px}section{padding:22px;background:#fff;border:1px solid #bac4ad;margin:22px 0}.boundary{padding:16px;background:#e7eedc;border-left:5px solid #78935f}.five{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.part{padding:14px;background:#eff3e7;border-top:5px solid #829b69;min-width:0}.part h3{margin:0 0 10px;font-size:18px}.record{padding:16px;background:#eff3e7;border-left:5px solid #829b69;margin:16px 0}.open{background:#fff1dd;border-color:#ad8242}.controls{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}button,textarea{font:inherit}button{min-height:44px;padding:10px 14px;border:1px solid #8c9b77;border-radius:4px;background:#fff;color:inherit;cursor:pointer}button[aria-pressed=true]{background:#4c633b;color:#fff}button:focus-visible,textarea:focus-visible{outline:3px solid #b17b2c;outline-offset:3px}label{display:block;font-weight:650;margin:14px 0 6px}textarea{display:block;width:100%;min-height:110px;padding:10px;border:1px solid #8e9e7e;background:#fff;color:inherit;resize:vertical}p,h1,h2,h3,label,button,li{overflow-wrap:break-word}footer{margin:26px 0}[hidden]{display:none!important}@media(max-width:800px){.five{grid-template-columns:1fr}.part{border-top:0;border-left:5px solid #829b69}}@media(max-width:600px){main{padding:16px}section{padding:16px}.controls button{flex:1 1 180px}}</style></head><body><main><h1>Who supplies the setup facts?</h1><p>Fictional volunteer-workshop preparation. These are proposed activities, with no actual request, room agreement or sent brief.</p><p class="boundary" id="boundary"><strong>Start:</strong> coordinator receives workshop request.<br><strong>End:</strong> facilitator receives preparation brief.</p>
<section><h2>The five connected parts</h2><div class="five"><article class="part"><h3>Suppliers</h3><p>Requester.<br>Room coordinator.</p></article><article class="part"><h3>Inputs</h3><p>Requester: topic, date, headcount.<br>Room coordinator: setup constraints.</p><p><strong>Actual constraints: TO CONFIRM.</strong></p></article><article class="part"><h3>Process</h3><p>Check request details → confirm setup needs → assemble brief → send brief for facilitator review.</p><p>Proposed activities only.</p></article><article class="part"><h3>Outputs</h3><p>Preparation brief: same requested session, date/headcount and setup needs, with confirmed details distinguished from open questions.</p><p>Unresolved-question list.</p></article><article class="part"><h3>Customers</h3><p>Facilitator uses the brief to prepare.</p><p>Requester uses the question list to clarify missing request facts.</p></article></div><p>Customer means a person who uses an output; no purchase is required.</p></section>
<section><h2>Inspect the interfaces</h2><div class="controls" role="group" aria-label="Relationship"><button id="supplier" type="button" aria-pressed="true">Supplier → Input</button><button id="customer" type="button" aria-pressed="false">Output → Customer</button></div><h3 id="relationship-title"></h3><p id="relationship" class="record"></p><p id="relationship-note"></p><div class="controls" role="group" aria-label="Interface proposal"><button id="incomplete" type="button" aria-pressed="true">Incomplete draft</button><button id="corrected" type="button" aria-pressed="false">Corrected interface proposal</button></div><h3 id="proposal-title"></h3><p id="proposal"></p><p id="constraints" class="record open">Actual constraints: TO CONFIRM. No room capacity, furniture availability or agreed layout is supplied.</p><p id="requirements">Proposed brief requirements: identify the same requested session and distinguish confirmed details from unresolved questions. Actual recipient acceptance is not supplied.</p></section>
<section><h2>Keep the scope boundary</h2><div class="controls" role="group" aria-label="Outside the process"><button id="before" type="button" aria-pressed="true">Before start</button><button id="after" type="button" aria-pressed="false">After end</button></div><h3 id="outside-title"></h3><p id="outside" class="record"></p><p>The stated start and end events remain the boundary when a detailed map is discussed.</p></section>
<section><h2>Your blank SIPOC and review questions</h2><div id="fields"></div><p><button id="reset" type="button">Clear my SIPOC notes</button></p><div id="confirmation" hidden><p>Clear all six fields? The teaching relationships, proposal and boundary selection stay unchanged.</p><div class="controls"><button id="clear" type="button">Clear typed notes</button><button id="keep" type="button">Keep typed notes</button></div></div><p id="status" role="status">Six fields start blank. Views preserve your writing.</p></section><footer>Notes last only in this open page and disappear on reload. No request collection, room booking, sending, approval, time optimization, export, network or storage occurs.</footer></main><script>(()=>{'use strict';const $=id=>document.getElementById(id);function relationship(customer){$('supplier').setAttribute('aria-pressed',String(!customer));$('customer').setAttribute('aria-pressed',String(customer));$('relationship-title').textContent=customer?'Output → Customer · who uses the result?':'Supplier → Input · who provides what is needed?';$('relationship').textContent=customer?'Preparation brief → facilitator, to prepare for the requested session. Unresolved-question list → requester, to clarify missing request facts.':'Requester → requested topic, date and headcount. Room coordinator → room setup constraints; actual details remain TO CONFIRM.';$('relationship-note').textContent='The requester appears on both sides for different reasons: supplying request facts and using the question list. The room coordinator supplies needed input.';}function proposal(corrected){$('incomplete').setAttribute('aria-pressed',String(!corrected));$('corrected').setAttribute('aria-pressed',String(corrected));$('proposal-title').textContent=corrected?'Corrected interface proposal · relationship added':'Incomplete draft · output has no named input source';$('proposal').textContent=corrected?'Add room coordinator → room setup constraints on the input side. This names whom to ask, not the facts they will supply. Actual constraints remain TO CONFIRM; no availability, capacity, furniture or layout is established.':'The brief promises setup needs, but this draft input side lists only the requester and request facts. Room coordinator and room setup constraints are omitted. “Confirm setup needs” in the process column cannot supply that missing interface.';}function boundary(after){$('before').setAttribute('aria-pressed',String(!after));$('after').setAttribute('aria-pressed',String(after));$('outside-title').textContent=after?'After end · running the workshop':'Before start · choosing the topic';$('outside').textContent=after?'Running the workshop happens after the facilitator receives the preparation brief. Delivery is outside this preparation process.':'Selecting the workshop topic happens before the coordinator receives the workshop request. Topic selection is outside this preparation process.';}for(const [id,fn,value]of [['supplier',relationship,false],['customer',relationship,true],['incomplete',proposal,false],['corrected',proposal,true],['before',boundary,false],['after',boundary,true]])$(id).addEventListener('click',()=>fn(value));for(const [id,label]of [['boundary','Process purpose, start/end and explicit exclusions'],['suppliers','Suppliers and the inputs each provides'],['process','Short sequence of broad process activities'],['outputs','Outputs, users and proposed requirements'],['unknowns','Missing facts and actual agreement status'],['review','Temporary review questions and next source to consult']]){const l=document.createElement('label');l.htmlFor='own-'+id;l.textContent=label;const t=document.createElement('textarea');t.id=l.htmlFor;$('fields').append(l,t);}$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('status').textContent='Kept all six SIPOC fields.';$('reset').focus();});$('clear').addEventListener('click',()=>{for(const t of document.querySelectorAll('textarea'))t.value='';$('confirmation').hidden=true;$('status').textContent='All six SIPOC fields were cleared. Teaching views and boundary are unchanged.';$('own-boundary').focus();});relationship(false);proposal(false);boundary(false);})();</script></body></html>