iFrame completion from Storyline embed

Legacy Evolve General Help
1

I’m having inconsistent results with marking a Storyline interaction embedded as an iFrame as complete.

I added this code to the <head> section of the index.html file:
<script>
window.addEventListener('message', e => window.evolve = e.ports[0]);
</script>

In Storyline, I added an Execute Javascript trigger when a variable changes:

var player = GetPlayer();
var outcome = player.GetVar('ConversationOutcome');

if (outcome == 1 || outcome == 2) {
evolve?.postMessage('completed');
}

I set content locking on the next page until this interaction is completed, with completion status set to iFrame Content Event.

I was able to get this to work initially, but I’ve made some changes to the module and now this isn’t working. The console log showed that the Javascript trigger is firing, but the postMessage command isn’t being executed or logged to the console. I’ve also tried stripping down the Javascript to just evolve?.postMessage('completed'); and I’ve also tried attaching it to various triggers. No luck - sometimes the Continue button is completely unlocked, sometimes it is locked and never unlocks, and sometimes it behaves a little differently in Evolve Preview vs SCORM Cloud where it will be hosted.

Any tips on triggering iFrame completion from a Storyline embed?

2

hi @sophia.stone if you DM me a link to your course in Evolve I can take a quick look for you

1 Like
3

I’d really appreciate that. How do I send you a DM?

4

Ah, I think that option doesn’t come up if you’re a new user… I’ll DM you and hopefully you can reply to that

5

For the benefit of anyone else who runs into this issue - it appears that Storyline has some ‘usage analytics’ feature baked into published courses that uses a similar method of communication to that which Evolve uses to handle iframe-content-to-course communication - and this is causing a clash that prevents Evolve’s ‘iframe completion’ functionality from working.

The simple workaround is to disable the Storyline analytics functionality as per this Articulate Support Article.

If anyone does run into a situation where they do still need Storyline’s usage analytics to be enabled whilst still being able to use Evolve’s ‘iframe completion’ functionality, I can probably figure out a workaround to allow for both.

6

I’ve managed to get SL embeds to trigger (had no idea about those analytics, good to know) so can offer some JS that worked for me if needed.

7

If you don’t mind sharing, I’d be interested to learn what worked for you.

8

I would be curious to know as well, if only because I’m about to make some changes that should allow anyone using this functionality this to avoid the issue @sophia.stone ran into…

9

No worries, I’ll dig it out, can’t share the project, but I can share the JS and set-up I ended up using. It might not be the best method/cleanest. Basically I modified the exported SL story/index.html to add a script to act as a go between for the SL element and the Evolve listening port. Passed the flag of complete up from SL to Evolve.

iFrame stealing focus
10

that would be great if you could; feel free to DM me if you don’t want to share for everyone

essentially I’d just like to check that the changes I’m making wouldn’t mess up what you’ve done…

basically the update will allow the code that goes in the iframe content to check that the message originates from Evolve, like this:

<script>
        window.addEventListener('message', e => e.data === 'evolve-iframe' && (window.evolve = e.ports[0]));
</script>

With the main change being this bit: e.data === 'evolve-iframe'