(Developer: Deeksha Varma)
You can view the live site here - Geography quiz for Kids
- Introduction
- Project Goals
- User Experience
- Technologies Used
- Testing and Validation
- Bugs
- Deployment & Development
- Credits
Welcome to the Geography Quiz for Kids! This interactive website is designed to provide an engaging and educational experience for young learners, helping them explore the fascinating world of geography while having fun. The quiz consists of 10 multiple choice questions on world geography. The player can choose between several levels of difficulty. The player gets feedback on the number of questions and a score card is shown to let the player know the number of correct and incorrect answers. The quiz consists of randomly generated questions and answers. There is also form validation for the username form. In order to prevent malpractice, the radio button options in the quiz are disabled/greyed out so that the user cannot change their answer once selected. The website is fully responsive and also includes a 404 page. Other quiz elements such as Question counter, Progress bar styling, motivational messages to the user depending on how much they scored in the quiz is also included. A leaderboard section is also included to display the top 5 quiz scores.
As a user of the Geography Quiz for Kids website, the primary goals are:
-
Educational Engagement: An interactive and educational experience for kids, helping them learn about geography in an engaging and enjoyable manner.
-
Customizable Difficulty: Aim to cater to children of different ages and skill levels by offering multiple difficulty levels. This allows each child to find an appropriate challenge and progress at their own pace.
-
Comprehensive Geography Coverage: The quiz provides a comprehensive overview of global geography and helps kids develop a deeper understanding of the world.
-
User-Friendly Interface: Aim to create a user-friendly website interface that is intuitive and easy for kids to navigate. Clear instructions, appealing visuals, and a seamless user experience are essential to keeping children engaged and motivated throughout the quiz.
-
Score Tracking and Progress Monitoring: Incorporate a scoring system that allows kids to track their progress and see their performance. Providing a detailed score report at the end of each quiz encourages improvement and motivates kids to achieve better results.
As the owner of the Geography Quiz for Kids website, the goals are:
-
Educational Impact: Aim to provide a valuable educational resource for children, helping them develop their knowledge and understanding of geography in a fun and interactive way.
-
User Engagement: Create a website that captures and maintains the attention of young users.
-
Positive User Experience: user-friendly, intuitive, and easy to navigate for both children and their parents or educators.
-
Expansion and Growth: While starting with a solid foundation, the aim is to expand the website's content and features over time. This may involve adding new quiz categories, incorporating additional learning resources, or integrating social features to encourage collaboration and competition among users.
- Children: The primary target audience is children between the ages of 6 and 12, who are interested in exploring and learning about geography.
- Parents: The website aims to provide parents with a trustworthy and valuable tool to supplement their child's geography learning.
- Educators
- Home-schooling Parents
-
Engaging and Interactive: Users expect the quiz to be engaging and interactive, with visually appealing elements, such as images and illustrations, that capture children's attention and make the learning experience enjoyable.
-
Age-Appropriate Content: The quiz questions and difficulty levels should be suitable for different age groups within the target audience. Younger children may require simpler questions, while older children may seek more challenging content.
-
Clear Instructions and User-Friendly Interface: Users expect clear and concise instructions that guide them through the quiz. The website's interface should be intuitive and easy for children to navigate, ensuring they can interact with the quiz without confusion or frustration.
-
Comprehensive Geography Coverage: The quiz should cover a wide range of geography topics, including continents, countries, capitals, landmarks, and other relevant information. Users expect the quiz to provide a comprehensive overview of global geography.
-
Customizable Difficulty Levels: Users should have the option to select difficulty levels that match their knowledge and skills. This allows for personalized learning experiences and ensures appropriate challenges for each user.
-
Score Tracking and Progress Monitoring: Users expect a scoring system that tracks their performance and provides immediate feedback on correct and incorrect answers. They also anticipate a comprehensive score report at the end of each quiz, allowing them to monitor their progress and identify areas for improvement.
-
Compatibility and Accessibility: Users expect the website to be compatible with different devices (desktop, laptop, tablet, and mobile) and various web browsers. Additionally, ensuring accessibility features, such as keyboard navigation and support for screen readers, is important for users with disabilities.
As a first time user, I want to ...
- ... easily navigate through the quiz.
- ... clear descriptions or labels for each difficulty level, helping me make the right choice for my knowledge and skill level.
- ... answer the questions presented to me.
- ... receive immediate feedback on whether my response was correct or incorrect. Clear indications, such as green checkmarks for correct answers and red crosses for incorrect ones, would be helpful.
- ... see a visual indicator or progress bar showing how many questions I've answered and how many are left. At the end of the quiz, I expect a comprehensive score report that highlights my performance.
- ... expect a user-friendly interface with intuitive buttons or navigation elements.
- ... want to feel a sense of accomplishment. Celebratory messages or animations, along with an overall score or ranking, would be motivating. I expect an option to restart the quiz.
- ... see a High Scores page to see the top scores.
As a returning user, I want to ...
- ... challenge myself by selecting higher difficulty levels.
- ... see my previous scores stored in a personalized profile or dashboard.
- ... find directions to the location of the business.
As the site owner, I want users to ...
- ... have a positive user experience.
At the initial stage the site will include a welcome section that displays two buttons. 'Play' button to start playing the quiz and a 'HighScores' button to view the Leaderboard. The username for page displays the rules of the game and lets the user input a username, then the user is given a choice of four levels of difficulty of the game. Finally the game will start and run though 10 questions at the chosen level. An end of game page will then load, here the user can opt to play the game again or save their score.
- Welcome section: 'Play' button - presents the user with a form to continue playing the game. 'High Scores' button - presents the user with a 'Leaderboard'.
- Username form & Rules of the quiz: A user input field that lets the user input their name. Displays the rules of the game.
- Choose difficulty level section: This section will provide the user the option to choose from three difficulty levels - Easy, Medium, Hard.
- Quiz section: The user is presented with the quiz questions. The question is of the multiple choice format at the chosen difficulty level. The answers are displayed as radio buttons.
- End of quiz page: The user is presented with their score and a congratulatory message and an image for successfully completing the quiz. The user can also choose to play again or save score.
- Leaderboard/High Scores page: The user can see the top 5 scores of the quiz.
In future expansion the site could include
- Timer on each question.
- Audio effects when navigating the quiz
- Displaying the right answer to the user using colors. (ex. green background for the correct answer, red background for the incorrect answer)
The structure of the site which houses the game controls are incorporated into the index.html page:
- Welcome/Home Section displays the main control buttons of the game. 'Play' button and 'High Scores' button to view the leaderboard.
The username form section, difficulty level section & main quiz section are incorporated into the game.html page:
- Username form section & Rules displays the rules of the game and asks the user to input a username in order to proceed playing the game.
- Choose difficulty level Section that provides users 3 difficulty levels (Easy, Medium & Hard) to choose from.
- Quiz Section is the main game area where the user is presented with 10 questions to answer based on the chosen level of difficulty. A score area below the quiz answer choices keeps track of the score. A progress bar is displayed above the question that helps keep track of the questions left. A question counter is also shown to let the user know the question number they are currently solving. Once the user selects the answer choice, the other choices are disabled/greyed out. The user is prompted with an action button - "Next" to move onto the next question.
The quiz results are displayed on end_quiz.html page:
- Quiz Result Page where the user's performance is denoted with the total score achieved and level at which the game was played with a celebratory message and an image based on score. The user can choose to play the game again by clicking on the 'Retake quiz' button. The user can also to choose to save their score by clicking on 'Save' button.
The leaderboard section is incorporated into highscores.html page
- Leaderboard/High Scores Page displays the top 5 high scores of the quiz.
- 404 Page - When user attempts to find a resource that doesn't exist, then the 404.html page is displayed to the user with an appropriate image and a button to start the quiz.
As described in the previous section with the aid of wireframes, this quiz game website includes 4 interactive sections, which all have a heading, a central display area and a footer. The home page/welcome page has two buttons namely 'Play' button to proceed to username form section and a 'High Scores' button that takes the user to leaderboard page. The Username form page has a username input field which is required to play the game. Upon entering the username, the user has to choose the level at which they would like to play the game, upon selecting the level, the game loads and runs, incrementing the correct or incorrect answer count as the answers are chosen. The end of the quiz page displays final score to the user and a message to user depending on score achieved. There are two buttons on this final page - a 'Save' button that allows the user to save their score and a 'Go Home' button that takes the user back to home page.
Since the website is aimed for the kids, the chosen theme aims to convey a classroom and fun feel. The background chosen is a green chalkboard classroom image that allows ease of readability with a good contrast ratio.
-
Primary Background Color: #0F5136 (Dark Green)
This dark green color is reminiscent of lush landscapes and vegetation. It aligns with the geography theme, evoking images of forests and nature. The deep green also complements the classroom feel by recalling the green chalkboards often seen in educational settings.
-
Text Color for Headers: #EBEADE (Light Gray)
Light gray provides a neutral and balanced background that enhances readability and prevents visual fatigue. It complements the other vibrant colors and maintains a clean and organized appearance for text and content.
-
Text Color for content: #EBEADE (Light Gray) and #482307 (Dark Brown)
Dark brown brings a sense of earthiness and stability to the color palette. It has been used for highlighting text inside buttons, providing a grounded and authoritative presence amidst the other lively colors.
-
Interactive Elements (Buttons, Links): #E0A626 (Golden Yellow)
Golden yellow is warm and inviting, adding a touch of positivity and excitement to the color scheme. It has been used for interactive elements like buttons and links in footer, encouraging engagement and interaction with the app.
-
Feedback Indicators (Correct, Incorrect): #0BDF24 (Vibrant Green) and #F60000 (Bright Red)
This vibrant green is reminiscent of fresh growth and vibrancy. It has been used to indicate correct answers, providing a positive and affirming visual cue for users when they answer questions correctly. Bright red is attention-grabbing and is often associated with warnings or alerts. In the context of a quiz app, this color has been used to highlight incorrect answers, drawing immediate attention to responses.
By using these colors strategically, I've created a color scheme that combines natural, vibrant, and engaging hues. The dark green and brown evoke a classroom and geographical feel, while the bright red and vibrant green provide clear feedback on user responses. Light gray and golden yellow contribute to readability, positivity, and interactivity. Overall, this color palette aligns well with my goal of conveying a classroom and fun atmosphere for young learners.
Lato is the font used. It is a versatile and modern font that can be a suitable choice for Geography Quiz app targeting kids. While Lato might not have the whimsical, playful appearance of fonts specifically designed for kids, its readability and adaptability make it a reasonable choice for an educational app like a Geography Quiz. It presents a balance between professionalism, clarity, and a neutral style that can resonate well with a diverse audience, including young learners.
Screenshot of Home page on Desktop
Screenshot of Home page on mobile
- Features two buttons. User can click the 'Play' button to get started or click 'High Scores' to view the Leaderboard section.
Screenshot of form section on Desktop
Screenshot of form section on mobile
- Features a user input field that lets the user input their name. The form has validations for the username field. The rules of the game are displayed in a box below the form.
Screenshot of difficulty levels on Desktop
Screenshot of difficulty levels on mobile
- Features 3 difficulty levels (Easy, Medium & Hard) to choose from.
Screenshot of Quiz Section on Desktop
Screenshot of Quiz Section on mobile
- Features 10 questions to answer based on the chosen level of difficulty. A score area below the quiz answer choices keeps track of the score. A progress bar is displayed above the question that helps keep track of the questions left. A question counter is also shown to let the user know the question number they are currently solving. Once the user selects the answer choice, the other choices are disabled/greyed out. The user is prompted with an action button - "Next" to move onto the next question.
Screenshot of End Quiz page on Desktop
Screenshot of End Quiz page on mobile
- Features user's performance with the total score achieved and level at which the game was played with a celebratory message and an image based on score. The user can choose to play the game again by clicking on the 'Retake quiz' button. The user can also to choose to save their score by clicking on 'Save' button.
Screenshot of Leaderboard on Desktop
Screenshot of Leaderboard on mobile
- Shows the player the current top 5 high scores of the quiz.
- All scores are saved in local storage so players can only compete with anyone who attempts the quiz on the same machine.
Screenshot of 404 page on Desktop
Screenshot of 404 page on mobile
- displays the top 5 high scores of the quiz.
Screenshot of Footer on Desktop
Screenshot of footer on mobile
- Featured on all pages (also the 404 page).
- Includes links to the LinkedIn and GitHub page of the developer.
- All links open in a new window.
- Timer on each question.
- Audio effects when navigating the quiz
- Displaying the right answer to the user using colors. (ex. green background for the correct answer, red background for the incorrect answer)
- HTML5 - Provides the content and structure for the website.
- CSS3 - Provides the styling for the website.
- Javascript - Provides interactivity to the website.
- Git - Version Control System used to track the project development.
- Github - Used to host and edit the website.
- Balsamiq - Used to create wireframes.
- Google Fonts - Used to open source font-families for use in CSS.
- Font Awesome - Used for adding icons to the website.
- Coolors - Color contrast checker of text and background colors.
- Image Color Picker - useful to pick colors from images.
- I love Img - helps to resize images.
- Am I Responsive - mockup generator that checks for responsiveness across various device screen widths.
- The website has been thoroughly tested. All the code has been validated via the W3C HTML Validator and W3C CSS Validator. The issues were noted, documented and fixed as shown below.
Home Page
Game Page
End of Quiz Page
Leaderboard Page
404 Error Page
The linter JSHint was used to validate the JavaScript files. Small issues, such as missing semicolons, etc. were fixed. Unused variable warnings were ignored, as those variables or functions where called/used in either the html files or other JS files. All remaining warnings stem from the JShint configuration and are not related to the code.
script.js validation part one
script.js validation part two
script.js validation part three
end.js validation part one
end.js validation part two
highscores.js validation
questions.js validation
questions.js validation
The website was put through a11y to further test the contrast and found no issues.
The website was assessed for the following parameters using Chrome Dev Tools Lighthouse Testing:
- Performance - How the page performs whilst loading.
- Accessibility - Is the site accessible for all users and how can it be improved.
- Best Practices - Site conforms to industry best practices.
- SEO - Search Engine Optimisation. Is the site optimised for search engine result rankings.
All pages scored high on performance, accessibility and best practices. The SEO score for Home page, Game page scored a little less and necessary code changes were made and is documented below.
Home Page
Game Page
End of Quiz Page
Leaderboard Page
404 Error Page
- The responsive design tests were carried out manually with Google Chrome DevTools and Responsive Design Checker.
The websites compatability was tested on the following browsers and no issues were found:
- Google Chrome
- Mozilla Firefox
- Microsoft Edge
-
In addition to the above tests, I have performed manual testing using the following use cases tabulated below to make sure everything works as intended.
-
Welcome section/Home Page
Feature Action Expected Result Actual Result Home Click on 'Play' button Should display the username form section and Rules Works as expected Home Click on 'High Scores' button Should open the leaderboard page Works as expected Home Click on footer links Should open the corresponding links in a new tab Works as expected -
Username Form Section and Rules
Feature Action Expected Result Actual Result Username Section Click on 'Submit' button without entering any username Should not submit the form and display this message to the user - 'Please fill in a username to proceed!' Works as expected Username Section Enter a username in the input field and click 'Submit' Should submit the form and display the choose level section with a welcome message containing the player name - Welcome to the Quiz, ${username}! Works as expected -
Choose Level Section
Feature Action Expected Result Actual Result Choose Level Section Verify that there are three buttons on this page - Easy, Medium and Hard Displays three level buttons Works as expected Choose Level Section Click on 'Easy' button it loads the easy questions in a random order Works as expected Choose Level Section Click on 'Medium' button it loads the medium difficulty questions in a random order Works as expected Choose Level Section Click on 'Hard" button it loads the hard questions in a random order Works as expected Choose Level Section Verify the welcome message it should display the message - "Welcome to the Quiz, username" Works as expected -
Quiz Section
Feature Action Expected Result Actual Result Quiz Section Click on 'Next' question without selecting a radio answer Next button should be disabled/greyed out and should not display next question unless an answer is selected Works as expected Quiz Section Click on an answer Should disable other radio answer options and grey them out Works as expected Quiz Section Click on an answer Should increment or decrement correct/wrong answer scores displayed below the answers Works as expected Quiz Section Click on 'Next' button after selecting a radio answer Should make the next question button clickable and display next question. Also increment question counter and progress bar displayed on top of the question. Works as expected -
End of Quiz Page
Feature Action Expected Result Actual Result End of Quiz Page Click on 'Retake Quiz' button Should redirect user to home page Works as expected End of Quiz Page Click on 'Save' button Should redirect user to Leaderboard page and display the user's score along with the top 5 scores Works as expected -
Leaderboard/High Scores Page
Feature Action Expected Result Actual Result Leaderboard Click on 'Go Home' button Should redirect user to home page Works as expected Leaderboard Check if user's saved score is displayed Should display the user's score below the top 5 scores in a different font color Works as expected -
404 Page
Feature Action Expected Result Actual Result 404 Page On the browser url tab try to search for a mistyped resource - ex. https://deeksha-varma.github.io/portfolio_project_2/hello Should redirect user to 404 page Works as expected 404 Page Click on 'Play' button Should redirect user to Home Page Works as expected -
Footer
Feature Action Expected Result Actual Result Footer Click on footer links on all pages Should open the corresponding Github and Linkedin link of the developer Works as expected
-
After putting the website through HTML Validation, I was presented with the following errors for the pages (game.html, 404.html):
Game Page
404 Error Page
After running the website through W3C CSS Validator, I was presented with the following warnings:
The css styles were removed and then validated once again with no warnings
After running the website through Chrome Dev Tools Lighthouse Testing, I was presented with low SEO score for all pages. A meta description attribute was added inside the head element for all the pages as a fix, the score then improved.
Home Page
Game Page
End of Quiz Page
Leaderboard
404 Page
The leaderboard feature currently displays the top 5 scores from localStorage. In future, enhancenments such as having scores displayed based on each difficulty level can be implemented.
| Bug | Fix |
|---|---|
| Some of the links on different pages were broken | On adding relative paths, this was fixed. Fixed in this and this commit |
| 404 error failed resource was showing on loading banner image and favicon | Fixed by adding relative path to background_image url and favicon added to link tag inside head element of the pages. Fixed in this commit |
| Missing semicolon jshint warnings from js files | Fixed in this commit |
| User can move on to next question without selecting any answer on the quiz page | This has been fixed by disabling the next question button on the quiz page so that the user is prompted to select an answer to proceed to the next question. This has been implemented in this commit |
| Responsiveness of the end quiz page on mobile screen widths was breaking | Media queries were added to handle font sizes of the question and reduce margin. This has been fixed in multiple commits. Fix#1, Fix#2 |
- When inspecting the website with Google Chrome DevTools, the website is showing 1 warning when I refresh the deployed project.
- Upon browsing the internet, I found this post on StackOverflow which explains that "GitHub hosted pages disable FLoC, which is Google's 3rd party cookie alternative. GitHub, Microsoft, doesn't seems to like it. There is also a link to an official GitHub blog about it here.
The site was deployed to GitHub pages. The steps to deploy a site are as follows:
- In the GitHub repository, navigate to the Settings tab.
- Once in Settings, navigate to the Pages tab on the left hand side.
- Under Source, select the branch to master, then click save.
- Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link to the Github repository can be found here - add link here.
A copy of the GitHub Repository can be made by forking the GitHub account. This copy can be viewed and changes can be made to the copy without affecting the original repository. Take the following steps to fork the repository;
- Log in to GitHub and locate the repository.
- On the right hand side of the page inline with the repository name is a button called 'Fork', click on the button to create a copy of the original repository in your GitHub Account.
The method from cloning a project from GitHub is below:
- Under the repository’s name, click on the code tab.
- In the Clone with HTTPS section, click on the clipboard icon to copy the given URL.
- In your IDE of choice, open Git Bash.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type git clone, and then paste the URL copied from GitHub.
- Press enter and the local clone will be created.
- The font came from Google Fonts.
- The icons came from Font Awesome.
- Favicon taken from FreeFavicon.
- The markdown syntax used to write README doc were referenced from Git Hub Doc.
- Background image brgfx on Freepik.
- Quiz End page Image by Freepik
- 404 Image by storyset on Freepik
- Easy level success image 1 Photo by Zac Durant on Unsplash
- Easy level success image 2 Photo by Jordan Whitfield on Unsplash
- Easy level success image 3 Photo by Drew Beamer on Unsplash
- Medium level image 1 Image by storyset on Freepik
- Medium level image 2 by Freepik
- Medium level image 3 by Nik on Unsplash
- Hard level image 1 by rawpixel.com on Freepik
- Hard level image 2 by Freepik
- Hard level image 3 by Freepik
- The functionality for keeping track of the score was inspired by the Love Maths project.
- Username Submit button styling inspired from CSS Submit Buttons.
- The CSS styles for 'choose level' section was taken from CSS Button Examples.
- Progress bar layout was implemented using this video by Brian Design.
- The disabled radio button functionality was implemented by referring to this Stackoverflow question.
The site was developed as a part of a Full Stack Software Development Diploma Course at the Code Institute and is my second Portfolio Project.
I would like to thank -
- my mentor Mitko Bachvarov for his timely availability, feedback, guidance and support.
- My husband and son, without their support this could not have been possible. Thanks to their feedback.
Deeksha Varma 2023.