** Developer: Orna Reynolds **
- Project Goals
- User Experience
- User Stories
- Design
- Technologies Used
- Features
- Validation
- Testing
- Bugs
- Deployment
- Credits
- Acknowledgements
The goal of this project was to create an interactive and user-friendly quiz that tests knowledge of world geography.
- Take a quiz that is fun and informative
- Challenge themselves at different difficulty levels
- Create a quiz with accurate information on world geography
- Design a quiz to visually appeal and engage the user
- Ensure accessibility and responsivity across different screen sizes
- Anyone with an interest in world geography
- Anyone who wants to test their knowledge of world geography
- Simple, clear and interactive layout
- Responsiveness across different screen levels
- Visible navigation to different difficulty levels, reset button
- I want to easily understand what the game is and how to play the game from the first page
- I want to have my name displayed while playing
- I want to be able to choose from different difficulty levels
- I want incorrect answers to light up red and correct answers to light up green
- I want 3 guesses only and then to move onto new screen
- I want to get higher points when i click country correctly first time compared to second and third
- I want to play game on phone and on laptop
- I want score and question number I am on to be displayed as I play the game
- I want to be able to zoom into map so I am able to click correct country even if small
- I want play again button at end of quiz and be able to change difficulty level for new game
- I want user to easily understand how to play game
- I want quiz be responsive on different devices
- I want a 404 page to show in case of broken link
- I want user to be able to challenge themselves through different difficulty levels
Itim from Google Fonts was chosen as the font as it was clear, playful and had a hand-written feel which I felt suited the theme of the game.
The structure of the website was designed to be easy to navigate.
The game consist of the following screens:
- A home page / start screen with game title, instructions how to play game and user login
- Choose game difficulty level screen with name displayed in top corner of screen
- Main game screen - it contains interactive map to click, questions clearly displayed, number of questions remaining in the round and current score which dynamically updates
- End page with most recent score from local storage
- A separate 404 error page
index.html
level.html
game.html
end.html
feedback form
- HTML
- CSS
- JavaScript
- Favicon.cc for getting the site favicon
- Font Awesome for main title of game
- Git was used for version control to push the code to GitHub
- GitHub was used as a remote repository to store project code
- Google Fonts
- Chrome dev tools were used for debugging of the code and check site for responsiveness
- WC3 Validator, Jigsaw W3 Validator, JShint, Wave Validator and Lighthouse were all used to validate the website
- Befunky to add text to screenshots
The website has 4 webpages consisting of a number of particular features
The home page contains:
- The title of the game with spinning world icon which gives user an idea what website will be abaout (user-stories: 1)
- A short explanation of how to play (user-stories: 1)
- An input form for the user to enter their name to add a touch of personality to game (user-stories: 2)
- A start game button to bring user to next page (pick level of game page)
- For start game button to bring user to next page, the user needs to enter a username of at least 4 characters long into the input field. If the input field is left blank and user clicks out of field, the background of the input field changes to red and the placeholder text changes to remind the user to complete the field. Furthermore, if only 3 letters are entered for example, then a alert message is displayed with message that at least 4 characters long username needs to be chosen. Once a valid username has been provided, the username is displayed next to the user icon on the next screen and user is able to select the difficulty level of the game.
- Username remains displayed on all game screens
- (user-stories: 2)
- I encountered a bug that with this aspect of my first submission for this project. JShint gave an error that neither function was called hence I called the function to make the js valid. However this led to the username input box becoming invisible to the user of my first submission contributing to the failing grade I received. I have now instead console.log the function name as a workaround to this bug and also to make the js valid concurrently.
Screenshots
- Username displayed at top of page which was previously entered, adds a touch of personality to game (user-stories: 2)
- buttons to choose difficulty level of game by fetching different json files that contain increasingly difficult questions (user-stories: 3, 14)
- Interactive world map (svg) where the countries are individually defined into paths
- Heads up display that contains the username as input by user on home page (user-stories: 2), dynamic questions and score counter (user-stories: 6, 8) to allow user to know question number, their score so far and also allows them to see name
- Question display that updates country every new question to a max of 10. The countries do not repeat. This allows user to see how long is left of round
- When question is asked map can be clicked to try and answer the question. If correct answer is picked, the country lights up green and if the incorrect country is picked the country lights up red (user-stories: 4). A new question appears either if correct country is chosen or user has reached max guesses(3) (user-stories: 5). Scores updates depending on how many guesses it took the user to get the right country (1st attempt = 3 points, 2 attempt = 2 points, 3rd attempt = 1 point) (user-stories: 6)
- Displays most recent score along with username (user-stories: 2) to allow user to check how they are getting on with game
- Play again button that allow user to restart the game by bringing back to select difficulty screen (user-stories: 10)
- Highscores page
- Modal to allow user to give me feedback
- Change alert message when incorrect username entered to something more user friendly like a pop-up
The W3C Markup Validation Service was used to validate the HTML of the website. All pages pass with no errors.
Index
Level
Game
- 3rd party code was utilised in game.html which had a number of errors, did not correct in fear of breaking functionalityEnd
404
- 3rd party code was utilised in 404.html but did not have any major issues
The W3C Jigsaw CSS Validation Service was used to validate the CSS of the website. Style.css passes with no errors.
Style.css
JSHint JS Validation Service was used to validate the Javascript files.
In the original validation of index.js, the unused variable error message was raised and hence i called the function at end of file to fix this. However this ultimately caused the bug of my username input not displaying on the home page on original submission and led to my failing result. I had checked before submitting but as sometimes github can be slow updating changes to deployed website I did not realise this bug was present until after submission. I do understand how username input not appearing is obviously very frustrating for the user so I am glad I have found the bug and fixed it in the updated code.
index.js
This was the orignal image included in project with configuration of JSHint not correctly set up:
This is the update version using corrected version of JSHint:
Example of error messge that ultimately caused the bug of my username input not displaying on the home page on orginal submission and led to my fail. The console.log is the simplest, easiest workaround I have found that allows the code to be valid through JSHint and not cause this bug.
level.js
This was the orignal image included in project with configuration of JSHint not correctly set up:
This is the update version using corrected version of JSHint:
In the orignal validation of game.js, I had made a blunder with the configuration and hence instead of selecting "New JavaScript features (ES6)" in Assume of Configure in JShint and I had included { "esversion": 6 } at the top of file to allow me to use const as instructed by this SlackOverflow post. However, I was proved very much mistaken by allowing this to be my technique for handling these errors. I mistakenly believed I had no errors in my original submission as a result.
game.js
This was the orignal image included in project:
This is the update version using corrected version of JSHint:
end.js
This was the orignal image included in project:
This is the update version using corrected version of JSHint:
>
The WAVE accessibility evaluation tool was used to ensure the website met high accessibility standards. All pages passed with no errors.
Index
Level
Game
End
Google Lighthouse in Google Chrome Developer Tools was used to test the performance of the website. Every page scored over 90 for mobile and desktop bar game.html for mobile testing - it received 88.
Index
Desktop:
Mobile:
Level
Desktop:
Mobile:
Game
Desktop:
Mobile:
End
Desktop:
Mobile:
The website was tested using Google Chrome Developer Tools to check responsiveness at different screen sizes.
The website was tested on the following devices:
- Macbook Pro 2017
- OnePlus Nord
- OnePlus Nord CE 2
- Testing has been carried out on the following browsers:
- Googe Chrome
- Safari
- I want to easily understand what the game is and how to play the game from the first page
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Title of game and short explanation | Read the text | User immediately understands how to play | Works as expected |
Screenshot
- I want to have my name displayed while playing
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Username input | Type user name that is at least over 4 characters and click start game button | User is brought to next page and name is displayed at top of page | Works as expected |
Screenshots
- I want to be able to choose from different difficulty levels
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Different difficulty selection buttons | Click easy, medium or hard button | Different questions are loaded from different json files depending on choice | Works as expected |
Screenshot
Easy array loads and easy questions displayed when easy buuton clicked
Medium array loads and medium questions displayed when medium buuton clicked
Hard array loads and hard questions displayed when hard buuton clicked
- I want incorrect answers to light up red and correct answers to light up green
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Interactive world map | Click a country on the map | Light up green or red depending on choice | Works as expected |
Go in readme file itself or raw data to see rest of readme file is not showing here in preview or github preview for some reason
- this is a remanent of my original submission as I could not figure out why my readme file was not appearing in preview and git hub pages. It turns out I was missing a closing "details" tag for one of my dropdowns and as a result when viewing my original submission readme file one needed to open up all my dropdowns or look at raw data of readme file to view the content, testing and deployment section that I had done from this point on. Hence, readme file appeared to stop at this point on original submission even tho all the content on from here was included.
I raised this issue in github on orginal submission day hoping all my work would be visible to be examined.
Screenshots
- I want 3 guesses only and then to move onto new question
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Interactive world map | Click wrong country 3 times | Move to new question | Works as expected |
Screenshots
- I want to get higher points when i click country correctly first time compared to second and third
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Interactive world map | Click right answer on 1st attempt, then on 2nd for next question and then on 3rd for next question | Points should go up by 3, 2, 1 respectively | Works as expected |
Screenshots
- I want to play game on phone and on laptop
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Responsiveness on different devices | Play game on different screen widths and devices | All text should be visible and zoom of map should allow user to interactive with the large map when playing on smaller devices | All provided button for map controls work as expected |
Screenshots
- I want score and question number I am on to be displayed as I play the game
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Heads up Display | Play game | score and questions update dynamically | Works as expected |
Screenshots
- I want to be able to zoom into map so I am able to click correct country even if small
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Zoom button | Click map controls buttons provided to zoom and pan across map | Zoom and pan using controls of map should allow user to click the smallest of countries without trouble | All provided button for map controls work as expected |
Screenshots
- I want play again button at end of quiz and be able to change difficulty level for new game
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Play again button | Press the button | User is brough back to difficulty selection page | Works as expected |
- I want user to easily understand how to play game
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Title of game and short explanation | Read the text | User immediately understands how to play | Works as expected |
Screenshot
- I want quiz be responsive on different devices
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Responsiveness on different devices | Play game on different screen widths and devices | All text should be visible and zoom of map should allow user to interactive with the large map when playing on smaller devices | All provided button for map controls work as expected |
Screenshots
- I want a 404 page to show in case of broken link
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| 404 page | Loading error | User brough to custom 404 page and given option to return to home page | Works as expected |
Screenshot
- I want user to be able to challenge themselves through different difficulty levels
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Different difficulty selection buttons | Click easy, medium or hard button | Increasing difficult questions are loaded from different json files depending on choice | Works as expected |
Screenshot
Easy array loads and easy questions displayed when easy buuton clicked
Medium array loads and medium questions displayed when medium buuton clicked
Hard array loads and hard questions displayed when hard buuton clicked
| Bug | Fix |
|---|---|
| Colors were not showing up until the 2nd click(2nd right or wrong answer) | function was being told needed to be clicked twice to work, removed 2nd onclick to get colors appearing when answers first clicked |
| 3 undefined country clicks caused random countries to light up | added parameter to else statement when comparing correct answer through data numbers and giving half the undefined countries a data number of x |
| end.html page would not load when deployed to github pages | changed pathway to include name of project and that worked |
| colors being persistent and then not showing when clciked | set timeout function so can see country for a sec before disappearing and removing class once new question starts |
| username input invisible to user | removed call to function and username displayed input for username once again |
| controls for map move whole svg and hence when zoomed in it appears right, left and up, down and working backwards | swap left for right and up for down to make buttons more user friendly |
| Bug | Possible Fix |
|---|---|
| noticed random country appearing when clicking guesses again when going fast through quiz | could be due to not have defined at the countries and hence same issue as before |
| 4 blank spaces can be entered as username, need to improve validation of username for this | |
| username box goes red when criteria met, name is still accepted. only appears when valid name typed immediately and start game pressed | username input box has caused me enough issues and while this red display is a bug it does not affect the main functionality of the username validation and display so i will look at this in future by looking at functions |
| after 3 wrong answers, new questions appears very quickly nearly before color appears to tell user last selected country was wrong for last question | i would like to increase the time between |
| if select any where in sea (blank bit of map) that counts as a guess | i would like to possible try to eliminate this so user doesnt waste guess by accident |
The website was deployed using GitHub Pages:
- In github in repositories, select pp2main
- From here go to settings tab which is on top of screen
- Then on the left hand menu, select Pages
- For the source, select Branch: main in dropdown
- Once saved, GitHub will refresh and your website will be published from GitHub repository
- The link to your published website will appear after a minute or two
Interactive World Map
Image of earth at top of readme file from freepik
Interactive World Map
Make a Clickable SVG Map using HTML & CSS
Help with understand how to create a game quiz using HTML, CSS, JS - JAMES Q QUICK youtube channel
Specific code used mentioned throughout comments
My wonderful and patient boyfriend for helping me with testing and student care for being very accomodating and flexible regarding my resubmission date
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent