# React Quiz

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

- Difficulty: intermediate
- Tags: useState, useEffect
- Estimated time: 60 minutes
- Tests: 13
- Requires subscription: yes

## 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

```ts
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

01. renders the app title
02. shows the intro screen initially
03. moves to the next question when clicking Next
04. shows the result screen after answering all questions
05. counts down correctly and updates the display
06. stops at 0 and moves to Result
07. advances to the next question when a question timer expires
08. displays the value and penalty correctly for a question
09. records selected answers and reflects them in the Result screen
10. calculates the final score correctly
11. calculates the final score correctly with some wrong answers
12. never allows the final score to be negative
13. automatically moves to Result when the global timer expires