Tutorial: Creating a Dynamic Printable Workbook

[Edit: Here is an updated tutorial]

Here is a Dynamic Workbook that I built with the help of an experienced javascript developer. It allows for a custom workbook to be assembled based the choices a user makes, which will help them take their notes and other relevant information and references away from the course.

There is a bit of work involved to get this set up properly, but it’s not too tricky. Promise.

Here is a demo of the functionality.

Here is a .zip that contains the files you’ll need.

I’ll start by outlining the basic steps for those who just want a quick overview and then I’ll provide a more detailed description.

Here are the basic steps to make it work:

  1. Figure out how many of the users' responses you want to track and create a variable to store each response. These variables should be titled Q1, Q2, Q3, Q4 and so on. 
  2. Set up the printUserTitle and printUserName variables. These control the title and name shown at the top of the workbook.
  3. Modify the print.html file to include your desired content. Note that the users' responses will be inserted wherever this exists:
    <div id="answer1" class="answer"></div>
  4. Create a ‘Workbook’ button in your course using the following javascript: window.open("print.html","_blank","width=800,height=600,menubar=no,scrollbars=1");
  5. Add the jquery folder and the print.html, process.js and style.css files to your published output.
  6. If you are using a LMS, see here
  7. Upload and test.

-----

Here is a more detailed description.

It is best if you build the bulk of your course before you add this functionality. Although when building the course you’ll want to keep the following in mind:

  • Any responses that you want sent to the workbook should 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 found by the workbook. (If you don’t know what variables are, I suggest you read this article before continuing.)

Once your course is built, you’ll want to add the following to your Storyline file:

  • Create a text variable called printUserTitle. Its value will determine the title that is displayed in the workbook. 
  • Create a text variable called printUserName. Its value will determine the name that is displayed in the workbook. 
  • Create a text entry field at the start of your course where the user can enter their name and set it to adjust the value of the printUserName variable.
  • Create a button in your course that will be 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");

Then you can publish your course as per normal (although you don’t want to zip the files just yet).

-----

The next step is to edit the print.html file.

You’ll need a text editor to do this, such as Notepad.

When you open the file, you’ll be greeted with the following beautiful sight:

<!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">This is static content that will be the same for everyone. You can provide as much of this as you need in the workbook. Did you know that a group of toads is called a knot? Apparently you love the below more than a knot of toads.
</div>
<div id="answer1" class="answer"></div>

<div id="staticContent">If you live in Virginia and have a bathtub outside your house, you are currently breaking the law. Now, your thoughts on pickles.
</div>
<div id="answer2" class="answer"></div>

<div id="staticContent">At this exact moment in time, there are at least 1,800 thunderstorms in progress over the earth's atmosphere. Anyway, back to pickles.
</div>
<div id="answer3" class="answer"></div>

<div id="staticContent"> Did you know that most lipstick contains fish scales? Well, herring scales to be precise. You were asked not to type anything for one of the questions so you can see what happens.</div>
<div id="answer4" class="answer"></div>

<div id="staticContent">Did you know that dolphins sleep with one eye open and that jellyfish are 95% water? Or was that the other way around? Wait ... do jellyfish even have eyes?</div>
<div id="answer5" class="answer"></div>

<div id="staticContent">Please remember that while it is possible to lead a cow upstairs, it will not be possible to lead a cow downstairs in the future. This could create a problem. Are pickles sounding interesting yet?</div>
<div id="answer6" class="answer"></div>

<div id="staticContent">100% of lottery winners gain weight. So there's that. In other news. </div>
<div id="answer7" class="answer"></div>

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

You’ll need to change some of this, but it isn’t as scary as it seems. You can start by ignoring all of this stuff at the top (it’s just telling the browser what’s up and displaying the 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>

You’ll want to start making changes where it says:

<div id="staticContent">This is static content [etc.]

If you want text displayed at the top of the workbook, this is where you enter it. Simply put the text you want shown 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>

Then you’ll 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. You don’t need to make any changes to this.

The part below has some more static content:

<div id="staticContent"> If you live in Virginia and have a bathtub outside your house, you are currently breaking the law. Now, your thoughts on pickles. 
</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 you’ll need to swap that # with a number in the code above).

Make sense? Cool. Save your print.html file and let’s move on.

-----

Okay, next up we need to check the date. I’ve set it to display properly, but I’ve heard that some of you do weird things like have the month before the day… So if 30/10/14 looks weird to you 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("Dance Like" + "-" + "It's" + "-" + "1999");

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

If you are publishing to a LMS, you'll also need to replace:

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

with

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

Save your process.js file. 

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

I won’t go into detail here, but if all you want to do is 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;}

Right, so now it’s 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.

This needs to run from the web, so if you try and test it locally, it won't work. Upload it to your LMS or server or secret lair or whatever and you should be good to go.

As far as known issues go:

  • This won’t work Articulate Mobile Player (as it's allergic to javascript) 

I hope that this is helpful. 

Edit 11/10/18: If you'd prefer a PDF option, see here.

81 Replies
Ben Brink

I used this to create a certificate after completion of the training. It's not working as I would like to yet, but I think that's because I made some errors. For example, the text entry variable is not in the certificate yet, the background won't be printed and I don't want the URL in the certificate. So I have some work to do but I a confident that t will work.

Matthew Bibby

Glad this is helpful for you Ben.

The URL being included in the certificate isn't something that we can control via this solution. It is automatically added by the browser when printing. 

If you want an approach that doesn't include the URL, check the PDF download option linked above. 

And if you run into any issues you can't resolve, feel free to reach out.