search

Chrisfaherty / CI_HACK_T16_MQ

Music Quiz
1 stars 4 forks source link

readme

The Music Quiz

Developers: Pedro Alexandre Cristo, Christopher Faherty, Jyoti Yadav, Robert Andersson, Emidio Valeretto, Emma Hewson

This is an screenshot of the responsive design image

Live Webpage

About

The Music Quiz website has been developed to provide users the chance to play the music quizzes and learn about different types of music. This website contains quizzes based on Jazz, Rock, Pop, Classic and EDM (Electronic dance music).

Table of Contents

Project Goals

User Goals

Site Owner Goals

User Experience

Design

Colours

Colours Palete

Typography

Target Audience

User Requirements and Expectations

User Stories

First-time User

  1. As a user, I want to:
    • have an interactive, meaningful and contextual quiz.
    • view my progress, current score, and response to my answer during the quiz.
    • view the final score, an option to save the score with the user nane and list of top scores after completion of the quiz.
    • navigate using nav buttons and links easily.

Site Owner

  1. As the site owner, I would want:
    • to provide a music relevent and well instructed quiz.
    • the user to be able to see his score after each step.
    • the user should be able to navigate through all the pages easily.
    • the user learn something in regards to music.
    • the user to get feedback based on their input.

User Manual

Instructions #### Overview The Music Quiz app is for users who wish to enhance the knowledge about different type of music (Jazz, Rock, Pop, Classic, EDM) by playing interactive quizzes. Each page provides the logo at the top left corner and nav button to navigate to home page. --- #### Home page The landing page of the website welcomes the user. It provides the toggle icon at the top right corner to navigate the user to different pages of the website. The "Let's Know" nav button directly navigates the user to the quiz page by randomly selecting one of the music type. Alternatively, user can select particular type of quiz through toggle button. --- #### Quiz page The Quiz page provides user the following features: - Question with four options. - User selection is highlighted with green for right answer and red for wrong answer. - User is also provided with textual feedback on the selection. - Progress bar for progress of the quiz. - Selected music type for the quiz. - Current question number from total number of questions. - Current status of the score. - Nav button to navigate to home page. - On completion of the quiz, user is automatically navigated to Quiz End page. --- #### Quiz End page The Quiz End page provides the following features: - Option to save the quiz score by entering user name. - After saving the score along with user name, user is automatically navigated to either the trophy page or the high score page depending on user's score. - Nav button to navigate to home page. --- #### Trophy page The Trophy page provides either one of the following greeting messages: - User's detailed result with a Gold guitar icon, if the user gave all answers right. - User's detailed result with a Silver guitar icon, if the user gave nine answers right. - User's detailed result with a Bronze guitar icon, if the user gave eight answers right. --- #### High Score page The High Score page provides the following features: - Shows up to the top six high scores along with user name and icon of Silver, Bronze, and Gold guitars if any won. - Nav button to navigate to home page. ---

Back to Table Of Contents

Technical Design

Flowchart

The following flowchart sumerises the structure of the Game.

Wireframes

Following are the wireframes of The Music Quiz App:

Index Page ---- ---- ---- ---- ---- ----
Rock ---- ---- ----
Jazz ---- ---- ----
Pop ---- ---- ----
Classic ---- ---- ----
EDM ---- ---- ----
End Game ---- ---- ----
Score ---- ---- ----
Gold Trophy ---- ---- ----
Silver Trophy ---- ---- ----
Bronze Trophy ---- ---- ----

Technologies Used

Languages Used

Framework and Tools

Features

Existing Features

Home page

On the home page, the logo in the upper left corner shows the name of the website. By clicking on the 'Let's Know' button, the user can start the quiz to test his knowledge of music. Alternatively, the toggle button in the top right corner also gives the user the option to select a particular type of music quiz.

Home page image

Home page -sidebar

On the website homepage, users have access to the sidebar by clicking on the bars icon on the top right of the screen. Once opened, users can choose a quiz to play or check the scores page.

Home page image

Quiz page

The Quiz page displays the Quiz area with the first question of the quiz with four options. The result is displayed in green color with sound effects if the user clicks on the right answer and if wrong, the result is displayed in red with different sound effects. The progress of the quiz is displayed by a progress bar below the logo. At the bottom left corner, the user can see the current question count from the total number of questions and at the bottom right, the current score is displayed. User can navigate to home page by clicking on 'GO HOME' button even if he/she is in the middle of a quiz.

Quiz page image

Quiz End page

The Quiz End page shows the total score of the user and gives the user an option to save the quiz score by entering the username. The 'SAVE' button takes the user to either the high score page or the trophy page, depending on the user's score. The 'Go Home' button navigates the user to the home page.

Quiz End page image

Trophy page

The Trophy page greets the user with a message detailing the user's score and icons of the Silver, Bronze, and Gold guitars that the user won. The 'Continue' button navigates the user to the High Score page.

Trophy page image

High Score page

On the high score page, the scoreboard displays the user's score up to the top six high scores along with the user's name and icons of Silver, Bronze, and Gold guitars if any won. The 'Go Home' button navigates the user to the home page.

High score page image

Back to Table Of Contents

Testing

Validator Testing

Testing User Stories

  1. As a user, I want to have an interactive, meaningful and contextual quiz.
Feature Action Expected Results Actual Result
All listed features in the Features section provide the user with interactive, meaningful and contextual feedback based on user input. Required user input User to be provided relevant feedback based on user input Works as expected
Screenshots
Screenshots
  1. As a user, I want to view my progress, current score, and response to my answer during the quiz.
Feature Action Expected Results Actual Result
Progres status, user score, audio & visual response to user answer during the quiz Select answer to the question Progress status is shown in bar graph format and current question number out of total questions Works as expected
Screenshots
  1. As a user, I want to view the final score, an option to save the score with the user nane and list of top scores after completion of the quiz.
Feature Action Expected Results Actual Result
Show final score Completion of quiz Final score is shown Works as expected
Save score with user name Input user name and click save button Score is saved with user name Works as expected
Show list of saved high scores After completing the quiz, input user name and click save button or click on nave link 'High Scores' from the toggle bar Up to top six High scores with user name are shown Works as expected
Show trophy page for more than seven correct answers After completing the quiz, input user name and click save button Show Gold, Silver, and Bronze trophy if the user gives the right answers to 10, 9, 8 questions respectively Works as expected
Screenshots
  1. As a user, I want to navigate using nav buttons and links easily.
Feature Action Expected Results Actual Result
All nav buttons and toggle bar nav links navigate the user to the intended page of the website User click As described in feature Works as expected
Screenshots ">

Testing Site Owner

  1. As the site owner, I want to provide a music-relevant and well-instructed quiz.
Feature Action Expected Results Actual Result
Theme (Jazz, Rock, Pop, Classic, EDM) based music quizzes Click on particular quiz through toggle bar Particular quiz is displayed with the name of theme at the top right corner Works as expected
  1. As the site owner, I want the user to be able to see the progress, current score, and response to user's answer during the quiz.
Feature Action Expected Results Actual Result
Progres status, user current score board, audio & visual response to user answer during the quiz Select answer to the question Progress status is shown in bar graph format, shows current question number out of total questions and current score on the quiz page Works as expected
  1. As the owner of the site, I want the user to be able to easily navigate through all the pages.
Feature Action Expected Results Actual Result
Intractive nav buttons and links User Click on buttons and links Nav buttons and links navigate the user at respective page Works as expected
  1. As the site owner, I would want to the user learn something in regards to music
Feature Action Expected Results Actual Result
Quizzes based on different types (Jazz, Rock, Pop, Classic, EDM) of music Navigate to quiz pages Each quiz page have relevent type of musical questions Woeks as expected
  1. As the site owner, I would want to the user to get feedback based on their input.
Feature Action Expected Results Actual Result
Audio and visual response of user-selected answers, update current score and progress bar User input Response of user's particular input Works as expected

Back to Table Of Contents

Unfixed Bugs

While we were developing the game we notice two error on the console one is related to the Howler CDN library we are using to add sounds effect to the game other is related to a JS add event listener function. After I considerately mont of time spent trying to fix this bug and searching online for help unfortunately we didn't find any solution.

Home page

Home page

Game Pages

Game page

Deployment

Deploying to Github Pages

Forking the GitHub Repository

Credits

Quiz Questions

Sounds Effect and Ambience Music

Images and Graphics

Information Sources / Resources

Acknowledgements

I would like to take the opportunity to thank:

Back to Table Of Contents