Visit the live webpage

Developed by: Carlos Felipe Capobianco Sandoli

• Project Overview
  • Project Goals
  • User Stories
  • Site Owner Stories
• Design
  • Colors
  • Fonts
  • Wireframes
• Technologies
• Features
  • Header, Logo and Instruction Modal
  • Game Stage
  • Footer
  • Contact Us Form
• Future Improvements
• Bugs
• Testing
  • Validation
    • HTML Validation
    • CSS Validation
    • Accessibility Validation
    • Lighthouse
    • JavScript Validation
  • Manual Testing
• Deployment
• Credits
  • Modal
  • API
  • HTML Data Attributes

The objective of the website is to provide a trivia quiz where the user can test their knowledge and learn more about videogames. Through a open trivia database, questions are random and different everytime the user plays the game.

• As a user, I want instructions on how to play the game.
• As a user, I want to play the game and test my knowledge.
• As a user, I want the game to display the correct answer when I get it wrong so I can improve my knowledge in the topic.
• As a user, I want to know how I performed in the quiz through a score system.
• As a user, I want to be able to send a feedback message to the site owner.
• As a user, I want to create a username to get a personalized message before starting the game.

• As the site owner, I want to provide a fun game that is intuitive for the user.
• As the site owner, I want to provide a way for the user to get in touch.
• As the site owner, I want to allow the user to find my github and linkedin pages easily.
• As the site owner, I want the website to be fully responsive so the user can play it across multiple devices.

The color palette was created using the color wheel palette generator from Adobe Color.

The font Inconsolata, taken from Google Fonts was used for the body of the website.

The website was developed with a mobile first approach following the bellow wireframes. Media queries were used to resize the elements for bigger screens.

This project was developed using the following languages:

• HTML
• CSS
• JavaScript

The following tools were also used during development:

• Balsamiq
• Font Awesome
• Git
• Github
• Google Fonts
• Chrome Dev Tools
• Favicon

The header consists of a clickable logo that takes the user back to the home page and a how to play button that opens a modal where the instructions are displayed. The user can restart the game by clicking on the logo and also see the instructions from any point in the game.

When the page first loads, the user is presented a welcome window where they can enter their username.

After entering their chosen username and clicking on the play button, second window with a greeting message will be displayed.

The user can then click on the START button to start the game. At this stage, the window will stay blank while the questions are loaded from the API. This is intentional as a visual representation of the loading time. After the questions are loaded, the first question will be displayed. The user can then chose one of the answers by clicking on it. If they get it right, the score is incremented and the answer button turns green, if they choose the wrong answer, the button turns red and the correct answer is also displayed. The next button is displayed after the question is answered.

After answering the 10 questions. A final window is displayed, here the user will get a customized message depending on how well they went on the challenge, and they will also get their final score (how many questions they got right). The user can also start the game again with new questions by clicking on the PLAY AGAIN button.

The footer contains the credits to the site developer, links to the developer linkedin and github pages as well as a link to the contact us form. The footer layout was inspired by this github repository.

The user can click on the message icon in the footer to access the contact form. They can fill this form to send a feedback, or give a suggestion for the site owner. Currently the form is sent to the From Dump by Code Institute.

Future improvements to the site includes:

• A loading modal to be displayed while the questions are being loaded. At the moment the window stays blank.
• A timer to increase the challenge.
• Different difficulty levels which the user can choose (easy, medium, hard).
• Leaderboard

One bug can be found in the deployed website. In mobiles, when the onscreen keyboard is shown to type in the username, the footer is shown in front of the game stage due to the reduced size of the screen.

During development, the buttons that changed background color for giving a feedback for correct and incorrect answer maintained their background color as red or green when displaying the next question, the answers didn't return to the original background color. This was fixed by creating two new classes (correct and incorrect classes) that would be added to the answer buttons when the user clicked on an answer, and removed when the next question would be displayed.

The page was validated using the W3C Markup Validator. The first validation indicated a wrong heading structure and also indicated that the href url for the google fonts was broken down into two separate lines. When reestructuring the headings, the closing tags were left unchanged, this resulted in further errors. After fixing these, the page passed validation.

WC3 Jigsaw Validator was used for validating CSS. No errors were found.

Wave Accessibility Validator was used for ensuring all accessibility standards were followed. The first test showed a missing label for the username input and low contrast between the button background and text. Validation passed after fixing these.

The lighthouse performance validator from Google Dev Tools was used to check the website performancs. An overall score of 99 was achieved.

JSHint was used to validate the code in script.js. No major issues were found.

This project was deployed through GitHub Pages. The following steps were followed for this:

• Navigate to the repository in GitHub
• Select the settings tab
• On the left navigation menu, under Code and Automation, select Pages
• Select Deploy from a branch under source
• Select the main branch
• After the pages reload, the link to the deplyed page will show up at the top.

The modal containing the game instructions was created following a tutorial that can be found on w3schools

The questions displayed in the game were taken from the OPEN TRIVIA DATABASE API. A tutorial from MDN was followed to write the code for getting the data from Open Trivia Database. The tutorial can be found on the following link: MDN-fetch.

Data attributes elements were used for storing values to elements to be retrieved later in other functions. The Love Maths walkthrough project was used as inspiration for this.