Create an HTML page with JavaScript using Storyline variables

At the end of a Storyline module I’m making, I wanted to create an easily printable page that contained all the freetext field entries the learner had made during the course.

I tried doing the basic old ‘window.print()’ – but since Storyline on desktop runs through flash, the print function was being a bit weird. Plus that requires a random storyline screen that looks nice for printing, and it gets centered and best-case it’s just an image (unselectable) and so on. So not ideal.

Instead I found this. You can, in your JS code, open a popup with dynamically written HTML which includes your variables and then print it. So it’s a basic HTML page, but there’s no HTML page that is separate or needs hosting or anything. Perfect.

So you can just ‘run JavaScript’ in Storyline, of something like below.

window.open('data:text/html,<title>Hello Data URL</title><p>File-less HTML page!</p><p><a onClick="window.print()">Print Page</a>', 'Hello World', 'width=400,height=200');

Source: I stand on the shoulder of the giant Remy Sharp for this one.

Note: in my requirement, I just wanted to print out the text entry variables in my storyline document if the learner wrote anything. Here’s my code (with some comments):

Additional note (April 2016): changed the function to not do it via the URI so it’ll work in IE11 properly.

//get the date to slap on the printout
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() +1;
var yyyy = today.getFullYear();
if(dd<10) {
dd = "0"+dd;
}
if(mm<10) {
mm="0"+mm;
}

//get the SL variables
var player = GetPlayer();
var jsExternalCustomers = player.GetVar("scrnTxtEntry_externalCustomers");
var jsInternalCustomers = player.GetVar("scrnTxtEntry_internalCustomers");
var jsSectorCustomers = player.GetVar("scrnTxtEntry_sectorCustomers");
var jsLineOfSight = player.GetVar("scrnTxtEntry_lineOfSight");

//write the page that will be printed, as a string.
var pageContent = "";
pageContent += "<div style='font-family:sans-serif'><p><strong><center>My thoughts from the Welcome to the PLACE module on " + dd+"/"+mm+"/"+yyyy+"</center></strong></p>";

pageContent+="<br>";
if(jsLineOfSight.length > 1) {
pageContent+="<b>I beleive I contribute to the PLACE's vision by:</b><br> " + jsLineOfSight+"<br><br>";
}
if (jsExternalCustomers.length > 1) {
pageContent+="<b>I think my external customers will include:</b><br> " + jsExternalCustomers+"<br><br>";
}
if(jsInternalCustomers.length > 1) {
pageContent+="<b>I think my internal customers will include:</b><br> " + jsInternalCustomers+"<br><br>";
}
if(jsSectorCustomers.length > 1) {
pageContent+="<b>My customers in the SOMETHING sector may include:</b><br> " + jsSectorCustomers+"<br><br>";
}
//next-step actions (suggestion to save or print) and the print button.
pageContent+= "Save or print this page to discuss with your manager.<br><a href='javascript:window.print();return false;'>Click here to print the document</a> or select 'right-click > print' if you have problems."

// closing the font style/body
pageContent+="</div>";

// open the window, and populate it.

myPrintPop=window.open('', 'myPopup', 'width=500, height=600');

myPrintPop.document.write(pageContent);

myPrintPop.document.close();

myPrintPop.title="Welcome to the Business thoughts";