Ingin membuat media pembelajaran yang menarik seperti game petualangan? Dengan bantuan ChatGPT atau Gemini, kita bisa membuat Digital Escape Room, yaitu permainan edukatif di mana peserta didik harus memecahkan teka-teki, menyelesaikan misi, dan membuka ruangan demi ruangan untuk mencapai tujuan.
Pada tutorial ini, kita akan membuat media pembelajaran Escape Room menggunakan HTML, CSS, dan JavaScript. Tidak perlu menggunakan Lovable, tidak perlu database, tidak perlu API berbayar, dan tidak perlu berlangganan hosting.
🎯 Tujuan Pembuatan
Menghasilkan media pembelajaran interaktif dengan karakteristik:
Tampilan game futuristik dan profesional.
Memiliki cerita petualangan yang menarik.
Terdiri dari beberapa level atau ruangan.
Menggunakan teka-teki dan tantangan interaktif.
Memiliki sistem skor, timer, dan petunjuk.
Memberikan umpan balik otomatis.
Dapat dimainkan melalui laptop maupun smartphone.
📝 PROMPT SIAP PAKAI
Salin seluruh prompt berikut, kemudian tempelkan ke ChatGPT atau Gemini.
PERAN AI
Bertindaklah sebagai Senior Game Developer, UI/UX Designer, dan Instructional Designer yang ahli dalam mengembangkan media pembelajaran interaktif berbasis web.
Saya ingin membuat sebuah media pembelajaran berbentuk DIGITAL ESCAPE ROOM yang memiliki pengalaman bermain seperti game petualangan profesional.
1. IDENTITAS MEDIA
Nama media: ESCAPE ROOM – THE DIGITAL MYSTERY
Mata pelajaran: Informatika
Materi: Berpikir Komputasional
Sasaran: Peserta didik SMA
Bahasa: Indonesia
Platform: Web Browser
Teknologi: HTML5, CSS3, dan JavaScript murni.
2. KONSEP PERMAINAN
Peserta didik berperan sebagai penjelajah yang terjebak di sebuah laboratorium teknologi rahasia. Untuk keluar dari laboratorium, pemain harus menyelesaikan lima ruangan tantangan.
Setiap ruangan memiliki teka-teki yang berkaitan dengan materi Berpikir Komputasional.
Buat cerita yang menarik, misterius, dan membuat pemain penasaran untuk melanjutkan permainan.
3. DESAIN VISUAL DAN UI/UX
Buat tampilan yang sangat menarik, modern, premium, dan profesional dengan karakteristik:
Tema futuristic digital laboratory.
Dominasi warna dark navy, hitam, cyan, dan electric blue.
Efek neon glow yang elegan.
Background dengan animasi partikel atau grid digital.
Glassmorphism pada panel dan kartu.
Animasi transisi antarhalaman.
Ikon modern.
Tipografi modern dan mudah dibaca.
Responsive untuk laptop, tablet, dan smartphone.
Hindari tampilan seperti formulir atau website sekolah biasa. Buat pengalaman visual seperti game petualangan digital.
4. HALAMAN PEMBUKA
Buat halaman pembuka dengan:
Judul besar THE DIGITAL MYSTERY.
Subjudul: Escape the Lab, Unlock Your Mind.
Ilustrasi laboratorium digital futuristik.
Tombol MULAI PETUALANGAN.
Petunjuk permainan.
Identitas mata pelajaran dan kelas.
5. ALUR PERMAINAN
Buat lima level permainan:
LEVEL 1 – THE CODE ROOM
Materi: Dekomposisi.
Pemain harus memecah masalah kompleks menjadi bagian-bagian kecil.
LEVEL 2 – PATTERN DETECTOR
Materi: Pengenalan Pola.
Pemain harus menemukan pola dari deretan angka atau gambar.
LEVEL 3 – ABSTRACTION CHAMBER
Materi: Abstraksi.
Pemain harus menentukan informasi penting dan mengabaikan informasi yang tidak relevan.
LEVEL 4 – ALGORITHM LAB
Materi: Algoritma.
Pemain harus menyusun langkah-langkah logis untuk menyelesaikan suatu masalah.
LEVEL 5 – THE FINAL GATE
Materi: Integrasi Berpikir Komputasional.
Pemain harus menyelesaikan tantangan akhir yang menggabungkan keempat konsep sebelumnya.
Setiap level harus memiliki:
Narasi cerita.
Instruksi tantangan.
Ilustrasi atau visual pendukung.
Interaksi permainan.
Jawaban atau pilihan yang dapat dipilih.
Tombol periksa jawaban.
Petunjuk jika pemain mengalami kesulitan.
Feedback benar atau salah.
Kode rahasia untuk membuka level berikutnya.
Jangan membuat semua level hanya berupa soal pilihan ganda. Variasikan interaksi seperti drag and drop, menyusun urutan, mencocokkan pola, memasukkan kode, dan memecahkan teka-teki.
6. GAME MECHANICS
Implementasikan:
Sistem progres lima level.
Skor berdasarkan jawaban benar.
Nyawa atau kesempatan menjawab.
Timer permainan.
Petunjuk dengan konsekuensi pengurangan skor.
Kunci dan kode rahasia.
Animasi ketika berhasil membuka ruangan.
Efek kemenangan saat semua level selesai.
Tombol ulangi permainan.
Pastikan setiap interaksi benar-benar berfungsi.
7. HALAMAN AKHIR
Setelah pemain berhasil menyelesaikan semua level, tampilkan:
Animasi kemenangan.
Ucapan selamat.
Total skor.
Waktu penyelesaian.
Jumlah petunjuk yang digunakan.
Persentase keberhasilan.
Ringkasan hasil belajar.
Tombol main lagi.
8. FITUR TAMBAHAN
Semua teks menggunakan bahasa Indonesia.
Berikan instruksi yang mudah dipahami murid.
Berikan umpan balik edukatif untuk setiap jawaban.
Simpan progres permainan menggunakan localStorage.
Sediakan tombol lanjutkan permainan.
Sediakan tombol reset permainan.
Jangan memerlukan login.
Jangan memerlukan API key.
Jangan menggunakan database eksternal.
Jangan menggunakan layanan berbayar.
9. TEKNIS PEMBUATAN
Buat aplikasi dalam satu file bernama index.html.
Seluruh HTML, CSS, dan JavaScript harus berada dalam satu file tersebut.
Gunakan JavaScript murni tanpa framework.
Hindari ketergantungan pada library eksternal. Gunakan CSS dan SVG inline untuk visual apabila memungkinkan.
Pastikan aplikasi:
Dapat dibuka langsung melalui browser.
Dapat berjalan secara offline setelah file tersimpan.
Tidak menghasilkan error JavaScript.
Berfungsi pada browser desktop dan smartphone.
Memiliki navigasi yang jelas.
Tidak ada tombol yang sekadar dekorasi.
10. INSTRUKSI OUTPUT
Langsung buatkan kode lengkap index.html.
Jangan hanya memberikan contoh potongan kode atau penjelasan konsep.
Pastikan semua level permainan sudah memiliki soal, jawaban, validasi, petunjuk, dan feedback yang berfungsi.
Prioritaskan kualitas visual, pengalaman bermain, dan kualitas pembelajaran.
Hasil akhir harus terasa seperti game edukasi profesional, bukan sekadar kuis online biasa.
🚀 CARA MENGGUNAKAN PROMPT
Buka ChatGPT atau Gemini.
Salin prompt di atas.
Tempelkan pada kolom percakapan AI.
Tunggu sampai AI menghasilkan kode HTML.
Simpan kode dengan nama
index.html.Buka file tersebut menggunakan Google Chrome.
Uji semua level permainan.
💡 TIPS PENGEMBANGAN
Jika hasil pertama belum sesuai harapan, minta AI melakukan revisi dengan instruksi seperti:
Perbaiki desain agar lebih premium dan futuristik.
Tambahkan animasi transisi dan efek suara.
Buat teka-teki lebih bervariasi.
Pastikan seluruh tombol dan interaksi berfungsi.
Perbaiki tampilan smartphone.
Pastikan semua jawaban dan sistem skor berjalan dengan benar.
Selamat mencoba! Mari berkreasi membuat media pembelajaran interaktif yang lebih menyenangkan dengan bantuan AI.
Salam berbagi dan terus berinovasi dalam pendidikan.
0 Response to "PROMPT AI: Membuat Media Pembelajaran Escape Room Interaktif Berbasis Web (Gratis 100%)"
Posting Komentar