This is a short trivia game about the countries of East Asia. It is designed to be responsive and accessible on a wide range of devices.
-
The game should test the player's knowledge about the culture of the countries of East Asia.
-
The game should be visually appealing.
-
The game should give simple and clear instructions.
-
The game should include visuals to make it more appealing.
-
The game should be short so players don't lose interest in playing.
-
The questions should vary in difficulty to make it interesting for a wide range of players.
-
Players should get feedback on every question to make it more fun and educational.
-
There should be several score display messages depending on the player's score.
-
The game should run smoothly on a wide range of devices.
-
The game should be fun to play.
-
The questions should vary in difficulty to make it interesting.
-
Players should recieve feedback on their answers to make it more fun and educational.
-
There should be a score displayed with a message on how well the player did.
-
The game should run smoothly on a wide range of devices.
-
These colors were used for the quiz:
The font used for the quiz is Dongle with Sans Serif as the fallback font. Dongle is a rounded font that gives a playful and fun touch.
A graphic image of panda is used as a logo for the quiz.
A different GIF is used depending on the player's result.
There are 15 questions. Every question loads with an updated number. The score is also updated with each correctly answered question.
If the question is answered correctly, the button color changes to green. If answered wrongly, the button changes to red. At the same time the correct answer changes to green, revealing the correct answer.
In addition to the colors, there is also a right/wrong alert at the bottom with a piece of information regarding the answer.
In the desktop version the answer buttons have a hover effect that changes the button color to yellow.
There are three different score messages that are displayed at the end of the game, depending on the points scored.
The game has a starting page that contains two buttons giving the options to start the game or read the instructions.
The instructions page can be closed by clicking the X mark in the left top corner and brings the player back to the start page.
When clicking on the logo the player is brought back to the start page at any time during the game.
The game can potentially grow by adding questions to it. Another feature that can be implemented is different difficulty levels that can be unlocked only by achieving a certain score in the previous level, e.g. Easy level, Hard level, Pro level.
- Google Fonts: Google fonts were used to import the fonts into the style.css file which is used on all pages throughout the project.
- Font Awesome: Font Awesome was used to add icons for aesthetic and UX purposes.
- Git: Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
- GitHub: GitHub is used to store the projects code after being pushed from Git.
- Adobe Photoshop: Adobe Photoshop was used for gif editing.
- Adobe Illustrator: Adobe Illustrator was used to make the logo of the quiz.
- Balsamiq: Figma was used to create the wireframes during the design process.
- Pinterest: Gifs from Pinterest were used for styling the game.
- VSCode: VS Code was used for the development environmet.
- GoogleDevTools: Google Dev Tools was used for testing and troubleshooting.
Before the web development process all pages were designed using Balsamiq.
-
The W3C Markup Validator, W3C CSS Validator and JSHint JavaScript Validator services were used to validate every page of the project to ensure there were no syntax errors in the project.
-
The Website was tested on Google Chrome and Safari browsers. It was also tested on a variety of devices using Chrome DevTools.
-
The Website was tested using Google Chrome Lighthouse Tool. The Accessability score on both mobile and desktop version is 100.
Results for mobile version
Results for desktop version
- Friends were asked to review the site and give feedback.
While testing, a bug was found in the code. It was most obvious in the desktop version. If the user clicks somewhere between the buttons, the whole button area turns red. This was due to targeting the whole answer buttons div in JavaScript code when adding the event listener to the answer buttons. The event listener should target each button rather than the whole div.
The project was deployed to GitHub Pages. These steps were followed:
- Log in to your Github.
- Find the Smart panda quiz repository.
- Select Settings (top-right corner in the navigation menu).
- Select Pages (left handside of the website).
- Choose: Deploy from a branch as Source.
- Choose:
Source - Deploy from a branch
Branch - main /root & Save - Select Code (top-left corner in the navigation menu).
- Select Deployment (right handside of the webpage).
- Go to the live website by clicking the icon with the arrow (on the right side).
These Youtube tutorials were used to understand the process of making a quiz in JavaScript:
Information of how JavaScript works and how to apply it to the quiz was acquired from W3Schools.
Bits of code were learnt and applied from Stack Overflow.
All content was written by the developer.
To Charlie Bell and my mentor Jack Wachira for their support and encouragment.