Extending Storyline With Javascript and Variables

Yes, Pete, you can pass data back and forth with JavaScript. And it sure does open up an unlimited number of possibilities. Only problem is that, currently, the Articulate Mobile Player doesn't interpret JS. Hopefully, we'll see that in a future version.

Thanks David and Russ.

The iOs player not interpreting javascript doesn't seem too big a problem as long as the mobile Safari browser does. I kind of prefer the concept of HTML5 for now from anLMS tracking point of view anyway.

This whole javascript approach helps bridge the gap between storyline and some of the bigger, more expensive options out there; Storyline is looking like very good value for money.

Thanks again.

PeteB

Hi all storyline whizzers...I need your help !

I am trying to set up an interactive learning plan for my users.  We have a curriculum framework, which is basically a guide to the types of capabilities that our trainees should experience during their two year training program.

I have started to add the topic areas and capabilities to a storyline interaction.

Users can work through the different domains and drill down (through the layers) to specific capabilities.  At the bottom level, I would have a check box -  for them to indicate that this is a learning goal for their current term rotation. My question is ...can a variable/java script be set up, so that when they tick the box against the capability - can the text on that layer then populate the learning plan slide. 

the user will then tick off ( approx 10) capabilities and they will be listed on the second (learning plan) slide.  Hope that makes sence?

to provide you with the visual of how it would look I have added the published  file.  (its very rough and I havent sorted states on buttons yet) And attached the source file. but it should give you an idea of what I am trying to achieve. Under the Clinical Management tab, if you click on the  systems button there are 3 capabalities listed and a tick box.  Or if you click on Risk and Prevention, I have added a data entry box...so is it possible that if they type txt in this box and tick the button, the text will be populated on the learning plan slide? 

This may be out of the scope of storyline..but it would be interesting to see if something like this was possible?

Kate,

The cool thing about triggers, is that you can pretty much do just about anything if the logic is setup correctly, and can all be done without having to use javascript. I've attached your project below. Please use this as reference and note there are many different ways to achieve the same result.

In short...

 - I created a new boolean (true/false) variable with the name systemsCheck.

 - I made sure the initial state for the checkbox was set to normal (unchecked) from the states panel.

 - I added  2 layer triggers to the systems layer:

Set  "systemsCheck"  equal to "True" when the state of "Button 2" (checkbox) is "Selected"

Set  "systemsCheck"  equal to "False" when the state of "Button 2" (checkbox) is not "Selected"

 - I created a new layer named "Systems" to the Learning Plan slide

 - I then added a Slide Trigger to the Leaning Plan slide:

Show layer "Systems" when timeline starts if "systemCheck" is equal to "True"

That's it. A simple toggle state has been created for the checkbox and is later referenced in the Learning Plan slide. This same approach can be used for additional elements.

Note: You might want to set the properties for the Capabilites slide to Resume saved state. This way if someone decides to go back to this slide, the checkbox state wont reset automatically. I've done this for you in your attached project.

I hope this helps!

You are marvellous David!, thank you so much for such a detailed explanation - and solving my problem!!

Hi everyone i am working on a project and looking to place line breaks in the javascript code i wrote to populate an email from text field, can anyone assist on how i can place line breaks between the two get var codes: see code below 

var email="varimah@kalleo.com";

var subject="Creative";

var body_start=new Array();

body_start[1]=player.GetVar("TextEntry4");

body_start[3]=player.GetVar("TextEntry2");

var mailto_link='mailto:'+email+'?subject='+subject+'&body='+body_start;

win=window.open(mailto_link,'emailWin');

i have also worte it like this

var email="varimah@kalleo.com";

var subject="Creative";

var txt=player.GetVar("TextEntry4") +player.GetVar("TextEntry2");

var mailto_link='mailto:'+email+'?subject='+subject+'&body='+txt;

win=window.open(mailto_link,'emailWin');

Varima,

Appending/inserting the ASCII code equivalent (%0D%0A) for a carriage return and linefeed should do the trick. To add a blank line in between new lines, simply add another instance of (%0D%0A).

I hope this helps!

This would also catch your special characters and tags. I like this one because it catches pretty much everything and does the encoding for you All built-in to JS.

body_text=encodeURIComponent(body_start[0]+"
"+body_start[1]);

Thank you guys this works like magic  

Ines,

As noted in our javascript best practices article, there is limited to no javascript support for HTML5 published content.

Over the last week or two I've done quite a bit of testing on different platforms (Windows Chrome/IE with Flash and HTML 5, iPad HTML 5, iPad Mobile player, Android Browser Flash, Android Browser HTML 5) and packaged for LMS and Web delivery.

I think the Javascript works as per the tables and advice provided (i.e. well in Flash, not well in HTML 5, and not at all in Mobile Player app).A bit frustrating, but generally not a show stopper.

The big problem I've seen is that on ALL the platform/browser combinations listed above, HTML 5 doesn't yield a good result. It's slow to change pages, layers go out of whack, page navigation with triggers and conditions set are ignored, drag and drops don't drag...

Flash and Mobile Player work great - few known concessions not withstanding - but HTML 5 on ANY platform/device I've seen is not workable; it can't be used.

Hello everyone im back here for some little help i guess. 

i have been trying to use this :

var fso = new ActiveXObject("Scripting.FileSystemObject");
var s = fso.OpenTextFile("C:\\Test.txt", 8, true, 0);
var name = player.GetVar("TextEntry");
var email = player.GetVar("TextEntry1");
s.WriteLine("Email: " + email);
s.WriteLine("Name: " + name);
s.WriteLine("==========");
s.Close();

to create a new text file but it just dosent work , is there an alternative or any settings issues i may need to know 

I haven't tried the script myself, but assuming that the Javascript logic is correct, two things to consider could be:

1. the text boxes and variables TextEntry and TextEntry 1 will have to exist in the Storyline project, and

2. Javascript may not work well on iPad (mobile app), or may be more successful on Windows Flash deployment. I.e. once published you may have different success/experiences on different devices.

I'll be interested to hear what the problem is when you get to the bottom of it.

Good luck!

Varima,

You forgot to define the player function. Add the following line of code to the top of your script.

var player = GetPlayer();

I hope this helps!

Hi all 

Dose storyline have a restriction on how many variables it can execute via javascript  ?

David, 

In response to the article you wrote above, is it possible to execute a jQuery function from stroyline?

What I am trying to do is, send variables from a storyline quiz (name and score) to a jquery function. The jQuery function can make an ajax call to a PHP script and send the variables to it. The PHP script will then send out an email to a predefined email address with the name and the score.

Thanks

Rohan

Rohan,

I don't see why your described method won't work. Keep in mind you will have to include the jquery library in the base html file before the jquery fucntion(s) will work. By default, Storyline does not include any jquery libraries.

I hope this helps!

Hi there,

Is it possible to get text from an external source and put this in a text field on-slide?

I am trying to use google's voice search and transcribe the returned value into storyline.

The use the following code in my index file to create a textbox with microphone so the user  can speak and the returned text is inserted in the textbox. It would be great if i could somehow transcribe this text into storyline (for sake of grading the results) 

Cheers,

Wim

Wim,

This might be possible, however keep in mind the x-webkit-speech input type is only supported in browsers that support HTML5. Depending on your application, you might want to investigate which browsers will work with this.

To grab a variable or value of an input field that resides on another page, you might consider using the the HTML5 localstorage method/function. This gives you the ability to store information on the end users system similar to how a cookie is stored. I've provided an example of this below. Keep in mind not all browsers support the method below.

On your index page:

And from your javascript trigger you could reference the localstorage:

Please note, my example above has not been tested inside of Storyline or a browser tht supports HTML5, however, in theory this should work and does comply with Storylines javascript best practices. Sometimes testing the functionality outside of Storyline first can help isolate any issues you might come across.

I hope this helps!

Hi David,

Thanks so much for replying and giving me this clear advise!

I know that at the moment this is only possible using Google's Chrome, but that's ok.

I will try the steps you have described and see how this works.

Again: Thanks, thanks thanks There is so little information about this stuff on the web and literary no information when using it in combination with storyline

Now, because of your message, at least I know that investigating this further isn't a waste of time (I'm not a programmer, just a copy/paster of snippets:)

Cheers,

Wim 

Hi David,

I have tried your suggestions, but unfortunately they don't work. 

I'm wondering, is this related to an answer from staff at another forum post:

"Currently we don't support the Get and Set functions like the Flash player does with JavaScript triggers, but simple things like alerts should work."?

Cheers,

Win

Wim,

As I stated, I did not have the chance to test this in a HTML5 supported browser or inside of Storyline. Were you able to get this to work outside of Storyline?

Hi David,

I got it too work now inside storyline!....for 90%

Things I have done to make it work so far:

replacing all "$" with "jQuery" (and removing "})" from the following line you gave me: var text = localStorage.getItem("text")});

-Apparently I had a conflict with mootools or so

-not sure whether removing the "})" was necessary, but it works without it

Small issue I really would like to see resolved, and to make it 100% the way I want it:

At the moment the "text" variable doesn't get stored in local storage UNLESS the user presses the enter key inside the textarea.

Which is not the way I want it.

So 1 question to you:

How to automatically populate the localstorage without having to press enter first (I checked this in developer's tools in chrome, and see that only after "enter" the localstorage is populated with a new value)

Thanks for your help

Wim

Wim,

My apologies for the typo. You are correct in removing the }). I have since fixed this in my first reply.

For anyone interested, I've created a simple sample for this functionality. The link below contains all documentation and the sample project file.

http://www.builtbyburton.com/javascripts/localStorage/project/story.html

In regard to having an input field update without using the enter key, this might be a bit tricky. You would have to update the stored value after each key stroke. The following link might be a good place to start.

http://api.jquery.com/keypress/

I hope this helps!