Kviz za tvoje obiskovalce · Kodiraj z Martinom

Vprašanja, odgovori in točkovanje. V miniaturni obliki se naučiš logike vsake igre.

Kako bo delovalo

Zgradil boš kviz: vprašanje, tri izbire, klik za odgovor in na koncu rezultat. Podatki kviza (vprašanja in odgovori) bodo živeli v polju objektov – zveni fancy, a vidiš, da je le urejeno organiziran seznam.

Pokažem ti: podatki 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,
  },
];

Polje [...] je seznam vrednosti – to že poznaš (photos je bilo tudi polje).
Objekt {...} je škatla z imenovanimi predeli: text, choices, correct.
correct: 1 pomeni: izbira številka 1 je pravilna – številčenje se začne pri nič, torej druga po vrsti.

Pokažem 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 le najde elementov, ampak jih tudi ustvari. Za vsako izbiro ustvarimo gumb.
appendChild(...) – ustvarjen element vstavi na stran.
innerHTML = "" – izprazni vsebino elementa (pred naslednjim vprašanjem počistimo stare gumbe).
Dve funkciji si predajata delo: showQuestion() nariše, answer() oceni. Razdelitev programa na majhne funkcije je navada profesionalcev.

Zdaj si na vrsti 💪

Zgradi kviz s lastnimi vprašanji – vsaj pet. Ideje za projekte:

🏫 Kviz o naši šoli – koliko let je stara šola? Kdo je ravnatelj? Koliko učilnic imamo?
🙋 Kako dobro me poznaš? – moja najljubša hrana? Koliko sem star? Kako se imenuje moj pes?
🌍 Potovalni kviz – prestolnica Hrvaške? Najvišja gora v tvoji državi? V katero smer je morje?
⚽ Kako dobro poznaš našo ekipo? – kdo je kapetan? Koliko golov je dosegel Tom? Kakšne so barve kluba?

Samo zamenjaj vsebino polja questions – motor kviza ostane enak. Zato sta podatki in logika ločena!

Bonus: barvna povratna informacija za odgovore

Želiš, da pravilen odgovor zasveti zeleno? Prilagodi answer, da najprej obarva gumbe, nato po sekundi pokaže naslednje vprašanje:

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) pomeni “to zaženi čez 1000 milisekund.” In style.backgroundColor spremeni CSS neposredno iz JavaScripta.

✅

Preveri se: Kviz postavlja vprašanja ena za drugim, šteje točke in na koncu pokaže rezultat. Pravkar si napisal svojo prvo pravo aplikacijo – ima podatke, logiko in uporabniški vmesnik.

Kaj si vzameš iz te lekcije

Podatke (polje objektov) drži ločeno od logike (funkcij) – potem zamenjava vprašanj zadostuje za nov kviz.
JavaScript lahko ustvarja elemente: createElement + appendChild.
setTimeout zažene kodo z zamikom.