Delight Your Learners with a DynamicPrintable Workbook

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

them.

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:

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:

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:

A folder will open that looks a bit like this (if publishing for LMS there will be

some additional files here as well):

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:

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!

JAVASCRIPT TUTORIALS

STORYLINE

SHARE:

AUTHOR

Matthew Bibby

I'm Matt. I'm an eLearning Consultant. I help people like you develop memorable,

engaging and pro�table training programs. What do you need a hand with?

VIEW COMMENTS