Design Lab-Muster
Geführtes Szenario Auswahlblock
Ein leichtgewichtiges Interaktionsmuster für szenariobasiertes Lernen, bei dem Lernende eine Antwort wählen, sofortiges Feedback sehen und verstehen, warum eine Entscheidung besser funktioniert als eine andere.
Wann man es verwenden sollte
Verwenden Sie dies, wenn Lernende Urteilsvermögen üben müssen, nicht Fakten auswendig lernen.
Szenarioauswahlen sind nützlich, wenn Lernende Entscheidungen im Kontext treffen müssen. Anstatt sie zu bitten, Informationen abzurufen, fordert dieses Muster sie auf, zu wählen, was sie als Nächstes tun würden.
Das Feedback erscheint sofort unter der gewählten Antwort und hält die Antwort mit der Entscheidung des Lernenden verbunden.
Dies funktioniert gut für Kundenservice-Momente, Sicherheitsentscheidungen, Coaching-Gespräche, operationale Urteile und jede Situation, in der Lernende Optionen vergleichen müssen.
Live-Vorschau
Probiere die Interaktion aus.
Wählen Sie eine Antwort, um das Feedback direkt unter der Wahl anzuzeigen. Dies hält den Lernenden auf die Entscheidung konzentriert, die sie gerade getroffen haben.
Szenario
Ein Lernender steht kurz davor, eine Aufgabe zu beginnen, bemerkt jedoch, dass etwas nicht mit dem erwarteten Prozess übereinstimmt. Was sollten sie zuerst tun?
Es hält das Feedback im Kontext.
Lernende sehen die Antwort direkt unter der gewählten Option, was hilft, das Feedback mit der Entscheidung zu verbinden.
Es unterstützt bessere Entscheidungsfindung.
Die Interaktion hilft Lernenden, Optionen zu vergleichen und zu verstehen, warum eine Antwort stärker ist als eine andere.
Es fühlt sich leichter an als ein Quiz.
Das Muster kann Lernende führen, ohne dass die Erfahrung wie eine formelle Bewertung oder ein Bestehen/Nichtbestehen-Moment wirkt.
Den Code kopieren
Rise-freundlicher HTML/CSS/JS Starterblock.
Fügen Sie dies in einen Codeblock, eine externe HTML-Seite oder eine gehostete Interaktion ein. Aktualisieren Sie das Szenario, die Auswahlmöglichkeiten und die Feedbacksprache, um zu Ihrem Lernmoment zu passen.
<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>Passe es an
Machen Sie das Szenario spezifisch für die Entscheidung, die Lernende treffen müssen.
Ersetzen Sie das Beispiel-Szenario durch einen realistischen Moment aus der Arbeit Ihres Lernenden. Die besten Szenarioauswahlen sollten plausibel erscheinen, nicht offensichtlich albern.
Halten Sie das Feedback kurz und nützlich. Erklären Sie, warum die Wahl funktioniert oder warum sie Reibung erzeugt.
Sie können den Ton auch je nach Kontext von Coaching auf Compliance, Betrieb, Sicherheit, Kundenservice oder Einarbeitung ändern.
Willst du mehr wiederverwendbare Lernmuster?
Design Lab ist eine praktische Bibliothek mit kostenlosen Interaktionsmustern, Code-Schnipseln und Bauhinweisen für Lern-Designer.