Matthew Bibby
Matthew Bibby

Updating Hyperlinks Without Republishing a Storyline Course

In this tutorial we will look at how to create hyperlinks that can be updated at a later stage without editing the published course.

Matthew BibbyMatthew Bibby

Have you ever had to edit, republish and re-upload a Storyline course because some of the hyperlinks had broken?

Maybe you develop eLearning courses for organisations who like to move resources around, you know, to be better organised or whatever, without realising the impact this has on those who are linking to those resources?

While you don't want to frustrate your learners by linking to resources that are unavailable, it can be incredibly time consuming to check and update thousands of hyperlinks, especially if this process involves manually editing, republishing and re-uploading all of your eLearning courses.

In this tutorial, we will look at how to create hyperlinks that can be updated at a later stage without editing the published course.

And if you are interested in taking this a step further, we'll dig deeper in a follow up series, where you'll learn a delightful little trick that will speed up the process of checking all of your courses for broken hyperlinks.

While it will take a little longer to set up the hyperlinks initially, the time savings down the track make this a no brainer. Especially for those who have a large amount of courses to maintain.

Okay, Let's Dig In.

The first thing that we need to do is prepare our hyperlinks.

For this example, I'm going to link to a bunch of stuff that I find fascinating. I encourage you to read these articles, just don't forget to come back here when you are done!

Here's my hyperlinks:

The Egg by Andy Weir (who many years after writing this, wrote a book, that was turned into a movie that you probably watched. You know, the one where the guy said "I don't want to come off as arrogant here, but I'm the greatest botanist on this planet.")

The Elegant Secret to Self-Discipline by David Cain. Grab yourself a banana before you read this one, but maybe hold off on peeling it for a moment.

Elon Musk: The World's Raddest Man by Tim Urban. I'm cheating here. This is the first part of a very long series. Seriously, it's longer than half of the books I read. You'll love it.

This brilliant quote from Marcus Aurelius is one that I keep coming back to...

Anyway, enough random linking to fascinating stuff.

Let's look at how we can set these hyperlinks up in Storyline so that we can update them later if Andy, David, Tim or the last of the 'Five Good Emperors' decide to change their location on the internet.

The Storyline Setup

Add your text to Storyline. If you prefer to use buttons or other objects, that's okay as well. But for this example, let's lean on Storyline's Hyperlink feature so that we can attach some triggers to this text.

Hyperlinks in Storyline

But rather than add the URL directly to the hyperlink:

Let's not add the URL here

We want to take a different approach so that we can easily update these hyperlinks later. So let's change the Action to Execute JavaScript instead:

Now we are going to tell Storyline that when the learner clicks
this link, that we want to call a JavaScript function:

linkOne()

Yep. That's all the code you need in the first trigger.

Now, as we set up additional hyperlinks, we'll just change this accordingly. So for the second link, we would use this JavaScript:

linkTwo()

For the third link:

linkThree()

And so on.

If you want to use different names, that's okay, I just like this approach as it keeps it pretty simple. If you use names like:

thatGreatResourceYourManagerWantedIncludedFinalDraftLatestCurrentVersion_Copy()

Then you're just going to confuse yourself and wear out your keyboard.

Get Yourself a Text Editor

Now, we need to create a separate JavaScript file where we are going to define how these functions behave. To do this, you'll want to use a text editor.

Sure, Notepad would work, but I find it helps to use the right tool for the job. If you don't already have a preferred text editor and just want to grab something that is free, download a copy of Sublime Text.

Defining Our Functions

The next step is to open a new file in Sublime Text and save it as hyperlinks.js:

Save file as hyperlinks.js

Now we are going to set up our functions and use the window.open method to create our hyperlinks. Here's the code we'll use to set up the first link:

function linkOne() {
window.open("http://www.galactanet.com/oneoff/theegg_mod.html");
}

So what we are doing here is defining a function called linkOne. This function won't do anything by itself, it will just hangout here, waiting for the code that we added to our Execute JavaScript triggers earlier, to ring it up and go "Hey linkOne, it's time to do your thing!" then this function will open the URL in a new window.

As you can see, a proper text editor makes it a lot easier to see what is going on with your code:

Example code in Sublime Text

Especially compared to the same code in a plain text editor like Notepad:

Example code in Notepad

The code highlighting makes it a lot easier to both update and debug your code. Anyway, enough about tools... let's get back to the code.

We can define our other functions in the same file.

Here's the full code I'd need for this example:

function linkOne() {
window.open("http://www.galactanet.com/oneoff/theegg_mod.html");
}
function linkTwo() {
window.open("http://www.raptitude.com/2013/10/the-elegant-secret-to-self-discipline/");
}
function linkThree() {
window.open("http://waitbutwhy.com/2015/05/elon-musk-the-worlds-raddest-man.html");
}
function linkFour() {
window.open("http://matthewbibby.s3.amazonaws.com/posts/2016/08/02/hyperlinks/quote.png");
}

Then for each additional hyperlink you add to your course, you just follow the same pattern. All you need to do is change the name of the function and update the URL:

function linkFive() {
window.open("http://www.something.com");
}

Putting It All Together

Now that we've set up our Execute JavaScript triggers in Storyline and defined our functions, we are ready to put all the bits and pieces together.

Publish your course and then click on the Open button:

Publish Successful dialog

Then you can navigate to the story.html file and open it with your text editor:

Open story.html with Sublime Text

You'll see lots of pretty colours:

story.html open in Sublime Text

We want to scroll down to line 126, which is just below where Storyline has defined a couple of client-side scripts. We are going to add another script here in a moment.

Showing where the scripts are defined

What's all this defining scripts stuff about?

Well, it's how the Storyline output knows that it needs to load these files so that code inside them can be used.

For example, if you go back to the published output, navigate to the /story_content/ folder and open the user.js file in your text editor, you'll see the code that we added to our Execute JavaScript triggers earlier:

Showing partial contents of user.js

Anyway, I have digressed a little... again.

Defining an External Script

Now we need to define our script, but instead of putting our hyperlinks.js file in the story_content folder where it may not be easily accessible, let's host it elsewhere.

For this example, I'll upload my hyperlinks.js file to Amazon S3. If you aren't already using Amazon S3, see the Frequently Asked Questions at the end of this post for other options.

Once your file has been uploaded somewhere, you can grab the URL. Mine is:

https://matthewbibby.s3.amazonaws.com/posts/2016/08/02/hyperlinks/hyperlinks.js

Make sure that your link is secure. If it starts with http:// rather than https://, then you are going to run into issues later on, especially if you use an LMS.

Now that we have this script hosted elsewhere, we need to ask the Storyline output if it could please load this script when the course runs so we can use the code.

Let's jump back to our story.html file and define our script:

Defining our external script

As you can see above, all we've done is add this code in at line 126:


You'll need to modify this code to include your URL, unless of course you really want to link to the same stuff as I have!

Once this is done, you can save your story.html file.

What About the HTML5 Output?

Then, assuming you are publishing to HTML5 as well, you'll also need to define your script in the story_html5.html file.

So, open story_html5.html and jump to line 80. You'll be able to post the same code here:

It'll only take you a moment.

You simply update your hyperlinks.js file with the new URLs and upload it to the same location as the original version of the file.

How awesome is that? Gone are the days where you need to find your source file, edit the course, republish you course, test the course, go back and fix the course, upload it to the LMS and so on.

Would You Like to Take This a Step Further?

Imagine if you could setup a tool that allowed you to quickly check every link in every course to make sure they aren't broken?

Here is a limited demonstration of this tool.

As you can see, it grabs the hyperlinks from your hyperlinks.js file and checks to see if these links can be opened or not, highlighting which links may need updating.

To receive a copy of this free tool, just sign up below:

Frequently Asked Questions:

Q. Is there a demo I can test to see if this works?
A. Of course.

Q. Will this work in an LMS?
A. Yes, it works in SCORM Cloud. If you'd like to test it in your LMS, you can use this SCORM package.

Q. When I go to edit story.html or story_html5.html, I see different code to what you've shown here. Why's that?
A. The contents of the story.html and story_html5.html files may change from time to time due to Storyline updates. If you can't find the code, just hit Ctrl+F in Sublime Text and search for <script src=.

Q. Do Articulate support this method?
A. No, they do not support modification of the published output, so if you run into issues when using this approach, their support team won't be able to assist. However, I may be able to help, so reach out if you're stuck.

Q. I don't have any of this Amazon S3 stuff setup. How do I do that?
A. This article on The Rapid E-Learning Blog will show you how it's done.

Q. Do I have to use Amazon S3 to host the hyperlinks.js file?
A. No, if you have your own server you could use that instead.

Q. Would this work with Dropbox?
A. Yes, with a couple of minor modifications to the process. If you'd like step by step details on how to modify this to work with Dropbox, sign up using the form at the bottom of this tutorial.

Q. So your saying that I can edit a file in Dropbox and it will automatically update the hyperlinks in my eLearning courses?
A. Yep.

Q. How do I change the way these hyperlinks behave?
A. There are lots of options. I'll add some details on how to do this into the follow up series.

Q. Could I just include the hyperlinks.js file in the story_contents folder?
A. You could, but if you are uploading the course to an LMS you may not be able to easily access that file to change the hyperlinks at a later stage. But if you'd prefer to do things that way, then you could greatly simplify this process by adding your window.open("http://www.something.com"); code directly to the Execute Javascript trigger in Storyline. Then when you need to update the hyperlinks, you'd just navigate to ~/story_contents/user.js.

Q. What if I want to change the anchor text in the module?
A. Then you'll need to edit and republish your course. This approach will only help you update the URLs. Sorry, it's not magic.

Q. Why does my link have to start with https://?
A. It's a security thing. If the link to your hyperlinks.js file starts with http://, then you are going to have a bad time.

Q. Does this work in HTML5? (i.e. will it work on my phone and tablet?)
A. Yes, as long as you've followed this tutorial correctly.

Q. Will this work in Articulate Mobile Player?
A. No, no it won't. That's because the Articulate Mobile Player is allergic to JavaScript.

Q. My question isn't listed here, what should I do?
A. Grab yourself a glass a water. You probably need one after reading all this! Then once you are sufficiently hydrated, you can leave a comment below or contact me with your question.

Files you might need:

Here is the .story file that was used in this example.

Here is a copy of the hyperlinks.js file that was used in this example.

Here is a SCORM package you can use to test if this works in your LMS.

If you found this tutorial helpful and think that others in your network will also, please share using the share buttons below. Thanks!

Matthew Bibby
Author

Matthew Bibby

I'm Matt. I'm an eLearning Consultant. I help people like you develop memorable, engaging and profitable training programs. What do you need a hand with?

Comments