Quiz

React JS

import React, { useState } from "react";
import "./styles.css";

const quizQuestions = [
  {
    question: "What is React?",
    options: ["A database", "A framework", "A library", "A language"],
    correctAnswer: 2,
  },
  {
    question: "Who created React?",
    options: ["Google", "Facebook", "Twitter", "Microsoft"],
    correctAnswer: 1,
  },
  {
    question: "What is JSX?",
    options: [
      "A template language",
      "A data structure",
      "A syntax extension for JavaScript",
      "A database query language",
    ],
    correctAnswer: 2,
  },
  {
    question: "What is the use of `useEffect` in React?",
    options: [
      "To handle component rendering",
      "To manage side effects",
      "To manage component state",
      "To create a context",
    ],
    correctAnswer: 1,
  },
  {
    question: "What is a React component?",
    options: [
      "A function or class that returns JSX",
      "A type of Redux state",
      "A database entry",
      "A server-side API",
    ],
    correctAnswer: 0,
  },
  {
    question: "Which of the following is a React hook?",
    options: ["useState", "getElementById", "document.querySelector", "fetch"],
    correctAnswer: 0,
  },
  {
    question: "What does `setState` do in a React component?",
    options: [
      "Initializes component state",
      "Renders a component",
      "Updates the state and triggers re-render",
      "Handles events",
    ],
    correctAnswer: 2,
  },
  {
    question: "What is `props` short for in React?",
    options: ["Properties", "Propositions", "Procedures", "Prototypes"],
    correctAnswer: 0,
  },
  {
    question: "What is the default port for React development server?",
    options: ["3000", "8000", "5000", "8080"],
    correctAnswer: 0,
  },
  {
    question: "What does `useRef` hook do?",
    options: [
      "Returns a mutable ref object",
      "Manages component state",
      "Triggers re-render",
      "Handles errors",
    ],
    correctAnswer: 0,
  },
];

function App() {
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [showAnswer, setShowAnswer] = useState(false);
  const [quizComplete, setQuizComplete] = useState(false);
  const [quizStarted, setQuizStarted] = useState(false);

  const handleAnswerClick = (index) => {
    if (index === quizQuestions[currentQuestionIndex].correctAnswer) {
      setScore(score + 1);
    }
    setShowAnswer(true);

    // Wait 2 seconds before moving to the next question
    setTimeout(() => {
      setShowAnswer(false);
      if (currentQuestionIndex < quizQuestions.length - 1) {
        setCurrentQuestionIndex(currentQuestionIndex + 1);
      } else {
        setQuizComplete(true);
        setQuizStarted(false);
      }
    }, 2000);
  };

  const startQuiz = () => {
    setQuizComplete(false);
    setScore(0);
    setCurrentQuestionIndex(0);
    setQuizStarted(true);
  };

  return (
    <div className="quiz-container">
      {!quizStarted ? (
        <div className="quiz-start">
          <h2>Welcome to the React Quiz!</h2>
          <button onClick={startQuiz}>Start Quiz</button>
        </div>
      ) : !quizComplete ? (
        <>
          <h2>React Quiz</h2>
          {showAnswer ? (
            <div className="quiz-question">
              <p>{quizQuestions[currentQuestionIndex].question}</p>
              <ul>
                {quizQuestions[currentQuestionIndex].options.map(
                  (option, index) => (
                    <li
                      key={index}
                      className={
                        index ===
                        quizQuestions[currentQuestionIndex].correctAnswer
                          ? "correct"
                          : ""
                      }
                    >
                      {option}
                    </li>
                  ),
                )}
              </ul>
            </div>
          ) : (
            <div className="quiz-question">
              <p>{quizQuestions[currentQuestionIndex].question}</p>
              <ul>
                {quizQuestions[currentQuestionIndex].options.map(
                  (option, index) => (
                    <li
                      key={index}
                      onClick={() => handleAnswerClick(index)}
                      className="option"
                    >
                      {option}
                    </li>
                  ),
                )}
              </ul>
            </div>
          )}
        </>
      ) : (
        <div className="quiz-result">
          <h2>Quiz Complete!</h2>
          <p>
            You scored {score} out of {quizQuestions.length} correct answers (
            {((score / quizQuestions.length) * 100).toFixed(2)}%)
          </p>
          <button onClick={startQuiz}>Restart Quiz</button>
        </div>
      )}
    </div>
  );
}

export default App;

CSS Quiz

React TS

import React, { useState } from "react";
import "./styles.css";

type QuizQuestion = {
  question: string;
  options: string[];
  correctAnswer: number;
};

const quizQuestions: QuizQuestion[] = [
  {
    question: "What is React?",
    options: ["A database", "A framework", "A library", "A language"],
    correctAnswer: 2,
  },
  {
    question: "Who created React?",
    options: ["Google", "Facebook", "Twitter", "Microsoft"],
    correctAnswer: 1,
  },
  {
    question: "What is JSX?",
    options: [
      "A template language",
      "A data structure",
      "A syntax extension for JavaScript",
      "A database query language",
    ],
    correctAnswer: 2,
  },
  {
    question: "What is the use of `useEffect` in React?",
    options: [
      "To handle component rendering",
      "To manage side effects",
      "To manage component state",
      "To create a context",
    ],
    correctAnswer: 1,
  },
  {
    question: "What is a React component?",
    options: [
      "A function or class that returns JSX",
      "A type of Redux state",
      "A database entry",
      "A server-side API",
    ],
    correctAnswer: 0,
  },
  {
    question: "Which of the following is a React hook?",
    options: ["useState", "getElementById", "document.querySelector", "fetch"],
    correctAnswer: 0,
  },
  {
    question: "What does `setState` do in a React component?",
    options: [
      "Initializes component state",
      "Renders a component",
      "Updates the state and triggers re-render",
      "Handles events",
    ],
    correctAnswer: 2,
  },
  {
    question: "What is `props` short for in React?",
    options: ["Properties", "Propositions", "Procedures", "Prototypes"],
    correctAnswer: 0,
  },
  {
    question: "What is the default port for React development server?",
    options: ["3000", "8000", "5000", "8080"],
    correctAnswer: 0,
  },
  {
    question: "What does `useRef` hook do?",
    options: [
      "Returns a mutable ref object",
      "Manages component state",
      "Triggers re-render",
      "Handles errors",
    ],
    correctAnswer: 0,
  },
];

const App: React.FC = () => {
  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [showAnswer, setShowAnswer] = useState(false);
  const [quizComplete, setQuizComplete] = useState(false);
  const [quizStarted, setQuizStarted] = useState(false);

  const handleAnswerClick = (index: number) => {
    if (index === quizQuestions[currentQuestionIndex].correctAnswer) {
      setScore(score + 1);
    }
    setShowAnswer(true);

    // Wait 2 seconds before moving to the next question
    setTimeout(() => {
      setShowAnswer(false);
      if (currentQuestionIndex < quizQuestions.length - 1) {
        setCurrentQuestionIndex(currentQuestionIndex + 1);
      } else {
        setQuizComplete(true);
        setQuizStarted(false);
      }
    }, 2000);
  };

  const startQuiz = () => {
    setQuizComplete(false);
    setScore(0);
    setCurrentQuestionIndex(0);
    setQuizStarted(true);
  };

  return (
    <div className="quiz-container">
      {!quizStarted ? (
        <div className="quiz-start">
          <h2>Welcome to the React Quiz!</h2>
          <button onClick={startQuiz}>Start Quiz</button>
        </div>
      ) : !quizComplete ? (
        <>
          <h2>React Quiz</h2>
          {showAnswer ? (
            <div className="quiz-question">
              <p>{quizQuestions[currentQuestionIndex].question}</p>
              <ul>
                {quizQuestions[currentQuestionIndex].options.map(
                  (option, index) => (
                    <li
                      key={index}
                      className={
                        index ===
                        quizQuestions[currentQuestionIndex].correctAnswer
                          ? "correct"
                          : ""
                      }
                    >
                      {option}
                    </li>
                  ),
                )}
              </ul>
            </div>
          ) : (
            <div className="quiz-question">
              <p>{quizQuestions[currentQuestionIndex].question}</p>
              <ul>
                {quizQuestions[currentQuestionIndex].options.map(
                  (option, index) => (
                    <li
                      key={index}
                      onClick={() => handleAnswerClick(index)}
                      className="option"
                    >
                      {option}
                    </li>
                  ),
                )}
              </ul>
            </div>
          )}
        </>
      ) : (
        <div className="quiz-result">
          <h2>Quiz Complete!</h2>
          <p>
            You scored {score} out of {quizQuestions.length} correct answers (
            {((score / quizQuestions.length) * 100).toFixed(2)}%)
          </p>
          <button onClick={startQuiz}>Restart Quiz</button>
        </div>
      )}
    </div>
  );
};

export default App;

CSS Quiz