Skip to content

Latest commit

 

History

History
253 lines (186 loc) · 9.93 KB

README.md

File metadata and controls

253 lines (186 loc) · 9.93 KB
Raw

World Cup Quiz

Welcome to World Cup Quiz. Having the football world cup 2022 at the end of the year, there is no better time to test your football knowledge.

Mockup

Live link to website

Tech Stack

VS Code Gitpod Git HTML5 CSS3 JavaScript Figma

UX/UI & Design

Target Audience

The Quiz is targeted to football fans who also understand english language with a estimated 4 Billion fans. The Quiz will be used for entertainment but can also be used by those who would like to learn more about FIFA World Cup Tournament.

User Stories

  • AS a user, I would like to check the Leaderboard.
  • As a user, I would like to be able to see instructions before start the game.
  • As a user, I would like to know which is the current question number.
  • As a user, I would like to know how many questions are in the Quiz.
  • As a user, I would like to see my current score when the game started.
  • As a user, I would like to see clearly the question and available choices.
  • As a user, I would like to see which choice I am in before final selection.
  • As a user, I would like to be able to go to main page if the game already started.
  • As a user, I would like to be able to go to next question after finishing the current question.
  • As a user, I would like to see my final score after finishing the Quiz.
  • As a user, I would like to save my score with my name.

Wireframes

I used Figma to create wireframes for the website.

The original idea was always to demonstrate the capabilities of JavaScript over the DOM (Document Object Model) manipulation. In order to do so, I decide to design the project as one page websites with a single HTML file with multiple sections that will work as different stages or scenarios.

Mobile wireframes were made and taking also in consideration Large, Medium and Small smartphones.

Color Scheme

I used Coolors.co to keep a control on the color scheme selected.

The selection of colors start having as starting point the flag colors for the next FIFA World Cup Host, Qatar.

Contrast Checker

I used Coolors.co contrast checker tool having a very good result of 8.91.

Features

  • Favicon
    • The favicon is a simple ball of football.
  • Front Page buttons
    • Buttons in the front page allows the user to start the game or visualizer the Leaderboard.
  • Instructions
    • A panel displaying all instructions need it in order to play.
  • Instructions buttons
    • Buttons in the instruction section allows the user to start the game or go back to main page.
  • Scoreboard
    • Scoreboard display current question number, total questions and current score.
  • Question and choices
    • This game area display the current question and possible choices.
  • Hover indicator
    • This feature help to visualize which choice are you currently in before final selection.
  • Extra Information
    • Extra information is displayed to provide more context to the current question and correct answer.
  • Game Buttons
    • There are two buttons in the game area, one to return to front page and another one to advance to next question in the quiz.
  • Save Score Form
    • At the end of the quiz the user is presented with a form to save their final score or paly again.
  • Leaderboard
    • On the scoreboard you can see all scores and buttons that allows the user to play again or go back to front page.

Future development

  • Database implementation

    • This will allow record all scores from all user that complete the quiz.

  • Incorrect answer penalty

    • This will take X amount of points for each incorrect choice selected.

  • Add further questions

    • This will allow more quiz combinations and test wide knowledge on the subject.

Testing

For visualize testing results here.

Deployment

The site was deployed to GitHub pages. The steps to deploy are as follows:

  • In the GitHub repository, navigate to the Settings tab
  • From the source section drop-down menu, select the Main Branch, then click "Save".
  • The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here

The website is hosted using GitHub pages, deployed directly from the master brach.

Run Locally

Clone the project by following the next command on Bash

  git clone https://github.com/giankpetrov/WorldCupQuiz

Credits

Code

  • Starting idea for page functionality from Brian Design here.
  • Project reviewed for code structure and logic from Harry-Leepz here.
  • Project reviewed for code structure and logic from StevenWeir038 here.

Design

Media

Acknowledgements

Harry Dhillon for being my mentor on this project and provide excellent feedback from real work experience.