Corak Reka Bentuk Lab
Senario Terpandukan Blok Pilihan
Corak interaksi ringan untuk momen pembelajaran berasaskan senario di mana pelajar memilih respons, melihat maklum balas segera, dan memahami mengapa satu keputusan berfungsi lebih baik daripada yang lain.
Bila untuk menggunakannya
Gunakan ini apabila pelajar perlu berlatih membuat keputusan, bukan menghafal fakta.
Pilihan senario berguna apabila pelajar perlu membuat keputusan dalam konteks. Daripada meminta mereka mengingati maklumat, corak ini meminta mereka memilih apa yang mereka akan lakukan seterusnya.
Maklum balas muncul segera di bawah pilihan yang dipilih, mengekalkan respons yang berkaitan dengan keputusan pelajar.
Ini berfungsi dengan baik untuk momen perkhidmatan pelanggan, keputusan keselamatan, perbualan pengajaran, pertimbangan operasi, dan mana-mana situasi di mana pelajar perlu membandingkan pilihan.
Pratonton Langsung
Cuba interaksi ini.
Pilih respons untuk mendedahkan maklum balas secara langsung di bawah pilihan. Ini mengekalkan fokus pelajar pada keputusan yang baru mereka buat.
Senario
Seorang pelajar akan memulakan tugas tetapi menyedari sesuatu tidak sepadan dengan proses yang dijangkakan. Apa yang harus mereka lakukan terlebih dahulu?
Ia mengekalkan maklum balas dalam konteks.
Pelajar melihat respons secara langsung di bawah pilihan yang mereka pilih, yang membantu menghubungkan maklum balas dengan keputusan.
Ia menyokong pembuatan keputusan yang lebih baik.
Interaksi ini membantu pelajar membandingkan pilihan dan memahami mengapa satu respons lebih kuat daripada yang lain.
Ia terasa lebih ringan daripada kuiz.
Corak ini boleh membimbing pelajar tanpa menjadikan pengalaman itu terasa seperti penilaian formal atau momen lulus/gagal.
Salin kod
Blok permulaan HTML/CSS/JS mesra Rise.
Tampal ini ke dalam Blok Kod, halaman HTML luaran, atau interaksi yang dihoskan. Kemas kini senario, pilihan, dan bahasa maklum balas untuk sepadan dengan momen pembelajaran anda.
<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>Sesuaikan ia
Jadikan senario itu khusus kepada keputusan yang perlu dibuat oleh pelajar.
Gantikan senario contoh dengan momen realistik dari kerja pelajar anda. Pilihan senario yang terbaik harus terasa plausible, bukan jelas bodoh.
Kekalkan maklum balas pendek dan berguna. Terangkan mengapa pilihan itu berfungsi atau mengapa ia mencipta geseran.
Anda juga boleh mengubah nada dari pengajaran kepada pematuhan, operasi, keselamatan, perkhidmatan pelanggan, atau pengenalan bergantung kepada konteks.
Mahu lebih banyak corak pembelajaran yang boleh digunakan semula?
Design Lab adalah perpustakaan praktikal corak interaksi percuma, petikan kod, dan nota binaan untuk pereka pembelajaran.