Matthew Bibby
Matthew Bibby

Delight Your Learners with a Dynamic Printable Workbook

In this tutorial, we will look at how to take information from Storyline and get it into a journal or workbook format so that your learners can take the information with them.

Matthew BibbyMatthew Bibby

Have you ever wanted to take some data that a learner has typed into Storyline and export it to a document that they can print? Or perhaps you'd like a way to provide supplementary information to learners based on their performance in the module?

Below, I'll outline how you can develop a workbook (or journal, or report or whatever you want to call it) using JavaScript, HTML and CSS that will work beautifully alongside Storyline.

There are many ways that this could be used, for example, you could:

  • add specific information to a report depending on the choices the learner makes in the course
  • use this to provide feedback on the learner's assessments along with supplementary material to help address any skill gaps
  • allow learners to take any notes they made during the course away with them
  • assemble a report (such as a personality test) based on the learner's responses.

Anyway, there is a bit of work involved in setting this up properly, but it’s not too tricky. Promise. Most of the hard work has already been done for you.

What Info Do You Want in the Workbook?

When you build your eLearning course, you'll need to determine what information you want to pass to the workbook.

There are two parts to this. There is static information (which we will enter directly in an HTML file) and the dynamic information (which the learner will enter in Storyline when completing the course).

The dynamic responses will need to be stored in a text variable that starts with a capital Q followed by a number. For example, Q1, Q2, Q3, Q4 and so on.

The variables must be named this way so that they can be picked up when the journal is created. And don't go skipping numbers either! That'll just confuse things.

In this tutorial, we will set up a number of different responses - both dynamic and static.

Prepare your Storyline File

So to begin with, you need to set up your Storyline file with the questions that you want to ask. Here are a few sample slides from the demo we're putting together here:

Example pages

As you can see above, there are a couple of different question types in this demo. Both free text fields and Yes/No buttons.

Regardless of the question type used, these questions are all set up to store a value in a text variable that starts with the letter Q followed by a number, as mentioned above.

So, for example, when the user clicks the Yes button, it will change the value of the Q3 variable to Yes.

Capturing the Learner's Name

The learner's name will be displayed as part of the journal. We can capture this by having a text entry field set up to store the learner's name in a variable called printUserName.

Or we could grab the user's name from an LMS using this JavaScript:

var lmsAPI = parent
var name = lmsAPI.GetStudentName();
var nameArray = name.split(",");
var fullName = nameArray[1] + " " + nameArray[0];
var player = GetPlayer();
player.SetVar("printUserName",fullName);

This will take the name from the LMS, rearrange it into the correct format and pass that value into the printUserName variable.

Either way, we need a text variable in Storyline called printUserName.

Other Variables in Storyline

While setting up variables, we also need one called printTitle that will be used as the title for the workbook.

And we will need sufficient Q1, Q2, Q3 etc. variables set up to hold all of the data we want to feed into the workbook.

In this demo, we have four of these variables, so the variable list looks like:

Variables

Triggering the Workbook

We'll then need to add an Execute JavaScript trigger to the course that is used to open the workbook.

It should execute the following JavaScript when clicked:

window.open("print.html","_blank","width=800,height=600,menubar=no,scrollbars=1");

All this does is open a new browser window to show the contents of the print.html document, which we will set up shortly. You'll notice that some other attributes have been set (such as height and width), these can be changed as needed.

Setting Up The Workbook

The next step is to edit the print.html file. This is the page that will display the contents of our workbook.

Now, as we are editing code, we’ll need a text editor. If you don't have a preferred one, use Sublime Text.

As mentioned earlier, most of the hard work has already been done for you. You don't have to write this code from scratch, but just edit and build upon the source files included at the end of this post.

When we open the print.html file, we'll see something like:

<!DOCTYPE html>
<html>
<head>
	<title>Workbook</title>
	<script src="jquery/jquery-1.11.0.min.js"></script>
    <script src="process.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <style media="print">
      #printDiv {display:none;}
    </style>
</head>
<div id="container">
    <div id="printDiv"><button id="print"></button></div>
    <div id="staticContent">Name: <span id="userName">.....</span></div><br/>
    <div id="staticContent">Date: <span id="date">.....</span></div>
  <div>
    <h1 id="title">.....</h1>
  </div>
  <div id="staticContent">When asked if you get distracted easily or if you live mindfully, you answered:
  </div>
  <div id="answer1" class="answer"></div>

  <div id="staticContent">When asked if you knew that according to Seneca &#8220;Nothing is a better proof of a well ordered mind than a man&#39;s ability to stop just where he is and pass some time in his own company&#8221;  you responded with: </div>
  <div id="answer2" class="answer"></div>

  <div id="staticContent">When prompted to explain what that meant to you, you said:</div>
  <div id="answer3" class="answer"></div>
 
  <div id="staticContent">And when asked if you'd like to learn more about mindfulness, you answered:</div>
  <div id="answer4" class="answer"></div>

</div>
</body>
</html>

We'll need to change some of this, but it isn’t as scary as it seems. To begin with, we can ignore all of this stuff at the top as it’s just telling the browser where to find the scripts the workbook needs to run and is displaying some info at the top of the workbook:

<!DOCTYPE html>
<html>
<head>
 <title>Workbook</title>
 <script src="jquery/jquery-1.11.0.min.js"></script>
 <script src="process.js"></script>
 <link rel="stylesheet" href="style.css" type="text/css" />
 <style media="print">
 #printDiv {display:none;}
 </style>
</head>
<div id="container">
 <div id="printDiv"><button id="print"></button></div>
 <div id="staticContent">Name: <span id="userName">.....</span></div><br/>
 <div id="staticContent">Date: <span id="date">.....</span></div>
 <div>
 <h1 id="title">.....</h1>
 </div>

We'll want to start making changes where it says:

<div id="staticContent">When asked if you get distracted easily or if you live mindfully, you answered: 
</div>

This is how we add static content to the workbook. Just pop the desired text between these two things:

<div id="staticContent">

</div>

So it looks like this:

<div id="staticContent">This is exactly where your beautiful words should be.
</div>

Notice the next line down in the print.html file says:

<div id="answer1" class="answer"></div>

This is where the response that is stored in variable Q1 will be displayed. We don’t need to make any changes to this.

The part below has some more static content:

<div id="staticContent">When asked if you knew that according to Seneca &#8220;Nothing is a better proof of a well ordered mind than a man&#39;s ability to stop just where he is and pass some time in his own company&#8221; you responded with: 
</div>

And then there is some code that will result in variable Q2 being displayed:

<div id="answer2" class="answer"></div>

This pattern continues throughout the print.html file.

Essentially, static content should be wrapped in:

<div id="staticContent">

</div>

And responses from Storyline Q# variables will be shown wherever these exist:

<div id="answer#" class="answer"></div>

(Note that the # should be replaced with the relevant number).

Make sense? Cool. After adjusting this text as needed, we can save our print.html file and move on.

The Date

Okay, next up we need to check the date.

The demo has been set up to display the date properly as far as us Aussies are concerned.

But if the date 25/09/16 looks weird to you because you like having the month before the day (!?!?), then you'll want to open process.js in your text editor and change this:

$("#date").html(curr_date + "-" + curr_month + "-" + curr_year);

To this:

$("#date").html(curr_month + "-" + curr_date + "-" + curr_year);

Or if that doesn't work, maybe even this:

$("#date").html("Party Like" + "-" + "It's" + "-" + "1999");

Actually, ignore the last example, that's just silly.

Using an LMS

Now, if we are publishing to an LMS, we'll also need to replace:

var player = opener?opener.top.GetPlayer():{} ; 

with

var player = opener?opener.GetPlayer():{} ;

After these changes are made we can save our process.js file.

Making Things Pretty

Now, if you are comfortable with CSS, you can change the look of the workbook by editing the style.css file.

We won’t go into details here, but as a quick example, if you want to change the green text colour to something else, open style.css in your text editor and change the last line from:

.answer p {color:green;} 

to

.answer p {color:red;}

You can learn more about CSS here.

As the workbook is built from HTML, CSS and JS, there is a lot that can be done to make it look pretty. For example, you can easily use Google Fonts in the workbook, add images etc.

Let me know in the comments if you'd like to see a prettified version of this workbook.

Update: A prettier workbook has been added to the end of this tutorial.

Making Everything Work

Now that all of the files are ready, it is just a matter of copying the jQuery folder, and the print.html, process.js and style.css files to the same folder that contains your published output each time you publish the course.

So, after publishing the course, click on the Open button:

Open

A folder will open that looks a bit like this (if publishing for LMS there will be some additional files here as well):

Storyline output folder

After copying the jQuery folder, and the print.html, process.js and style.css files, it'll look like this:

When you test this, you'll want to do so on your LMS or server (wherever the course will eventually live).

If you need to test the workbook on your local machine, then you can view the HTML5 output (as otherwise, the workbook won't work due to security stuff).

So, now you know! That's how you can create a workbook that includes information that the learner has entered into a Storyline course! This is a very basic example, but hopefully, it'll give you an idea of what's possible.

I'd love to hear how you use this tutorial, so please leave a comment below or drop me a message to let me know what you've built!

Here's a demo

Click here to view a demo of the final project.

Files you might need:

Here are the source files used to create this demo. This includes the jQuery folder, the print.html, process.js and style.css files, and the Storyline file.

Here is a SCORM package you can use to see how this works in your LMS.

Here are the source files used to create the LMS version. This includes the jQuery folder, the print.html, process.js and style.css files, and the Storyline file.

Frequently Asked Questions:

Q. I really want to know how to use this for ________________. Is that possible?
A. Probably. But you'll need to be more specific, I don't know what _______ is.

Q. What's all that &#8220; and &#8221; stuff about?
A. Those are HTML character entity references. &#8220; is “ and &#8221; is ”. I know. Fascinating stuff.

Q. Why didn't you use that silly font you like so much in the text entry field?
A. Because fonts can't be embedded in the published output as noted here. That being said, if you are using SL360, there is a way that you can use fancy fonts with variable references.

Q. Does this work in HTML5? (i.e. will it work on my phone and tablet?)
A. Yes, it will.

Q. Will this work in Articulate Mobile Player?
A. No, it won't. Because JavaScript.

Q. Will this work in an LMS?
A. Yes, it will, I've tested it in SCORM Cloud and it worked perfectly. If you'd like to test it in your LMS, you can grab the SCORM package above and use that for a quick test.

Q. Do Articulate support this method?
A. No, they are not able to offer assistance with JavaScript stuff. 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. My question isn't listed here, what should I do?
A. Meditate on it. If that doesn't bring you the clarity you seek, then you can leave a comment below or contact me.

Update

Here is a new demo.

It has a prettier workbook.

It now looks like:

new workbook design

What's changed?

This code has been added to the print.html file:

<link href="http://fonts.googleapis.com/css?family=Oswald:700|Droid+Serif:400,700italic" rel="stylesheet" type="text/css" />

This makes the Oswald and Droid Serif fonts available to the workbook.

If you want to use different fonts, go to Google Fonts and pick some you like.

They have lots to choose from.

This code has also been added to the 'print.html' file:

<div>
<img src="logo.png" alt="This is a special logo!" style="width:357px;height:77px;">
</div>

This makes the logo (which is called logo.png and is 357px wide and 77px high) appear up in the workbook. The logo file is copied to the published Storyline output along with the other workbook files.

Some changes have been made to the style.css file so that the new fonts are used and a bit of padding has been added around the logo (so it isn't squished up too close to the text).

Here are the source files used to create the pretty version. This includes the jQuery folder, the print.html, process.js and style.css files, and the Storyline file.

If you found this tutorial helpful and think 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