- Credits
- The aim of this project is to introduce a fun, easy to understand and exciting environment for children to practise their maths skills. The content of the game will be a very simplistic style, with no distractions other than the sums on the screen. I feel that children learn best through repetition and although the premise of the game is one of repetition, the combination of variety of sums (taking into account the randomly generated numbers and the randomly generated operators) is immense so there should not be a moment to relax.
- This should also provide the opportunity for parents to play alongside their children, working together to acheive a great high score, with the child answering the managable sums and the parents stepping in to help with the more difficult questions.
- For the older children there is higher levels of mathematical problems to solve. Still in keeping with the basic four arithmatic operators but dealing with higher numbers.
- For adults there should be an element of interest there as well with a combination of the medium and the hard levels. This is an excellent method of keeping the brain active in a simple, pick up and play premise and even in easy level it is still possible to get carried away and trip yourself up which just adds to the fun.
-
Speedy Sums was inspired by the Code Institute walkthrough project "Love Maths". Whilst working on the walkthrough I thought it would be fun and educational to have a game that had a learning aspect along with the feeling of being under pressure making the whole thing a little more exciting.
-
Whereas the walkthrough offers the choice of which type of sum you're faced with, i.e addition, subtraction etc, I thought it would be more fun and challenging to not know what variety of sum you're going to be faced with. Add to that, with a 10 - 15 second timer counting down, the pressure should unevitably start mounting.
-
I wanted this game to appeal to all ages. Young children can enjoy a challenge in the easy level, whilst adults can test their maths knowledge in the medium and hard levels.
-
This site should appeal to and be suited for :
-
Parents who would want to encourage their child to practise their mathematical problem solving using a fun application that could distract the child from thinking about the educational aspect.
-
A child currently attending primary school with a basic knowledge of maths.
-
A teenager currently attending secondary school with a stronger grasp on solving basic mathematical sums.
-
A child/teenager with a weaker grasp on the academic side of maths but enjoys playing games and thrives through repetitive learning.
-
An adult who enjoys the pick up and play aspect of games and enjoys the excitement of playing against the clock to solve even the simplest of questions.
-
-
Site objectives for new users
- I want the user to have a clear understanding of the concept from the start. The opening screen has but one option and thats to open the game. The following page has a simple instruction paragraph informing the user that the goal is to simply answer the given sum within the allocated time window. The user then has to select one of three options, Easy, Medium, or Hard to enter into the actual gamepage.
-
Site objectives for returning users
- The incentive for returning users would be to better their high scores or to try another, harder level. This could be used as an incentive scheme for younger children to improve their high scores to recieve physical rewards from their parents/ teachers.
-
User Conclusion
- The user should feel that after playing the game, first and foremost , that they had fun. I wanted the site to be bright, vibrant and fun looking. Appealing to young and old.
- The user should also feel that this has been a stimulating experience, without the timer the game would be too easy all round but with the introduction of the timer, there is always an element of pressure behind every sum.
- The user should feel a want to return to the game simply to spend 5 - 10 minutes playing it as a brain training exercise, to improve their high score, and / or to encourage their young ones to practise their mathematics in a fun, safe environment.
-
When planning out this game I thought it important to implement the same 5 planes of UX that I had used when designing my Milestone Project 1. Doing this makes the process an easier task.
-
The strategy for this game was to create an exciting, fun, vibrant environment where users young and old can practise their mathematical problem solving skills. Reports** show that if a mundane task is incorporated into a game environment then children are more likely to tackle these mundane tasks. It was with this in mind that I thought of creating a game with young children in mind that could see them solving mathematical problems with a high score record that they could show off, brag about, and aim to better along the line. Whilst considering the concept I felt that there would be adults that would enjoy the challenge too so that spurred on then the option to have an easy, medium, and hard level with obviously increasing difficulty levels. I dwelled on using fun elements to label these levels , ie animals or faces etc, but I felt that could put some users off so I decided to stick with plain and simple Easy, Medium and Hard as level titles.
-
The overall site is to be a very simplistic, colorful and striking environment. Big bold letters in a lighthearted font that will prove easy to read, and to instill a sense of fun from the start. To differentiate between levels I decided on bold colors in the background so there should be no mistaking which level the user has opted for. There will be fun, gentle theme music playing through the entry page to occupy the player whilst choosing a level. There will be music accompanying each game level but this theme will have a more intense feel to it though keeping it lighthearted and fun.
-
As with my Milestone Project 1, I have learnt my limitations over the course of this project so I planned for this site to be very simple. As mentioned previously I wanted a site that would be accessible to young and old, therefore, I felt that the best user interface would be one of simplicity. Basically the structure would only consist of three real elements, the landing page (which is simply a one off greeting page), an "entry" page which is where the purpose of the game is explained and presented to the user are the three main options for level difficulty. In this way, I felt that the game could be handed to a child, unsupervised and they would have no difficulty getting a game up and running.
-
The 'bones' of the game was sketched out in Balsamiq, as mentioned, I was wanting to keep the look and feel of the game very simplistic so as to not become too overwhelming. Strong, big, bold fonts accompanying strong primary colors based on a traffic light system with a primary green being the easy level, an amber/orange color representing the medium level and finally the red to distinguish the hardest of the levels. The landing page and the "entry" page would have a blended gradient background consisting of the three main colors for continuity.
-
It is of course at this stage when my actual level of understanding of coding comes into play. I felt very comfortable with designing the look of the game and getting all the elements to position correctly within the game area. The Javascript side I opted for a simple approach, keeping functions to a minimum where possible, and by distinguishing each levels javascript code into it's on .js file. Upon researching this approach, it seemed an acceptable, clean way of operating so I was happy to continue in this fashion.
- Above is a summary of the wireframes for this site (The mobile view). The basis of the site is very simple. One main landing page, very simplistic just to welcome the user to the game. Upon clicking to play, the user is taken to the entry page where again, in a very simplistic manner, the instructions on how to play the game are outlined in a very simple paragraph and below this are the three game options, Easy, Medium, and Hard. Below are the links to this aspect of the game in their respective full views.
- Above we have the screen presented to the user upon either answering a question incorrectly or by the user running out of time. Either way the user is given the option to either play again or return back to the main menu. Below are the links to this aspect of the game in their respective full views.
- Above are the wireframes for the game in tablet view. Below are the links to this aspect of the game in their respective full views.
-
Finally, above is the main views in desktop mode. Again, below are the links to this aspect of the game in their respective full views.
The colors I have chosen are based around a very plain and simple primary colorscheme. The main theme is that of a traffic light system with green being the easy level, orange(amber) representing the medium level, and red to indicate the hard level.
I chose a darker variant for the hover variants to indicate the button about to be selected.
To ensure the text is easily readable throughout the game I ran the colors through the coolers.co color contrast checker and was happy with the results as shown below. Admittedly, I would have prefered a higher score on the hard level and I played around with different variants of the text color but I felt the change in text color felt unusual and somewhat out of place so I thought that with the chosen colors being pleasing to my eyes that I would stick with the continuity of the selected color.
- I adopted these colors in the following styles:
- I used a gradient effect using the four main sourced colors #44F544, #FFA500, #FFFF00 and #FF0000 on the greeting page and the landing page and on the in game buttons.
- I used the color #44F544 green on the easy level button and for the background color of the easy level.
- I used #3BD43B as a variant of #44F544 to indicate the hover effect on the easy level button .
- I used the color #FFA500 orange on the medium button and for the background color of the medium level.
- I used #D18800 as a variant of #FFA500 to indicate the hover effect on the medium level button .
- I used the color #FF0000 red on the hard button and for the background color of the hard level.
- I used #CF0000 as a variant of #FF0000 to indicate the hover effect on the hard level button .
- I used #FFFF00 yellow as the button color in the game over box.
- I used #000000 black as the main and only color of text throughout the game.
-
For the textual elements I imported in two font family variants from Google Fonts.
- Londrina Solid regular is used throughout as the brand text.
- I opted to stick to the one font-family being Londrina but in finer pieces of text I used a lower font-weight of 300.
-
To enhance the fun factor of the game I wanted to add music to the different stages of the game. As a hobbyist freelance composer I had written a soundtrack for another farm based game application so I decided to save time and re-source the music for my own uses and in doing so I would also avoid any copyrighting issues.
-
The main theme of the game would be triggered when entering into the entry page wherein you decide which level to play. The music would be lighthearted and fun and would instill a sense of fun to the user and add to their overall enjoyment. Although I anticipate the audio runs for plenty of time for the user to make their decision about which level of gameplay to choose, I chose to loop the audio so in the event of the user becoming distracted with something else, the music will continue to run.
-
The gameplay themes would then be triggered upon entering into a game mode. There are three different themes for the three different levels of difficulty. I hoped this might add a bit of variety to the audio elements as well. This set of music will be slightly faster and more concentrated in hurrying the user along. I feel that this is done in a gentle but effective manner. However, as a bit of a 'curveball' in the hard level the music gently increases in tempo which I would hope might instill a sense of panic in the user as if the hard level isn't hard enough! As with the main theme, I chose to loop the audio so that it runs continuously throughout the game, and only ends when the answer is incorrect or the user runs out of time during a question.
-
If the answer is incorrect or the user runs out of time, then the game over box will arrive to a downward chromatic scale of music, aurally indicating the end of the game.
-
- Landing page features the main game title appearing from the back of the screen to the front and a simple "Click to play" message to guide the user into the main menu screen. There is no audio with this aspect.
- The main menu screen features a brief but concise outline of how to play the game and three brightly coloured buttons indicating the level of difficulty through words, (Easy, Medium and Hard), but also through colours with green indicating the easy level, orange for the medium level, and red for the hard level. In the footer there are links to three social media sites, Facebook, Twitter, and Instagram. In the "real world" environment these would link to the fan based pages on these platforms. The page features a main theme tune, setting the mood of the game.
- The main game pages on desktop/laptop features the game title, the level difficulty, the countdown timer, the newly generated sum, and the answer-box area. I have chosen to omit the footer social icons element. The reason for this is that as a keen gamer myself I have played many games and would very rarely see such icons during the actual gameplay element. The game pages each feature an individual game theme audio which adds to the enjoyment of the game and again helps to set the feel of the game for the user.
- The main game pages on tablet/mobile view features the same features as the desktop/laptop view but due to these devices lacking a physical keyboard I have included a virtual number pad with the numbers 1 through to 0 and a check button to submit the answer. Alongside the check button I have included a clear button that will clear the answer-box if an answer is inputted incorrectly or if the user should change their mind about the answer. As with the desktop/laptop view the audio is also present throughout.
- In the event of the time running out or an incorrect answer is given then a game over message will appear over the game elements. This will alert the user the reason for the game being over, and the option to play again or head back to the main menu. These options will be present in the shape of two brightly coloured buttons clearly marked as "Play again" or "Main Menu". The audio element for this is a very simple chromatic downward run which only fires the once and lasts the approximate duration of the game over element coming to the forefront.
- Landing page features the main game title appearing from the back of the screen to the front and a simple "Click to play" message to guide the user into the main menu screen. There is no audio with this aspect.
-
- As a game I could envisage more to this 'Speedy' brand than just simple mathematics.
- In future incarnations of the game I would include fractions, algebra, and other mathematical problems that can feasibly be thought out 'on the fly' against the clock. This would also add to the levels and educational purposes of the game.
- As a future feature I would like to see, as the score increases for the numbers themselves to start rotating and bouncing around their area making it hard to concentrate on working out the answer.
- As a future feature I would like to add a new aspect to the sums wherein new combinations of sums are presented. These would look similar to: 4 + _ = 10, _ / 3 = 12, 3 _ 3 = 9 and so on. In this mode the user would be filling in the blanks keeping the style of the game familiar but moving things around. Add this to the existing game mode and I feel the user is presented with a very challenging game.
- As issues being highlighted during user testing, I would include an option button wherein the user could disable the timer aspect and to disable the audio.
- Whilst not actually a feature I would include within this version of the game, I could see the potential to develop a "Speedy Spelling" game. This would retain the overall look of the game but instead of the user being confronted with sums the user would hear a word that he/she had to spell with blank lines in the easier levels indicating the number of letters expected and in the harder levels just a space to spell the word.
- As a game I could envisage more to this 'Speedy' brand than just simple mathematics.
- The following elements are selectable:
-
The Landing Page:
A "Click to play" element is the only selectable option for the user, this is in keeping with the bare, simplistic feel of the game. -
The Entry Page:
Here the user is presented with three buttons, each representing a level of difficulty for the user to choose from.
In the footer, there are the standard social icons for Facebook, Twitter, and Instagram which in a real world scenario would link to the relevant Speedy Sums game fan pages. -
The Game Pages Desktop Mode:
In desktop mode the user will be presented with 2 randomly generated numbers and a randomly generated operator as a sum. The user will be relying on the computer keyboard to enter the answers. -
The Game Pages Mobile/Tablet Mode:
As with the desktop mode, the user will be presented with 2 randomly generated numbers and a randomly generated operator as a sum.
The user will be lead to answer the questions using a virtual number pad consisting of numbers 1 through to 0, and a Check button for submitting the answer.
Along side the Check button will be a clear button where the user can clear the answer-box if a wrong number is inputted or if the user wishes to change their answer. -
The Game Over Feature:
In the event of the user answering a question wrong or running out of time, they will be presented with a game over modal informing them of their current score and the options to either play again or head back to the main menu.
-
- This site was constructed using:
- HTML5
- CSS3
- Javascript
- jQuery
- Bootstrap 4.2.1
- Fontawesome
- Balsmiq was used for creating the wireframes for this project.
- Audio was created using Ableton Live 9.5, Cockos Reaper, IK Multimedia's Sampletank 3 and Eastwest Symphonic Orchestra and performed with Yamaha and M-Audio midi controllers and various live instruments.
-
To fully test the site on multiple 'real-world' devices I needed to create a live link to the site that could be accessed universally. To do this, a simple procedure is required.
- Step 1: Open Github.com and sign in.
- Step 2: Once signed in you should see your repositorys in chronological order.
- Step 3: Select the repository you wish to create a link for and once selected click the settings tab on the page.
- Step 4: Within the settings page you will be given the option to rename the repository, add an image to customize your social media preview, and many other options to be explored at a later date.
- Step 5: Scroll down and you will find the heading for GitHub Pages.
- Step 6: At this stage the 'source' field should read 'none' so click on the button and select 'master'
- Step 7: Once this is selected, hit save and the page should refresh bringing you back to the top.
- Step 8: Scroll back down to the Github pages section and you will now see a message informing the user that the site is ready to be published and a highlighted link. Make a note of the link address for future reference or click the link to access the site direct.
-
From this point on you can type in and access your site on any device with an internet browser which is ideal for testing purposes.
- You must first ensure that you have a current Github account.
- Be running the most up to date version of Google Chrome with the Gitpod browser extension installed.
- Login to Github with your own github account.
- Navigate to the Project Github Repository page.
- Click the New button, this will trigger a new workspace.
- Under Create a new Repository select Import a Repository
- Now, in the Your Old Repository Clone URL field, type in ""
- Enter in a new relevant repository name and click Begin Import.
- After a short while you'll recieve a message saying that the new repository is ready with a link to take you to it.
- From here on, open gipod and continue future developments.
-
Throughout the development stage I used a handful of methods to ensure the site looked and acted appropriately.
These included:-
Chrome Dev Tools - for testing stylings, sizing, and responsiveness
-
Mozilla Dev Tools - for testing stylings, sizing, and responsiveness
-
http://ami.responsivedesign.is/ - again for testing stylings, sizing, and responsiveness.
-
https://coolors.co/ - for picking color schemes and testing contrast colors
-
Github Pages - to access the live site across different devices
-
Google Lighthouse - to test perfomance
-
- User 1: Being the parent!
- As a parent I would want to see a game with this premise to be instantly visually appealing, with little to no distractions on the page. Therefore I would feel comfortable leaving my child to navigate through the app on their own.
The simplistic look of the pages fit this criteria and even should the child select the social icon links then they will be lead to the relevant "Speedy" pages of each social media platform.
Using the application for the first time I want to be able to navigate quickly through the initial set up to get the game up and running and I feel this is done adequatly with a 2 click navagational system, one to enter the menu and one to select the game level. The visual representation of the high score is important as a constant reminder of what the child needs to acheive to better themselves and to spur them on to do better.
- User 2: Being the child!
- As a child I want to be drawn to the game with visually appealing graphics / fonts and be given a game that I can acheive a good score from the start. Also, it's important to be given a challenge so the inclusion of harder levels would keep the interest there for a duration of time.
It's important to be able to visually differentiate between levels so again the traffic light system implemented acts as a good visual representation of the level of difficulty I have selected.
- User 3: Being a teenager/adult!
-
As a teenager / adult, I would like to be presented with a challenge in an application that is suited to the pick up and play genre. The game would be one that I can enjoy on my own, with friends, or with a younger sibling/child.
-
During the testing process, the game was played by a variety of ages:
-
Elderly
- My mother who found the navigation around the game very easy to get to grips with.
- She enjoyed the easy and the medium levels but found the hard level too hard to enjoy.
- She thought the music was complimentary and suited the look and feel of the game very well.
- She did not like the feature of the timer counting down putting pressure on her. She suggested being able to turn off the timer aspect of which I considered a possibility.
-
Middle aged
- My wife found the game enjoyable and the navigation easy to understand.
- She found the easy level to be the favorite and enough of a challenge due to feeling under pressure.
- She thought the audio aspect could become a little repetitive so an option to disable the sound would be something to consider in the future.
- Like my mother it was suggested that the option to be able to disable the timer is something that could be considered or to be able to increase the allocated amount of seconds.
-
Secondary age
- My daughter (who loves Maths) found the game to be very enjoyable and the navigation easy to understand.
- She attempted all levels and enjoyed them all, although she was presented with sums that were very difficult in the hard level but she still enjoyed the experience.
- When asked about returning back to the game she felt there was enough of an appeal to return to the game just for short burst, quick, time filling games.
-
Primary age
- My brother in law played the game with his 9 year old son and they found the game to be easy to navigate and get started.
- The easy level was their favorite due to their own skillsets and whilst the gameplay wasn't overly long, during the game, the child was suitably engaged.
- When asked about returning to the game, the honest reply was that the father would bring the game to the son, realistically, the game isn't really suited to the boys interests but they would try and sit down for 10-15 mins a session just to play something that was fun and educational.
-
My conclusions from the user tests are that although the subject matter is one of very personal taste and primarily academic, I feel that there is scope there for users to feel an element of fun and excitement when playing the game. It is possible that the game would become repetitive after long stints of playing but I feel that every game has that shortfall with the most addictive games being ones based on a repetitive nature.
- Problem: Subtitle on easylevel.html stuck to left side of page
- Fix: Adjusted styling width to 100%
- Problem: Trying to have timer and first question appear when start button is pressed.
- Fix: Removed the timer from within it's own dedicated function
- Problem: Game buttons on entry page had lost their styling elements.
- Fix: Discovered I had made changes to the Id tag that was overriding the original stylings.
- Problem: Screen jumping when hovered over answer box
- Fix:I discovered that the div that the answer box was located in had a wider value than the body of the page so I set the width to 100% and that fixed the issue
- Problem: Score not refreshing back to 0 when selecting the play again option from the end of game prompt.
- Fix: I encased the "Play Again" button in an "" with a href to "reload" the page.
- Problem: High Score won't accept the latest high score.
- Fix: Even though I was passing the correct values to the local storage I hadn't been accessing the high score from the local storage for use within the if statements.
- Problem: The High Score function was not running in new instances of the game only in existing workspaces.
- Fix: I started off the function with accessing the local storage and then running the conditions, before I was setting the conditions and then accessing the local storage.
- Problem: High Score not displaying in the event of the game finishing due to time running out.
- Fix: I discovered using the google dev tools for application local storage that the value was being stored so I decided to add a line of code as part of the time running out statement that simply printed out the value stored in the local storage.
- Problem : Timer not refreshing when correct answer given.
- Fix : I originally had the timer wrapped inside a function but I removed the "function" casing and in the checkAnswer function I reset the timeleft back to 10.
- Problem : When playing the game on mobile devices the built in android keyboard keeps showing blocking half of the screen game.
- Fix : I researched the issue and applied the inputmode="none" method to the input line.
- Problem : Css styling wasn't affecting the appearance of the game on iPhones. The background was running short and the numbers in the answer-box were being cut in half.
- Fix : I tried a variation of changing the background to a vh value, and a line height of 1em and that seems to have fixed the issue on the devices that I could use for testing.
- Problem : The clear button was not actually clearing the answer-box but rather generating a whole new sum.
- Fix : I discovered that within the gamepage code I was calling the clearAnswer function, and I wasn't 'listening' for the function within the event listeners. Therefore, I deleted the function call on the gameplay page, and added an event listener to call the function once selected. I altered the function too to clear the answerbox and leave the remaining time as it stands.
- Problem : The social icons in the footer section of the entry page were returning an error code 404.
- Fix : I discovered that I hadn't the full URL of i.e. https://www.facebook.com.
- Problem : Struggled to get css styling to suit every device available from virtual to physical devices.
- Fix : Created multiple breakpoints throughout the css file to accomodate multiple stylings
- Problem : Running the code through the CSS validator showed up a few warnings regarding instances of -webkit- attributes that weren't necessary.
- Fix : Using the advice offered by the validator I removed the -webkit- attributes from the code and the code ran clean.
- For the easylevel.html, the mediumlevel.html and the hardlevel.html pages I received the following warning that the inputmode attribute is not supported in all browsers. I ran this problem by my mentor who assured me that it was an issue not too worrying, it is only a warning and the attribute seemed to be working fine all round.
Links to the full validation pages below:
- Link to the landing page validation
- Link to the entry page validation
- Link to the easy level validation
- Link to the medium level validation
- Link to the hard level validation
- Running the style.css code through the CSS Validator showed up only a couple of mistakes which was easy fixed giving me a clean, validated code.
- I have run the four .js files through JSHint and due to the similarities in the files they all return similar results.
- Of the twenty warnings, seventeen of them are based on my use of 'let'.
- JSHint has highlighted there are ten unused variables and one undefined variable. I ran this past my mentor who assured me that this was common enough and not to be too concerned.
- I ran the program through the Google Lighthouse test to check the overall results and was delighted by the overall figures.
- In desktop mode:
- In mobile mode:
-
For instruction on how to create the title animation on the landing page I refered to here:
-
For instruction on how to create a countdown timer I referred to here:
-
Credit - https://stackoverflow.com/questions/31106189/create-a-simple-10-second-countdown
-
For reference on how to create a "Game Over" alert box I referred to here:
-
For instruction on how to set up a virtual keypad in the game I referenced:
-
Credit - https://codepen.io/erkmen/pen/pyjxOY
-
For reference on how to store High Scores within the game I referred to:
-
Credit - https://www.w3schools.com/jsref/prop_win_localstorage.asp
** Educational Reports:
- Credit - https://www.healthychildren.org/English/ages-stages/toddler/fitness/Pages/Caution-Children-at-Play.aspx
- Credit - https://www.researchgate.net/publication/242391086_Report_on_the_educational_use_of_games
- Credit - https://www.teachstarter.com/gb/blog/10-benefits-playing-games-classroom-gb/
Throughout the creation of this project I have referred to the following for assistance and guidance:
- https://codeinstitute.net/
- https://www.w3schools.com/
- https://stackoverflow.com/
- https://css-tricks.com/
- https://www.tutorialspoint.com/
- I would like to thank Code Institute for the knowledge and the motivation shown to me up to this point. I would also like to thank my mentor Arnold Kyeza for his advice in completing this project and the many fellow slackers who have been both helpful and supportive in equal measures. Thanks also go to my friends and family who have taken time to test the game for me in the past few weeks. I am so proud to have worked through the Javascript modules and have retained enough understanding of the concepts to make sense of and bring to life this nice little game. Thanks to Code Institute I am starting to feel that I have a place in the world of software devlopment. I look forward to the rest of the course and a new future career.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
