Project milestone 2 for Code Institute Full-stack development program: JavaScript Essentials.
Quiz Land is a quiz game that allows players to test their knowledge in different topics. In Quiz Land there are 3 different quizzes available and it has 10 questions for each topic. If the user can answer the question correctly they will receive points. Quiz Land is a good way to have fun and also to learn while playing a game.
- As a website creator, I want to:
- Build an online quiz that is visually appealing from the user’s first visit so they are intrigued to explore and play the game.
- Build an easy to navigate quiz and game for its users to play.
- Build a quiz that is both enjoyable and challenging for the user.
- As a new visitor, I want to:
- Be able to understand the main purpose of the game.
- Be able to easily navigate throughout the game and choose a quiz to play.
- Be able to see my results after playing the game.
- As a returning visitor, I want to:
- Be able to find new quizzes when they are available.
- Be able to check the Height Scores page
- Be able to challenge myself and improve on my scores.
In this project I decided to build a prototype using the tool Canva before starting work on the code. It was helpful from an UX perspective as I could display the different elements in the screen and work with them with the objective of building an application that would be easily used by the users.
Live Project Wireframe Here
The Quiz Land is a nine page website that has been designed to look like an application in small devices.
- Homepage
- Quiz Sports
- Quiz History
- Quiz Geography
- Game End
- Trophy Gold
- Trophy Silver
- Trophy Bronze
- High Scores
The main colour scheme I chose for this project is an overall blue tone and purple with a darker colour for maximum user accessibility. I have choosen a green color as an interactive-color to contrast with the background.
- The Roboto, sans-serif is used as the main font for the whole website.
- 3 images were used as a background for the website pages.
- 1 image was used for the Favicon.
- At the bottom of the Home page, users can access the game's social media links (Facebook and Instagram). Once these icons are clicked they open a new tab.
- When the users reach the website, they are instantly greeted on the Homepage and they have access to the button to start playing immmediately. Also there is a sidebar opening by pressing the hamburger icon on the top right, here users can start to play but they can also choose a different quiz or just check the High Scores board. On the bottom right side the players can access the game's official social media pages.
Live Feature Here
-
At the top right of the website, users can find a hamburger menu that is fully responsive in all devices. In this navigation menu users can navigate to the different quizzes and also check the High Scores board.
- Menu Day/Night Mode. From 8am to 8pm users can access the navigation menu when open in day mode (background-color white), from 8pm to 8am users can access the same menu in night mode (background-color black).
- All of the game happens in this feature. Here the users will see the questions and they have 4 choices as their answer. The player will choose one and will see if the answer given is right or wrong.
The topic questions in Quiz 1 are Sports.
Live Feature Here
- This feature has the same purpose as Quiz 1 but here the topic questions are History.
Live Feature Here
- This feature has the same purpose as Quiz 1 and Quiz 2 but here the topic questions are Georaphy.
Live Feature Here
- Game End feature is the page that users go after a quiz is finished. Here the players can see the last score and save their usernames.
Live Feature Here
- After the user saves the game and if they score 250 they are brought to this feature to receive the gold medal.
Live Feature Here
- After the user saves the game and if they score 225 they are brought to this feature to receive the silver medal.
Live Feature Here
- After the user saves the game and if they score 200 they are brought to this feature to receive the bronze medal.
Live Feature Here
- In the High Scores feature users can check the best scores by the individual players.
Live Feature Here
- I am planning to add a feature with two progress bars. One progress bar to show the number of right answers and the other to show the number of wrong answers in the last game played.
- The player can choose a quiz to play from the menu or start a random quiz by pressing the button Let's Play in the Homepage.
- The player has 3 different quizzes in the game. For each quiz the user will see the question on the top center [2] and 4 choices [3] are available. The player then has to choose one of the choices and if the answer is right will win 25 points. The score will be displayed on the bottom right[5]. While the game is going on, users can see the progress bar updating any time they answer a question [1] and the question counter will also update on the bottom left [4] . On the top right the users can check at any time what quiz they are on [6].
- When the user answers the question right the message "Right Answer" will appear on the top center [7] and the background color of their choice answer will turn green [8].
- When the user answers the question wrong the message "Wrong Answer" will appear on the top center [9] and the background color of their choice answer will turn red [10].
- Google Fonts
- Google fonts were used to import the 'Roboto' font throughout the style.css.
- Font Awesome
- Font Awesome are used as an icons for user UX purposes.
- Git
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
- GitHub
- GitHub is used to store the project's code after being pushed from Git.
- VSCode
- VSCode was used to create and edit the website.
- Mobile Simulator
- Mobile Simulater was used to test the website on a mobile device.
- PIXLR
- PIXLR was used to create, modify and resize all images on this website.
- Canva
- Canva was used to create wireframe, the 3 background images and also the Favicon.
The W3C Markup Validator and W3C CSS Validator Services were used to validate every page of the project to ensure there were no syntax errors in the project.
- The HTML files were validated through the W3C Validator, presenting no errors.
- HomePage
- Quiz Sports
- Quiz History
- Quiz Geography
- Game End
- Trophy Gold
- Trophy Silver
- Trophy Bronze
- High Scores
- The CSS files were validated though the Jigsaw W3C Validator, presenting no errors.
- All JavaScript files were validated through JSHint, presenting no errors.
The testing was done using the Google Chrome Browser. Chrome Developer Tools was used extensively, particularly to check responsiveness on different screen sizes. Testing was also done using Firefox on desktop, and again on Google Chrome and Opera on the Huawei P20.
-
Responsive on all device sizes between 320px - 2600px wide
-
Devices tested using the Google Developer Tools emulator
- BlackBerry Z30 (360px x 640px)
- BlackBerry PlayBook (600px x 1024px)
- Samsung Galaxy Note 3 (360px x 640px)
- Samsung Galaxy S3 (360px x 640px)
- Samsung Galaxy S8 (360px x 740px)
- Samsung Galaxy S9+(320px x 658px)
- Samsung Galaxy Tab S4(712px x 1138px)
- LG Optimus L70 (384px x 640px)
- Microsoft Lumia 550 (640px x 360px)
- Microsoft Lumia 950 (360px x 640px)
- Motorola G4 (360px x 640px)
- Nexus 4 (384px x 640px)
- Nokia Lumia 520 (320px x 533px)
- Nokia N9 (480px x 854px)
- Pixel 3 (393px x 786px)
- Apple iPad Mini (468px x 4024)
- Apple iPhone 4 (320px x 480px)
- Apple iPhone 5/S (320px 568px)
- Apple iPhone 6/7/8 (375px x 667px)
- Apple iPhone 6/7/8 Plus (414px x 736px)
- Apple iPhone X (375px x 812px)
Lighthouse was used to test Performance, Best Practices, Accessibility and SEO on both Desktop and Mobile devices.
-
Desktop Results:
. -
Mobile Results:
. -
All links have been hovered and clicked to ensure accessibility.
-
Pages all load correctly on all device screen sizes.
-
All social media links work correctly and open a new tab.
-
All the buttons are working correctly and bring the users to the function that they were built for.
-
The game is working correctly the question comes at the right time and it gives a reply back to the user when answered.
-
The score has no issues and it increases by 25 points any time the user gives a right anwser.
-
The progress bar and question counter have also no issues, the background color increases (from 0% to 100%) and the number of questions also increases any time the user chooses an anwser.
- I had this issue with my project when I built the layout for the Quiz Page as they are many elements in the same page.
- I had to add media queries for portrait and landscape to avoid this issue happening.
The website development was created in the "main" branch. This branch was deployed using GitHub Pages.
- This site was deployed by completing the following steps:
- Open GitHub.
- Click on the project to be deployed.
- Navigate to the "Settings".
- Navigate down to the "GitHub Pages".
- Click on "Check it out here!".
- Select the "main" branch and select "Save".
- The link to the live website was ready on the top.
- Fork this project following the steps:
- Open GitHub.
- Click on the project to be forked.
- Find the 'Fork' button at the top right of the page.
- Once you click the button the fork will be in your repository..
- Clone this project following the steps:
- Open GitHub.
- Click on the project to be cloned.
- You will be provided with three options to choose from, HTTPS, SSH or GitHub CLI, click the clipboard icon in order to copy the URL.
- Once you click the button the fork will be in your repository.
- Open a new terminal.
- Change the current working directory to the location that you want the cloned directory.
- Type 'git clone' and paste the URL copied in step 3.
- Press 'Enter' and the project is cloned.
-
The JavaScript code for the Fancy Text Animation used in the Homepage was taken from the following tutorial:
Dev ED
- All the questions provided in the game were taken from 2 online quizzes.
- Lovatts & Puzzles.
- Britannica Quiz.
- Special thanks to my mentor Sandeep Aggarwal, Slack Community, Dave Horrocks and Mairéad Gillic for their assistance throughout this project.