https://github.com/sofiane-abou-abderrahim/react-quiz
Explore the power of React with our 'React Quiz' demo project! Dive into the intricacies of managing state and effects using hooks like useState and useEffect. Witness dynamic rendering, timed responses, and state management in action. Try it now!
https://github.com/sofiane-abou-abderrahim/react-quiz
components dynamic-rendering javascript quiz quizapp react reactjs state-management timed-response timer usecallback-hook useeffect-hook useref-hook usestate-hook
Last synced: 3 months ago
JSON representation
Explore the power of React with our 'React Quiz' demo project! Dive into the intricacies of managing state and effects using hooks like useState and useEffect. Witness dynamic rendering, timed responses, and state management in action. Try it now!
- Host: GitHub
- URL: https://github.com/sofiane-abou-abderrahim/react-quiz
- Owner: sofiane-abou-abderrahim
- Created: 2024-04-04T17:26:39.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-26T21:06:43.000Z (9 months ago)
- Last Synced: 2025-02-09T08:36:17.408Z (5 months ago)
- Topics: components, dynamic-rendering, javascript, quiz, quizapp, react, reactjs, state-management, timed-response, timer, usecallback-hook, useeffect-hook, useref-hook, usestate-hook
- Language: JavaScript
- Homepage: https://sofiane-abou-abderrahim.github.io/react-quiz/
- Size: 338 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Working with Effects
## Practice & Dive Deeper
- Apply your Knowledgge
- Dealing with Effect Dependencies & Cleanup
- Combining Effects with Other React Concepts
# Steps
## 0. Starting Project
1. run `npm install`
2. run `npm run dev`
3. create a `README.md`
## 1. A First Component & Some State
1. create a `components` folder
2. Inside it, add a `Header.jsx` component & a `Quiz.jsx` component
3. built `Header.jsx` component
4. add states in `Quiz.jsx` to manage the questions & answers
5. output `` & ``components in `App.jsx`
## 2. Deriving Values, Outputting Questions & Registering Answers
1. create a `questions.js` file with questions & answers inside
2. change the logic in `Quiz.jsx` for managing questions & answers
## 3. Shuffling Answers & Adding Quiz Logic
1. shuffle the answers by using the `sort` method in `Quiz.jsx`
2. make sure the app doesn't break if we answer all the questions & display a summary instead of the quiz
## 4. Adding Question Timers
1. create a `QuestionTimer.jsx` component
2. set a progress bar inside `QuestionTimer.jsx`
3. define a timeout & an interval using the `useState` & `useEffect` hooks inside `QuestionTimer.jsx`
4. ouptut the `` component inside `Quiz.jsx`
## 5. Working with Effect Dependencies & useCallback
1. make sure the timeout doesn't execute again by wrapping the `handleSelectAnswer` function with the `useCallback` hook in `Quiz.jsx`
## 6. Using Effect Cleanup Functions & Using Keys for Resetting Components
1. cleanup the existing interval if the effect function runs again in `QuestionTimer.jsx`
2. cleanup the existing timer to prevent it from keeping on going in `QuestionTimer.jsx`
3. reset the `` component when the question changes by adding a `key` prop to it
## 7. Highlighting Selected Answers & Managing More State
1. add a new `answerState` state that controls our current answer state in `Quiz.jsx`
2. dynamically change the color of the selected answer
## 8. Splitting Components Up To Solve Problems
1. shuffle the answers once when the `activeQuestionIndex` changes by using the `useRef` hook in `Quiz.jsx`
2. create a `Answers.jsx` component to make sure that the answers are shuffled every next questions & that the answer doesn't remain selected
3. output the `` component in `Quiz.jsx`
4. create a `Question.jsx` component to use only one `key` prop
## 9. Moving Logic To Components That Actually Need It ("Moving State Down")
1. move the state down from the `Quiz.jsx` component to the `Question.jsx` component
2. disable the button to prevent from clicking it when an answer was selected in `Answers.jsx`
## 10. Setting Different Timers Based On The Selected Answer
1. update the `` component in `Question.jsx`
1. if an answer was selected so that a new timer starts and only expires after we showed the correct or wrong answer
2. when this timer expires don't tell the `Quiz.jsx` component that the question was not answered
2. add a `mode` prop in `QuestionTimer.jsx` & set it as a `className`, then set its value to the `answerState` in `Question.jsx` for styling purposes
3. reset the interval whenever the timer changes to make the interval inline with the new timer and the new `max` value of the `progress` bar by adding a `key` prop with a value of `timer` in `Question.jsx`
4. trigger the `onSkipAnswer` function only if no answer was selected in `Question.jsx` to avoid skipping questions unexpectedly
## 11. Outputting Quiz Results
1. create a `Summary.jsx` component
2. output the `` component in `Quiz.jsx`
3. use the `userAnswers`'s object to derive all the different data points we need in `Summary.jsx`
4. use the `index` as a `key` to avoid encountering two children with the same key