Print ANYTHING in StoryLine

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.... :)

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
});

It is working for me in Chrome and Edge.

There are a couple of added bits of JS functionality in the file that work in HTML5 but not flash.  The 1st bit of code, finds the tab you added, moves it to the bottom of the player, and re-formats it to look like the other lower player buttons.  The next code, hides the button.  If you click the character, the button is revealed. If you click the text bubble, the button is hidden again.


Those extra bits aren't required, I was just teaching myself how to hack some of the html5 player elements.  Really, all anyone needs to do to add the print functionality to any of their projects is the following:
1) Click Story View
2) Select Player
3) Under the Player Tabs list, click the "New" button
4) Add any name you want and choose your alignment. I typically call it "Print Window".
5) Select the action "Execute JavaScript and paste the following line of code:
window.print();

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.

1. 360 with Player Style = Modern: Click the ADD button under the player Tabs list window.
   - The New Player Tab Wizard Opens
   - There are 3 sections
   
   1. Name - Give your tab a name like "Print"
   2. Action
      1. Click the default action of "Jump to Slide" to see the list of options
      2. Select "Execute JavaScript" from the list
         This will change the default "next slide" link to a link titled "JavaScript
      3. Click the now visible JavaScript link - this will open the JS code window
         Add your code
   3. Conditions - optional
2. 360 with Player Style = Classic: Click the ADD button under the player Tabs list window.
   - Everything is the same as above EXCEPT you have an additional option for Alignment with the choices of Top Left or Top Right.

The modern player and recent storyline updates have rendered some of this obsolete.

The primary print javascript still works but I don't know that I would try to make it a button in the player.

You CAN add it as a hot link in the player bar (like resources).