મેથ્સ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Multiplication Tables 1–20 Quiz</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: #f0f4f8;
      margin: 0;
      padding: 20px;
      text-align: center;
    }
    .container {
      max-width: 500px;
      margin: 0 auto;
      background: white;
      padding: 30px;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
    h1 {
      color: #2c3e50;
      margin-bottom: 10px;
    }
    #question {
      font-size: 2.2rem;
      font-weight: bold;
      margin: 30px 0 25px;
      color: #2980b9;
    }
    .options {
      display: grid;
      grid-template-columns: 1fr;
      gap: 15px;
      margin-bottom: 30px;
    }
    .option {
      background: #ecf0f1;
      padding: 18px;
      font-size: 1.3rem;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s;
      border: 2px solid transparent;
    }
    .option:hover {
      background: #bdc3c7;
    }
    .correct {
      background: #2ecc71 !important;
      color: white;
      border-color: #27ae60;
    }
    .wrong {
      background: #e74c3c !important;
      color: white;
      border-color: #c0392b;
    }
    #result {
      font-size: 1.4rem;
      margin: 20px 0;
      font-weight: bold;
    }
    button {
      background: #3498db;
      color: white;
      border: none;
      padding: 14px 30px;
      font-size: 1.2rem;
      border-radius: 8px;
      cursor: pointer;
      margin-top: 15px;
    }
    button:hover {
      background: #2980b9;
    }
    #score {
      font-size: 1.3rem;
      margin-top: 20px;
      color: #2c3e50;
    }
  </style>
</head>
<body>

  <div class="container">
    <h1>Multiplication Tables (1–20)</h1>
    <div id="question">?</div>
    
    <div class="options" id="options">
      <!-- Options will be added here by JavaScript -->
    </div>

    <div id="result"></div>
    <button id="nextBtn">Next Question</button>

    <div id="score">Score: 0 / 0</div>
  </div>

  <script>
    let correctAnswer;
    let score = 0;
    let total = 0;

    const questionEl = document.getElementById('question');
    const optionsEl = document.getElementById('options');
    const resultEl = document.getElementById('result');
    const nextBtn = document.getElementById('nextBtn');
    const scoreEl = document.getElementById('score');

    function getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function generateQuestion() {
      // Reset styles and text
      resultEl.textContent = '';
      optionsEl.innerHTML = '';
      nextBtn.textContent = 'Next Question';

      const a = getRandomInt(1, 20);
      const b = getRandomInt(1, 20);
      correctAnswer = a * b;

      questionEl.textContent = `${a} × ${b} = ?`;

      // Create 4 options
      let answers = [correctAnswer];

      // Add 3 wrong answers
      while (answers.length < 4) {
        let wrong = getRandomInt(Math.max(1, correctAnswer - 30), correctAnswer + 40);
        if (wrong !== correctAnswer && !answers.includes(wrong)) {
          answers.push(wrong);
        }
      }

      // Shuffle the options
      answers.sort(() => Math.random() - 0.5);

      // Create option buttons
      answers.forEach(ans => {
        const div = document.createElement('div');
        div.className = 'option';
        div.textContent = ans;
        div.addEventListener('click', () => checkAnswer(ans, div));
        optionsEl.appendChild(div);
      });
    }

    function checkAnswer(selected, element) {
      // Disable further clicks
      const allOptions = document.querySelectorAll('.option');
      allOptions.forEach(opt => opt.style.pointerEvents = 'none');

      total++;
      if (selected === correctAnswer) {
        resultEl.textContent = 'Correct! 🎉';
        resultEl.style.color = '#27ae60';
        element.classList.add('correct');
        score++;
      } else {
        resultEl.textContent = `Wrong! The correct answer is ${correctAnswer}`;
        resultEl.style.color = '#c0392b';
        element.classList.add('wrong');

        // Highlight correct one
        allOptions.forEach(opt => {
          if (parseInt(opt.textContent) === correctAnswer) {
            opt.classList.add('correct');
          }
        });
      }

      scoreEl.textContent = `Score: ${score} / ${total}`;
      nextBtn.textContent = 'Next Question';
    }

    nextBtn.addEventListener('click', generateQuestion);

    // Start the quiz
    generateQuestion();
  </script>

</body>
</html>

Comments

Post a Comment