Example Use Case for Instructor-Driven Course Customization

Jun 17, 2021

Have you ever created training content for Instructor Led Training (ILT) delivery that needs to be customized to meet different customers' configurations?  You "solve" the problem by making multiple copies of the content and integrating minor tweaks to each version. This works well the first time, but quickly becomes a maintenance nightmare year after year as each copy of the training content needs to be updated for product updates/statistics.

If this is something you've encountered, and you have access to Storyline, I have an example use case to share with you. You can build an eLearning course for ILT delivery with programming that puts the instructor in the driver's seat to customize the content to each customer's specifications. 

To get started, determine which aspects of the course need to be customized to each customer and what selections the instructor needs to make in order to customize the content. 

To walk you through this, let's use the following example:

You need to create a course that includes information specific to the customer's city and state of residency. For each state, the course should display that state's flag and for each city, the course should include a fact about that city. Finally, the course should also display the average temperature for that city. As you can imagine, several cities might share the same average temperature, as well as some states may share the same city name. These are considerations we'll take into account in our course programming. At the start of the training, the instructor should select the customer's state and city.

Let's walk through how to program this interaction in Storyline.

1. Add Variables

  • Add a Text variable called "State" and set its default value to (blank).
  • Add a Text variable called "City" and set its default value to (blank).
  • Add a Number variable called "Temp" and set its default value to 0.

Variables included in course

2. Add Instructor Selections

  • At the beginning of the course, add selectable interactions (like radio buttons or drop-down menus) that enables the instructor to select the customer's State and City.
    • Recommendation: Have the instructor select the state first, and then have the city be selectable on the next slide, layer, etc. so that the state selection drives which cities are displayed as selectable. Also, make it easy for the instructor to return and make a different State and City selection if needed.

  • Add triggers on that slide to adjust the value of the State and City variables to match the selection made by the instructor.
    • Example Trigger: Adjust variable - "State" variable - to - Oklahoma (value) - When the state of - Oklahoma Radio button - is Selected. (Copy this trigger and edit it for each state you've included in your training). 
    • Example Trigger: Adjust variable - "City" variable - to - Tulsa (value) - When the state of - Tulsa Radio button - is Selected. (Copy this trigger and edit it for each city you've included in your training).

 

3. Add State Flags

  • On whatever slide that you want the state's flag to display, add all flags as different object states or as layers, etc.
  • Add triggers to the flag slide to make each flag display.
    • Example Trigger: Change state of  - flag object - to - Oklahoma (state) - When the timeline starts on - this slide -  if - "State" variable = Oklahoma. (Copy this trigger and edit it for each state you've included in your training).

4. Add City Facts 

  • On whatever slide that you want the city fact to display, add all facts as object states or as layers, etc.
  • Add triggers to the city fact slide to make each fact display.
    • Example Trigger: Change state of - fact text object - to - TulsaOK (state) - When the timeline starts on - this slide - if - "State" variable = Oklahoma - and if - "City" variable = Tulsa. (Copy this trigger and edit it for each city you've included in your training).

5. Add Average Temperatures

  • On whatever slide you want the average temperature of the city to display, add a reference to the "Temp" variable by entering the following text: %Temp%. This can be added to any object that can contain text. 
    • Note: You can also add a variable reference from the Insert tab.
  • Add triggers to the temperature slide to make each temperature display.
    • Example Trigger: Adjust variable - "Temp" variable - to - 70 (value)- When the timeline starts on - this slide - if - "State" variable = Oklahoma - and if - "City" variable = Tulsa. (Copy this trigger and edit it for each city you've included in your training).

Note: As several cities may share the same average temperature, if you prefer, you can integrate JavaScript to do the heavy lifting on this portion of the customization, as it will allow you to program logical arguments like - If State A and City B or State A and City C or State D and City E are selected, set the Temperature to: ## - in one trigger. See details at the bottom of this discussion for more information.

6. Test & Edit

  • Test your course and make adjustments as needed. Select each State and City to ensure all flags, facts, and temperatures are accurately displayed.

 

Add Average Temperatures - JavaScript Programming

Instead of adding individual triggers for each City and State to adjust the "Temp" variable, you can add one Execute JavaScript trigger to the temperature slide with the following programming.

  • Note: In this example, Cleveland, Ohio and Tulsa, Oklahoma have the same average temperature. You could adjust this to whatever needed to be programmed. 

Action: Execute JavaScript

JavaScript:  

var player = GetPlayer();

var javaState = player.GetVar("State");

var javaCity = player.GetVar("City");

var javaTemp = player.GetVar("Temp");

if ( ((javaState === 'Oklahoma') && (javaCity === 'Tulsa')) ||
((javaState === 'Ohio') && (javaCity === 'Cleveland')) ) { javaTemp='70';}

player.SetVar("Temp",javaTemp);

When: When the timeline starts on 

Object: this slide

 

Hope this is helpful, and happy programming!

Be the first to reply