Um quiz para os teus visitantes

Como vai funcionar

Vais construir um quiz: uma pergunta, três escolhas, clica para responder e a pontuação aparece no fim. Os dados do quiz (perguntas e respostas) vão viver num array de objetos – parece complicado, mas vais ver que é só uma lista bem organizada.

Vou mostrar-te: os dados do quiz

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

• Um array [...] é uma lista de valores – já conheces (photos também era um array).
• Um objeto {...} é uma caixa com compartimentos com nome: text, choices, correct.
• correct: 1 significa: a escolha número 1 é a correta – a contagem começa em zero, por isso é a segunda por ordem.

Vou mostrar-te: o motor do quiz

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

Coisas novas:

• document.createElement("button") – o JavaScript não só encontra elementos, como também os cria. Criamos um botão para cada escolha.
• appendChild(...) – insere o elemento criado na página.
• innerHTML = "" – esvazia o conteúdo de um elemento (limpamos os botões antigos antes da próxima pergunta).
• Duas funções passam trabalho uma à outra: showQuestion() desenha, answer() avalia. Dividir um programa em funções pequenas é um hábito profissional.

Agora és tu 💪

Constrói um quiz com as tuas perguntas – pelo menos cinco. Ideias de projeto:

• 🏫 Quiz sobre a nossa escola – quantos anos tem a escola? Quem é o diretor? Quantas salas temos?
• 🙋 Quão bem me conheces? – a minha comida favorita? Quantos anos tenho? Como se chama o meu cão?
• 🌍 Quiz de viagens – capital da Croácia? Montanha mais alta do teu país? Para que lado fica o mar?
• ⚽ Quão bem conheces a nossa equipa? – quem é o capitão? Quantos golos marcou o Tom? Quais são as cores do clube?

Basta trocar o conteúdo do array questions – o motor do quiz mantém-se igual. É exatamente por isso que dados e lógica ficam separados!

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

O que ficas a saber desta lição

• Mantém dados (um array de objetos) separados da lógica (funções) – assim trocar as perguntas é tudo o que precisas para um quiz novo.
• O JavaScript pode criar elementos: createElement + appendChild.
• setTimeout corre código após um atraso.

© 2026 Ing. Martin Polak / AlgoRhino · Condições de uso do conteúdo