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
Coniqua  Abdul-Malik

I was able to use this "print" button successfully in a SCORM environment, though I'm still playing with the style sheet the functionality is there. Thanks Matthew!

My question now is how might I go about changing the "print" button on the "workbook window" to an email button? Think the stylesheet and html should pretty much be able to stay the same right? Other than changing the label. My primary concern is editing the process.js file without making it a garbled mess.

The course I am working on aims to give the learner the option to either print or email themselves their notes.

Coniqua  Abdul-Malik

Question for those people who used this for multiple text entries. I believe the javascript code that you put into Storyline indicates that the window won't have scrollbars. Did that effect your view of multipage content? I'm also curious if anyone implemented features like pagination or headers/footers on subsequent pages. Are there commands that you can use to get formatting like that on a document that has more than one page?

Mandy Galley

Thanks again! This is great.

Is there any way to change the look of the print button that appears in the top-right? I'd to make it a little bigger and change the font. It's been a few years since I did any coding! 

Also, my Swedish characters are not showing up properly (ÅÄÖ) I see that the charset is utf-8 in the jquery file, so it should work, right? Or is there something else I should tweak?

Many thanks

Matthew Bibby
Mandy Galley

Is there any way to change the look of the print button that appears in the top-right? I'd to make it a little bigger and change the font. It's been a few years since I did any coding! 

 

Sure, you just need to change the CSS for that button. This should get you started.

Regarding the Swedish characters, it looks like I've failed to set the charset in the print.html file. Try adding this to the <head> section:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

Let me know if that does the trick.

Coniqua  Abdul-Malik

Adam, did you ever find another work around for this? For some reason I'm experiencing this issue with any variable over 10. I have a total of 7 workbooks and about 35 Q variables. I tried using your method of adding div's. It only worked on 1 of the 6 notebooks. I can't figure out why only the html is showing up in the rest of the notebooks.

Kevin Thorn

Missed this 3 years ago when initially published. Could have used this a few times since!

Along with another more experienced JS developer, we just built a similar experience where users take notes along the way in the course with an option to print all their notes into a single document at the end of the course.

Saved for next project. Thanks Matt!

Juliet Keaton

Hi Matthew, I successfully used your files to create a printout, thank you. I have been trying to code to have some of the dynamic text print into a table but haven't succeeded. Do you have any advice for pulling the dynamic data into a table in the print file? Any help would be much appreciated. I have added my latest file attempting to generate the table and the original that pulls the text files in without an issue.

Sepideh Gorjizadeh

Hi Matthew. Thanks a lot for sharing this great feature. I have created a similar course where there are only 4 text entries (there are no yes/no questions). I have uploaded to LMS but when I click the button "Print Your Worksheet", I get the error message: 

404 - File or directory not found.

The resource you are looking for might have been removed, had its name changed, or is temporarily unavailable.

Are you able to direct me to where I have made a mistake in this? 

Thanks - Sepideh

Juliet Keaton

Playing with this code currently:

function populateTable(table, rows, cells, content) {
var is_func = (typeof content === 'function');
if (!table) table = document.createElement('table');
for (var i = 0; i < rows; ++i) {
var row = document.createElement('tr');
for (var j = 0; j < cells; ++j) {
row.appendChild(document.createElement('td'));
var text = !is_func ? (content + '') : content(table, i, j);
row.cells[j].appendChild(document.createTextNode(text));
}
table.appendChild(row);
}
return table;
}