Inspect datum-relative judgments, check the counts, and develop a hybrid without inventing its ratings

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>Desk sign concepts · a datum-relative review</title><style>*{box-sizing:border-box}body{margin:0;background:#f2f1ec;color:#41443b;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:#77806a}.card{padding:20px;margin:18px 0;background:white;border:1px solid #ccd0bf;border-radius:6px}.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0}button,textarea,select{font:inherit;color:inherit}button{min-height:44px;padding:10px 14px;border:1px solid #7e8b66;background:white;border-radius:4px;cursor:pointer}button[aria-pressed=true]{background:#64784a;color:white}button:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #b97c29;outline-offset:3px}.criterion{padding:16px;background:#f2f6ed;margin:12px 0}.criterion h3{margin-top:0}.cells{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cells button{text-align:left}.cells strong{display:block}.detail{border-left:6px solid #a58b43;background:#fff9e6}.counts{display:grid;grid-template-columns:1fr 1fr;gap:14px}.counts>div{padding:16px;background:#eef5f0}.unknown{border-left:6px solid #7c9693;background:#edf5f5}label{display:block;font-weight:650;margin:14px 0 6px}textarea,select{width:100%;max-width:100%;min-width:0;padding:10px;border:1px solid #9aa88b;border-radius:4px;background:white}textarea{min-height:95px;resize:vertical}.copy p{white-space:pre-wrap;overflow-wrap:anywhere}#status{font-weight:650;color:#7b561d}footer{margin:24px 0;color:#747d66}[hidden]{display:none!important}@media(max-width:560px){main{padding:12px}h1{font-size:28px}.card{padding:14px}.cells,.counts{grid-template-columns:1fr}}</style></head><body><main><p class="eyebrow">FICTIONAL DESK SIGN HOLDERS · CONCEPT SCREENING</p><h1>Compare with A, then ask what to develop next</h1><section class="card"><h2>Concepts and mandatory requirement</h2><p><strong>A · datum:</strong> flat, wide base with fixed sign slot.</p><p><strong>B:</strong> hinged base folds flat and permits angle adjustment.</p><p><strong>C:</strong> narrow, heavy base with removable clip.</p><p><strong>Mandatory hold-sign requirement: unverified for A, B, C and proposed D.</strong> Matrix preferences do not settle whether a concept supports the intended sign.</p><p>Marks are supplied illustrative judgments, not prototype test results. + means better than A, S same, − worse.</p></section><section class="card"><h2>Select a datum-relative cell</h2><div id="matrix"></div><section class="card detail" aria-live="polite"><h3 id="cell-title">B · packs flat · + relative to A</h3><p id="definition">Criterion: collapses into a flatter shape for storage.</p><p id="reason">The hinged base folds. No amount of storage saving has been measured.</p></section></section><div class="tabs"><button id="count" type="button" aria-expanded="false" aria-controls="counts">Check supplied mark counts</button><button id="hybrid" type="button" aria-expanded="false" aria-controls="hybrid-view">Inspect proposed D</button><button id="numeric" type="button" aria-expanded="false" aria-controls="numeric-view">Relative mark or numerical rating?</button></div><section id="counts" class="card" hidden><h2>Count summary · not a winner</h2><div class="counts"><div><h3>B</h3><p id="b-count"></p></div><div><h3>C</h3><p id="c-count"></p></div></div><p>Net means number of pluses minus minuses. It neither measures benefit magnitude nor establishes a proven winner.</p></section><section id="hybrid-view" class="card unknown" hidden><h2>D · folding hinge with removable clip</h2><p>Proposed combination of B's hinge and C's clip. B and C's original marks remain unchanged.</p><ul><li>Packs flat: Unknown.</li><li>Angle adjustment: Unknown.</li><li>Desk footprint: Unknown.</li><li>Setup steps: Unknown.</li></ul><p>Clarify how the clip attaches, how many setup actions are needed, and whether the holder supports the sign. Stability remains unknown. Do not copy favorable B/C ratings into D.</p></section><section id="numeric-view" class="card" hidden><h2>Direction is different from magnitude</h2><p>“Packs flatter” identifies a relative direction. It does not measure how much space is saved. A numerical rating would ask reviewers to estimate a magnitude or defined scale, which is a different judgment.</p><p>Keep the comparison reason beside the symbol before deciding what method fits the review.</p></section><section class="card"><h2>Blank working comparison row</h2><p>Name the datum and define what better means before proposing a mark. Add further rows in your maintained review; this temporary row never changes the fixed B/C exercise.</p><div id="fields"></div><label for="own-mark">Proposed relative mark</label><select id="own-mark"><option>Unknown</option><option>+</option><option>S</option><option>−</option></select><div class="tabs"><button id="build" type="button">Build comparison 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 comparison fields?</h3><div class="tabs"><button id="keep" type="button">Keep my comparison</button><button id="clear" type="button">Clear typed row</button></div></section><section id="review" class="card copy" hidden><h3 id="own-title"></h3><div id="copy"></div><p>User-proposed judgment only. No prototype result, feasibility or mandatory requirement has been verified.</p></section></section><footer>Temporary concept discussion only. No CAD, prototype test, saved design record or certification. Counts describe the supplied exercise.</footer></main><script>'use strict';const $=id=>document.getElementById(id),rows=[['packs','Packs flat','Collapses into a flatter shape for storage.','+','The hinged base folds. No amount of storage saving has been measured.','S','No folding feature is proposed for C.'],['angle','Angle adjustment','Sign angle can change without modifying the holder.','+','The hinge permits angle adjustment.','S','No angle adjustment is proposed for C.'],['footprint','Desk footprint','Base occupies less desk surface.','S','No smaller footprint is proposed for B.','+','A narrower base is proposed for C.'],['setup','Setup steps','Fewer separate actions to put the sign in place.','−','Unfolding and setting the angle add setup work.','−','Attaching the separate clip adds setup work.']];for(const[id,title,definition,b,br,c,cr]of rows){const section=document.createElement('section');section.className='criterion';const h=document.createElement('h3');h.textContent=title;const p=document.createElement('p');p.textContent=definition;const cells=document.createElement('div');cells.className='cells';for(const[concept,mark,reason]of [['b',b,br],['c',c,cr]]){const button=document.createElement('button');button.type='button';button.id=concept+'-'+id;button.setAttribute('aria-pressed',String(button.id==='b-packs'));const label=document.createElement('strong');label.textContent=concept.toUpperCase()+' · '+mark+' relative to A';button.append(label,document.createTextNode(reason));button.addEventListener('click',()=>{for(const el of document.querySelectorAll('.cells button'))el.setAttribute('aria-pressed',String(el===button));$('cell-title').textContent=concept.toUpperCase()+' · '+title.toLowerCase()+' · '+mark+' relative to A';$('definition').textContent='Criterion: '+definition;$('reason').textContent=reason;});cells.append(button);}section.append(h,p,cells);$('matrix').append(section);}for(const[concept,column]of [['b',3],['c',5]]){const marks=rows.map(row=>row[column]),plus=marks.filter(x=>x==='+').length,same=marks.filter(x=>x==='S').length,minus=marks.filter(x=>x==='−').length;$((concept)+'-count').textContent='+'+plus+' / S'+same+' / −'+minus+' / net '+(plus-minus>0?'+':'')+(plus-minus);}for(const[button,panel]of [['count','counts'],['hybrid','hybrid-view'],['numeric','numeric-view']])$(button).addEventListener('click',()=>{const open=$(panel).hidden;$(panel).hidden=!open;$(button).setAttribute('aria-expanded',String(open));});const fields=[['datum','Named datum and features · required'],['candidate','Alternative concept and features'],['criterion','Criterion definition and what better means · required'],['own-reason','Reason and evidence for the proposed mark'],['mandatory','Mandatory requirements and current evidence'],['notes','Discussion notes and disagreements']];for(const[id,label]of fields){const l=document.createElement('label'),t=document.createElement('textarea');l.htmlFor=id;l.textContent=label;t.id=id;$('fields').append(l,t);}const ids=fields.map(x=>x[0]).concat('own-mark');for(const id of ids)$(id).addEventListener('input',()=>{$('review').hidden=true;$('status').textContent='Comparison row changed. Build again to review the current words.';});$('build').addEventListener('click',()=>{const missing=['datum','criterion'].filter(id=>!$(id).value.trim());$('review').hidden=true;if(missing.length){$('status').textContent='Complete: '+missing.map(id=>id==='datum'?'named datum':'criterion definition').join(', ')+'.';return;}$('own-title').textContent='Proposed mark: '+$('own-mark').value;$('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='Comparison review built from supplied words; fixed matrix unchanged.';});$('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='';$('own-mark').value='Unknown';$('review').hidden=true;$('confirm').hidden=true;$('status').textContent='Seven comparison fields reset. Original matrix and D unknowns remain unchanged.';$('datum').focus();});</script></body></html>