Kviz za tvoje posjetitelje · Kodiraj s Martinom

Pitanja, odgovori i vođenje rezultata. U minijaturi naučit ćeš logiku svake igre.

Kako će raditi

Napravit ćeš kviz: pitanje, tri izbora, klik za odgovor i rezultat na kraju. Podaci kviza (pitanja i odgovori) živjet će u nizu objekata – zvuči fancy, ali vidjet ćeš da je to samo uredno organiziran popis.

Pokazat ću ti: podaci kviza

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,
  },
];

Niz [...] je popis vrijednosti – to već znaš (photos je također bio niz).
Objekt {...} je kutija s imenovanim pretincima: text, choices, correct.
correct: 1 znači: izbor broj 1 je točan – brojanje počinje od nule, dakle drugi po redu.

Pokazat ću ti: motor kviza

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();

Novo:

document.createElement("button") – JavaScript ne samo da pronalazi elemente, nego ih i stvara. Stvaramo gumb za svaki izbor.
appendChild(...) – umetni stvoreni element na stranicu.
innerHTML = "" – isprazni sadržaj elementa (brišemo stare gumbe prije sljedećeg pitanja).
Dvije funkcije prebacuju posao jedna drugoj: showQuestion() crta, answer() ocjenjuje. Dijeljenje programa na male funkcije je profesionalna navika.

Sad si ti na redu 💪

Napravi kviz sa vlastitim pitanjima – barem pet. Ideje za projekte:

🏫 Kviz o našoj školi – koliko je stara škola? Tko je ravnatelj? Koliko imamo učionica?
🙋 Koliko me poznaješ? – moja omiljena hrana? Koliko imam godina? Kako se zove moj pas?
🌍 Putni kviz – glavni grad Hrvatske? Najviša planina u tvojoj zemlji? U kojem smjeru je more?
⚽ Koliko poznaješ našu momčad? – tko je kapetan? Koliko je Tom postigao golova? Koje su boje kluba?

Samo zamijeni sadržaj niza questions – motor kviza ostaje isti. Zato su podaci i logika odvojeni!

Bonus: obojena povratna informacija za odgovore

Želiš da točan odgovor zabljesne zeleno? Prilagodi answer da prvo oboji gumbe, pa nakon sekunde prikaže sljedeće pitanje:

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);
}

setTimeout(() => {...}, 1000) znači “pokreni ovo nakon 1000 milisekundi.” A style.backgroundColor mijenja CSS izravno iz JavaScripta.

✅

Provjeri sam sebe: Kviz postavlja pitanja jedno za drugim, vodi rezultat i prikazuje ga na kraju. Upravo si napisao svoju prvu pravu aplikaciju – ima podatke, logiku i korisničko sučelje.

Što ćeš ponijeti iz ove lekcije

Drži podatke (niz objekata) odvojeno od logike (funkcija) – onda je za novi kviz dovoljno zamijeniti pitanja.
JavaScript može stvarati elemente: createElement + appendChild.
setTimeout pokreće kod nakon odgode.