Embedding a JavaScript Calculator in Storyline

JavaScript CalculatorEmbedding a JavaScript calculator as a web object in Storyline may sound like a daunting task, but it’s by far the best option for including a calculator in your course.

Articulate’s E-Learning Heroes is a great source to answer questions you may have about developing in Storyline. It’s worth mentioning that there are a couple of other calculator options that have been mentioned within the forum over that past couple of years. These include a native Storyline calculator, a calculator embedded within the Resources tab, and a list of other solutions. So what’s wrong with the other solutions? We initially asked the same question. However, after doing some testing, a number of problems became clear with many of the suggested options above.

At a glance, the native Storyline calculator seemed to be the most promising option, but once we started to add variables and additional JavaScript within the course it became clear that this option was going to be more cumbersome and frustrating than we had anticipated.

We then took a look at the linked calculator solution. This option seemed to be heading in the right direction. We setup a calculator on our web server and linked to the file through the course player Resources tab. It seemed like we had a winner… until we tested the course. We found it awkward and distracting for the learner to open a separate window to do their calculations; we typically avoid sending the learner away from the course whenever possible since it can break the continuity of the content. It also became apparent that we would either need to host the calculator on our web server or send the files over to the client to load onto their own servers.

The JavaScript Web Object Option

After deciding to embed a JavaScript calculator we realized that we would need to build a calculator that we could then embed within the course. Instead of building a calculator from scratch, we chose to customize our calculator based off of this example we found online. After some retooling and adding some responsive CSS styling to the code we ended up with the package below.

We should mention that even though the calculator will work at any size, it will render to match the height and width of the web object area. If you would like the buttons to appear as squares, make sure the dimensions of your web object remain in a 4:6 aspect ratio.

Download the javascript package:


Embedding the JavaScript Calculator

You can embed the calculator package within your course file or upload the package to a web server and link to the file dynamically. For the sake of this example we’ll be sticking to the to embeddable option.

First download the .zip package above and extract the contents of the package.

To embed the calculator within you course select the Web Object button within the storyline Insert menu.

ribbon web object javascript calculator

Select the link to Folder icon  Folder Icon  to the left of the Address field and select the location of the extracted calculator package.

Make sure the page options match the screenshot below.

Web Object Options

Select OK and that’s it. You should now see a web object within your course which you can resize and place where you’d like. Once you publish your course and load it onto either a web server or an LMS your calculator should appear and function as desired.