How To Create A Calculator And Perform Calculations in Storyline 360

Last updated:

In preview mode you see a calculator that I’ve built in Articulate Storyline. It can perform add, substract, multiply and divide calculations. For instance 40 x 3 = 120. If you click the CE button the calculator resets itself and i can perform a new calculation.

Now let’s deconstruct how I’ve built this calculator in Storyline and how it’s setup.

When I close my preview modus you see the calculator that I’ve built in Articulate Storyline. I’ve used a shape for the background of the calculator and shapes for the buttons. The screen is a shape with a gradient fill. And on top of the scree you see two textboxes with variable references in it. A large textfield with the variable input 1 and also a smaller textbox with the same reference. Next to the small textbox there is a textbox that indicates which operator you’ve chosen.

Outside my screen there is a textbox with some variable references that help my debug the calculator when I built it. I drag it on to my slide so I can use it.

The first step is that a user can enter a number that consists of multiple digits. This is also the first challenge. I didn’t want a single digit calculator. Now let’s select one of the digit buttons and check the triggers.

Each button has four triggers. The first two triggers are to enter the first number of the calculation. To solve the issue for the dubble digit numbers I multiply input 1 by 10 when a user enters a number. The initial value of input one is 0. So zero multiplied by 10 is still zero. Why this calculation? keep this in mind for a moment I’ll come back to this in a moment.

The second trigger adds the digit corresponding to the button to the variable input1. Both triggers will be executed if the variable operator is false. That way I know a user is still entering his first number.

So what I’ve done so far is the initial content of the variable input1 multiplied by 10 where the outcome is zero and after that I’ve added 3 to input1. So input1 contains 3 now.

But I don’t want to calculate with 3 but with 33. So a user clicks 3 again and 3 must be added to the variable input1. But because variable input1 is a number variable you cannot simple add 3 to the variable. The variable would become 6 instead of 33.

So now the multiply by 10 calculation comes in handy. Remember variable input1 contains 3 and a user clicks the button for 3 again to make it 33. What I do now is I multiply 3 by 10 this makes it 30 and the next step is to add 3 to it. This makes it 33. This also works if 1 want to calulate with 100, 1000….

Now we have the first number of the calculation and it’s saved to the variable input1. The next step is that a user chooses the operator he wants to calculate with.

If I click the plus operators the first trigger sets the true/false variable operator to true. Now I know a user will enter his second number for the calculation.

The second trigger will change the state of the operator textbox to add in this case. Now a user can see which operator he doing his calculation.

The third trigger will change the state of the textbox input1small to normal. So the textbox is no visible.

The last trigger will change the state of the large textbox input1 to input2. Now the variable input2 will be visible

This is what a user sees right now. The next step is to add the second number for our calculation. When a user clicks a digit button the third and fourth trigger will be executed because the variable operator is set to true.

Now let’s assume a user enters 4 as second number. What we have right now is a variable input1 that contains 33 a variable input2 that contains 4. When a user clicks the = sign the result of the sum is calculated.

Let’s check the = sign button for the triggers that make that possible.

Under the = button there are a lot of triggers. The last 9 are there to reset stuff. Let’s start with the first two triggers. I copy the contents of variable input1 and input2 to input1_copy and input2_copy. To perform the calculation.

based on the state of the textfield operator Storyline knows which calculation to perform. add, substract, multiply or divide.  One of the next triggers copies the result of the calculation to the variable outcome. And there is a trigger that changes the state of the texbox input1 to the state outcome. Now the outcome shows in the calculator display.

If a user click on the CE button Storyline resets the calculator. It sets the variable input1 and inout2 to 0. It changes the states of textbox inut1small and operator to hidden and sets the state of the textbox input1 to normal. Now a user can perform a new calculation

Let’s click one of the operators
Enter first number
Save first number
Choose calculation operator
Enter second number
Save second number
Show outcome of the calculation
Reset calculator to perform new calculations

cta under video

You've just read an article from Upward Online Learning

Want to read more articles like this? Sign up for my weekly emails. As a bonus, you'll receive my ebook with my 7 top Articulate Storyline time-saving tips for a perfect start to learning Storyline faster and without any hassle!

Want to know more about creating more effective and engaging e-learning? This is how I can help:

Ultimate Articulate Storyline Online Course

Want to learn Articulate Storyline the smart way? So that you can save up to 40 hours per e-learning course? Subscribe now to my Ultimate Articulate Storyline Training with a $50 discount with the coupon UPWemail.

This online Articulate Storyline course is the fastest way to speed up your Articulate Storyline e-learning skills and learn a proven e-learning development process from design to implementation.

Knowledge Library

Watch over 100 detailed tutorials, reviews and how-to videos from my popular Youtube channel.

Build Better E-learning With Templates

Leave a Comment