The InPysical quiz is designed as a functional game but to also educate the users on the body and exercise. The Quiz is centred around questions related to Exercise and the Body. The Quiz is a free-to-play game, it educates the user while giving them a way to have fun and learn at the same time.
Live version of the site avalible - Click Here!
QuizPage Responsive Image
The target audience of the quiz is all users who are interested in fitness and exercise. The Audience is new beginners entering the fitness journey. Or experienced users with years of training and knowledge. The quiz is free and designed for new users and experienced users to test their knowledge.
The primary goal of the website is to operate a functional quiz that users can use and enjoy to test their knowledge. Another goal of the website is to expand the quiz as more users complete the quiz tasks. To help new users learn and test the experienced users with harder questions.
- The website is designed to allow new users to complete a quiz on fitness and experience.
- Provide a knowledge-based quiz to test the user's experience and information.
- Have a range of questions for the user to test their knowledge on.
- To have users who did not score all questions correctly try again for the top score.
- Test their knowledge on each question and allow them to experience the quiz.
- Center point for returning users with updating questions.
- In the website design I had chosen to use 5 colors. First being #f5f5f5 (Off-White) and 17181A (Dark Grey). When first thinking of how the website should look, the primary goal was a clean and simplistic-looking site. The Main colour of the quiz is (Navy Blue) 007DA7 this is a dark blue that gives the quiz a sleek and professional view. All of the text uses the Off-White colour to display over the blue. Both Red and Green are used for answering questions and displaying Green, for correct answers and Red for incorrect answers.
- The quiz contains a single image, which is displayed as the background image for the website. This is to show the user that straight away is a fitness-related quiz without needing to read into the quiz or information. The image was found on Pexals which is a free image library.
- When selecting the font to choose, the same goals were alongside the colour scheme. To find a clean and simplistic font that gives the website the look of professional and friendly. The font that was chosen was "Outfit" a free available font found on Google Fonts
The website is fully responsive for all devices. The website has media query tags for all sizes of devices. The Quiz is made fully responsive for all devices down to 320px width, An example would be the iPhone 4 is the current smallest device. Up to Extra Large Devices 1200px and up.
The Homepage is the first thing that a user sees when entering the website. It displays the title of the Quiz along with a small excerpt of what the quiz is for. Give the user a small amount of information before they enter the quiz.
Homepage View Mobile
The Homepage popup is used for the user to start the quiz. It displays a pop that the user can then start the quiz or exit if they change their minds. The quiz has a guide for the user to follow and holds information about what the quiz is and how the quiz works. Giving them the information before they start.
The popup uses current tags for the class. When the start quiz button is clicked the current.js tag uses an on-click event to add current tags that display the popup using opacity css to display.
Homepage Popup Mobile
The quiz page holds the main functionality of the quiz for the user. It holds all of the questions for the user to answer. It displays the score counter, that keeps track of the user's current score and the total score at the end.
The Quiz also displays the question title and the options for the user to select. Each question has four options and one correct answer. If the user wants to restart the quiz or cancel the quiz. They can select the 'Cancel' Button on the quiz page to cancel
Quiz Page Mobile View
The quiz questions will show a correct or incorrect answer when a user selects an option. If the user selects a correct answer it will display a green glow border.
If the user selects an incorrect answer it will display a red glow border around the option that is selected and then a green glow will display around the correct answer.
The next button will be greyed out and unable to be clicked until the user has selected an option. Once the option has been selected the next button will be able to be selected and all the questions will have a a pointer event of none, so they cannot keep selecting the options.
Quiz Questions Correct Answer
Quiz Questions Incorrect Answer
The quiz results are to display the user's score at the end of the quiz. Once the user has completed all the questions they can then view their score. It will show the total score of all the correct answers.
The user can then select an option to try again if they want to do it again or beat their score. Or the user can select home to go back to the home page.
Quiz Results Mobile View
- A timer would be a good addition to the quiz, as it puts another variable to the user's experience. It will have a set time for the user to complete the questions, this will help with the user pressure and deter any cheating by googling the answers.
- API, an API would be a good addition to the quiz as it can select a range of questions for the user to complete and when they complete the quiz again the questions will be different or in a different order to test the user's knowledge further.
- The final feature that I would like to introduce is a scoreboard
- Visual Studio Code (VSCode)
- Primary programming editor for creating and editing the website.
- Pexals
- Used to locate and use free images for the website.
- Google Fonts
- Google Fonts was used to import the "Outfitt" Font to the style.css and to be used on the website.
- Google Docs
- Primarily used for pre-note planning and for making notes and planning.
- Font Awesome
- Font Awesome provides free icons that were used on the website pages.
- Git
- Git is used to commit changes to website code and then push them to the Github repository.
- Github
- Github was used to store the website code when created on VSCode and pushed with Git.
- The website is also hosted via GitHub pages.
- VSCode Prettier
- Prettier Formater was used in VS code to beautify and format the code for best practices.
- MDN Web Docs
- MDN Web Docs was used to assist in javascript functionality and understanding.
- Youtube
- YouTube allows users to follow many different guides to help with Javascript functionality.
The W3C Markup Validator and W3C CSS Validator Services were used to test each of the HTML pages to make sure there were no syntax errors in the website. Then JSHint was used to test the javascript code.
Home Page HTML Validation
Quiz Page HTML Validation
When testing the css validator, 8 warnings were displayed. The first was that the font was imported into the css. This was corrected by importing the font directly to the home page as good HTML and CSS practices.
The next warning was that the next button that used an opacity of 0.1 to display as unusable was fixed by changing the colour on each colour by one value. This kept the colour almost the same and fixed the warning.
The final issue was the pointer event as auto was not defined by any specification but was supported by browsers. So I changed the value from auto to inherit. This inherited the value and since the button default was to be clicked. This solved the warning and the css passed with no warnings or errors.
Style Sheet CSS Validation Warnings
Style Sheet CSS Validation Passwed
JSHint was used to test all of the javascript files used for the quiz.
Current.js Passed
Script.js Passed
Lighthouse Homepage Testing
Lighthouse Quizpage Testing
The website responsiveness was tested in the browsers below.
- Google Chrome
- Safari
- Brave
All testing of quiz functionality was correct and all working correctly. Each question reports the correct answer to the user and displays the correct answer when an incorrect answer is selected.
First noticeable bug is when the user selects to start the quiz. The popup icon shows and the rest of the page is blurred to allow the user to focus on the page. On the left-hand side of the screen, the blur overlaps the hidden overflow of the quiz background and container. So the user can see a faint blue line on the left side of the page.
Another issue that has been found is the responsiveness on mobile view. Due to the width of the page and the sliding view of the quiz. I was unable to locate a solution to show a smaller view on the mobile device.
All bugs were fixed as the quiz was separated into two pages and the code was restructured to work as separate pages. Along with media queries were added to allow for all devices. From extra small (320px wide) all the way too extra-large (1200px wide) and above
The project was deployed to git hub pages using the following steps.
- Log into GitHub and navigate to the project repository InPhysical Quiz
- At the top of the repository, find an option for "Settings" on the menu.
- Scroll down in the settings until an option for the "GitHub Pages" section.
- Under the source dropdown, select "Deploy from Main Branch"
- The Page should then refresh automatically.
- Scroll back down the page and then find the link to the published page link in the GitHub Pages section.
- Log into GitHub and navigate to the project repository InPhysical Quiz
- Under the repository at the top of the page, select "Clone".
- There will be 3 options to clone from. HTTPS, SSH or Github CLI. Or Download the repository.
- Cloning with HTTPS, copy link and open git bash.
- Then type
git cloneand paste the URL following. It should look like this
git clone https://github.com/danieljcave/inphysical-quiz
- Followed by pressing Enter, the repository will then be cloned locally. If there are any issues with cloning the repository, GitHub has a detailed guide with extra information if any issues arise. Click Here
Forking a repository will make a copy of that repository and edit without making any changes to the original repository to mainly test ideas or changes with the repository.
- Log into GitHub and navigate to the project repository InPhysical Quiz
- Scroll to the top of the repository, where there is an option called "Fork"
- This will then allow you to make a copy of the repository in your GitHub account.
All Questions and information were provided by author and developer - Daniel Cave Javascript functionality of scoring, question number and display viewports was sourced from a range of YouTube guides and MDN Web Docs for assistance and help with functionality and understanding.
- Pexals - Background image sourced and found from Pexals.
- My Mentor Spencer Barriball for overall feedback and guidance along my project journey to improve the overall website and assist me as a developer.