ELH#132 – Raindrop Math Javascript

This focus on this E-Learning Heroes Challenge was on Extending Your E-Learning Development Skills with JavaScript. There were lots of terrific examples shared in the challenge and I can definitely see using the printable notes and printable certificate scripts in development projects in the future.

Inspired by my two math loving nephews and of course the math teacher in me, for this challenge, I decided that I wanted to create a simple math game. This math game required the use of variables. I wanted to create a game that would be suitable for my nephews and would be different each time they played it.

When I started this challenge, I have to admit that I knew nothing about JavaScript beyond the fact that it was a programming language. I certainly had never tried to incorporate it into Storyline projects. In order to complete this challenge, I started by spending a fair amount of time reading articles and discussion posts in the E-Learning Heroes Community as well as blog posts from other instructional designers.

In order to ensure the game would be different each time that he played it, I used JavaScript to generate and assign random numbers to the number variables. I used six number variables and then combined these to create a variety of different math problems. In addition to these, I used the math features to solve each of the problems and then compare the user inputted answer against the expected total.

Initially, I tried the code from the JavaScript Best Practices for Storyline 2 but found that it was not working as I expected. I'm not sure why it wasn't working, but my research led to an excellent article by Zsolt Olah which explained exactly how to create a loop that would assign random numbers to each of my variables. It worked perfectly.

This interaction incorporates:

  • Personalized Feedback
  • Choice The learner gets to choose from Addition or Multiplication problems
  • Score keeping
  • Sound effects
  • Motion path and timed animations
  • Progress bar

This game has been nephew tested and approved and they are already asking for more math problems. In the future, I would like to modify the game to provide the learner other options:

  • Additional Skills To practice other math skills such as subtraction, and division. I need to think about the changes I need to make to my random number JavaScript in order to ensure that the math problems are at a suitable level for the player (always positive whole numbers).
  • Levels I'd like to have the ability to complete a level and move up to a more challenging level. This would involve simply changing my constraints around the random numbers to generate larger numbers.
  • Badges I'd like to try awarding the learner badges for completing levels or skills.
  • Leaderboard Incorporate a leaderboard using Google Sheets

Not only did this challenge encourage me to begin to learn JavaScript, it also extended my understanding of how to use variables and motion paths in Storyline.



Play Raindrop Math

Test your math skills and play Raindrop Math. Please leave your comments and suggestions below.

Leave a Reply