Ia memastikan maklum balas dekat dengan keputusan.
Pelajar tidak perlu menunggu sehingga akhir pengalaman untuk memahami mengapa pilihan berfungsi atau tidak berfungsi.
Corak Reka Bentuk Lab
Tepat / Tidak Tepat Kad Maklum Balas
Corak interaksi ringan untuk momen pembelajaran di mana anda ingin membimbing penilaian, mengukuhkan keputusan yang berguna, dan mengalihkan pelajar tanpa menjadikan pengalaman itu terasa seperti kuiz yang kaku.
Terbaik untuk
Maklum balas
Berfungsi dalam
Rise
Jenis binaan
HTML/CSS/JS
Kompleksiti
Ringan
Bila untuk menggunakannya
Gunakan ini apabila matlamatnya adalah panduan, bukan penilaian gaya gotcha.
Maklum balas betul/salah tradisional boleh terasa terlalu kasar apabila matlamat pembelajaran adalah penilaian, refleksi, atau perubahan tingkah laku.
Corak ini memberikan pelajar respons yang jelas tanpa menjadikan setiap pilihan sebagai momen lulus/gagal. “Tepat” mengukuhkan keputusan yang berguna. “Tidak tepat” mengalihkan pelajar dengan nada yang lebih lembut dan langkah seterusnya yang lebih jelas.
Ia berfungsi dengan baik untuk senario, tafsiran polisi, keputusan perkhidmatan, penilaian operasi, dan momen pembelajaran gaya bimbingan.
Pratonton Langsung
Cuba interaksi ini.
Pilih pilihan untuk mendedahkan maklum balas. Corak ini sengaja dibuat mudah supaya ia boleh disesuaikan dalam Rise, Storyline, atau blok web khusus.
Senario
Seorang pelajar tidak pasti langkah seterusnya yang perlu diambil. Apa yang sepatutnya dilakukan oleh pengalaman itu?
Tepat
Kukuhkan keputusan yang berguna.
Respons ini menyokong pelajar pada saat keperluan. Ia mengurangkan geseran, memberikan langkah seterusnya yang jelas, dan memastikan pengalaman tetap fokus pada tindakan.
Tidak tepat
Alihkan tanpa menutup orang.
Pilihan ini mungkin memberikan maklumat, tetapi ia menambah usaha pada masa yang salah. Corak yang lebih baik membimbing pelajar ke arah tindakan berguna seterusnya.
Ia mengelakkan menghukum pelajar secara berlebihan.
“Tidak tepat” memberi anda ruang untuk mengalihkan tanpa menjadikan interaksi terasa seperti kegagalan ujian.
Ia menyokong pembelajaran berasaskan penilaian.
Corak ini berguna apabila matlamatnya adalah untuk membentuk pengambilan keputusan, tafsiran, atau tingkah laku dan bukannya memeriksa ingatan.
Salin kod
Blok permulaan HTML/CSS/JS mesra Rise.
Tampal ini ke dalam Blok Kod, halaman HTML luar, atau interaksi yang dihoskan. Kemas kini senario, pilihan, bahasa maklum balas, dan warna untuk disesuaikan dengan projek anda.
<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>Sesuaikan ia
Sesuaikan corak dengan momen pembelajaran.
Gantikan senario contoh dengan titik keputusan anda sendiri. Kekalkan pilihan pendek dan berorientasikan tindakan.
Gunakan “Tepat” apabila anda ingin mengukuhkan keputusan yang kuat. Gunakan “Tidak tepat” apabila pilihan itu boleh difahami tetapi memerlukan pengalihan.
Anda juga boleh menamakan semula label. Contohnya: “Langkah kuat / Cuba ini sebaliknya,” “Panggilan baik / Pertimbangkan ini,” atau “Ya / Tidak begitu.”
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.