Print ANYTHING in StoryLine
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.
197 Replies
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
Oh Math, thank you so much for updating this solution. What a great team!
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