How to Integrate JavaScript with Storyline 360?
JavaScript is a programming language that allows for advanced functionality and interactivity in eLearning courses, making it valuable for authoring tools such as Articulate Storyline 2 and Articulate Storyline 360 which supports JavaScript.
Why JavaScript in eLearning courses development?
Creating dynamic interactions using eLearning authoring tools can be time-consuming, as it involves setting up triggers, actions, conditions, and variables. However, JavaScript can enhance your eLearning courses and significantly reduce development time. It allows you to extend the power of the built-in tools and create advanced functionality. With JavaScript, you can create out-of-the-box eLearning interactions that complement the features of the authoring tool.
| Get in Touch |
| Book a free consultation with our experts and take your learning to the next level. |
For instance, using JavaScript in Articulate Storyline enables the creation of complex mathematical functions including the generation of random numbers, which would be difficult to achieve using only the built-in features of Storyline.
The string functions in JavaScript are also very useful when it comes to splitting text or counting the number of words, replacing and searching text based on keywords.
What are the types of variables in Articulate Storyline, and how can JavaScript simplify trigger grouping and execution?
Articulate Storyline has three types of variables – Text, Number and Boolean (True/False), which require various triggers to execute. When working on complex interactive eLearning courses, developers may encounter difficulties with the trigger panel being overwhelmed with numerous triggers. JavaScript simplifies such tasks by grouping variables and executing them with just a few lines of code. This, in turn, reduces eLearning development time and allows us to focus on making the eLearning more interactive.
How to insert JavaScript in Storyline?
Let’s use an example to illustrate best practices for applying JavaScript to eLearning courses. We’ll use the example of displaying the date and time in Articulate Storyline 360 using JavaScript.
To display the date and time in Storyline 360, follow the steps below:
Step 01: Open a new project in Storyline.
Step 02: Create a text variable, name it as per your choice. In my case, I named it as “dateAndTime”
Step 03: Create a new trigger to execute JavaScript when timeline starts
For example, to assign the date and time to a variable called “dateAndTime”, you could use the following JavaScript code:
var player = GetPlayer();
setInterval(function() {
player.SetVar(‘dateAndTime’, new Date(new Date().getTime()).toString().split(‘GMT’)[0].trim());
}, 1);
Explanation of the code:
- GetPlayer() – Is a player object written by articulate.
- setInterval – Is a JavaScript looping function.
- Date() – Is a predefined JavaScript Object.
| Get in Touch |
| Transform your classroom training material into eLearning. Get in touch with us to know more. |
- SetVar() – Is a function available inside GetPlayer() object which accepts our variable as first parameter and its value as second parameter.
- GetTime() – Is a function inside Date() object that returns current date and time running.
- toUTCString() – Is also a function that converts the date into a UTC format String.
Step 04: Add a text box on the slide with your variable name between “%” signs as shown below.
%dateAndTime%
Step 05: Publish your slide and see the magic of JavaScript integrated in Storyline.
Conclusion:
JavaScript in Storyline 2 / Storyline 360 enables developers to create advanced functionality, streamline development, and enhance the learner experience, resulting in engaging and effective eLearning courses for modern learners.
Articulate Storyline 360 – Free Training Tutorials
Swift eLearning Services provides a valuable opportunity for individuals who are enthusiastic about acquiring skills in using Articulate Storyline 360, a popular e-learning authoring tool. Through these free tutorials, individuals can access valuable resources that will help them understand the intricacies of Articulate Storyline 360. The tutorials cover a wide range of topics, including how to create animations, interactions, and assessments, among others. The company offers these free tutorials to enhance the learning experience of users, making it easy for them to navigate the software and create high-quality e-learning content.
Please click on the below link to view our Articulate Storyline training videos.
Frequently Asked Questions (FAQs)
1. Does articulate use JavaScript?
Yes, Articulate Storyline 360 has built-in support for JavaScript. It allows eLearning developers to incorporate JavaScript to add interactivity, create custom functionality, and manipulate content in various ways. By leveraging JavaScript, developers can enhance the learner experience and create engaging and effective eLearning courses.
2. How to get a Storyline variable in JavaScript?
To get the value of Storyline variables, you can use the ‘player.GetVar’ method. This method takes the name of the variable as its parameter and returns the value of the variable.
In other words, you can use ‘player.GetVar’ to pull information from Storyline variables and ‘player.SetVar’ to push information into Storyline variables.
3. How to assign JavaScript to a variable?
You can insert JavaScript code to a slide by creating a JavaScript trigger. To do this, click on the “Triggers” button in the top menu and then click on the “Add Trigger” button. In the “Add Trigger” window, select “Execute JavaScript” as the trigger type and then enter your JavaScript code in the “Script” field.
Note: You need to have a basic understanding of JavaScript to use it in Articulate Storyline 360.
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.
Dear Judy,
Thanks for posting your comment.
We will look into this and get back to you as early as possible.
Regards
Team Swift