✨ Media Pembelajaran Inovatif • AI & Gamifikasi

Prompt Untuk Membuat Game Ular Tangga di Canvas Gemini

Panduan lengkap menghadirkan pembelajaran menyenangkan berbasis permainan (Game-Based Learning) untuk semua jenjang dan mata pelajaran hanya dengan satu Master Prompt.

🎯 Mengenal Apa Itu Game-Based Learning (GBL)

Game-Based Learning (GBL) atau Pembelajaran Berbasis Permainan adalah metode pendekatan pedagogis yang mengintegrasikan unsur, mekanika, dan dinamika permainan (game) secara langsung ke dalam proses belajar-mengajar guna mencapai tujuan pembelajaran tertentu. Berbeda dengan permainan hiburan biasa, setiap aturan, tantangan, skor, dan alur di dalam GBL dirancang secara sengaja untuk membantu peserta didik memahami konsep materi, melatih pemecahan masalah, serta menguji penguasaan kompetensi.

Dalam konteks kelas modern, permainan klasik seperti Ular Tangga Edukasi Interaktif yang dipadukan dengan kuis diskusi kelompok mampu mengubah suasana belajar yang pasif menjadi aktif, kompetitif secara sehat, dan berpusat pada siswa (student-centered learning).

💡 Mengapa Game-Based Learning Efektif di Kelas?

Saat bermain sambil belajar, siswa tidak merasa sedang diuji secara menegangkan. Mereka berdiskusi dengan rekan satu tim untuk memecahkan soal agar pion kelompoknya dapat melangkah maju menuju kotak 100. Proses ini secara alami mengaktifkan aspek kognitif, afektif, dan sosial siswa secara bersamaan.

🔥

Meningkatkan Motivasi & Fokus

Tantangan lemparan dadu, kejutan naik tangga, dan ketegangan menghindari ular menjaga antusiasme siswa dari awal hingga akhir jam pelajaran.

🤝

Kolaborasi & Diskusi Tim

Mendorong kerja sama antarsiswa dalam satu kelompok untuk mendiskusikan jawaban yang paling tepat sebelum waktu habis.

🧠

Umpan Balik Instan

Setiap kali siswa menjawab soal, sistem langsung menampilkan pembahasan sehingga miskonsepsi materi dapat segera diluruskan.

🌍

Fleksibel Semua Mapel

Dapat diterapkan pada jenjang PAUD, SD, SMP, hingga SMA/SMK untuk Matematika, IPA, PAI, Bahasa, IPS, maupun PPKn.

🚀 Cara Menggunakan Prompt di Canvas Gemini

Ikuti 4 langkah mudah berikut untuk membuat aplikasi gim HTML5 mandiri:

Klik tombol "Salin Master Prompt" pada kotak kode di bawah ini.
Buka Google Gemini (gemini.google.com) dan aktifkan fitur Canvas pada kolom input.
Tempelkan (Paste) seluruh isi prompt, lalu tekan Kirim (Enter).
Gemini akan menghasilkan satu file kode aplikasi utuh yang dapat langsung Anda mainkan di fitur Preview maupun diunduh menjadi file .html untuk dijalankan secara Offline di laptop atau Smartboard kelas!

📋 Master Prompt Game Ular Tangga Edukasi Universal

Berikut adalah Master Prompt versi revisi dan optimasi penuh yang sudah dilengkapi sistem 5 Tema Visual, pengaturan Bank Soal (Tambah/Edit/Hapus/Impor/Ekspor CSV & JSON), fitur Timer Kuis, serta paket soal lintas mata pelajaran:

MASTER PROMPT: EDU ULAR TANGGA INTERAKTIF (SEMUA JENJANG & MAPEL)

# MASTER PROMPT APLIKASI GIM ULAR TANGGA EDUKASI INTERAKTIF (VERSI UNIVERSAL: SEMUA JENJANG & MATA PELAJARAN)

Buat sebuah aplikasi gim edukasi interaktif berbasis web bernama **EDU ULAR TANGGA NUSANTARA (atau judul dinamis yang dapat diubah sepenuhnya oleh guru)** menggunakan HTML5, CSS3, dan JavaScript dalam satu berkas mandiri (*single-file offline-ready*). Aplikasi ini dirancang sebagai media pembelajaran lintas disiplin ilmu yang dapat digunakan oleh guru pada **semua jenjang pendidikan (PAUD/TK, SD/MI, SMP/MTs, SMA/MA/SMK)** dan **semua mata pelajaran**. Guru harus dapat menentukan sendiri tema visual, jenjang, mata pelajaran, topik, tujuan pembelajaran, aturan main, dan bank soal yang digunakan. Aspek rasio utama aplikasi adalah **16:9 (Landscape)**.

---

## 1. Tujuan Aplikasi
* Aplikasi digunakan sebagai media pembelajaran berbasis permainan (*gamification*) untuk meningkatkan keterlibatan, kolaborasi tim, motivasi belajar, dan pemahaman konsep siswa terhadap materi pelajaran.
* Permainan dimainkan secara bergiliran oleh **2 hingga 4 kelompok (default: 2 kelompok)** di depan kelas (melalui proyektor/Interactive Flat Panel) maupun pada perangkat masing-masing kelompok.
* Aplikasi bersifat **100% agnostik terhadap mata pelajaran** (tidak terkunci pada satu topik tertentu) sehingga seluruh konten teks, soal, dan nuansa visual dikendalikan dari menu Pengaturan Guru.

---

## 2. Desain Antarmuka & Sistem Multi-Tema (Adaptif Lintas Mapel)
Gunakan desain yang modern, bersih, interaktif, dan responsif dengan susunan tata letak rasio 16:9:
* **Bagian Atas (Header):** Logo dinamis, judul kegiatan pembelajaran, badge jenjang & mata pelajaran, pemilih tema visual cepat, tombol suara, tombol jeda (*pause*), tombol rekap skor, tombol **Pengaturan Guru**, tombol mulai ulang (*reset*), dan tombol layar penuh (*fullscreen*).
* **Panel Kiri (35% Lebar Layar):**
  * Kartu identitas materi (Mata Pelajaran, Jenjang/Kelas, Topik, dan tombol rincian Tujuan Pembelajaran).
  * Kartu status masing-masing kelompok (Nama kelompok, ikon pion, posisi kotak saat ini, skor akademik, serta jumlah jawaban benar/salah).
  * Area kontrol dadu 3D interaktif, indikator giliran aktif, dan tombol **Lempar Dadu**.
  * Kotak pengumuman status permainan dan riwayat pergerakan pion (*game log*).
* **Panel Kanan (65% Lebar Layar):** Papan ular tangga proporsional berukuran besar yang memuat tepat 100 kotak.
* **Bagian Bawah (Footer):** Ringkasan aturan main, informasi jumlah ular dan tangga, serta tombol panduan penggunaan.

### Fitur Pemilihan Tema Visual (Theme Switcher)
Agar sesuai dengan berbagai mata pelajaran dan usia siswa, sediakan minimal **5 Pilihan Tema Visual** di Pengaturan Guru:
1. **Tema Akademik Modern (Default):** Perpaduan biru tua, sian, putih, dan aksen emas (cocok untuk semua mapel umum SMP/SMA).
2. **Tema Sains & Antariksa:** Perpaduan ungu kosmik, biru neon, dan ilustrasi planet/atom (cocok untuk IPA, Fisika, Kimia, Matematika, Informatika).
3. **Tema Alam & Eksplorasi:** Perpaduan hijau zamrud, krem tanah, dan ilustrasi flora/petualangan (cocok untuk Biologi, IPS, Geografi, SD).
4. **Tema Budaya & Literasi:** Perpaduan merah marun/terakota, emas hangat, dan ornamen buku/nusantara (cocok untuk Bahasa Indonesia, Bahasa Inggris, Sejarah, PPKn, Seni).
5. **Tema Religi / Islami:** Perpaduan hijau zamrud, ungu, kuning keemasan, dan siluet masjid/kaligrafi (cocok untuk Pendidikan Agama).

> **Catatan Penting Visual:** Elemen dekoratif latar belakang tidak boleh menutupi nomor kotak, pion, ular, tangga, tombol, atau teks soal.

---

## 3. Spesifikasi Papan Ular Tangga 100 Kotak
* Terdiri dari tepat **100 kotak** bernomor **1 sampai 100**.
* **Kotak 1** adalah titik awal (*Start*) dan **Kotak 100** adalah garis finis (*Finish*).
* Nomor kotak disusun dengan pola **zig-zag (*boustrophedon*) standar**: baris ke-1 dari bawah (1–10) bergerak dari kiri ke kanan, baris ke-2 dari bawah (11–20) bergerak dari kanan ke kiri, dan seterusnya secara bergantian hingga kotak 100 di baris paling atas.
* Setiap kotak memiliki warna selang-seling yang harmonis sesuai tema aktif agar mudah dibedakan.
* Gambar ilustrasi **Tangga** dan **Ular 3D** secara proporsional menggunakan **SVG** di atas papan:
  * **Tangga:** Menghubungkan kotak bernomor rendah (pangkal tangga) ke kotak bernomor lebih tinggi (ujung tangga).
  * **Ular:** Menghubungkan kotak bernomor tinggi (kepala ular) ke kotak bernomor lebih rendah (ekor ular).
  * Tambahkan indikator kecil pada kotak pangkal tangga (misal: `🪜↗46`) dan kepala ular (misal: `🐍↘18`) agar siswa tetap dapat membaca peta papan dengan sangat jelas.

---

## 4. Menu Pengaturan Guru yang Fleksibel
Buat jendela modal **Pengaturan Guru** dengan sistem tab yang memungkinkan guru mengatur:
1. **Identitas Pembelajaran:**
   * Nama Permainan / Judul Kegiatan.
   * Pemilihan Tema Visual Aplikasi.
   * Jenjang Pendidikan (PAUD/TK, SD/MI, SMP/MTs, SMA/MA/SMK) & Kelas.
   * Nama Mata Pelajaran.
   * Topik / Bab Pembelajaran.
   * Tujuan Pembelajaran / Capaian Pembelajaran (mendukung banyak poin).
   * Petunjuk atau aturan tambahan khusus di kelas.
2. **Konfigurasi Kelompok:**
   * Nama masing-masing kelompok.
   * Pilihan ikon/karakter pion yang beragam (misal: 🚀, 🔬, 📖, 🏆, ⭐, 🦁, 🎓, 🕌, 🎨, 🌍).
3. **Pengaturan Mekanisme Kuis & Papan:**
   * Timer Diskusi Soal (Tanpa Batas Waktu, 15 detik, 30 detik, 60 detik, atau 90 detik) — sangat berguna untuk melatih kecepatan berpikir siswa SMP/SMA.
   * Filter tingkat kesulitan soal (Semua, Mudah, Sedang, Sulit).
   * Opsi pengacakan urutan soal dan pengacakan posisi opsi jawaban (A/B/C/D).
   * Aturan Kotak 100: Pilihan antara **"Angka Dadu Pas"** (jika lebih dari 100 maka diam di tempat) atau **"Pantul Mundur (*Bounce Back*)"** (jika lebih dari 100 maka kelebihan langkah memantul mundur).

---

## 5. Fitur Bank Soal & Paket Preset Lintas Mapel
* Setiap butir soal mendukung:
  * Jenis soal: **Pilihan Ganda (A, B, C, D)** atau **Benar/Salah**.
  * Tingkat kesulitan: **Mudah, Sedang, Sulit** (dengan opsi bobot skor berbeda, misal Mudah +10, Sedang +15, Sulit +20, atau rata +10).
  * Teks pertanyaan (mendukung teks panjang maupun penulisan notasi ilmiah/matematika dasar).
  * Pilihan jawaban dan Kunci Jawaban yang valid.
  * Pembahasan / umpan balik edukatif yang muncul setelah kelompok menjawab.
* Guru dapat **Menambah, Mengedit, Menghapus, dan Mengosongkan** daftar soal secara langsung melalui antarmuka.
* Sediakan fitur **Ekspor dan Impor Bank Soal** dalam format **JSON** dan **CSV** agar guru dapat menyiapkan soal di Microsoft Excel/Google Sheets lalu mengunggahnya ke aplikasi.
* **Paket Contoh Siap Pakai (Preset):** Sediakan tombol muat cepat contoh bank soal untuk berbagai jenjang dan mata pelajaran (misal: *Matematika, IPA/Sains, Bahasa Indonesia, Bahasa Inggris, IPS/PPKn, dan Pendidikan Agama*) agar guru dapat langsung menguji coba aplikasi.

---

## 6. Mekanisme Permainan & Sistem Skor
1. Seluruh kelompok memulai dari **Kotak 1** dengan **Skor Akademik 0**.
2. Kelompok yang sedang mendapat giliran menekan tombol **Lempar Dadu**.
3. Dadu menampilkan animasi putaran dan menghasilkan angka acak murni **1 sampai 6**.
4. Sistem menampilkan jendela **Soal Interaktif** (beserta penghitung waktu mundur jika timer diaktifkan).
5. Kelompok berdiskusi dan memilih satu jawaban:
   * **Jika Jawaban Benar:** Muncul apresiasi dan pembahasan, Skor Akademik kelompok bertambah, lalu pion bergerak maju **satu demi satu kotak** (dengan animasi transisi halus) sejumlah angka dadu.
   * **Jika Jawaban Salah (atau Waktu Habis):** Muncul pembahasan jawaban yang benar, pion **tidak bergerak**, dan giliran langsung berpindah ke kelompok berikutnya.
6. **Pemeriksaan Ular & Tangga:**
   * Jika pergerakan pion berakhir tepat di **pangkal tangga**, tampilkan pesan dan animasikan pion naik ke ujung tangga.
   * Jika pergerakan pion berakhir tepat di **kepala ular**, tampilkan pesan motivasi dan animasikan pion turun ke ekor ular.
   * Jika pion hanya melewati kotak ular/tangga tanpa berhenti di sana, tidak terjadi efek apa pun.
7. **Visualisasi Pion di Kotak yang Sama:** Jika dua atau lebih pion berada di nomor kotak yang sama, atur posisi *offset* visualnya agar seluruh pion tetap terlihat berdampingan dan tidak saling menutupi.
8. **Pemisahan Posisi vs Skor Akademik:** Bedakan secara tegas antara **Posisi Kotak (1–100)** dan **Skor Akademik (akumulasi poin jawaban benar)** agar guru dapat menilai pemahaman akademik kelompok secara objektif meskipun kelompok tersebut sering terkena ular.

---

## 7. Aturan Kemenangan & Rekapitulasi Akhir
* Permainan berakhir saat salah satu kelompok mencapai **Kotak 100**.
* Hentikan permainan, mainkan efek suara kemenangan, dan tampilkan **Modal Kemenangan & Rekapitulasi Capaian Belajar**:
  * Menampilkan Juara Papan (pencapai kotak 100 tercepat) sekaligus peraih **Skor Akademik Tertinggi**.
  * Tabel perbandingan posisi akhir, total skor akademik, jumlah jawaban benar, jumlah jawaban salah, dan persentase ketepatan menjawab tiap kelompok.
  * Tombol **Main Lagi**, **Unduh Hasil Rekap (CSV/Cetak)**, dan **Kembali ke Papan**.

---

## 8. Ketentuan Teknis & Pengujian Kualitas
* Gunakan HTML5, CSS3 (boleh menggunakan Tailwind CSS CDN dengan *fallback* CSS internal), dan Vanilla JavaScript dalam **satu berkas `.html` mandiri** yang dapat dijalankan secara *offline* tanpa instalasi server atau API key.
* Gunakan **Web Audio API** (suara sintetis internal) untuk efek suara lemparan dadu, langkah pion, jawaban benar/salah, naik tangga, turun ular, dan kemenangan agar aplikasi tidak bergantung pada berkas audio eksternal.
* Simpan perubahan konfigurasi guru dan bank soal pada `localStorage` peramban agar tidak hilang saat halaman dimuat ulang (*refresh*).
* Pastikan tombol **Lempar Dadu** terkunci (*disabled*) selama animasi dadu, jendela kuis, atau animasi langkah pion sedang berlangsung untuk mencegah *bug* klik ganda.

✅ Prompt berhasil disalin! Siap ditempel di Canvas Gemini.

```

misslena.sch.id

Prompt Untuk Membuat Game Ular Tangga