Kvíz pre tvojich návštevníkov · Programuj s Martinom

Otázky, odpovede a počítanie bodov. V miniatúre sa naučíš logiku každej hry.

Ako to bude fungovať

Postavíš kvíz: otázka, tri možnosti, kliknutím odpovieš a na konci sa ukáže skóre. Dáta kvízu (otázky a odpovede) budú v poli objektov – znie to honosne, ale uvidíš, že je to len prehľadne usporiadaný zoznam.

Ukážem ti: dáta kvízu

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

Pole [...] je zoznam hodnôt – poznáš to z minula (photos bolo tiež pole).
Objekt {...} je box s pomenovanými priehradkami: text, choices, correct.
correct: 1 znamená: správna je možnosť číslo 1 – počítanie začína od nuly, takže je to druhá v poradí.

Ukážem ti: motor kvízu

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

Nové veci:

document.createElement("button") – JavaScript vie nielen nájsť prvky, ale aj vytvárať ich. Pre každú možnosť vytvoríme tlačidlo.
appendChild(...) – vloží vytvorený prvok na stránku.
innerHTML = "" – vyprázdni obsah prvku (pred ďalšou otázkou zmažeme staré tlačidlá).
Dve funkcie si odovzdávajú prácu: showQuestion() kreslí, answer() vyhodnocuje. Rozdelenie programu na malé funkcie je profi zvyk.

Teraz ty 💪

Postav kvíz s vlastnými otázkami – aspoň päť. Nápady pre projekty:

🏫 Kvíz o našej škole – koľko rokov má škola? Kto je riaditeľ? Koľko máme tried?
🙋 Ako dobre ma poznáš? – moje obľúbené jedlo? Koľko mám rokov? Ako sa volá môj pes?
🌍 Cestovný kvíz – hlavné mesto Chorvátska? Najvyšší vrch v tvojej krajine? Ktorým smerom je more?
⚽ Ako dobre poznáš náš tím? – kto je kapitán? Koľko gólov dal Tom? Aké sú farby klubu?

Stačí vymeniť obsah poľa questions – motor kvízu zostáva rovnaký. Preto sa dáta a logika držia oddelene!

Bonus: farebná spätná väzba pri odpovediach

Chceš, aby správna odpoveď zablikala zeleno? Uprav answer, aby najprv obfarbil tlačidlá a potom po sekunde ukázal ďalšiu otázku:

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) znamená „spusti toto po 1000 milisekundách.” A style.backgroundColor mení CSS priamo z JavaScriptu.

✅

Skontroluj sa: Kvíz kládol otázky jedna za druhou, počítal body a na konci ukázal výsledok. Práve si napísal svoju prvú skutočnú aplikáciu – má dáta, logiku a používateľské rozhranie.

Čo si z tejto lekcie odnášaš

Drž dáta (pole objektov) oddelene od logiky (funkcií) – potom stačí vymeniť otázky a máš nový kvíz.
JavaScript vie vytvárať prvky: createElement + appendChild.
setTimeout spustí kód po oneskorení.