How powerful is Javascript in Storyline?

Hi all experts,

I don't know if this question is a little dumb to ask, but how powerful is javascript in Storyline? I know that Storyline can execute javascript. however, since I am not an expert in javascript, I don't know exactly what we can do with it in Storyline. Can someone give me some examples? I've seen some examples like the system date and random numbers, but can we do some interactions with javascript?

Any feedback would be appreciated! Thanks!

Cheng

26 Replies
Adrian Dean

Hi Cheng,

I don't have an example file to attach here to show you, but JavaScript can be used to adjust variables in Storyline. Specifically, it really comes in handy when you have interactive web objects, and you want what happens in them to be reflected in Storyline and vice versa. I hope that makes sense. 

Here is a good thread containing more JavaScript examples.

There are quite a few experts in the community here, hopefully they can provide you with some other examples, as well as help with implementation if needed.

Always Happy to Help,

Adrian

Cheng Li

Adrian Dean said:

Hi Cheng,

I don't have an example file to attach here to show you, but JavaScript can be used to adjust variables in Storyline. Specifically, it really comes in handy when you have interactive web objects, and you want what happens in them to be reflected in Storyline and vice versa. I hope that makes sense. 

Here is a good thread containing more JavaScript examples.

There are quite a few experts in the community here, hopefully they can provide you with some other examples, as well as help with implementation if needed.

Always Happy to Help,

Adrian


Hi Adrian,

Thanks for the reply. What you explained makes good sense.

The reason that I asked this question is that recently I have been working on a web-based test project in Storyline where I created a layout with a navigation bar in master slide. I used that layout for multiple slides in the hope that the navi bar can function uniformly across different slides.  I hope objects in regular slides can interact with the object in master slide(here, the navi bar is the object in master slide), and I figured out that the only way to do that is through variables. And that is why I tried to figure out if javascript can help me to exchange values of variables between regular slides and master slides. 

So I am just wondering, have you seen examples where objects in regular slides and master slides interact with each other by using variables? If the example utilizes javascript, that would be even helpful.

If my explanation is not clear, please let me know.

Thanks!

Cheng

Steve Flowers

Hi Cheng,

I routinely use objects on the master slide that interact with objects on the base-slide and vice-versa. As you mention, using variables is the trick since it's the only thing that can be seen at the same time by both the master and base slides. 

You don't need JavaScript to pull this off. You can do it exclusively using triggers. I call this the "radio control" method:

1) Setup a numeric variable as your communication channel. Doesn't matter what you set the default to. I use zero.

2) Add a trigger to your master slide on a button to "send". This trigger will adjust your variable and add one every time the button is clicked.

3) Add another trigger on your base slide to "receive". This trigger will listen using a "When variable changes" event and execute whatever action you'd like.

A couple of caveats:

  • Using this to advance slides can sometimes cause a cascade. Sometimes the player will pick up on the listened change twice and jump 2 slides ahead. To get around this, make sure the next slide "listener" isn't visible at the beginning of the slide.
  • Triggers and layers on the master slide don't always play well. For example, you can't change the state of an object in a layer on the master slide using a trigger in the current version of Storyline.
Cheng Li

Steve Flowers said:

Hi Cheng,

I routinely use objects on the master slide that interact with objects on the base-slide and vice-versa. As you mention, using variables is the trick since it's the only thing that can be seen at the same time by both the master and base slides. 

You don't need JavaScript to pull this off. You can do it exclusively using triggers. I call this the "radio control" method:

1) Setup a numeric variable as your communication channel. Doesn't matter what you set the default to. I use zero.

2) Add a trigger to your master slide on a button to "send". This trigger will adjust your variable and add one every time the button is clicked.

3) Add another trigger on your base slide to "receive". This trigger will listen using a "When variable changes" event and execute whatever action you'd like.

A couple of caveats:

  • Using this to advance slides can sometimes cause a cascade. Sometimes the player will pick up on the listened change twice and jump 2 slides ahead. To get around this, make sure the next slide "listener" isn't visible at the beginning of the slide.
  • Triggers and layers on the master slide don't always play well. For example, you can't change the state of an object in a layer on the master slide using a trigger in the current version of Storyline.


Hi Steve!

Thanks for sharing the "sender and listener" method. That actually gives me a lot of insights on how to communicate variables between base and master slide. Admittedly, the current version of Storyline does have some limits. Hopefully, in the future, it will provide more fundamental approaches to designing better interaction.

Thanks again.

Cheng

Jason Johnson

Steve Flowers said:

Hi Cheng,

I routinely use objects on the master slide that interact with objects on the base-slide and vice-versa. As you mention, using variables is the trick since it's the only thing that can be seen at the same time by both the master and base slides. 

You don't need JavaScript to pull this off. You can do it exclusively using triggers. I call this the "radio control" method:

1) Setup a numeric variable as your communication channel. Doesn't matter what you set the default to. I use zero.

2) Add a trigger to your master slide on a button to "send". This trigger will adjust your variable and add one every time the button is clicked.

3) Add another trigger on your base slide to "receive". This trigger will listen using a "When variable changes" event and execute whatever action you'd like.

A couple of caveats:

  • Using this to advance slides can sometimes cause a cascade. Sometimes the player will pick up on the listened change twice and jump 2 slides ahead. To get around this, make sure the next slide "listener" isn't visible at the beginning of the slide.
  • Triggers and layers on the master slide don't always play well. For example, you can't change the state of an object in a layer on the master slide using a trigger in the current version of Storyline.
Steve, I have some slide-level navigation graphics on a series of slides and they listen for "adjust variable" (each graphic listens for a separate variable). I use "Execute JavaScript" when timeline starts on each slide that programmatically adjusts those variables. It works PERFECTLY in HTML5 output but not in Flash. Is there any insight that either you or anyone else can provide on why this is happening? I'm not using the Master Slide for any of this. Also, I've tried executing the Javascript a split second into the timeline using a different shape/object as the trigger BUT it fails just the same. Please advise and thanks in advance!
andrea estanga

Hello Steve,

I need some help from you. The support team told me that you could be a great help. I'm exporting storyline variables to a Google spreadsheet. It works perfectly on browsers. But when I try to send the variables using a mobile device, it doesn't work. Do you have an idea what is the issue about ajax Post in mobile devices?

Thank you

andrea estanga

Hi!!

Thanks for your response. I created a simple fill in the blank type of question in Articulate to send the response to Google spreadsheet. I also, added a button. When the users clicks the button it sends the variable information to the sheet. So, I tested it in IE and it works just fine. Then I tried on a iPad and it didn't work.

here is the code I'm using in the button, which I took it from another discussion in this forum.

var player = GetPlayer();

$.ajax({

url: "https://docs.google.com/forms/d/XXXXXXXXXXXXXXXXXXX/formResponse",

type: "POST",

data: {"entry.yyyyy" :player.GetVar("your_verible1"), "entry.zzzzz":player.GetVar("your_verible2")},

success: function(data)

{

alert(data);

}

});

return false;

XXXXXXXXXXXXXXXXXXX - must be replaced by the form key (for more details chceck pdf file)

yyyyy, zzzzz - must be replaced by number from your's google form. You can find it with firebug (for more details chceck pdf file)

your_verible1, your_verible1 - veribles from Storyline

Thanks

 

Michael Hinze
Glenn Preston

I purchased a learning journal javascript that works awesome in Storyline. It allows learners to record journal thoughts and observations. So Storyline does have some good uses for javascript. It was way too complicated for me to write so I bought it.

Hi Glenn, I'm curious where you bought the script. I might have a need for a journal-style function on an upcoming project and would like to check it out. Thanks in advance.

Steve Flowers

That's really similar to the method I'm using. You might try wrapping your post in a function and delay the execution by a second. I did try a heap of methods before settling on something that worked consistently. I don't remember the details. The delay could have been the secret sauce.

var player=GetPlayer();
var vRate=player.GetVar("Slider1"); //what!
var vSuggestion=player.GetVar("TextEntry");

var fTarget="https://docs.google.com/a/XXXXXXX/formResponse";

function submit_form(){$.ajax({

url: fTarget, type: "POST", data: {"entry.156531987" :vRate,"entry.1547132205":vSuggestion},

success: function(data) {
//won't return since it's cross domain
}

});

return false;

}

setTimeout(submit_form(),2000);

Steve Flowers

Really odd! One thing that kicks back as an error is the http:// in the jquery include. It's executing anyway but I'm not sure how. Guessing that jquery is used elsewhere as well and is included later. Don't have an ipad to test at the moment. I suspect it's something to do with a setting in the iPad since we're getting it to work in the iPhone. 

Maybe take a peek at the private browsing settings between the nonworking (ipad) and working (iphone)?