Jak zrobić prosty Quiz na stronę www

Czy kiedykolwiek chciałeś dodać na swoją stronę internetową prosty quiz, żeby zaangażować odwiedzających? Świetny pomysł! Quizy to jedna z najlepszych form interakcji z użytkownikami — nie tylko przyciągają uwagę, ale też mogą zbierać dane, bawić i uczyć. W tym artykule pokażę Ci krok po kroku, jak stworzyć prosty quiz w HTML, CSS i JavaScript.

Dlaczego warto mieć quiz na stronie?

Zanim przejdziemy do kodu, kilka słów o tym, po co w ogóle robić quiz.

Angażuje użytkowników — ludzie lubią sprawdzać swoją wiedzę.
Zwiększa czas spędzony na stronie — quiz zatrzymuje odwiedzających na dłużej.
Zbierasz dane — możesz poznać zainteresowania użytkowników.
Idealny do marketingu — quiz typu „Jaki jesteś typ osobowości?” świetnie nadaje się do kampanii reklamowych.
Jest po prostu fajny!

Co będziemy tworzyć?

Zrobimy prosty quiz, który:

ma kilka pytań,
pozwala wybrać odpowiedź,
po kliknięciu „Zakończ” pokazuje wynik.

Całość wykonamy w trzech plikach:

index.html — struktura quizu,
style.css — wygląd,
script.js — logika quizu.

Krok 1: Struktura HTML

Zacznijmy od podstaw. Otwórz swój edytor (np. VS Code, Notepad++ albo nawet zwykły Notatnik) i utwórz nowy plik index.html.

Wklej do niego poniższy kod:

<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quiz o HTML</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="quiz-container">
    <h1>Quiz o HTML</h1>
    <div id="quiz"></div>
    <button id="submit">Zakończ quiz</button>
    <div id="results"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>

Co tu się dzieje?

Mamy prosty kontener .quiz-container, w którym znajduje się tytuł, quiz, przycisk i miejsce na wynik.
Na końcu wczytujemy plik script.js, który doda całą magię quizu.

Krok 2: Stylizacja (CSS)

Teraz zadbajmy o wygląd. Stwórz nowy plik style.css i dodaj:

body {
  font-family: Arial, sans-serif;
  background: #f2f2f2;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.quiz-container {
  background: white;
  padding: 30px;
  border-radius: 12px;
  width: 400px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

.question {
  margin-bottom: 15px;
}

.answers label {
  display: block;
  margin-bottom: 8px;
  cursor: pointer;
}

button {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 10px;
}

button:hover {
  background-color: #0056b3;
}

#results {
  margin-top: 20px;
  font-weight: bold;
  text-align: center;
}

Efekt:
Quiz będzie wyglądał nowocześnie, estetycznie i będzie przyjazny dla użytkownika.

Krok 3: Logika w JavaScript

No to pora na najważniejszą część – JavaScript, który sprawi, że quiz będzie działał.
Otwórz plik script.js i wklej poniższy kod:

const quizContainer = document.getElementById('quiz');
const resultsContainer = document.getElementById('results');
const submitButton = document.getElementById('submit');

const myQuestions = [
  {
    question: "Co oznacza skrót HTML?",
    answers: {
      a: "Hyper Text Markup Language",
      b: "High Text Markdown Language",
      c: "Hyperlink Transfer Machine"
    },
    correctAnswer: "a"
  },
  {
    question: "Który znacznik służy do wstawienia obrazu?",
    answers: {
      a: "<img>",
      b: "<picture>",
      c: "<src>"
    },
    correctAnswer: "a"
  },
  {
    question: "Jak zamykamy znacznik w HTML?",
    answers: {
      a: "</...>",
      b: "<.../>",
      c: "Oba sposoby są poprawne"
    },
    correctAnswer: "c"
  }
];

function buildQuiz() {
  const output = [];

  myQuestions.forEach((currentQuestion, questionNumber) => {
    const answers = [];

    for (letter in currentQuestion.answers) {
      answers.push(
        `<label>
          <input type="radio" name="question${questionNumber}" value="${letter}">
          ${letter}: ${currentQuestion.answers[letter]}
        </label>`
      );
    }

    output.push(
      `<div class="question">${currentQuestion.question}</div>
      <div class="answers">${answers.join('')}</div>`
    );
  });

  quizContainer.innerHTML = output.join('');
}

function showResults() {
  const answerContainers = quizContainer.querySelectorAll('.answers');
  let numCorrect = 0;

  myQuestions.forEach((currentQuestion, questionNumber) => {
    const answerContainer = answerContainers[questionNumber];
    const selector = `input[name=question${questionNumber}]:checked`;
    const userAnswer = (answerContainer.querySelector(selector) || {}).value;

    if (userAnswer === currentQuestion.correctAnswer) {
      numCorrect++;
      answerContainers[questionNumber].style.color = 'green';
    } else {
      answerContainers[questionNumber].style.color = 'red';
    }
  });

  resultsContainer.innerHTML = `Twój wynik: ${numCorrect} z ${myQuestions.length}`;
}

buildQuiz();
submitButton.addEventListener('click', showResults);

Jak to działa?

myQuestions — tablica z pytaniami, odpowiedziami i poprawnymi odpowiedziami.
buildQuiz() — generuje pytania i odpowiedzi w HTML.
showResults() — sprawdza, które odpowiedzi są poprawne, koloruje je i wyświetla wynik.
Na końcu skryptu uruchamiamy quiz i podpinamy przycisk do funkcji sprawdzającej wynik.

Krok 4: Sprawdź efekt!

Zapisz wszystkie pliki w jednym folderze i otwórz index.html w przeglądarce.
Powinieneś zobaczyć prosty, elegancki quiz z trzema pytaniami.
Po kliknięciu przycisku „Zakończ quiz” pojawi się Twój wynik.

Jak rozszerzyć quiz?

Jeśli chcesz, możesz go dowolnie modyfikować. Oto kilka pomysłów:

Dodaj więcej pytań

Po prostu dopisz kolejne obiekty w tablicy myQuestions.

{
  question: "Który znacznik tworzy link?",
  answers: {
    a: "<link>",
    b: "<a>",
    c: "<url>"
  },
  correctAnswer: "b"
}

Zrób quiz z punktacją i oceną

Możesz dodać ocenę końcową, np.:

if (numCorrect === myQuestions.length) {
  resultsContainer.innerHTML = `Perfekcyjnie! 🏆`;
} else if (numCorrect > 1) {
  resultsContainer.innerHTML = `Całkiem nieźle, zdobyłeś ${numCorrect} punktów!`;
} else {
  resultsContainer.innerHTML = `Spróbuj jeszcze raz 😅`;
}

Ulepsz wygląd

Użyj gradientów, animacji CSS albo frameworka, np. Bootstrap lub Tailwind CSS, by quiz wyglądał jeszcze lepiej.

Krok 5: Dodaj quiz na stronę

Jeśli masz już swoją stronę www (np. w WordPressie lub jako statyczny projekt HTML), wystarczy:

skopiować kod HTML, CSS i JS,
umieścić go w odpowiednich plikach (lub w edytorze kodu HTML strony),
sprawdzić, czy ścieżki do plików są poprawne.

Gotowe! Twój quiz działa online.

Bonus: Quiz z wynikiem procentowym

Chcesz, żeby wynik był pokazany w procentach?
Dodaj prostą modyfikację w funkcji showResults():

const percent = Math.round((numCorrect / myQuestions.length) * 100);
resultsContainer.innerHTML = `Twój wynik: ${percent}%`;

Teraz quiz pokazuje procentowy wynik użytkownika — wygląda bardziej profesjonalnie.

Wskazówki dla początkujących

Nie przesadzaj z długością quizu. 5–10 pytań to złoty środek.
Zadbaj o atrakcyjny tytuł. Ludzie klikają quizy, które brzmią ciekawie. np. „Sprawdź, ile naprawdę wiesz o HTML!”
Dodaj obrazki lub emoji. Wzrokowe elementy zwiększają zaangażowanie.
Użyj responsywnego designu. Upewnij się, że quiz dobrze wygląda na telefonie.

Zrobienie quizu na stronę www to naprawdę prosta, ale efektowna metoda na zwiększenie zaangażowania użytkowników.
Nie musisz znać zaawansowanego programowania — wystarczy podstawowa znajomość HTML, CSS i JavaScript.