\n Edit criteria & scores\n \\u25be\n

\n \n \n

See also: Rank Matrix \\u2014 reorder instead of scoring

\n`,\n scripts: `\nlet S = getHS() || {\n opts: ['PostgreSQL', 'MongoDB', 'SQLite'],\n crit: [{name:'Scalability',weight:4},{name:'Ease of use',weight:3},{name:'Cost',weight:2}],\n scores: [[9,7,4],[5,8,9],[8,6,10]]\n};\n\nfunction barColor(i) { return 'hsl('+Math.round((i*137.508+160)%360)+',58%,50%)'; }\n\ndocument.getElementById('dm-add-opt').addEventListener('click', () => {\n S.opts.push('Option '+(S.opts.length+1));\n S.scores.forEach(r => r.push(0));\n save(); rebuildTable(); renderViz();\n});\ndocument.getElementById('dm-add-crit').addEventListener('click', () => {\n S.crit.push({name:'Criterion '+(S.crit.length+1), weight:3});\n S.scores.push(S.opts.map(()=>0));\n save(); rebuildTable(); renderViz();\n});\n\nfunction renderViz() {\n const viz = document.getElementById('dm-viz');\n const totals = S.opts.map((_,oi) =>\n S.crit.reduce((sum,c,ci) => sum + (c.weight||0) * ((S.scores[ci]||[])[oi]||0), 0)\n );\n const maxT = Math.max(...totals, 1);\n const bestIdx = totals.indexOf(Math.max(...totals));\n if (!S.opts.length || !S.crit.length) {\n viz.innerHTML = '

Add options and criteria to see scores

'; return;\n }\n viz.innerHTML = S.opts.map((name, i) => {\n const pct = Math.round((totals[i]/maxT)*100);\n const isWinner = i===bestIdx && totals[i]>0;\n return '

'+esc(name)+''\n +'

'\n +''+totals[i]+'

';\n }).join('');\n}\n\nfunction rebuildTable() {\n const t = document.getElementById('dm-table'); t.innerHTML = '';\n const thead = document.createElement('thead');\n const hrow = document.createElement('tr');\n hrow.appendChild(mkTh('')); hrow.appendChild(mkTh('Wt'));\n S.opts.forEach((o,oi) => {\n const cell = document.createElement('th');\n const inp = mkInp(o, 'name-input');\n inp.addEventListener('input', () => { S.opts[oi]=inp.value; save(); renderViz(); });\n const del = mkDel(() => { if(S.opts.length<2) return; S.opts.splice(oi,1); S.scores.forEach(r=>r.splice(oi,1)); save(); rebuildTable(); renderViz(); });\n cell.appendChild(inp); cell.appendChild(del); hrow.appendChild(cell);\n });\n thead.appendChild(hrow); t.appendChild(thead);\n const tbody = document.createElement('tbody');\n S.crit.forEach((c,ci) => {\n const row = document.createElement('tr');\n const nc = document.createElement('td');\n const ni = mkInp(c.name, 'name-input');\n ni.addEventListener('input', () => { S.crit[ci].name=ni.value; save(); });\n const nd = mkDel(() => { if(S.crit.length<1) return; S.crit.splice(ci,1); S.scores.splice(ci,1); save(); rebuildTable(); renderViz(); });\n nc.appendChild(ni); nc.appendChild(nd); row.appendChild(nc);\n const wc = document.createElement('td'); wc.className='weight-cell';\n const wi = mkInp(c.weight, 'wt-input'); wi.inputMode='numeric';\n wi.addEventListener('change', () => { S.crit[ci].weight=Math.max(0,parseInt(wi.value)||0); wi.value=S.crit[ci].weight; save(); renderViz(); });\n wc.appendChild(wi); row.appendChild(wc);\n S.opts.forEach((_,oi) => {\n const sc = document.createElement('td');\n const si = mkInp((S.scores[ci]||[])[oi]||0, 'score-input'); si.inputMode='numeric';\n si.addEventListener('change', () => {\n if(!S.scores[ci]) S.scores[ci]=[];\n S.scores[ci][oi]=Math.max(0,Math.min(10,parseInt(si.value)||0));\n si.value=S.scores[ci][oi]; save(); renderViz();\n });\n sc.appendChild(si); row.appendChild(sc);\n });\n tbody.appendChild(row);\n });\n t.appendChild(tbody);\n}\n\nfunction mkTh(t) { const el=document.createElement('th'); el.textContent=t; return el; }\nfunction mkInp(v, cls) { const el=document.createElement('input'); el.type='text'; el.className=cls||''; el.value=v; return el; }\nfunction mkDel(fn) { const el=document.createElement('button'); el.className='del-col'; el.textContent='\\\\u00d7'; el.addEventListener('click',fn); return el; }\nfunction save() { setHS(S); }\n\nif (S.opts.length && S.crit.length) document.getElementById('dm-section').classList.add('collapsed');\nrebuildTable(); renderViz();\n`,\n });\n}\n","deleted","label",[178,160],"pages","permalink","https://www.val.town/x/c15r/mental-models/code/pages/decision-matrix.ts","extension","ts","actionData","errors"]