Skip to main content

Last month, Discover eLearning launched a brand new video series aimed at eLearning developers looking to better their skills in programming languages like JavaScript, CSS, and JSON, as well as other eLearning course design tips and tricks that can be achieved using the world’s leading eLearning authoring software Articulate Storyline 360.

After receiving an overwhelmingly positive response to the idea of creating the series through Twitter and LinkedIn, the first episode of the series focusing on navigation interlinking tricks between Articulate Storyline 360 and Articulate Rise was recorded and posted onto YouTube. The response to our first video was again overwhelmingly positive, and we are very excited to continue the series going forward with even more great ideas in the pipeline for future episodes.

If you have yet to watch the first episode you can check it out right here:

Also be sure to subscribe to the Discover eLearning YouTube Channel to be notified of future episodes dropping very soon!

Discover eLearning are specialists in the development of engaging interactive digital learning content using Articulate Storyline 360, having created award-winning public exhibition eLearning work utilising everything that the software has to offer, as well as our entries into weekly eLearning Heroes Challenge ran on the official Articulate website.

A copy of the Storyline Magic Series – Episode One video transcript is available to read here:

Hi this is Chris from Discover eLearning.

And welcome to the first episode in our Storyline Magic series where I’ll be showing you some of the cool things you can do in Articulate Storyline 360 with a pinch of CSS here and a dash of JavaScript there!

First up I want to show you a fairly simple technique you can use whenever you have an Articulate Storyline activity embedded inside a Rise module.

So like me you might have your Storyline activity loaded onto the page and your project navigation setting might be set to Restricted because we want to make sure the learner completes each activity we’ve created in turn.

On the page itself directly below our activity we could add in a Continue button and then it might be tempting to finish up our activity in Storyline by creating a new layer that loads in telling the user they can now go ahead and click the Continue button.

Fair enough but for me that feels like one extra click I’m getting my users to perform, plus if they glanced over the activity, they could just click that button and be on their way to the next page missing out an important part of the learning journey entirely.

So what would be better is if we can program in our Next Page trigger into the Storyline activity, such as when the user clicks this button. (And) here’s how we can do it!

Create a new trigger with the action Execute JavaScript when the user clicks on the button.

Open up the JavaScript editor and then all we need are a couple of lines of code

First we’ll create a new variable and you can give it any whacky name you like, and we’re going to collect the Rise continue button element to assign to our variable by typing parent dot document dot get elements by class name (capital letters for each word after get) and then in parenthesis we will type continue-btn which is the class name of the Continue button that we created in Rise. Finish things off with a semi-colon.

We use parent.document as our assignment due to the fact that the Storyline object is embedded as an iframe within the Rise document, so adding parent dot ensures our code is operating in the right level of the DOM or Document Object Model.

Next we need a line of code that is going to simulate our Continue Button being clicked, and that’s really easy! We just need to type our variable name, with a number 0 in square brackets, and then dot click, open close parenthesis and again finish the line with a semi-colon.

What’s going on here is that the getElementsByClassName actually returns an array of elements with this particular class name. In other words if we had multiple Continue buttons in our Rise activity then this line is grabs them all, and if we didn’t have this index number in place then this line of code would click every Continue button in Rise all at once! We don’t want that, so we include the number and the reason I’m using 0 and know I need to use 0 is because I only have one Continue button in my Rise Activity.

So if you had a number of continue buttons up to this point, you would go ahead and add them up starting from 0 and then on the page with the Storyline activity you would add the number for your button.

So with that in place we can now publish our Storyline to Review 360 and bring it into our Rise activity and publish.

Be aware that the JavaScript code won’t work until we have loaded our activity to our web server, but until we do that I’ll just do one more thing which is to hide my Continue button from the view of the learner by adding this line of CSS code to the Index.HTML file of my Rise activity.

We’re all set so we’ll load my activity now in a browser window from my web server and see the results.

I can’t get onto page two as you can see, so if I do as I’m told and finish the activity you see I’m now successfully on my way.

Thanks for watching this video. Please go ahead and like this video if you found it useful and subscribe to the Discover eLearning YouTube channel for more videos like this in the future.

See you next time!

Chris Hodgson

Chris Hodgson is an award-winning Digital learning Solutions Developer and Director of Discover eLearning Ltd. He supports organisations of all sizes to implement engaging, meaningful, and impactful eLearning solutions. Chris has 15 years’ experience working in both private and public sector learning and development.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.