Storyline Player Javascript interaction

Jun 19, 2013

Hey,

So I'm working with Javascript to create custom functionality in my slides.  

I have gone over the best practices here:

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

This give several good examples of javascript functions but I am unsure of what the api for the articulate player is and what all I can access.

Specifically I would to access some sort of seekTo(Time) type function.

Is there something similar to either of these out there?

https://developers.google.com/youtube/js_api_reference

http://developer.vimeo.com/player/js-api

Thanks,

Tom

82 Replies
Dave Cox

Yes, I'm running the project from my the device it is published for. I've tried to published and running locally, and published and running from a web server. That hasn't changed the behavior. If I type the answers direct into the slide, everything plays as expected. It is only when I type a variable in the text string that I get the odd behavior. My requirements for this project require me to use variables instead of typing the text directly into the published slide.

Ashley Terwilliger-Pollard

Hi Dave,

I meant working and editing on the file from the local drive - that's when the corruption could occur. It sounds like you ran into the same behavior I did in terms of recreating the answers (still using the variable set up) so that again makes me think there may be an element of corruption in the file or how the information is being imported in.

Please feel free to keep us posted as you continue working through this. 

Dave Cox

I always develop on my local hard drive. I agree, I've had too many troubles trying to work from a remote drive. I think you are correct, there is some sort of corruption with the formatting on the slides. It's a pain, but I'm going to delete and re-create all of the question slides. I think that will fix it. I'll let you know how it progresses.

Thanks

Ashley Terwilliger-Pollard

So happy to hear it Dave - corruption is a difficulty one to track down, you may want to consider these preventative measures to protect your project files:

1) Save and publish projects on your local hard drive. Working on a network drive or external USB drive can cause erratic behavior.
 
2) Save incrementally. If your app has an AutoRecovery feature, take advantage of it. If not, save a new version of your project every hour or so with a new file name each time. If a file becomes corrupt, you'll still have a working version available.
 
3) Install Dropbox. Snapshots of changes in your local Dropbox folder are kept for 30 days. If a file is damaged or deleted, you can restore a previous snapshot: https://www.dropbox.com/help/11/en.
 
4) Don't leave the app open and unattended for long periods of time. Some users have reported file corruption after leaving their apps open overnight. It's possible that a malware scan or disk backup could run because the machine is idle, making your app vulnerable to crashing.
Dave Cox

Yeah, great advice. I already do #1 and 2.

Dropbox is not an option, as it is blocked by the company for obvious security reasons.

Again, I think I caused the corruption of the formatting during my experimenting. Sometimes you just have to stop and rebuild.

I know you don't really support the javascript stuff, but it really works quite well, and allows me to have a bank of game questions supported by one game board and loaded at run time.

Dave Cox

Here is an example javascript file similiar to what I used to set up my game. It has everything needed if someone wants to duplicate what I did.

The first thing my game does is load a list of available games and load that list into variables. This list is in the Game Titles section of the file in the variable named games. It loads the variables "game_01" and "game_02" with the values shown below. These variables must be set up in Storyline and exactly match the names in this script.

var games = {
 "game_01": "Game 1", 
 "game_02": "Game 2"
};

To load the above variables, I enter the following command in a javascript trigger in storyline 2 as follows:

getGameSelection();

The function that the above command calls is in the included file.

The included file aslo includes question data for two games, and the datasets are named game_01 and game_02. When I want to load a game I call a function that references the name of the game. for example the following code in a javascript trigger in Storyline will load the variables with the data for game_01:

getGame(game_01);

And this one will load game_02:

getGame(game_02);

Once again, the code that this executes is in the included javascript file.

This code only runs at run-time. You cannot test in in the development mode. For testing, I always load default values in the variables that I can see while testing the application.

To test this, do the following:

1) Publish the application to your desired format. 2) Edit the story.html file to include this line just above the <title></title> tags.

<script LANGUAGE="JavaScript1.2" SRC="story_content/game_config.js" TYPE="text/javascript"></script>

3) Copy the game_config.js file to the story_content folder. (It will not work in any other location) Be sure to keep a backup copy of this file. If you re-publish your storyline 2 presentation, storyline deletes and re-creates the entire folder structure.

4) Run the story.html file in a browser. Your file should run.

5) When you have issues with the file, and you will, Press F12 while in the browser. This opens the browsers debug mode. With the debug mode, select the console. The scripts output the file load progress to the console. Check what the last line to load was, and your error should be just above that line. A common error is a missing comma or quotation mark in the javascript file.

At the bottom of the javascript file, below the "Do not edit ..." line there are two javascript functions. These are the functions that run when you issue getGameSelection() or getGame() in the examples above. Unless you are comfortable with JavaScript programming, it would be best if you didn't change these functions. These are the functions that do all of the work of loading your data into the variables in Storyline.

I hope that this information is helpful.

Dave

Sujeev Kumar

Hi Steve,

Can you help me how to use javascript trigger to 'play', 'pause' and 'seekto' an audio file that is present in that slide or in a layer.

Yes, i know that there is a trigger called 'pause media' and 'stop media' which i can use. but i want to use javascript. is it possible in SL2?

P.S. I am a n00b in coding and javascript.

Please help  < T_T >

Dave Cox

Hi Sujeev,

There isn't a specific media function that you can call, but you can use a variable. On the layer where the audio you want to control is playing, add a trigger action Stop Media. Set the media to your audio file. Set the When field to Variable Changes and set the Variable to the variable name you want to use. For example you might create a variable audio_control. Add a condition to the trigger to activate only when the variable is equal to "Stop".  Then in Javascript, use player.SetVar("audio_control", "Stop") to stop the audio. Add triggers using the same variable for play and pause, and use SetVar to play and pause the audio.

I don't know how well that will work, but it should work.

Dave

Sujeev Kumar

Hi Dave,

I liked your idea. But what i want is to NOT use the "play media" trigger. because if we use it then I will have no "seekTo" or any kind to control the audio while it is playing. That is why i am looking for other options where i can use javascript to do that. Because the variable should change with human interaction (like a button) when i click it, it should execute a javascript that will play the audio.

Do you think it can be done?

Sujeev Kumar

I tried using 'allow seeking' option but the problem i faced was that when i am using the seekbar to go back and forth, the objects on the base layer, which are synced to the audio when i designed it are not updated along with the audio. meaning that the base layer timeline is not effected while i am seeking the audio layer.

Sujeev Kumar

No Dave i intend to use multiple layers - i.e. multiple audio files that support the timing of base layer objects. Think of it like language options. I want the end user to be able to select the language (I did it using multiple "True/False" type variables that will set with the click of a button) So i cannot keep multiple audio files in the base layer (then they will all play together!). This is my dilemma.

I also tried keeping all the audio files in the base layer and use the 'stop media' and 'play media' options with the "True/False" variables as condition. In that case i cannot control the audio with the seekbar.

That is why i was trying to make it work using javascript if it is possible to play, pause and resume from  any particular time (like CurrentTime of base layer) or something then i can start working on it.

Do you think its possible?

Dave Cox

It sounds like you are trying to seek the audio on a layer with the timeline on the base layer and allow seeking between the layers. Can you put the content that you need to sync with on the layers with the audio? I think that is the only way you will be able to both sync and seek. It may require duplicate content on each layer for each language option

Sujeev Kumar

That is my plan-B. I can always create a different scene/slide and set trigger to jump to scene/slide accordingly. The only problem is that it is so redundant to have multiple scenes with same content and when we make it online it becomes very bulky. undesirable for me. 

If i can load variables from one course to another, then i can reduce the bulkiness, no? how can we do that? Cos if we do that then the file size will be effectively halved when compared to keeping same slide objects twice.

Dave Cox

Are you asking if you can copy the values of variables from one course to another? If you are using an LMS. That may be difficult to pull off. The best way to do that would be with some sort of server-side scripting and a database. That may not be possible if you are connecting to an LMS. You could also try cookies. The problem with cookies though, are that they are machine dependent. If a user moves to a different machine or device, the cookie values will become unavailable.

Stephanie Brooks

Hi, so I am using js to create a custom score report. I am a little confused with this api.  I have 2 variables q1Answer which is the user's text entry and scoreReport which is a new number variable automatically set to 0. I am trying to use the scoreReport in a simple if statement and am not getting the expected result. I expect scoreReport to increase by an increment of 1 for every correct answer, and subtract 1 for every incorrect answer.

__________________________________________________________________________

The code I have tried so far is the following:

var scoreReportjs=player.GetVar("scoreReport");

var answer1=player.GetVar("q1Answer");

player.SetVar(answer1);

 

 

if (answer1=="thalassemia"||answer1=="beta thalassemia"){

var scoreReportjs=scoreReportjs+1;

 

}else {

var scoreReportjs=scoreReportjs-1;

}

 

player.SetVar(scoreReportjs);

____________________________________________________________

my answer1 variable is working, but I am only getting 0 for scoreReport.

 

Any help would be greatly appreciated!

 

This discussion is closed. You can start a new discussion or contact Articulate Support.