Storyline Player Javascript interaction

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

71 Replies
Steve Flowers

Hi Thomas,

The API is pretty simple and there isn't much you can do to communicate *to* the player. You can call what you like from within the player. Anything you want to execute or add is fair game. There are some things you can do to take advantage of the LMS API as well.

This is pretty much the limits of the Storyline player API:

var player=GetPlayer();

var jsVar=player.GetVar("slVar"); //grab a Storyline Variable

player.SetVar("slVar","A VALUE"); //set a Storyline Variable

I've used storyline variable "listeners" as a trigger event to communicate from JavaScript. Works pretty well. There isn't more to the player API than GetPlayer, GetVar, and SetVar.

Steve

John Souchak

Hmmm, I am trying to follow along with this method and have some variables in my SL course.

I then add 

to the story.html file

but when I have this in my MyJavaScriptFunctions.js

var player=GetPlayer();

var studentComplete=player.GetVar("CourseComplete");

but I get "Uncaught TypeError: Cannot call method 'GetVar' of null"

Any ideas?

Mark Ward

Hi Thomas

While working on a project I mapped out the functions in the player object. It doesn't list arguments but served as a starting point. player.restart() was particularly helpful!

  • player.tick()
  • player.correctMedia()
  • player.update()
  • player.wait()
  • player.showSlideID()
  • player.showSlideIndex()
  • player.showNextSlide()
  • player.showPreviousSlide()
  • player.setSlideIndex()
  • player.hideInactiveSlides()
  • player.currentSlide()
  • player.currentZoom()
  • player.elapsedTime()
  • player.play()
  • player.pause()
  • player.pauseClips()
  • player.block()
  • player.unblock()
  • player.restart()
  • player.initLoadQueue()
  • player.loadResourcesForNextSlide()
  • player.loadResources()
  • player.unloadResources()
  • player.prepAudio()
  • player.updateMediaMonitor()
  • player.onLoadedData()
  • player.reorient()
  • player.maximize()
  • player.revealPostInterstitial()
  • player.showInterstitial()
  • player.addDiagnosticButton()
  • player.sniffParameters()
  • player.setupStressTest()
  • player.prepSlides()
  • player.loadFonts()
  • player.parseFrameData()
  • player.loadFrame()
  • player.loadUserScript()
  • player.loadMasks()
  • player.parseMaskData()
  • player.load()
  • player.tapPause()
  • player.tapZoom()
  • player.updateItemInfo()
  • player.forceRepaint()
  • player.initGlobals()
  • player.restrictUnsupportedBrowsers()
  • player.GetVar()
  • player.SetVar()
  • player.initIOS()
  • player.parseStoryData()

Hope that helps someone out there!

Rashid Kharrat

Mark Ward said:

Hi Thomas

While working on a project I mapped out the functions in the player object. It doesn't list arguments but served as a starting point. player.restart() was particularly helpful!

  • player.tick()
  • player.correctMedia()
  • player.update()
  • player.wait()
  • player.showSlideID()
  • player.showSlideIndex()
  • player.showNextSlide()
  • player.showPreviousSlide()
  • player.setSlideIndex()
  • player.hideInactiveSlides()
  • player.currentSlide()
  • player.currentZoom()
  • player.elapsedTime()
  • player.play()
  • player.pause()
  • player.pauseClips()
  • player.block()
  • player.unblock()
  • player.restart()
  • player.initLoadQueue()
  • player.loadResourcesForNextSlide()
  • player.loadResources()
  • player.unloadResources()
  • player.prepAudio()
  • player.updateMediaMonitor()
  • player.onLoadedData()
  • player.reorient()
  • player.maximize()
  • player.revealPostInterstitial()
  • player.showInterstitial()
  • player.addDiagnosticButton()
  • player.sniffParameters()
  • player.setupStressTest()
  • player.prepSlides()
  • player.loadFonts()
  • player.parseFrameData()
  • player.loadFrame()
  • player.loadUserScript()
  • player.loadMasks()
  • player.parseMaskData()
  • player.load()
  • player.tapPause()
  • player.tapZoom()
  • player.updateItemInfo()
  • player.forceRepaint()
  • player.initGlobals()
  • player.restrictUnsupportedBrowsers()
  • player.GetVar()
  • player.SetVar()
  • player.initIOS()
  • player.parseStoryData()

Hope that helps someone out there!


Thank you Mark, the list is really helpful

I setup a custom previous button, but it's acting like a history button, so if I jump from slide 1 to slide 5 and then I click the previous button, it goes back to slide 1 instead of slide 4.

I tried using player.showPreviousSlide(), it works like a charm in story_html5 but doesn't work in story.html

Only player.GetVar() and player.SetVar() are working in story.html while all the other functions are not.

Any help would be appreciated.

Robert Stewart

Here's my two cents. The storyline player API is not an API. Just a FLASH player.

If I were the player designer I'd use HTML5 as the player and just have the slides (a single FLASH swf) wrapped inside it.

It would be open source and and custom player options could use id or class to make changes in CSS.

Now we need a real API to call up the the SLIDES just like in actionscript or any website DHMTL or HTML5 menu.

So if I want to use a truely custom menu with, lets say a hundred slides using either javascript or Jquery or whatever frame work;

I would just have to add my click events to call a slide. And I could actually use:

if then else

switch

or whatever JavaScript to control all by navigation inline or using an external js files.

Make sense?

P.S. Half the development work seems like it exists in HTML5 player. However do not put the Menu navigation in a canvas object or master layer as an option. Have it outside in plain HTML. Just think, we could use any web page editor to design our own or edit a HTML template player wrapper (Expression, CodeCharge or if I were really stupid even .NET )

Kenneth Evans

GetVar does use string text for user defined variables. For example, to fetch the user defined variable, "usrScorePoints":

var player=GetPlayer();
var usrScorePoints=player.GetVar("usrScorePoints");

Great list of functions, Thomas. Thanks! I also discovered that if you set user variables for the Results, you can also access Quiz results, such as:

Results.ScorePercent and Results.ScorePoints

- see this post.

 

Dave Cox

I created a Jeopardy game where I'm using javascript to load different games of questions, answers and distractors. Everything works great, except when I display the question variable in a multiple choice question, the correct answer always shows a different size font from the other distractors. Changing the font size or text box parameters doesn't seem to have any affect when the answer is populated with a variable. Any suggestions would be appreciated.

Thanks,

Dave

Ashley Terwilliger

Hi Dave,

Are the questions built in Storyline and the javascript is pulling random games? Or are they built somehow in Javascript and pulled in? 

For Storyline variable references, the text box sizing does not update dynamically so you'd want to set it to accommodate the largest amount of text possible. 

Dave Cox

No, the questions are prebuilt. The games are based on our compliance training, and the IDs create the question sets. I'm importing the questions, four distractors, and a feedback message into a pre-built game board in Storyline 2.

The problem that I'm experiencing is that the answer that is selected as the correct answer is always smaller text, even when there is plenty of room for the text in the text box.

Thanks,

 

Ashley Terwilliger

Hi Dave, 

First, responding via email includes your signature here so you may want to edit the post to remove that information if you wish. But it's entirely your call. 

So the questions are not built in Storyline (or Quizmaker for that matter)? You mentioned variables showing oddly and maybe that threw me off - but could you share an image or a copy of your .story file for us to take a look at? 

Dave Cox

Hi Ashley,

I really appreciate your assistance.

The question is built in Storyline. It is a default quiz multiple choice question. The question, answers, and incorrect feedback are populated with variables. Those variables are updated when the game loads by importing and updating the variables from the external file. This game was built on the original jeopardy game that I downloaded from some of your game examples.

Here is the .story file. It won't run without the questions, but you can see the formatting problem if you preview the question slides. I'm starting to think it has something to do with the way the master slide is formatted, but I don't see any way to format the answers.

I'm also attaching the file that has the questions that import. To use it, you will need to add the import statement to the story.html file:

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

 

Dave Cox

Hi Ashley,

The problem isn't with the import, but the way the text is displayed when variables are used. The text size and position is different for the correct answer than it is for the incorrect answer. The text size also changed as you hover over the answers.

I've set this version up to play without the import routine. The questions are all built from defaults in the variables. You can look at any question slide to see the issue. Start with column 3, as these are the most noticable.

Thanks again for your help,

Ashley Terwilliger

Thanks Dave for narrowing it down - I saw what you're referring to. I took a look at recreating the correct answer, and then it was the same font size as the others. I don't see anything off in the way it's set up on the slide or in form view - but I'd want to begin by confirming that you're working exclusively on local project files as described here. Working off a network or shared drive can cause elements of corruption and issues within your project files.  You could try importing it into a new project file to see if that resolves the behavior, but I'd also look at just reentering the correct answers as on the two I tried that set the font back to the same size as the others.