Forum Discussion
Print ANYTHING in StoryLine
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.
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.
I love it, anyone tried lowering the button in SL360 recently on modern player? It doesn't seem to work for me. Maybe because of the new accessibility add on? even when I try to publish the example in the classic player, the button is still on the upper part of the player.
The "move" code originally posted used jquery which is no longer supported by SL. You would need to use a pure JavaScript solution to move the button and with the most recent changes to the player buttons, I haven't looked at this yet to see what would be needed.
Hi Owen,
I followed your instructions for my Storyline 360 course and I was able to get the Print Page tab to show up, but it doesn't do anything. I'm using java script window.print();|. Any advice?
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();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
Thanks Vic! I'm going to update my entry above to include your addition! I love that it's had so many contributors!
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;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
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 ;-).Hi Tammy! Although we don't provide support for JavaScript coding, we do have one article that shares a snippet on how to print a current slide. If this isn't what you're looking for, you're always welcome to create a new discussion with any questions you have.
Thank you so much, Sarah!
Playing with this some more and discovered with the modern player, if you want the Print button to consistently appear to the left of the screen (e.g. As it does with Math's story file example; near the volume button) then you need to add this script each time to each slide (trigger executes was slide/layer starts) where you want the button to appear.
Maybe there is another way, but I tried everything and it wasn't until I put this on each slide did behave as I had hoped. Otherwise the button pops up almost to the right of the player.var printButton = document.querySelector("#link-right-0");
var volumeButton = document.querySelector("#volume")
volumeButton.after(printButton);
printButton.className= "btn cs-button volume-panel";
gsap.set(printButton, {
height:'30px',
x: '80px',
y: '8px',
zIndex: 1000,
borderColor: "#B1B1B1",
autoAlpha:0
});Nice Tracy. Probably you also could add it to a MasterSlide...but as this works for you its fine.
I do have to pinpoint that the GSAP library is only directly available in Storyline360. If you use Storyline 3 that library aint available. The old tweenlite libraries are still in SL 3.
I have tried this in a Storyline 360 project using the modern player. I can get the Print tab to show in the top right and I can get it to print. That works great.
The issue I'm running into is trying to hide it until a certain slide is reached then I want it to show. I pulled down your print story file and when it was published it didn't work either. I tried a review link David Anderson posted at the beginning of this thread from four years ago and it worked.
It doesn't need to be moved to the bottom, I just want to hide and show it.
I've tried a combination of id options, but still nothing. This is the info I found in the browser for the Print button - button id=”link-right-0” class=”cs-topmenu-item cs-tabs top-tab custom-link”. For reference, I tried the same thing with the Resources button - button id=”resources-link” and I couldn't get it to hide it either. My print button id looks different than yours and I've tried it too just to say I did. Still no go.
Can you help me figure this out?Thanks
For the Print button in the Nav player bar... does it work for the modern player as well?
Thanks man!! Really appreciate it and all the work your doing on this... I always learn a ton from you! Happy New Years!
Thanks for the detailed info on this topic. It’s very hard to find nowadays to know about the basics but you did it so much well and I loved it . I would love to see more about it.
Hi there,
tapping into a 5yo discussion. I tried the print button, but unfortunately my page (16:9 layout) is cut off and even in landscape mode I am loosing about 20% of the page.
What I would like to have is a print of the actual slide- without the player being shown.
Is there an easy way to have everything visible on the printout and show only the slide without player?
