Trigger completion of an HTML5 game(exercise) built externally

Hello,

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.

Thanks,

Akhill

 

12 Replies
Curtis Wiens

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');

}

Northeast Maritime Course Master

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

Northeast Maritime Course Master

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? 

 

Zsolt Olah

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

Zsolt Olah

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?