Prevent progression until inserted Web Object has been completed

As you guru's know, Storyline 3 is able to execute externally, i.e. user, generated JavaScript code. I know the commands for outputting the code to localStorage/sessionStorage and bringing it back in again. What I am having trouble with is transferring the exported variable value, via localStorage/sessionStorage, from one storyline generated web application to another, the former of which happens to be embedded, as a Web Object, into the latter.

The idea is to prevent the student from progression until the embedded web object, which happens to be a Storyline generated interactive animation, has been completed. I could build these animations.....there are a number of them, into the main project, but they work fine as web objects and the main project is already VERY large.

My plan was to set a variable value to 'true' in the animation project, inserted into the main project as a Web Object, when the animation has been completed, exporting it, via javascript and then transfer that variable value back into the main project via javascript using browser sessionStorage or localStorage. This variable would then used to trigger the change of state of a 'continue' button in the main project. The problem I have is that the values from the web object don't appear to reach localStorage/sessionStorage. It would need to work across all browsers, including Internet Explorer!

Any ideas how I can achieve this. Or can anyone think of an alternative method that doesn't involve building all the animations into the main project?

Thanks in advance.

21 Replies
Michael Anderson

Here's a very basic demonstration of this working. The pacman.story file has been published and then inserted into the Animation.story as a web object. Of course the pacman story.html was renamed to index,html first. You can see the javascript in the trigger in the pacman file that changes the variable in the Animation course.

Chris Clift

Hi Michale, I have implemented in the locally run project and it works brilliantly. Again thank you. I will be sending a version to the client shortly to test the LMS version and will keep you updated.

In the meantime, other than posting on the forum and using tutorials on general JavaScript use, do you know any resources specifically aimed at JavaScript inside Storyline?

Much appreciated

Chris

Chris Clift

Hi Michael, thanks for the links, I found them very informative. @Matthew and (if he catches this chain) @Zsolt, both of you have some very interesting tutorials which I am bound to look at for ideas on how to resolve some of the issues I come across.

However, picking up on this chain, the resolution kindly provided by Michael, using the parent.GetPlayer() script, works just as Michael said it would in Internet Explorer and, again, thank you for that Michael.....however in Google Chrome, which throws up the following error message in the Developer Tools:

app.min.js:3 actionator::exeJavaScript - Blocked a frame with origin "null" from accessing a cross-origin frame.

Which, when expanded, gives the following information:

(anonymous) @ app.min.js:3
(anonymous) @ app.min.js:3
o @ app.min.js:3
exeJavaScript @ app.min.js:3
c @ app.min.js:3
trigger @ app.min.js:3
triggerAction @ app.min.js:3
(anonymous) @ app.min.js:3
(anonymous) @ app.min.js:3
(anonymous) @ app.min.js:3
(anonymous) @ app.min.js:3
applyMethod @ app.min.js:3
executeAction @ app.min.js:3
executeActions @ app.min.js:3
(anonymous) @ app.min.js:3
forEach @ app.min.js:3
executeFilteredPlayerEvent @ app.min.js:3
t @ app.min.js:3
triggerEvent @ app.min.js:3
h @ app.min.js:3

I presume this is a security feature in browsers that, since IE is not w3 complient, ignores. My question is, is there a way to get the parent.GetPlayer() function to work in Chrome?

Chris Clift

Hi Michael. I had read somewhere that this was an issue with Chrome not allowing access unless it was hosted, however, unfortunately the client has requested that the CBT be run locally so hosting is not an option and, due to strict security issues, there isn't a hope in hell of getting them to install a local web hosting service to try and get round the issue. Any other thoughts would be gratefully received?

Michael Anderson

Some options that come to mind.

1. Modify the security settings in Chrome to allow the course to run normally.
2. Use a different browser like Firefox to view the course.
3. Install a web server on the local network to serve the course.
4. Modify the course in some way so that you are not using a web object.

Ariff Khalid
Michael Anderson

Here's a very basic demonstration of this working. The pacman.story file has been published and then inserted into the Animation.story as a web object. Of course the pacman story.html was renamed to index,html first. You can see the javascript in the trigger in the pacman file that changes the variable in the Animation course.

Hi Michael,

I've downloaded your demo files and tried to get it set up but it doesnt seem to work.

these are my steps:

publish Pacman.story as web with the following properties. (.zip attached)

Format HTML5 Only

Player - Classic - Chromeless Palyer

Quality: Optimized for standard delivery

Publish: Entire Project


change web object to point to story.html, then publish Animation.story as scorm file and upload to LMS (moodle). (testing on 1.2 and 2004, attached is 1.2)

Format: HTML 5 with Flash fallback

Player:Classic - Storyline Player

Quality: Optimized for standard delivery

Publish: Entire Project

Tracking: Slides viewed (1 of 1)

 

Result: nothing triggers. animationComplete : false.

 

Is there something im doing wrong?

Ariff Khalid
Michael Anderson

Did you rename the story.html file to index.html in the Pacman project after publishing it and before pointing the web object to that folder? I uploaded and tested this in Scorm Cloud and it works fine there.

Hey Michael, yes i did. now another thing i notice is that your animation.story web object points to a local file C:\Users\Home\Documents\My Articulate Projects\pacman - Storyline output. Does it not work if this is hosted on the web? i have attached my two files renamed index and also the scorm i'm uploading to Scorm cloud. it's still not triggering the %animationComplete%

 

PacmanD is what i unzip into my web hosting server where, the link pointing to index.html is what i subsequently update AnimationD's web object to point to. AnimationD i then upload to scorm cloud, launch, and it's not triggering. Am i doing something wrong?

I appreciate your feedback and help on this. 

Michael Anderson

The path that the web object shows it just the original location of the files. When you insert them into the project as a web object, Storyline copies the files into the project, so the original location doesn't matter anymore.

Publish the Pacman project to web format, and leave it on your local hard drive. Open the published output and rename the story.html file to index.html. Then in the Animation project, insert a web object that points to the published folder of the Pacman project. When you do this, Storyline will copy all of the Pacman output files into the Animation project. Then publish the Animation project for LMS, zip it and upload to your LMS and everything should work.

Ariff Khalid
Ariff Khalid
Michael Anderson

Did you rename the story.html file to index.html in the Pacman project after publishing it and before pointing the web object to that folder? I uploaded and tested this in Scorm Cloud and it works fine there.

Hey Michael, yes i did. now another thing i notice is that your animation.story web object points to a local file C:\Users\Home\Documents\My Articulate Projects\pacman - Storyline output. Does it not work if this is hosted on the web? i have attached my two files renamed index and also the scorm i'm uploading to Scorm cloud. it's still not triggering the %animationComplete%

 

PacmanD is what i unzip into my web hosting server where, the link pointing to index.html is what i subsequently update AnimationD's web object to point to. AnimationD i then upload to scorm cloud, launch, and it's not triggering. Am i doing something wrong?

I appreciate your feedback and help on this. 

After further testing i can confirm that it indeed works when the web object points to the file located on my C:\\ Drive. Even when accessing from another PC and also turning the pc where the file is hosted off.

But i worry about the potential ramifications of this - wouldnt it be less stable in terms of caching/updates? is this just a limit of the workaround? because i'm also worried that i may need to leave the computer running/turn it on every so often so that the file can still be accessed as my implementation will be commercialised and integrated into our client's LMS.

 

 

Michael Anderson

The web object is never updated from the original C: location after you insert it into the project. ALL of the Pacman files have been copied into the Animation project at that point and the C: location is never used by Storyline again. It is only displayed there to show you where the files were originally inserted from. Once you upload the Animation project to the LMS, ALL of the Pacman and Animation files will reside on the LMS. There will be no connection to your local computer.

Ariff Khalid
Michael Anderson

The web object is never updated from the original C: location after you insert it into the project. ALL of the Pacman files have been copied into the Animation project at that point and the C: location is never used by Storyline again. It is only displayed there to show you where the files were originally inserted from. Once you upload the Animation project to the LMS, ALL of the Pacman and Animation files will reside on the LMS. There will be no connection to your local computer.

Thank you Michael, yes it works perfectly. appreciate your help in this matter