Interactive Decision Tool for Confluence
Turn a decision document into a decision tool. Your vendor-selection or architecture-choice doc usually ships a comparison table — options down the side, criteria across the top, a "winner" bolded at the bottom. Nobody trusts it, because nobody can see how it was produced. This is not a nicer decision matrix; a matrix is still a static table someone has to trust on faith. Embed a live decision tool on the Confluence page instead — readers set their own weights for Cost, Impact, Risk, and Effort, and watch the ranking recompute in front of them.
Vendor Selection — Q3
We're down to three vendors. Instead of another slide with a static comparison table, weight what matters to you below and watch the ranking recompute.
▦ Mini-Site macroFull RFP responses and pricing sheets are linked in the appendix. Disagree with a weight? Change it above and see who wins.
The scenario above is a demo. Drag the weight sliders for Cost, Impact, Risk, or Effort, or edit any per-option score — the ranking and weighted scores recompute live, no reload.
The problem it solves
A static comparison table asks the reader to accept your weighting on faith. Maybe you cared more about cost than risk when you built it; maybe the reviewer cares more about risk than cost. There's no way for them to find out without asking you to redo the table with different assumptions — and most people don't ask, they just quietly discount a recommendation they can't verify. The table becomes decoration: it looks like analysis but functions as an opinion with a border around it. The fix isn't a prettier matrix — it's making the weighting itself something the reader can operate.
Mini Sites removes that trust gap. The decision tool lives on the page, next to the recommendation it supports, and it produces its ranking from the reader's own weights instead of yours.
How it works
- Create — Build (or generate, see the prompt below) a small self-contained HTML/CSS/JS bundle like the
one in the demo above: an
index.html, a stylesheet, and a script. - Upload — Add the bundle's files to the Mini-Site macro on your Confluence page.
- Publish — The macro serves the bundle live, inline, on the page. Readers set their own weights right where the decision doc already lives — no separate link, no login, no spreadsheet.
Prompt
Want your own version — adapted to your options and criteria? Paste this into Claude, ChatGPT, or a similar AI assistant and fill in the bracketed details for your own decision.
I want you to build me a small, self-contained interactive weighted decision
tool as a single-page web app. I will upload the files it produces directly
into a Confluence page using an app called "Mini Sites," so it must follow
these hard constraints:
1. Output exactly three files: index.html, styles.css, and app.js.
2. No external dependencies of any kind — no CDN links, no npm packages, no
Google Fonts, no icon libraries, no build step. Everything must run by
double-clicking index.html or serving the folder with a plain static
file server.
3. All JavaScript must be vanilla (no frameworks). All CSS must be plain CSS
(no preprocessors).
4. The page must work fully offline and never make a network request.
5. Do NOT use localStorage, sessionStorage, IndexedDB, or cookies — Mini Sites serves the bundle
in a sandboxed iframe with an opaque origin, where all of those throw or silently no-op. Keep
all state in plain JS variables; it's fine if it resets on reload.
Here is the decision tool I need:
- Title / context: [e.g. "Vendor Selection Decision" — describe the choice
this doc is helping make]
- Options: [list 3-4 options being compared, e.g. "Vendor A", "Vendor B",
"Vendor C"]
- Criteria (each with an adjustable weight slider, 0-5 or 0-10 range):
[list 3-5 criteria, e.g. "Cost", "Impact", "Risk", "Effort" — note that
every criterion's per-option score should mean "higher is better" so the
weighting math stays consistent; if a criterion is naturally "lower is
better" like Cost or Risk, score it as an inverted 1-10 rating instead of
a raw number]
- Per-option scores for each criterion, on a 1-10 scale (1 = worst, 10 =
best), editable by the reader via small number inputs next to each score.
- Live recomputation: as soon as any weight slider or score changes,
recalculate each option's weighted total (weighted average, i.e. sum of
weight * score divided by sum of weights) and re-render the ranking from
highest to lowest — no submit button, no page reload.
- Show the ranking as a clear ordered list with position (#1, #2, #3), the
option name, the numeric weighted score, and a simple bar visualizing
relative score so the reader can see the gap between options, not just
the order.
- Handle the all-weights-zero edge case gracefully (no crash, no NaN —
show a message asking the reader to set at least one weight above zero).
Design requirements:
- Clean, professional, modern look — this represents a real decision being
made, not a toy. Use a light theme, generous whitespace, clear typography,
and a card-based layout separating the weight/score inputs from the
ranking output.
- Visually highlight the current #1-ranked option (distinct accent color or
background) so the recommendation is legible at a glance.
- Responsive: usable on a laptop screen inside a Confluence page and on a
narrower viewport.
Please output the full contents of all three files, ready to save and
upload as-is.
After generating: save the three files locally with the exact names above, open index.html in a browser
and drag a weight slider to confirm the ranking recomputes live, then add the Mini-Site macro to your
Confluence page and upload all three files. Publish, and the decision tool renders live, inline, on the
page.
Related
- Mini Sites for Confluence — the hub page: what the app is, how the sandbox works, limits and permissions.
- ROI Calculator for Confluence — the same live-recalculation pattern applied to a business-case calculator.
- Interactive Prototype on Confluence — the same pattern applied to a clickable UI prototype.