Football Quiz is a fun game that really challanges everyone playing it. It includes 10 questions from the Premier League, Champions League and of course the World Cup. The questions are a good mix between different countries. There is a maximum point system of 100 points to get the highest score.
This website can not be used as a template for a business since it's a project for educational purposes. This website will be build with HTML, CSS and JavaScript.
Live website: Football Quiz
- UX (User Experience)
- Design
- Technologies
- Features
- Testing
- Issues found during site development
- Deployment
- Credits
-
As a football enthusiast
- I want quite hard questions
- I want questions from different parts of the world
- I want the quiz to count the score, so I can beat my friends
- I want to be able to contact the company on social media
-
As a user returning to the site
- I want to be able to do the quiz multiple times to get different answers and get the highest score
- I want the questions to change every month
- I want the questions to come up random and not to start with the same question each time
-
As a user who does not know anything about football
- I want to learn more about football
- I want the site to show which alternative is correct when I miss on a question for better learning
- I want some questions to be little easier to be able to get some correct answers in the beginning
- I want to see how you play the game and it's rules
- As a site owner I want to make a fun and enjoyable game
- As a site owner I want to educate people about football history
- As a site owner I want the site to be easy to navigate so that people will return and also share with friends
- As a site owner I want to let people compete with their friends
- As a site owner I want to promote football all over the world
- As a site owner I want to make it free so everyone is able to play
- As a site owner I want the questions to come up randomly
I have chosen PT Sans for the header and logo as it is easy to read and has sufficient contrast to the main body font. The small caps style is used by Open Sans that I feel look very clean in the quiz.
The site follows a kind of football theme color theme to make people almost feel like they are on that football pitch. It features complementary Lincoln Green, Forest Green Web, Light Green, white and black to create a good contrast and improve readability.
The colors chosen are:
- HTML
- CSS
- JavaScript
- GitHub
- Gitpod
- Google Fonts
- Font Awesome
- W3C HTML Validation
- H3C CSS Validation
- JS Validation
- Am I responsive
- WebAim
All colors was checked in a contrast checker and pass the test. The only color that didn't pass for small text was #1E8534 as background to #FFF, but I only use this setup for large text in header and footer.
The website has the following features:
Navigation bar is visible on the top of the website with a logo that is clickable to update the site. The navigation bar and logo will become a bit smaller on mobile devices to make it look good.
The home page display a a big "Start Quiz" button in the middle of the screen.
When the start button is clicked the rules of the quiz will show up. Here you can read the 5 main rules of the quiz then decide to start the quiz by clicking on the continue button or exit the quiz by the exit button.
When you click on the continue button the quiz will start. On the top left side you will see the time counting down from 20 seconds. You need to make a decision before times up. On the top right side you will see you score live. You will get 10 points for each correct answer. In the middle you will see a question with 4 different options to choose from. When you click an option, the correct answer will show in green and if you clicked on the wrong it will show red. Finally on the bottom left you will see how many questions there are in total and also what question you are on right now. Once you click on an answer a "Next Question" button will show up on the bottom right side. When you have answered all 10 question the button will change to "Show Result"
After finishing the quiz you will be directed to a result page showing your total score. There are 3 different text alternative depending on how you scored. On the bottom there is a "Exit Quiz" button to exit the quiz.
At the bottom of the site there is a footer with social media links to be able to contact the company.
- As a user, I want to easily determine what kind of website it is.
- Result: TEST PASSED
- It's very clear that the site is a quiz for football on the name but also the green color theme on the site. The logo includes a picture of a football to really get the feeling of the sport.
- As a user, I want it to be a challenged on my football skills.
- Result: TEST PASSED
- This is a very hard quiz with a average first score of 40 points out of 100. Users like to play the quiz multiple times.
- As a user, I want to be able to see my score as I play the game.
- Result: TEST PASSED
- Users can see there live score in the top right corner as they play the game.
- As a user, I want to see how much time I have left on each question.
- Result: TEST PASSED
- Users can see how much time they have left in the top left corner as they play the game.
- As a user, I want to know how many questions is left while playing.
- Result: TEST PASSED
- Users can see how many questions is left to play in the bottom left corner.
- As a user, I want to know the rules before start playing.
- Result: TEST PASSED
- When the user presses the start button the rules will show up before the game starts.
- As a user, I want to see my final score after finish playing.
- Result: TEST PASSED
- After the game is finish the user will be taken to a result page showing the final result.
- As a user, I want to be able to contact the company on social media.
- Result: TEST PASSED
- Users can easy find the social media pages in the footer.
The W3C Markup Validation Service was used to validate the HTML page of the project. No errors or warnings to show.
The W3C CSS Validation Service was used to validate the CSS file used for the project. No errors or warnings to show.
Syntax Validation was used to validate the Java Script files used for the project. No errors or warnings to show.
I was using Chrome as my main browser and the website have been tested on my iPhone 11 Pro and Macbook Pro 13¨.
I also tested the website inside of Chrome Dev Tools. With different px sizes to make sure the website will work on all different devices.
- I had a problem that the "Start Quiz" button would not show with any background on ONLY iPhones. Desktop and Andriod phones could see it. I fixed the problem to add a white background to the start button in media queries for mobile.
- I had this problem that the "Next Question" button would also show up after the last question was answerd. I used Java Script to make the button change the caption inside of it when all question was answered to "Show Result".
- I had a problem to get the score system to work perfectly in the beginning. I forgot to define the "userScore" inside of the function "optionSelected" and it made the score text to not show up inside of the result box.
- Also I had some problem to get the quiz box to fit perfect in between the header and footer on mobile devices. I solved that problem to inside the media queries make the font-size smaller inside the quiz box and also made the header and footer smaller to better fit mobile devices.
- I found out the question always came in the same order so I figure out how to make them come in randomly order instead by using the Durstenfeld shuffle implementation.
The site was developed on Gitpod, using GitHub for version control and hosting the repository and final site. The repository for this project, and the associated workspace, was created from the Code Institute template.
- Log in to GitHub and navigate to this project's respository Football Quiz
- On the navigation bar of the repository, go to "Settings" tab
- Find on the left-hand side menu and locate "Pages"
- Under "Source", select Branch: main and click Save
- The page will refresh automatically and a link to the page is published Website
- Log in to GitHub and navigate to this project's respository Football Quiz
- Click on "Code" and then copy the HTTPS address.
- Open Git terminal
- Type git clone and paste in the URL copied in step 2 and press enter
- Log in to GitHub and navigate to this project's respository Football Quiz
- In the top right of the page, below your profile you should see a "Fork" button. Simply click on this.
- A copy of the repository will then be added to your own Repositories Page.
- I learned the fundamentals on how to make a quiz and took some ideas from these two Youtube Youtube channels
- I find out how to randomize the quiz questions from this thread on Stack Overflow
- I read this thread on Stack Overflow and understood how to change buttons.
- I used W3School to check different operators.
- Also this for looping W3School.