Sometimes Storylines functionalities doesn’t match your creativity to build advanced interactions. but fortunately Storyline offers the option to add JavaScript to your e-learning courses.

In this first video in a series on how to use JavaScript in Storyline I’ll show you step by step how to add JavaScript in Storyline and how you can let JavaScript and Storyline variables interact with each other.

Would you rather read than watch, see the text below the video. 

FasterCourse Banner

You can create really engaging e-learning courses with Articulate by adding snippets of JavaScript code to Storyline. Storyline can execute the snippets when timeline starts or when a user clicks a button.

In this first video of my Serie on how to use Javascript in Articulate Storyline I’ll show you a couple simple examples on how to add JavaScript to your e-learning course and I’ll show you how Storyline variables and JavaScript can communicate with each other.

Now enough theory. let’s start with our first example.

In this example I’m going to add a simple piece of JavaScript code that launches an alert box on the first slide of my course in Storyline.

I go to the first slide and create a new trigger that is fired when timeline starts. In the trigger wizard under action I select ‘Execute JavaScript’. Now I click on JavaScript in red to paste my snippet. Which is the alert() statement;.

alert("I am an alert box!"); Alert is a JavaScript function if this is called a web browser knows to launch an alert box. The text between the quotation marks is the content of the alert box.

You see that the word JavaScript turns blue now.

If you preview the slide and click on the arrow button you’ll get an error message JavaScript support is not available while previewing. You must publish to test if JavaScript works. You don’t have to publish your whole course. In Storyline 360 you can also publish single pages or scenes.

So I click on publish

Select ‘Web’.

And under ‘Publish’ I select a single slide and click on ‘OK’ and now we can click ‘Publish’.

Click ‘View Project’ to view the slide in a browser. I see that my browser launches an alert box with the text ‘I am an alert box’.

Let’s continue with our second example where we use Storyline variables in JavaScript.

In my first example there was a standard text on my alert box. But I want that the user can fill in their own custom text that is displayed in the alert box.

In my example course I add a blank slides by going to the Slides tab and under new slide I choose a blank slide.

The second step is to add a text entry field on the slide. Click the insert tab. Go to input and under data entry click text entry field.

When you add a text entry field on your slide Storyline automatically generates a variable. In this case the variables name is TextEntry. With a Capital T and a Capital E.

Now let’s add a button that triggers the alert box.

I’ll add a button trough the Insert Tab, button and I draw it on my screen. In the button I type alert box.

The next step is to add a trigger that launches the alert box.

Now let’s add the code to display the storyline variable TextEntry in the Alert box.

I’ll copy paste it in the trigger field and explain line by line what the code means and does.

With the first line of code var player = GetPlayer(); you request all variables from Storyline.

But we only need one variable. That is what you do on line two. With the piece of code var storylineVar = player.GetVar("TextEntry"); You will get the contents of the Storyline variable TextEntry and put this in the JavaScript variable javascriptVar.

The content what a user filled in in the text entry field in Storyline is now in the Javascript variable

On the third line of code you see the alert statement. Between quotation marks is the static text Your input is. Between the plus signs you see the variable JavaScriptVar where the content of the text entry box is stored. The dot between quotation marks at the end is static and placed after the text that is stored in the Javascript variable.

Now let’s preview the course and see If everything works. I click on publish choose web and under publish I select single slide. 1.2 untitled slide and I click ok and publish.

Now click on view project to view the published slide in a browser. I Fill in some text in the text entry field.

Hello world i'm Mark

And I click on the TextEntry button. You see my browser shows a alertbox with the contents of the Text Entry field.

Maybe your asking yourself how can I use this in a course? It is especially useful if you have a course with a lot of variables that doesn’t work as expected. You can use the alert boxes to debug your Storyline project.

Now one last example in this video what you can do with Javascript in Storyline.

I have a course but I want another backgroundcolor in the responsive player that better matches the look and feel of my course. With javascript you can change the players backgroundcolor. #e7e6e6

To do this I go the first slide of my course and add a new trigger. The action is ‘Execute JavaScript’. Now I click on JavaScript in red to paste my snippet. With this line of code I change the Cascading Style Sheet of my player and change the background. Let’s see what the result is by publishing the first slide. You now see that the background of my player that is normally darkgrey now has the same color as my image on the first slide of this course.

This was my first video in a series on how to use JavaScript in Articulate Storyline. Keep an eye on my channel for the next video.

Thank you for watching.


Would you like to know more about Upward Online Learning and Articulate Storyline? 

🔔 Subscribe here for more free E-learning and Storyline tips

📕 Download the Ultimate process how to create e-learning with Articulate Storyline here

🎓 Want to learn more about Articulate Storyline? You now get a 10% discount on https://www.masterstoryline.com.
Fill in the coupon code ‘upwardonline’ on the sign-up and you’ll receive your discount directly!

🎓 Do you want to start your Storyline project with modern design elearning templates that are easy to use?

You now get a 10% discount on https://fastercourse.com/elearning-templates/articulate-storyline/.
Fill in the coupon code ‘upwardonline’ on the checkout page and you’ll receive your discount directly!

► Master Articulate Storyline Variables [Like a pro!] see video

 

Buy books on Articulate Storyline on Amazon:

📕 Articulate Storyline 3 & 360: The Essentials

📕Articulate Storyline 3 & 360: Beyond the Essentials (Second Edition)

📕 E-Learning Uncovered: Articulate Storyline 360: 2nd Edition


About Mark Spermon

Mark is an e-learning specialist with over 15 years of experience developing interactive and engaging e-learning modules and online courses for a wide range of customers with Articulate Storyline. He believes online learning shouldn’t be information dump but engaging, interactive and provide a transformation to the desired future of the learners. His goal? to create a world without passive, information overload online courses that are boring as ….

Leave a Comment