index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI Quiz Game</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f0f4f8;
      text-align: center;
      padding: 2em;
    }
    .container {
      background: #fff;
      padding: 2em;
      border-radius: 10px;
      max-width: 600px;
      margin: auto;
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    h1 {
      color: #333;
    }
    .question {
      font-size: 1.2em;
      margin-bottom: 1em;
    }
    .options button {
      display: block;
      background: #e0e0e0;
      border: none;
      padding: 1em;
      margin: 0.5em auto;
      width: 100%;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1em;
    }
    .options button:hover {
      background: #c0c0c0;
    }
    .leaderboard, .result {
      margin-top: 1.5em;
      font-weight: bold;
    }
    .celebration {
      font-size: 2em;
      color: #ff4081;
      display: none;
    }
    .timer {
      font-size: 1.2em;
      margin-top: 1em;
    }
    #restartBtn {
      margin-top: 20px;
      padding: 0.75em 2em;
      font-size: 1em;
      background-color: #4CAF50;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      display: none;
    }
    #restartBtn:hover {
      background-color: #45a049;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>AI Quiz Game</h1>
    <div class="question" id="question"></div>
    <div class="options" id="options"></div>
    <div class="timer" id="timer"></div>
    <div class="result" id="result"></div>
    <div class="leaderboard" id="leaderboard"></div>
    <div class="celebration" id="celebration">🎉 Fireworks! 🎆</div>
    <button id="restartBtn" onclick="restartGame()">Restart Game</button>
  </div>

  <script>
    const questions = [
  {
    question: "What is an AI hallucination?",
    options: [
      "A. When your AI starts predicting lottery numbers and insists they're real.",
      "B. When AI makes up info that sounds real—but isn't.",
      "C. When your AI suddenly speaks in rhymes like it’s auditioning for a rap battle.",
      "D. When AI mimics a dream sequence from a sci-fi movie."
    ],
    correct: 1,
    explanation: "AI hallucination is when AI makes up information that sounds real—but isn’t."
  },
  {
    question: "Which of the following is NOT a real AI model?",
    options: ["A. GPT-4", "B. BERT", "C. SHREK", "D. Claude"],
    correct: 2,
    explanation: "SHREK is a beloved ogre, not an AI model."
  },
  {
    question: "What is machine learning?",
    options: [
      "A. Teaching your toaster to surf the web",
      "B. Programming robots to play soccer",
      "C. Algorithms learning from data without explicit programming",
      "D. Machines that lift weights"
    ],
    correct: 2,
    explanation: "Machine learning is when algorithms learn patterns from data without being explicitly programmed."
  },
  {
    question: "Which of the following is a risk of AI use?",
    options: [
      "A. Biased outputs",
      "B. Ethical concerns",
      "C. Misinformation",
      "D. All of the above"
    ],
    correct: 3,
    explanation: "All of the above are legitimate risks of AI use."
  },
  {
    question: "Which industry has NOT adopted AI heavily yet?",
    options: ["A. Healthcare", "B. Agriculture", "C. Beekeeping", "D. Finance"],
    correct: 2,
    explanation: "Beekeeping isn’t widely using AI… yet."
  },
  {
    question: "What does 'training' an AI model mean?",
    options: [
      "A. Sending it to bootcamp",
      "B. Feeding it data to learn patterns",
      "C. Teaching it to talk",
      "D. Giving it motivational speeches"
    ],
    correct: 1,
    explanation: "Training means feeding data into a model so it can learn patterns and make predictions."
  },
  {
    question: "Why should we care about explainable AI?",
    options: [
      "A. So we can trust the results",
      "B. To debug AI outputs",
      "C. For regulatory compliance",
      "D. All of the above"
    ],
    correct: 3,
    explanation: "Explainable AI helps with trust, debugging, and meeting legal requirements."
  },
  {
    question: "What is deep learning?",
    options: [
      "A. When AI takes philosophy classes",
      "B. Neural networks with many layers",
      "C. The emotional side of AI",
      "D. A sleep mode for robots"
    ],
    correct: 1,
    explanation: "Deep learning uses neural networks with many layers to model complex patterns."
  },
  {
    question: "What’s the main ingredient of generative AI?",
    options: [
      "A. Creativity",
      "B. Predefined rules",
      "C. Labeled images",
      "D. Massive datasets and models"
    ],
    correct: 3,
    explanation: "Generative AI relies on huge datasets and models to generate new content."
  },
  {
    question: "What's the best way to ensure ethical AI use?",
    options: [
      "A. Hope for the best",
      "B. Involve diverse teams and clear guidelines",
      "C. Let AI police itself",
      "D. Ask ChatGPT every time"
    ],
    correct: 1,
    explanation: "Diverse human input and responsible governance ensure AI is used ethically."
  }
];

    let currentIndex, score, shuffledQuestions, timer, timeLeft;

    const totalQuestions = 10;
    const questionBox = document.getElementById('question');
    const optionsBox = document.getElementById('options');
    const resultBox = document.getElementById('result');
    const leaderboardBox = document.getElementById('leaderboard');
    const celebrationBox = document.getElementById('celebration');
    const timerBox = document.getElementById('timer');
    const restartBtn = document.getElementById('restartBtn');

    function shuffle(array) {
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
      return array;
    }

    function startGame() {
      currentIndex = 0;
      score = 0;
      shuffledQuestions = shuffle(questions).slice(0, totalQuestions);
      celebrationBox.style.display = 'none';
      restartBtn.style.display = 'none';
      leaderboardBox.innerText = '';
      showQuestion();
    }

    function showQuestion() {
      if (currentIndex >= totalQuestions) {
        clearInterval(timer);
        celebrationBox.style.display = 'block';
        leaderboardBox.innerText = `🎯 Final Score: ${score}`;
        restartBtn.style.display = 'inline-block';
        return;
      }
      const q = shuffledQuestions[currentIndex];
      timeLeft = 30;
      timerBox.innerText = `⏱️ ${timeLeft} seconds left`;
      timer = setInterval(updateTimer, 1000);

      questionBox.innerText = q.question;
      optionsBox.innerHTML = '';
      q.options.forEach((option, index) => {
        const btn = document.createElement('button');
        btn.innerText = option;
        btn.onclick = () => checkAnswer(index);
        optionsBox.appendChild(btn);
      });
    }

    function updateTimer() {
      timeLeft--;
      timerBox.innerText = `⏱️ ${timeLeft} seconds left`;
      if (timeLeft <= 0) {
        clearInterval(timer);
        checkAnswer(-1);
      }
    }

    function checkAnswer(selected) {
      clearInterval(timer);
      const correct = shuffledQuestions[currentIndex].correct;
      const explanation = shuffledQuestions[currentIndex].explanation;
      if (selected === correct) {
        score += (currentIndex + 1) * 10;
        resultBox.innerText = `✅ Correct! ${explanation}`;
      } else {
        resultBox.innerText = `❌ Oops! ${explanation}`;
      }
      currentIndex++;
      setTimeout(() => {
        resultBox.innerText = '';
        leaderboardBox.innerText = `🏆 Current Score: ${score}`;
        showQuestion();
      }, 3000);
    }

    function restartGame() {
      startGame();
    }

    startGame();
  </script>
</body>
</html>