htmlcssjavascriptaplikasikuisMenengah12 mnt baca

Kuis Interaktif dengan Skor

Kuis pilihan ganda dengan timer, skor akhir, dan pembahasan jawaban.

Kenapa Kuis Interaktif?

Kuis menggabungkan banyak konsep: state (soal ke berapa, skor), timer, render dinamis, dan alur multi-layar (mulai -> soal -> hasil). Menyelesaikannya berarti kamu siap membangun aplikasi interaktif apa pun.

Langkah Membangun

HTML: Tiga layar dalam satu halaman: layar mulai (judul + tombol), layar soal (nomor, timer bar, pertanyaan, 4 tombol jawaban), layar hasil (skor, pesan, tombol ulangi). Hanya satu yang tampil tiap waktu.

CSS: Tombol jawaban sebagai kartu full-width dengan hover. Jawaban benar: hijau; salah: merah (ditampilkan sesaat sebelum lanjut). Timer bar menyusut dari 100 ke 0 persen.

JS: Data soal sebagai array of object { tanya, opsi: [...], benar: indeks, bahas }. State: soalKe, skor, timerId.

  1. tampilSoal(): render pertanyaan + opsi, mulai timer 15 detik.
  2. Klik opsi atau waktu habis: kunci jawaban, warnai benar/salah, tampilkan pembahasan, tombol "Lanjut".
  3. Soal terakhir: tampilkan layar hasil dengan skor, pesan berdasarkan nilai (>=80 "Luar biasa!", >=60 "Bagus!", sisanya "Ayo coba lagi!"), dan tombol ulangi yang me-reset state.

Kesalahan Umum

  • Timer tidak di-clear saat pindah soal sehingga banyak timer menumpuk (selalu clearInterval).
  • Opsi bisa diklik berkali-kali menambah skor ganda (kunci dengan flag terjawab).
  • Skor dihitung dari DOM bukan variabel (simpan di variabel skor).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Mode Acak

Acak urutan soal dan urutan opsi setiap kuis dimulai (pakai algoritma Fisher-Yates), tapi jawaban benar tetap terlacak dengan benar.