How to Integrate JavaScript with Storyline 360?
Introduction
Articulate Storyline 360 is a powerful e-learning authoring tool that enables the creation of interactive and engaging courses.
Storyline 360 offers a plethora of features, including Intuitive User Interface, Built-in Templates, Interactive Elements, Responsive Design, Slide Layers etc.
JavaScript in Articulate Storyline allows you to add custom interactions, manipulate content dynamically, and extend the functionality of Storyline 360. Integrating JavaScript can further enhance the capabilities of your e-learning content development.
In this blog, we will explore the steps to seamlessly 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.
Our Services
bespoke elearning providers
As a bespoke elearning provider, we specialize in creating customized online learning solutions tailored to the specific needs and objectives of our clients, ensuring that their employees receive high-quality, interactive learning experiences that align with their organization’s goals. Read More
localization service providers
As a localization service provider, we specialize in adapting course content, learning materials, and other documents to suit the cultural, linguistic, and regional preferences of specific local audiences. Read More
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.
4. What is Articulate Storyline 360?
Storyline 360 is one of the top e-learning authoring tools used for custom content development. It allows users to create interactive and engaging courses without the need for extensive programming knowledge.
5. What are Triggers in Articulate Storyline 360?
In Storyline 360, triggers are the conditional statements that determine what happens when a certain event occurs. These events can include actions like clicking on a button, hovering over an object, or reaching a specific point in a timeline. Triggers are used by content developers to create interactive and dynamic e-learning content.
6. What are Variables in Articulate Storyline 360?
In Storyline 360, variables are the containers or placeholders for storing and managing data, such as quiz scores or user names. Utilizing variables enables the creation of personalized content, monitoring of user progress, and the performing of various other functions.
7. What is JavaScript and why use it in Articulate Storyline 360?
JavaScript is a scripting language that allows you to create dynamic and interactive web pages. You can use JavaScript in Storyline 360 to extend the functionality of your e-learning courses, such as displaying the current date and time, generating random numbers, creating pop-up messages, and more.
8. How do I insert JavaScript in Articulate Storyline 360?
To insert JavaScript in Storyline 360, you need to create a trigger that executes JavaScript when a certain event occurs, such as when the timeline starts, when the user clicks a button, or when a variable changes. You can write your own JavaScript code or copy and paste it from other sources. You can also use the player.GetVar and player.SetVar methods to communicate between Storyline 360 variables and JavaScript variables.
9. Examples of JavaScript in Articulate Storyline 360?
Here are some of the examples using javascript in Articulate Storyline 360:
- Displaying the current date and time.
https://www.swiftelearningservices.com/how-to-integrate-javascript-with-storyline-360-2/ - How to create a PDF containing text entry data using JavaScript.
https://www.swiftelearningservices.com/articulate-storyline-360-how-to-create-a-pdf-containing-text-entry-data-using-javascript/ - Generating QR codes.
https://articulate.com/support/article/Articulate-Storyline-360-JavaScript-Best-Practices-and-Examples - Sending Learner’s Score to LMS Using Javascript in Articulate Storyline.
https://www.swiftelearningservices.com/articulate-storyline-sending-learner-score-to-lms-using-javascript/
10. What are some best practices and tips for using JavaScript in Articulate Storyline 360?
Here are the links to learn more about the best practices and tips for using JavaScript in Storyline 360:
- Use the JavaScript editor in Storyline 360, which features syntax highlighting and line numbers.
https://articulate.com/support/article/Articulate-Storyline-360-JavaScript-Best-Practices-and-Examples - Best practices of using JavaScript to get Custom Print Result.
https://www.swiftelearningservices.com/storyline-360-best-practices-of-using-javascript-to-get-custom-print-result/ - Be aware that Articulate doesn’t provide support for JavaScript coding, and some JavaScript features may not work in all versions of Storyline 360 or in all browsers and devices.
https://articulate.com/support/article/Articulate-Storyline-360-JavaScript-Best-Practices-and-Examples
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
Your step-by-step instructions are incredibly detailed and easy to follow, making it possible for someone like me, who is not a coding expert, to experiment with JavaScript in our Storyline 360 custom eLearning courses.
We truly appreciate your kind words! Knowing that our elearning sample has been beneficial for you in incorporating JavaScript into your Storyline 360 courses is incredibly rewarding.
Incorporation of JavaScript in Storyline 2/Storyline 360 takes eLearning content development to new heights with advanced functionality. Well done!
We truly value your feedback, and we appreciate your support. Your encouragement motivates us to continue posting regularly.