Visit the deployed site: The Quiz Arms
Test your general knowledge and get pub quiz ready!
Pub Quizzes are played all around the world, but they are especially popular in the UK. It is estimated that over half the pubs in the UK host a regular quiz night, thats roughly 23,600 pubs!
YouGov show that 98% of people surveyed have heard of a pub quiz, and are rated as the 19th most popular social activity.
During lockdowns pub quizzes remained popular - they just changed format to become virtual. This gave me the idea of creating a quiz site that would feel like a pub quiz, where users could play on their own to improve their general knowledge anywhere and at any time.
- I want to take part in a pub quiz online and improve my general knowledge. I want to be able to play at any time, anywhere.
- I want the site to be responsive to my device.
- I want the site to be easy to navigate.
- I want to be able to choose a level of difficulty that I feel is appropriate for me, based on my experience from my first visit to the site.
- I want to be able to adjust the difficulty level to keep improving my knowledge.
- I want to be able to log my high scores to see how I am performing.
As the pages of the site have a background image, I wanted to keep the colour scheme used on the site quite small so as to not overwhelm users. Red and green are very typical colours in traditional British public houses, with the red & green used for upholstery.
In my css file I have used variables to declare colours, and then used these throughout the css file. I was recently introduced to this method during a hackathon - it is a useful convention to use as it allows you to alter the colour throughout the website if you decide to update a colour, by changing the colour once in the variable.
-
I have used
#f5f5f5�as the primary and secondary colours used for the sites text. -
I have used
#292929as the overlay used over the sites background image. -
I have used
#a50c3cfor the border of the modal and to display the wrong answers. -
I have used
#047638to display the correct answer.
Google Fonts was used to import the chosen fonts for use in the site.
- For the Page Title I have used the google font Almendra. Almendra is based on a calligraphy style and I have chosen it as it looks like the type of font you would see on a pubs name sign, slightly medieval looking and grand.
- For the body of the page I have used the google font Quicksand. QuickSand is a sans-serif font which has lovely clean lines. I have chosen to use a sans-serif font for the body of the page as studies have found that sans-serif fonts are generally more legible to read on a screen.
As the website is called The Quiz Arms, I wanted to use an image for the page background of a pub to give the user the feeling that they are participating in a pub quiz.
Wireframes were created for mobile, tablet and desktop using balsamiq.
The website is comprised of a home page, a games page, a high scores page, a 404 error page & a 500 error page.
All Pages on the website are responsive and have:
-
A favicon in the browser tab.
-
The title of the site at the top of every page. This title also acts as a link back to the home page.
-
Every page will display a custom cursor when on a button. This feature is not available on mobile touch devices.
The home page of The Quiz Arms displays the sites name as a title and then a container which holds some welcome text, including alerting the users that they can navigate back to the home page at any time by clicking on the page name. Below this are three buttons, how to play, play and high scores.
The how to play button opens a modal showing the user how to play the game. The modal contains a close button which will close the modal, and show the home page again.
The play button will redirect the user to the game page to select the difficulty of their quiz and the high Scores button redirects the user to the high scores page.
The game page displays the sites name as a title. This also acts as a link back to the home page. Initially on the game page you will be shown a container with three buttons to select the difficulty of the quiz the user can choose from.
Once the user has selected their difficulty they will then be shown the quiz area. The quiz area contains the question and the 4 answer choices.
when a user selects an answer, they will then be prevented from selecting any more answers. The quiz area border and the button selected will change styles depending on whether the answer selected was correct or incorrect. If the answer selected was correct, the score counter will add 10 to the score total. When the user clicks the next button the question no counter will increase by 1. If the user selects the wrong answer, the button selected will display red, and the correct answer will display as green.
Once a user has answered the 15 questions they will be taken to the end of the game which will allow them to enter their team name and submit it to be entered onto the high scores page if it is in the top 10 scores. The submit button is disabled by default to prevent the user from submitting without a team name. This is made clear to the user as the cursor will show not allowed when hovered over the submit button.
The high scores page displays the sites name as a title. This also acts as a link back to the home page. The page then displays the high scores recorded - showing the team name a user chooses and their score. The high scores page will list the top ten scores recorded. Underneath the high scores are two buttons to allow the user to play again or be redirected to the home page.
The 404 error page displays the sites name as a title. This also acts as a link back to the home page. Within the page container there is a sorry message explaining to the user that there has been an error directing them to the page they were looking for. The user is then given a choice of three buttons to redirect them to other pages on the site, the home page, the games page and the high scores page.
The 500 error page displays the sites names as a title, which also acts as a link back to the home page. Within the container is an error message that tells the user sorry there seems to be an issue retrieving the quiz data. Two buttons for the home page and the high scores page are below. I did not add the play game button here, as a user will been directed to this page if there is an error calling the API.
In future implementations I would like to:
- Give users the option to select the amount of questions in their quiz.
- Look into making the quiz a multiplayer game, so that it could be played by teams, which would make the quiz even more like a pub quiz.
- Create a back end database to enable me to store scores which would then allow you to see how you scored against other players.
- Look further into the accessibility for people with colour blindness, perhaps by adding symbols such as a tick or cross next to the answer when they are checked.
I have been mindful during coding to ensure that the website is as accessible friendly as possible. This has been have achieved by:
- Using semantic HTML.
- Using a hover state on all buttons on the site to make it clear to the user if they are hovering over a button.
- Choosing a sans serif font for the site - these fonts are suitable for people with dyslexia.
- Ensuring that there is a sufficient colour contrast throughout the site.
As the site relies on colour to display to the user whether an answer is correct or incorrect, I was interested to see what this would look like for someone with red/green colour blindness. I used the chrome extension Web Disability Simulator to be able to see what someone with red/green colour blindness would see.
In a future implementation I think it would be a great accessibility feature to also add a symbol such as a tick or cross on the answer button to enable people who are colour blind to also be able to access the quiz easier. Each of the images below have whether they are correct/incorrect in the name. Can you tell which one is which?
HTML, CSS, Javascript
-
Balsamiq - Used to create wireframes.
-
Git - For version control.
-
Github - To save and store the files for the website.
-
GitPod - IDE used to create the site.
-
Google Fonts - To import the fonts used on the website.
-
jQuery - A JavaScript library.
-
Google Developer Tools - To troubleshoot and test features, solve issues with responsiveness and styling.
-
TinyPNG To compress images
-
Birme To resize images and convert to webp format.
-
Favicon.io To create favicon.
-
Am I Responsive? To show the website image on a range of devices.
-
Shields.io To add badges to the README
-
Open Trivia DataBase - API used for the trivia questions.
-
JSON Formatter - a google chrome extension to enable you to view JSON as raw data or parsed.
-
Web Disability Simulator - a google chrome extension that allows you to view your site as people with accessibility needs would see it.
-
Webpage Spell-Check - a google chrome extension that allows you to spell check your webpage. Used to check the site and the readme for spelling errors.
The site is deployed using GitHub Pages - The Quiz Arms.
To Deploy the site using GitHub Pages:
- Login (or signup) to Github.
- Go to the repository for this project, kera-cudmore/TheQuizArms.
- Click the settings button.
- Select pages in the left hand navigation menu.
- From the source dropdown select main branch and press save.
- The site has now been deployed, please note that this process may take a few minutes before the site goes live.
To fork the repository:
- Log in (or sign up) to Github.
- Go to the repository for this project, kera-cudmore/TheQuizArms
- Click the Fork button in the top right corner.
To clone the repository:
- Log in (or sign up) to GitHub.
- Go to the repository for this project, kera-cudmore/TheQuizArms
- Click on the code button, select whether you would like to clone with HTTPS, SSH or GitHub CLI and copy the link shown.
- Open the terminal in your code editor and change the current working directory to the location you want to use for the cloned directory.
- Type 'git clone' into the terminal and then paste the link you copied in step 3. Press enter.
Please refer to TESTING.md file for all testing carried out.
| No | Bug | How I solved the issue |
|---|---|---|
| 1 | An error was displaying in the console when next was clicked after the first question, stating that results wasn't defined. | Data was defined in the callApi(), so couldn't be accessed as it was in local scope rather than global scope. By defining data globally and then passing the data as a parameter into the getQuestion() in the nextQuestion() solved this. |
| 2 | The Questions being pulled in from the JSON have HTML entity characters that are not escaped and therefore display incorrectly with symbols in place of the correct characters.  |
After a lot of research into escaping characters, I came across a post on slack that mentioned using innerHTML rather than innerText. Once I changed the answers to innerHTML the characters are now displaying correctly. |
| 3 | I have the local storage set up to save the final score as mostRecentScore. However when completing a game and submitting the team name the score added to the high scores section would be the previous score and not the most recent score. | After a lot of research to try and find out why this was happening I went over the code again and decided to see if I changed mostRecentScore in the scoreLog to score it would make a difference. By changing this, I have solved the issue and it now pulls the most recent score achieved. |
| 4 | Players were able to select an answer which would then display whether correct or incorrect. However they could still click on the answers which meant they could click all the answers to receive the points. | I researched a way to disable the buttons and initially found that I could use answer1.disabled = true; This worked, however it added quite a bit of code, as I had to add this for each button. Further research led me to find this article which showed how to use jQuery and the class on the buttons to enable and disable them all at the same time. This then allows me to enable the buttons when a new question has been populated and once a selection has been made, the answer buttons are disabled until the user clicks next to advance onto the next question. |
| 5 | There was an issue with the data-correct not always being removed correctly from questions, which meant that incorrect answers were displaying as correct | I changed the way the data-correct attribute was removed from the answers, by using the same a for loop similar to what was used to add the data-correct attribute. I also changed the for innerText in the for loop to be innerHTML so that it was correctly reading the same as what was displayed on the button. |
| 6 | If a user selected an incorrect answer and the correct answer contained HTML entity characters (such as /&#(\d+);/g) the correct button styling would not be applied to the displayCorrectAnswer variable and a error would display in the console. This would then prevent the user from progressing in the quiz as the next button would not display for them to move on. |
I adjusted line 161 to use innerHTML rather than innerText, however the issue persisted. I looked for an answer online but struggled to find anything that would help. I then reached out to Bim Williams on Slack who is an alumni on the course and asked to run the problem past him. He suggested adding a function that would decode the HTML entity and then apply that function within line 161. The function takes the HTML entity characters and replaces them with the correct characters. I will be researching this topic further in my spare time to gain a deeper understanding of it. |
-
When viewing on screens that use touch rather than a cursor, the colour change for the answer button selected is not immediately obvious as the hover state remains on the button. If the user clicks away from the button the colour can then been seen.
-
There is a a warning displaying in the console on the live page. This error seems to be because GitHub hosted pages disable googles 3rd party cookie alternative FLoC, which then throws this error. The error doesn't affect the site in any way.
-
When friends tested the site they found that very rarely a game will get stuck on a question, and it will not populate a new question but the question no counter continues to increase. This issue only seems to be if a large number of games are played consecutively, possibly using up the questions in the API. I have not been able to replicate this issue to troubleshoot further.
-
I used this You Tube tutorial to learn how to create a modal for the how to play section.
-
As the API I used for the questions declared the correct answer and then had an array of incorrect answers, I had to find a way to shuffle the answers together so that the correct answer wouldn't always appear on the same button. Research led me to the Fisher-Yates Shuffle. Other methods of shuffling can favour some items in the array more than others, however the Fisher Yates Shuffle allows for a more even spread of probability of the answer being placed on each button. I used the following YouTube tutorial to further adapt the shuffle I had researched on W3Schools to work with the data I had.
As the JavaScript modules of the Code Institute Diploma did not cover local storage, I had to do a bit of research into this topic myself in order to set up the high scores section of my site.
-
I used this video tutorial on YouTube by James Q Quick which taught me to save the team name and score to an object, that would then be saved into an array in local storage. It also explained how to sort the items in the array into descending score order, and then to splice the array, I have used the MAX_HIGH_SCORES as my point to splice.
-
I used this video tutorial on YouTube by James Q Quick to learn how to insert the local storage into the high scores page.
All questions for my site were pulled from The Open Trivia Database using their API.
All other content for the site, such as introduction messages and instructions were written by myself.
Page background image of a pub
I would like to acknowledge the following people:
-
Adegbenga Adeye - My Code Institute Mentor.
-
Bim Williams - For being a great sounding board for me when I faced issues with moving onto the next question in the quiz, and for helping solve the issue faced with the HTML entity characters in the answer buttons.
-
Dave Horrocks - For taking the time to walk through my code with me when I was struggling with adding event listeners.
-
Emanuel Silva - For cheering me on when I was struggling with the JavaScript, and for testing the site.
-
Abi Harrison - For being a great rubber duck and helping debug, helping to test the site and for sharing her knowledge on accessibility.
-
The Code Institute Slack channel Peer Code Review - Thank you to everyone who took the time to play the quiz and look over the code.