‘The Music Quiz’ is a fun interactive quiz targeted specifically at music lovers. The website aims to offer a simple but fun way for users to test their music knowledge against questions from all eras of music.

You can view the website here - The Music Quiz

The aim of this website is to provide an easy to access, fun, and interactive quiz for music lovers of all ages. Questions range from the 70's until the present day. User’s scores are displayed so users can try to compete against their own score, answering more correct questions and therefore developing their music knowledge.

As the primary target audience for the site is people with musical knowledge, the following user expectations were considered when creating the site:

• Easy to access, simple and clear
• Responsive as users will be accessed on multiple devices
• Questions in the quiz should be relevant to all music topics
• Dynamic real-time feedback should be presented to users so they are aware of correct and incorrect answers

I opted to display an image of a DJ in the background. The title will maintain a white color throughout. A light purple transparent background was used, rgba(117, 117, 165, 0.77), so the question and answer options are visible. I used a gold background color for the answer options, #ffbe0b, to add more style. No other colors were used throughout.

Georgia, 'Times New Roman, Times, serif was used for the title "The Music Quiz". Cinzel Decorative was used for everything else.

The Landing page features some animation using (https://animate.style/). A short introductory follows as well as the instructions. Underneath we have a "let's Dance" button to commence the quiz.

The quiz page retains the animated style used in the landing page. We then have a question followed by four answers labeled A-D. Upon selecting the correct answer, the answer option will turn green. The same applies to an incorrect answer which will of course display red. Underneath we have a 'Next' button just in case the user wishes to skip. Underneath the 'Next' button we show what question the user in on out of the 15 available. Lastly, four social media links which will bring the user the relevant page. Each button is interactive and features a hover effect. See below for the image.

The background image, which is featured on all pages, is a DJ in a booth. image is taken from (https://coolwallpapers.me/)

The bottom of each page features a footer with four social media links which will bring the user the relevant page. Each button is interactive and features a hover effect.

After answering the 15th question the user will be given their score. The user can choose to play again, check the correct answers, or provide feedback.

Upon selecting 'check answers' the user will be shown a list of the correct answers. See below

If the user wishes to provide feedback, a feedback page is available. See below

• HTML5 – for structuring the website
• CSS3 – for styling the website
• Javascript - for the functionality of the game
• Balsamiq – for wireframes of the site
• Googlefonts – Cinzel Decorative
• Font awesome – for site icons
• W3C Markup and Jigsaw validation - used to test and validate the HTML and CSS
• Jshint - used to test and validate the javascript files
• Animate - for animation throughout

W3C Validator was used to check for errors within my HTML code. The following errors were presented.

alt text

alt text

The CSS passed through the validator without any errors.

Some errors were found when passing the script.js file through JSHint. Errors cleared

Lighthouse was utilized to test the performance, accessibility, best practices, and SEO of the website. See below for an image

The site was developed using Gitpod, which was then committed and pushed to GitHub. The site was deployed to GitHub pages. The following steps were used to deploy :

• In the GitHub repository, navigate to the Settings tab
• Select the Pages sub-menu
• From the source section drop-down menu, select the Master Branch, and then hit save
• Once the master branch has been selected, the page provided a link to the live website.

The link to the live website is here

• The background image for the site was taken from (https://coolwallpapers.me/)

• Three youtube tutorials were used to kick start and support the quiz project in regards to the javascript https://www.youtube.com/watch?v=riDzcEQbX6kand & https://www.youtube.com/watch?v=TLuGPBeBo_g & https://www.youtube.com/watch?v=f4fB9Xg2JEY

• Some code used from Code Institute - Love Maths

• https://stackoverflow.com/ was used to help find solutions to problems

Lastly, Thanks to Marcel Mulders for his guidance through this project.