<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Multiplication Quiz</title>
  <style>
    button {
      margin: 5px;
      padding: 10px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div id="quiz-container">
    <div id="question"></div>
    <div id="options"></div>
    <button onclick="nextQuestion()">Next Question</button>
    <button onclick="showSolution()">View Solution</button>
    <div id="solution"></div>
  </div>

  <script>
    // Array of multiplication questions
    const questions = [
      {
        question: "What is 3 × 4?",
        options: ["10", "12", "14", "16"],
        answer: "12"
      },
      {
        question: "What is 5 × 6?",
        options: ["25", "30", "35", "40"],
        answer: "30"
      },
      {
        question: "What is 7 × 8?",
        options: ["48", "54", "56", "64"],
        answer: "56"
      },
      {
        question: "What is 9 × 10?",
        options: ["80", "90", "100", "110"],
        answer: "90"
      },
      {
        question: "What is 11 × 12?",
        options: ["120", "132", "144", "156"],
        answer: "132"
      },{
        "question": "What is 5 × 7?",
        "options": ["34", "35", "36", "37"],
        "answer": "35"
    },
    {
        "question": "What is 6 × 9?",
        "options": ["53", "54", "55", "56"],
        "answer": "54"
    },
    {
        "question": "What is 8 × 7?",
        "options": ["55", "56", "57", "58"],
        "answer": "56"
    },
    
  
    {
        "question": "What is 10 × 2?",
        "options": ["19", "20", "21", "22"],
        "answer": "20"
    }

      // Add more questions here...
    ];

    let currentQuestion = 0;

    function displayQuestion() {
      const q = questions[currentQuestion];
      const questionElement = document.getElementById('question');
      const optionsElement = document.getElementById('options');
      const solutionElement = document.getElementById('solution');

      questionElement.textContent = q.question;
      optionsElement.innerHTML = '';

      q.options.forEach((option, idx) => {
        const optionButton = document.createElement('button');
        optionButton.textContent = option;
        optionButton.addEventListener('click', () => checkAnswer(idx));
        optionsElement.appendChild(optionButton);
      });

      solutionElement.textContent = '';
      solutionElement.style.color = 'black';
    }

    function nextQuestion() {
      currentQuestion++;
      if (currentQuestion < questions.length) {
        displayQuestion();
      } else {
        alert('End of Quiz!');
      }
    }

    function checkAnswer(optionIndex) {
      const q = questions[currentQuestion];
      const solutionElement = document.getElementById('solution');

      if (q.options[optionIndex] === q.answer) {
        solutionElement.textContent = `Correct! The answer is ${q.answer}.`;
        solutionElement.style.color = 'green';
      } else {
        solutionElement.textContent = `Incorrect. The correct answer is ${q.answer}.`;
        solutionElement.style.color = 'red';
      }
    }

    function showSolution() {
      const q = questions[currentQuestion];
      const solutionElement = document.getElementById('solution');

      solutionElement.textContent = `Solution: ${q.question} = ${q.answer}`;
      solutionElement.style.color = 'black';
    }

    // Initialize the first question
    displayQuestion();
  </script>
</body>
</html>
