Pilih prompt siap pakai untuk membantu membuat game interaktif dan media pembelajaran berbasis HTML dengan AI. Ganti bagian dalam tanda [ ] sesuai materi, kelas, dan kebutuhan Anda.
🧠
Prompt siap adaptasi
Bukan untuk disalin mentah—gunakan sebagai kerangka lalu sesuaikan dengan desain pembelajaran.
Cara menggunakan Bank Prompt: pilih prompt, ganti bagian [MATERI], [KELAS], [KONSEP], atau bagian lain sesuai kebutuhan, lalu salin ke AI yang Anda gunakan. Setelah kode dibuat, uji tombol, skor, reset, tampilan mobile, dan layar PID sebelum digunakan di kelas.
Buatkan satu file HTML All-in-One untuk game kuis pembelajaran bertema [MATERI] untuk murid [KELAS/JENJANG]. Gunakan HTML, CSS, dan JavaScript murni dalam satu file tanpa library eksternal. Buat tampilan modern, ramah layar sentuh/PID, responsif 16:9 dan mobile. Sediakan halaman pembuka, petunjuk bermain, 10 soal pilihan ganda, skor yang benar-benar menghitung jawaban benar, feedback benar/salah, progress soal, hasil akhir, tombol ulangi permainan, dan tombol reset yang menghapus hanya progres game ini dari localStorage. Semua soal dan jawaban harus mudah diedit di JavaScript.
🧲
Game Drag & Drop
Game Interaktif
Buatkan game pembelajaran drag-and-drop dalam satu file HTML All-in-One untuk materi [MATERI], kelas [KELAS]. Murid menyeret [OBJEK/KARTU] ke kategori atau pasangan yang benar. Gunakan HTML, CSS, dan JavaScript murni. Desain harus cocok digunakan pada PID: tombol besar, target drag luas, teks jelas, dan tetap berfungsi dengan sentuhan. Sediakan 3 level, skor, jumlah percobaan, feedback langsung, tombol ulang, dan reset. Pastikan validasi pasangan benar-benar bekerja.
🧠
Game Mencocokkan
Game Interaktif
Buatkan game matching card untuk materi [MATERI] dalam satu file HTML All-in-One. Pasangan kartu berupa [ISTILAH] dan [DEFINISI/CONTOH/GAMBAR]. Gunakan maksimal 8 pasangan per ronde, acak kartu setiap permainan, tampilkan jumlah langkah, skor, dan feedback. Kartu yang sudah cocok harus terkunci dan tidak bisa dipilih ulang. Desain ramah sentuhan untuk murid [KELAS/JENJANG].
🗺️
Game Misi/Petualangan
Game Interaktif
Buat game edukasi bertema petualangan untuk materi [MATERI] kelas [KELAS] dalam satu file HTML All-in-One. Buat alur linear dan terkunci: Pos 2 baru terbuka setelah Pos 1 selesai hingga 5 pos. Setiap pos memiliki tantangan berbeda seperti pilihan ganda, mencocokkan, urutan, drag-and-drop, dan kuis akhir. Simpan progres dengan localStorage dan sediakan tombol Reset Perjalanan yang hanya menghapus data game ini. Desain responsif dan nyaman digunakan pada PID.
🔐
Escape Room Edukasi
Game Interaktif
Buat game escape room edukasi dalam satu file HTML All-in-One untuk materi [MATERI], kelas [KELAS]. Buat 5 ruang/tantangan yang harus diselesaikan berurutan. Gunakan teka-teki berbasis materi, kode angka, pilihan jawaban, susun urutan, dan satu tantangan final. Tampilkan progress, petunjuk terbatas, skor, dan tombol reset. Pastikan semua jawaban dapat diedit dari satu objek data JavaScript.
🎡
Spin Wheel Tantangan
Game Interaktif
Buat game roda putar interaktif berbasis HTML untuk materi [MATERI] kelas [KELAS]. Roda berisi kategori pertanyaan/tantangan. Setelah roda berhenti, tampilkan soal sesuai kategori, feedback, skor, dan riwayat kategori yang sudah muncul agar tidak berulang terus. Gunakan HTML, CSS, dan JavaScript murni tanpa library eksternal. Desain harus besar dan nyaman disentuh pada PID.
📚
Media Pembelajaran All-in-One
Media HTML
Buat satu media pembelajaran interaktif All-in-One HTML untuk materi [MATERI], kelas [KELAS]. Semua HTML, CSS, dan JavaScript berada dalam satu file. Struktur: pembuka, tujuan pembelajaran, peta materi, materi inti, contoh, video embed opsional, latihan interaktif, kuis evaluasi, rangkuman, dan refleksi. Gunakan navigasi jelas, progress belajar, tombol sebelumnya/berikutnya, serta localStorage untuk menyimpan progres. Sediakan Reset Belajar yang hanya menghapus key milik media ini.
🔎
Media Eksplorasi Interaktif
Media HTML
Buat media pembelajaran HTML berbasis eksplorasi untuk topik [MATERI]. Jangan hanya membuat slide digital. Setiap bagian harus meminta murid melakukan sesuatu: memilih, menggeser, membuka hotspot, membandingkan, mengurutkan, atau menjawab pertanyaan. Tambahkan 5 zona eksplorasi, indikator progres, feedback, rangkuman, dan refleksi akhir. Desain harus mudah disentuh pada layar PID.
🧪
Simulasi Pembelajaran
Media HTML
Buat simulasi interaktif berbasis HTML untuk menjelaskan konsep [KONSEP]. Murid dapat mengubah 2–4 variabel melalui slider atau tombol dan melihat perubahan hasil secara langsung. Gunakan visual CSS/SVG/Canvas yang ringan, tanpa library eksternal. Sertakan petunjuk, pertanyaan prediksi, area pengamatan, tiga pertanyaan analisis, dan kesimpulan. Semua dalam satu file HTML dan responsif untuk PID.
🧭
Timeline Interaktif
Media HTML
Buat media timeline interaktif dalam satu file HTML untuk materi [MATERI]. Setiap titik timeline dapat diklik untuk membuka penjelasan, gambar/ilustrasi opsional, pertanyaan singkat, dan fakta penting. Tambahkan navigasi sebelumnya/berikutnya, indikator progres, serta mode presentasi yang nyaman digunakan pada PID. Semua data timeline harus mudah diedit di JavaScript.
📝
Generator Latihan & Evaluasi
Evaluasi
Buat media HTML All-in-One untuk latihan dan evaluasi materi [MATERI] kelas [KELAS]. Sediakan bank minimal 20 soal di JavaScript, tetapi setiap sesi mengambil 10 soal secara acak. Acak posisi opsi jawaban. Hitung skor berdasarkan jawaban benar, tampilkan pembahasan, rekap benar/salah, hasil akhir, Mulai Sesi Baru, dan Reset Semua Data. Jangan menghasilkan skor 100 jika ada jawaban salah.
✅
Exit Ticket / Refleksi Akhir
Evaluasi
Buat media HTML sederhana untuk exit ticket pembelajaran [MATERI] kelas [KELAS]. Sediakan 5 pertanyaan refleksi: hal yang dipahami, hal yang masih membingungkan, tingkat percaya diri, satu pertanyaan untuk guru, dan satu rencana tindak lanjut. Tambahkan skala 1–5, rangkuman jawaban di akhir, tombol simpan lokal, tombol cetak, dan reset. Desain harus ringan dan nyaman digunakan di HP maupun PID.
📁 Prompt Lengkap & Dokumen Pendukung
Jika nanti Anda memiliki prompt versi panjang dalam Word atau Google Docs, folder tersebut dapat ditautkan di sini sebagai pustaka tambahan. Bank Prompt di halaman ini tetap menjadi versi cepat yang bisa langsung disalin guru.
Tempat Menggunakan Prompt
Website AI untuk Membuat Game & Media Pembelajaran
Setelah memilih prompt, guru dapat menempelkannya ke salah satu platform berikut. Pilih sesuai kebutuhan: cepat membuat prototipe, melihat preview, mengedit kode, atau membuat pengalaman interaktif yang siap dibagikan.
🎨
Mudah untuk Guru
Canva Code
Cocok untuk membuat kuis, mini-game, dan elemen interaktif langsung di ekosistem Canva. Hasilnya mudah dipoles secara visual dan bisa dipakai dalam desain atau website Canva.
Cocok untuk membuat aplikasi, game, kuis interaktif, dan halaman web dari instruksi bahasa alami. Praktis untuk guru yang ingin mencoba ide dengan cepat.
Cocok untuk membuat dan menguji aplikasi web dengan Gemini. Mode Build dapat menghasilkan project aplikasi lengkap, preview langsung, dan memungkinkan pengembangan lebih lanjut.
Dapat digunakan untuk membuat landing page, materi belajar, mini-game, dan kode berbasis prompt. Berguna sebagai alternatif untuk mencoba hasil dari model GLM.
Cocok untuk menyusun struktur HTML, memperbaiki bug, menyempurnakan logika skor, reset, localStorage, dan tampilan responsif sebelum media digunakan di PID.
Saran untuk guru: untuk pemula, mulai dari Canva Code atau Gemini Canvas. Jika ingin mengembangkan aplikasi lebih jauh, gunakan Google AI Studio, ChatGPT, Z.ai, atau Claude. Apa pun platformnya, selalu uji tombol, skor, reset, navigasi, tampilan HP, dan layar PID sebelum dipakai di kelas.
