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
