Corak Gamifikasi Jalan Cerita

Storyline Meter Momentum

Corak interaksi Jalan Cerita yang digamifikasi yang memberi ganjaran kepada keputusan berguna, membina momentum pelajar, dan menggunakan JavaScript untuk memberikan maklum balas pembelajaran adaptif tanpa menjadikan pengalaman itu permainan mata yang remeh.

Terbaik untuk Amalan
Berfungsi dalam Storyline
Jenis binaan JS + Pembolehubah
Kompleksiti Sederhana

Bila untuk menggunakannya

Gunakan ini apabila anda mahu gamifikasi mengukuhkan tingkah laku, bukan mengganggu daripadanya.

Gamifikasi berfungsi dengan baik apabila ia membantu pelajar menyedari kemajuan, membina keyakinan, dan kekal terlibat melalui keputusan yang bermakna.

Corak ini menggunakan meter momentum sebagai ganti penilaian tradisional. Pelajar memperoleh atau kehilangan momentum berdasarkan kualiti keputusan mereka, kemudian menerima maklum balas bimbingan yang menerangkan apa yang berlaku dan mengapa.

Ia berfungsi dengan baik untuk latihan senario, pertimbangan operasi, keputusan pengenalan, tingkah laku keselamatan, situasi sokongan pelanggan, perbualan bimbingan, dan pembelajaran berasaskan aliran kerja.

Pratonton Langsung

Cuba interaksi ini.

Pilih keputusan untuk melihat bagaimana meter momentum berubah. Dalam Storyline, logik yang sama akan mengemas kini pembolehubah, keadaan objek, medan teks, dan panel maklum balas.

Senario

Seorang pelajar berada di tengah-tengah tugas dan menyedari ketidakpadanan antara arahan dan apa yang mereka lihat di skrin. Apa yang harus mereka lakukan seterusnya?

Momentum

70 /100
Membangun momentum yang berguna
Maklum balas bimbingan

Langkah yang kuat.

Henti untuk mengesahkan ketidakpadanan melindungi aliran kerja tanpa bertindak berlebihan. Ini memastikan pelajar terus bergerak sambil mengurangkan risiko yang tidak perlu.

01

Ia memberi ganjaran kepada pertimbangan, bukan klik.

Pelajar memperoleh momentum untuk keputusan yang mengurangkan risiko, meningkatkan kejelasan, atau menyokong tingkah laku yang diingini.

02

Ia menjadikan kemajuan dapat dilihat.

Meter visual memberikan pelajar rasa pergerakan tanpa memerlukan lencana, papan pendahulu, atau persaingan buatan.

03

Ia menyokong maklum balas bimbingan.

Maklum balas menerangkan impak keputusan pelajar, yang menjadikan interaksi lebih berguna daripada sekadar skor sederhana.

Persediaan storyline

Bina ia dengan pembolehubah, keadaan, dan satu pencetus JavaScript.

Dalam Storyline, buat pembolehubah untuk menyimpan pilihan semasa pelajar, skor momentum, tajuk maklum balas, badan maklum balas, dan nada maklum balas.

Setiap butang keputusan menetapkan nilai pilihan. Pencetus hantar menjalankan JavaScript yang menilai keputusan, mengemas kini skor momentum, dan mengembalikan teks maklum balas.

Anda boleh menghubungkan skor momentum kepada bar kemajuan, dial, slider, medan teks, atau meter visual khusus.

Pembolehubah selectedChoice

Menyimpan keputusan yang dipilih oleh pelajar.

Pembolehubah momentumScore

Menyimpan nilai momentum semasa pelajar.

Pembolehubah feedbackTitle

Menyimpan tajuk maklum balas yang dihasilkan.

Pembolehubah feedbackBody

Menyimpan mesej bimbingan yang dihasilkan.

Pembolehubah feedbackTone

Menyimpan jenis maklum balas untuk keadaan visual pilihan.

Pembolehubah momentumStatus

Menyimpan label yang ditunjukkan di sebelah meter.

Salin JavaScript

Logik permulaan JavaScript Storyline.

Tambahkan ini kepada pencetus “Laksanakan JavaScript” selepas pelajar memilih pilihan. Pastikan nama pembolehubah Storyline sepadan dengan kod.

// Storyline Momentum Meter
// Create these Storyline variables first:
// selectedChoice, momentumScore, feedbackTitle, feedbackBody, feedbackTone, momentumStatus

var player = GetPlayer();

var choice = player.GetVar("selectedChoice");
var currentMomentum = Number(player.GetVar("momentumScore"));

if (isNaN(currentMomentum)) {
  currentMomentum = 50;
}

var feedbackTitle = "";
var feedbackBody = "";
var feedbackTone = "";
var momentumStatus = "";
var momentumChange = 0;

/*
Expected selectedChoice values:
- guess
- verify
- restart
*/

if (choice === "verify") {
  momentumChange = 20;
  feedbackTitle = "Strong move.";
  feedbackBody = "Pausing to verify the mismatch protects the workflow without overreacting. This keeps the learner moving while reducing unnecessary risk.";
  feedbackTone = "strong";
}

else if (choice === "guess") {
  momentumChange = -20;
  feedbackTitle = "Momentum risk.";
  feedbackBody = "Guessing may feel faster, but it can create downstream issues. The better move is to confirm the mismatch before continuing.";
  feedbackTone = "risk";
}

else if (choice === "restart") {
  momentumChange = -10;
  feedbackTitle = "Understandable, but inefficient.";
  feedbackBody = "Restarting may solve the issue, but it adds unnecessary friction. A better first step is to verify the mismatch and use the available guidance.";
  feedbackTone = "redirect";
}

else {
  momentumChange = 0;
  feedbackTitle = "Choose a response first.";
  feedbackBody = "Select a decision to update the momentum meter and receive coaching feedback.";
  feedbackTone = "neutral";
}

var newMomentum = currentMomentum + momentumChange;

if (newMomentum > 100) {
  newMomentum = 100;
}

if (newMomentum < 0) {
  newMomentum = 0;
}

if (newMomentum >= 80) {
  momentumStatus = "Strong momentum";
}

else if (newMomentum >= 60) {
  momentumStatus = "Building useful momentum";
}

else if (newMomentum >= 40) {
  momentumStatus = "Momentum needs attention";
}

else {
  momentumStatus = "High friction zone";
}

player.SetVar("momentumScore", newMomentum);
player.SetVar("feedbackTitle", feedbackTitle);
player.SetVar("feedbackBody", feedbackBody);
player.SetVar("feedbackTone", feedbackTone);
player.SetVar("momentumStatus", momentumStatus);

Panduan pencetus

Cara untuk menyambungkannya dalam Storyline.

Cipta tiga butang keputusan. Setiap butang menetapkan selectedChoice pembolehubah kepada salah satu nilai yang digunakan dalam JavaScript: tebak, sahkan, atau mulakan semula.

Buat pembolehubah nombor yang dipanggil momentumScore dan tetapkan nilai lalai kepada 50. Ini memberikan pelajar ruang untuk bergerak naik atau turun.

Tambahkan butang hantar yang menjalankan JavaScript. Kemudian paparkan feedbackTitle, feedbackBody, momentumScore, dan momentumStatus menggunakan rujukan pembolehubah Storyline.

Langkah senior pilihan: gunakan feedbackTone dan momentumScore untuk mengubah keadaan objek. Contohnya, meter boleh beralih dari tenang kepada berhati-hati kepada geseran tinggi bergantung kepada momentum pelajar.

Nota reka bentuk

Kekalkan lapisan permainan sebagai perkhidmatan kepada matlamat pembelajaran.

Meter tidak seharusnya menjadi titik pengalaman. Ia seharusnya membantu pelajar menyedari sama ada keputusan mereka mencipta kejelasan, mengurangkan geseran, atau meningkatkan risiko.

Elakkan memberi ganjaran kepada kelajuan hanya kerana ia terasa seperti gamifikasi. Dalam banyak konteks tempat kerja, tingkah laku yang lebih kuat adalah memperlahankan pada masa yang tepat.

Versi terbaik corak ini membuat pelajar merasa seperti mereka sedang membina pertimbangan, bukan mengejar mata.

Sesuaikan ia

Sesuaikan penilaian untuk sepadan dengan tingkah laku yang ingin anda kukuhkan.

Gantikan pilihan contoh dengan keputusan dari senario anda sendiri. Setiap pilihan harus mempengaruhi momentum berdasarkan kualiti tingkah laku, bukan sama ada ia kedengaran jelas betul atau salah.

Anda boleh menyesuaikan perubahan momentum. Contohnya, keputusan yang kuat mungkin menambah 15 mata, keputusan berisiko mungkin mengurangkan 20, dan pilihan yang boleh difahami tetapi tidak cekap mungkin mengurangkan 5.

Anda juga boleh menggunakan logik yang sama di seluruh slaid untuk mencipta senario yang lebih panjang di mana pelajar membina atau kehilangan momentum dari semasa ke semasa.

Makmal Reka Bentuk

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.