How powerful is Javascript in Storyline?

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

Hi Cheng,

I haven't seen any examples, but I'm sure someone in the community here can get you on your way.

Adrian

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

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

Hi Andrea - 

It depends on the method you're using to get the variables into the spreadsheet. Cross-domain issues can throw barriers. That said, the methods I've used do work on mobile devices.

Do you have an example you can link to we might take a look at?

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

By the way, which methods have you used that work on mobile devices?.. Please explain them to me. Here are the links for you to see.

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.

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);

Thank you Steve, I will try that and see what happens

Hi Steve, 

I tried adding the delay but it still doesn't work on iPad. Please let me know if you remember what you did.

Thanks

Hi Andrea - 

Just to be sure, are you adding the jquery declaration to your story_html5.html file as well? 

Steve

Really strange - I just tried an entry from my iPhone and it went in four times. Wonder if there's some setting on the iPad you're using that's preventing it from working?

I just saw your posts in the spreadsheet.I do have the declaration. I have this: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

I have no idea what I'm doing wrong

It is working on iPhone! I just tried it but not from iPad

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)?

Thanks Steve. I'll check that or even try from another iPad and I'll let you know

The only difference I've found so far. Is that when I launch it on iPad it asks me to download the Articulate App to be able to open it. While on iPhone there's no need to download the app.

You might want to turn off the publish option for the iOS app. Not sure why that would make a difference but it might.

Yes that was it. The iOS app!. I turned off the option and now it works!

thankssss