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
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
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?
Hi John,
Just in case Steve is not subscribed to this thread, you may want to send him a PM.
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!
Hope that helps someone out there!
Thanks Mark for sharing those here and welcome to the E-Learning Heroes community!
Thanks Mark!
This will be very helpful.
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.
Yes, I too facing the same issue as Rashid Kharrat. Anybody got that worked?
Thanks.
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 )
Hi,
Can anyone tell me how to insert custom css in articulate storyline? I need it to pull in certain reports.
Thanks!
GetVar () needs to have a variable within the parentheses. Not string text.
Hi, Sriram - As this is an older thread and some participants may not still be subscribed, you may want to reach out to participants directly using the "Contact Me" link via their profile. :)
GetVar does use string text for user defined variables. For example, to fetch the user defined variable, "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.
Thank you, Mark Ward! Totally printing this out. I'm hoping I can use showSlideID or showSlideIndex toward making a custom menu. Are the slides referred to by number or by slide title?
Glad that you were able to get some assistance here as well Jay! Thanks for popping in.
hi
How do I use the following code in the program
on (press)
{
fscommand("a1");
}
Thanks
Hi Yasser,
You'll need to add it as a part of a trigger - and although Javascript is not something we can offer support for, you'll find some best practices and information here.
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
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.
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,
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?
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>
Hi Dave,
I am not sure which slides to preview with the question elements, but if it's pulling from an external file using the Javascript - totally outside my personal wheelhouse and our team's level of support.
hopefully someone in the community will be able to chime in here!
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,
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.
This discussion is closed. You can start a new discussion or contact Articulate Support.