The Ultimate Europe Quiz is a fun interesting quiz aimed at testing the user on their general knowledge of the European Countries in travel and geography. This Simple trivia game is perfect for any get together event as friends or even a simple trivia night.

The idea of the project was inspired by my love for Europe and travel. From a young age I have always had a passion for travel after being introduced to the beauty of travel by my parents at a young age. After my first Europe experience I never looked back. I found the questions to be a fun quiz for myself as well to test how much of Europe knowledge I have gathered since my first experience and the idea is that the user enjoys the game as much as l did and is inspired to explore the beauty of Europe one day.

The content of the quiz is designed for all ages. There are no age restrictions. The website is responsive in all major screen devices that is desktop, laptop, tablet and smartphone.

On this page you will find the main title and a brief introduction to the quiz. The home page also contains the logo image of Country signs, the start quiz button and rules button.

The rules are found on the home page( landing page of the quiz). And these are set to give the user some guidance on how to play the quiz. Once the user has finished reading the rules they will be guided to the start quiz button. The rules will then disappear when the user proceeds to click the start quiz button.

In this section, after selecting the start quiz button, the user will be directed to the very first question which like all questions to follow will always have two options to choose from(true of false). On the quiz page the user will only see the question, the answer options, the score and the next button which should be clicked after the user has selected the correct answer so as to proceed to the next question.

For each question that the user will be working on they will know what number it is as this will be displayed at the top of the game area. There are 12 questions to answer. The correct answer option turns green when clicked while if the answer is wrong the button turns red.

At the end of the answering the 12 questions, the game is over and the user will be taken to the final page of the game. The user will get a congratulations message for completing the game.

There is no restart button for the player to play the quiz again. The game will marked as over.

In future I could possibly add:

• An option to replay again with possibly a set of new questions.
• Timer element to make it more fun.

I used simple color choices for both the background and the quiz area.

I was drawn to the combination of Ubuntu and Opens sans. A very soft combination and easy on the eyes. I was immediately drawn to the font Ubuntu and found the perfect pairing for this font on https://www.pagecloud.com/blog/best-google-fonts-pairings

The website has 3 main pages being:

• The Home page which displays the Intro area. On this page you will find the start quiz and rules button.
• The Quiz area which displays all the 12 questions one at a time and answer options. At the bottom of this page we also see the score and next button. This page contains the next button and score level.
• The final page is the end of the game page which will show the user a closing message.

Languages

• HTML
• CSS
• JavaScript

Framework & Tools I used the following technologies to create this website:

• Balsamiq - for my initial testing phase of the layout of the quiz
• HTML 5- for structure
• CSS- for styling
• Javascript - for all the game variables and functions
• Gitpod - for the Website creation and deployment
• Github - for the final Website hosting
• The fonts were taken from https://fonts.google.com/ and the inspiration behind the combination of the fonts was taken from https://www.pagecloud.com/blog/best-google-fonts-pairings
• [Favicon] (https://favicon.io/favicon-generator/)
• google Chrome Developer tools
• Google fonts
• Font Awesome
• Code Institute Student template
• Am l responsive
• W3C Markup Validation Service
• Jigsaw CSS Validation Service
• JSHint JavaScript Code Quality Tool

The Media responsive elements were built directly in the CSS. The website is responsive across all media ie Laptops, desktops, tablets and smartphones. I also tested that all buttons respond when clicked on. The rules and start button work well and then once the game begins after the user chooses an answer the next button is displayed and user goes to next question and this sequence continues until the game comes to an end.

• HTML

  • No errors were returned when passing through the official [W3C validator]

• CSS

  • No errors were found when passing through the official [(Jigsaw) validator]

• JS Validation JSHint was used to check validity of the JavaScript code used for the website and no warnings were found. 3 unused variables were found in the list of variables, however these variables have been declared in the functions

• LightHouse Report Viewer

I did not detect any other bugs after cleaning up the code.

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the "Settings" tab
  • Once in the setting, navigate to "Pages" from the left hand menu;
  • In the "Branch" section, from the drop-down menu, select "main" and click on Save;
  • Refresh the page manually. The link to the now deployed website and will display to indicate the successful deployment.

The live link can be found here - https://ratiem.github.io/the-ultimate-europe-quizz/

In order to fork this repository, you must:

• Go to the Github repository.
• Click on the "fork Button" at the top right hand corner of the page.
• Then select "create new fork' from the menu provided.

You can clone this repository by:

• Going to the Github repository, click on the code button located above the file list.
• Select if you prefer to clone using either HTTPS, SSH, or Github CLI.
• Click on the copy button to copy the URL to your clipboard.
• Open Git Bash.
• Change the current working directory to the one where you want to clone the directory to.
• Type "git clone" and then paste the copied URL from Github.
• Press enter to create your local clone.

• The text for the Quiz questions were taken from https://www.beelovedcity.com/
• Instructions on how to make my page responsive were taken from Youtube video https://css-tricks.com/a-complete-guide-to-css-media-queries/ https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
• The Favicon in the browser was created using https://favicon.io/favicon-generator/

• One image was used in this project for the logo and it was sourced from: *https://www.freepik.com/free-vector/countries-signs_762270.htm#query=country%20signs&position=4&from_view=search&track=sph
• I used a one background color to keep the project simple and clean, without obscuring the main quiz area.

• First of all i would like to thank my daughter as she helped provide support during this time. My family in general for the unwavering support throughout my program so far.
• I would also like to acknowledge the slack community for always trying their best to guide us through challenging tasks.
• My fellow Students Jeffrey Bull for helping review my code in peer code review.
• I would also like to thank my fellow Code Institute student Kelly Hutchison. Her excellent code work was the basis for my project.
• My friend George Ngcobo who helped tutor me through the final steps in trying to identify where my code required fixing particularly in javascript. I was challenged to think more and read through more online resources such as stackoverflow.com and search through related videos on youtube.
• Julia Sjterna a JavaScript expert and coach
• Tutoring support for the guidance to be able to pick out possible errors for fixing.
• Finally I would like to thank my Mentor Caleb Mbakwe for the continued support
• My friend Bhekani K for reviewing my code.