Forum Discussion
Javascript to print out content of Scrolling Panel in Storyline?
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
Here is the file.
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 >= 10mywindow.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.
I don't have a login for EduDesign but I did find he guest login.
Thank you very much Sam. Your explanation and the written example were very helpful as an inspiration.
However there is small problem with the printing of the model answers as they are not the input variables (I usually use a text box). How did you define the model answers in your Storyline?
Thanks Sam for sharing here - and just an FYI that the link you shared seems to be gated with a login. If you're able to share the login here, that may help others who run across this thread and want to take a look at what you set up.
hey Ashley, users can login as guest to access the resource- I've added that info to my post.
Thanks Sam for updating that and including a guest log in.
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.
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 >= 10mywindow.print();
mywindow.close();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.
I saw that earlier and it was not what I was looking for, but thank you for trying. I was able to come up with a different solution for our project.
Hi Melanie,
Would you be willing to share your solution? I'd like users to be able to print the contents of a scrolling panel in Storyline 360.
Thanks!
Anna
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.
Thank you Sam, a modified version of that script worked great for me. Now to figure out how to apply styles to it :)
I just used a modified version of Sam's JavaScript to print a scrolling text screen and it worked like a charm. Here is what I did in case it helps anyone else.
Insert a button on the page you want to print and add a trigger to the button “Execute JavaScript”.
Copy and paste the JavaScript below into the trigger.
Adjust the text in the parenthesis on line 2 to patch the text variable you wish to print. (No percent signs are needed around the variable)
Line 6 -7 “Here are Your Notes” will name the printing document.
Copy and paste the following:
var player = GetPlayer();
var yourNotes = player.GetVar("TextEntry8");
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 are Your Notes</h2>');
mywindow.document.write(yourNotes);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10
mywindow.print();
mywindow.close();what if you have multiple textbox variable references? do you just copy and paste them after line two or add commas? Thanks
