Here’s a quick mockup that I created using Storyline 360 and JavaScript. My goal was to collect learners’ input from three slides and then allow them to print their responses.
Mechanics
Each slide in this demo sample includes a photo from nature and a text variable field for the learner to comment on the photograph.
When the learner reaches the final slide, I provide them with the option to print their responses.
The Javascript behind the “Print Your Responses” button is shown below:
var myWindow = window.open("","Print","width=810,height=610,scrollbars=1,resizable=1");
var player=GetPlayer();
var pic1comments=player.GetVar("pic1comments");
var pic2comments=player.GetVar("pic2comments");
var pic3comments=player.GetVar("pic3comments");
var contents = "<html><head></head><body style='width:650px;padding:20px;'>";
contents+="<div style='height:20px;padding:10px;margin-bottom:20px;text-align:center;'><button onclick='javascript:window.print();'>Print My Notes</button></div>";
contents+="<div style='font-size:18px;font-weight:bold;margin-top:10px;'>Here are your comments.</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>Pic 1 Comments</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+pic1comments+"</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>Pic 2 Comments</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+pic2comments+"</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>Pic 3 Comments</div>";
contents+="<div style='font-size:17px;margin-top:5px;'>"+pic3comments+"</div>";
contents+= "</body></html>";
myWindow.document.write(contents);
Here you can see the results. From here, the learner can print to their local printer or print to a PDF file to save. Credits to Matthew Bibby for providing the initial JavaScript code!
Update: Jason (see comments section) asked how to add an image to this output. Here is some updated code that appears to work.
var myWindow = window.open("", "Print", "width=810,height=610,scrollbars=1,resizable=1");
var player = GetPlayer();
var pic1comments = player.GetVar("pic1comments");
var pic2comments = player.GetVar("pic2comments");
var pic3comments = player.GetVar("pic3comments");
var contents = "<html><head></head><body style='width:650px;padding:20px;'>";
contents += "<div style='height:20px;padding:10px;margin-bottom:20px;text-align:center;'><button onclick='javascript:window.print();'>Print My Notes</button></div>";
contents += "<div style='font-size:18px;font-weight:bold;margin-top:10px;'>Here are your comments.</div>";
contents += "<div style='font-size:17px;margin-top:5px;'>Pic 1 Comments</div>";
contents += "<div style='font-size:17px;margin-top:5px;'>" + pic1comments + "</div>";
contents += "<div style='font-size:17px;margin-top:5px;'>Pic 2 Comments</div>";
contents += "<div style='font-size:17px;margin-top:5px;'>" + pic2comments + "</div>";
contents += "<div style='font-size:17px;margin-top:5px;'>Pic 3 Comments</div>";
contents += "<div style='font-size:17px;margin-top:5px;'>" + pic3comments + "</div>";
contents += "</body></html>";
// Constructing the print document with the logo at the top
var printDocument = "<html><head></head><body style='width:650px;padding:20px;'>";
printDocument += "<img src='logo.jpg' style='max-width:100%;max-height:100%;margin-bottom:20px;' />"; // Logo at the top
printDocument += contents; // Adding the contents section
printDocument += "</body></html>";
// Opening a new window with the print document
var printWindow = window.open("", "Print", "width=810,height=610,scrollbars=1,resizable=1");
printWindow.document.write(printDocument);
printWindow.document.close();
Jason Kramer
Hello!
Thank you for sharing! I was curious if you could add an image, like a logo, into the contents of the slide? Thank you!
Richard
Jason,
You might try the code I updated in the post above. I added a logo.jpg file to the Storyline output directory (same location as the story.html file) and updated the Javascript code as indicated. Remember, you’ll have to replace the logo.jpg file post publish each time as Storyline will overwrite it. As a reminder, I’m not a Javascript expert and I sure don’t play one on TV.