It keeps feedback close to the decision.
Learners do not have to wait until the end of the experience to understand why a choice works or does not work.
Design Lab Pattern
Exactly / Not Exactly Feedback Cards
A lightweight interaction pattern for learning moments where you want to guide judgment, reinforce useful decisions, and redirect learners without making the experience feel like a rigid quiz.
Best for
Feedback
Works in
Rise
Build type
HTML/CSS/JS
Complexity
Light
When to use it
Use this when the goal is guidance, not gotcha-style assessment.
Traditional correct/incorrect feedback can feel too blunt when the learning goal is judgment, reflection, or behavior change.
This pattern gives learners a clear response without turning every choice into a pass/fail moment. “Exactly” reinforces the useful decision. “Not exactly” redirects the learner with a softer tone and a clearer next step.
It works especially well for scenarios, policy interpretation, service decisions, operational judgment, and coaching-style learning moments.
Live Preview
Try the interaction.
Select a choice to reveal feedback. The pattern is intentionally simple so it can be adapted inside Rise, Storyline, or a custom web block.
Scenario
A learner is unsure which next step to take. What should the experience do?
Exactly
Reinforce the useful decision.
This response supports the learner at the moment of need. It reduces friction, gives a clear next step, and keeps the experience focused on action.
Not exactly
Redirect without shutting people down.
This option may provide information, but it adds effort at the wrong moment. A better pattern guides the learner toward the next useful action.
It avoids over-punishing the learner.
“Not exactly” gives you room to redirect without making the interaction feel like a test failure.
It supports judgment-based learning.
The pattern is useful when the goal is to shape decision-making, interpretation, or behavior instead of checking recall.
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, feedback language, and colors to match your project.
<div class="feedback-card-interaction">
<div class="feedback-question">
<p class="feedback-label">Scenario</p>
<h3>
A learner is unsure which next step to take. What should the experience do?
</h3>
<button class="feedback-choice" data-feedback="notexactly">
Give them the full policy document and let them search.
</button>
<button class="feedback-choice active" data-feedback="exactly">
Guide them to one clear next action.
</button>
<button class="feedback-choice" data-feedback="notexactly">
Ask them to restart the full course.
</button>
</div>
<div class="feedback-response exactly active" id="feedback-exactly">
<span>Exactly</span>
<h3>Reinforce the useful decision.</h3>
<p>
This response supports the learner at the moment of need.
</p>
</div>
<div class="feedback-response notexactly" id="feedback-notexactly">
<span>Not exactly</span>
<h3>Redirect without shutting people down.</h3>
<p>
This option may provide information, but it adds effort at the wrong moment.
</p>
</div>
</div>
<style>
.feedback-card-interaction {
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;
}
.feedback-label {
margin: 0 0 10px;
font-size: 12px;
font-weight: 800;
letter-spacing: .14em;
text-transform: uppercase;
color: #777985;
}
.feedback-question h3,
.feedback-response h3 {
margin: 0 0 20px;
color: #111827;
}
.feedback-choice {
display: block;
width: 100%;
margin-bottom: 12px;
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;
}
.feedback-choice.active {
border-color: rgba(94,234,212,.9);
background: rgba(94,234,212,.16);
}
.feedback-response {
display: none;
margin-top: 24px;
padding: 24px;
border-radius: 24px;
}
.feedback-response.active {
display: block;
}
.feedback-response span {
display: inline-flex;
margin-bottom: 14px;
padding: 8px 12px;
border-radius: 999px;
font-size: 12px;
font-weight: 900;
letter-spacing: .12em;
text-transform: uppercase;
}
.feedback-response.exactly {
background: rgba(220,252,231,.9);
border: 1px solid rgba(34,197,94,.22);
}
.feedback-response.exactly span {
background: rgba(22,163,74,.12);
color: #166534;
}
.feedback-response.notexactly {
background: rgba(255,248,236,.9);
border: 1px solid rgba(245,215,166,.9);
}
.feedback-response.notexactly span {
background: rgba(217,119,6,.12);
color: #92400e;
}
</style>
<script>
(function () {
const choices = document.querySelectorAll(".feedback-choice");
const exactly = document.getElementById("feedback-exactly");
const notExactly = document.getElementById("feedback-notexactly");
choices.forEach(function(choice) {
choice.addEventListener("click", function() {
choices.forEach(function(item) {
item.classList.remove("active");
});
choice.classList.add("active");
if (choice.getAttribute("data-feedback") === "exactly") {
exactly.classList.add("active");
notExactly.classList.remove("active");
} else {
notExactly.classList.add("active");
exactly.classList.remove("active");
}
});
});
})();
</script>Customize it
Make the pattern fit the learning moment.
Replace the sample scenario with your own decision point. Keep the options short and action-oriented.
Use “Exactly” when you want to reinforce a strong decision. Use “Not exactly” when the choice is understandable but needs a redirect.
You can also rename the labels. For example: “Strong move / Try this instead,” “Good call / Consider this,” or “Yes / Not quite.”
Want more reusable learning patterns?
Design Lab is a practical library of free interaction patterns, code snippets, and build notes for learning designers.