lmsAPI Functionality in HTML5 Output

Hey all,

I've been searching through the forums and haven't been able to find anything solid.  I'm using Storyline 360, outputting to both HTML5 and Flash to cover my bases, since the audience doesn't have dedicated machines that they are taking this from.

I'm relying heavily on external Javascript that I wrote, which I have tested thoroughly in the Flash version, and it works fine.  But when it comes to the HTML5 version, it stops working.  I've proven that I'm able to get into the Javascript functions, like I would expect, but it appears that lmsAPI is no longer available to the course.

Are there any similar functions to those of the lmsAPI functions in the HTML5 output?  

Specifically, I'm looking for a way to do the following in HTML5:

  1. Get the StudentID from the LMS.
  2. Get the StudentName from the LMS.
  3. Manually call SetStatus("completed"); to pass a completion to the LMS on the last page of the course.
144 Replies
Ed Crane

Mathew was kind enough to send me to this thread in order to resolve my problem. To summarize, some learners will go through the Storyline module and take a quiz using the basic  Storyline quiz slides and results slide. They must get 80% or higher to get completion credit. However, some learners won't be required to view most of the content nor the quiz, so I created a button to take them to the last slide ("Thanks for taking this training"), where they can exit. However, as they're not taking the quiz, they won't get credit for completion. So I wanted to set it up so that upon clicking the button (or by whatever other means), and exiting the course, it will send a passing score to the LMS.

So I'm looking at the code and have a couple of questions (as you'll see, I'm a newbie to JavaScript -- I apologize in advance):

"...we need to define a passing score:

var passingScore = "100";

…in this example, the user would need to get a score of 100 or more to pass.”

 

In my case, the user needs nothing to pass except clicking the button, so I’m not sure what to put here? 0? I believe passingScore would also be a custom variable I would need to create?

“Next, we will use Adam's code to find the lmsAPI. This will allow us to talk to the LMS:

function findLMSAPI(win) {

 if (win.hasOwnProperty("GetStudentID")) return win;

 else if (win.parent == win) return null;

 else return findLMSAPI(win.parent);

}

var lmsAPI = findLMSAPI(this);”

 

Not sure which lines of code I would need from here....I don't need to get the Student ID as Adam did.

"Then we are going to get a score from Storyline (which in this example is stored in a variable called Your_Score_Variable*) and send that to the LMS:

lmsAPI.SetScore(player.GetVar("Your_Score_Variable"), 100, 0);
Next, we will see if the score we got from Storyline is greater than or equal to the passing score that we defined earlier:

if (player.GetVar("Your_Score_Variable")>= passingScore)"

I'm not sure what lines I need here, what variable I may need to create, and what the values should be.

 

Matthew Bibby

Sorry Ed, I sent you to the wrong comment.

This code of Adam's will mark your module complete when executed:

function findLMSAPI(win) {
if (win.hasOwnProperty("GetStudentID")) return win;
else if (win.parent == win) return null;
else return findLMSAPI(win.parent);
}
var lmsAPI = findLMSAPI(this);
lmsAPI.SetReachedEnd();

Just add that to an Execute JavaScript that is attached to your exit button.

Don't worry about the StudentID reference. That's just there so we can check if we have found the LMS API (which enables us to communicate with the LMS).

Ashley Terwilliger

Hi Stephanie,

Thanks for checking in. This is something that our team is still taking a look at. Those features and Javascript elements that were accessible in Storyline 2, changed in Storyline 3 and 360 as we entirely rewrote the player and it's behavior. 

Those types of modifications have always been unsupported, but we do see the value in their use, so we're looking at how and why they fit the needs of Storyline 2 users and what options we could include in Storyline 3/360 to fix it going forward. 

Adam Trosper

Hi Ashley,

I understand that the modification of Javascript is not necessarily "supported" by Articulate.  That makes total sense, since it's not on your team if one of us makes a mistake in our coding.

However, in most cases I've encountered related to this topic, I believe we are only modifying the code because of a lack of a feature that meets our needs within Storyline.  

For example, this entire thread probably wouldn't be necessary if there was a trigger for "Mark Course Complete" within Storyline.  In that case, I would be able to simply say "Mark the course complete when the timeline starts on Page 4.4" or something to that effect.

Since this feature would be built into Storyline, it would presumably work in both Flash and HTML5, and wouldn't require external Javascript.

Alternatively, it could also be solved if we were given a new option in Publish Settings > Tracking, for "Mark [Completed/Passed] when user reaches slide: [4.4]".

I hope this is helpful for your team in determining how best to approach the request.

Stephanie Powner

Hi - I am able to set the status to pass/fail using the javascript so I think I am getting there.  I have put the javascript on in a trigger on the results slide I need to report on (to get the scores for the final exam across to the LMS).  The problem is that the status I set with the script is being overwritten  by some built in function used for reporting. Does anyone have a suggestion about the best way to avoid this?  Many thanks

Matthew Bibby

Hi Stephanie,

Here is how you stop the built-in reporting from interfering with things:

  • Add a new scene to your project
  • Add a new slide to that scene
  • Make sure that there is no way for the user to navigate to that slide (i.e. it isn't included in the menu, no triggers will take them there etc.)
  • Change the reporting options to be based on slide views. Make it so people need to view all of the slides for the module to report it is complete. And of course, because they can't access that one slide... it'll never happen!

Let me know if you have any further questions.

Helene Sobelman

I apologize if this is duplicative... I have read thru this thread but I still can't get this to work.. so I must be doing something wrong.

I had a very simple piece of javascript that was working to mark completion (below) and it was working for flash output just fine but now does not seem to be working for html5.

var lmsAPI = parent;
SetStatus("completed");

It doesn't sound like there has been a software update to address this yet.. but in the meantime.. is there any snippet of code that I can use to mark completion in both the flash and html5 versions?

Any help is much appreciated!

Adam Trosper

Hi Helene,

SetStatus("completed") only works with the Flash version because the HTML5 version doesn't end up using the lms.js file. So, you will have to bypass that function and directly call the function that the SetStatus function would have called... Try this:

function findLMSAPI(win) {
if (win.hasOwnProperty("GetStudentID")) return win;
else if (win.parent == win) return null;
else return findLMSAPI(win.parent);
}

var lmsAPI = findLMSAPI(this);
lmsAPI.SetReachedEnd();
Don Anthony Manuel

Hi guys... I am trying to create a certificate on a slide, following the assessment that will pull variables from SCORM (student name / today's date) and then allow me to print.

I've seen people mention to Print that you would need a flash object.  Our organization no longer supports Flash at all.

Any help?

Chris Pim

Try this:

---------------------------

if (document.location.href.indexOf('html5') < 0) {
GetPlayer().printSlide()
} else {
if(!window.hasPrintStyle){
window.hasPrintStyle = true;
var css = "@media print {div.controls.grid-row.inflexible,div.area-secondary.cs-left.inflexible,header.header-primary.centered-title.extended-height,div.presentation-wrapper:after {display:none !important; visibility:hidden !important;}}";
head = document.head || document.getElementsByTagName('head')[0];
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
}
window.print();
}

Adam Trosper

If that doesn't work, the way that I've printed in the past was to use Execute Javascript to essentially create a new window with the certificate I wanted to print created on it using HTML.  The one piece of advice I have about printing is that different browsers handle printing just a little differently, and you will have to account for that.  Also, I always include a "print" button on the page that will disappear when clicked, in case they want to print a second copy, the cancel the print job, etc.

Ashley Terwilliger

Hi Stephanie,

The issue with Javascript code no longer sending completion status to LMS in Storyline 360 and using HTML5 output, is still an open issue based on the changes made to the publishing engine in Storyline. Our team is looking at ways that we could incorporate these features for you and others to use in the future, but in the meantime you'd want to use the built in completion elements from the results slide or publishing properties. 

Stephanie Powner

Hi Ashley

Thanks for the information. There was an issue with the built in Scorm reporting for HTML5 courses, which is why I was trying to do down the javascript route. However, I have been contacted by your support team to say that this has been fixed in the update made available this evening. Hopefully that will sort the problem as I am very keen to move to HTML5 output asap due to the ever increasing restrictions on Flash player use.

Thanks again