WDX-180
Web Development X
Simple Quiz
Since, you’ve mastered the basic concepts of React it’s time to put those skills into test!
We have a simple yet fun project to get your hands on! A simple quiz is all that we want you to implement! You will provide all the questions, along with two choices for each question, one of them is obviously the correct one!
Follow this link to see a video on how we want your quiz game to look like!
(Note: the quiz is in greek, but don’t let that bother you.)
Requirements
- Create a new React Vite project
- Create as many React components as you see fit! (e.g. Question, ProgressBar, etc.)
- Be creative and include as many cool CSS animations as you like
Here are some Excalidraw diagrams to help you with the functionality of the app:
Extra challenges:
- Load all the questions of the game from a local JSON file
- Give the user the ability to reset the game and start again
Below, you can find a small list of questions around React that you can use for your quiz! Feel free to add more!
Questions
- What is the best way to share state among Components?
- A: Context API
- B: useEffect
- Which variable will retain its value upon re-render?
- A: local variable using
const - B: A Ref
- A: local variable using
- How many arguments does useEffect accept?
- A: 2
- B: 1
HINT: The correct answers are in italic.
Methodology
- You can use a drawing tool like Excalidraw to draw the React Component tree and State hierarchy.
Here’s one suggested architecture for the app:
Feel free to try out different architectures and break the app in more or fewer Components than the ones depicted in the diagram above.
Submission
You can work on this project alone or with a partner! Feel free to talk with your classmates and find a suitable partner if you wish!
You final work should be a repository published on your personal GitHub account and you should share it with us through Slack in order to enjoy your first ever Quiz built on React!
Note: If you have any questions, you know where to find us! :)