This interactive game is designed for quiz lovers and geography enthusiasts alike. The questions are at beginner level and targets children of high school age - although adults are more than welcome to test themselves! Users of the website will be able to smoothly and easily navigate through the game, with an active score counter informing them of their progress.

• Heading

A simple header with the game title appears at the top of the page and remains throughout. This also contains an anchor tag which will return the user to the homepage at any point.

• Background

A background image relating to the game subject sits visible throughout the game. Image was sourced from pexels.com.

• Play Game

The game is viewed and played within a small card. To begin, the user is greeted with a play button which when pressed will begin the game.

• How To Play

The user can click a button which informs them of the rules of the game.

• Game

A question with four options will be presented to the user. They will select one answer only before clicking 'Next'.

• Score Counter

A running total of the users score sits beneath the game area allowing the user to sese if they got the question right.

• Result alert

User is notified of their overall score at end of game informing the user if they have passed or failed.

• Multiple difficulty levels

• Additional quiz games to build the 'Know Your...' series(sport, history etc)

• Fun animation when selecting correct answer

• I want a fun interactive game.
• I want a game that is easy to navigate and the purpose is clear.
• I want the quiz to be aimed at its stated demographic so it isn't too hard or easy.
• I want a visual representation of my acheivement of passing the quiz.

• I want the functions of the game to run smoothly and glitch free.
• I want users to enjoy playing and be encouraged to return or share the quiz.

A seperate testing file can be found here

• GitPod

• HTML5
• CSS3
• JavaScript

• GitHub

• Font Awesome
• Google Fonts
• Stock Images

The quiz was deployed with GitHub using the below steps:

• Within the relavant repository, select 'Settings'.
• Navigate to the 'Pages' section displayed on the left menu.
• Select the main branch from the drop-down menu and save to display the link to your website.

Know Your... Geography can be viewed here.

• I used this method to refresh the page at the end of the quiz.

• The formatting of the questionArray was taken Here.

• This solution was used to overcome a styling issue on the header.

• Inspiration for the the layout and required functionality for the quiz was taken from this tutorial.

I obtained my background image from pexels.com.

A special thank you goes to Sandeep, my mentor, and also my son, Thomas, who enjoyed testing the quiz throughout development and gave some interesting feedback.