Proyek Mini: Aplikasi Kuis Interaktif

Misi Proyek

Kamu akan membangun aplikasi kuis pilihan ganda yang lengkap dan bisa dipakai sungguhan: ada layar mulai, soal muncul satu per satu dengan timer, jawaban langsung dinilai, skor akhir ditampilkan, dan skor tertinggi tersimpan permanen di browser. Ini proyek integrasi: hampir semua yang kamu pelajari (array, object, DOM, event, timer, localStorage) dipakai bersama dalam satu aplikasi nyata.

Arsitektur: Pecah Masalahnya Dulu

Jangan langsung menulis kode. Aplikasi kuis punya 4 bagian yang bisa dipikirkan terpisah:

1. Struktur data soal. Satu array of object, tiap object punya pertanyaan, daftar pilihan, dan index jawaban benar. Contoh bentuknya:

const soal = [
  {
    pertanyaan: "Ibukota Indonesia?",
    pilihan: ["Jakarta", "Bandung", "Surabaya", "Medan"],
    jawaban: 0 // index jawaban benar
  },
  // tambah minimal 4 soal lagi
];

Memisahkan DATA dari LOGIKA adalah keputusan arsitektur terpenting: menambah soal baru tinggal menambah object, tanpa menyentuh kode sama sekali.

2. State aplikasi. Variabel-variabel yang melacak "posisi" permainan: index soal saat ini, skor, sisa waktu timer, dan apakah kuis sedang berjalan. Semua fungsi membaca dan mengubah state yang sama ini.

3. Fungsi render. Satu fungsi untuk tiap layar: tampilMulai() (judul + tombol mulai + highscore), tampilSoal() (pertanyaan + tombol pilihan + timer), tampilHasil() (skor akhir + tombol main lagi). Tiap fungsi mengosongkan container lalu mengisi ulang dengan DOM yang dibuat via JavaScript.

4. Fungsi logika. mulaiKuis() (reset state, tampilkan soal pertama), cekJawaban(indexDipilih) (bandingkan dengan kunci, tambah skor, beri umpan balik visual), soalBerikut() (lanjut atau ke layar hasil), dan simpanHighscore() (bandingkan dengan localStorage).

Alur Timer Per Soal

Timer adalah bagian tersulit, jadi rancang dengan hati-hati. Setiap soal diberi waktu misalnya 15 detik memakai setInterval yang mengurangi sisa waktu tiap detik dan mengupdate tampilan. Dua hal WAJIB diingat: pertama, hentikan interval lama (clearInterval) setiap pindah soal, kalau tidak timer bertumpuk dan berjalan makin cepat. Kedua, saat waktu habis, perlakukan seperti jawaban salah lalu otomatis lanjut ke soal berikutnya.

Menyimpan Highscore

localStorage hanya menyimpan string, jadi bungkus angka dengan JSON.stringify saat menyimpan dan JSON.parse (atau Number) saat membaca. Polanya: saat kuis selesai, baca highscore lama (default 0 jika belum ada), bandingkan dengan skor baru, simpan yang lebih besar, lalu tampilkan keduanya di layar hasil ("Skor: 80, Tertinggi: 100").

Umpan Balik Visual

Aplikasi terasa "hidup" kalau merespons: pilihan yang diklik benar berubah hijau, yang salah berubah merah, tombol pilihan di-disable setelah menjawab agar tidak bisa klik dua kali, dan ada jeda singkat sebelum soal berikutnya muncul. Detail-detail kecil ini yang membedakan aplikasi jadi-jadian dengan aplikasi sungguhan.

Jebakan Umum Proyek Ini

Pertama, timer bertumpuk (lupa clearInterval) adalah bug nomor satu di proyek seperti ini. Kedua, menempel event listener ke tombol yang di-render ulang tanpa membersihkan yang lama bisa membuat satu klik terhitung berkali-kali: render ulang container dengan innerHTML = "" sebelum mengisi, atau pakai event delegation. Ketiga, jangan campur data dan tampilan: fungsi cek jawaban tidak boleh membaca teks dari tombol (rentan berubah), ia harus membaca dari array soal memakai index. Keempat, uji alur lengkapnya: mulai, jawab benar, jawab salah, biarkan waktu habis, main lagi, dan refresh browser untuk memastikan highscore bertahan.

Catatan teknis: Arsitektur "state + render + event" yang kamu pakai di sini adalah versi mini dari cara kerja React dan framework modern: state berubah, UI di-render ulang mengikuti state. Memahami pola ini secara manual membuat framework terasa seperti alat bantu, bukan sulap. Setelah proyek ini selesai, kamu siap menggabungkan modul-modul lain: tambah debounce di layar mulai untuk pencarian soal, atau simpan riwayat kuis sebagai array di localStorage.