Rewrite a solution-first brief and inspect a proposed base that exceeds the available space

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>Pencil station · a functional design brief</title><style>*{box-sizing:border-box}body{margin:0;background:#edf3f5;color:#314b56;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:#66828e}.card{padding:20px;margin:18px 0;background:white;border:1px solid #bfd1d7;border-radius:6px}.brief{border-left:6px solid #578c8e;background:#eef7f5}.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 #688c99;border-radius:4px;background:white;cursor:pointer}button[aria-pressed=true]{background:#3c7280;color:white}button:focus-visible,textarea:focus-visible{outline:3px solid #b77a27;outline-offset:3px}.comparison{display:grid;grid-template-columns:1fr 1fr;gap:14px}.comparison>div{padding:16px;background:#f0f5f7}.conflict{background:#fff7e4;border-left:6px solid #bc8e37}.bar{display:flex;min-height:55px;margin:12px 0;font-weight:700}.available{width:80%;padding:12px;background:#d6e9dd;border:2px solid #5d8871}.concept{width:80%;padding:12px;background:#dce8f2;border:2px solid #648aab}.excess{width:20%;padding:12px 4px;background:#f1d1ba;border:2px solid #b86d36;text-align:center}.bar-label{font-weight:650;margin-top:18px}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 #90aab5;border-radius:4px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#80551c}footer{margin:24px 0;color:#647f8a}[hidden]{display:none!important}@media(max-width:560px){main{padding:12px}h1{font-size:28px}.card{padding:14px}.comparison{grid-template-columns:1fr}.available,.concept{padding:10px}.excess{padding:10px 2px}}</style></head><body><main><p class="eyebrow">HYPOTHETICAL CLASSROOM PENCIL STATION · BRIEF BEFORE FORM</p><h1>Define the job, then choose the object</h1><section class="card brief"><h2>Working functional brief</h2><p>Develop a way to organize 30 shared classroom pencils by the supplied short and long groups, so pupils can access one group without emptying the other. The product must fit within the available 20 × 15 cm table area. Confirm the teacher-approved materials before choosing a construction method. Propose and agree a way to check access to each group before making a final design choice.</p><p>Current separation method is not established. No actual pupil-use observations or prototype results are supplied.</p></section><section class="card"><h2>Inspect each statement's role</h2><div id="statements" class="tabs"></div><h3 id="classification">Need</h3><p id="statement">Pupils can find a short or long pencil without emptying the whole container.</p><p id="reason">Names the user's difficulty; it does not prescribe wood, rotation or a box.</p></section><div class="tabs"><button id="compare" type="button" aria-expanded="false" aria-controls="comparison">Compare the brief wording</button><button id="conflict" type="button" aria-expanded="false" aria-controls="conflict-view">Inspect the size conflict</button><button id="test" type="button" aria-expanded="false" aria-controls="test-view">Inspect proposed future check</button></div><section id="comparison" class="card" hidden><h2>Prescribed object versus open function</h2><div class="comparison"><div><h3>Solution first</h3><p>Build a rotating wooden pencil box.</p><p>Form and material are already chosen without showing why.</p></div><div><h3>Functional</h3><p>Organize accessible pencils by length group so either group can be used without emptying the other.</p><p>Dividers, separate holders or another arrangement remain possible.</p></div></div></section><section id="conflict-view" class="card conflict" hidden><h2>Preserve both proposed and available dimensions</h2><p>Available: 20 × 15 cm. Proposed base: 25 × 15 cm.</p><p id="difference">Width conflict: 25 − 20 = 5 cm beyond the available dimension.</p><p class="bar-label">Available width · 20 cm</p><div class="bar"><div class="available">20 cm</div></div><p class="bar-label">Proposed width · 25 cm</p><div class="bar"><div class="concept">20 cm portion</div><div class="excess">+5 cm</div></div><p>Can the concept meet the footprint, or must it change? Do not silently replace 25 with 20: resizing may affect access, capacity or construction.</p></section><section id="test-view" class="card" hidden><h2>Proposed criterion and future observation</h2><p><strong>Criterion:</strong> a pupil can locate one pencil from each length group without lifting the other group.</p><p><strong>Future method:</strong> agree a procedure, ask a pupil to attempt the task with a proposed design, then record what happened.</p><p><strong>Actual observation:</strong> not supplied. No criterion has been shown met.</p><p>Stage deliverables: brief, concept sketches and future test plan. No CAD model, manufacture or certification is provided.</p></section><section class="card"><h2>Your open brief and criterion</h2><div id="fields"></div><div class="tabs"><button id="build" type="button">Build brief 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 seven brief fields?</h3><div class="tabs"><button id="keep" type="button">Keep my brief</button><button id="clear" type="button">Clear typed brief</button></div></section><section id="review" class="card copy" hidden><h3>Your supplied design brief</h3><div id="copy"></div><p>No physical design, material approval or user-test result has been generated.</p></section></section><footer>Temporary brief notes only; no saved design record. Resolve the space and materials questions before treating a concept as feasible.</footer></main><script>'use strict';const $=id=>document.getElementById(id),statements=[['need','Need','Pupils can find a short or long pencil without emptying the whole container.','Names the user’s difficulty; it does not prescribe wood, rotation or a box.'],['function','Function','Organize accessible pencils by supplied length group.','States what the product must enable while leaving form open.'],['space','Firm constraint','Fit within the available 20 × 15 cm table area.','A supplied space limit, distinct from an optional preference.'],['materials','Unconfirmed materials condition','Use the teacher-approved available list; that list still needs confirmation.','Do not invent a teacher-approved material list.'],['time','Proposed allowance','Two lessons, subject to agreement.','This is not a confirmed production commitment or a feasibility result.'],['color','Optional consideration','Appearance or color where it helps the design and respects constraints.','Optional rather than a mandatory replacement for the function.'],['criterion','Proposed evaluation criterion','Locate one pencil from each length group without lifting the other group.','A task to agree and observe later; no actual result supplied.']];for(const[id,kind,text,reason]of statements){const b=document.createElement('button');b.type='button';b.id=id;b.textContent=kind;b.setAttribute('aria-pressed',String(id==='need'));b.addEventListener('click',()=>{for(const[key]of statements)$(key).setAttribute('aria-pressed',String(id===key));$('classification').textContent=kind;$('statement').textContent=text;$('reason').textContent=reason;});$('statements').append(b);}for(const[button,panel]of [['compare','comparison'],['conflict','conflict-view'],['test','test-view']])$(button).addEventListener('click',()=>{const open=$(panel).hidden;$(panel).hidden=!open;$(button).setAttribute('aria-expanded',String(open));});const fields=[['own-need','End users and need · required'],['own-function','Function without a prescribed form'],['constraints','Firm constraints and unconfirmed limits'],['considerations','Optional considerations'],['own-criterion','Proposed observable evaluation criterion'],['method','Future check method and evidence needed'],['notes','Other design questions']];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='Brief changed. Build again to review current wording.';});$('fields').append(l,t);}$('build').addEventListener('click',()=>{$('review').hidden=true;if(!$('own-need').value.trim()){$('status').textContent='Complete: end users and their need.';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='Brief 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='Seven brief fields cleared. Original dimensions and worked statement unchanged.';$('own-need').focus();});</script></body></html>