This is a simple Quiz in which the user answers questions about the national flags.
Here is live version of my project
Very simple designs. Logo in the middle and four buttons with answers to choose from. The same font as in the previous project was used.
The project actually consists of two elements. Home page with a Start button that starts the Quiz and a set of questions with answers to choose from. The user is informed about the choice of the correct or wrong answer by the appropriate color of the button and the background - green for correct and red for wrong. The quiz does not have the function of counting good answers, this option will definitely be added at a later stage of the project development. The number of questions will also be increased and a timer will be added.
At the end of the Quiz user can restart the game with new random questions order:
GitHub was used for the app deployment. Template provided by Code Institite used in GitHub. Steps of deployment:
- in GitHub go to Settings tab
- in Settings tab go to GitHub pages section
- select the branch name for the code and click save
- the website live link is availiable for use after few minutes
All active links work as they should and lead to the right places. Chrome Dev tool did not return any spcific errors. Quiz desgin is fully responsive.
- no errors were found when passing through the official W3C validator
- no errors were found when passing through the official Jigsaw validator :
The website accessibility was tested using the Lighthouse application available in Developer Tools in the Chrome Version 101.0.4951.64 browser. The generated report showed 100 points out of 100 possible.
Project doesn't have any known Unfixed Bugs. The project however requires futher development. Score counter should be added so user will have better experience by knowing the final correct and wrong answers. Also timee should be added so it will make the Quiz more challenging by prevents user from searching a proper answer in Google. To make the quiz fun more set of question should be also created.
The question samples are taken from: theguardian.com |
The flasgs website was also used to develop the Quiz: Countryflags
In writing the code, countless video tutorials on YouTube were also used about Java Script and responsive CSS design.
The Gradient buttons CSS was copied partialy from: GradientButtons
Main logo and favicon was taken from : Countryflags Graphic to logo was added in Photoshop by designer.