The Time Quiz Game is a fast-paced trivia game with 3000+ questions from different categories and with different difficulty level. Answer quickly and accurately to beat your high score or challenge friends. No references are allowed. Each correct answer moves you forward, while wrong answers add 10 seconds to your time. Test your knowledge now! We wish You luck!

The wireframes for the website were produced in Balsamiq. There are frames for a full width display. The final site varies slightly from the wireframes due to developments that occured during the creation process.

• Typography

  • The fonts chosen were 'Frijole' for the headings, 'Averia Libre' for buttons and 'Montserrat' for the body text. They fall back to sans-serif respectively.
  • Montserrat is an easily readable font, and Frijole with Averia Libre was selected via https://typ.io/search

• Colour Scheme

  • The leading colour is a shade of #EFF6F1, which fits perfectly with the main #263C3E font and #FFC229 button colour.
  • The colours were selected via http://colormind.io/

The website consists of a landing page and two related pages. The landing page is the default loading page. A hidden paragraph on the landing page appears when the show instructions button is clicked and disappears when clicked again. The game and end page start automatically when the conditions are met. When the user presses the Start Game button, the game begins. When the user finishes the game, the end page appears. On the end page is a summary score text and a Play again button, which starts the game from the beginning.

• Read Instructions button

  • when the user clicks it, the button's color changes, and the instructions paragraph appears
  • a paragraph is entirely smooth and scrollable on smaller devices
  • user is known for the game instructions and preparation for the game
  • when the user clicks it again, the paragraph disappears

• Start Game button

  • when the user clicks it, the button's color changes and the game starts

• Loader

  • appears between the loading page and the game page when the user clicks the Start Game button and the game page is not fully downloaded yet
  • disappears when the game page is fully downloaded and the game is ready to play

• Stopwatch

  • starts automatically when the game starts also
  • when the user answers wrong, the stopwatch add automatically 10 seconds to the time score

• Question and answers area

  • questions and answers area are connected to the trivia API
  • trivia API has almost 5000 questions and answers database
  • questions are downloaded from the easy category
  • when the user clicks correct answer, clicked choice change the background color to #135c11 and font color to #e3dee1
  • when the user clicks incorrect answer, clicked choice changes the background color to #8e0909 and font color to #e3dee1 and automatically stopwatch adds 10 seconds to the time score

• Progress bar

  • shows the graphic percent of the game
  • the game is divided into ten questions, so every yellow piece of the progress bar that appears after answering the question corresponds to 10 percent

• Score index

  • shows the user's time score described in seconds

• Play Again button

  • when the user clicks it, the button's color changes, and the user is taken directly to the beginning of the game to the loading page

• later plans include rebuilding the app and connecting it to the backend server to save scores online and make a ranking
• also rebuilding an app by adding questions level grades at the beginning of the game: easy, medium, hard
• add Error 404 page with back to the home link.

• HTML5 - provides the content and structure for the website
• CSS3 - provides the styling
• JavaScript - implement all functions of the game
• Balsamiq - used to create the wireframes
• Gitpod - used to deploy the website
• GitHub - used to host and edit the website
• Canva - used to prepare the app's documentation

The Time Quiz Game website has been throughly tested. All the code has been run through the W3C HTML Validator, the W3C CSS Validator and JSHint JS validator. No error were found after the last test.

The HTML validator results for each page are below:

• Loading Page

• Game Page

• End Page

The CSS validator results are below:

JSHint JS validator results are below:

• JSHint shows no significant errors in the code. The main problem that appeared in the code is the writing style issue, which says that the code has been written in ES6 functions and might work incorrectly on older devices that don't support JS (ES6+) language

The responsive design tests were carried out manually with Google Chrome DevTools.

All responsiveness tests were successful. The app is ready to work with devices of various widths. In addition, the app has been adapted to mobile landscape modes. That increases UX for landscape mode users.

The website was tested on the following browsers with no visible issues for the user:

• Google Chrome
• Microsoft Edge
• Mozilla Firefox

Appearance, functionality and responsiveness were consistent throughout for a range of device sizes and browsers.

There are no known unfixed bugs on this site.

The site was also tested using Lighthouse Chrome Dev Tools to test each of the pages for:

• Performance - How the page performs whilst loading.
• Accessibility - Is the site acccessible for all users and how can it be improved.
• Best Practices - Site conforms to industry best practices.
• SEO - Search engine optimisation. Is the site optimised for search engine result rankings.

Here are the desktop parameters of each repository page:

• index.html

• game.html

• end.html

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

1. In the GitHub repository, navigate to the Settings tab.
2. Once in Settings, navigate to the Pages tab on the left-hand side.
3. Under Source, select the branch to master, then click save.
4. Once the main branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here - https://lukaszglowacz.github.io/time-quiz-game/

• Google Fonts - used for fonts
• Font Awesome - used for icons
• Colormind - used to generate color pallete