Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/sofiane-abou-abderrahim/react-quiz


https://github.com/sofiane-abou-abderrahim/react-quiz

components javascript react reactjs usecallback-hook useeffect-hook useref-hook usestate-hook

Last synced: 1 day ago
JSON representation

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