Overview:

In this challenge, you will enhance the "Interactive Quiz App" project by integrating a scoring system that updates as the user selects answers. This will help you practice handling state updates and managing dynamic feedback based on user interactions.

Objective:

• Learn how to update state dynamically based on user actions.
• Practice creating a more complex interaction within your React application.

Instructions for the Interactive Code Block:

Step 1: Add a Score State

First, you'll need to add a new piece of state to handle the user's score. This will keep track of how many questions the user has answered correctly.

Step 2: Update the Score Based on User's Answer

Modify the <strong>handleSubmit</strong> function to update the score when the user selects the correct answer. Increment the score if the user's selected option matches the correct answer.

Step 3: Display the Score

Add a section to display the user's current score. This will give immediate feedback on their performance.

Step 4: Style the Score Section

Add some basic CSS to style the score display and make it visually appealing.

Step 5: Testing and Refinement

Run your application and test the scoring system. Make sure the score updates correctly as you select answers. Adjust any styling or logic as needed to ensure a smooth user experience.

Next Steps:

• Add More Feedback: Provide more detailed feedback based on the user's performance, such as displaying a message when they reach a certain score.
• Leaderboard: Implement a simple leaderboard that stores and displays high scores.
• More Questions: Expand the quiz to include more questions and categories, making it more challenging and engaging.

By completing this challenge, you will gain a deeper understanding of managing state and dynamic updates in React, making your applications more interactive and user-friendly. Enjoy implementing the scoring system and enhancing your Interactive Quiz App!

Step 1 Hint: Use the <strong>useState</strong> hook to create a state variable called <strong>score</strong>.

// Inside Quiz component
const [score, setScore] = useState(0);

Step 2 Hint: Check if the selected option is correct and use <strong>setScore</strong> to update the score.

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

Step 3 Hint: Use a <strong>div</strong> or <strong>p</strong> tag to display the score and place it inside your component's return statement.

// Inside return statement of Quiz component
<div className="score">
  <h3>Score: {score}</h3>
</div>

Step 4 Hint: Create a <strong>.score</strong> class in your CSS file to style the score section.

/* Add to your Quiz.css file */
.score {
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
  color: green;
}