Water Cycle Quiz

A quiz to test the key concepts of the water cycle for primary school children, KS2 aged between 7 and 11 years. A fun way to put into practice what the children have learnt in class. An online quiz format is more interactive for children and suits visual learners in particular. Ideal for students and teachers who learn and teach remotely.

This quiz asks questions about the water cycle namely; evaporation, condensation, precipitation. The questions will test the knowledge of how water is recycled in a process called the water cycle. Evaporation - water in the sea rises as vapour into the sky. Condensation - droplets form and become clouds. Rain (precipitation) falls onto the ground from clouds. Water runs off the land until it reaches a river. Water moves along the river and into the sea. The process begins again.

Portfolio Project 2

UX design
Features
Future Features
Technology used
Accessibility
Testing
Deployment
Credits
Acknowledgements

UX Design

To attract children to learn and interact with the information they have learnt at school. A background picture of land and sky to give a bright and enticing look to the quiz.

Header - Logo

Font Awesome logo taken to show the clouds, water and sea. Represents the subject matter.

Question Area

There are fifteen questions. As the player moves through the questions, there is a notification on which question they are on taken from the questions index. Answer correct, response the button correct shows a green background and if incorrect the correct answer displayed as green and the chosen wrong answer has a red background.

Score Area

Documents the number of questions correct and incorrect.

Aims

Offer children the opportunity to practise their knowledge.
Support teachers in explaining the concepts and testing students.
Provide a fun learning tool which children enjoy learning.
Help children with different learning styles, a different way of understanding the water cycle.
Give teachers a tool to know what the children understand.

Skeleton

Webpage and mobile version made using a wireframe tool on Figma

Surface

To create a clear visual platform for the quiz game, that is attractive to young players.

Background color

The main background is a linear gradient to complement the background image. The eyedropper tool Chrome extension was used to pick out the main three colors for the background. The green color of #79caff, the beige color of #e4e170 and the blue color of #1a913d.

The Heading and Logo color are #f5f5f5 and give the visual impression of a cloud floating in the sky of the background image.

The answer buttons have a background color of #f5f5f5 a whitesmoke color to provide a contrast to the text without being as harsh on the eyes as white.

The hover color used for the buttons is also #e4e170, to give a cohesive visual.

The next and start button are #0000FF a bright blue to contrast well with the background colors.

The quiz area background uses the background image of hills and sky to complement the subject of the water cycle.

Colorspace used to check the palette works together.

Font color

The heading and logo are #f5f5f5 to create a contrast to the background blue and the main text content.

The body font used is the charcoal font-color #3a3a3a to add contrast to the background color.

Fonts

The font Poppins used throughout to give a clean look for the user.
Used fontjoy to find the font for the logo and headings.
Fonts imported from Google Fonts.
Font Awesome used to add visual cues to the Logo and score area.

Features

Start quiz

The heading section has a Logo with font awesome image of clouds, rain and sea and the name of the quiz.
Number of questions displayed and motivational message to players, "Lets learn!"
Start button call to action
Score area

An event listener waits for a click on the start button. The start button in the quiz area and the score area tally are visible. The next button is hidden using CSS display: none;

Once the quiz starts, the first question from the question list displays, the next button appears and the start button is hidden using CSS class hide.

The function to begin the quiz iterates through the questions array and displays each in order. There are fifteen in total.

Quiz area

Features the fifteen water cycle questions.
Four option buttons with three incorrect answers and one correct answer. As the player moves through the game there is a next button shown to progress through the quiz.

The function to display the questions creates buttons to display the answer text, then checks if the answer is correct from the question index. Then the function select answer shows the answer from the four answer options in the question array. Once the answer is selected when the user clicks, the original answer buttons are appended.

Answer correct or incorrect

Responds if the player is correct, by highlighting the correct answer button as green.

The wrong answer button selected is highlighted red and the correct answer not selected is highlighted as green.

Hover on the answer buttons is disabled using the pseudo class after hover disabled on selecting an answer, so that the user is prompted to click on the next button.

Score Area

The function to update score display takes the correct or incorrect score and the tally is adjusted accordingly as correct and incorrect.

This lets the player tally the number of questions they have correctly or incorrectly answered during the quiz. This resets at the start of the next quiz once the question 1 answer is chosen. Then the tally resets and starts the count again.

Once all the questions are complete, the function to reset the quiz, resets the state to the default.

Replay Quiz

The display score function is called once the fifteen questions are completed. The score and the question list are reset to zero. The final score is shown in the quiz area and the restart button is displayed, as a call to action to replay the quiz. The score tally resets once the first question answer is selected.

Future Features

It would be helpful in the future to increase the number of questions and provide a random question function to make it more difficult and/or interesting to replay the quiz.

Technology Used

HTML

Provides structure to the content.

CSS

Provides style to the content and user accessibility. Media queries to adjust to different screen sizes.

JavaScript

The language used to add interactivity to the quiz.

Font Awesome

Font Awesome Provides visual cues to the user and is used for the correct/incorrect answer icons.

Favicon

Favicon to create the icon for the webpage tab.

Fontjoy

Fontjoy to find the font for the quiz.

Google Fonts

The entire website used Google Fonts, with fontjoy helping to find the font.

Chrome Eye Dropper Extension

eyedropper tool Chrome extension to find the colors for the fonts and background colors from the main background image.

Sans-serif used as an alternative in case of issues viewing on different browsers.

Convertio

To change images from jpeg to webp available at Convertio.

Image Resizer

Image Resizer to resize the background image used for the quiz area.

Wireframes

Figma to design the arrangement of the site.

Colorspace

Colorspace used to check the palette works together.

Mobile Friendly

Mobile Friendly to check for mobile design.

Browser Stack

Browser Stack to test the site on different devices.

Lambda Test

LAMBDA Test to test the site on different browsers.

Convertico

Convert a Favicon at convertico.com

Accessibility Features

Text color chosen contrasts well to the background color to improve user visibility.

Semantic HTML to define the different sections of the quiz.

Lighthouse Score

Testing

Test	Description	Expected Outcome	Outome
Questions display in order	The questions appear in order as per the question list	The questions are not ordered randomly so should display 1 through to 15	Questions display in order
Correct answer displays	Each question has three wrong answers and one correct answer	The correct answer is true and so should display correctly as green (correct)	Each true answer displays correctly as green
Incorrect answer displays	Each question has three wrong answers and one correct answer	The incorrect answer selected displays as red (incorrect), the correct answer is displayed green to highlight it to the user	Each false answer displays red and shows the actual correct answer as green
Tallys correctly	The score shows total number of questions answered correct and incorrect until questions complete	The score increments plus correct and incorrect, then returns to zero	Increments correctly for both incorrect and correct answers and resets to zero at start of selection of question 1 answer
Start button	Listens for a click	The event listener should fire when the user clicks	On click event works and displays the first question
Next button	Hide at start and appear with answer	Hides at start of quiz and displays once the user selects an answer	Next button is visible after answer is selected
Result	The score shows total number of questions answered correctly out of 15	The score increments and displays correctly	Displays the total score out of 15
Restart button	Reset quiz to first question	Question number 1 of 15 should appear	The quiz restarts at the first question
Responsive	Adjusts to screen	Content is responsive in smaller and larger screen sizes	The content is responsive to various screen sizes

Further testing

My children aged 7 and 10 years tested the quiz. The test showed that some of the questions should be re-worded for improved understanding for the target age group.

Tested on different browsers and devices to ensure functionality. See below for further details.

Bugs and Fixes

Device Test

Dev tools in Chrome showed that the height of the quiz area and score area needed to be smaller so that it displays the full quiz content on a small screen. Therefore a media query for small screens was added so that the font is smaller and the height of the quiz answer buttons are reduced to accommodate the answers but still be legible to the player.
The quiz panel was gaining in height when the next button displayed so the height of the quiz panel was increased to accommodate the additional button.
The score area was displaying incorrectly on small screens so I added a media query and increased the width of the score correct and score incorrect h2. The next button was reduced in height and the font-size for the h1 was decreased so it could fit on the same line.
The orientation of the screen caused the background color to only fill 60% of the height of the screen so I changed the view height 100vh to min screen instead of max screen.

Mobile Friendly Test

Ran the URL through the website Mobile Friendly and it passed.

Browser Test

Browser Stack and LAMBDA Test used to test the quiz on different browsers.

Firefox browser test showed the text align was not working. Removed text align webkit center, replaced with text-align center and adjusted the margins to get the same layout.

Unfixed Bugs

Tests on Browser Stack failed to load the quiz in a Kindle Fire HDX7. Displays error. Further research necessary to fix this issue.

Validators

W3C HTML Validator

I ran code through the HTML validator and it displayed an error at the second section of the score area. The suggestion by the validator was to add a header, so I changed the <p> tag to a <h2> tag to resolve the issue. I then ran my updated code back through the HTML validator and I found no errors.

W3C CSS Validator

Putting the CSS code through the validator I found no errors.

JSHint

Whilst running the JavaScript code through JS Hint, it showed three errors for unused variables, I subsequently removed the unnecessary variables that were still in my code and these errors were rectified. Warnings that const, let, arrow function syntax (=>) and template literals used in my JavaScript showed ECMAScript 6 specific syntax. Suggested to use esversion 6.

Deployment

To access this project in GitHub;

Firstly Log into Github.
Select repository estii20/water-cycle-quiz.
Select settings from menu.
Select Pages from left menu bar.
Scroll and select Master branch from the drop down menu to deploy the website.
Retrieve the automatically generated link from the GitHub pages section.

Running the project locally;

To create a clone of this project follow the instructions below;
Create a GitPod account Gitpod.
Open the Chrome browser.
Click to the top of the Chrome navigation bar and enable the extension Gitpod Browser Extension for Chrome.
Link it.
Restart the browser when prompted to do so.
Log into GitPod with your account username and password.
Select the project in GitHub repositories.
Click on the green “Gitpod” button to the top right of the page.
A new gitpod workspace opens.
It is now possible to work locally on the project.

To make updates, it is necessary to commit with commit-m and push with git push so that the updates are pushed to Github.

Cloning the project will link the changes to the project repo and will be sent for approval.

Forking the project will create a new repo and the code will belong to the user. Any changes made will notify the user and will give them the option to pull this new code to their repo.

Changes pushed to the main branch will automatically update on the site.