Kartu Kuis Interaktif

Bangun Kartu Kuis Interaktif: satu kartu kuis pilihan ganda yang memakai ketiga bahasa sekaligus. HTML menyediakan kerangka dan penanda (id, class, data-*), CSS menyiapkan semua tampilan termasuk warna jawaban dan tema gelap, dan JavaScript hanya mengisi soal, memasang class, dan mengatur atribut.

Kode awal sudah berisi HTML lengkap, sebagian CSS, dan array soal. Tugasmu melengkapi CSS dan menulis perilakunya.

Struktur HTML (sudah ada, jangan ganti id dan class-nya)

Data soal

Soal ada di array daftarSoal, tiap item berbentuk { tanya, opsi: [3 teks], benar: indeks }. Minimal 3 soal.

Gaya wajib

• :root mendefinisikan --latar: #ffffff, --teks, --kartu, dan --utama.
• body memakai background-color: var(--latar) dan color: var(--teks). Jangan beri transition pada latar body.
• html[data-tema="gelap"] mengganti --latar menjadi #121212 (serta --teks dan --kartu).
• .opsi.benar berlatar #2e7d32 dan .opsi.salah berlatar #c62828, keduanya teks putih.
• Warna jawaban hanya lewat class. Jangan menulis element.style.background dari JavaScript.

Perilaku JavaScript

1. tampilkanSoal() mengisi #pertanyaan, #nomor, dan teks ketiga opsi dari daftarSoal[indeks]. Opsi yang benar diberi data-benar="true", opsi lain tidak punya atribut itu. Fungsi ini juga melepas class benar/salah, mengaktifkan lagi semua opsi, dan mengosongkan #hasil.
2. Klik sebuah opsi:
   • opsi itu mendapat class benar bila data-benar="true", selain itu class salah;
   • semua opsi diberi disabled = true supaya tidak bisa menjawab dua kali;
   • #hasil diisi teks yang diawali Benar atau Salah (contoh: Salah, jawabannya <link>);
   • bila benar, skor bertambah 1 dan #skor diperbarui.
3. Klik #berikutnya: indeks naik satu dan kembali ke 0 setelah soal terakhir (pakai %), lalu panggil tampilkanSoal(). Skor tidak direset.
4. Klik #tombol-tema: pasang data-tema="gelap" di <html> lewat document.documentElement.dataset.tema, klik lagi untuk melepasnya. Opsional: ganti teks tombol.

Contoh hasil

<!-- setelah opsi kedua (yang benar) diklik -->
<div id="opsi">
  <button class="opsi" disabled>&lt;script&gt;</button>
  <button class="opsi benar" data-benar="true" disabled>&lt;link&gt;</button>
  <button class="opsi" disabled>&lt;style src&gt;</button>
</div>
<p id="hasil">Benar! Mantap.</p>

Opsi yang diklik langsung hijau karena class benar, skor jadi 1, dan saat tema gelap aktif latar halaman berubah ke #121212 tanpa satu pun warna ditulis di JavaScript.