EU Capitals Quiz is a fun and informative game. There are around 50 countries in total in Europe. But currently, there are only 27 countries that are members of the European Union. In this game, the player will be tested if they can successfully name the capitals of these 27 countries.

It is a multiple choice type of game where a player can only select one answer for every question. Each time the player clicks on the desired choice, the player cannot deselect or choose another answer. Each correct answer will be accumulated as the game progresses and the final total score will be shown at the end.

• The Header

  • The header of the page features the name of the game.
  • This section is displayed in big font and is separated from the navigation bar to highlight the importance of the name of the game.

• Navigation

  • The navigation bar is located at the top of the website. It is simple yet an effective feature of the website.
  • The navigation includes three links to different sections and these are accessible in each page.
  • This feature provides easy navigation for users from page to page across different devices.

• Game Introduction

  • The introduction features basic information about the European Union.
  • This section features a play button that links to the game page.

• Footer Section

  • The footer section of the game is a simple section that provides a social media link to Facebook.

• Game Page

  • The game page section features a welcome area for players and a start button before proceeding to the actual game.
  • The game features four choices for each question and a next button that is only activated once the answer has been chosen.
  • The last page of the game displays a congratulation message with the total score after completing the game

• Guide Page

  • This page features a guide for players on how to play the game.
  • There is also a form provided for questions, comments and recommendations for the game.
  • The contact form collects four essential information from the users: full name, email address, phone number and message.

• I have tested this page in three different browsers including Chrome, Firefox and Microsoft Edge.

  • Firefox

  

  • Microsoft Edge

  

  • Google Chrome

  

• I confirmed that the project is responsive and functions in various screen sizes using the devtools device toolbar.

• I confirmed that the features of the website including the navigation bar, heading, contents and other sections are completely clear and easy to understand.

• I have confirmed that the contact form works and that each input field will only accept the required details from the users and that the send message button works correctly.

• No bugs identified.

• HTML - No errors were returned when passing through the official W3C validator

  • Home Page
  • Game Page
  • Help Page

• CSS - No errors were found when passing through the official (Jigsaw) validator

  • 

• Lighthouse - I've tested the performance of the page using Google Chrome Lighthouse.

  • 

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • Open a web browser (like Chrome, Firefox or Edge)
  • Login to Github and locate repositories.
  • In the GitHub repository, navigate to the Settings tab.
  • Go to pages tab and from the source section drop-down menu, select the main Branch and then click save button.
  • Once the main branch has been selected and saved, the page provided a link the completed website. The live link can be found here - https://jtm2021.github.io/eu-capital-quiz/

• Some codes were inspired and taken from a youtube tutorial by Web Dev Simplified. The intention was to use the tutorial as a guide in creating this project. [https://www.youtube.com/watch?v=riDzcEQbX6k&t=1321s]

• The background image of the website was taken from Pixabay.com. The link is provided below:
  • https://pixabay.com/photos/european-union-european-parliament-6405066/

• The site content information are sourced from Wikipedia. See link below:
  • https://en.wikipedia.org/wiki/European_Union