This project is a Quiz Game with questions and answers fetched from an API. The user will be able to choose between four categories and three difficulty levels. There are 10 questions per game with multiple and/or true or false answers. User will be able to see the highest Score and the name he typed in the game display HUD.
This project is created for Milestone Project 2 ("Code Institute"). It was build using HTML5, CSS, and JavaScript.
- To organise the project work - Jira project management toowas used:
The primary goal of this project is to create an easily navigated and entertaining Quiz Game for my Milestone Project 2 at Code Institute. This game is designed for users of all age groups build using Html, CSS, and JavaScript.
-
Create a fun quiz game to play.
-
Create a website fully responsive on mobiles, tablets, and desktop devices.
-
Provide logical structure which is easy to follow with clear instructions on "how to play")
-
Create a game that the user would like to go back to with a user-friendly design.
-
Learn a variety of coding techniques by creating this game and use learnt skills in future projects.
-
A professional first project with the use of JavaScript to add to the portfolio.
-
As a new user, I want to understand the purpose of this website.
-
As a new user, I want to find clear instructions on how to play the game.
-
As a new user, I want to find an intuitive game with easy to see and press buttons.
-
As a new user, I want to be able to input my name to collect high scores.
-
As a new user, I want to be able to select the difficulty level of the game.
-
As a new user, I want to choose a quiz category.
-
As a new user, I want to be able to turn sound on/off anytime during the time I visit the website.
-
As a new user, I want to see the form of progress during game.
-
As a new user, I want to be able to see if my answer was correct or false during the game and.
-
As a new user, I want to get the final score of my quiz.
-
As a new user, I want to be able to easily start a new quiz.
-
As a new user, I want to be able to contact the owner of the website and see if the developer created other projects I might be interested in.
- As a returning user, I want to find new questions and quizzes.
🔲 Navigation header - Navigation header - A "sticky" navigation bar with
- with sound icon on the left to turn off/on at any time
- Clear captions/logo on what the website is (Quiz Game)
- and an info icon on the right side of a navigation bar, the button will open modal with game instructions.
🔲 Game player name input field.
🔲 Last result.
🔲 Level of difficulty to select.
🔲 Quiz category to be selected.
🔲 Quiz progress information bar.
🔲 Correct answers score
🔲 Final score modal activating after answering the last question.
🔲 Footer with site owner info:
- GitHub icon - link to site owner GitHub profile
- email link to contact the site owner.
Addressing user expectations:
As a new user, I want to understand the purpose of this website.
A solution to satisfy user requirements:
- "Sticky" navbar with Captions with name of the game.
- Quiz question with four choices for each question in the active quiz area
As a new user, I want to be able to input my name to collect high scores. A solution to satisfy user requirements:
- When the website starts a modal to input name will be displayed unless the name already presents in local storage (in this case player name will be automatically assigned from local storage).
As a new user, I want to find clear instructions on how to play the game.
A solution to satisfy user requirements:
- info icon in the navbar- opens game instruction modal.
As a new user, I want to find an intuitive game with easy to see and press buttons.
A solution to satisfy user requirements:
- All control buttons well-sized on all devices and easy to find.
As a new user, I want to be able to select the difficulty level of the game
A solution to satisfy user requirements:
- Three buttons with difficulty level easy, medium, and hard.
As a new user, I want to choose a quiz category.
A solution to satisfy user requirements:
- Area to select a category before the quiz start.
As a new user, I want to be able to turn sound on/off anytime during the time I visit the website.
A solution to satisfy user requirements:
- Sound icon located on a "sticky navbar" to turn off and on sound at any time while visiting the site.
As a new user, I want to see the form of progress through the quiz.
A solution to satisfy user requirements:
- Progress bar located above quiz questions.
As a new user, I want to be able to see if my answer was correct or false during the game.
A solution to satisfy user requirements:
- After every question, the correct answer will have a green background on the button and the user wrong answer button will get the red background.
- Current score result displayed in the quiz section.
As a new user, I want to get the final score.
A solution to satisfy user requirements:
- After the quiz finished a modal with the final score displayed.
- under player info result displays last quiz answers.
As a new user, I want to be able to easily start a new quiz.
A solution to satisfy user requirements:
- After every game user will be easy to start again the game by choosing level difficulty again.
As a new user, I want to be able to contact the owner of the website and see if the developer created other projects,I might be interested in.
A solution to satisfy user requirements:
- In the footer GitHub icon linked to the GitHub username site provided.
- In the footer email link provided.
As a returning user, I want to find new questions and quizzes.
A solution to satisfy user requirements:
- The Open Trivia DB API used in this project to ensure a good number of question and categories available in the test.
👉 Wireframes for mobile, tablet and desktop
👇
For all screen sizes:
- When game start username, High Score, categories and difficulty are not displayed. Comments: It was decided after feedback that that would increase user experience with better content readability.
- Selecting game difficulty and categories by dropdown menu Comments: Taking less viewing browser viewing space
- Not using next question buttons: Comments: It is more practically to jump to the next question after selecting an answer.
- minor difference in footer with email, copyrights and github icon.
For screens >= 576px :
- Current score display located above question:
Comment: It's easier to follow the score.
- Two answer choices beside each other's:
Comment: For visual purposes, it looks better on bigger screens to have two answers choices per row.
- Used Adobe Color to choose the colour pallet.
✒️
- The primary font used in this project is Exo 2 with sans-serif as a fallback font. This font was chosen for this project because it gives a futuristic feeling while keeping an elegant design and delivering great readability.
- The secondary font used for this website is Open Sans with sans-serif as a fallback font. This font is elegant and modern. It offers an excellent reading experience.
One image used as a background in this project Pexels - João Jesus
1️⃣ Header - with a sticky navigation bar located on the top of the page allowing the user to have access to:
- sound icon - to turn sound on/off located on the left side of navbar.
- quiz logo in the centre of the bar.
- info icon - to open modal with Game instructions.
2️⃣ Game user details and scores:
- activating modal for a first-time user to input the name of the player.
- Game Dashboard - displaying username and the highest score stored in local storage.
3️⃣ Quiz questions settings:
- Quiz questions fetched from Open Trivia API
- four categories to select
- three difficulty levels to chose
- open settings modal activated to remind the user to select category and difficulty if any setting is missing.
- start game button to start the "Quiz".
4️⃣ Active Game features:
- progress bar displaying current question in the game.
- current score display (to the right on desktop devices, above questions on mobiles).
- correct/incorrect - selected answer changing background colours (red for wrong answer and green for good choice).
- final modal displaying scores with three different messages with unique sound effects depending on the final score.
5️⃣ Footer :
- active email link to contact the owner of this project.
- copyright information
- GitHub icon - link to site owner GitHub repositories.
⬜ - additional categories to be added.
⬜ - Allowing to save more users in localStorage and display them high scores.
-
Bootstrap v.4.5.2 - used for layouts, styling and custom components such as navigation bar or modals.
-
jQuery - used jQuery for Modals in this website.
-
JIRA - project management tool to organize workflow.
-
Concepts - to create the first hand-drawn wireframe
-
Adobe Xd - to create wireframes
-
Adobe Colour - for colour palette used in this project.
-
Adobe Photoshop Express - To crop the full-page background image.
-
Canva - to create logo for the game.
-
JPEG-OPTIMIZER - optimized the size of images used in this project
-
tinypng - optimized Mockup.png for README
-
Google Fonts- to import 'Exo 2' and 'Open Sans' fonts used in this project.
-
Font Awesome - for social media links on the website and SVG used in wireframe
-
Visual Studio Code - used for developing this website and commit the project to GitHub repository.
-
Github - used to host the project and deploy the live website through Git Pages.
-
Chrome Developer Tools - used to debug and test the website, and to ensure colour contrast
-
Lighthouse - as a part of the chrome dev tool was used to improve the quality of the web page.
-
Favicon - to create a favicon for this Website.
-
online-audio-converter - to convert files to mp3.
-
techsini - To generate website mock-up .
This website is for Milestone Project 2. Build with HTML, CSS and JavaScript.
- Html, CSS and JavaScript validation.
- Testing website responsiveness on devices from 280px width- elements should not overlap each other
- Website performance and best practise
- Visual aspects of the website: fonts and colour contrast
- User stories documented in this README file
- Game functionality with all available scenarios
CSS Validator - W3C CSS Validator - PASS
Comments: 1 error found - code was not needed and delated.
HTML Validator - W3C HTML Validator - PASS
Comments: Errors been and fixed
JS Validator - JSHint Validator - PASS
Comments: Add missing semicolons and fix warning ("is better use in dot notation").
| Screen size\Browser | Chrome | Opera | Edge | Firefox | Safari |
|---|---|---|---|---|---|
| Mobile | ✅ | ✅ | ✅ | ✅ | ✅ |
| Tablet | ✅ | ✅ | ✅ | ✅ | Not Tested |
| Desktop | ✅ | ✅ | ✅ | ✅ | ✅ |
The website was tested on a varied number of devices:
- Android - Samsung Galaxy S10 (screen size - 6.1-inch) on Chrome, Opera, Firefox and Microsoft Edge
- IOS - iPhone 7 (screen size - 4.7-inch) on Safari and Chrome
- IOS - iphone Pro 12 (screen size 6.1-inch) Safari
Surface Book in tablet view - Chrome, Opera, Firefox, Edge (screen size - 13.5- inch)
-
PC Windows (Windows 10):
- Surface Book on (screen size - 13.5-inch)
- Surface Book on the second monitor DELL U2419H(screen size - 24-inch)
Tested on Chrome, Opera, Firefox and Microsoft Edge
-
MacBook pro 13:
- Tested on Safari and Chrome browser.
Also, friends and family were asked to test this website and I did not receive any information on noticed bugs in the feedback from them.
To improve and check performance for this website I used Lighthouse, which is part of Chrome Developer Tools.
- By using Chrome Developer Tools colour contrast was tested:
-
On this project website right click on the pc mouse
-
Press - "Inspect"
-
Press - ctr+shift+c or "small box with an arrow" to inspect elements of the website.
-
Move the mouse cursor over elements to see under Accessibility->Contrast the result.
- All Html elements on the Quiz page were tested and contrast was correct.
----Test Case----------------------Description
-
As a new user, I want to understand the purpose of this website. - TC010
-
As a new user, I want to find clear instructions on how to play the game. - TC006
-
As a new user, I want to find an intuitive game with easy to see and press buttons. - TC002,TC003,TC004,TC005
-
As a new user, I want to be able to input my name to collect high scores. - TC001
-
As a new user, I want to be able to select the difficulty level of the game. - TC003
-
As a new user, I want to choose a quiz category. - TC003
-
As a new user, I want to be able to turn sound on/off anytime during the time I visit the website. - TC007
-
As a new user, I want to see the form of progress during game. - TC004
-
As a new user, I want to be able to see if my answer was correct or false during the game and. - TC004
-
As a new user, I want to get the final score of my quiz. - TC005, TC008
-
As a new user, I want to be able to easily start a new quiz. - TC002, TC003 ,TC008
-
As a new user, I want to be able to contact the owner of the website and see if the developer created other projects, I might be interested in. - TC009
Homepage:
1.Encoding issue on some questions and answers fetched from Open Trivia API
-
partly resolved -
solution explanation - by using Base64 encoding, and then use atob() to decode questions and choices.(impoved however some answers choices still wrongly disoplayed). -
resolved
-
solution explained - change to URL Encoding (3986) and then decode to display by using decodeURIComponent() .
2.Add event listener to submit username Modal by pressing "Enter"
-
resolved
3.Looking to find a solution to alert the user when category and difficulty not selected
- resolved 4. Background image not showing on android phones
- resolved. 5. By activating info modal background image is moving.
- not resolved.
This project was created using the following steps:
- Open GitHub in the browser and sign in to my account.
- Click on Repositories
- Press New
- Choose Code Institute Temple
- Give Repository a name and description
- Press Create repository.
- Finally click on Gitpod button in the newly created repository to start working on this project.
- Navigating to the GitHub [Repository]
- Click on Code green button.
- Under the Clone section, copy the URL from the HTTPS dialogue box.
- Use the IDE of choice to open the terminal.
- Use git clone command followed by the copied URL.
- A clone of the project will now be created locally on your machine.
This website was published using GitHub Pages by:
- Navigating to the GitHub Repository
- Under the name of this project, there is a navigation bar - > Click on Settings.
- Scroll down to the GitHub Pages Heading.
- Under the Source Choose *Branch: master
- Click the Save button.
- Click on the newly created link with the live page. (it can take a few minutes for the site to be published).
- Udemy tutorial "Build a Quiz App with HTML, CSS, and JavaScript" created by James Quick
- CSS-Tricks - learned how to find set up for full page background image.
- Bootsrap examples - learn how to make bootstrap sticky footer with fixed navbar.
- JS30-"Drum_Kit" -learned how to allow sound play after fast answers click in Quiz.
- Raise Button Effect - use the efect for answer choices in the game.
- Bootstrap library - used to create a responsive design
- Game no points scored sound freesound;
- Game high score sound freesound
- Game click sound freesound
- Game sounds for final win sound, correct and incorrect choices downloaded from freesound
- My mentor, Maranatha Ilesanmi for advice, guidance and support on this project.
- Daisy Mc Girr(Code Institute student) for:
- webinar on Testing.
- Thiago Santos(Code Institute student) for:
- leading Java Script study group.
- Slack Community - for feedback on my project.
- My friends and family - for giving feedback on my project and testing this website.