Modèle du Design Lab
Scénario guidé Bloc de choix
Un modèle d'interaction léger pour des moments d'apprentissage basés sur des scénarios où les apprenants choisissent une réponse, voient un feedback immédiat et comprennent pourquoi une décision fonctionne mieux qu'une autre.
Quand l'utiliser
Utilisez ceci lorsque les apprenants doivent pratiquer leur jugement, pas mémoriser des faits.
Les choix de scénario sont utiles lorsque les apprenants doivent prendre des décisions dans un contexte. Au lieu de leur demander de rappeler des informations, ce modèle leur demande de choisir ce qu'ils feraient ensuite.
Le feedback apparaît immédiatement sous le choix sélectionné, gardant la réponse connectée à la décision de l'apprenant.
Cela fonctionne bien pour les moments de service client, les décisions de sécurité, les conversations de coaching, le jugement opérationnel et toute situation où les apprenants doivent comparer des options.
Aperçu en direct
Essayez l'interaction.
Sélectionnez une réponse pour révéler le feedback directement sous le choix. Cela garde l'apprenant concentré sur la décision qu'il vient de prendre.
Scénario
Un apprenant est sur le point de commencer une tâche mais remarque que quelque chose ne correspond pas au processus attendu. Que devraient-ils faire en premier ?
Cela garde le feedback dans le contexte.
Les apprenants voient la réponse directement sous le choix qu'ils ont sélectionné, ce qui aide à connecter le feedback à la décision.
Cela soutient une meilleure prise de décision.
L'interaction aide les apprenants à comparer des options et à comprendre pourquoi une réponse est plus forte qu'une autre.
Cela semble plus léger qu'un quiz.
Le modèle peut guider les apprenants sans que l'expérience ne ressemble à une évaluation formelle ou à un moment de réussite/échec.
Copier le code
Bloc de démarrage HTML/CSS/JS compatible avec Rise.
Collez ceci dans un bloc de code, une page HTML externe ou une interaction hébergée. Mettez à jour le scénario, les choix et le langage de feedback pour correspondre à votre moment d'apprentissage.
<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(124,58,237,.42);
background: linear-gradient(135deg, rgba(37,99,235,.07), rgba(124,58,237,.07), rgba(20,184,166,.07));
}
.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>Personnalisez-le
Rendez le scénario spécifique à la décision que les apprenants doivent prendre.
Remplacez le scénario d'exemple par un moment réaliste du travail de votre apprenant. Les meilleurs choix de scénario devraient sembler plausibles, pas évidemment ridicules.
Gardez le feedback court et utile. Expliquez pourquoi le choix fonctionne ou pourquoi il crée de la friction.
Vous pouvez également changer le ton du coaching à la conformité, aux opérations, à la sécurité, au service client ou à l'intégration selon le contexte.
Vous voulez plus de modèles d'apprentissage réutilisables ?
Design Lab est une bibliothèque pratique de modèles d'interaction gratuits, d'extraits de code et de notes de construction pour les concepteurs d'apprentissage.