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

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.