Welcome to Online Music quiz website (https://vladovichsvetlana.github.io/music-online-quiz/)!

It is an online quiz on 90s music hits. Online quiz can be open on a desktop or a mobile device. The purpose of this tool is to facilitate a fun game that encorages teamwork and team bonding. It can be used for friends, family and coworkers gatherings.

A fully responsive online quiz is made from scratch with the help of HTML, CSS and Java Script:

Mobile devices responsiveness checked on a variety of mobile devices; the quiz works well on all devices. No issues found:

Online quiz can be opened by scanning the QR code with a QR code reader or a camera of any latest smart device. It can also be opened in the most popular browsers such as Google Chrome, Firefox and Microsoft Internet Explorer:

Design:

Different shades of pink and purple colours were chosen for the background and the buttons for the quiz design. Colours work well together. Text and Background colours are: #63405E and #E1CCD6.

Contrast Checker test passed:

Existing Features:

The test consists of 5 questions with a muilti-choice answers grids (one of 4 options is correct). The following Java Script functions used: Quiz(options), function generateQuestions, function render_question, function initQuiz, function checkAnswer, function validateAnswer, function nextQuestion, function prevQuestion, function finishQuiz.

Quiz can be navigated using the Previous Question and Next Question buttons which allow you to progress to the next or the previous question. Previous Question and Next Question buttons have Hover effect. Once the mouse trackpads over the icons the buttons the background colour of the buttons changed from dark purple to light purple.

Restart Quiz button allows you to start the quiz from the beginning. The warning message comes up if no answers are chosen. Once quiz is completed another message comes up displaying the number of correct answers. The top of the page has an image suitable for the music quiz. No link set up for the image as it is online an one-page quiz.

Media

The image used for online quiz is taken from free images section of https://www.pexels.com.

Content

The text for the pages is written using the N1 hits available online.

Validator Testing

HTML

No errors were returned when passing through the official W3C validator all html sections:

CSS

No errors were found when passing through the official W3C validator:

Java Script

No errors were found when passing through the official Java Script validator https://snyk.io:

Bugs

No bugs were identified following the Html and CSS Checkers.

Lighthouse statistics

Lighthouse statistics stated that there was an issue with the image resolution and image ratio:

The online quiz image was changed and ratio was adapted to the more suitable size which increased the lighthouse statistics Best Practices from 83 to 100, SEO from 95 to 100 and Accessibility from 92 to 95 on a desktop device.

Libraries & Programs used: Repository is stored in Github HTML, CSS and Java script are created in Gitpod Google Fonts, for Roboto+Slab fonts Am I Responsive? Dev Tools - to ensure the site looked good across different devices

Deployment

The site was deployed to GitHub pages. The steps to deploy are as follows: In the GitHub repository, navigate to the Settings tab. On the left-hand side under ‘Code and automation’, select ‘Pages’ and from the source section drop-down menu, select the Master Branch. Once the master branch has been selected, the page will be automatically refresh with a detailed ribbon display to indicate the successful deployment. The deployed page can be checked via the link https://vladovichsvetlana.github.io/music-online-quiz/.