#41React Quiz

Overview

Build a timed React quiz with randomized questions, penalties, and step-based navigation, focusing on clean state management and predictable UI flow.

Requirements

• A JSON file containing 13 questions is provided with the next Type

type Option = { id: string; content: string };

type Question = {
  id: string;
  question: string;
  options: Option[];
  correctOption: string;
  penaltyRatio?: number;
  timeWeight?: number;
  isCode?: boolean;
};

• Components Question, Timer, QuizHeader, Intro, and Result are provided and readonly; you only need to use them properly.
• The app should display the Intro screen before starting the quiz.
• When the user clicks Start Quiz, the timer starts and the first question is displayed.
• Only one question is rendered and displayed at a time.
• The Next button advances to the next question; navigating backwards is not allowed.
• The Next button should not appear on the Result screen.
• After answering the last question, the quiz shows the Result screen, and the timer stops.
• The quiz has a global total time limit; if it expires, the quiz immediately jumps to the Result screen.
• The value of each question is calculated as the total score divided by the number of questions.
• If a question has a penalty, the penalty value is calculated as the total score divided by the number of questions, multiplied by the penalty ratio.
• If a question has a timeWeight, its value is calculated as the total time divided by the number of questions, multiplied by the timeWeight.

Notes

• The quiz is designed to simulate real test conditions: time limits, step-based progression, and scoring logic. Pay close attention to the rules and component interactions.
• Think of the quiz as a sequence of steps: step 0 is the Intro, followed by one step per question, and a final step for the Result screen.
• There is no need to render all questions at once. It is more efficient to render only the currently active question.
• Focus on the logic inside the App component and on passing the correct data and callbacks to the provided components.
• Some tests may pass initially because the starting conditions show all components at once; make sure to verify behavior step by step.
• Consider how this system could scale to a larger question bank (for example, using a database to store and filter questions).
• Did you complete the quiz? Check your results and create more questions to practice and reinforce your knowledge!

Tests

1. renders the app title
2. shows the intro screen initially
3. moves to the next question when clicking Next
4. shows the result screen after answering all questions
5. shows the global timer after starting the quiz
6. counts down correctly and updates the display
7. stops at 0 and moves to Result
8. advances to the next question when a question timer expires
9. displays the value and penalty correctly for a question
10. records selected answers and reflects them in the Result screen
11. calculates the final score correctly
12. calculates the final score correctly with some wrong answers
13. never allows the final score to be negative
14. automatically moves to Result when the global timer expires