‘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
Feature | Test | Outcome |
---|---|---|
Let's Dance button | Play button to link to game | Pass |
Feature | Test | Outcome |
---|---|---|
Question | Question appears | Pass |
Question | New question to generate each time a question is answered | Pass |
Multiple Choice Answers | Answers to highlight when hovered over | Pass |
Multiple Choice Answers | Answers to highlight green if correct and red if incorrect | Pass |
Next question | Next question to skip current question | Pass |
Question counter | Question counter to update in real-time | Pass |
The Music Quiz | The Music Quiz button takes the user back to the landing page | Pass |
Feature | Test | Outcome |
---|---|---|
Score update | Users locally stored score to be displayed | Pass |
Back to quiz button | Back to quiz button takes the user back to the first question | Pass |
Check Answers button | Check Answers button takes the user to answer bank | Pass |
Feedback button | Feedback button takes the user to Feedback page | Pass |
Hover | All buttons have hover effect | Pass |
The Music Quiz | The Music Quiz button takes the user back to the landing page | Pass |
Feature | Test | Outcome |
---|---|---|
Answerbank | All correct answers are displayed correctly | Pass |
Back to quiz button | Back to quiz button takes the user back to the first question | Pass |
Feedback button | Feedback button takes the user to Feedback page | Pass |
Hover | All buttons have hover effect | Pass |
The Music Quiz | The Music Quiz button takes the user back to the landing page | Pass |
Feature | Test | Outcome |
---|---|---|
Form | Form to require users to submit all required information | Pass |
Form | Form to accurately submit all data to form dump | Pass |
Send button | Send button sends data to form dump | Pass |
Back to quiz button | Back to quiz button takes the user back to the first question | Pass |
The Music Quiz | The Music Quiz button takes the user back to the landing page | Pass |
Feature | Test | Outcome |
---|---|---|
Footer | Footer to stay stuck at bottom of page | Pass |
Social media links | Icons to highlight when hovered over | Pass |
Social media links | Links to open in a new page when clicked on | Pass |
Device | Test | Outcome |
---|---|---|
Firefox, Google Chrome, Safari | responsive with no functionality issues | Pass |
Chrome developer tools | responsive with no functionality issues | Pass |
Firefox developer tools | responsive with no functionality issues | Pass |
Device | Test | Outcome |
---|---|---|
Samsung s21 | responsive with no functionality issues | Pass |
Ipad (7th Generation) | responsive with no functionality issues | Pass |
iPhone 12 | responsive with no functionality issues | Pass |
Huawei p30 | responsive with no functionality issues | Pass |
Huawei laptop | responsive with no functionality issues | Pass |
W3C Validator was used to check for errors within my HTML code. The following errors were presented.
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.