Custom Javascript Content in Rise

Jun 03, 2020

scott mangold
By scott mangold

Greetings Rise Community,

I am a JS developer trying to understand which options are available for embedding my own custom JS content in the rise.articulate.com platform.

Examples:

  • Custom JS drag and drop interactions
  • Choose your own adventure branching scenarios
  • Branching video player
  • etc..

I understand there are two options for embedding 'custom content' in the player:

  1. Create a Storyline interaction > publish to Review 360 platform > Insert into module as a Storyline Interactivity Block.  From what I understand, this method enables me to block learner progress until a learner completes the Storyline interaction.
  2. Host my interactions on my own server, embed them into a page using the Multimedia > Embed block, then inserting my iframe code in the Content pane.

I have been successful integrating my own custom content using option 2, however, my interactions do not 'talk' to the Rise course player in any way.  I'm interested to know the following:

  • Is there a way to block learner progress until they have completed a custom JS interaction?
  • Is there an API or method call that I can use in my interactions to unlock the next page of the course?
  • Is there any discussion to include this type of behavior in forthcoming releases?

Thanks in advance for any replies!

9 Replies
Crystal Horn
almost 4 years ago06/04/20 at 7:10 pm (UTC)

Hi Scott. Nice work! Unlike Storyline blocks, web content that is included using the Embed block won't talk to the Rise player. There isn't a way to see that the external content has been completed.

We don't have plans right now to enable tracking of external web content in the embed block, so for now, the Storyline block might be the better option for you if that's a requirement.

scott mangold
almost 4 years ago06/05/20 at 10:26 pm (UTC)

Thanks for your reply Crystal

Thinking out loud:

  • Maybe there is a way to embed my custom interaction into a media > embed frame, then on the same page, embed a Storyline 360 component.  When a learner completes my custom interaction, maybe I can trigger the SetStatus() method in the Storyline 360 frame.

I'll experiment a little with that.

Regardless, it would be great to be able to target completion from a media > embed frame by calling a method like window.parent.completePage(). I'd rather have Rise-sanctioned solution that a hack or workaround that may stop working eventually as the platform evolves.

Interested to know if anyone else has had luck with what I'm trying to accomplish..

Ariff Khalid
over 3 years ago10/15/20 at 7:04 pm (UTC)
scott mangold

Thanks for your reply Crystal

Thinking out loud:

  • Maybe there is a way to embed my custom interaction into a media > embed frame, then on the same page, embed a Storyline 360 component.  When a learner completes my custom interaction, maybe I can trigger the SetStatus() method in the Storyline 360 frame.

I'll experiment a little with that.

Regardless, it would be great to be able to target completion from a media > embed frame by calling a method like window.parent.completePage(). I'd rather have Rise-sanctioned solution that a hack or workaround that may stop working eventually as the platform evolves.

Interested to know if anyone else has had luck with what I'm trying to accomplish..

Hi Scott,

have you managed to go anywhere with this because i am also looking for a more elegant solution for a modern age. with your option 1, would that storyline published course still trigger the execute javascript command? because from my tests it doesnt seem to work. 

https://community.articulate.com/discussions/articulate-storyline/prevent-progression-until-inserted-web-object-has-been-completed

As for getting web content to respond to the player, it works if the course is storyline based as per this discussion. But like you, my course has been created in Rise. and i need a way to make the rise - published to web - content to respond to a player.

 

 

James Wallace
over 2 years ago10/28/21 at 9:19 pm (UTC)

I have a leader board that I built in Storyline. It uses JavaScript to query the xAPI statements in a Learning Records Store and find the learner names and scores associated with the specific course, sort them and assign the values to Storyline variables. I'd like to use it in a Rise course. I exported the Rise course and added the xapiwrapper and my .js file that defines my function to the index.html file in the Rise course, The function gets defined, but it is never executed by the Storyline slide. Is this because the Storyline slide is inserted from Review 360, which doesn't really like to execute JavaScript? Has anyone else gotten something like this to work in Rise using JavaScript and Storyline variables?

Sign In to Reply