Forum Discussion

LisaOgan's avatar
LisaOgan
Community Member
6 years ago

Need Javascript Help with Printing a Page (fixed height/width)

Hi there. I need to print a page in a SL 360 course (not a certificate). I found some javascript which has worked great, but there is one issue. The formatting/size of the printed page differs depen...
storyline 360
DaveCox's avatar
DaveCox
Community Member
6 years ago

Hi Lisa,

I'm sorry that it took me so long to get to this, but I have a solution for you.

I've added a webobject to a layer on slide 2 for you. When that slide is selected, the variables are loaded into the webobject on that layer, and then sent to the printer. (I set some default values in the variables so I wouldn't have to keep typing them.)

The styling in the webobject are set to style the print output to fit onto a standard page. It won't matter what size the window is in the browser.

I'm also including the webobject for you to reference. You can modify this to fit your needs, and re-import it into the project. You will need to unzip the webobject into its own folder to update it.

The layout of the page is in the index.htm file.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PrintDoc</title>
<script src="js/script.js"></script>
<link rel="stylesheet" href="./css/style.css"/> 
</head>

<body onLoad="init();">
 
 <h2>Compassion</h2>
 <ol>
 <li id="CompassionText1"></li>
 <li id="CompassionText2"></li>
 <li id="CompassionText3"></li>
 </ol>
 <h2>Trust</h2>
 <ol>
 <li id="TrustText1"></li>
 <li id="TrustText2"></li>
 <li id="TrustText3"></li>
 </ol>
 <h2>Success</h2>
 <ol>
 <li id="SuccessText1"></li>
 <li id="SuccessText2"></li>
 <li id="SuccessText3"></li>
 </ol>
 
 <hr />
 <h3>I commit to taking thise steps to help our customers move forward every day:</h3>
 <ol>
 <li id="Text1"></li>
 <li id="Text2"></li>
 <li id="Text3"></li>
 </ol>

</body>
</html>

The Storyline variables are loaded into the page for printing by the javascript located in the script.js file in the js folder.

// JavaScript Document


function init() {

 GetFromSL();
}

function GetFromSL() {
 var player = parent.GetPlayer();
 var CompassionText1 = player.GetVar("CompassionText1");
 var CompassionText2 = player.GetVar("CompassionText2");
 var CompassionText3 = player.GetVar("CompassionText3");
 var TrustText1 = player.GetVar("TrustText1");
 var TrustText2 = player.GetVar("TrustText2");
 var TrustText3 = player.GetVar("TrustText3");
 var SuccessText1 = player.GetVar("SuccessText1");
 var SuccessText2 = player.GetVar("SuccessText2");
 var SuccessText3 = player.GetVar("SuccessText3");
 document.getElementById("CompassionText1").innerHTML = CompassionText1; // get the value from Storyline variable and set it in HTML 
 document.getElementById("CompassionText2").innerHTML = CompassionText2;
 document.getElementById("CompassionText3").innerHTML = CompassionText3; 
 document.getElementById("TrustText1").innerHTML = TrustText1; 
 document.getElementById("TrustText2").innerHTML = TrustText2;
 document.getElementById("TrustText3").innerHTML = TrustText3;
 document.getElementById("SuccessText1").innerHTML = SuccessText1;
 document.getElementById("SuccessText2").innerHTML = SuccessText2;
 document.getElementById("SuccessText3").innerHTML = SuccessText3;
 window.print();
}

 The styling is handled by the css in the style.css file, located in the css folder.

@charset "utf-8";
/* CSS Document */

@media print {
 
 @page {
 size: A4;
 margin: 1in;
 }

 
 p {
 font-size: 12pt;
 }
 
 
}

I hope the accomplishes what you need in your project. You should be able to add whatever additional fields that you need by following what I've already started for you.

Here is an example of the printed output.

You will want to publish this to your LMS, or a server for this to work. You won't be able to see the results when previewing, or running it locally on your PC.

Dave