This website has a target audience of users who want to play a fun, interactive multiple choice quiz during the Christmas period. The aim of the website is to get users into the Christmas spirit whilst also testing their knowledge of various Christmas foods from around the world.

The key goal of the project from a development perspective is to demonstrate knowledge of how to produce a user friendly, responsive and interactive quiz using predominantly JavaScript, but supported with HTML and CSS.

Christmas Food Quiz

• User Experience (UX)
  • User Stories
• Design
  • Wireframes
  • Colour Scheme
  • Typography
• Technologies Used
• Testing
• Current Features
• Future Features
• Deployment
  • Deploying
  • Forking
  • Cloning
• Credits
  • Code
  • Content
  • Media
  • Design
  • Acknowledgements

• To quickly identify the purpose of the site as a Christmas Food Quiz.
• To easily access rules on how to play the game and easily exit the rules without disrupting the game.
• To exit the game at any point and, when finished, to be able to try again.
• To quickly get feedback on how I am performing (through the scoring system).
• If I get a wrong answer, to be able to see what is the correct answer.
• To see my final score and get feedback on whether this is a good score.
• To have fun playing the game and feel a positive Christmas spirit having played!

Wireframes

I used Balsamiq to create wireframes for the various pages in the site. The quiz was planned and eventually designed with mobile first in mind with a layout that wouldn't require any scrolling or complex navigation. The wireframes reflect a home page, a set of rules, the questions and then a results screen which is dependent on the user's final score.

Home screen

Rules screen

Questions screen

Pass result screen

Fail result screen

Home screen

Rules screen

Questions screen

Pass result screen

Fail result screen

Colour Scheme

By using the Coolors website, I was able to select a colour palette that would be suitable for all users and visually appealing. The scheme contains warm and inviting colours which are traditionally associated with Christmas, particularly #08415C and #CC2936. #6B818C was useful for providing user feedback on button hovers. These colours work well together to immerse the user in the game, strengthening that association with Christmas.

Typography

Google Fonts was used to select a blend of fonts which would compliment each other and be accessible for all. Caveat was used for all headers and content text. This font was chosen as it provides a classical, 'Christmassy' feeling to help immerse the reader in the quiz.

• HTML5 - HTML5 used to generate the site structure.

• CSS3 - CSS3 used to implement styling for the quiz.

• JavaScript - JavaScript used for game functions and logic.

• GitHub - GitHub was used to store, manage, track and control code changes for the quiz.

• Gitpod - Gitpod was used for website deployment.

• Balsamiq - Balsamiq was used to generate initial wireframes for the project.

• VSCode - VSCode was used to build and edit the source-code for the quiz.

For a detailed breakdown of testing, please see Testing file.

On loading the quiz, the user is presented with a full page background of Christmas foods and items. This is designed to immerse the user immediately in the feel of the game. A short welcome message is also present with a start button that enables the user to immediately navigate to the quiz (once they have seen the rules). There are no other distracting buttons or items on the screen in order to make the user journey as seamless as possible.

Upon clicking the previous 'start quiz' button, the user is taken to a rules popup. This is designed to quickly familiarise the user with the mechanics of the game and not be confused once the game commences. The background is blurred out to provide further focus for the user. At this point, buttons are available to either start the quiz or return to the home screen if necessary.

Forming the core of the quiz, the user is immediately presented with a question and four clickable multiple choice option answers, a relevant Christmas food image, a countdown timer, a scoring counter and navigation options.

Questions

The user is shown one question and the question number from an array of questions. Above the question, the question number updates when the user moves on to the next question.

Countdown Timer

To provide some fun pressure when answering the questions, the user is given 20 seconds in the form of a countdown timer to answer the questions.

Once the clock reaches zero and if the user hasn't selected any options, the options will be disabled and theu will be given a score of zero. The user is still able to exit the quiz or go on to the next question after this if they want.

Multiple choice options

As mentioned above, if the user doesn't select an answer within the timeframe, the four answer options are greyed out. If they select a correct answer, this option turns green and they can move forwards:

If the user select the wrong option, this selection turns red and the correct answer is shown in green. Once this happens, the user is able to select next to move forwards.

Scoring system

To provide the user with instant feedback on how they are getting on, there is a scoring system which is displayed and updated for every question. If the user gets the answer correct, they are awarded 10 points, which is which displayed at the bottom of the question area.

Navigation

The user is able to click exit upon entering the question screen, but they are unable to click next until they select an answer option or the timer runs out.

Fail result

If the user score fewer than 100 points (10 correct questions out of 20), they will be presented with the fail screen. This is intended to be light hearted and presents the user with a consoling message and also a picture of some sad people around the Christmas table!

Pass result

If the user score more than 100 points, (11 or more questions correct out of 20), they will be presented with a pass screen. Once again, this is intended to be fun and the user is congratulated on their score and shown a picture of some VERY happy people around the Christmas table!

Results screen navigation

Once the user is presented with either results screen, they may immediately exit the quiz and return to the home screen or try again which will take them to the start of the quiz (after the rules screen). The intention of this is to give the user choice and the ability to dive back in to the quiz right away if they want.

• Random ordering of the questions to provide more variety on repeated playthroughs.
• Implementation of a leaderboard so users can see how they compare to their peers.
• Use of music to further immerse the user into the Christmas Quiz.

The site was deployed to GitHub pages. The steps to deploy a site are as follows:

• In the GitHub repository, navigate to the Settings tab.
• Once in Settings, navigate to the Pages tab down the side menu.
• Under Source, select the branch to master, then click save.
• Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate a successful deployment.
• The GitHub repository live link is here - Christmas Food Quiz

A copy of the GitHub Repository can be made by forking the GitHub account. This copy can be viewed and changes can be made to the copy without affecting the original repository. Take the following steps to fork the repository:

• Log in to GitHub and locate the repository.
• On the right hand side of the page inline with the repository name is a button called 'Fork', click on the button to create a copy of the original repository in your GitHub Account.

The method from cloning a project from GitHub is below:

• Under the repository’s name, click on the Code tab.
• In the Clone with HTTPS section, click on the clipboard icon to copy the given URL.
• In your IDE of choice, open Git Bash.
• Change the current working directory to the location where you want the cloned directory to be made.
• Type git clone, and then paste the URL copied from GitHub.
• Press Enter and the local clone will be created.

• Code for displaying the quiz questions, keeping score and displaying the quiz results was adapted from an article by Yaphi Berhanu and James Hibbard on SitePoint
• Code on how to create a JavaScript timer was adapted from Stack Overflow

• Content for the quiz questions was adapted from the Best Quiz Questions website.
• Tutorials on how to create a quiz game with JavaScript were found on Youtube, such as Web Dev Simplified and Coding Nepal.
• Information on hiding and showing divs was adapted from W3Schools.
• The favicon was created courtesy of https://favicon.io/
• Guide on how to insert tables into markdown files used from Markdown Tables Generator

• Balsamiq - was used to generate the wireframes for the project.
• The colour palette for the site was chosen with accessibility in mind from the Coolors site.
• The following fonts used throughout the site and were imported from Google Fonts - Caveat.

• Photos used were either from the Pexels website.
• All of the question images were compressed using Convertio

My mentor, Jack Wachira, for his continuous helpful feedback. I would like to thank the Slack community and all at the Code Institute for their help and support. Thanks also go to my friends and family for providing feedback and help with the user testing cases.