# 18 - Interactive Quiz with Dynamic Results and Feedback

### **Description**

Create a React application that displays an interactive quiz with dynamic results and feedback. The quiz should have multiple questions, and the user should be able to select answers and receive feedback on their responses.

### **Algorithm**

1. Create a state variable to store the quiz questions and answers.
2. Define a function to handle the user's answer selection.
3. Define a function to calculate the quiz results and feedback.
4. Render the quiz questions and answers.
5. Render the quiz results and feedback.

### Classes

* `QuizQuestion`: A component that represents a single quiz question.
* `QuizResults`: A component that displays the quiz results and feedback.

### Code

QuizQuestion.js

```javascript
import React from 'react';

function QuizQuestion({ question, answers, onAnswerSelected }) {
  return (
    <div>
      <h2>{question}</h2>
      {answers.map((answer, index) => (
        <div key={index}>
          <input
            type="radio"
            name={question}
            value={answer}
            onClick={() => onAnswerSelected(answer)}
          />
          <span>{answer}</span>
        </div>
      ))}
    </div>
  );
}

export default QuizQuestion;

```

QuizResults.js

```
import React from 'react';

function QuizResults({ results, feedback }) {
  return (
    <div>
      <h2>Results</h2>
      <p>Score: {results.score}</p>
      <p>Feedback: {feedback}</p>
    </div>
  );
}

export default QuizResults;
```

Quiz.js

```
import React, { useState } from 'react';
import QuizQuestion from './QuizQuestion';
import QuizResults from './QuizResults';

function Quiz() {
  const [questions, setQuestions] = useState([
    {
      question: 'What is the capital of France?',
      answers: ['Paris', 'London', 'Berlin'],
      correctAnswer: 'Paris'
    },
    {
      question: 'What is the largest planet in our solar system?',
      answers: ['Earth', 'Saturn', 'Jupiter'],
      correctAnswer: 'Jupiter'
    }
  ]);
  const [results, setResults] = useState({ score: 0, feedback: '' });
  const [currentQuestion, setCurrentQuestion] = useState(0);

  const handleAnswerSelected = (answer) => {
    const correctAnswer = questions[currentQuestion].correctAnswer;
    if (answer === correctAnswer) {
      setResults((prevResults) => ({ ...prevResults, score: prevResults.score + 1 }));
    } else {
      setResults((prevResults) => ({ ...prevResults, feedback: 'Incorrect' }));
    }
    setCurrentQuestion(currentQuestion + 1);
  };

  return (
    <div>
      {currentQuestion < questions.length ? (
        <QuizQuestion
          question={questions[currentQuestion].question}
          answers={questions[currentQuestion].answers}
          onAnswerSelected={handleAnswerSelected}
        />
      ) : (
        <QuizResults results={results} feedback={results.feedback} />
      )}
    </div>
  );
}

export default Quiz;
```

### **Explanation**

The `Quiz` component renders a quiz with multiple questions and answers. The user can select answers, and the component will display the quiz results and feedback. The `QuizQuestion` component represents a single quiz question, and the `QuizResults` component displays the quiz results and feedback.

### Possible Future Enhancements

* Add more questions and answers to the quiz.
* Display the quiz results and feedback in a more visually appealing way.
* Add a timer to the quiz.
* Allow the user to retake the quiz.
* Display the correct answers and explanations for each question.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://choubey.gitbook.io/react-coding-puzzles/18-interactive-quiz-with-dynamic-results-and-feedback.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.