Kvíz pro návštěvníky · Programuj s Martinem

Otázky, odpovědi a počítání bodů. V malém se naučíš logiku, na které stojí každá hra.

Jak to bude fungovat

Postavíš kvíz: otázka, tři možnosti, kliknutím se odpoví, na konci se ukáže skóre. Data kvízu (otázky a odpovědi) budou v poli objektů – to zní učeně, ale uvidíš, že je to jen šikovně poskládaný seznam.

Ukaž mi to: data kvízu

const otazky = [
  {
    text: "Kolik nohou má pavouk?",
    moznosti: ["6", "8", "10"],
    spravna: 1,
  },
  {
    text: "Které zvíře je nejrychlejší?",
    moznosti: ["gepard", "sokol", "zajíc"],
    spravna: 1,
  },
  {
    text: "Jak se jmenuje náš web?",
    moznosti: ["Programuj s Martinem", "Kóduj s Karlem", "Web s Vendulou"],
    spravna: 0,
  },
];

Pole [...] je seznam hodnot – znáš z minula (fotky bylo taky pole).
Objekt {...} je krabice s pojmenovanými přihrádkami: text, moznosti, spravna.
spravna: 1 znamená: správně je možnost číslo 1 – počítá se od nuly, takže druhá v pořadí.

Ukaž mi to: motor kvízu

HTML:

<div class="karta">
  <h2 id="kviz-otazka"></h2>
  <div id="kviz-moznosti"></div>
  <p id="kviz-stav"></p>
</div>

JavaScript:

const otazkaEl = document.getElementById("kviz-otazka");
const moznostiEl = document.getElementById("kviz-moznosti");
const stavEl = document.getElementById("kviz-stav");

let cisloOtazky = 0;
let body = 0;

function ukazOtazku() {
  const otazka = otazky[cisloOtazky];
  otazkaEl.textContent = otazka.text;
  moznostiEl.innerHTML = "";   // smaž stará tlačítka

  otazka.moznosti.forEach((moznost, poradi) => {
    const tlacitko = document.createElement("button");
    tlacitko.textContent = moznost;
    tlacitko.addEventListener("click", () => odpovez(poradi));
    moznostiEl.appendChild(tlacitko);
  });

  stavEl.textContent = "Otázka " + (cisloOtazky + 1) + " z " + otazky.length;
}

function odpovez(poradi) {
  if (poradi === otazky[cisloOtazky].spravna) {
    body++;
  }

  cisloOtazky++;

  if (cisloOtazky < otazky.length) {
    ukazOtazku();
  } else {
    otazkaEl.textContent = "Hotovo! 🎉";
    moznostiEl.innerHTML = "";
    stavEl.textContent = "Získal(a) jsi " + body + " z " + otazky.length + " bodů.";
  }
}

ukazOtazku();

Novinky:

document.createElement("button") – JavaScript umí prvky nejen hledat, ale i vyrábět. Vyrobíme tlačítko pro každou možnost.
appendChild(...) – vlož vyrobený prvek do stránky.
innerHTML = "" – vysyp obsah prvku (mažeme stará tlačítka před další otázkou).
Dvě funkce si předávají práci: ukazOtazku() kreslí, odpovez() vyhodnocuje. Rozdělit program na malé funkce je návyk profíků.

Teď ty 💪

Postav kvíz se svými otázkami – aspoň pět. Náměty podle projektu:

🏫 Kvíz o naší škole – kolik má škola let? Jak se jmenuje ředitel(ka)? Kolik je u nás tříd?
🙋 Jak dobře mě znáš? – moje oblíbené jídlo? Kolik mám let? Jak se jmenuje můj pes?
🌍 Cestovatelský kvíz – hlavní město Chorvatska? Nejvyšší hora Česka? Kterým směrem je moře?
⚽ Jak znáš náš tým? – kdo je kapitán? Kolik gólů dal Tomáš? Jaké jsou klubové barvy?

Stačí vyměnit obsah pole otazky – motor kvízu zůstává stejný. Přesně proto se data a logika oddělují!

Bonus: barevná odezva na odpověď

Chceš, aby správná odpověď bliskla zeleně? Uprav odpovez tak, aby nejdřív obarvila tlačítka, a další otázku ukázala až za vteřinu:

function odpovez(poradi) {
  const tlacitka = moznostiEl.querySelectorAll("button");
  const spravna = otazky[cisloOtazky].spravna;

  tlacitka[spravna].style.backgroundColor = "#16a34a";
  if (poradi !== spravna) {
    tlacitka[poradi].style.backgroundColor = "#dc2626";
  } else {
    body++;
  }

  setTimeout(() => {
    cisloOtazky++;
    if (cisloOtazky < otazky.length) {
      ukazOtazku();
    } else {
      otazkaEl.textContent = "Hotovo! 🎉";
      moznostiEl.innerHTML = "";
      stavEl.textContent = "Získal(a) jsi " + body + " z " + otazky.length + " bodů.";
    }
  }, 1000);
}

setTimeout(() => {...}, 1000) znamená „tohle spusť za 1000 milisekund”. A style.backgroundColor mění CSS přímo z JavaScriptu.

✅

Kontrola: Kvíz klade otázky jednu po druhé, počítá body a na konci ukáže výsledek. Právě jsi napsal(a) svoji první opravdovou aplikaci – má data, logiku i uživatelské rozhraní.

Co si z téhle lekce odnést

Data (pole objektů) drž oddělená od logiky (funkcí) – pak stačí vyměnit otázky a máš nový kvíz.
JavaScript umí prvky vyrábět: createElement + appendChild.
setTimeout spouští kód se zpožděním.