Resource Lab Pattern
Guided Scenario Choice Block
A lightweight interaction pattern for scenario-based learning moments where learners choose a response, see immediate feedback, and understand why one decision works better than another.
When to use it
Use this when learners need to practice judgment, not memorize facts.
Scenario choices are useful when learners need to make decisions in context. Instead of asking them to recall information, this pattern asks them to choose what they would do next.
The feedback appears immediately below the selected choice, keeping the response connected to the learner’s decision.
This works well for customer service moments, safety decisions, coaching conversations, operational judgment, and any situation where learners need to compare options.
Live Preview
Try the interaction.
Select a response to reveal feedback directly under the choice. This keeps the learner focused on the decision they just made.
Scenario
A learner is about to start a task but notices something does not match the expected process. What should they do first?
It keeps feedback in context.
Learners see the response directly under the choice they selected, which helps connect the feedback to the decision.
It supports better decision-making.
The interaction helps learners compare options and understand why one response is stronger than another.
It feels lighter than a quiz.
The pattern can guide learners without making the experience feel like a formal assessment or pass/fail moment.
Copy the code
Rise-friendly HTML/CSS/JS starter block.
Paste this into a Code Block, external HTML page, or hosted interaction. Update the scenario, choices, and feedback language to match your learning moment.
<div class="scenario-choice-block">
<div class="scenario-question">
<p class="scenario-label">Scenario</p>
<h3>
A learner notices something does not match the expected process. What should they do first?
</h3>
</div>
<div class="scenario-options">
<button class="scenario-option" data-feedback="choice-a">
<span>A</span>
Continue the task and fix the issue later.
</button>
<div class="scenario-feedback" id="choice-a">
<strong>Not the best first move.</strong>
<p>
Continuing may create more downstream work. The better first step is to pause and confirm what changed.
</p>
</div>
<button class="scenario-option active" data-feedback="choice-b">
<span>B</span>
Pause, confirm the issue, and follow the next available guidance.
</button>
<div class="scenario-feedback active" id="choice-b">
<strong>Strong choice.</strong>
<p>
This keeps the learner focused on the safest next action and reduces guessing.
</p>
</div>
<button class="scenario-option" data-feedback="choice-c">
<span>C</span>
Restart the entire process from the beginning.
</button>
<div class="scenario-feedback" id="choice-c">
<strong>Probably more effort than needed.</strong>
<p>
Restarting may work, but it can add unnecessary friction.
</p>
</div>
</div>
</div>
<style>
.scenario-choice-block {
max-width: 900px;
margin: 0 auto;
padding: 28px;
border-radius: 28px;
background: #ffffff;
box-shadow: 0 18px 48px rgba(15,23,42,.08);
font-family: inherit;
}
.scenario-label {
margin: 0 0 10px;
font-size: 12px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: #777985;
}
.scenario-question h3 {
margin: 0 0 24px;
color: #111827;
font-size: 26px;
line-height: 1.15;
}
.scenario-options {
display: grid;
gap: 12px;
}
.scenario-option {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 16px;
border: 2px solid rgba(17,24,39,.08);
border-radius: 18px;
background: #ffffff;
color: #111827;
text-align: left;
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
.scenario-option span {
display: grid;
place-items: center;
width: 30px;
height: 30px;
flex-shrink: 0;
border-radius: 10px;
background: rgba(124,58,237,.08);
color: #7c3aed;
font-size: 12px;
font-weight: 900;
}
.scenario-option.active {
border-color: rgba(94,234,212,.9);
background: rgba(94,234,212,.16);
}
.scenario-feedback {
display: none;
margin: -4px 0 10px;
padding: 18px 20px;
border-radius: 18px;
background: rgba(248,250,252,.9);
border: 1px solid rgba(15,23,42,.06);
}
.scenario-feedback.active {
display: block;
}
.scenario-feedback strong {
display: block;
margin-bottom: 6px;
color: #111827;
}
.scenario-feedback p {
margin: 0;
color: #5f6472;
line-height: 1.55;
}
</style>
<script>
(function () {
const options = document.querySelectorAll(".scenario-option");
const feedbackItems = document.querySelectorAll(".scenario-feedback");
options.forEach(function(option) {
option.addEventListener("click", function() {
const targetId = option.getAttribute("data-feedback");
options.forEach(function(item) {
item.classList.remove("active");
});
feedbackItems.forEach(function(item) {
item.classList.remove("active");
});
option.classList.add("active");
const targetFeedback = document.getElementById(targetId);
if (targetFeedback) {
targetFeedback.classList.add("active");
}
});
});
})();
</script>Customize it
Make the scenario specific to the decision learners need to make.
Replace the sample scenario with a realistic moment from your learner’s work. The best scenario choices should feel plausible, not obviously silly.
Keep the feedback short and useful. Explain why the choice works or why it creates friction.
You can also change the tone from coaching to compliance, operations, safety, customer service, or onboarding depending on the context.
Want more reusable learning patterns?
Resource Lab is a practical library of free interaction patterns, code snippets, and build notes for learning designers.