script.js

    const { useState, useEffect, useCallback } = React;

    // ============================================
    // 📚 QUIZ DATA - Array of question objects
    // ============================================
    // Each object contains: question text, options array, correct answer
    const quizData = [
      {
        question: "What is HTML?",
        options: ["Programming Language", "Markup Language", "Database", "Operating System"],
        answer: "Markup Language"
      },
      {
        question: "What does CSS stand for?",
        options: ["Computer Style Sheets", "Cascading Style Sheets", "Creative Style System", "Colorful Style Sheets"],
        answer: "Cascading Style Sheets"
      },
      {
        question: "What is React JS?",
        options: ["A Database", "A JavaScript Library", "An Operating System", "A Programming Language"],
        answer: "A JavaScript Library"
      },
      {
        question: "Which keyword is used to declare a constant in JavaScript?",
        options: ["var", "let", "const", "constant"],
        answer: "const"
      },
      {
        question: "What is the virtual DOM in React?",
        options: ["A real DOM copy", "A lightweight JavaScript object", "A CSS framework", "A server"],
        answer: "A lightweight JavaScript object"
      },
      {
        question: "Which hook is used for side effects in React?",
        options: ["useState", "useEffect", "useContext", "useReducer"],
        answer: "useEffect"
      },
      {
        question: "What does API stand for?",
        options: ["Application Programming Interface", "Advanced Program Integration", "Automated Protocol Interface", "Application Process Integration"],
        answer: "Application Programming Interface"
      }
    ];

    // ============================================
    // 🎯 TIMER COMPONENT
    // ============================================
    // Displays countdown timer for each question
    function Timer({ timeLeft, totalTime, onTimeUp }) {
      // Calculate percentage for progress bar
      const percentage = (timeLeft / totalTime) * 100;
      const isWarning = timeLeft <= 5; // Warning when 5 seconds or less

      // useEffect runs when timeLeft changes
      useEffect(() => {
        if (timeLeft === 0) {
          onTimeUp(); // Call parent function when timer hits zero
        }
      }, [timeLeft, onTimeUp]);

      return (
        <div className="mb-6 fade-in">
          {/* Timer label */}
          <div className="flex justify-between text-sm text-white mb-2">
            <span>⏱️ Time Remaining</span>
            <span className={isWarning ? "text-yellow-300 font-bold timer-warning" : ""}>
              {timeLeft}s
            </span>
          </div>
          {/* Progress bar */}
          <div className="w-full bg-white/30 rounded-full h-3 overflow-hidden">
            <div 
              className={`h-full rounded-full transition-all duration-1000 ${
                isWarning ? 'bg-red-500' : 'bg-green-400'
              }`}
              style={{ width: `${percentage}%` }}
            />
          </div>
        </div>
      );
    }

    // ============================================
    // 📝 QUESTION CARD COMPONENT
    // ============================================
    // Displays the current question and options
    function QuestionCard({ 
      question, 
      options, 
      questionNumber, 
      totalQuestions, 
      onAnswerSelect,
      selectedAnswer,
      showResult,
      isCorrect
    }) {
      return (
        <div className="fade-in">
          {/* Progress indicator */}
          <div className="flex justify-between items-center mb-4">
            <span className="bg-white/20 text-white px-4 py-1 rounded-full text-sm">
              Question {questionNumber} of {totalQuestions}
            </span>
            <div className="w-1/2 bg-white/30 rounded-full h-2">
              <div 
                className="bg-purple-400 h-2 rounded-full transition-all duration-500"
                style={{ width: `${(questionNumber / totalQuestions) * 100}%` }}
              />
            </div>
          </div>

          {/* Question text */}
          <h2 className="text-2xl font-bold text-white mb-8 text-center">
            {question}
          </h2>

          {/* Options container */}
          <div className="space-y-3">
            {/* Map through options and create button for each */}
            {options.map((option, index) => {
              // Determine button style based on state
              let btnClass = "option-btn bg-white/90 hover:bg-white text-gray-800";
              
              if (showResult && selectedAnswer === option) {
                // Show green for correct, red for wrong
                btnClass = isCorrect 
                  ? "option-btn bg-green-500 text-white" 
                  : "option-btn bg-red-500 text-white shake";
              } else if (showResult && option === question.answer) {
                // Highlight correct answer when showing result
                btnClass = "option-btn bg-green-500/50 text-white border-2 border-green-400";
              } else if (selectedAnswer === option) {
                // Show selected state
                btnClass = "option-btn bg-purple-500 text-white";
              }

              return (
                <button
                  key={index} // Unique key for React
                  onClick={() => !showResult && onAnswerSelect(option)}
                  disabled={showResult} // Disable after answering
                  className={`w-full p-4 rounded-xl text-left font-medium ${btnClass} slide-in`}
                  style={{ animationDelay: `${index * 0.1}s` }}
                >
                  <span className="inline-block w-8 h-8 bg-purple-500 text-white rounded-lg text-center leading-8 mr-3">
                    {String.fromCharCode(65 + index)}
                  </span>
                  {option}
                </button>
              );
            })}
          </div>
        </div>
      );
    }

    // ============================================
    // 🏆 RESULT SCREEN COMPONENT
    // ============================================
    // Displays final score and restart option
    function ResultScreen({ score, total, onRestart, timeTaken }) {
      // Calculate percentage
      const percentage = Math.round((score / total) * 100);
      
      // Determine message based on score
      let message = "";
      let emoji = "";
      if (percentage >= 80) {
        message = "🎉 Excellent! You're a pro!";
        emoji = "🏆";
      } else if (percentage >= 60) {
        message = "👍 Good job! Keep practicing!";
        emoji = "⭐";
      } else if (percentage >= 40) {
        message = "📚 Not bad, but room for improvement!";
        emoji = "📖";
      } else {
        message = "💪 Keep learning, you'll get better!";
        emoji = "🎯";
      }

      return (
        <div className="text-center fade-in">
          <div className="text-8xl mb-4 bounce">{emoji}</div>
          <h2 className="text-4xl font-bold text-white mb-4">Quiz Completed!</h2>
          
          {/* Score circle */}
          <div className="relative w-40 h-40 mx-auto mb-6">
            <svg className="w-full h-full transform -rotate-90">
              <circle
                cx="80"
                cy="80"
                r="70"
                stroke="rgba(255,255,255,0.3)"
                strokeWidth="10"
                fill="none"
              />
              <circle
                cx="80"
                cy="80"
                r="70"
                stroke={percentage >= 60 ? "#4ade80" : "#f87171"}
                strokeWidth="10"
                fill="none"
                strokeDasharray={`${percentage * 4.4} 440`}
                strokeLinecap="round"
                className="transition-all duration-1000"
              />
            </svg>
            <div className="absolute inset-0 flex items-center justify-center">
              <span className="text-4xl font-bold text-white">{percentage}%</span>
            </div>
          </div>

          {/* Score details */}
          <div className="bg-white/20 rounded-2xl p-6 mb-6">
            <p className="text-2xl text-white mb-2">
              You scored <span className="font-bold">{score}</span> out of <span className="font-bold">{total}</span>
            </p>
            <p className="text-white/80">
              ⏱️ Total time: {Math.floor(timeTaken / 60)}:{(timeTaken % 60).toString().padStart(2, '0')}
            </p>
            <p className="text-lg text-white mt-3 font-medium">{message}</p>
          </div>

          {/* Restart button */}
          <button
            onClick={onRestart}
            className="bg-white text-purple-600 px-8 py-4 rounded-xl font-bold text-lg hover:scale-105 transition-transform pulse"
          >
            🔄 Play Again
          </button>
        </div>
      );
    }

    // ============================================
    // 🎮 MAIN QUIZ APP COMPONENT
    // ============================================
    // Main component that manages quiz state
    function QuizApp() {
      // ============ STATE VARIABLES ============
      // currentQuestion: Index of current question (starts at 0)
      const [currentQuestion, setCurrentQuestion] = useState(0);
      
      // score: Number of correct answers
      const [score, setScore] = useState(0);
      
      // selectedAnswer: The answer user clicked for current question
      const [selectedAnswer, setSelectedAnswer] = useState(null);
      
      // showResult: Whether to show correct/wrong feedback
      const [showResult, setShowResult] = useState(false);
      
      // quizComplete: Whether the entire quiz is finished
      const [quizComplete, setQuizComplete] = useState(false);
      
      // timeLeft: Timer countdown for current question
      const [timeLeft, setTimeLeft] = useState(15);
      
      // totalTime: Total time spent on quiz
      const [totalTimeTaken, setTotalTimeTaken] = useState(0);

      // ============ TIMER EFFECT ============
      // useEffect runs when currentQuestion or timeLeft changes
      useEffect(() => {
        // Reset timer when moving to new question
        if (!quizComplete && !showResult) {
          setTimeLeft(15);
        }
      }, [currentQuestion, quizComplete, showResult]);

      // Countdown timer - runs every second
      useEffect(() => {
        if (!quizComplete && !showResult && timeLeft > 0) {
          const timer = setInterval(() => {
            setTimeLeft(prev => prev - 1); // Decrease time by 1
          }, 1000); // 1000ms = 1 second
          
          // Cleanup function - clears interval when component unmounts
          return () => clearInterval(timer);
        }
      }, [quizComplete, showResult, timeLeft]);

      // Track total time
      useEffect(() => {
        if (!quizComplete) {
          const timer = setInterval(() => {
            setTotalTimeTaken(prev => prev + 1);
          }, 1000);
          return () => clearInterval(timer);
        }
      }, [quizComplete]);

      // ============ ANSWER HANDLER ============
      const handleAnswerSelect = useCallback((answer) => {
        if (showResult) return; // Prevent multiple selections
        
        setSelectedAnswer(answer); // Store selected answer
        setShowResult(true); // Show result feedback

        // Check if answer is correct
        const currentQ = quizData[currentQuestion];
        if (answer === currentQ.answer) {
          setScore(prev => prev + 1); // Increment score if correct
        }

        // Auto-advance after showing result
        setTimeout(() => {
          if (currentQuestion < quizData.length - 1) {
            // Go to next question
            setCurrentQuestion(prev => prev + 1);
            setSelectedAnswer(null);
            setShowResult(false);
          } else {
            // Quiz complete
            setQuizComplete(true);
          }
        }, 2000); // Wait 2 seconds before next question
      }, [currentQuestion, showResult]);

      // ============ TIME UP HANDLER ============
      const handleTimeUp = useCallback(() => {
        if (showResult || quizComplete) return;
        
        setSelectedAnswer("Time's up!");
        setShowResult(true);

        // Auto-advance after timeout
        setTimeout(() => {
          if (currentQuestion < quizData.length - 1) {
            setCurrentQuestion(prev => prev + 1);
            setSelectedAnswer(null);
            setShowResult(false);
          } else {
            setQuizComplete(true);
          }
        }, 2000);
      }, [currentQuestion, showResult, quizComplete]);

      // ============ RESTART QUIZ ============
      const handleRestart = () => {
        setCurrentQuestion(0);
        setScore(0);
        setSelectedAnswer(null);
        setShowResult(false);
        setQuizComplete(false);
        setTimeLeft(15);
        setTotalTimeTaken(0);
      };

      // ============ RENDER ============
      return (
        <div className="bg-white/10 backdrop-blur-lg rounded-3xl p-8 shadow-2xl w-full max-w-2xl">
          {/* Show quiz completion screen */}
          {quizComplete ? (
            <ResultScreen 
              score={score} 
              total={quizData.length} 
              onRestart={handleRestart}
              timeTaken={totalTimeTaken}
            />
          ) : (
            /* Show current question */
            <>
              {/* Timer component */}
              <Timer 
                timeLeft={timeLeft} 
                totalTime={15} 
                onTimeUp={handleTimeUp}
              />

              {/* Question card component */}
              <QuestionCard
                question={quizData[currentQuestion].question}
                options={quizData[currentQuestion].options}
                questionNumber={currentQuestion + 1}
                totalQuestions={quizData.length}
                onAnswerSelect={handleAnswerSelect}
                selectedAnswer={selectedAnswer}
                showResult={showResult}
                isCorrect={selectedAnswer === quizData[currentQuestion].answer}
                currentQuestionData={quizData[currentQuestion]}
              />

              {/* Feedback message */}
              {showResult && (
                <div className={`mt-4 text-center text-lg font-bold fade-in ${
                  selectedAnswer === quizData[currentQuestion].answer 
                    ? "text-green-300" 
                    : "text-red-300"
                }`}>
                  {selectedAnswer === quizData[currentQuestion].answer 
                    ? "✅ Correct!" 
                    : `❌ Wrong! Answer: ${quizData[currentQuestion].answer}`}
                </div>
              )}
            </>
          )}
        </div>
      );
    }

    // ============================================
    // 🚀 RENDER REACT APP
    // ============================================
    // Create root and render QuizApp component
    const root = ReactDOM.createRoot(document.getElementById("root"));
    root.render(<QuizApp />);