Math4Kids is a fun, interactive educational platform designed to help children strengthen their mathematical skills through engaging activities and exercises. The application is tailored to promote learning in a playful and stress-free environment, making math enjoyable for kids of all ages.
- As a First Time Visitor, I want to understand the purpose of the site and see how it can help children learn math.
- As a First Time Visitor, I want to easily navigate through the platform and find different game modes.
- As a Returning Visitor, I want to track my child’s progress and see their improvements over time.
- As a Returning Visitor, I want to customize difficulty levels to match my child’s learning pace.
- As a Frequent User, I want to discover new challenges or game updates to keep the experience fresh and engaging.
- As a Frequent User, I want quick access to my child’s saved progress and settings.
- Welcome Section: A bright and engaging introduction to the platform.
- Quick Play: Randomized math problems for immediate practice in four modes:
- Addition.
- Subtraction.
- Multiplication.
- Division.
- Real-Time Score Display: The user’s score updates in real time for every correct answer.
- Encourages Engagement: A visual representation of performance motivates users to achieve higher scores.
- HTML: Structure and layout.
- CSS: Styling and responsiveness.
- JavaScript: Interactive features and logic.
- Jest: Javascript testing.
- VS Code: for development and Jest package installation.
- GitHub: for storing the code.
- GitHub Pages: for web deployment.
- W3C Markup Validation Service: for checking HTML structure.
- CSS Validation Services: for testing CSS code.
- Lighthouse: for performance and accessibility checks.
- WireframeCC: for creating wireframes.
- Image Resizer: for sizing hero image.
- Bright, child-friendly colors like Orange, blue, and yellow for an inviting and playful experience.
- Main Font: Playful display font to match the theme, Sans-serif fonts for readability.
- Created for desktop, tablet, and mobile views to ensure responsiveness.
- Game Modes: Handles logic for four modes: addition, subtraction, multiplication, and division.
- Randomized Equations: Generates unique equations for every round and ensures validity (e.g., no division by zero).
- Dynamic Options: Randomizes and displays options (including the correct answer) for every round.
- Added a
scorevariable to track the user's performance. - The score increments on every correct answer and updates the
#score-containerelement dynamically.
- Implemented a custom dropdown for selecting game modes:
- Toggling the dropdown menu on button click.
- Closing the dropdown when the user chooses an operator or clicks outside the menu.
- Correct Answer: Adds a
correctclass to the equation container, temporarily highlighting the right answer. - Wrong Answer: Adds a
shakeclass to incorrect options, giving visual feedback for wrong selections.
- Added a confirmation dialog to handle navigation to the home page or restarting the game.
- Dynamically updates the dialog message based on the user’s action:
- Home Navigation: Redirects to the home page (
index.html). - Game Restart: Reloads the game page (
game.html).
- Home Navigation: Redirects to the home page (
- Verified in Chrome, Firefox, Safari, and Edge to ensure uniform appearance and functionality.
- Ensured seamless usability on devices ranging from desktops to smartphones.
- Validated using Lighthouse tools.
- Verified contrast ratios and alternative text for images.
- HTML markup validation.
- CSS validation.
- Javascript testing in JSHint.
| Test Case | Steps | Expected Result | Status |
|---|---|---|---|
| Navigation Links | 1. Click on each navigation link in the header. | The page navigates to the correct page without errors. | Pass |
| Game Mode Functionality | 1. Select a game mode from the dropdown. 2. Complete a round of the selected game mode. |
The game functions correctly and responds appropriately to inputs. | Pass |
| Wrong answer Shake Animation | 1. Start the game. 2. Select an incorrect answer. |
The equation display briefly "shakes" to indicate the incorrect selection. | Pass |
| Correct Answer green background | 1. Start the game. 2. Select a correct answer. |
The selected answer changes style (green background) to confirm correct answer. | Pass |
| New Equation Generation | 1. Start the game. 2. Answer the first question correctly. 3. Check the equation display. |
A new equation is displayed immediately with different numbers. | Pass |
| Score Incrementation | 1. Start the game and note the initial score (0). 2. Answer a question correctly. 3. Observe the score display. |
The score increments by 1 for each correct answer and reflects your performance. | Pass |
The following Jest tests were created to ensure the correctness of key functions, more detailes on jest testing can be found here
- Verify that the dropdown menu toggles between open and closed states:
import { toggleDropdown } from './gameModule';
test('toggleDropdown toggles the open class on the menu', () => {
const menu = document.createElement('div');
toggleDropdown(menu);
expect(menu.classList.contains('open')).toBe(true);
toggleDropdown(menu);
expect(menu.classList.contains('open')).toBe(false);
});- Ensure that equations generated in different modes are correct:
import { generateEquation } from './gameModule';
test('generateEquation produces valid addition results', () => {
const { num1, num2, answer, operator } = generateEquation('addition');
expect(answer).toBe(num1 + num2);
expect(operator).toBe('+');
});
test('generateEquation ensures no division by zero', () => {
const { num1, num2, operator } = generateEquation('division');
expect(num2).not.toBe(0);
expect(operator).toBe('÷');
});- Validate the behavior when a correct or incorrect answer is chosen:
import { handleOptionClick } from './gameModule';
test('handleOptionClick returns true for correct answers', () => {
const mockOption = { querySelector: () => ({ textContent: '5' }) };
const regenerateEquation = jest.fn();
const correct = handleOptionClick(mockOption, regenerateEquation);
expect(correct).toBe(true);
});
test('handleOptionClick returns false for incorrect answers', () => {
const mockOption = { querySelector: () => ({ textContent: '3' }) };
const regenerateEquation = jest.fn();
const incorrect = handleOptionClick(mockOption, regenerateEquation);
expect(incorrect).toBe(false);
});- The project was deployed to GitHub Pages, a live version of the website can be found here
- Clone the repository:
git clone https://github.com/Aziz-Ibrahim/math4kids.git
- Navigate to the directory:
cd math4kids - Open
index.htmlin a browser.
- At the time of creating this project, I wasn't very confident in testing with Jest, so I created a replica of my game.js file to be used as an ES module that I can export from for testing while maintaining DOM accessibility on the main Javascript file. I would like to improve on that field.
- Add multiplayer mode for collaborative learning.
- Expand problem types to include fractions and geometry.
- Scores and Badges: Visual indicators of achievements.
- Performance Graphs: Weekly and monthly progress reports.
- Customization: Options to select difficulty levels, themes, and problem types.
- Parent Controls: Manage access and monitor activities.
- The idea behind this project was inspired by Miguel Nunez.
- All math problems and activities were designed in-house.
- Icons from FontAwesome.
- Images from Stockcake.
- Favicon from favicon.io
- VS Code for development.
- Lighthouse for performance and accessibility checks.
- WireframeCC for creating wireframes.
- Image Resizer for sizing hero image.
- Iuliia Konovalove: For feedback and improvement insights.
- Family and Friends: For feedback and testing.
- Online Communities: Resources and tutorials for inspiration.