script.js

// Elementos da UI
const startScreen = document.getElementById('start-screen');
const quizScreen = document.getElementById('quiz-screen');
const resultScreen = document.getElementById('result-screen');
const startButton = document.getElementById('start-button');
const questionText = document.getElementById('question-text');
const currentQuestionSpan = document.getElementById('current-question');
const totalQuestionsSpan = document.getElementById('total-questions');
const answersContainer = document.getElementById('answers-container');
const progressBar = document.getElementById('progress-bar');
const scoreSpan = document.getElementById('score');
const finalScoreSpan = document.getElementById('final-score');
const maxScoreSpan = document.getElementById('max-score');
const resultMessage = document.getElementById('result-message');
const restartButton = document.getElementById('restart-button');

// Perguntas do quiz
const quizQuestions = [
  {
    question: "Qual é a capital da França?",
    answers: [
      { text: "Paris", correct: true },
      { text: "Londres", correct: false },
      { text: "Berlim", correct: false },
      { text: "Madri", correct: false }
    ]
  },
  {
    question: "Qual é o maior planeta do sistema solar?",
    answers: [
      { text: "Terra", correct: false },
      { text: "Júpiter", correct: true },
      { text: "Saturno", correct: false },
      { text: "Marte", correct: false }
    ]
  },
  {
    question: "Quem escreveu 'Dom Casmurro'?",
    answers: [
      { text: "Machado de Assis", correct: true },
      { text: "José de Alencar", correct: false },
      { text: "Clarice Lispector", correct: false },
      { text: "Jorge Amado", correct: false }
    ]
  },
  {
    question: "Qual é a fórmula química da água?",
    answers: [
      { text: "H2O", correct: true },
      { text: "CO2", correct: false },
      { text: "O2", correct: false },
      { text: "NaCl", correct: false }
    ]
  },
  {
    question: "Qual é o continente mais populoso do mundo?",
    answers: [
      { text: "África", correct: false },
      { text: "América", correct: false },
      { text: "Ásia", correct: true },
      { text: "Europa", correct: false }
    ]
  },
  {
    question: "Qual é o elemento químico com símbolo 'O'?",
    answers: [
      { text: "Ouro", correct: false },
      { text: "Oxigênio", correct: true },
      { text: "Ósmio", correct: false },
      { text: "Osmium", correct: false }
    ]
  },
  {
    question: "Quem pintou a Mona Lisa?",
    answers: [
      { text: "Vincent van Gogh", correct: false },
      { text: "Pablo Picasso", correct: false },
      { text: "Leonardo da Vinci", correct: true },
      { text: "Michelangelo", correct: false }
    ]
  },
  {
    question: "Qual é a capital do Japão?",
    answers: [
      { text: "Tóquio", correct: true },
      { text: "Seul", correct: false },
      { text: "Pequim", correct: false },
      { text: "Bangkok", correct: false }
    ]
  }
];

// Estado do quiz
let currentQuestionIndex = 0;
let score = 0;
let answersDisabled = false;

// Inicialização
totalQuestionsSpan.textContent = quizQuestions.length;
maxScoreSpan.textContent = quizQuestions.length;

// Eventos
startButton.addEventListener('click', startQuiz);
restartButton.addEventListener('click', restartQuiz);

// Inicia o quiz
function startQuiz() {
  currentQuestionIndex = 0;
  score = 0;
  scoreSpan.textContent = score;

  startScreen.classList.remove('active');
  resultScreen.classList.remove('active');
  quizScreen.classList.add('active');

  showQuestion();
}

// Exibe a pergunta atual
function showQuestion() {
  answersDisabled = false;
  const currentQuestion = quizQuestions[currentQuestionIndex];

  currentQuestionSpan.textContent = currentQuestionIndex + 1;
  questionText.textContent = currentQuestion.question;

  const progressPercent = (currentQuestionIndex / quizQuestions.length) * 100;
  progressBar.style.width = `${progressPercent}%`;

  answersContainer.innerHTML = '';
  currentQuestion.answers.forEach(answer => {
    const button = document.createElement('button');
    button.textContent = answer.text;
    button.classList.add('answer-btn');
    button.dataset.correct = answer.correct;
    button.addEventListener('click', selectAnswer);
    answersContainer.appendChild(button);
  });
}

// Trata a seleção de resposta
function selectAnswer(event) {
  if (answersDisabled) return;
  answersDisabled = true;

  const selectedButton = event.target;
  const isCorrect = selectedButton.dataset.correct === 'true';

  Array.from(answersContainer.children).forEach(button => {
    if (button.dataset.correct === 'true') {
      button.classList.add('correct');
    } else if (button === selectedButton) {
      button.classList.add('incorrect');
    }
  });

  if (isCorrect) {
    score++;
    scoreSpan.textContent = score;
  }

  setTimeout(() => {
    currentQuestionIndex++;
    if (currentQuestionIndex < quizQuestions.length) {
      showQuestion();
    } else {
      showResult();
    }
  }, 1000);
}

// Mostra o resultado final
function showResult() {
  quizScreen.classList.remove('active');
  resultScreen.classList.add('active');
  finalScoreSpan.textContent = score;

  const percentage = (score / quizQuestions.length) * 100;
  if (percentage === 100) {
    resultMessage.textContent = "Excelente! Você acertou todas as perguntas!";
  } else if (percentage >= 80) {
    resultMessage.textContent = "Bom trabalho! Você acertou a maioria das perguntas.";
  } else if (percentage >= 60) {
    resultMessage.textContent = "Você passou, mas ainda pode melhorar.";
  } else if (percentage >= 50) {
    resultMessage.textContent = "Você está quase lá! Continue praticando.";
  } else {
    resultMessage.textContent = "Você não passou. Tente novamente!";
  }
}

// Reinicia o quiz
function restartQuiz() {
  resultScreen.classList.remove('active');
  startQuiz();
}