This project is an example of a quiz created in HTML, CSS and JavaScript
See this project on live enviroment on GitHub Pages here: https://lseparatio.github.io/Games-World/
Click To Expand Features
- Same navigation menu is used across all pages for consistency.
- Navigation was designed to be easy to use and to understand.
- Navigation was designed to work well on all devices.
- Even if a nav-bar was not necessary for this project, I created one to make it easier to expand the project with other pages, games, etc ...
First Screen was designed to present the website for user in a friendly manner and to ask for user name.
- First Screen Desktop
- First Screen Mobile
- Empty name validation screen
- Special characters validation screen
Choose topic screen is designed to allow the user to choose an topic of the quiz. Page is fully responsive.
- Choose topic screen desktop
- Choose topic screen tablet
- Choose topic screen mobile
This screen is designed to rondom show questions and to alow user to select an answer only by disabling the button after any button is clicked.
- Questions screen desktop
- Questions screen mobile
When user is selecting an answer buttons are getting disabled to don't allow user to change the answer. Buttons are changing the colors in red and green to provide feedback if user was right.
- Answered question screen desktop
- Answered question screen mobile
Last screen is designed to provide feedback to user. Will be shown a different message if the correct answers are more that wrong ones, if answers are equal and if the wrong ones are more that correct ones. And total correct and wrong are displayed. Next user have option to select another topic or to go to the front page.
- Feedback screen desktop
- Feedback screen mobile
Click to open creation timeline
As a site owner:
- I want users to understand that this is a quiz page.
- I want users to be able to easily navigate my website on any device.
- I want to be able to collect user name.
- I want to serve questions and feedback in a easy to understand way.
As a user:
- I want to be able to view the website on any device.
- I want the menu to be intuitive.
- I want to learn what questions i answered right and what not.
- I want to be able to see my total score at the end.
Click to expend wireframes
- Mobile Wireframes:
- Index Page
- Choose topic screen
- Question screen
- Feedback screen
- Tablet Wireframes:
Only choose topic screen requires a specific design for tablet. Rest of screens are the same for mobile and tablet
- Choose Topic
- Desktop Wireframes:
- Index Page
- Choose topic screen
- Question screen
- Feedback screen
- Visual Studio Code
- HTML
- CSS
- JavaScript
- GIMP
- Microsoft Paint
- Bootstrap 5.1.3
- For primary colors i used Blue Navy (183bff), and white for text.
- Red and green so mark correct answers and wrong answers. All colors adjusted for optimal contrast ratio using: https://webaim.org/resources/contrastchecker/
- Images was taken from https://www.freeimages.com/
Responsive Design Checker (Passing all checks)
LightHouse Mobile test, click to expand.
LightHouse Desktop test, click to expand.
- No errors were returned when passing through the HTML official validator.
HTML validator test link: Click To See
Click to expand image.
- No errors were returned when passing through the CSS official validator.
CSS validator test link: Click To See
Click to expand image.
Click to expand image.
Click to expand image.
- No error in console. Tested complete life cycle of game manually.
- In the GitHub repository, navigate to the Settings tab
- In left menu, down find Pages tab
- From the source section drop-down menu, select the Main Branch
- Once all is done your link is displayed.
This particular deployment can be seen on: https://lseparatio.github.io/Games-World/
- In GitHub repo press in the top menu: Code > Download Zip
- Save in your local enviroment
- Unzip
- Load unzipped folder / files in your preferred IDE
- Bootstrap - For well documented css framework
- FreeImages - For images
- GIMP - For Image processing
- Favicon.io - For Favicon
- Google Fonts - For Luxurious Roman font.
- Code Institute - For brilliant lessons from where i learn to do this.
- FreePubQuiz - For quizes http://www.freepubquiz.co.uk/