11 - Simple Quiz App with Multiple Choice

Description

Create a React application that presents a simple quiz with multiple-choice questions. The app should display the questions, options, and user scores.

Algorithm

1. Initialize state variables to store the questions, current question index, user score, and selected answer.

2. Render the current question, options, and user score.

3. Define a function to handle answer selection and update the score.

4. Define a function to proceed to the next question.

5. Render a submit button to submit the quiz and display the final score.

Classes

QuizApp: A React component that manages the quiz state and renders the quiz UI.

Code

import React, { useState } from 'react';

function QuizApp() {
  const [questions, setQuestions] = useState([...]); // array of questions
  const [currentIndex, setCurrentIndex] = useState(0);
  const [score, setScore] = useState(0);
  const [selectedAnswer, setSelectedAnswer] = useState('');

  const handleAnswerSelection = (answer) => {
    setSelectedAnswer(answer);
    if (answer === questions[currentIndex].correctAnswer) {
      setScore(score + 1);
    }
  };

  const proceedToNextQuestion = () => {
    setCurrentIndex(currentIndex + 1);
  };

  return (
    <div>
      {currentIndex < questions.length ? (
        <div>
          <p>{questions[currentIndex].question}</p>
          <ul>
            {questions[currentIndex].options.map((option) => (
              <li key={option}>
                <input
                  type="radio"
                  name="answer"
                  value={option}
                  checked={selectedAnswer === option}
                  onChange={() => handleAnswerSelection(option)}
                />
                <span>{option}</span>
              </li>
            ))}
          </ul>
          <button onClick={proceedToNextQuestion}>Next Question</button>
          <p>Score: {score}</p>
        </div>
      ) : (
        <div>
          <p>Quiz submitted!</p>
          <p>Final Score: {score}</p>
        </div>
      )}
    </div>
  );
}

export default QuizApp;

Explanation

The code defines a QuizApp component that utilizes the useState hook to initialize state variables for the questions, current question index, user score, and selected answer. The component renders the current question, options, and user score. The handleAnswerSelection function updates the score based on the selected answer. The proceedToNextQuestion function updates the current question index. The component renders a submit button to submit the quiz and display the final score.

Possible Future Enhancements

• Add more questions and categories.

• Implement a timer for each question.

• Display a leaderboard with top scores.

• Allow users to review their answers before submitting the quiz.

• Integrate with a backend service to store and retrieve quiz data.