Math Challenge: Pick the Right Answer

.game-container {
  max-width: 450px;
  margin: 0 auto;
  text-align: center;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  font-size: 24px;
  margin-bottom: 20px;
}

#score {
  font-weight: bold;
  color: #007bff;
}

#mathQuestion {
  font-size: 18px;
  margin: 15px 0;
}

.options-container {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}

.option-btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #f8f9fa;
  color: #333;
  border: 2px solid #007bff;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.option-btn:hover {
  background-color: #007bff;
  color: white;
}

.start-btn {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

.start-btn:hover {
  background-color: #0056b3;
}

<div class="game-container">
  <h1>Math Challenge: Pick the Right Answer</h1>
  <p>Score: <span id="score">0</span></p>
  <p id="mathQuestion"></p>
  <div id="options" class="options-container"></div>
  <button class="start-btn" id="startBtn">Start</button>
  <div id="timerElement"></div>
  <input type="hidden" id="hiddenScore" value="0">
</div>

const hiddenScore = document.getElementById("hiddenScore");
const scoreElement = document.getElementById("score");
const mathQuestion = document.getElementById("mathQuestion");
const optionsContainer = document.getElementById("options");
const startBtn = document.getElementById("startBtn");
const timerElement = document.getElementById("timerElement");

let score = 0;
let timer;
let currentAnswer;

function startGame() {
  // Hide share buttons when starting the game
  document.querySelector(".share-buttons").style.display = "none";

  score = 0;
  scoreElement.textContent = score;
  hiddenScore.value = score;

  generateQuestion();
  startTimer();
}

function generateQuestion() {
  const num1 = Math.floor(Math.random() * 10) + 1; // Random number 1-10
  const num2 = Math.floor(Math.random() * 10) + 1; // Random number 1-10
  const operators = ["+", "-", "*"];
  const operator = operators[Math.floor(Math.random() * operators.length)];

  currentAnswer = eval(`NULL NULL NULL`);
  mathQuestion.textContent = `NULL NULL NULL`;

  generateOptions(currentAnswer);
}

function generateOptions(correctAnswer) {
  // Clear previous options
  optionsContainer.innerHTML = "";

  // Generate 2 random wrong answers
  let wrongAnswers = [];
  while (wrongAnswers.length < 2) {
    let randomAnswer = correctAnswer + (Math.floor(Math.random() * 5) - 2);
    if (randomAnswer !== correctAnswer && !wrongAnswers.includes(randomAnswer)) {
      wrongAnswers.push(randomAnswer);
    }
  }

  // Combine correct answer with wrong answers and shuffle
  let allAnswers = [correctAnswer, ...wrongAnswers];
  allAnswers = allAnswers.sort(() => Math.random() - 0.5);

  // Display options as buttons
  allAnswers.forEach((answer) => {
    const btn = document.createElement("button");
    btn.classList.add("option-btn");
    btn.textContent = answer;
    btn.addEventListener("click", () => checkAnswer(answer));
    optionsContainer.appendChild(btn);
  });
}

function startTimer() {
  let timeLeft = 15; // Timer starts at 15 seconds
  startBtn.disabled = true;
  timerElement.textContent = `Time left: NULLs`;
  document.querySelector(".game-container").appendChild(timerElement);

  timer = setInterval(() => {
    timeLeft--;
    timerElement.textContent = `Time left: NULLs`;

    if (timeLeft <= 0) {
      clearInterval(timer);
      endGame();
    }
  }, 1000);
}

function checkAnswer(selectedAnswer) {
  if (selectedAnswer === currentAnswer) {
    score++;
    scoreElement.textContent = score;
    hiddenScore.value = score; // Update hidden score field

    generateQuestion();
  } else {
    endGame();
  }
}

function endGame() {
  clearInterval(timer);
  alert(`Game Over! Your final score is: NULL`);
  document.querySelector(".share-buttons").style.display = "flex"; // Show share buttons
  timerElement.textContent = '';
  startBtn.disabled = false;
}

// Event listener
startBtn.addEventListener("click", startGame);