Resource Lab Pattern
Decision Tradeoff Visualizer
A reusable interaction pattern that helps learners compare plausible decisions by showing how each choice affects speed, clarity, risk, trust, and effort.
Best for
Judgment-heavy choices
Use when several options are defensible, but each creates a different operational consequence.Learning value
Visible consequences
Learners see tradeoffs instead of receiving a simple correct or incorrect response.Build type
HTML/CSS/JS
Works as a standalone web interaction, embedded resource, Rise block, or Storyline web object.Why this pattern exists
Most workplace decisions are not clean multiple-choice moments.
In real work, people often choose between options that are all somewhat reasonable. One choice may be fast but risky. Another may build trust but require more effort. Another may reduce uncertainty but slow the workflow.
The Decision Tradeoff Visualizer turns that tension into the learning moment. Instead of telling learners whether they were right or wrong, it helps them see what their decision changes.
Live preview
Choose a response and compare the tradeoffs.
Scenario: A delivery partner reports that the app instructions are unclear before starting a time-sensitive route. You need to decide what support path to recommend.
What would you recommend first?
The person is ready to start, but they are unsure which app instruction applies. The route is time-sensitive, and guessing could create downstream confusion.
This choice adds a small pause, but it improves clarity and reduces the risk of giving guidance based on the wrong assumption.
Useful support often starts by reducing ambiguity. A clarifying question can prevent a fast answer from becoming a costly one.
Design notes
Use this when the learning goal is better judgment, not answer recall.
Use dimensions that matter in the actual work, such as risk, trust, quality, speed, effort, confidence, or customer impact.
Not every choice needs to be equally valid. Some options can be weaker, but the feedback should explain why.
The point is not to reward the learner with a score. The point is to show what their decision changes.
How to customize it
Swap the scenario, options, metrics, and coaching notes.
You can adapt this pattern for leadership decisions, customer support, safety, onboarding, troubleshooting, policy application, coaching conversations, or operational triage.
Write a scenario where more than one option feels plausible.
Choose 4 to 6 tradeoff dimensions that matter in that workflow.
Give each decision a different score profile so the consequence pattern becomes visible.
Add coaching feedback that explains the decision logic, not just the outcome.
Starter block
Copyable HTML, CSS, and JavaScript.
<div class="tradeoff-widget" data-tradeoff-widget>
<div class="tradeoff-question">
<p>Scenario</p>
<h3>What would you recommend first?</h3>
</div>
<div class="tradeoff-options">
<button type="button" data-choice="quick">Give a quick answer so they can keep moving.</button>
<button type="button" data-choice="verify">Ask one clarifying question first.</button>
<button type="button" data-choice="escalate">Escalate immediately.</button>
</div>
<div class="tradeoff-feedback">
<h4 data-title>Clarify before acting</h4>
<p data-body>This choice adds a small pause, but improves clarity and reduces risk.</p>
<div class="tradeoff-bars">
<div class="bar" data-metric="speed"><span>Speed</span><strong>68</strong><div><i style="width:68%"></i></div></div>
<div class="bar" data-metric="clarity"><span>Clarity</span><strong>92</strong><div><i style="width:92%"></i></div></div>
<div class="bar" data-metric="risk"><span>Risk control</span><strong>86</strong><div><i style="width:86%"></i></div></div>
</div>
</div>
</div>
<style>
.tradeoff-widget {
max-width: 920px;
margin: 0 auto;
padding: 24px;
border: 1px solid #dbe3ef;
border-radius: 28px;
font-family: Inter, system-ui, sans-serif;
}
.tradeoff-question p {
margin: 0 0 8px;
font-size: 12px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: #2563eb;
}
.tradeoff-question h3 {
margin: 0 0 20px;
font-size: 32px;
line-height: 1;
letter-spacing: -.04em;
color: #111827;
}
.tradeoff-options {
display: grid;
gap: 10px;
margin-bottom: 24px;
}
.tradeoff-options button {
padding: 16px;
border-radius: 18px;
border: 1px solid #dbe3ef;
background: #ffffff;
color: #111827;
font-weight: 750;
text-align: left;
cursor: pointer;
}
.tradeoff-options button.is-active {
border-color: rgba(37, 99, 235, .34);
background: #eff4ff;
color: #2563eb;
}
.tradeoff-feedback {
padding: 22px;
border-radius: 22px;
background: #f8fafc;
border: 1px solid #dbe3ef;
}
.tradeoff-feedback h4 {
margin: 0 0 8px;
font-size: 24px;
letter-spacing: -.035em;
color: #111827;
}
.tradeoff-feedback p {
margin: 0 0 20px;
line-height: 1.6;
color: #5f6472;
}
.bar {
margin-top: 14px;
}
.bar span,
.bar strong {
font-size: 13px;
font-weight: 800;
color: #111827;
}
.bar strong {
float: right;
}
.bar div {
clear: both;
height: 10px;
margin-top: 8px;
border-radius: 999px;
background: #e5e7eb;
overflow: hidden;
}
.bar i {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(135deg, #2563eb, #7c3aed, #14b8a6);
transition: width .35s ease;
}
</style>
<script>
(function () {
const data = {
quick: {
title: "Fast, but fragile",
body: "This keeps the work moving, but it may increase risk if the original concern was misunderstood.",
scores: { speed: 94, clarity: 52, risk: 44 }
},
verify: {
title: "Clarify before acting",
body: "This adds a small pause, but improves clarity and reduces the risk of giving guidance based on the wrong assumption.",
scores: { speed: 68, clarity: 92, risk: 86 }
},
escalate: {
title: "Safe, but heavy",
body: "Escalation can protect quality, but using it too early may add unnecessary delay and effort.",
scores: { speed: 38, clarity: 78, risk: 90 }
}
};
document.querySelectorAll("[data-tradeoff-widget]").forEach(function (widget) {
const buttons = widget.querySelectorAll("[data-choice]");
const title = widget.querySelector("[data-title]");
const body = widget.querySelector("[data-body]");
function render(choice) {
const item = data[choice];
title.textContent = item.title;
body.textContent = item.body;
buttons.forEach(function (button) {
button.classList.toggle("is-active", button.dataset.choice === choice);
});
Object.keys(item.scores).forEach(function (metric) {
const bar = widget.querySelector("[data-metric='" + metric + "']");
if (!bar) return;
const score = item.scores[metric];
bar.querySelector("strong").textContent = score;
bar.querySelector("i").style.width = score + "%";
});
}
buttons.forEach(function (button) {
button.addEventListener("click", function () {
render(button.dataset.choice);
});
});
render("verify");
});
})();
</script>Resource Lab
Build interactions that make decisions easier to understand.
Use this pattern when learners need to compare consequences, not memorize a perfect answer.
Back to Resource Lab