I have an HTML5/Javascript game as a link which I can embed as a Web Object in Storyline. I would like to know what options I have, to trigger completion of that Storyline block in the game.
I'd like to know of any code I can write in my Javascript game to communicate with Storyline to essentially say it is finished.
I do know of some mentions of adding Javascript code in a Storyline slide that refers to the "Player". But I'm not sure how that could communicate with the HTML5 game action that triggers completion.
I'd appreciate any help regarding this issue as I require my HTML5 games to communicate with the LMS to track completion statuses using Storyline->Rise.
You could have a Boolean variable in storyline that is waiting for the value to change to True and trigger Course Complete off that. See attached
Create a function that fires in your HTML when it is complete and send that to storyline: function courseComplete(){ var player = parent.GetPlayer(); player.SetVar("isComplete", 'True');
Nice resource! I have been able to do a ton of stuff with JavaScript and Storyline. Most recently we were able to get Greensock to tween storyline objects.
I tried this by adding the trigger you suggested and exported the Storyline by publishing it to Articulate 360 as I'm going to use the HTML5 game in a Rise block.
But, I get the error: (when I call courseComplete() from the js script)
SecurityError: Blocked a frame with origin "http://www.<domain>.com" from accessing a cross-origin frame.
I think this is happening because I'm not exporting the Storyline slide as required to run your suggested solution. Maybe because my WebObject is a live link and not part of the Storyline package/contents?
Can you give me more context on how I should export/publish the Storyline slide containing the WebObject so that I can embed it into Rise as a block?
It won't work if the webobject is a live link. It is a security issue unless it's either on the same domain or you configure the server, which you probably don't have access to anyway. Can you publish Storyline webobject as a folder?
I sure can put in a folder. I am having trouble figuring out the structure of the package.
I used a section (attached) on Project 99 as a reference, however, the hierarchy of the folder and what goes into the index.html is unclear to me. I could put all of the code from my main html file into index.html but still unclear about the hierarchy or what I'm supposed to do later.
Detail: I'm publishing the Storyline slide as an Articulate 360 package
Does the section attached here apply to what I'm looking for?
That trick is for webobjects where you don’t display them. You just want files published with your Storyline. So, for example, you have a javascript file where you store some code. You don’t actually show the webobject, you just need that file as a resource.
If I understand your situation you have a game in html5 and you want to show it in Storyline. Correct? What tool did you use to create the html5 game?
Great! So in your html five game somewhere you have a javascript that runs when the user completes the game. That's where you place the parent.GetPlayer().SetVar("GameOver",1); (or whatever code you need to communicate to storyline).
Now, this game probably have other files as like images or CSS or whatever. They should be in a folder. They also have a .html that you launch to play the game. That's the file you launch in the browser. If the file name is different from index.html, rename it to index.html.
Then add a webobject in Storyline, point to the folder (make sure you select the folder and NOT the index.html inside the folder).
To test, publish the files locally first (without Rise). The GameOver variable should change inside Storyline when you complete the game. Storyline should set the completion of the course when this happens. (You can use the new trigger set course completion.)
12 Replies
You could have a Boolean variable in storyline that is waiting for the value to change to True and trigger Course Complete off that. See attached
Create a function that fires in your HTML when it is complete and send that to storyline:
function courseComplete(){
var player = parent.GetPlayer();
player.SetVar("isComplete", 'True');
}
Hi Akhill,
This example may help you: https://www.rabbitoreg.com/2016/11/05/javascript-storyline-two-way-communication-via-iframe/
Also, lots of other examples for JavaScript on Project 99: https://www.rabbitoreg.com/examples/p99/#/
Zsolt
Nice resource! I have been able to do a ton of stuff with JavaScript and Storyline. Most recently we were able to get Greensock to tween storyline objects.
This post was removed by the author
Hi Curtis,
I tried this by adding the trigger you suggested and exported the Storyline by publishing it to Articulate 360 as I'm going to use the HTML5 game in a Rise block.
But, I get the error: (when I call courseComplete() from the js script)
SecurityError: Blocked a frame with origin "http://www.<domain>.com" from accessing a cross-origin frame.
I think this is happening because I'm not exporting the Storyline slide as required to run your suggested solution. Maybe because my WebObject is a live link and not part of the Storyline package/contents?
Can you give me more context on how I should export/publish the Storyline slide containing the WebObject so that I can embed it into Rise as a block?
Can you help with this @Zsolt?
-Akhill
I have come across that too. Communicating between iframes is complicated. Can you put the function somewhere else? Outside the iframe?
It won't work if the webobject is a live link. It is a security issue unless it's either on the same domain or you configure the server, which you probably don't have access to anyway. Can you publish Storyline webobject as a folder?
I sure can put in a folder. I am having trouble figuring out the structure of the package.
I used a section (attached) on Project 99 as a reference, however, the hierarchy of the folder and what goes into the index.html is unclear to me. I could put all of the code from my main html file into index.html but still unclear about the hierarchy or what I'm supposed to do later.
Detail: I'm publishing the Storyline slide as an Articulate 360 package
Does the section attached here apply to what I'm looking for?
I have to figure out a workaround as don't have control over the server that the LMS is hosted on.
Hi,
That trick is for webobjects where you don’t display them. You just want files published with your Storyline. So, for example, you have a javascript file where you store some code. You don’t actually show the webobject, you just need that file as a resource.
If I understand your situation you have a game in html5 and you want to show it in Storyline. Correct? What tool did you use to create the html5 game?
Sent from my iPhone
That is correct, I want to display it and trigger completion of that block in Rise after I embed it. I've used HTML5, Core Javascript/Jquery.
Great! So in your html five game somewhere you have a javascript that runs when the user completes the game. That's where you place the parent.GetPlayer().SetVar("GameOver",1); (or whatever code you need to communicate to storyline).
Now, this game probably have other files as like images or CSS or whatever. They should be in a folder. They also have a .html that you launch to play the game. That's the file you launch in the browser. If the file name is different from index.html, rename it to index.html.
Then add a webobject in Storyline, point to the folder (make sure you select the folder and NOT the index.html inside the folder).
To test, publish the files locally first (without Rise). The GameOver variable should change inside Storyline when you complete the game. Storyline should set the completion of the course when this happens. (You can use the new trigger set course completion.)
Then publish the Stortylne course to 360.
And add this as a block in Rise.
Makes sense?
Yes, makes sense. I'll try this out and provide an update! Appreciate it, Zsolt
This discussion is closed. You can start a new discussion or contact Articulate Support.