Extending Storyline With Javascript and Variables

Hi group

I've been working with several authoring tools over a few years (Flash, Toolbook ...) and love the power that the scriping languages in them give me.

I've just started having a look at Storyline and it looks like a lot of fun and quite powerful. The triggers, variables and layers give a lot of flexibility - but I want MORE!

If it was possible to pass variables into javascript for processing and then back from the javascript back into the variable it would open up a whole world of possibilities.

That's my question, really. Is this possible, and if so, are there any simple examples available?

Thanks

91 Replies
Wim van den Bosch

Hi David,

Great tutorial and instructions for the localstorage!

Maybe I wasn't so clear before about my issue;

What I would like to have is that as soon as a user click on the mic-icon, say a word/sentence and the transcribed text appears in my textarea/input field...that this value will be updated in the localstorage automatically, without having to press submit or hitting the enter key. 

What i figured so far is that I will need to trigger a form submit after a change of a value.... 

It must be something quite simple (for someone like you "a Javascript guru but for me, I am literally searching all possible pages about this and I feel that I am close,...but then again, not any further:)

Some other thing I thought about, but I can't find any info, is to add a submit right after the value: onwebkitspeechchange="transcribe(this.value)" ...+ submit?:)  but I have no idea how

Thanks so much for your troubles/time

Wim

Steve Flowers

Hey, Chris - 

If it's working in HTML5, it should also be working in Flash-based output. Are you experiencing problems getting this to work locally? If so, you might be running into the Flash security sandbox "feature". You can fix it on your own local machine by adding the published folder to your security settings or by publishing to a Web server or using the publish to CD option. The EXE produced when you use publish to CD will defeat the feature.

Steve

Emmanuel Abao

Hello,

I'm new to Storyline and I want to know if there is a way to control the objects in the storyline layers via javascript for example:

var player = GetPlayer();

var myButton = player.getElementById("button1);

myButton.style.visibility = "hidden";

How can I access the objects ID and how can I reference them in javascript?

Your kind help will be highly appreciated. Thank you!

Steve Flowers

Hi, Emmanuel - 

Unfortunately there are only two methods available to communicate with the Storyline player from JavaScript once the player has been set. Those are:

player.GetVar("var");

player.SetVar("var",var);

I suspect more functionality will unfold over time but that's really it for now in the Flash based player. You can see a bit more in the HTML5 player if you explore but nothing to the detail you're asking for here.

Vince Cifani

Hi friends,

I was wondering if there was a way to keep track of what buttons the user clicks throughout the presentation? I want to ask users a question and depending on how they respond, the presentation will be tailored for them. But I want to know how many people are clicking each button. Is it also possible to count the number of drop-offs in the presentation?

Thanks,

Vince

Kyle Egan

Hi,

How do I send quiz results to javascript?

I have created a quiz with a results screen at the end.  I noticed on (http://www.articulate.com/support/kb_article.php?product=st1&id=llwes8cn32vg) that I can send variables to javascript using 'player.GetVar("FirstName")'although it dosent seem to recognise 'Results.ScorePercent' or 'Results'.

Thanks.

Jason Johnson

I want to know what approach I should take if I wanted to write custom jQuery/JavaScript to manipulate the assets on each slide of my Storyline presentation. I like the built-in JavaScript triggers but it's not enough for what I want to do. I've looked at the published code and it seems that all of the asset names are located in frame.xml and get parsed by storyline_compiled.js. I would love to be able to hijack those assets (images, audio, buttons, etc) and do custom programming on them. What would your advice be on this?  

I hear there is an SDK in the works but it's not ready yet obviously, so I have to go the custom route. Also, I should say that my project will be output to HTML5, not the Mobile Player or Flash.  I'm not concerned with any limitation of Flash or Mobile Player output; only HTML5. Thanks!

Sij X

Hi David,

I would like my learners to be able to take the quiz only three times. On the slide before the quiz, I have a custom 'Next slide' button with avascript code:
var flag = getTestAttemptFlag();

This is allowing me to keep a track of how many attempts a learner has taken/made so far. The problem is I can't figure out how to get Javascript to tell Storyline to hide/disable the next button once three attempts have been recorded.

I have already tried the limit attempts solution (http://community.articulate.com/tutorials/products/limiting-quiz-attempts.aspx) but I'm not using an LMS so once a user clears his/her cookies, the 3 attempt restriction becomes obsolete.

Any ideas?

David Burton

Sij,

When creating variables inside of Storyline, you can use the javascript function player.GetVar to retrieve a value. To send a value back to Storyline, you can use player.SetVar. More on this is outlined in the following link.

http://www.articulate.com/support/kb_article.php?product=st1&id=llwes8cn32vg

So in your example, you would need to create a variable inside of Storyline, maybe named 'attempts' and in your javascript use the following:

var flag = getTestAttemptFlag();

var restricted = false;

if (flag == 3) { 

    restricted = true;

    player.SetVar("attempts",restricted);

}

As far has hiding the button, I would have to dig into this a bit more, however, you can at least use the variable 'attempts' as a check to either prevent a page from loading or to move the user on to another slide.

I hope the information I provided is enough to get you pointed in the right direction.

Brian Allen

You should be able to hide the button by creating a trigger condition based on your variable.  Something like change the state of the button to hidden if 'attempts' equals (whatever).

For more on working with states and triggers look here - http://community.articulate.com/tutorials/products/working-with-states-triggers-and-layers.aspx

Arthur Buchmüller

Hi guys,

thank you so much with your great help on variables and javascript so far.

Maybe you can help me out with one issue, just to see if that is somehow possible within articulate:

I`d like to use a visual barometer within my course for a compliance training. The user will make decisions and choose between three options. Each Option will make the indicator (object) on the baromter will rise up or down.  The new position of the indicator will be taken to the next slide, doing the same again. In the end, the user will see, how "compliant" he is after having made all his decisions.

My Question:

How can i make indicator-object move depending on the decisions the user clicked. Is this possible with variables or with javascript? Or is this something stroyline is not capable of?

I would really appreciate your ideas and help on this issue.

Attached are the storyline-file, if you need some visualization.

Thanks!

Arthur Buchmüller

Thanks Phil for sharing this.

This looks quite nice.

I didn't find anything on slide 1.16, this slide is only a text based slide.
What I am looking for is the possibility to let an object move based on the the option the user clicks. Then, the new position of the moved object needs to be taken over to the next slide.

Could't find an example for that idea in your slidedeck so far. Could you please point out the slide again and clarify what you mean with masking?

Thanks

Arthur

Phil Mayor

Sorry Arthur it is 1.15  as you click on the markers the thermometer will look like it fills up

I used shapes to mask out part of the animation so you could not see it come in from the bottom.

I do not take it over to the new slide but this could be done with variables.

this is a basic representation (my first full Storyline project).

lebo mafoko

Hi guys

I need help. I want to create some sort of a scoring page similar to the text output but sending my results to a html page. I want to create a high score board kind of page, where the person with the highest score is at the top of the page. Maybe showing the person's name and score.

How can I go about doing this or is there anyone who can show me..

Nancy Roderick

I know this is a somewhat old forum but am hopine someone will respond. I am trying to use the getVar and setVar to read  text entry and then set another variable after processing the input. Basically we are trying to verify that the user has entered exactly 8 numeric characters only into the input field. The logic worked fine but I have not been able to get it to function in Storyline. I read the instructions and viewed tutorials on the support page (http://www.articulate.com/support/kb_article.php?product=st1&id=llwes8cn32vg) but have not been successful. Here is the code if anyone can find the problem.

var proofCode = new String;
var player = GetPlayer();
var proofCode = player.GetVar("TextEntry");
var charValue=new Array("0","1","2","3","4","5","6","7","8","9");
var numeric=new Boolean(false);

function TestCode()
{
      if (proofCode.length==8)
      {
           for (var i=0;i
           {
          numeric=0;
          for (var k=0; k
                {
                if (proofCode.charAt(i)==charValue[k])
               {numeric=true;}
               }
         if (numeric==false) {break;}
         }
    }

}

var final = TestCode();
var player = GetPlayer();
player.SetVar("ProofPurchaseComplete", numeric);

Steve Flowers

Hi Nancy,

Before digging into the sequence. this jumps out:

  • var player=GetPlayer(); appears twice. You might want to take the second one out.

I'd test a couple of things:

  1. Test to see what the value of numeric is before sending to SetVar by adding an alert before the last line: alert(numeric); If that returns nothing, the code above is broken.
  2. You may want to reduce to a minimum and see if you are feeding the variable into Storyline before stepping out processing a function. If you reduce it to var player=GetPlayer(); player.SetVar("ProofPurchaseComplete", "TEST"); and see if it is getting into Storyline when published to HTML by adding %ProofPurchaseComplete% to a slide text box - this will isolate a couple of things.

If number 2 above doesn't work, the Flash player might be intercepting JS communication between the browser and Flash. Pushing it to a Web host, adding the folder to your Flash Player Security Settings whitelist or publishing to CD will get around this problem.

Nancy Roderick

Thanks. I wasn't sure if I needed it before the line that followed each time. I actually had an alert at the end which I didn't copy to paste here, but it never showed up in Storyline. That is probably due to the fact that there is an error somewhere, and what you've pointed out is hopefully the answer. I also wondered if it would act differently if I uploaded to our LMS server. I will try everything you recommended!

 Thanks so much for your suggestions!