Showstoppers are sometimes good!

This example shows how to embed a Storyline interaction in Rise as a “showstopper,” meaning the user can’t continue with the Rise content until they complete the Storyline module.

UPDATE: Articulate now has a built-in feature to do this. Here’s the link to the article: https://articulate.com/support/article/Rise-How-to-Require-Learners-to-Complete-a-Storyline-Block

First of all, take a look at the example here:

[thrive_megabutton mt=”Embedding a Showstopper Storyline Module in Rise” st=”” color=”blue” link=”http://www.rabbitoreg.com/examples/risestop/” target=”_blank” align=”aligncenter”]

How to embed a showstopper Storyline?

You’ll need a Storyline 360, Rise, and some external JavaScript you can download from my blog (full source) or javascript only for step Post Production.

1. Create a Storyline 360 module with a button and a JavaScript trigger attached when the user clicks: parent.showCont(0);
   
2. Publish the Storyline module to Articulate 360.

Working in Rise:

1. Create a page in Rise where you want to test the Showstopper Storyline
2. Create a lesson with blocks
3. Add some text, just to make sure you see nothing else gets hidden besides the Continue button
4. Embed the Storyline 360 module you published
5. Add a Continue button
6. Set the Continue button to show only when previous block is completed

Export the Rise course as Web (you can also export later to LMS).

Post Production

Unzip the file you just created. You’ll need to do two things to make the magic happen:

1. Edit the index.html
   
   • Open the index.html file, and copy and paste the following lines before </body> tag at the bottom:
     <script type=”text/javascript” src=”jquery-3.2.1.min.js”></script>
     <script type=”text/javascript” src=”zsolt_showstopper.js”></script>

1. Download, unzip, and copy two files into the same folder as the index.html: jquery-3.2.1.min.js and zsolt_showstopper.js
   
2. Launch the index.html to see the result.

TIP: To troubleshoot, use the Developer tools in Chrome to see if any error messages pop up (Ctr+Shift+I).