Prompt Untuk Membuat Game Kamera Benar Salah
Interactive WebRTC Game • Media Pembelajaran Offline
Prompt untuk Membuat Game Kamera
Master Prompt siap pakai untuk membangun aplikasi web interaktif "Game Kamera Benar atau Salah" berasio 16:9 yang 100% berjalan offline di Papan Interaktif Digital (IFP/PID), Laptop, PC, dan Tablet.
Permainan edukasi berbasis kamera (WebRTC Live Camera Feed) mengajak siswa bergerak aktif di depan layar untuk memilih area jawaban A. BENAR atau B. SALAH. Dengan prompt di bawah ini, Anda dapat menghasilkan aplikasi game satu file (index.html) yang sudah dilengkapi fitur Pengaturan Guru, Bank Soal (CRUD & LocalStorage), Timer Otomatis, serta efek suara sintetis tanpa memerlukan koneksi internet saat dimainkan di kelas.
Cara Pakai: Klik tombol "Salin Prompt" di bawah, lalu tempelkan ke Gemini AI, Google AI Studio, ChatGPT, atau Claude untuk menghasilkan kode gamenya.
Master Prompt: Game Kamera Benar atau Salah
Klik tombol di samping untuk menyalin keseluruhan isi prompt secara utuh.
GAME KAMERA BENAR SALAH. REVISI. TANPA SANDI.docx Buatkan sebuah aplikasi web single-file (index.html) interaktif untuk media pembelajaran berbasis game bernama "GAME KAMERA BENAR ATAU SALAH". Aplikasi ini didesain khusus untuk layar landscape 16:9, mendukung tampilan Fullscreen, dan dapat dijalankan 100% offline di Browser tanpa butuh server/build tools pada perangkat digital seperti Laptop, Komputer PC, Tablet, Papan Interaktif Digital, dan HP. Gunakan stack teknologis: HTML5 & CSS3 (Tailwind CSS via CDN atau murni CSS mandiri terintegrasi) Vanilla JavaScript (Tanpa framework eksternal yang memerlukan koneksi internet aktif setelah disimpan) Lucide Icons / FontAwesome (SVG inline) WebRTC API untuk pengaksesan Kamera (offline-ready) Berikut adalah struktur halaman dan spesifikasi fitur detail yang wajib dibuat: --- ### 1. KETENTUAN TAMPILAN & DESAIN (LAYOUT 16:9 & FULLSCREEN) Rasio layar optimal 16:9 (Landscape) dengan UI modern, bersih, warna menarik (child/student friendly), serta kontras tinggi agar jelas dibaca di papan interaktif (IFP/PID). Terdapat nama Creator dibagian tengah bawah aplikasi bernama “Samrin Umasugi” Terdapat tombol "Layar Penuh" (Fullscreen toggle) di pojok kanan atas yang selalu terjangkau di setiap halaman, jangan ada tombol layar penuh pada bagian yang lain. Setelah klik tombol layar penuh dan tampilan aplikasi web sudah pada posisi tampilan layar penuh, maka tombol layar penuh akan otomatis berubah menjadi tombol Keluar Layar Penuh. Tampilan kamera berukuran 15:6 Saat aplikasi pertama kali dibuka (secara offline/online), tampilkan halaman beranda ### 3. HALAMAN BERANDA (UTAMA) Menampilkan Judul Aplikasi: **"GAME KAMERA BENAR ATAU SALAH"** Di beranda terdapat panel kontrol dan tombol navigasi berikut: Panel Informasi/Pengaturan Cepat: - Kolom Info "Jumlah Soal : 10 Soal" (Otomatis menyesuaikan jumlah soal aktif/terpilih). - Kolom Info "Waktu Soal : 10 Detik per soal" (Dapat disesuaikan di Pengaturan Guru). 2. Tombol Utama: - **[Mulai Game]**: Memulai permainan (Tombol nonaktif/disabled jika Bank Soal kosong atau kurang dari syarat minimal). Jika klik tombol memulai game dan game sudah berjalan maka secara otomatis akan muncul tombol Hentikan Game di sudut kiri atas sejajar dengan tombol layar penuh. Tombol hentikan game berfungsi untuk menghentikan game atau permainan. Jika tombol hentikan game di klik maka secara otomatis akan menghentikan game - **[Layar Penuh]**: Mengubah ke mode Fullscreen. - **[Aktifkan / Uji Kamera]**: Membuka preview live feed kamera webcam/device untuk memastikan kamera aktif dan berfungsi baik sebelum game dimulai. - **[Pengaturan Guru]**: Membuka modal/halaman konfigurasi pembelajaran lengkap & bank soal. --- ### 4. PENGATURAN GURU & BANK SOAL Modal / Halaman **Pengaturan Guru** memuat form konfigurasi wajib sebagai berikut: A. Konfigurasi Pembelajaran & Kelompok: **Jenjang Pendidikan & Kelas**: (Contoh: SMP / Kelas 7) 2. **Mata Pelajaran**: (Default: Pendidikan Agama Islam) 3. **Topik / Materi Pembelajaran**: (Default: Meneladani Sifat-Sifat Allah SWT melalui Asmaulhusna) 4. **Tujuan Pembelajaran**: (Textarea berisikan indikator/TP pembelajaran, e.g. Menjelaskan Al-Alim, Al-Khabir, As-Sami', Al-Bashir, Al-Aziz, menganalisis bukti fenomena, & melafalkan dalil naqli). 5. **Petunjuk / Aturan Tambahan**: Teks aturan main game kamera. 6. **Waktu Per Soal (Detik)**: Input angka (Default: 10 detik). B. Fitur Bank Soal (CRUD & Impor/Ekspor): **Fitur Pengelolaan Soal**: Guru dapat **Menambah**, **Mengedit**, **Menghapus**, serta **Melihat Daftar Soal** yang tersimpan. Setiap entri soal memuat properti: - `pertanyaan`: Teks Soal / Statement. - `jenis_soal`: "Benar-Salah" atau "Pilihan Ganda (A, B, C, D)". - `pilihan`: Array opsi [A, B, C, D] (jika jenis Pilihan Ganda) atau opsi [Benar, Salah]. - `kunci_jawaban`: Jawaban yang benar. - `pembahasan`: Penjelasan lengkap mengenai jawaban. - `tingkat_kesulitan`: "Mudah", "Sedang", atau "Sulit". **Default Data**: Sediakan minimal 10 contoh soal awal bertema Asmaulhusna (Al-Alim, Al-Khabir, As-Sami', Al-Bashir, Al-Aziz) bawaan aplikasi. **Validasi Soal**: Jika bank soal kosong, tampilkan *alert/warning box*: *"Bank soal belum tersedia! Silakan tambahkan soal atau impor file JSON terlebih dahulu."* dan cegah game dimulai. --- ### 5. MEKANISME GAMEPLAY (KAMERA BENAR-SALAH) Tampilan Game membagikan layar menjadi 2 bagian atau panel utama kiri dan kanan: 1. **Live Camera Feed**: Tampilan kamera secara *real-time*. Pada Kamera terdapat 2 kotak kiri dan kanan, namun jangan membagi tampilan kamera menjadi 2 bagian. 2. **2 Kotak pada kamera**: kotak pada kamera berbentuk persegi Panjang dan ada garis tengah sehingga terbagi menjadi 2 kotak. Garis kotak berwarna hitam. 3. **Teks pada kotak kamera**: terdapat teks “A. BENAR” ukuran kecil warna hitam pada bagian bawah dalam kotak bagian kiri, dan teks “B. SALAH” ukuran kecil warna hitam pada bagian bawah dalam kotak bagian kanan. Tidak ada teks Tim Benar dan Tim Salah. Semua teks dan angka pada kotak berwarna hitam. 4. **Panel Soal & Timer**: Menampilkan pertanyaan aktif, timer hitung mundur (misal 10 detik), skor kedua kelompok, dan penunjuk soal saat ini. Jangan tampilkan pembahasan soal **Mekanisme Permainan**: - Soal berada dibagian tengah atas diatas kedua panel kamera - Siswa/Kelompok bergerak atau menunjukkan gestur ke area kamera (atau dikontrol secara interaktif system sesuai posisi kamera). - Ketika timer habis, maka akan muncul jawaban yang benar, contohnya : “JAWABAN A” dalam kotak overlay warna kuning atau “JAWABAN B” dalam kotak overlay warna kuning pada bagian tengah kedua kotak kamera tepatnya pada garis tengah yang membagi kedua kotak kamera, kotak kamera yang benar akan berwarna hijau overlay dan kotak kamera yang salah akan berwarna merah overlay selama 3 detik dan secara otomatis lanjut ke soal berikutnya tanpa menampilkan pembahasan soal - Tampilkan efek visual & audio (menggunakan Web Audio API sintetis offline) untuk jawaban Benar/Salah serta pembaruan skor. --- ### 6. OUTPUT TEKNIS Hasilkan SELURUH kode dalam **SATU FILE** `index.html` lengkap tanpa pemotongan (`// code omitted...`). Semua gaya (CSS) dan logika (JS) berada di dalam tag `<style>` dan `<script>` internal. Gunakan `localStorage` untuk menyimpan konfigurasi dan Bank Soal agar data tidak hilang saat browser ditutup. Aplikasi harus dapat berjalan dengan lancar tanpa kendala, semua tombol berfungsi dengan baik, tidak boleh tumpang tindih antara ikon, gambar dan teks agar semua elemen terlihat jelas
Siap membuat game? Salin seluruh isi prompt melalui tombol berikut: