JavaScript Quiz

The JavaScript Quiz is a browser-based quiz game constructed with JavaScript, CSS3 and HTML5. It allows the user to answer five questions and obtain their score at the end of the quiz. The game is targeted toward people who are interested in JavaScript programming language.

The live website can be found at JavaScript Quiz.

Features

Header Section

The header contains the game name on purple colour and grey background.

Start Section

The start section has an input asking for a username before starting the quiz game. The input requires a text entry, and in case the user enters a space, a message will ask them to enter a valid username.

Quiz Game Section

• The game header contains a progress bar with the caption to show the player how many questions were answered and how many questions the quiz has in total and the total points earned.
• All five questions are about JavaScript language and have four options of answers with only one correct option.
• The player has status feedback in the game footer showing how many questions they get right or wrong.

Scores Section

• A score section displays a motivational phrase and a gif that changes according to the user score, the latest scores with the username captured on the homepage and the total punctuation. When the quiz is played more than once, the new score is added at the end of the list.
• The section also has buttons that give the option to play again using the same username or play as a new player.

Footer Section

The footer contains a credit paragraph linked to my portfolio that opens in a new tab.

UX/UI

• A simple layout, with purple and grey as colours, was chosen to give a good contrast.
• No images in the background to keep it clean and ensure that it never distracts the user.

Testing

• I've tested that this page works in Chrome and Firefox (mobile and desktop versions).
• I've confirmed that this project is responsive on all screen sizes using dev tools.
• I confirmed by testing with users that the text of all sections is readable and easy to understand.
• I've confirmed that the input requires entry, and the submit button works.

Validator Testing

• HTML

  • No errors were found when passing throught official W3C Validator.

• CSS

  • No errors were returned when passing through the Jigsaw.

• JavaScript

  • No errors were returned when passing through the JSHint.

• Accessibility

  • I confirmed that the colours have enough contrast, and the fonts chosen are easy to read, running it through Lighthouse in Chrome DevTools.

Deployment

Website deployed to GitHub Pages. The steps to deploy are as follows:

• On the project page, click on Settings
• Choose Pages on left menu
• In the source section, choose the branch that you would like to deploy (e.g. main)
• Click on the save button, and after a few seconds, you will have access to the URL of the deployed site.

The live website can be found here JavaScript Quiz.

Futures improvements

• Display the latest score in decrescent order.
• Change the colour of the selected answer to notify if it is right or wrong.

Credits

• Support of documentation in W3schools
• Favicon generated on Favicon
• Progress bar and score incremented using code by Brian Design
• Links to the gifs in the score section by GIPHY
• Images for the README resized using Adobe Photoshop.
• Responsive image by Am I Responsive screenshot