Javascript to print out content of Scrolling Panel in Storyline?

Jun 03, 2013

Julian Fletcher
By Julian Fletcher

Hi, does anybody know the javascript commands (activated by a trigger) needed to print out the content a scrolling panel (e.g. Scroll 1 ) in the attached screenshot (or even if this is feasible to do in the first place using Articulate Storyline)?

Thanks in advance for any help on this

26 Replies
Ashley Terwilliger-Pollard
over 10 years ago09/09/13 at 10:25 am (UTC)

Hi Julian, and welcome to Heroes! 

Although we don't support the coding of Javascript, I wanted to point you to this article of best practices and some examples to get you going. There are also a number of community members who are well versed in Javascript and they may chime in here and be able to help you out. 

Julie Holland
over 10 years ago09/12/13 at 6:56 am (UTC)

Ashley and Julian,

Thanks for the replies!  I decided to go a different route.  I’m working with our IT department to create a hidden folder on our network that only has “Read” access.  I’m going to create a slide at the end of each path in my branching scenario that has a triggered button or hotspot (see image below) which will launch the user out to a file.  I’m creating my feedback documents in Word and then going to .pdf them so the user can Save or Print them.

I wish there was an easier way to Print (and email) content that is located on slides in Storyline.  I hope they add this type of functionality to future Storyline updates.

Thank you,

Julie

Ashley Terwilliger-Pollard
over 8 years ago09/16/15 at 1:28 pm (UTC)

Hi Sam,

This thread is a bit older, so I'm not certain if folks are still subscribed but you may want to begin by reviewing the Javascript trigger elements here and then sharing a bit more of your file so that folks in the community could take a look as it's not something we can offer support for. 

Ashley Terwilliger-Pollard
over 8 years ago10/08/15 at 2:35 pm (UTC)

Hi Helena,

Are you testing the published output in the intended environment? I know that's a common hiccup, as the Javascript won't work when you're viewing the content locally. If you're not ready to place within your web server or LMS you could look at using one of the options here or SCORM Cloud. 

Sam Ozay
8 years ago04/07/16 at 2:01 am (UTC)

Hi all, my colleague helped me with an amazing javascript that allows you to print scrolling panels. The scenario in my slides is as follows: Students are presented with a question and a text field to enter their response. The next slide shows them a model answer and their response from the previous slide, WHICH THEY CAN PRINT. And it doesn't matter how long the texts are- it will print all. The javascript is as follows: (please note the 2nd and 3rd line- i.e. text1 and variable1- these must be changed accordingly. Good luck. 

var player = GetPlayer();
var modelAnswer = player.GetVar("text1");
var yourAnswer = player.GetVar("variable1");

var mywindow = window.open('', 'Printing', 'height=400,width=600');
mywindow.document.write('<html><head><title>Printing</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<h2>Here is the Model Answer</h2>');
mywindow.document.write(modelAnswer);
mywindow.document.write('<h2>Here is Your Answer</h2>');
mywindow.document.write(yourAnswer);
mywindow.document.write('</body></html>');

mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10

mywindow.print();
mywindow.close();

Here's an working example: http://samaree.com.au/moodle/mod/resource/view.php?id=58

Please login as guest to access the above resource.

Melanie Connolly
almost 4 years ago05/22/20 at 8:42 pm (UTC)

Was anyone able to find a (fairly) simple way to do this? I have a bunch of charts with user input variables combined into a scrolling panel on a final slide, but using print.window only prints the portion of the scrolling panel seen. I would like to have a print option for an instructor to look at and grade a student's entire process over the several previous slides, but I can't get everything within the scroll panel to print.

sam oz
almost 4 years ago05/23/20 at 2:11 am (UTC)

If you just read the threads, I posted a solution ages ago. But here it is again especially for you:

The javascript is as follows: (please note the 2nd and 3rd line- i.e. text1 and variable1- these must be changed accordingly. Good luck. 

var player = GetPlayer();
var modelAnswer = player.GetVar("text1");
var yourAnswer = player.GetVar("variable1");

var mywindow = window.open('', 'Printing', 'height=400,width=600');
mywindow.document.write('<html><head><title>Printing</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<h2>Here is the Model Answer</h2>');
mywindow.document.write(modelAnswer);
mywindow.document.write('<h2>Here is Your Answer</h2>');
mywindow.document.write(yourAnswer);
mywindow.document.write('</body></html>');

mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10

mywindow.print();
mywindow.close();

Jennifer Munro
over 3 years ago12/17/20 at 8:15 am (UTC)

Hi Sam

Thanks for sharing your javascript in this forum.  I have been successful in replicating your file with the script.

Now I am trying to have 3 variables (text input fields) appear in a table (1 row, 3 columns).  I have the html to create the table but don't know how/where to include the variables.  I have included the variable names in between <td> and </td> tags as placeholders.  

Here is the what I have so far:

var player = GetPlayer();
var well = player.GetVar("W1");
var better = player.GetVar("B1");
var how = player.GetVar("H1");

var mywindow = window.open('', 'Printing', 'height=400,width=600');
mywindow.document.write('<html><head><title>Activity 1</title>');
mywindow.document.write('</head><body >');
mywindow.document.write('<h1>Activity 1</h1>');
mywindow.document.write('<h2>Purpose</h2>');
mywindow.document.write('<p>The purpose of this exercise is to</p>');

mywindow.document.write('<table style="width:100%">');

mywindow.document.write('<tr>');
mywindow.document.write('<th>What I did well</th>');
mywindow.document.write('<th>What I can improve on</th> ');
mywindow.document.write('<th>How I am going to improve</th>');
mywindow.document.write('</tr>')

mywindow.document.write('<tr>');
mywindow.document.write('<td>var well</td>'); //var well is placeholder
mywindow.document.write('<td>var better</td>'); //var better is placeholder
mywindow.document.write('<td>var how</td>'); //var how is placeholder
mywindow.document.write('</tr>');

mywindow.document.write('</table>');


mywindow.document.write('</body></html>');

mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();

I will attach the SL file.


 

Deb Lewis
over 3 years ago01/07/21 at 9:06 pm (UTC)

I am fairly new to ID work and admittedly know almost nothing about JavaScript.  I am trying to allow users to print a scrolling text box containing notes from throughout the course. I have tried the code Sam provided above and did not have any luck with that - could totally be my error.  I also was not able to access his link, which maybe just isn't active anymore since that was from a while ago.  Are there any other suggestions or other places to look for help?  Thanks so much. 

Sign In to Reply