Kuis untuk pengunjung kamu

Bagaimana cara kerjanya

kamu akan membuat kuis: satu pertanyaan, tiga pilihan, klik untuk menjawab, dan skor muncul di akhir. Data kuis (pertanyaan dan jawaban) akan disimpan dalam array objek – kedengarannya mewah, tetapi kamu akan melihat bahwa itu hanyalah daftar yang tertata rapi.

Tunjukkan pada saya: data kuis

const questions = [
  {
    text: "How many legs does a spider have?",
    choices: ["6", "8", "10"],
    correct: 1,
  },
  {
    text: "Which animal is the fastest?",
    choices: ["cheetah", "falcon", "hare"],
    correct: 1,
  },
  {
    text: "What's the name of our website?",
    choices: ["Code with Martin", "Code with Charlie", "Web with Wendy"],
    correct: 0,
  },
];

• array [...] adalah daftar nilai – kamu sudah mengetahuinya sebelumnya (photos juga merupakan array).
• objek {...} adalah kotak dengan kompartemen bernama: teks, pilihan, benar.
• benar: 1 artinya: pilihan nomor 1 benar – penghitungan dimulai dari nol, jadi yang kedua berurutan.

Tunjukkan pada saya: mesin kuis

HTML:

<div class="card">
  <h2 id="quiz-question"></h2>
  <div id="quiz-choices"></div>
  <p id="quiz-status"></p>
</div>

JavaScript:

const questionEl = document.getElementById("quiz-question");
const choicesEl = document.getElementById("quiz-choices");
const statusEl = document.getElementById("quiz-status");

let questionNumber = 0;
let points = 0;

function showQuestion() {
  const question = questions[questionNumber];
  questionEl.textContent = question.text;
  choicesEl.innerHTML = "";   // clear the old buttons

  question.choices.forEach((choice, index) => {
    const button = document.createElement("button");
    button.textContent = choice;
    button.addEventListener("click", () => answer(index));
    choicesEl.appendChild(button);
  });

  statusEl.textContent = "Question " + (questionNumber + 1) + " of " + questions.length;
}

function answer(index) {
  if (index === questions[questionNumber].correct) {
    points++;
  }

  questionNumber++;

  if (questionNumber < questions.length) {
    showQuestion();
  } else {
    questionEl.textContent = "Done! 🎉";
    choicesEl.innerHTML = "";
    statusEl.textContent = "You scored " + points + " out of " + questions.length + " points.";
  }
}

showQuestion();

Barang baru:

• document.createElement("button") – JavaScript tidak hanya dapat menemukan elemen, tetapi juga membuat elemen tersebut. Kami membuat tombol untuk setiap pilihan.
• appendChild(...) – masukkan elemen yang dibuat ke dalam halaman.
• innerHTML = "" – mengosongkan konten elemen (kami menghapus tombol lama sebelum pertanyaan berikutnya).
• Dua fungsi meneruskan pekerjaan satu sama lain: showQuestion() menggambar, answer() mengevaluasi. Membagi program menjadi fungsi-fungsi kecil adalah kebiasaan yang baik.

Giliran kamu 💪

Buat kuis dengan pertanyaan kamu sendiri – setidaknya lima. Ide proyek:

• 🏫 Kuis tentang sekolah kami – berapa umur sekolah tersebut? Siapa kepala sekolahnya? Berapa banyak ruang kelas yang kita miliki?
• 🙋 Seberapa baik kamu mengenal saya? – makanan favorit saya? Berapa umur saya? Siapa nama anjingku?
• 🌍 Kuis perjalanan – ibu kota Kroasia? Gunung tertinggi di negaramu? Ke arah mana lautnya?
• ⚽ Seberapa baik kamu mengenal tim kami? – siapa kaptennya? Berapa banyak gol yang dicetak Tom? Apa warna klubnya?

Cukup tukar isi array pertanyaan – mesin kuis tetap sama. Itulah sebabnya data dan logika dipisahkan!

function answer(index) {
  const buttons = choicesEl.querySelectorAll("button");
  const correct = questions[questionNumber].correct;

  buttons[correct].style.backgroundColor = "#16a34a";
  if (index !== correct) {
    buttons[index].style.backgroundColor = "#dc2626";
  } else {
    points++;
  }

  setTimeout(() => {
    questionNumber++;
    if (questionNumber < questions.length) {
      showQuestion();
    } else {
      questionEl.textContent = "Done! 🎉";
      choicesEl.innerHTML = "";
      statusEl.textContent = "You scored " + points + " out of " + questions.length + " points.";
    }
  }, 1000);
}

Apa yang bisa diambil dari pelajaran ini

• Pisahkan data (array objek) dari logika (fungsi) – lalu cukup menukar pertanyaan untuk mendapatkan kuis baru.
• JavaScript dapat membuat elemen: createElement + appendChild.
• setTimeout menjalankan kode setelah penundaan.

© 2026 Ing. Martin Polak / AlgoRhino · Ketentuan penggunaan konten