Ein Quiz für deine Besucher

Wie es funktionieren wird

Du baust ein Quiz: eine Frage, drei Antwortmöglichkeiten, Klick zum Antworten, und am Ende erscheint der Punktestand. Die Quiz-Daten (Fragen und Antworten) leben in einem Array von Objekten – das klingt fancy, aber du wirst sehen, es ist nur eine ordentlich organisierte Liste.

Zeig mir das: die Quiz-Daten

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

• Ein Array [...] ist eine Liste von Werten – das kennst du schon (photos war auch ein Array).
• Ein Objekt {...} ist eine Box mit benannten Fächern: text, choices, correct.
• correct: 1 bedeutet: Antwort Nummer 1 ist richtig – Zählen beginnt bei null, also ist es die zweite in der Reihenfolge.

Zeig mir das: die 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();

Neue Sachen:

• document.createElement("button") – JavaScript kann nicht nur Elemente finden, sondern auch erstellen. Wir erstellen für jede Antwortmöglichkeit einen Button.
• appendChild(...) – fügt das erstellte Element in die Seite ein.
• innerHTML = "" – leert den Inhalt eines Elements (wir räumen die alten Buttons vor der nächsten Frage weg).
• Zwei Funktionen geben sich gegenseitig Arbeit: showQuestion() zeichnet, answer() wertet aus. Ein Programm in kleine Funktionen zu teilen ist eine Profi-Gewohnheit.

Jetzt du 💪

Baue ein Quiz mit deinen eigenen Fragen – mindestens fünf. Projektideen:

• 🏫 Quiz über unsere Schule – wie alt ist die Schule? Wer ist der Direktor? Wie viele Klassenzimmer haben wir?
• 🙋 Wie gut kennst du mich? – mein Lieblingsessen? Wie alt bin ich? Wie heißt mein Hund?
• 🌍 Reise-Quiz – Hauptstadt von Kroatien? Höchster Berg in deinem Land? In welche Richtung ist das Meer?
• ⚽ Wie gut kennst du unser Team? – wer ist der Kapitän? Wie viele Tore hat Tom geschossen? Was sind die Vereinsfarben?

Tausch einfach den Inhalt des questions-Arrays aus – die Quiz-Engine bleibt gleich. Genau deshalb werden Daten und Logik getrennt gehalten!

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

Das nimmst du aus dieser Lektion mit

• Halte Daten (ein Array von Objekten) getrennt von Logik (Funktionen) – dann reicht es, die Fragen auszutauschen, um ein neues Quiz zu bekommen.
• JavaScript kann Elemente erstellen: createElement + appendChild.
• setTimeout führt Code nach einer Verzögerung aus.

© 2026 Ing. Martin Polak / AlgoRhino · Nutzungsbedingungen für Inhalte