The purpose of this website is to create a fun interactive football quiz game using JavaScript language.

• UX
  • Website owner business goals
  • User goals
  • Structure of the website
  • Wireframes
  • Surface
• Features
• Technologies
• Testing
• Deployment
• Credits
• Screenshots

• The goal of the site is to provide a football challenging quiz to entertain online football fan users.
• The goal of the site is to improve the online fun environment.

• The site’s users want to have fun.
• The site’s users want to play an online quiz to test their knowledge of football.
• The site’s users want to have a personality assessment of football.

The website is designed to be easy and user-friendly on all types of devices. On desktop, tablet or mobile device there should be no difference for a user to have a fantastic experience. All parts are designed to achieve maximum user satisfaction. Users will get interaction replying to the questions on the quiz. The website is divided in 5 different screens:

• Introduction Quiz
  • Few informations about the quiz, and general rules.
• Username Screen
  • User can create a username
• Select League Screen
  • User has 3 options of leagues, they decide which they want to play
• Questions Screen
  • User has to answer the questions in 15 seconds
• Result Screen
  • User has a feedback about this answers.

There are only one wireframes guiding the end design of this project, as the mobile responsivity looks quite similiar to the desktop screen.

Wireframe

Main colours used in a project:

• background color: rgba(0, 46, 0, 0.6)
• font color: white and black.
• hoover color: rgba(0, 110, 0, 1)
• right answer color: #04B5DE
• wrong answer color: #DE0421

• Main font I used Montserrat, and as a backup font sans-serif.

Back to Table of contents

• A score tracking system
• Countdown
• User can create a username
• Feedback
• Play Again option
• User can play different topics

• Leaderboard
• Interactive sounds

• As a structure language.

• As a style language.

• As a scripting language.

• As a font resource.

• As a software hosting platform to keep project in a remote location.

• As a version-control system tracking.

• As a development hosting platform.

• As a wireframing tool.

Back to Table of contents

The HTML and CSS code was tested using the W3C Validation Service. Both has passed with no errors.

The JavaScript code was tested using Jshint. There were too many "Unnecessary semicolon" errors, which was fixed.

I used Chrome developer tools throughout the project for testing and solving problems with responsiveness and style issues.

Back to Table of contents

The project was deployed on GitHub Pages. I used Gitpod as a development environment where I commited all changes to git version control system. I used push command in Gitpod to save changes into GitHub.

To deploy a project I had to:

• Log in to GitHub and click on repository to deploy (FIFA QUIZ GAME)
• select Settings and find GitHub Pages section at the very bottom of the page
• from source select none and then master branch.
• click save and page was deployed after auto-refresh.

Your site is published at https://arthurvguide.github.io/fifa-quiz-game/

To run localy:

• Log in to GitHub and click on repository to download (FIFA QUIZ GAME)
• select Code and click Download the ZIP file.
• after download you can extract the file and use it in your local environment

Back to Table of contents

• To develop this project I used Code Institute student template: gitpod full template

• Content was written by me.

• Background image came from Unsplash.
• Logo image came from LogoMaker.

• Hover effect idea on logo came from: Tilt.js

Back to Table of contents

Back to Table of contents