Print ANYTHING in StoryLine

Jul 10, 2017

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
Tracy Parish

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

 

Ce Edge

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

Antje T.

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?  

claire clayton

Thanks so much for this, I have searched for ages for a solution and found this works for me great!

I have one issue though, after I print it reduces the size of the remaining published slides - is there any JavaScript you can recommend that will return it back to full size after the print window shuts?

Thanks

Kurt Sachse

Hi Owen,

 

Here i am very late to this party - lol. I found this while doing a search to find a way to print the results of an exam created in SL3.  The exam is heavily based in hotspot and drag/drop etc. The PDF format of the result I can get from my LMS is very rudimentary and difficult to re-examine if a learner fails an exam, and it is necessary to do it manually.  I would love to get a full HTML type print out that comes to me as the course owner/system admin BUT also want security so that neither the learner nor the proctor can have access to save or print.   If you have all the answers to do this, you are my new best friend. 

Thanks for any advice in advance. - Kurt