Project: Quiz App

const questions = [
  {
    id: 1,
    question: "JavaScript mein typeof null kya return karta hai?",
    options: ["null", "object", "undefined", "string"],
    correct: 1,
    explanation: "Yeh JS ka famous bug hai — typeof null returns 'object'"
  },
  {
    id: 2,
    question: "Array mein se duplicates remove karne ka best way?",
    options: ["loop", "filter", "[...new Set(arr)]", "splice"],
    correct: 2,
    explanation: "Set automatically unique values store karta hai"
  },
  {
    id: 3,
    question: "=== aur == mein kya farq hai?",
    options: [
      "Koi farq nahi",
      "=== type bhi check karta hai",
      "== zyada strict hai",
      "=== slow hai"
    ],
    correct: 1,
    explanation: "=== strict equality — value AND type dono match chahiye"
  }
];

class Quiz {
  constructor(questions) {
    this.questions = questions;
    this.current = 0;
    this.score = 0;
    this.answers = [];
    this.startTime = Date.now();
  }
  
  get currentQuestion() { return this.questions[this.current]; }
  get isFinished() { return this.current >= this.questions.length; }
  get timeElapsed() { return Math.floor((Date.now() - this.startTime) / 1000); }
  
  answer(optionIndex) {
    const q = this.currentQuestion;
    const isCorrect = optionIndex === q.correct;
    
    this.answers.push({ questionId: q.id, selected: optionIndex, correct: isCorrect });
    if (isCorrect) this.score++;
    this.current++;
    
    return { isCorrect, explanation: q.explanation };
  }
  
  getResults() {
    return {
      score: this.score,
      total: this.questions.length,
      percentage: Math.round((this.score / this.questions.length) * 100),
      timeSeconds: this.timeElapsed,
      answers: this.answers
    };
  }
}

const quiz = new Quiz(questions);
const container = document.getElementById("quiz");

function renderQuestion() {
  if (quiz.isFinished) { renderResults(); return; }
  
  const q = quiz.currentQuestion;
  container.innerHTML = `
    <div class="progress">
      Question ${quiz.current + 1} / ${quiz.questions.length}
    </div>
    <h2>${q.question}</h2>
    <div class="options">
      ${q.options.map((opt, i) => `
        <button onclick="selectAnswer(${i})" class="option">
          ${String.fromCharCode(65 + i)}. ${opt}
        </button>
      `).join("")}
    </div>
  `;
}

function selectAnswer(index) {
  const { isCorrect, explanation } = quiz.answer(index);
  
  // Show feedback briefly then next question
  const feedback = isCorrect ? "✅ Sahi!" : "❌ Galat!";
  container.querySelector(".options").innerHTML = `
    <p>${feedback}</p>
    <p class="explanation">${explanation}</p>
  `;
  
  setTimeout(() => renderQuestion(), 1500);
}

function renderResults() {
  const r = quiz.getResults();
  container.innerHTML = `
    <h2>Quiz Mukammal! 🎉</h2>
    <p>Score: ${r.score}/${r.total} (${r.percentage}%)</p>
    <p>Time: ${r.timeSeconds}s</p>
    <button onclick="location.reload()">Dobara Khelein</button>
  `;
  localStorage.setItem("lastQuizResult", JSON.stringify(r));
}

renderQuestion();