During the Covid pandemic, many parents have been required to facilitate education for their children at home. Often, parents have found themselves juggling full time jobs and home education responsibilities. School work, especially for younger children, requires a high degree of facilitation and help from busy parents. Interative web based maths games can give children an engaging way of learning new maths skills and reinforcing existing maths knowledge independently.
To provide a simple and engaging maths game that young children are able to play independently to learn new maths skills and to reinforce existing maths knowledge.
Developing the site will serve as a learning experience for the developer. The finished website will act as a showcase for the developer's new skills and will also help to raise the developer's profile. The developer also hopes that his 7 year old son will become a keen user of the site!
To play the maths game for fun, to learn new maths skills and to reinforce existing maths knowledge.
The following opportunities were identified and ranked using a score of 1 - 5 for importance and viability:
| Opportunity | Importance | Viability |
|---|---|---|
| Balloon Pop Multiplication game | 5 | 4 |
| Balloon Pop Division game | 3 | 4 |
| Balloon Pop Addition game | 3 | 4 |
| Balloon Pop Subtraction game | 3 | 4 |
| Contact Form to contact developer | 3 | 5 |
| Link to developer GitHub page | 4 | 5 |
| Subscribe Option | 1 | 2 |
The opportunities matrix was used to help decide which items should be included for the initial development phase (phase 1):
| Item | Development Phase |
|---|---|
| Balloon Pop Multiplication game | 1 |
| Contact Form to contact developer | 1 |
| Link to developer GitHub page | 1 |
| Balloon Pop Division game | 1 |
| Balloon Pop Addition game | 1 |
| Balloon Pop Subtraction game | 1 |
| Subscribe Option | 2 |
- The primary users of the site will be Key Stage 1 and 2 school pupils from ages 5 to 10.
- A simple, bright, colorful and engaging design would fit this demographic.
- Visually engaging.
- Easy to navigate.
- Easy to update game settings.
- Responsive design is required as users may be viewing the site on Mobile, Tablet or Desktop.
- As a user, I am playing the game for fun and enjoyment.
- As a user, I am playing the game to learn new maths skills.
- As a user, I am playing the game to reinforce existing maths knowledge.
- As a user or parent, I would like to to provide feedback to the developer about the game.
- Developer skill set - the developer is currently learning JavaScript.
- Developer's available time - the developer is working full time whilst studying. This coupled with the developer's current skills constraints may impact on whether all four maths games can be incorporated into the site in the initial development phase.
- The user would like to be able to select different maths games to play.
- The user would like to be able to select different options within each maths game - e.g. 2x, 5x and 10x tables within the multiplication game, or addition of numbers up to 20 in the addition game.
- The user would like to be able to set the difficulty level of the maths games - this will give the games a wider age appeal.
- The user needs to be able to initiate the game from the menu, and return to the main menu if they want to abort the current game.
- The user would like to see their current score, and their previous top score. This will mean that the user is more likely to play another game or return to the site in the future to better their previous score.
- The user would like to be able to contact the developer.
- It is not envisaged that the game will be sold for profit. However, the game should be as much fun as possible to play, in order to maximise the learning opportunities for users, increase the game's following and therefore increase the profile of the developer.
The following key features have been identified and scored from 1 - 5 for importance and difficulty. The proposed development phase has also been indicated:
| Feature | Importance | Difficulty | Development Phase |
|---|---|---|---|
| Balloon Pop Multiplication game | 5 | 3 | 1 |
| Contact Form to contact developer | 4 | 2 | 1 |
| Link to developer GitHub page | 3 | 1 | 1 |
| Balloon Pop Division game | 3 | 3 | 1 |
| Balloon Pop Addition game | 3 | 3 | 1 |
| Balloon Pop Subtraction game | 3 | 3 | 1 |
| Subscribe Option | 1 | 3 | 2 |
An initial Site Map was produced, and is shown below:
Hand Sketches were drafted showing the home page and times table game:
Initial Wireframes were then produced showing the Home page layout for each game mode: Multiplication, Division, Addition and Subtraction. The home page Multiplication layout is also shown below:
Initial Wireframes were also produced showing the Game page layout for each game mode: Multiplication, Division, Addition and Subtraction. The game page Multiplication layout is also shown below:
Responsive design wireframes were then produced showing the Home and Game page layouts on Tablet and Phone. The Responsive design wireframes are also shown below:
Whale I Tried has been chosen as the title font, and is used for the main Balloon Pop Maths heading. Whale I Tried is a custom outlined cartoon font available from Misti's Fonts, and is free for personal and non-profit use. This font was chosen as it has a balloon like look and a soft, playful feel.
- font-family: "Whale I Tried", sans-serif;
Nunito has been chosen as the main body font for text content. Nunito is a clean, rounded and modern sans-serif font which works well with the maths game theme and complements the Whale I Tried title font. Nunito is available from Google Fonts and is licensed under the Open Font License.
- font-family: 'Nunito', sans-serif;
The "sky" background colour is a 3 colour gradient generated using ColorSpace. The three colours used (#7CC0FF, #6FD1F4, #9EFBF5) and the colour gradient generated are shown below:
The colour palette was chosen to tie-in with the first colour in the 3 colour gradient (#7CC0FF). Colour ideas were generated using the ColorSpace colour palette generator. The final colour palette selected is shown below:
- #908CD9 - "Blue Bell" - used for buttons, question area, score and high score outlines.
- #9C70BD - "Purple Mountain Majesty" - Used for button highlighting, footer and information area links and audio controls.
- #A2529A - "Purpureus" - Used for modal dialog text, high score text, score text, information text and highlighting.
- #3E8BC6 - "Green Blue Crayola" - Used for button and question area borders,
- #EEFBFF - "Azure X 11 Web Color" - Used for title, button text, question text, balloon answer text and modal dialog background.
- #DC7774 - "Candy Pink" - Used for "Health" bar.
- #A9A9A9 - "Silver Chalice" - Used for text shadow on balloon answer text.
The game logic was developed using JavaScript.
When the user hits the Play button, the heading, options and information sections of the index page are hidden and the game section is shown. The selected options are gathered using functions in the JavaScript Display Interaction Functions Library and are stored in global variables. All global variables are initialised in the JavaScript Initialisation Library and are prefixed with "bpm".
The user is presented with a maths question. The question type depends on the selected Game Mode. 6 potential answers are presented in the answer balloons, 1 correct answer and 5 wrong answers. Random maths questions and correct and incorrect answers are generated using functions in the JavaScript Maths Function Library.
If the game is played on "Easy" difficulty level (selected in options), health is set to 5 hearts. If the game is played on "Medium" difficulty level (selected in options), health is set to 3 hearts. If the game is played on "Hard" difficulty level (selected in options), health is set to 1 heart.
If the user selects the correct answer, the balloon "popping" animation and sound is played using functions in the JavaScript Animation Function Library, and the score increments by 1. If the user selects the wrong answer, the "deflate" sound is played, the selected balloon and answer text fades out and health is depleted by 1 heart. The game continues until the user has either answered all of the questions or their health has been fully depleted.