Creating a Calculator in Storyline

Title with blue background and "162 Creating a Finacial Calculator"

This week’s eLearning Challenge was #162- Share Your Interactive Budgeting Tools, Games, and Financial Calculators. I decided to create a mini course based on one of my favorite blog posts- Mr. Money Mustache’s “The Shockingly Simple Math Behind Early Retirement”. The post talks about the variables that go into (early) retirement, then boils it all down with assumptions to a single table showing the relationship between savings rate and years to retirement.

I wanted to create a course that not only shows that relationship but allows the learner to calculate their savings rate to evaluate their current situation.

The Method

Creating a calculator in Storyline involves a few steps:

  1. Create text entry fields with associated numerical variables for the things you’re adding and subtracting together
  2. Create an additional variable for the total
  3. Create a button to start the calculations
  4. Create a trigger to zero out the total (in case someone changes their number and recalculates)
  5. Create triggers to add or subtract the numerical variables to your variable for the total

This is what that process looked like for my first calculation slide:

Storyline triggers showing calculation order

For the second calculation slide, I not only had to calculate the total savings amount, I also had to run the calculation to determine the savings rate (savings divided by take home pay time 100). Doing those calculations from this calculate button ensured that the information was ready to go on the next slide.

Storyline triggers showing calculations

One last thing I did was creating an animation on the final slide with a “waterfall” of coins. I create a motion path for each coin going straight down, and also added an entrance animation of spinning. It’s an interesting effect.

Storyline slide view showing numerous coin pictures with their motion lines and corresponding triggers


The Result

Click here to see the full interaction

Click here to download the .story file of the calculation slides.