Objective: Create a quiz application where users can select answers and get immediate feedback.

Description: In this project, you will build a simple interactive quiz application. Users will select answers to quiz questions and receive immediate feedback on whether their choice was correct or incorrect. This project will help you practice handling events and using controlled components in React.

Instructions:

Step 1: Setup Your Project

• Create a new React project using Vite.
• Set up your project structure with a main <strong>App</strong> component and a <strong>Quiz</strong> component.

Step 2: Define the Quiz Questions and Answers

Create a state to store the quiz questions, answers, and the user's current selection.

import React, { useState } from 'react';

function Quiz() {
  const questions = [
    {
      question: "What is the capital of France?",
      options: ["Berlin", "Madrid", "Paris", "Rome"],
      answer: "Paris"
    },
    {
      question: "What is 2 + 2?",
      options: ["3", "4", "5", "6"],
      answer: "4"
    }
  ];

  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [selectedOption, setSelectedOption] = useState('');
  const [feedback, setFeedback] = useState('');

  return (
    <div>
      {/* Render question and options here */}
    </div>
  );
}

export default Quiz;

Step 3: Render the Quiz Questions and Options

Render the current quiz question and its options as radio buttons. Allow the user to select an option.

return (
  <div>
    <h2>{questions[currentQuestionIndex].question}</h2>
    <form>
      {questions[currentQuestionIndex].options.map((option, index) => (
        <div key={index}>
          <label>
            <input
              type="radio"
              value={option}
              checked={selectedOption === option}
              onChange={(e) => setSelectedOption(e.target.value)}
            />
            {option}
          </label>
        </div>
      ))}
    </form>
    {/* Render feedback and navigation buttons here */}
  </div>
);

Step 4: Handle User Selection and Provide Feedback

Create a function to handle the user's answer submission and provide immediate feedback.

function handleSubmit(event) {
  event.preventDefault();
  const correctAnswer = questions[currentQuestionIndex].answer;
  if (selectedOption === correctAnswer) {
    setFeedback('Correct!');
  } else {
    setFeedback('Incorrect, try again.');
  }
}

return (
  <div>
    <h2>{questions[currentQuestionIndex].question}</h2>
    <form onSubmit={handleSubmit}>
      {questions[currentQuestionIndex].options.map((option, index) => (
        <div key={index}>
          <label>
            <input
              type="radio"
              value={option}
              checked={selectedOption === option}
              onChange={(e) => setSelectedOption(e.target.value)}
            />
            {option}
          </label>
        </div>
      ))}
      <button type="submit">Submit</button>
    </form>
    <p>{feedback}</p>
    {/* Render navigation buttons here */}
  </div>
);

Step 5: Add Navigation Between Questions

Implement navigation to move between questions and reset the feedback and selected option for each new question.

function handleNextQuestion() {
  setCurrentQuestionIndex((prevIndex) => (prevIndex + 1) % questions.length);
  setSelectedOption('');
  setFeedback('');
}

return (
  <div>
    <h2>{questions[currentQuestionIndex].question}</h2>
    <form onSubmit={handleSubmit}>
      {questions[currentQuestionIndex].options.map((option, index) => (
        <div key={index}>
          <label>
            <input
              type="radio"
              value={option}
              checked={selectedOption === option}
              onChange={(e) => setSelectedOption(e.target.value)}
            />
            {option}
          </label>
        </div>
      ))}
      <button type="submit">Submit</button>
    </form>
    <p>{feedback}</p>
    <button onClick={handleNextQuestion}>Next Question</button>
  </div>
);

Step 6: Styling and Enhancements

Add some basic CSS to style your quiz application and make it visually appealing.

/* Add to your Quiz.css file */
.quiz {
  text-align: center;
  font-family: Arial, sans-serif;
}

button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin: 5px;
}

button:hover {
  background-color: #0056b3;
}

form {
  display: inline-block;
  text-align: left;
}

Example Code: Complete Quiz Component

import React, { useState } from 'react';
import './Quiz.css';

function Quiz() {
  const questions = [
    {
      question: "What is the capital of France?",
      options: ["Berlin", "Madrid", "Paris", "Rome"],
      answer: "Paris"
    },
    {
      question: "What is 2 + 2?",
      options: ["3", "4", "5", "6"],
      answer: "4"
    }
  ];

  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
  const [selectedOption, setSelectedOption] = useState('');
  const [feedback, setFeedback] = useState('');

  function handleSubmit(event) {
    event.preventDefault();
    const correctAnswer = questions[currentQuestionIndex].answer;
    if (selectedOption === correctAnswer) {
      setFeedback('Correct!');
    } else {
      setFeedback('Incorrect, try again.');
    }
  }

  function handleNextQuestion() {
    setCurrentQuestionIndex((prevIndex) => (prevIndex + 1) % questions.length);
    setSelectedOption('');
    setFeedback('');
  }

  return (
    <div className="quiz">
      <h2>{questions[currentQuestionIndex].question}</h2>
      <form onSubmit={handleSubmit}>
        {questions[currentQuestionIndex].options.map((option, index) => (
          <div key={index}>
            <label>
              <input
                type="radio"
                value={option}
                checked={selectedOption === option}
                onChange={(e) => setSelectedOption(e.target.value)}
              />
              {option}
            </label>
          </div>
        ))}
        <button type="submit">Submit</button>
      </form>
      <p>{feedback}</p>
      <button onClick={handleNextQuestion}>Next Question</button>
    </div>
  );
}

export default Quiz;

By completing this project, you'll gain hands-on experience with handling events in React, making your applications interactive and responsive to user inputs. Enjoy building your Interactive Quiz App and watching it come to life!