Skip to main content

A member of the Articulate Storyline eLearning Development Community recently got in touch with me with a specific technical problem. They needed a way for variable data entered by the user in an Articulate Storyline form to be transferred into a separate stylised HTML form, displayed in a new browser tab, ready for printing.

This process can be managed fairly simply with the use of JavaScript and localStorage. In the end, I never heard back from the person who got in touch after I’d shared our solution. So, in case this may be useful to any other Storyline users out there in the future I will detail the full process for you in this blog post!

Articulate Storyline and localStorage

Articulate Storyline already makes use of localStorage within the user’s browser. This is how for example a Storyline module is able to store user progress information in any project and ask the question whether they wish to resume or start from beginning when they return to the activity at a later date.

The localStorage keys and values that Storyline generates and saves to the browser memory is a scrambled series of encrypted numbers and letters, making it difficult for us to manipulate the values that Storyline automatically generates for the session. Thankfully though, we can go ahead and create our own keys and values with a bit of JavaScript code triggered within the Storyline project.

For my demo, I created a simple text field and a button in SL360. Behind the button we will add an Execute JavaScript trigger to save the value of the text field into localStorage:

if ( window.sessionStorage ) {
var player = GetPlayer();
localStorage.setItem("Chris", player.GetVar("TextEntry"));
} else {
alert('Sorry but your browser does not support this function.');
}

The use of an IF statement is helpful just in case the user is running a really old browser or has security measures in place (set by their organisation) that prevents the localStorage entry, so they are told that it isn’t going to work for them.

With the Key value ‘Chris‘ now set to contain the value of the Text Entry field written by the user in Storyline, we can now focus our attention on the HTML page that will display this data in a new browser tab.

Building an HTML form to handle the variable data

The HTML page containing our form can be styled and presented in any way you wish. The most important thing is that we give each input tag element it’s own unique ID, which is how we will be able to load a value into it automatically when the page has loaded.

At it’s most basic, your form should look something like this:

<form id="myForm">
<label for="vardata">Storyline Variable Shown Here:</label>
<input id="vardata" type="text" name="vardata" size="100">
</form>

Now there are three blocks of code that we need to include in our HTML page in order to both grab the key value from localStorage and place it into our form input element when the page has loaded.

First, we must include a reference to the public jQuery library in order to give us the ability to do what we need to do using JavaScript!:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Second, we will write a function which grabs the key value in local storage (with the key name of ‘Chris’) and enter this as the value of our form input element:

function dataLoad() {
var input = document.getElementById("vardata");
input.value = localStorage.getItem("Chris");
}

And finally, we will include a ‘body onLoad’ tag to trigger our function only once the page has loaded, meaning that the form is ready to have data placed into it:

<body onload="dataLoad();">

Opening the HTML page from within the Storyline project

Before we go ahead and upload both the published Storyline project and our HTML form page to our web server, it makes sense to include one additional trigger in our SL360 project to open the HTML form page as soon as the localStorage item has been generated. All we have to do is include an Open URL/File trigger onto our button, at the bottom of the stack, and set the URL to wherever the HTML form page will be held.

And we’re done!

You can take a look at the results in action here! – LINK.

This solution works just as well on modern smartphone devices as well as all of the usual suspect web browsers.

Chris Hodgson

Chris Hodgson

Chris Hodgson is an award-winning Digital learning Solutions Developer and Director of Discover eLearning Ltd. He supports SMEs and large firms through the process of integrating eLearning into their organisation. Chris has over 10 years experience working in Higher Education, Independent Training Provider Sector and Charity Sector learning and development.

Leave a Reply

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