\n\n

\n Options \n \\u25be\n

\n\n

\n Criteria & Rankings\n \n \n \n \\u25be\n \n

\n\n

\n Drag the \\u2807 handles to reorder criteria (importance) or options (ranking).\n Expand a criterion to rank options within it.\n

See also: Decision Matrix \\u2014 explicit scores and weights

\n`,\n scripts: `\nfunction optColor(i) { return 'hsl('+Math.round((i*137.508+160)%360)+',55%,48%)'; }\nfunction toggleSec(id) { document.getElementById(id).classList.toggle('collapsed'); }\n\nconst defaultState = {\n options: ['Stay in current role', 'Take the new offer', 'Go freelance'],\n criteria: [\n { name: 'Financial stability', order: [0, 1, 2] },\n { name: 'Growth potential', order: [2, 1, 0] },\n { name: 'Work-life balance', order: [2, 0, 1] },\n { name: 'Autonomy', order: [2, 1, 0] },\n ],\n collapsed: { 0: true, 1: true, 2: true, 3: true },\n};\n\nlet S = getHS() || JSON.parse(JSON.stringify(defaultState));\nS.criteria.forEach(c => { delete c.weight; });\nif (!S.collapsed) S.collapsed = {};\n\nconst numC = () => S.criteria.length;\nconst numO = () => S.options.length;\nfunction critWeight(ci) { return numC() - ci; }\n\nfunction computeScores() {\n const n = numO();\n const scores = S.options.map(() => 0);\n S.criteria.forEach((c, ci) => {\n const w = critWeight(ci);\n c.order.forEach((optIdx, pos) => {\n if (optIdx < n) scores[optIdx] += (n - pos) * w;\n });\n });\n return scores;\n}\n\nfunction renderViz() {\n const scores = computeScores();\n const maxS = Math.max(...scores, 1);\n const bestIdx = scores.indexOf(Math.max(...scores));\n const el = document.getElementById('rm-viz');\n if (!numO()) { el.innerHTML = '

Add options to begin

'; return; }\n el.innerHTML = S.options.map((name, i) => {\n const pct = Math.round((scores[i]/maxS)*100);\n const win = i===bestIdx && scores[i]>0;\n return '

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

'\n +''+scores[i]+'

';\n }).join('');\n}\n\nfunction renderOptList() {\n const el = document.getElementById('rm-opt-list');\n el.innerHTML = '';\n document.getElementById('rm-opt-count').textContent = numO();\n S.options.forEach((name, i) => {\n const row = document.createElement('div'); row.className = 'rm-opt-row';\n const sw = document.createElement('span'); sw.className = 'rm-opt-swatch'; sw.style.background = optColor(i);\n const inp = document.createElement('input'); inp.type = 'text'; inp.value = name;\n inp.addEventListener('input', () => {\n S.options[i] = inp.value;\n save(); renderViz();\n document.querySelectorAll('.rm-opt[data-opt-idx=\"'+i+'\"] .rm-opt-label').forEach(lbl => {\n lbl.textContent = inp.value || '?';\n });\n });\n const del = document.createElement('button');\n del.className = 'rm-opt-del'; del.textContent = '\\\\u00d7';\n del.setAttribute('aria-label', 'Remove option');\n del.addEventListener('click', () => deleteOption(i));\n row.appendChild(sw); row.appendChild(inp); row.appendChild(del);\n el.appendChild(row);\n });\n}\n\nfunction deleteOption(idx) {\n if (numO() <= 2) return;\n S.options.splice(idx, 1);\n S.criteria.forEach(c => {\n c.order = c.order.filter(oi => oi !== idx).map(oi => oi > idx ? oi - 1 : oi);\n const n = S.options.length;\n for (let i = 0; i < n; i++) { if (!c.order.includes(i)) c.order.push(i); }\n });\n save(); renderAll();\n}\n\nfunction addOption() {\n const name = 'Option ' + String.fromCharCode(65 + numO());\n S.options.push(name);\n S.criteria.forEach(c => c.order.push(numO()-1));\n save(); renderAll();\n}\n\nfunction renderCriteria() {\n const el = document.getElementById('rm-criteria');\n el.innerHTML = '';\n const n = numO();\n S.criteria.forEach((crit, ci) => {\n if (!crit.order || crit.order.length !== n) crit.order = S.options.map((_,i) => i);\n const isCol = S.collapsed[ci];\n const div = document.createElement('div');\n div.className = 'rm-crit' + (isCol ? ' collapsed' : '');\n div.dataset.ci = ci;\n // draggable is set on the grip via dragstart delegation, not the whole div\n div.draggable = false;\n\n const head = document.createElement('div'); head.className = 'rm-crit-head';\n const grip = document.createElement('span'); grip.className = 'rm-crit-grip'; grip.textContent = '\\\\u2807';\n grip.draggable = true;\n grip.addEventListener('dragstart', e => {\n e.dataTransfer.setData('application/crit', JSON.stringify({ci}));\n e.dataTransfer.effectAllowed = 'move';\n div.classList.add('crit-dragging');\n });\n grip.addEventListener('dragend', () => div.classList.remove('crit-dragging'));\n\n const rank = document.createElement('span'); rank.className = 'rm-crit-rank'; rank.textContent = ci + 1;\n const nameInp = document.createElement('input');\n nameInp.className = 'rm-crit-name'; nameInp.type = 'text'; nameInp.value = crit.name;\n nameInp.addEventListener('input', () => { crit.name = nameInp.value; save(); });\n const weight = document.createElement('span');\n weight.className = 'rm-crit-weight'; weight.textContent = critWeight(ci) + '\\\\u00d7';\n const toggle = document.createElement('button'); toggle.className = 'rm-crit-toggle'; toggle.textContent = '\\\\u25be';\n toggle.addEventListener('click', e => {\n e.stopPropagation(); S.collapsed[ci] = !S.collapsed[ci];\n div.classList.toggle('collapsed', S.collapsed[ci]); save();\n });\n const del = document.createElement('button'); del.className = 'rm-crit-del'; del.textContent = '\\\\u00d7';\n del.addEventListener('click', e => {\n e.stopPropagation(); S.criteria.splice(ci, 1);\n const nc = {};\n Object.keys(S.collapsed).forEach(k => {\n const ki=parseInt(k);\n if(kici) nc[ki-1]=S.collapsed[ki];\n });\n S.collapsed=nc; save(); renderCriteria(); renderViz();\n });\n head.appendChild(grip); head.appendChild(rank); head.appendChild(nameInp);\n head.appendChild(weight); head.appendChild(toggle); head.appendChild(del);\n div.appendChild(head);\n\n const opts = document.createElement('div'); opts.className = 'rm-opts'; opts.dataset.ci = ci;\n crit.order.forEach((optIdx, pos) => {\n if (optIdx >= n) return;\n const item = document.createElement('div');\n item.className = 'rm-opt'; item.dataset.optIdx = optIdx;\n item.draggable = false;\n const posClass = pos===0?'p1':pos===1?'p2':(pos===n-1&&n>2)?'plast':'pn';\n const posEl = document.createElement('span'); posEl.className = 'rm-opt-pos '+posClass; posEl.textContent = pos+1;\n const sw = document.createElement('span'); sw.className = 'rm-opt-sw-sm'; sw.style.background = optColor(optIdx);\n const label = document.createElement('span'); label.className = 'rm-opt-label'; label.textContent = S.options[optIdx]||'?';\n const score = document.createElement('span'); score.className = 'rm-opt-score';\n score.textContent = ((n-pos)*critWeight(ci))+' pts';\n const oGrip = document.createElement('span'); oGrip.className = 'rm-opt-grip'; oGrip.textContent = '\\\\u2807';\n oGrip.draggable = true;\n item.appendChild(posEl); item.appendChild(sw); item.appendChild(label);\n item.appendChild(score); item.appendChild(oGrip);\n\n // Drag initiated from grip only\n oGrip.addEventListener('dragstart', e => {\n e.stopPropagation();\n e.dataTransfer.setData('application/opt', JSON.stringify({ci, optIdx}));\n e.dataTransfer.effectAllowed = 'move'; item.classList.add('opt-dragging');\n });\n oGrip.addEventListener('dragend', () => item.classList.remove('opt-dragging'));\n\n // Drop targets are the full row (so you can drop between items)\n item.addEventListener('dragover', e => {\n if (!e.dataTransfer.types.includes('application/opt')) return;\n e.preventDefault(); e.stopPropagation();\n const r = item.getBoundingClientRect();\n item.classList.remove('opt-drag-above','opt-drag-below');\n if (e.clientY < r.top+r.height/2) item.classList.add('opt-drag-above');\n else item.classList.add('opt-drag-below');\n });\n item.addEventListener('dragleave', () => item.classList.remove('opt-drag-above','opt-drag-below'));\n item.addEventListener('drop', e => {\n e.preventDefault(); e.stopPropagation();\n item.classList.remove('opt-drag-above','opt-drag-below');\n try {\n const data = JSON.parse(e.dataTransfer.getData('application/opt'));\n if (data.ci !== ci) return;\n const fromPos = crit.order.indexOf(data.optIdx);\n const toPos = crit.order.indexOf(optIdx);\n if (fromPos===-1||toPos===-1||fromPos===toPos) return;\n const r = item.getBoundingClientRect();\n let ins = e.clientY < r.top+r.height/2 ? toPos : toPos+1;\n crit.order.splice(fromPos, 1);\n if (fromPos < ins) ins--;\n crit.order.splice(ins, 0, data.optIdx);\n save(); renderCriteria(); renderViz();\n } catch {}\n });\n opts.appendChild(item);\n });\n div.appendChild(opts);\n\n // Criterion drop targets on the whole card\n div.addEventListener('dragover', e => {\n if (!e.dataTransfer.types.includes('application/crit')) return;\n e.preventDefault(); div.classList.add('crit-drag-over');\n });\n div.addEventListener('dragleave', () => div.classList.remove('crit-drag-over'));\n div.addEventListener('drop', e => {\n div.classList.remove('crit-drag-over');\n if (!e.dataTransfer.types.includes('application/crit')) return;\n e.preventDefault();\n try {\n const data = JSON.parse(e.dataTransfer.getData('application/crit'));\n if (data.ci === ci) return;\n const colArr = S.criteria.map((_, i) => !!S.collapsed[i]);\n const movedCrit = S.criteria.splice(data.ci, 1)[0];\n S.criteria.splice(ci, 0, movedCrit);\n const movedCol = colArr.splice(data.ci, 1)[0];\n colArr.splice(ci, 0, movedCol);\n S.collapsed = {};\n colArr.forEach((v, i) => { if (v) S.collapsed[i] = true; });\n save(); renderCriteria(); renderViz();\n } catch {}\n });\n el.appendChild(div);\n });\n}\n\nfunction addCrit() {\n S.criteria.push({ name: 'Criterion '+(numC()+1), order: S.options.map((_,i)=>i) });\n save(); renderCriteria(); renderViz();\n}\nfunction collapseAllCrit() {\n const allCol = S.criteria.every((_, i) => S.collapsed[i]);\n S.criteria.forEach((_, i) => { S.collapsed[i] = !allCol; });\n save(); renderCriteria();\n}\n\ndocument.getElementById('rm-add-opt').addEventListener('click', addOption);\n\nfunction renderAll() { renderViz(); renderOptList(); renderCriteria(); }\nfunction save() { setHS(S); }\n\nif (numO() > 0) document.getElementById('rm-opts-section').classList.add('collapsed');\nrenderAll();\n`,\n });\n}\n","deleted","label",[177,160],"pages","permalink","https://www.val.town/x/c15r/mental-models/code/pages/rank-matrix.ts","extension","ts","actionData","errors"]