{"title":"Game Quiz","slug":"","description":"membuat game quiz dengan html, css, js","image":null,"permalink":"/prompt/web/game-interaktif/index.json","raw_content":"## INPUT\n\n**Topik:** [TOPIK]\n**Jumlah Stage:** 15\n\n---\n\nBertindaklah sebagai **Senior Frontend Engineer dan Mobile-First UI/UX Game Designer**.\n\nBuatkan **satu file HTML utuh (single-file)** berisi aplikasi kuis/mini-game edukasi interaktif berdasarkan topik di atas.\n\nGame harus:\n\n* Memiliki jumlah stage sesuai input.\n* Menggunakan variasi mekanik game secara acak dan merata agar setiap stage tidak monoton.\n* Mobile-first, responsif, dan nyaman dimainkan di smartphone.\n* Memiliki UI game kasual modern dengan Tailwind CSS v4.\n* Menggunakan Google Font **Fredoka**.\n* Menggunakan Alpine.js untuk state management.\n* Menggunakan Canvas Confetti untuk efek jawaban benar.\n* Menggunakan Tone.js untuk SFX dan BGM relax/ambient.\n* BGM baru dimulai setelah pengguna menekan tombol **\"Mulai Permainan\"**.\n* Data setiap stage harus dipisahkan dalam array JSON agar mudah diedit.\n* Berikan kode lengkap dalam **satu blok HTML** yang bisa langsung disalin dan dijalankan.\n\n### Sistem Variasi Stage\n\nGunakan kombinasi acak dari mekanik berikut:\n\n1. `choice` — Pilihan ganda.\n2. `truefalse` — Benar atau Salah.\n3. `dragdrop` — Drag jawaban ke target.\n4. `tapgame` — Ketuk target berulang.\n5. `sequence` — Susun urutan yang benar.\n6. `slider` — Geser slider ke nilai yang tepat.\n7. `memorymatch` — Cocokkan pasangan kartu.\n8. `oddoneout` — Cari elemen yang berbeda.\n9. `fillblank` — Lengkapi kalimat.\n10. `speedclick` — Ketuk target sebelum waktu habis.\n11. `categorize` — Kelompokkan item ke kategori.\n12. `scrabbleword` — Susun huruf menjadi kata.\n13. `sliderange` — Pilih rentang nilai yang benar.\n14. `balancing` — Seimbangkan meter ke target.\n\n### Aturan UI \u0026 Responsif\n\n* Gunakan layout `mobile-first`.\n* Konten utama menggunakan `max-w-md` atau `max-w-lg`.\n* Berikan padding yang nyaman di layar HP.\n* Semua tombol minimal tinggi **44px** dan nyaman untuk disentuh.\n* Gunakan Flexbox/Grid yang fleksibel.\n* Desain chunky, rounded, border tebal, dan nuansa game kasual modern.\n* Gunakan background gelap/indigo dengan aksen warna cerah.\n* Tampilkan progress stage, skor, dan indikator bintang.\n* Sediakan feedback visual dan suara untuk jawaban benar/salah.\n* Buat layar kemenangan setelah semua stage selesai.\n\n**PENTING:** Buat seluruh isi pertanyaan, jawaban, tantangan, dan materi berdasarkan **Topik** yang diberikan di bagian INPUT. Sesuaikan tingkat kesulitan dan variasi mekanik secara otomatis berdasarkan jumlah stage.    ","has_database":false,"default_input":null,"image_prompt":null,"desc_prompt":null,"database":null,"variables_config":{"topik":{"label":"TOPIK","placeholder":"TOPIK","rows":5,"type":"textarea"}}}