Note
Deployed Link: https://quizz-me.vercel.app/
QuizzMe! is a quiz taking platform that uses questions from Open Trivia DB. The website initially presents the user with a selection form, using which the user is able to select the Category, Difficulty, Type and Number of Questions accordingly. On clicking the Start Quiz button the questions are loaded on the screen. If the user has not selected any options and clicked Start Quiz button then the values for the selection will be the default ones that is Any which can give you a wide range of questions.
Once you select the answers for all the questions, then the Check answers button will be enabled and on clicking it you will be shown your score and if you have a perfect score then a Confetti Animation from React-Confetti package will be displayed and the Check answers button will change to Play again in order to restart the game. There is also a theme toggle button available in the top right corner which changes the theme from light to dark and vice-versa. It uses localStorage to store the theme so that the website is able to remember which theme was set last and shows that theme when opened again.
Note
The website is also responsive, which is done with the help of media queries so the users will have no issues while accessing it on devices with varying screen sizes.
The animations and transitions are smooth and fluid for Questions Page and page transitions.
- HTML5
- CSS3
- JavaScript
- Vite
- React
- Nano ID
- HTML-Entities
- React-Use
- React-Confetti
Landing-Animation.mp4
Theme-Switching-2.mp4
Theme-Switching-New.mp4
Questions-Animation.mp4
Questions-Hover-Animation-1.mp4
Questions-Hover-Animation-2.mp4
|
|
|
|
|
|
