This quiz is built for all Harry Potter fans to answer questions about their favorite Hogwards house to find out how well they fit in. The user can pick between the four houses which each have 10 questions. For each question answered correctly the user will receive 10 points. The Harry Potter quiz is fun and tests all Harry Potter fans.
- As a user, I want to understand what the game is about.
- As a user, I want to easily navigate through the game even on the first visit.
- As a user, I want to access the game easily.
- As a user, I want to be able to see my final result.
- As a site owner, I want to build an appealing online quiz.
- As a site owner, I want to build a quiz which is easy to navigate.
- As a site owner, I want to build a quiz which is fun for the user and keeps users attention.
Main Colour Palette (used for Background, Fonts, Buttons, etc.)
Hogwards House Colours
A simple colour palette was chosen to reflect the dark and magical character of the Harry Potter world. The background has a dark gradient and the white and light turquoise fonts stand out well and are easy to read. For the game, the colours of the four Hogwards houses were adopted to stay in the theme. However, the original yellow had to be changed to orange because of insufficient contrast.
Heading: For Heading 1, "Harry Potter" font was selected, which is very unique and directly recognized by users. This stands out beautifully as the heading.
Body: “Nunito” This font is simple, modern open and easy to read. The round cap strokes matches well with the round box design on the page.
Sourced via KindPng. & Sourced via Harry Potter Wiki.
-
The symbols of the four Hogwards houses were used as images.
-
Images of Hogwards symbols, ghosts, and students in the game were used as choices for answers.
Deviations from the original wireframe:
- On the advice of my mentor, I moved the content of the Game-End page to the Game-page. This will be displayed after all 10 questions have been completed. The idea behind this was to prevent the game-end page from being called by typing in the url bar, even though the game was not completed.
- An appealing design and an intuitive navigation and orientation on the website.
- A website which is fully responsive on all screen sizes.
- Easy access to start the game.
- The user is greeted with the logo of the Harry Potter quiz, which immediately intrigues the user and also creates a very magical look due to the box shadow. By clicking on the logo or by scrolling down the user gets to the selection of the game.
- The user can choose between one of the four houses. The player's choice is passed on to the game function by an event listener. The Hamburger stays sticky on the homepage allowing the user to navigate easily to the instructions.
- The hambuger is sticky on the homepage allowing the user to reach the navigation at any time. Once the user clicks on the hambuger icon, the navigation will slide out. On desktop it pushes the content to the right and on mobile it takes up 100% of the screen. If the side navigation was closed by clicking on the X the content will slide back to the left.
- The footer section includes links to the relevant sites which open in a new tab, when clicked.
- On the Game Page, the corresponding questions and answers are loaded according to the user's previous selection. At the top right, the corresponding house logo is loaded. The user can play or pause the audio via the audio icon.
- The user receives feedback in text form once an answer has been selected, indicating whether the answer was correct or incorrect. Furthermore, the correct answer choice is also marked in colour. The scoreboard shows which question the user is currently on. The progress is also displayed graphically in the progress bar. For each correct answer the user receives 10 points which are added up in the score counter.
- When the user has completed the 10 house questions, the user will see the final score and a message, depending on the score. The user can enter their username and save the points. The button is disabled and will be enabled as soon as the input field is filled in.
- The user is presented with a table with the current score and the saved ones. The name of the score and the house that was played are displayed. The scores are sorted from highest to lowest.
- The Instruction Page gives the user instructions on how the game is played and can be found via the navigation.
- Color Space - Colour Pallete
- Colors Wall - Colour Pallete
- Google Fonts - Fonts
- CDN Fonts - Fonts
- Tiny PNG - Compress Images
- Color Space - Gradient Background
- HTML-CSS-JS - Text Shadow Generator
- CSS Matic - Box Shadow Generator
- Font Awesome - Icons
- RealFaviconGenerator - Favicon Creater
- Balsamiq - Wireframes
- Github - Storing and hosting repository
- Gitpod - Code editor
- Chrome DevTools
See TESTING.md for an overview of website testing and debugging.
This project was created through GitHub:
- Locating repository, clicking on the "New" button.
- Selecting the relevant template: "Code-Institute-Org/gitpod-full-template"
- Adding the repository name "innski".
- Clicking the button "Create repository".
This project was developed using GitPod and committed and pushed to GitHub using the GitPod terminal. Following "git commands" were used:
- git add . - This command for multiple files to the staging area before commiting.
- git commit -m "Message explaining upadate" - This command explained changes that were done to the repository.
- git push - This command was used to push all committed changes to the GitHub Repository.
This project was deployed from its Github repository to Github Pages:
- Log in to Github account
- From the projects repository selecting "Settings" tab.
- Click on "Pages" from the left-hand menu
- The "Source" box must state "Deplay from branch"
- Under "Branch", click the dropdown named "None" and select "main".
- Click save.
- After a few seconds, refresh the page and retrieve the link.
- tiny.png: Used to compress media files
- Kind Png & Harry Potter Fandom: Resources for images
- Archive: Resource for Harry Potter Theme Audio
- Font Awesome: Resource for icons
- Google Fonts: Used as font library
- CDN Fonts: Used as font library
- Remove: Used to create a transparent PNG
- MP3 Cut: Used to cut audio file
- RealFaviconGenerator: Used to create a Favicon
- W3Schools & MDN: General source of help and guidance throughout this project.
- W3Schools: Guidance on creating a side navigation.
- Nguyễn Quyết: Guidance for Array Methods.
- freeCodeCamp: Guidance on setting a Timeout with JavaScript.
- Benjamin Knight: Guidance on styling a Progressbar.
- CSS {In Real Life }: Guidance for drop shadow.
All the questions provided in the game were taken from Beano