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.
cta under video
Create engaging e-learning courses
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.
