Festive Quiz Game | Christmas 2023

Click for live view

Table of Contents

About the project

Festive Quiz Game is an interactive website that caters to users who enjoy learning more about the Christmas holiday. The website is created with the intention of bringing joy, merriment, and a sprinkle of festive magic into the digital world. Its aim is to allow users to fully immerse themselves in the Christmas spirit through a specially curated Christmas Fun Quiz. The purpose of the website is to provide users with a way to take a break from their daily routine. The quiz on the website is an ideal way for users to unwind, relax, and refresh their minds during the holiday season. It offers users a chance to test their knowledge of Christmas traditions, history, and pop culture in a fun, interactive, and enjoyable way.

Objectives

• The main goal of the player is to assist Santa in delivering gifts to children from the North Pole by answering Christmas-related questions. For every correct answer, Santa moves closer to his final destination. The quiz consists of three levels of difficulty - Easy, Medium, and Hard. Each level has a different number of attempts, and the user will experience a unique end animation when they successfully complete each level.

Target audience

The Festive Quiz Game is designed and targeted for users who want to refresh their minds and get into the Christmas spirit. Whether they are on the go or have some free time, this game is a great way to unwind from their usual busy routine and enjoy the holiday season. It's perfect for those who want to take a break and have some fun while celebrating Christmas and its traditions.

It is designed for everyone who loves to celebrate Christmas and its traditions, the game is made available and accessible at users' fingertips, wherever they go. It helps users have the feeling that it’s time to get into the Christmas spirit and have some fun!

By carefully considering the needs of the users for Christmas, the team crafted the website that boasts a visually striking design, sure to captivate and entice visitors to keep having fun interacting with the website.

Initial Concept

Wireframes

• The design of the website was a collaborative effort from the team assigned to build it. Different ideas were suggested on where each content should be placed on the page. As a result, the team decided to have different designs, which may have subtle changes as the building progresses.

  Below are some images of the wireframes:

• Homepage wireframe

  

• Game area wireframe option 1.

  

• Game area wireframe option 2.

  

• Game area wireframe option 3.

  

User Experience (UX)

User Stories

• To be able to view the site on a range of device sizes.
• To facilitate simultaneous navigation for users during the quiz.
• To ensure that users experience high-performance interactivity while playing the game.

First Time Visitor Goal

• I want to find out about the Festive Quiz Game and if I can access the levels of the game.
• I want to easily navigate the site and access different parts of the game.
• I would like to know what gift is presented at the end of the game.

Returning Visitor Goal

• I want to know what improvements have been made to the game and what are the different levels.
• I want to play more to achieve more Santa gifts.

Frequent Visitor Goal

• I want to recommend the Festive Quiz Game for my loved ones to enjoy during the holidays.

Design

Color Scheme

In order for users to fully immerse themselves in the moment and the season, we have chosen colors that reflect the themes of love and harmony, as well as the festive atmosphere of Christmas. Our color palette includes a variety of shades that capture these feelings and emotions. The colors are: Venetian Red, Carmine Pink, Light Yellow, and Menthol. These colors are all reflected in the background image.

Typography

• Background

  A background image with Christmas theme was added to the webpage to give a 3D effect and make the heading area look more interactive. The homepage features an animated background theme with a woodfire effect to create a cozy and warm atmosphere of Christmas. As users might expect, they want to feel immersed in the Christmas atmosphere, so the team opted for a background that is visually appealing and gives the right impression.

• Fonts

  
  • Rubik Doodle Shadow font
  
  • Caveat font
  
  • Berkshire Swash font

  The chosen fonts for the website were imported using Google Fonts.

  After careful consideration, the team decided to use the fonts Caveat, Rubik Doodle Shadow and Berkshire Swash for the text on screens of all sizes. We believe that these fonts offer a great combination of aesthetic appeal and readability, and will help to enhance the overall user experience.

Features

Composition of the Website

The website is organized into two distinct web pages such as the Homepage and the Game Page; the Game Page is accessible through a link in the New Game Button Bar at the center of the Homepage. Users can easily navigate to the Game Difficulty Menu where there are three option bars to select a difficulty level, after selecting a difficulty level, the Topic Menu is next; In the Topic Menu, the users have access to four distinc Topics such as Christmas Trivia, Christmas Movies, Christmas Music, and Christmas Food where they have the choices to select what topic they would like to answer and have fun with; clicking on the topic bar takes the user swiftly to the Game Page. The website's structure provides a smooth and efficient user experience.

Technologies Used

• HTML | was used to build the structure of the website.

• CSS | was used to add style the website.

• JavaScript | was used to add dynamism and interactivity to the website.

• BootStrap | was used to add positioning and responsiveness to the website.

• VS Code | was used as the IDE to write, edit, merge, and push codes.

• Git | was used for the version control of the website.

• GitHub | was used to host the code of the website and for deployment.

Tools

• Pixabay | was used to get favicon for website.

• Unsplash | was used to get images for website.

• Canva | was used to edit images for website.

• Color Hunt | was used to choose colors palette for website.

• Compressor | was used to optimise images for website.

• Font Awesome | was used to select icons for website.

• I Am Responsive | was used to check website responsiveness on all devices.

• Tiny | was used to optimise images for website.

• Color Name | was used to detect color names.

• MS Word | used to correct the grammar.

Testing

See testing documentation here

Deployment

Github Pages

Fork a Repository

1. Find the repository you want to fork
2. Find the 'Fork' button to create a new fork
3. When creating the fork, the name and description can be changed
4. Click 'Create fork'

Clone a Repository

1. Go to the repository you want to clone
2. Click 'code' and copy the URL
3. Open a new workspace in your IDE
4. In a new terminal use the command '$ git clone [your-fork-repository-url]'
5. Create an Upstream branch to be able to sync with main version of the project
6. Use command '$ git remote add upstream [main-repository-url]'
7. To sync, use commands '$ git fetch upstream' and '$ git merge upstream/main'

Deploy

1. Go to settings in the Github repository
2. Find 'Pages' in the list on the left side of the page
3. Under the section 'Source', choose 'Deploy from Branch'
4. Under 'Branch', choose 'Main' and then save
5. The link to the website will appear at the top of this page once it is ready. It may take a couple of minutes.

Credits

• Theme Colors & Page animations

  Some of the content of the webpage such as fireworks were inspired by Alvaro Montoro.

  The animated snowflakes of the webpages were inspired by Denis Seleznev.

  Other animated and interactive contents of the webpages were inspired by Eddie Lin.

• Background and Music

  The 3D animated background contents of the webpages were inspired by FREEPIK.

  The Background Image contents of the webpages were inspired by PEXELS.

  The interactive music contents of the webpages were inspired by [Eddie Lin]().

• Festive Quiz Game Website Building Team

  This website is a masterpiece, meticulously crafted and designed by a team of highly skilled experienced software developers listed below:

  • Pavlo Myskov | Srum Master - Software Developer | LinkedIn
  • Aldwin Arriola | Coder - Software Developer | LinkedIn
  • Peter Coates | Coder - Software Developer | LinkedIn
  • Andreas Parides | Coder - Software Developer | LinkedIn
  • Emmanuel Oluwadare | Coder - Software Developer | LinkedIn
  • Jo Healy | Coder - Software Developer | LinkedIn
  • Rohina Usman | Coder - Software Developer | LinkedIn