Quiz dla Twoich gości · Koduj z Martinem

Pytania, odpowiedzi i liczenie punktów. W miniaturze poznasz logikę każdej gry.

Jakie są zasady działania?

Stworzysz quiz: pytanie, trzy odpowiedzi, kliknij, aby odpowiedzieć, a wynik pojawi się na końcu. Dane quizu (pytania i odpowiedzi) będą mieszkać w tablicy obiektów – to brzmi fantazyjnie, ale zobaczysz, że jest to tylko zgrabnie zorganizowana lista.

Pokażę ci: quiz data

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

An array[...] is a list of values – you know this from before (photos was also an array).
Anobject{...} is a box with named compartments: text, choices, correct.
correct: 1 means: choice number 1 is correct –counting starts at zero, so it’s the second one in order.

Pokażę ci: quiz engine

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

Thanks.

document.createElement("button")– JavaScript can not only find elements, but alsocreatethem. We create a button for every choice. -appendChild(...)– insert the created element into the page. -innerHTML = ""– empty out an element’s contents (we clear the old buttons before the next question).
Two functions pass work to each other: showQuestion() draws, answer() evaluates. Splitting a program into small functions is a pro habit.

Teraz ty 💪

Stwórz quiz zwłasnymipytaniami – co najmniej pięć. Pomysły na projekty:

🏫Quiz o naszej szkole– ile lat ma szkoła? Kto jest dyrektorem? Ile mamy sal lekcyjnych?
🙋Jak dobrze mnie znasz?– moje ulubione jedzenie? Ile mam lat? Jak ma na imię mój pies?
🌍** Quiz podróżniczy **– stolica Chorwacji? Najwyższa góra w Twoim kraju? W którym kierunku jest morze?
⚽Jak dobrze znasz naszą drużynę? – kto jest kapitanem? Ile bramek strzelił Tom? Jakie są kolory klubów?

Wystarczy zamienić zawartośćquestionstablica – silnik quizu pozostaje taki sam. Właśnie dlatego dane i logika są oddzielone!

Bonus: colored feedback for answers

Chcesz uzyskać prawidłową odpowiedź, aby migać na zielono? Dostosujanswerwięc najpierw koloruje przyciski, a następnie wyświetla następne pytanie po sekundzie:

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)oznacza „uruchom to po 1000 milisekundach”. Istyle.backgroundColorzmienia CSS bezpośrednio z JavaScript.

✅

Check yourself: The quiz asks questions one after another, keeps score, and shows the result at the end. You just wrote your first real application – it has data, logic, and a user interface.

Co wyniesiesz z tej lekcji

Keep data (an array of objects) separate from logic (functions) – then swapping the questions is all it takes to get a new quiz.
JavaScript can create elements: createElement + appendChild.
setTimeout runs code after a delay.