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.
- UX design
- Features
- Future Features
- Technology used
- Accessibility
- Testing
- Deployment
- Credits
- Acknowledgements
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.
- 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.
Webpage and mobile version made using a wireframe tool on Figma
To create a clear visual platform for the quiz game, that is attractive to young players.
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.
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.
- 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.
- 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.
- 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.
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.
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.
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.
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.
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
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
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.
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 theh1
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.
Tests on Browser Stack failed to load the quiz in a Kindle Fire HDX7. Displays error. Further research necessary to fix this issue.
Validators
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.
Putting the CSS code through the validator I found no errors.
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.
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.
Content
Question and answer content information researched at;
Education quizzes KS2 Science The Water Cycle
Cape Cod Groundwater Organization Water Cycle PDF
Media
Background image taken from Beautiful landscape farm field vector illustration
Icons were taken from Font Awesome
Resources
Background color W3school CSS Gradients
Start quiz button Web Dev Simplified Quiz start button with JavaScript
Functions for questions and answers Easy Tutorial Pro Quiz question and answer buttons with JavaScript
Score area Love Maths Score Area, Code Insitute
Event Listeners Stackoverflow DOM Content Loaded Event Listeners and MDN Web Docs
Answers not showing Stackoverflow
How to add a Favicon hostinger.com
Mentor - Brian Macharia
Support of Code Institute Team