> For the complete documentation index, see [llms.txt](https://choubey.gitbook.io/react-coding-puzzles/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://choubey.gitbook.io/react-coding-puzzles/11-simple-quiz-app-with-multiple-choice.md).

# 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**

```javascript
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.