How to Integrate JavaScript with Storyline 360 to reduce elearning development time?

How to Integrate JavaScript with Storyline 360?

Wondering, what JavaScript has to do with eLearning authoring tools such as Articulate Storyline 2, Articulate Storyline 360, Adobe Captivate? Let’s explore!

Why JavaScript in eLearning?

Creating dynamic interactions using any eLearning authoring tool is a time consuming process and involves set of triggers, actions, conditions and variables. If you want to create out-of-the-box eLearning interactions then JavaScript would the better complement to make the most of eLearning. It also drastically reduces eLearning development time as well.

JavaScript can be a great help to take your eLearning courses to the next level while developing in all versions of Articulate Storyline. It lets you do things to extend the power of the built-in tools in Storyline. For example, JavaScript allows you to create mathematical functions that can generate random numbers which can be more complicated in Storyline.

Similarly, String functions in JavaScript are very useful when splitting text or counting the number of words, replacing and searching text by keywords.

Storyline has three types of variables – number, text, and Boolean (true/false) that need various triggers to execute. While working with heavy interactive eLearning courses, eLearning developers might experience great difficulties with the flooded trigger panel with lots of triggers in it. JavaScript makes such complex tasks simple by grouping the variables and executing it with few lines of code. This in turn will decrease the eLearning development time and allows us to focus on making the eLearning more interactive.

Technical Support Center

If you need help in developing fully customized eLearning courses then get in touch with us.

Steps Integrate JavaScript with Storyline 360

Click on the image to zoom.

Clock Example

In this example, I’m going to show you how to display the running time and date in Storyline using JavaScript.

Let’s get started.

Steps:

Open a new project in Storyline.
Create a text variable, name it as per your choice. In my case, I named it as “dateAndTime”
Create a new trigger to execute JavaScript when timeline starts
Paste the following code

var player = GetPlayer();
setInterval(function() {
    player.SetVar('dateAndTime', new Date(new Date().getTime()).toString().split('GMT')[0].trim());
}, 1);

Explanation for the above code:

GetPlayer() – Is a player object written by articulate.
setInterval – Is a JavaScript looping function. Learn More
SetVar() – Is a function available inside GetPlayer() object which accepts our variable as first parameter and its value as second parameter.
Date() – Is a predefined JavaScript Object. Learn More
GetTime() – Is a function inside Date() object that returns current date and time running. Learn More
toUTCString() – Is also a function that converts the date into a UTC format String. Learn More

Add a text box on the slide with your variable name between “%” signs as shown below.

%dateAndTime%

Publish your slide and see the magic of JavaScript integrated in Storyline.

Conclusion:

JavaScript in Storyline2 / Storyline 360 provides a vast possibilities to unleash our creativity in rapid eLearning development. Using Storyline 360 JavaScript, we have created a demo sample.

CONVERSION OF LEGACY TRAINING MATERIAL TO ELEARNING

Enhance learning effectiveness and deliver learning seamlessly across all mobile platforms and browsers.

CUSTOM ELEARNING CONTENT DEVELOPMENT

Develop custom eLearning solutions based on modern instructional design.

ADOBE FLASH COURSES TO HTML5 CONVERSION

Convert your Flash based legacy e-learning courses to HTML5 responsive courses.

The last comment and 2 other comment(s) need to be approved.

2 replies

Judy Cornelius says:
June 22, 2018 at 9:25 AM

Thanks for the helpful posts. I’m looking for code to enter a pic file into a text field in SL360. The text field is designed to capture written feedback which is then sent to the end user through email via JavaScript. I need the text field to hold a screenshot of the last slide of the course. I’m not a coder. Any help is appreciated.
Reply
- Swift Elearning Services says:
  July 5, 2018 at 12:08 PM
  
  Dear Judy,
  
  Thanks for posting your comment.
  
  We will look into this and get back to you as early as possible.
  
  Regards
  Team Swift
  Reply

Want to join the discussion?
Feel free to contribute!