Variables

Hi Jin,

That's one of my early favorite tutorial videos on variables because it demonstrates the calculation of combined variables.

Answer to your first question is to click the Insert tab > Buttons > Radio Button. These are pre-built radio button objects you can use to build custom interactions like the one in the tutorial.

Answer to your second question is more about design first. In Jeanette's example she's gathering input data on the user for "salary", "percentage of contribution", and "years to retire" for 401(k) and then calculating how much one would have contributed up to the point of retirement.

While I'm not familiar with Jeanette's logic in how she set this up, there's probably several ways you can accomplish it. Not working this out other than in my head as I type, I'm sure there's a more elegant way. For now, here's how I'd initially approach it.

We need some variables.

• salary - number
• 1percent - number
• 2percent - number
• 3percent - number
• percentOfSalary - number
• years - number
• contribution - number

The slide is set up with a Data Entry Numeric Entry object for "Salary"

Three radio buttons which should all be in 'Button Group 1'

And a Data Entry Numeric Entry object for "Years to Retire"

The calculation happens when you click the "Calculate" button with a couple of triggers:

• Adjust Variable: Set "percentOfSalary"  = "salary" multiplied by "1percent" IF the 1% radio button is clicked (duplicate trigger for each radio button respectively).
• Adjust Variable: Set "contributioin" = "percentOfSalary" multiplied by "years"
• Show Layer [contribution popup] that has %contribution% in a text box to display the final calculation.

Again, probably a hundred different ways to do this, but hope this helps you get off on the right foot.

Kevin,

Thank you for your help. However, I cannot seem to put my brains around the variable part. Please have a look at the file in which I created a slide per your instructions except for the variables. I would appreciate if greatly if you could just set up the variables for me. I would then take a peek at them and that would help me comprehend how the variables work in this situation. Thanks a lot for your assistance in advance!

Hi Jin,

Sorry for the delay.

First, a couple things to know about multiple calculations in Storyline.

Since we have to calculate "salary" by "percent" we need to store that calculation somewhere because we need that value to calculate by "years". Building this out I realized we need one more variable to store the second calculation in order to display "contribution" and to maintain the entered values. I refer to this as "Set & Pass." Meaning we Set a variable by some calculation and then Pass it to another variable so we can later use it for more calculations. Also, my initial thoughts above about how to set it up did work, but working through it I found a better way than using conditional triggers.

Note: you don't always have to do this but when displaying values on screen, you want those values to remain in tact while doing more calculations - that's why we Pass it to another variable.

I noticed you set all the variables first based on my suggestion above...that's good. However, data entry objects will automatically create a variable as soon as you insert them on the slide such as: NumericEntry and NumericEntry1. These two objects are for Salary and Years so we simply rename the default variable name to a name we choose. Also, it's best to rename the object itself in the timeline to match so we keep things nice an organized.

Slide setup:

• Data Entry Numeric Entry object - Object name (timeline) = Salary. Variable name = salary.
• Radio Button 1 - Object name = 1 percent. Variable name = 1percent.
• Radio Button 2 - Object name = 2 percent. Variable name = 2percent.
• Radio Button 3 - Object name = 3 percent. Variable name = 3percent.
• Data Entry Numeric Entry object - Object name = Years. Variable name = years.
• Button - Object name = Calculate
• Text Box - Variable reference = %contribution%

Number Variables:

• 1percent - default value = .01
• 2percent - default value = .02
• 3percent - default value = .03
• salary - default value = 0
• years - default value = 0
• contribution - default value = 0
• PercentOfSalary (container variable) - default value = 0
• yearsXpercent (container variable) - default value = 0

Triggers:

• Default trigger for the Salary and Years data entry objects.
• On each of the radio buttons:
• - Set [variable] PercentOfSalary = [variable] Salary when user clicks.
• - Multiply [variable] PercentOfSalary by [variable] 1percent (2percent, 3 percent respectively) when user clicks.
• - Set [variable] yearsXpercent = [variable] PercentOfSalary when user clicks.
• On Calculate button:
• - Multiply [variable] yearsXpercent by [variable] years when user clicks.
• - Set [variable] contribution = yearsXpecent when user clicks.

If you follow the logic of the triggers you'll see we're setting all our values by user interaction. Salary per user input, percent to calculate by which radio button is selected, and Years per user input are all in their respective buckets. Next we just pass the first calculation to a container variable and then use that container to calculate the next operation. Finally displaying our end result when clicking the Calculate button.

You can use this model for a number of different interactions that have three (3) input values.

Your file attached with the above explanation set up. Note that I put "listener" variables on screen so you can see when they fire.

Hope this helps.

Kevin,

Thank you for taking the time to help me out with this problem.  I think I will need to experiment with the logic a little bit before I can fully comprehend it.  Hey, I really appreciate your support!!  Thanks!!