Quizzy. project 06
date. 2021
codes. Github
Brief Summary:
Quizzy is an online quiz app that aims to test children’s knowledge on parts and anatomies of vehicles. Its a single-page three section based website helped created by using fullPage.js so that each section could be viewed on an entire screen. There are three levels with increasing difficulty showcased in the beginning, however for this project I have done one of them.
Target Audience:
The targeted audiences for this website would be preschool and lower-primary students (children ages 1 to 9) who want to test their vehicle knowledge
Welcome Section:
In the first section, it is the welcome section. I designed a animated spinning wheel to give the new users a taste on what they will be entering. To add on, I also added a animation for the word "Quizzy" to be appeared alphabetically. There is also a tippy implemented when a user hovers over the statement “What is Quizzy?” displays the information "Quizzy is an online quiz app that aims to test children’s knowledge on parts and anatomies of vehicles". To proceed to the next section, the user will have to input their username first.
Main Section:
After inputting their username, they will be led to the main section. In the main section, the navigation bar consists of navigation links like categories, about, and contact. On the right, there is a share icon and beside it would be the username that shown from the one the user input at the welcome section. The user will be allowed to change their username by clicking on the username box and it will redirect them back to the welcome section where they could choose their new username. Additionally, there are three levels indicated: The first level is about Bicycles, the second level is about Cars, and the third level is about airplanes. The second and third level is visibly locked as I indicated with a lock icon to show that they have to complete the first level first.
Quiz Section:
Once the user clicks on the first level, they would be led to the Bicycle quiz. The section would show an animated SVG of the bicycle moving forward while the user can start the quiz and when he is attempting the quiz. There are a total of 5 questions about motorbikes and if the user gets the wrong answer, he or she will be prompted to try again until they get it correct. Once the user has completed all 5 questions, a button will appear "Restart" to show the end of the quiz.