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.

This is fantastic, Owen! Just tested a few examples and this works really well: https://360.articulate.com/review/content/3ba1dd6a-db77-4452-bb4b-ca6cd211c83f/review

A creative idea that works really well! I tested it against multiple browsers and devices - it works in html 5 flawlessly. Switching to flash puts the print page button back up to the top tab area but it still works. It didn't work in AMP for me but did work well in html5 on the same ipad. Prints just what's on the screen which is great for certificates but for longer notes or other types of captures that are in a scroll box or a variable-driven list, outputting to html or pdf still seems to be needed. That said, this solution is simple, easy and does the trick!

Thanks, Owen. I came across this discussion from 2 years ago to add a button with the same JavaScript you used for creating the print tab: https://community.articulate.com/discussions/articulate-storyline/print-button-javascript This allows more control on the page(s) I want the learner to be able to print.

Owen, I love this idea and am working it into a project I am doing now. However, I find that there are issues with SL3 and Internet Explorer 11 and Edge. I have submitted a ticket to Articulate support on this and they are looking into it. Have you had any problems printing to the Microsoft browsers? Otherwise, it works in Chrome and FireFox. I was also going to experiment with some code that only prints what is on the slide and not the window. For a certificate, I really want it to look clean and not have other information such as a web address etc. Either way, thanks for figuring this out and sharing with the community. Great Job!

Can someone give Owen a medal or something?? And why isn't he an elearning hero already?? - he has saved my bacon a few times now!! THANKS SO MUCH! you sir are a gentleman and a scholar.... :)

Print ANYTHING in StoryLine | Articulate

JamesFinder-b89
Community Member
8 years ago
Awesome!
wayneedmonds
Community Member
8 years ago
Great, we were looking for something to resolve these types of issues. I will test this out soon!

Thanks!
AGoldthorpe
Community Member
8 years ago
Great tutorial Owen! Thanks for sharing.
onEnterFrameJam
Community Member
8 years ago
Nice job Owen!
TracyParish
Super Hero
8 years ago
Fantastic share. Thanks for showing us this one. Liked the way to recorded the video to explain how you did all the steps. Nice job.
TriciaRansom
Community Member
8 years ago
Thank you!
LucyWood-cf5987
Community Member
8 years ago
This is wonderful! I'm a SL2 user and know nothing about JavaScript, so this is easy for me to add.

Is there a way to turn on/off the custom tab for select slides, as there is in the base layer settings for the pre-set tabs?

Thanks!
- OwenHolt
  Super Hero
  8 years ago
  Unfortunately no (at least not by the built in functionality); custom tabs are not included in the Slide Properties 'Custom for the selected slides' window.
  
  However.... IF (and you will notice that is a big IF) you are publishing your SL2 using HTML 5... you can use the following to hide the button. Note that this is for SL2 only; the identifiers changed with SL3/360 as noted in my original post.
  
  Find the button/tab and rename it. You can do this on your first slide at timeline start using the following JavaScript:
  $(".customlink").attr("id","printButton");
  
  To hide the button/tab, use the following JS:
  $("#printButton").hide();
  
  To show the button/tab, use this JS:
  $("#printButton").show();
  
  Note, this will only work in the HTML5 output of SL2.
JaneMaduke
Community Member
8 years ago
Thanks so much, Owen! I love the way you've used the Chrome developer tools to find the names of the objects in the code. That's a trick I'm sure I'll use! Very well done.
- onEnterFrameJam
  Community Member
  8 years ago
  Hi Jane,
  You may want to watch the recording of my webinar where I walk through how
  to use the Chrome Dev Tools to find and manipulate stuff in Storyline.
  http://elearningbrothers.com/webinar-hack-storylines-html5-output/
  
  Thank you,
  James Kingsley
  
  Need an awesome way to collect feedback?
  https://www.reviewmyelearning.com/
  Don't just collect feedback. Start a conversation.
  ReviewMyElearning.com
PatriciadeSouza
Community Member
8 years ago
Hi

I am never done any JavaScripting before - however was able to follow the tutorial to produce a print button in my project, (and show hide it on specific slides) - this is exactly what I need in my project :)

However if I also have an exit tab in my player - how do i identify which tab I want to move down to show up next to the volume button

With the exit tab included, both the Exit and print buttons are showing up next to the volume button, however the print button is no longer formatted and is visible on all slides, but the exit button only shows up on the specific slides as set up following the tutorial!

Can anyone suggest how to just have the print button by the volume button and the Exit tab to stay up on the top bar?

Thanks
OwenHolt
Super Hero
8 years ago
StoryLine makes this slightly difficult by naming all of your custom tabs "#tab-customlink" so what you are experiencing is a result of the JS moving the first item named that that it comes across. The way around this is to give your custom tabs unique IDs and then referencing the IDs instead of the name.

Try adding the following:
$("#tab-customlink").attr("id","printButton");
and then update the rest of your existing code with #printButton replacing #tab-customlink

IF it is moving the exit button after taking these steps it is because the exit button is the first #tab-customlink in the page code that the JS encounters. So, we will rename it first and then repeat the process to rename the next one which should now be the print button. Try adding the following to name both tabs:
$("#tab-customlink").attr("id","exitButton");
$("#tab-customlink").attr("id","printButton");
and then update the rest of your existing code with #printButton replacing #tab-customlink

I haven't tested this yet but in theory it should work.