Carta dalam kandungan pembelajaran harus melakukan lebih daripada sekadar menghias skrin.
Mereka boleh menunjukkan kemajuan, risiko, keyakinan, kesediaan, pertukaran, hasil senario, kesihatan sistem, dan akibat keputusan.
Masalahnya adalah banyak blok carta terbina dalam terasa statik dan umum. Mereka menunjukkan data, tetapi jarang terasa terhubung dengan momen pembelajaran.
Kit Gerakan Carta adalah pek corak ringan untuk mencipta komponen carta animasi yang responsif yang terasa lebih disengajakan dalam Rise, Storyline, atau halaman pembelajaran berasaskan web yang berdiri sendiri.
Pek Corak
Gunakan gerakan untuk memudahkan pemahaman data pembelajaran.
Pek ini termasuk carta bar animasi, kad metrik, cincin kemajuan, carta perbandingan, dan visual hasil senario. Tujuannya bukan teater papan pemuka. Tujuannya adalah maklum balas yang lebih jelas, debrief yang lebih baik, dan penjelasan visual yang lebih berguna.
Pratonton Langsung
Corak carta animasi untuk skrin pembelajaran.
Ketik butang untuk mengulang animasi atau menukar data sampel. Corak ini boleh disesuaikan untuk debrief, papan pemuka, maklum balas senario, pemeriksaan kesediaan, dan visual sokongan prestasi.
Carta bar metrik pembelajaran animasi
Gunakan ini apabila pelajar perlu membandingkan kesediaan, keyakinan, risiko, atau dimensi prestasi.
Kad metrik animasi
Gunakan ini untuk statistik ringkasan, isyarat penyelesaian, atau hasil debrief.
Cincin kemajuan
Gunakan ini untuk keyakinan, kesediaan, penyelesaian, atau gambaran kesihatan sistem.
Carta perbandingan sebelum / selepas
Gunakan ini untuk menunjukkan bagaimana reka bentuk pembelajaran yang lebih baik mengubah geseran, keyakinan, kesediaan, atau kualiti sokongan.
Kursus sebagai acara
Pembelajaran sebagai sistem
Debrief hasil senario
Gunakan ini selepas aktiviti berasaskan pilihan untuk menunjukkan bagaimana keputusan pelajar mempengaruhi pelbagai dimensi.
Debrief senario
Mainkan semula animasi atau tukar senario untuk melihat bagaimana corak ini dapat menyokong debrief pelajar.
Terbaik Untuk
Di mana pek corak ini berfungsi dengan baik.
Debrief senario
Tunjukkan bagaimana keputusan pelajar mempengaruhi kepercayaan, kelajuan, kualiti, risiko, keyakinan, atau pertukaran realistik lain.
Semakan kesediaan
Visualisasikan keyakinan, persediaan, kualiti sokongan, atau jurang pengetahuan sebelum pelajar bergerak ke kerja sebenar.
Papan pemuka pembelajaran
Cipta papan pemuka ringan untuk kesihatan sistem, kemajuan pengenalan, pengukuhan, atau penggunaan sokongan prestasi.
Infografik interaktif
Jadikan data terasa seperti sebahagian daripada penjelasan dan bukannya hiasan statik yang disisipkan di tengah-tengah pelajaran.
Nota Reka Bentuk
Gerakan harus menjelaskan, bukan melakukan jazz hands.
Carta animasi berfungsi dengan baik apabila gerakan membantu pelajar memahami perubahan, perbandingan, akibat, atau kemajuan. Animasi harus memudahkan momen pembelajaran dibaca, bukan menjadikan skrin seperti kasino kecil.
Gunakan dimensi yang bermakna
Pilih label yang berkaitan dengan tugas: risiko, keyakinan, kejelasan, kesediaan, sokongan, kepercayaan, kelajuan, atau kualiti.
Animasi perubahan
Gunakan gerakan untuk menunjukkan bagaimana nilai berkembang, menyusut, membandingkan, atau bertindak balas terhadap keputusan pelajar.
Kekalkan carta yang boleh dibaca
Label pendek, nilai jelas, dan animasi yang sederhana mengatasi kompleksiti hiasan hampir setiap masa.
Pasangkan data dengan bimbingan
Carta menunjukkan apa yang berlaku. Maklum balas harus menerangkan mengapa ia penting dan apa yang perlu dilakukan seterusnya.
Kod Permulaan
Salin permulaan carta bar animasi yang sederhana.
Versi permulaan ini sengaja kecil. Gunakannya di dalam halaman web, penyematan Rise luaran, halaman S3/CloudFront, atau sebagai titik permulaan untuk nilai yang dipacu JavaScript Storyline.
<div class="learning-chart">
<div class="chart-row">
<span>Clarity</span>
<div class="track"><div class="fill" data-value="82"></div></div>
</div>
<div class="chart-row">
<span>Confidence</span>
<div class="track"><div class="fill" data-value="68"></div></div>
</div>
</div>
<style>
.learning-chart {
display: grid;
gap: 18px;
padding: 24px;
border-radius: 24px;
background: #ffffff;
border: 1px solid rgba(15,23,42,.08);
}
.chart-row {
display: grid;
gap: 8px;
}
.chart-row span {
font: 800 13px/1.2 system-ui, sans-serif;
letter-spacing: .08em;
text-transform: uppercase;
color: #111827;
}
.track {
height: 14px;
overflow: hidden;
border-radius: 999px;
background: rgba(15,23,42,.08);
}
.fill {
width: 0%;
height: 100%;
border-radius: 999px;
background: linear-gradient(135deg, #2563eb, #7c3aed, #14b8a6);
transition: width .8s ease;
}
</style>
<script>
document.querySelectorAll(".fill").forEach(function(bar) {
const value = bar.getAttribute("data-value");
requestAnimationFrame(function() {
bar.style.width = value + "%";
});
});
</script>Nota Pembinaan
Cara untuk menyesuaikan ini untuk Rise, Storyline, atau halaman web berdiri sendiri.
Dalam Rise, ini berfungsi dengan baik sebagai halaman HTML yang dihoskan secara luaran yang disisipkan atau dipautkan dari pelajaran. Anda boleh menghoskan halaman di S3, CloudFront, GitHub Pages, Netlify, atau pilihan penghosan statik lain.
Dalam Storyline, idea yang sama boleh disambungkan kepada pembolehubah. Gunakan pembolehubah Storyline untuk nilai seperti keyakinan, risiko, atau skor, kemudian gunakan JavaScript untuk mengemas kini lebar carta, peratusan cincin, atau nilai metrik.
Untuk pembelajaran berasaskan web berdiri sendiri, corak ini boleh menjadi sebahagian daripada papan pemuka yang lebih besar, skrin debrief, panduan lapangan, atau infografik interaktif.
Visual data yang lebih baik dapat menjadikan pembelajaran terasa lebih hidup.
Bukan kerana setiap pelajaran memerlukan papan pemuka. Tetapi kadang-kadang cara terbaik untuk menerangkan kemajuan, risiko, keyakinan, atau akibat adalah dengan membiarkan pelajar melihatnya bergerak.