Classical Music Geeks Quiz

Welcome to the Classical Music Geeks Quiz, your go-to challenge for testing and expanding your classical music knowledge! With up to 10 questions per session, multiple difficulty modes, and instant feedback on your answers, this quiz is perfect for enthusiasts of all levels.

Enjoy a new set of questions every time you play and dive into the rich world of classical music—are you ready to take the challenge?

Link to deployed website: Classical Music Geeks Quiz
Link to repository: Classical-Music-Geeks-Quiz--Project-2-JavaScript

Relevant User stories

The foundation of this Web application is built on the following user stories:

1. As a user, I want to take a classical music quiz with up to 10 questions, so I can test my knowledge in a short session;
2. As a user, I want there to be multiple difficulty modes, so I can challenge myself;
3. As a user, I want to immediately see which answer is correct, so I can learn something new;
4. As a user, I want to see my score immediately after completing the quiz, so I can see how well I did;
5. As a user, I want to take the quiz again with different questions, so I can have a varied experience each time.

Wireframes

Click here to get a better view of the wireframes

Features

Start Window

1) Before user interaction

In the start page, the user will be presented with a welcome header and with a short rundown of the Quiz rules. Below the rule list, there is an input field for the username, which will be displayed in the upper left corner throughout the quiz. For the "Choose mode" button to become clickable, the entered username must contain at least 4 characters. Inputting a username and subsequently clicking on "Choose mode" will result in the mode buttons and the "Start the quiz" button to appear on the screen. The start the quiz button will at that point be disabled.

Start page before user interaction MOBILE
Start page before user interaction TABLET

2) Username input

Input username of less than 4 characters:

MOBILE view
TABLET view

Input username of at least 4 characters:

MOBILE view
TABLET view

3) Choosing a mode

The "Choose mode" button will now be displayed as "selected" and the mode menu will be expanded, displaying the three different modes. Each mode button label contains the difficulty degree and, in between brackets, the quiz length/duration expressed in number of questions. This feature adresses both the first and the second user story, in that it allows the user to select a quiz with up to 10 questions and because it presents them with three difficulty degrees. Selecting any of the modes will result in the clicked mode button being displayed as "selected" and in the "Start the quiz" button becoming clickable. The combination of selecting a mode and clicking on "Start the quiz" will trigger the start of the quiz, presenting the user with an "n" number of questions, where "n" is dictated by the chosen Mode.

Mode menu

MOBILE view
TABLET view

Choosing one of the modes

MOBILE view
TABLET view

Quiz Window

1) Questions 1 to n-1/n

The quiz window consists of the following parts:

• In the upper left corner: the entered username;
• Immediately under the username, aligned to the center: the question counter (1 to n-1/n);
• Under the question counter: question text;
• Under the question text: the four possible answers;
• In the bottom left corner: the "Next question" button. This button will be displayed but won't be clickable until the user selects an answers.

The questions and their respective possible answers are randomly chosen each time from the question pool that corresponds to the selected mode (please refer to script.js). This ensures that no two quizzes comprise the exact same questions or the exact same questions in the exact same order, allowing for a varied experience each time, according to the fifth user story. Selecting any of the answers will result in the user being provided feedback right away by means of colour coding: if the selected answer is correct, that answer will turn green and the other buttons will be disabled. If the selected answer is wrong, that answer will turn red and the correct answer will turn green, while the other two buttons will be disabled. The incorporation of this feedback system into the webapp ensures that the third user story is adressed. The "Next question" button is now clickable. Clicking on the "Next question" button will substitute the current question and its answers by another question with the corresponding possible answers.

Before user interaction:

MOBILE view
TABLET view

Selecting the right answer:

MOBILE view
TABLET view

Selecting the wrong answer:

MOBILE view
TABLET view

2) Question n/n

When the question counter hits the maximum "n", after 500ms from selecting an answer, the button "Finish" will appear in the bottom right corner instead of the "Next question" button. Clicking on "Finish" will forward the user to the End of Quiz window.

Last question, before user interaction:

MOBILE view
TABLET view

Last question, after selecting an answer

MOBILE view
TABLET view

End of Quiz Window

The End of Quiz window comprises the following elements:

• At the top: the congratulating message "You've reached the end of the Quiz!";
• A paragraph returning the score X-correct-answer/n. This feature adresses the fourth user story, for it allows the user to see right away how well they did;
• A feedback message, which will be different depending on the % correct answers (threshold of 60%);
• Two buttons at the bottom: a home button and a "Take another quiz!" button.

End of quiz page

MOBILE view
TABLET view

The home button will redirect the user to the Start Window, where no username is entered in the input field and the mode menu is collapsed. This ensures the user can go back to the very beginning, choose another username and another mode.

After clicking on the Home button:

MOBILE view
TABLET view

The Take another quiz! button will redirect the user to a modified version of the Start Window, where the rules aren't displayed, the previously entered username is still visible in the input field and all the mode buttons and Start the Quiz button are visible. This feature adresses the fifth user story too, in that it presents the user with the mode menu immediately, without the need to first go through the whole process again. It is meant for users, who don't wish to be presented with the list of rules again and who want to take another Quiz maintaining the same username. At this stage, going back to the start page is possible by refreshing the page.

After clicking on "Take another quiz!"

MOBILE view
TABLET view

Future implementations

• The possibility to create an account, where all past performances would be registered, which would allow the user to track their progress and play against other players;
• Expand the current question pools up to f.e. 100 questions per mode, to allow for even more variety in the quiz;
• Change the number of questions per mode to f.e. - respectively - 10/Easy, 20/Medium, 30/Hard. For the purpose of this project and with its evaluation in mind, I kept the maximum number of questions on the low side;
• Incorporate a timer into the quiz to add a another layer of difficulty to the quiz;
• End of Quiz page: this page could be implemented by adding social media icons (Instagram, Facebook, X) to allow the user to share their score on their social media platforms, with a CTA message that motivates other users of those platform to try out this quiz.

Testing

Please refer to TESTING.md

Deployment

• Navigate to the GitHub Repository;
• Click on the "Settings" tab on the top navigation bar;
• Click on "Pages" on the left navigation menu";
• Ensure the "Source" is set to "Deploy from a Branch";
• Ensure the "Branch" is set to "bugfix/submit-not-ignored"
• Click on "Save";

The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

Credit

Content

• Microsoft Copilot was used to create the different question pools and to put them in the right format for the JS code
• Hackr.io was consulted when building the quiz. For detailed code referencing, please refer to script.js
• Freecodecamp was consulted for the setTimeOut() function used to delay the appearance of the "Next" button, when answering the last question of the quiz;
• W3School was consulted for the "disabled" attribute in the "Start the quiz" button in the start page Attribute button disabled
• StackOverflow was consulted for the JavaScript code to remove the disabled attribute from the "Start the quiz" button in the start page JavaScript remove "disabled" attribute from HTML input

Used technologies

• Leonardo.ai was used to create the starting background image, which was further tweaked using Microsoft Copilot to match the style of the page I had in mind;
• Favicon.io was used to convert the icon created by Microsoft Copilot into a usable zip-file with the different favicons;
• HTML for website structure and different pages;
• CSS for website styling
• JavaScript for interactivity

Media

All laptop, tablet and mobile phone screenshots were taken on my own devices.