Il garde le retour d'information proche de la décision.
Les apprenants n'ont pas à attendre la fin de l'expérience pour comprendre pourquoi un choix fonctionne ou ne fonctionne pas.
Modèle du Design Lab
Exact / Pas Exact Cartes de retour d'information
Un modèle d'interaction léger pour les moments d'apprentissage où vous souhaitez guider le jugement, renforcer des décisions utiles et rediriger les apprenants sans que l'expérience ne ressemble à un quiz rigide.
Meilleur pour
Retour d'information
Fonctionne dans
Rise
Type de construction
HTML/CSS/JS
Complexité
Léger
Quand l'utiliser
Utilisez ceci lorsque l'objectif est de guider, pas d'évaluer de manière piégeante.
Un retour d'information traditionnel correct/incorrect peut sembler trop brusque lorsque l'objectif d'apprentissage est le jugement, la réflexion ou le changement de comportement.
Ce modèle donne aux apprenants une réponse claire sans transformer chaque choix en un moment de réussite ou d'échec. "Exact" renforce la décision utile. "Pas exact" redirige l'apprenant avec un ton plus doux et une étape suivante plus claire.
Il fonctionne particulièrement bien pour des scénarios, l'interprétation de politiques, des décisions de service, des jugements opérationnels et des moments d'apprentissage de type coaching.
Aperçu en direct
Essayez l'interaction.
Sélectionnez un choix pour révéler le retour d'information. Le modèle est intentionnellement simple afin qu'il puisse être adapté à l'intérieur de Rise, Storyline ou d'un bloc web personnalisé.
Scénario
Un apprenant n'est pas sûr de la prochaine étape à suivre. Que devrait faire l'expérience ?
Exact
Renforcez la décision utile.
Cette réponse soutient l'apprenant au moment de besoin. Elle réduit les frictions, donne une étape suivante claire et garde l'expérience centrée sur l'action.
Pas exact
Redirigez sans fermer la porte aux gens.
Cette option peut fournir des informations, mais elle ajoute de l'effort au mauvais moment. Un meilleur modèle guide l'apprenant vers la prochaine action utile.
Il évite de trop punir l'apprenant.
"Pas exact" vous donne de la place pour rediriger sans que l'interaction ne ressemble à un échec de test.
Il soutient l'apprentissage basé sur le jugement.
Le modèle est utile lorsque l'objectif est de façonner la prise de décision, l'interprétation ou le comportement au lieu de vérifier la mémoire.
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, le langage de retour d'information et les couleurs pour correspondre à votre projet.
<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>Personnalisez-le
Faites en sorte que le modèle s'adapte au moment d'apprentissage.
Remplacez le scénario d'exemple par votre propre point de décision. Gardez les options courtes et orientées vers l'action.
Utilisez "Exact" lorsque vous souhaitez renforcer une décision forte. Utilisez "Pas exact" lorsque le choix est compréhensible mais nécessite une redirection.
Vous pouvez également renommer les étiquettes. Par exemple : "Bonne décision / Essayez ceci à la place", "Bonne idée / Considérez ceci", ou "Oui / Pas tout à fait."
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.