Print ANYTHING in StoryLine

Jul 10, 2017

OWEN HOLT
By OWEN HOLT

By adding a new tab in the player properties panel and assigning it to execute the "window.print();" JavaScript, you can allow your participants to print any/every slide in your StoryLine projects including "Notes" or "Certificate" slides! No need to create a complex JavaScript course certificate solution, simply build a beautiful slide and let your users print it directly from the StoryLine player!

For SL 3 and 360 users, you can also move, reformat, hide, and reveal the button so you can take control over what users can print.

I've included the screen shots I used in the video in the attached Word document along with the JavaScript code snippets and an SL3 .story file.

206 Replies
Math Notermans
over 3 years ago12/18/20 at 5:27 am (UTC)

As Owens sample uses jQuery and the newest versions of Storyline donot include jQuery anymore i updated his Storyline file to work with Vanilla Javascript. hide( ) and show( ) are 2 jQuery specific functions and do not work without it, so i changed that to use GSAP. As GSAP is built into Storyline that works great. Also no problems with any CSS, because with GSAP you can change CSS quite easily. This works only in the Classic Player. The Modern Player has other class names, so for that you have to puzzle a bit.

Math Notermans
over 3 years ago12/18/20 at 5:43 am (UTC)

As there are differences in the Modern Player i fixed the above to work without jQuery in the Modern Player. Mainly the only difference was the name of the custom print button. In the Classic player it is: link-right-1 where as in the Modern player it is: link-right-0. Offcourse this also depends on what other components you have active in your player.

Position also is something that works different in the Modern Player. I didnot fix that here, but it is as easy as changing the values in the GSAP code to change the position...
gsap.set(printButton, {
height:'30px',
x: '80px',
y: '8px',
zIndex: 1000,
borderColor: "#B1B1B1",
autoAlpha:0
});

Jan van Vledder
over 3 years ago01/13/21 at 11:59 am (UTC)

Thanks Owen,

Although a post from three years ago, I now  found this topic. I have been struggling with how to print a certificate and this is one of the straightforward methods.

I have done it a bit differently: On the certificate slide I insert a hotspot. The trigger is to click on the hotspot to run the javascript. On the previous (congratulations) page, I include the instruction how to print the certificate.

An other method I used is: make a screenshot of the certificate slide, preferably with a snipping tool, paste into PowerPoint and print (or save as PDF). Advantage is that it's a full page certificate, without the title, page numer and footer text.

Jeffrey Riley
over 3 years ago01/13/21 at 3:13 pm (UTC)

I agree the shorter version Owen created is the simplest. I have instructions on mine for the learner to add some information and then send to PDF rather than a printer. 

I like your idea of a hotspot so it must cover the entire slide? I have it so my print button is set to hidden but that makes it impossible to reprint if needed. 

Jeffrey Riley
over 3 years ago01/13/21 at 4:18 pm (UTC)

Jan van Vledder, I like that very creative and helps with notification. I need to ask my client if he wants that as well. The client's main objective was to have certificates be digital instead of printing a lot of paper. I do have the course set to show complete at the end so that shows on the LMS.

Sherri Sagers
almost 3 years ago04/28/21 at 5:00 pm (UTC)
Christian King

Just to add to this idea, by default the Articulate player prints at A3 paper size (in Chrome at least). To resize the page to fit A4 automatically you can add to the following javascript to scale the size:

document.body.style.zoom = .7;
window.print();

I used .7 which is 70% and fits an A4 landscape page but you might experiment to suit your intended audience.

Perfect! Thank you!!!

Sherri Sagers
almost 3 years ago04/29/21 at 8:04 pm (UTC)

I hope my unsophisticated (naïve ?) solution for the modern player is helpful... I used Owen's simple JavaScript with Christian's super helpful addition [document.body.style.zoom = .7; window.print();]. Then I added a layer with shapes to cover the onscreen print button. I triggered the cover layer to appear before the JavaScript and then to go away after 1 second. That lets me print what I want with the print button hidden - and I can leave the print button in a familiar place for the learner.

document.body.style.zoom = .7;
window.print();

2 triggers on print button

 

Covers

Tammy Knoll-Anderson
almost 3 years ago05/21/21 at 3:52 pm (UTC)

This tip was submitted almost four years ago now (78 participants, 184 replies, eight pages) and there is a GOLDMINE of helpful advice here—bless you, Owen!

Any chance some of this info has made its way into Articulate help docs and support articles? If so, can someone point me to them so I'm not wading through 78 conversation strings to strike gold? I have a specific, related question, but I prefer not to add to the madness here ;-). 

Victor Madison
almost 3 years ago05/25/21 at 6:16 pm (UTC)

Sherri, your java script works great for printing my certificates.  However, when I return to the lesson after the printout, the screen is reduced to 70%.  So I just added another line to return the display to normal:

document.body.style.zoom = .7;

window.print();

document.body.style.zoom = 1.0;

Thanks,

-Vic

Sherri Sagers
almost 3 years ago05/26/21 at 9:50 pm (UTC)

Thanks to Victor Madison for this addition... for those who might have issues with the screen not adjusting correctly: 

...when I return to the lesson after the printout, the screen is reduced to 70%.  So I just added another line to return the display to normal:

document.body.style.zoom = .7;

window.print();

document.body.style.zoom = 1.0;

Tanudja Gibson
almost 3 years ago06/03/21 at 4:21 am (UTC)

Hi Sheri,

I'm new to this javascript stuff. Please would you be able to provide the total code, for use with Modern Player, with all the code additions from this post - so I can just copy and paste it in? I have no idea how to construct code or add extra lines to what's there. I won't be customising so will just be using the window.print(); code?. I notice this code prints the Player as well. Is there any code to just print just the slide content, in Modern Player? Many many thanks

Sherri Sagers
almost 3 years ago06/03/21 at 3:32 pm (UTC)

Hi Tanudja! This is all the code you should need. I actually only used the first 2 lines in my birthday card example above and it worked fine for me, but Victor found that he needed the 3rd line in order to return his display to normal after printing. Remember that because this code that has to be executed, you won't be able to see it in action until after you publish. Good luck!

document.body.style.zoom = .7;
window.print();
document.body.style.zoom = 1.0;

OWEN HOLT
almost 3 years ago06/04/21 at 3:03 pm (UTC)

Tanudja, How are your HTML skills? Based on your question here and on the "User Notes They Can Print" thread, it might be best to use JavaScript to create a printable HTML page. 
Depending on your skill with HTML, I can walk you through the JavaScript side.

This is an unrelated project but if you go all the way to the end of this Rise course demo, you will find a StoryLine block that creates an HTML certificate for the course. The certificate is created by JavaScript driven HTML content.

https://360.articulate.com/review/content/b56569f8-4679-4c5c-a937-738eb98cc3fa/review 

Sign In to Reply