A gallery-information WBS with four scope items, a draft overlap, and a corrected hierarchy

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>Gallery kit WBS · hierarchy and scope boundaries</title><style>
*{box-sizing:border-box}body{margin:0;background:#f3f0e8;color:#343f34;font:16px/1.6 system-ui,sans-serif}main{max-width:1060px;margin:auto;padding:28px}h1{font:700 clamp(31px,5vw,48px)/1.12 Georgia,serif;margin:12px 0 18px}h2{font-size:24px;line-height:1.3}h3{font-size:19px}p{margin:8px 0 16px}p,h1,h2,h3,label,button,dd,li{overflow-wrap:anywhere}div,section,article{min-width:0}.eyebrow{font-size:16px;letter-spacing:.08em;font-weight:750}.panel{padding:22px;margin:22px 0;background:#fffefa;border:1px solid #c4c7b3;border-radius:8px}.scope{padding:20px;background:#465c3e;color:white;border-radius:8px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.inventory{background:#f0f4e6;border-left:4px solid #7d9256;padding:16px;margin:12px 0}.inventory h3{margin:0 0 6px}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0}button,textarea{font:inherit}button{min-height:44px;padding:10px 15px;color:inherit;background:white;border:1px solid #6c8052;border-radius:5px;cursor:pointer}button[aria-pressed="true"]{background:#465c3e;color:white}button:hover{box-shadow:inset 0 0 0 1px #465c3e}button:focus-visible,textarea:focus-visible{outline:3px solid #b25b25;outline-offset:3px}.tree{list-style:none;padding:0;margin:20px 0}.tree ul{list-style:none;border-left:3px solid #9eac87;margin:12px 0 12px 10px;padding-left:18px}.tree li{margin:14px 0}.node{background:#eef2e3;border:1px solid #b7c5a5;border-radius:5px;padding:14px}.node strong,.node span{display:block}.leaf{background:#fffdf4}.leaf button{width:100%;text-align:left;background:#eef2e3}.kind{font-size:16px;font-weight:750;letter-spacing:.04em;color:#566844}.note{padding:16px;background:#fff0d5;border-left:5px solid #b38142}dl{margin:0}dt{font-weight:750;margin:14px 0 5px}dd{margin:0 0 16px}label{display:block;font-weight:650;margin:14px 0 6px}textarea{display:block;width:100%;min-width:0;min-height:130px;padding:10px;border:1px solid #81916c;border-radius:4px;color:inherit;background:white;resize:vertical}footer{border-top:1px solid #c4c7b3;margin-top:26px;padding-top:18px}[hidden]{display:none!important}@media(max-width:650px){main{padding:16px}.panel{padding:16px}.grid{grid-template-columns:1fr}.tree ul{margin-left:4px;padding-left:12px}.toolbar button{flex:1 1 140px}}
</style></head><body><main><p class="eyebrow">ORIGINAL FICTIONAL GALLERY KIT · DELIVERABLE HIERARCHY</p><h1>Give every agreed output one place.</h1><p>The draft counts exhibit labels twice and leaves out the docent brief. Review the scope mapping, then read why collecting source files is different from creating their content.</p><div class="scope">No actual gallery, approved materials or finished files are represented. Installation, ticketing, website publication and new exhibit research are excluded. Real exhibit content, approval authority and file specifications remain to be supplied.</div>
<section class="panel" aria-labelledby="inventory-title"><h2 id="inventory-title">Supplied four-output inventory</h2><div class="grid"><article class="inventory"><h3>G1 · Visitor guide</h3><p>The guide's text and layout.</p></article><article class="inventory"><h3>G2 · Exhibit labels</h3><p>Label text and layout for the supplied exhibits.</p></article><article class="inventory"><h3>G3 · Docent brief</h3><p>The host's introduction and visitor-question notes.</p></article><article class="inventory"><h3>G4 · Production handoff</h3><p>The agreed source files and a version index for the kit.</p></article></div><p>A count against this inventory does not establish that a real gallery project has a complete scope.</p></section>
<section class="panel" aria-labelledby="tree-title"><h2 id="tree-title">Read the parent and child outputs</h2><div class="toolbar" role="group" aria-label="WBS teaching structure"><button id="draft" type="button" aria-pressed="false">Draft structure</button><button id="corrected" type="button" aria-pressed="true">Corrected structure</button></div><h3 id="structure-title">Corrected structure</h3><ul class="tree"><li><div class="node"><span class="kind">ROOT OUTPUT</span><strong>1 · Gallery information kit</strong></div><ul><li><div class="node"><span class="kind">BRANCH</span><strong>1.1 · Visitor information</strong></div><ul><li class="node leaf"><span class="kind">WORK PACKAGE · G1</span><strong>1.1.1 · Visitor guide</strong></li><li class="node leaf"><span class="kind">WORK PACKAGE · G2</span><strong>1.1.2 · Exhibit labels</strong></li></ul></li><li><div class="node"><span class="kind">BRANCH</span><strong>1.2 · Host and production handoff</strong></div><ul><li id="changing-leaf" class="node leaf"><span id="changing-scope" class="kind">WORK PACKAGE · G3</span><strong id="changing-name">1.2.1 · Docent brief</strong></li><li class="node leaf"><span class="kind">WORK PACKAGE · G4</span><button id="dictionary" type="button" aria-expanded="false" aria-controls="dictionary-content">1.2.2 · Production handoff · Read dictionary</button></li></ul></li></ul></li></ul><p>Branches group related outputs. Leaves name what will be produced. Activities such as drafting, reviewing or sending files belong in the later schedule.</p><button id="compare" type="button" aria-expanded="false" aria-controls="comparison">Compare inventory</button><div id="comparison" hidden><h3 id="comparison-title"></h3><ul id="findings"></ul><p class="note">A repeated scope ID is detectable by count. Different names can still hide overlapping work; review boundaries with the scope owner rather than treating a count as universal completeness.</p></div><p id="status" role="status" aria-live="polite">Corrected structure shown. Inventory comparison has not been requested.</p></section>
<section id="dictionary-content" class="panel" aria-labelledby="dictionary-title" hidden><h2 id="dictionary-title">Work-package dictionary · 1.2.2 Production handoff</h2><dl><dt>WBS ID and name</dt><dd>1.2.2 · Production handoff</dd><dt>Scope reference</dt><dd>G4</dd><dt>Output</dt><dd>A collected set of agreed kit source files and an index identifying each file and version.</dd><dt>Includes</dt><dd>Assemble the agreed guide, label, and docent-brief source versions; prepare the version index.</dd><dt>Excludes</dt><dd>Creating or revising their content, producing a second label set, printing, and website publication.</dd><dt>Review condition</dt><dd>The reviewer can match each indexed file/version to the agreed handoff specification. Actual reviewer and specification must be confirmed.</dd><dt>Inputs</dt><dd>The agreed source versions from G1, G2, and G3, plus the handoff specification.</dd></dl><p class="note">G4 receives G2's source files as inputs. It does not create another label-content output. Inputs can cross branches while the output boundary stays distinct.</p></section>
<section class="panel" aria-labelledby="blank-title"><h2 id="blank-title">Blank hierarchy and dictionary scaffold</h2><p>Use your actual scope owner and inventory. Separate output boundaries from activities, dates and responsibility assignments.</p><div class="grid" id="blank-fields"></div><div class="toolbar"><button id="reset" type="button">Clear my scope notes</button></div><p id="blank-status" role="status" aria-live="polite">Your six scaffold fields start blank. Structure and dictionary changes preserve typing.</p><div id="confirmation" hidden><p>Clear all six own-scope fields? The teaching inventory, selected structure and dictionary stay unchanged.</p><div class="toolbar"><button id="confirm-reset" type="button">Clear typed scope</button><button id="keep" type="button">Keep typed scope</button></div></div></section><footer>Notes are temporary in this open page; reloading clears them. No scope approval, schedule, project-completion record or finished file is created. Nothing is stored, sent or exported.</footer></main>
<script>(()=>{'use strict';const $=id=>document.getElementById(id);let state='corrected';const inventory=['G1','G2','G3','G4'];function leaves(){return [{id:'1.1.1',scope:'G1'},{id:'1.1.2',scope:'G2'},{id:'1.2.1',scope:state==='draft'?'G2':'G3'},{id:'1.2.2',scope:'G4'}];}function choose(next){state=next;$('draft').setAttribute('aria-pressed',String(state==='draft'));$('corrected').setAttribute('aria-pressed',String(state==='corrected'));$('structure-title').textContent=state==='draft'?'Draft structure':'Corrected structure';$('changing-scope').textContent='WORK PACKAGE · '+(state==='draft'?'G2':'G3');$('changing-name').textContent='1.2.1 · '+(state==='draft'?'Label package':'Docent brief');$('comparison').hidden=true;$('compare').setAttribute('aria-expanded','false');$('status').textContent=(state==='draft'?'Draft':'Corrected')+' structure shown. Previous inventory findings cleared; compare this selected structure.';}$('draft').addEventListener('click',()=>choose('draft'));$('corrected').addEventListener('click',()=>choose('corrected'));$('compare').addEventListener('click',()=>{$('findings').replaceChildren();const messages=[];for(const scope of inventory){const mapped=leaves().filter(l=>l.scope===scope);if(!mapped.length)messages.push('Missing '+scope+': no leaf maps to this supplied output.');else if(mapped.length>1)messages.push('Duplicate '+scope+': mapped by '+mapped.map(l=>l.id).join(' and ')+'.');else messages.push(scope+' maps once: '+mapped[0].id+'.');}for(const text of messages){const li=document.createElement('li');li.textContent=text;$('findings').append(li);}$('comparison-title').textContent=(state==='draft'?'Draft':'Corrected')+' mapping against G1–G4';$('comparison').hidden=false;$('compare').setAttribute('aria-expanded','true');$('status').textContent=state==='draft'?'Draft comparison: duplicate G2 and missing G3. No scope was automatically changed.':'Corrected comparison: G1–G4 each map once under the supplied inventory. This does not prove real-project completeness.';});$('dictionary').addEventListener('click',()=>{const open=$('dictionary-content').hidden;$('dictionary-content').hidden=!open;$('dictionary').setAttribute('aria-expanded',String(open));$('dictionary').textContent=open?'1.2.2 · Production handoff · Hide dictionary':'1.2.2 · Production handoff · Read dictionary';});for(const [id,title]of [['scope','Project scope, exclusions and actual scope owner'],['inventory','Agreed output inventory · stable scope IDs and boundaries'],['hierarchy','Hierarchy · WBS IDs, parent IDs and output names'],['dictionary','Package dictionary · output, includes and excludes'],['review','Inputs, actual reviewer and review condition'],['notes','Local scope questions and proposed boundary changes']]){const box=document.createElement('div');const label=document.createElement('label');label.htmlFor='own-'+id;label.textContent=title;const field=document.createElement('textarea');field.id=label.htmlFor;box.append(label,field);$('blank-fields').append(box);}$('reset').addEventListener('click',()=>{$('confirmation').hidden=false;$('keep').focus();});$('keep').addEventListener('click',()=>{$('confirmation').hidden=true;$('blank-status').textContent='Kept your six scope fields.';$('reset').focus();});$('confirm-reset').addEventListener('click',()=>{for(const field of document.querySelectorAll('textarea'))field.value='';$('confirmation').hidden=true;$('blank-status').textContent='Your scope fields were cleared. The supplied inventory, structure and dictionary view are unchanged.';$('own-scope').focus();});})();</script></body></html>