Celebrity Quiz

The celebrity quiz is designed to be fully interactive, utilsing event listeners to create a image flip function which reveals a portion of a celebrity with each click. Each click then reduces the number of points which can be won in that particular round. The built in object, Math allows random selection/ order of questions with sound effects used to make the quiz engaging. It is designed to be responsive on multiple devices with a focus on simple, linear navigation. I chose this project mainly as a demonstration of the flexibility and range that Javascript allows. The main aim of the project is to be a stimulating and engaging quiz.

Please see the final project here.

Contents

• Goals and Target Audience
• User Experience
  • Design
  • Colours
  • Type Face
• Technologies Used
  • Languages Used
  • Other Technology Used
• Features
  • Existing Features
    • Home Page
    • Quiz Page
    • Quiz End Page
  • Features to Implement
• Testing
  • Validation of Code
  • Site Testing
  • Lighthouse
  • Solved Bugs
  • Unsolved Bugs
• Deployment
• Credits
  • Content
  • Media
  • Other Contributions

Goals and Target Audience

The main aim of this quiz is to be fun and engaging, testing the knowledge of the user in being able to recognise celebrities off small portions of their face. Celebrity quizes have proven to have a wide audience with the buzzfeed craze and constant updates on news sites about celebrities and their lives. People are fascinated with them. This quiz is therefore designed to have a wide reach and be appealing to new users with 38 potential questions but also to repeat users as the array of questions and images is set up to be easily updated, changed or added to making new questions easy to place into the quiz and the removal of old questions just as simple. Once deployed the questions would be updated each week to keep the game fresh.

Aside from attracting and engaging a wide audience the project goal is really to display the abilities Javascript allows you to offer to a site. This project utilises for loops, event listeners, push(), splice(), Math.random(), updating inner HTML, local storage and nested ifs / functions as well as many other items to create an engaging quiz.

User Experience

The overall aim for this project was to build an interactive and engaging quiz which could be enjoyed by anyone with no overall target audience other than celebrity fans. This target demographic is wide reaching and diverse and the quiz is designed so that questions can easily be added to expand the quiz. This enables it to remain interesting to both new and return users.

Design

Colours

The color scheme is uniform throughout the quiz using hex #234E70 for the blue background with hex #FBF8BE yellow/ cream for the font color. Finally a complimentary navy was chosen for the quiz buttons (hex #0c1a25)

The background colour does not distract from the main features of the quiz and the font colour is easily read as it nicely contrasts with the background.

return to contents

Type Face

Throughout the site Roboto Slab has been used. It's an easy to read, neat font which doesn't distract from the overall appearance of the site.

In case Roboto Slab isn't supported in the browser sans serif is available as a backup. As with Roboto this is an easy to read font which is widely accessible on browsers so should always be available making it an ideal backup font.

return to contents

Technologies Used

Languages Used

• HTML
• CSS
• JavaScript

Other Technology Used

• Font awesome was used for icons held in the home buttons, and the trophy on the leaderboard page.
• am i responsive was used to assess the responsiveness of the site.
• Shields.io was used to create the shields used at the top of this readme.

return to contents

Features

Existing Features

Home Page

• Heading and Username
  • The opening page immediately welcomes the user and lets them know the premise of the site, a celebrity quiz.
  • The site automatically focuses on the username text box preventing the user from having to click into the box. This makes the site easier to use and removes a potentially annoying step for the user.

• If the user does not enter a username or their username is two characters or less when they click the "enter quiz button an alert will appear asking for a username over two characters

• The username is then stored locally to be displayed on the final page of the quiz, congratulating the user on finishing. This adds value as it adds a personal touch to the congratulations at the end of the quiz. A friendly vibe along with a fun quiz will invite further visits.

return to contents

• Button Hovering
  • When the cursor hovers over a button is increases in size by 3% and gains a slight shadow effect over 300 milliseconds. This adds value with an extra level of interactivity for the user.

return to contents

• Instructions
  • The instructions button on the index page is easily visible and as a button the user should intuitively know to click the button to get access to the information
  • Once clicked the instructions button disappears and a box with informative guide as to how the quiz works is revealed. This box can be clicked for the instructions button to reappear. This keeps the index page neat and simple.

return to contents

Quiz Page

• The top row of the quiz opening page keeps a uniform, clear title available for the user to see. This is followed by their current score, the points available to win in that round and the progress bar
  • The points to win reduces with each part of the celebrity image that is revealed. 40 is available with no clues, the user risks getting 0 if they guess at the stage. 20 points are available with a single section of the celebs face available to see, 10 points for two sections and so on.
  • The progress bar indicates how many questions are available before the end of the quiz by filling up with each question answered.

• The central section of the quiz
  • Initially the user is presented with a selection of four answers and no celebrity image. The image quickly lets the user know what to do and looks nice on opening the quiz page. Once the user clicks an area of the image that portion of the celebrity image is revealed

The below shows before the user clicks

The below shows after a single click

The user is then able to either guess who the image is of or click another section of the image to reveal more of the celebrity.

If they guess who is shown correctly the image flashes green and if the user has sound allowed they will hear applause, the points available will be added to the total score and a new question will be loaded. If incorrect the answer they selected will flash red and a sad horn noise will be heard if they have sound allowed, they will score 0 for that round. This adds value to the user with positive affirmation if they get the answer correct. The trumpet is slightly humerous if they get the wrong answer so they will not feel too bad about it.

The celebrity images are pulled out of an array at random so the user cannot play through the quiz a second time and know the answers without clicking to reveal the celebrity image. In addition only 5 of a total of 38 questions are asked each time the user takes the quiz which means the user is unlikely to ever experience the same questions in the same order.

• Bottom section of the quiz page. This section contains three features:
  • The first is the instuctions again if the user did not check on the first page or forgets how the game works. When clicked the text disappears and is replaced by a box with instructions in. If this box is clicked it disappears and is replaced with the original text.
  • The second feature allows the user to toggle sound effects on or off and adds value to the user if they want to listen to music or other sounds while playing the quiz without the quiz noises playing.
  • The third feature is the small home button which allows the user to return to the main home page at any point. When clicked an alert appears asking if the user is sure they want to be navigated away from the quiz-page. If ok is selected they return to the home page, if cancel then the user remains on the quiz page which prevents accidental clicks spoiling the users score.

The below shows the section when neither feature has been clicked

The below shows the section when both features have been clicked

The below shows the small home button.

The below shows the result of clicking the small home button.

return to contents

Quiz End Page

• Once the user has completed the quiz they are brought to the end of quiz page. Here the user is congratulated on finishing, their username is displayed along with their score and a comment under the score which is dependant on the score itself. Over 80 it says "Wow, you really know your celebs", between 79 and 30 points it says "Not bad. You recognised someone..." ad under 30 it says "It's ok, celebs are not your thing". This adds value to the user with positive affirmation, using their name to make them feel welcome and then letting them know their score.

From here the user can play again, go to the home page or check their highscores.

Highscores Page

The highscores of the user are presented here, the below image shows only one as it has only been played through once. If played successive times more scores would appear up to a maximum of 5. Once the user has played through more than 5 times only the top 5 scores would be shown as the high scores array uses a splice to remove the lowest scores until only 5 high scores remain.

Highscores can only be seen once the quiz has been played through once and if user accesses this page before having played through the game the "play again" button is not visible. This prevents them being able to play the game without first inputting a username through the index.html page.

return to contents

array

The question array has been linked to the images with a 'name' attribute making the images associated with the questions easy to find if they were to be deleted.

Features left to Implement

Key improvements

• It would be good to have a leaderboard rather than a highscores list allowing the user to see how they performed vs other users of the quiz. The highscores list could also show usernames against it incase two different users were using playing the quiz on the same computer.

Extra questions should be added to keep the quiz interesting and allow multiple play throughs without seeing the same celeb. Around 100 questions would probably offer a significantly improved user experience over the existing 38 questions. However, the array has been set up to allow you to easily add and remove images and questions. This means return users can get a positive experience if the quiz were deployed and then the questions updated each week, somewhat like how wordle is updated everyday.

return to contents

Testing

Validation of Code

The Celebrity Quiz has been extensively tested. The code has been run through the W3C html Validator and W3C CSS validator with no errors. All pages returned the image below:

The CSS code returned the response below:

The exception is the quiz-end.html page which received two warnings for empty headings however, these are filled by the javascript running upon the page opening. If Javascript is not working the noscript would run telling the user this. As a result these warnings can be disregarded.

JS Validator was used to ensure there were no syntax errors or missing semi colons in the Javascript code. There were no error is in the code but there were 43 warnings which all related to "let", 'const', template literals and arrow function syntax only being available in ES6 or "Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. (randomNumber, pointsToWin, points)".

The metrics read that, for the script quiz.js:

There are 30 functions in this file.

Function with the largest signature take 2 arguments, while the median is 0.

Largest function has 23 statements in it, while the median is 4.

The most complex function has a cyclomatic complexity value of 9 while the median is 1.

The metrics read that, for the script array.js said nothing as it is only an array.

return to contents

Site Testing

The below references "all features are functional". This accounts for the following:

Across all pages

• headings, buttons, images and fonts are responsive to screen size.
• The favicon displays correctly

index.html

• Username field does not allow the user to access the quiz without entering a username over 2 characters with none of the characters being spaces. Once clicked with a username over 2 characters the user is taken to the quiz page (quiz-page.html) and the username is stored on local storage to be displayed at the quiz-end page

• The highscores button takes you to the highscores page (highscores.html)

• Instructions button can be clicked to reveal instructions on how to play the game and once clicked the instructions button disapears. If these instructions are themselves clicked they disappear and the instructions button re-appears.

Quiz Page

• The score correctly adds the points available to win each round
• The "points to win" reduces with each successive section of the celebrity image clicked excluding the first click which is free. This allows the user to score either 20, 10, 5 or 2 points. Points are not reduced if the same section of the image is clicked twice.
• The progress bar fills up with each successive answer selected and after 5 questions are answered the bar appears full. On starting the quiz the bar appears empty. The progress bar disapears entiely on screen sizes with a width below 550 pixels
• clicking each section of the "click to reveal" image reveals another section of the celebrity image to a maxmimum of four. The celebrity image is revealed in the correct order i.e. eyes do not appear below the nose or chin.
• Hovering over the answers causes them to increase in size and produce a shadow. When selected if the answer if correct it appears green, if incorrect it appears red. If the sound is enabled a correct answer gives applause, if incorrect a sad horn noise is played.
• "Click for Instructions" can be clicked to reveal instructions on how to play the game and once clicked the instructions button disappears. If these instructions are themselves clicked they disappear and the instructions button re-appears.
• On loading the image of a speaker shows that sound is muted and sound will not play regardless of the user getting a correct or incorrect answer. If clicked the image changes to a speaker producing sound and answers selected will produce one of two sounds mentioned above.
• Once five answers have been given the user is taken to the quiz end page (quiz-end.html)

Quiz End

• The users entered username is displayed and they are congratulated on finishing. The score is given and if they score more than 80 they see the message "Wow, you really know your celebs". If they score between 79 and 30 they see the message "Not bad. You recognised someone..." and anything below 30 "It's ok, celebs are not your thing"

• The home button takes the user to the home page

• play again takes the user to the quiz-page (quiz-page.html) and their username remains the same.

• The highscores button takes the user to the highscores tab "highscores.html"

Highscores tab

• The home button takes you to the home page (index.html)
• Highscores can be viewed at anypoint but if the user has not played through the quiz at least once the "play again" button is not visible.
• Upon accessing the page If the user has played through the quiz at least once a scoreboard is produced. If the user has played through more than once the scores are in order of largest to smallest with largest being at the top. A maximum of 5 top scores can be shown.

return to contents

Browser Testing

Laptop Computer

• Chrome

  • Thoroughly tested and all features are functional

• Mozilla Firefox

  • Thoroughly tested and all features are functional

• Microsoft Edge

  • Thoroughly tested and all features are functional

• Internet Explorer

  • Internet explorer does not support the JS script and the click to enter button cannot be clicked so the quiz is unavailable on this browser. However, as this has been replaced with Microsoft Edge which does support all features of the quiz this should not be an issue.

return to contents

Mobile Phone

• Chrome

  • Thoroughly tested and all features are functional

• Mozilla Firefox

  • Thoroughly tested and all features are functional

The site responsiveness was tested and found to be suitable on the following devices:

• Galaxy S5
• Pixel 2 XL
• Iphone 5 SE
• Iphone 6/7/8
• Iphone 6/7/8 Plus
• Iphone X
• iPad
• iPad Pro

return to contents

Lighthouse

The site was tested using DevTools Lighthouse feature. Results below:

Desktop Site:

Mobile site:

Best practices could be improved for both by switching 7 items from HTTP/1.1 to HTTP/2. As the score was 93 which is considered good I left the code as is.

Solved Bugs

1. Username

   • A username over two charachters is required to play the quiz. However spaces were originally considered a charachter and so a username could just be spaces or a single letter and space etc. to solve this I found the below on stack overflow could be used with an IF statement to check the length of the username entered excluding spaces.
   
   
   "username.replace(/ /g, '')"
   • When the quiz has been completed the users score is added to local storage. Upon accessing the highscores page the function highScores is run which adds the score to the highscores array and creates an ordered list. It was found that if the user visited the home page and then went back to the highscores list the score would be added twice. If they went back to the homepage again and then returned to the highscores page again the score would be added a third time. Essentially the score was being re-added each time the highScores function was called, To remove this issue the score is only added if over 0 and once the function highScore is called the local storage was cleared using the code below:
   
   
   localStorage.clear()
   
   This produced a username issue as the username was stored on local storage and so if the user used the "play again" instead of going through the home page and re-entering the username the username would be cleared. This meant that upon completing the quiz a second time the message to the user would read "null, your final score id:". To prevent this the localStorage.clear() was changed to remove only the users score on localStorage using the code below:
   
   localStorage.removeItem('score')
   
   

   • If the user went from index.html to the highscore page using the highscores button the option to play again was there which meant the user could play through the quiz without setting a username. To fix this issue upon loading the highscores page playAgain() function is called. This checks to see if the highScores array is equal to or greater than one which is used as an indicator for wether or not the quiz has been played through at least once. If the array length is zero it is taken that the quiz has not been played through and the "play again" button's diplay is set to none preventing the user being able to use this option.

     return to contents

2. Celebrity Image

• Once the quiz-page (quiz-page.html) is loaded the celebrity image is 'hidden' with another image that says "click to flip" visible. Once a section has been clicked the function reducePointsToWin() is called which essentially halves the available points to win (note the first section being revealed does not call reducePointsToWin() and is 'free'). However, if the same section of the image was clicked multiple times the function reducePointsToWin() would keep being called which meant you could reduce the points to win to well below 1 point. To prevent this from happening a new function called preventDoubleClick(event) was created which checks how many times the section of the image has been clicked and if it is greater than 1 the function reducePointsToWin() is not called. This increased the cyclomatic complexity of the code due to the increased number of if statements however it is necessary for the game to function as intended.

• The celebrity image displayed is actually an image split into four equal sized images of 400px width by 100px height stacked on top of each other to create a full image (easily understood looking at the image below). When first loaded the images appeared as below which does not look good at all. This was fixed through research on stack overflow where I found that the gap below each image is actually to allow the portion of font that goes below the line space to exist. For example lower case 'g' has a portion of the letter below the line the rest of the text sits on. By reducing font size to 0 this gap was no longer required and the images stacked neatly. The actual code used was "font-size: 0;" in the CSS style sheet.

return to contents

3. Quiz Answers

• When the user selected an answer a timeout function is called before the new questions is loaded. It was possible for the user to use the window of time provided by the timeout function to click more than once on the correct answer to keep getting the points to win over and over again thus pushing their points way over the total possible. To prevent this the number of times the user has clicked on the answer is counted with the variable 'qclicks' which increases by one for each click. The answer is only checked and points won if the variable qclicks is equal to 1. Once the function loadQuestion() is run the qclicks is reset to 0.

• The quiz answers are generated and an event listener applied to them so they can be clicked and the answer checked. The event listener used was originally inside the loadquestion() function which meant each time the function was called the event listener would increase in the number of times it was generated. So, clicking the first time would produce a single event, clicking the second time would generate two events and this continued and grew with each successive click. To fix this I had to use the tutoring service provided by code institute and found from their advice that I needed to move the event listener to outside of the function it was in to prevent the loop issue.

  return to contents

4. Favicon

• Once the site was deployed the favicon chosen no longer worked, instead a 404 error was received. To fix this I had to use stack overflow and found that the code below needed to be added to the head element of my HTML code.

[return to contents](<#contents>)

5. Highscore

• When the user finishes the quiz they can view their highscore. If they have completed the quiz more than once they would see a list of their highscores up to a maximum of 5. There were multiple bugs in the development of this process:

  • When first deployed the system of creating the highscores board did not work on Chrome because the users score was being pushed into the array (highScores) on local storage as an integer and arrays on local storage only accepts strings. As a result the score has to be pushed as a string through the change below where "score" is the score of the users current round:

      highScores.push(score);
    
      had to become:
    
      highScores.push(JSON.parse(score));
    
      "JSON.parse" passes the variable as a string. 
    

  • As stated above the array on local storage which held highscores (highScores) was an array of strings. This needed to be sorted highest to lowest in order to make sense as a highscores list but also to only show the users top 5 scores. This did not work as intended as the highscores list could not simply be ordered using highScores.sort(). Instead the array had to first be converted to a list of numbers using the code below:

    highScores = highScores.map(Number)

    Next the array was ordered using the code below:

    highScores.sort(function(a, b){return a - b})

    which produced a list which actually ran from lowest to highest. Finally the .reverse() function was used to reverse the order of the list from highest to lowest:

    highScores.sort(function(a, b){return a - b}).reverse()

  return to contents

unsolved bugs

• On one occassion when the image was clicked it did not flip but no error was given in the console and I repeatedly tested the site and never saw this again. As a result I have had to believe this is a one off random occurrence as I cannot make it happen again.

Deployment

Steps for Deployment

The following steps can be followed to deploy this project on Github pages:

1. In the GitHub repository, navigate to the Settings tab
2. From the source section drop-down menu, select the main Branch
3. Once the main branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

return to contents

Steps to Clone the Repository

To clone the repository in order to be able to make changes to the project without effecting the original repository please follow the steps below:

1. Open Github and locate the repository you wish to copy
2. Above the list of files click "code"
3. To clone the repository using HTTPS, under "clone with HTTPS", click the copy icon. return to contents

4. Open Git Bash
5. Change the current working directory to the location where you want the cloned directory
6. Type git clone and then paste the URL you copied earlier
7. Press enter to create your local clone

return to contents

Credits

Content

Javascript

• The concept of the flipping of an image was taken from the youtube tutorial available here starting at 1:55 though the actual code used is not the same.

• The concept of the progress bar seen on the quiz page was taken from here though once again the code is different the idea of having a div with a width of 0% within another div element was taken from the link above.

• I used the following link to learn about the use of local storage. It is a complete guide to local storage.

return to contents

CSS

• On the CSS styling sheet I first set a general rule across all sheets that font size is 62.5% (see line 2 of style.css). This makes 1 rem equal to 10px instead of 16 which is easier to work with. I took that idea from stack overflow, the link is available here

• I had not worked with flexbox before but wanted to employ it for this project in order to become familiar with it. Although available as part of the code institute course I used the site (link here) to learn how it worked and could be utilised for this project.

• The methodology for hovering over buttons to make them increase in size and add a shadow was taken from here

return to contents

Other

• The icons used were taken from font awesome.
• I converted an emoji of a trophy into the favicon.

return to contents

Media

• The applause noise when a user gets an answer correct was taken from here
• The sad horn noise when a user gets an answer wrong was taken from here

Images from Wikimedia Commons

All images below are from Wikimedia Commons. The follow this license. All images have been resized to 400px by 400px with cropping where required to create a square required for the game.

Beyonce

Christian Bale

Elija Wood

Lea Seydoux

Nichola Cage

Brad Pitt

Jo Brand

Wesley Snipes

Chris Rock

Courtney Cox

David Schwimmer

Halle Berry

Jay Z

Matthew Perry

Michelle Obama

Orlando Bloom

Buzz Aldrin

Dwayne Johnson

Emelia clarke

George Michael

Gwendoline Christie

Harry Kane

Jackie Chan

Josh Brolin

Mark Zuckerberg

Mike Tyson

Aubameyang

Ringo Starr

Stan Lee

Tommy Lee Jones

Vin Diesel

return to contents

Images from Other sources

All images below from Flickr follow this license. All images have been resized to 400px by 400px with cropping where required to create a square required for the game.

Danny Trejo

Mahershala Ali

Viggo Mortensen

Will Smith

All images below from Wikipedia follow the license below the link. All images have been resized to 400px by 400px with cropping where required to create a square required for the game.

Donald Sutherland

https://creativecommons.org/licenses/by-sa/3.0/

Eddie Murphy

https://creativecommons.org/licenses/by/2.0/

Joaquin Phoenix

https://creativecommons.org/licenses/by-sa/3.0/

return to contents

Other Contributions

I would like to take this time to thank my Mentor, Precious Liege for his help throughout this project.

return to contents

Other Notes

The git commits at the start of this project are simple as my feedback from my first project was that they were too long and I was marked down for it, getting a pass instead of a merit. My project 1 was then remarked to a merit and a note against the git commits that they should be shorter but were nicely descriptive. Unfortunately this left it too late to change my commit messages for this project, which may seem a little simple at the start.