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.
206 Replies
- JaneMadukeCommunity Member
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.
- onEnterFrameCommunity Member
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 KingsleyNeed an awesome way to collect feedback?
https://www.reviewmyelearning.com/
Don't just collect feedback. Start a conversation.
ReviewMyElearning.com
- PatriciadeSouzaCommunity Member
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
- OwenHoltSuper Hero
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-customlinkI haven't tested this yet but in theory it should work.
- PatriciadeSouzaCommunity Member
Thanks Owen - I will give it a go and let you know how I get on :)
- PatriciadeSouzaCommunity Member
Hey Owen - it works beautifully - you are a star!
Many Thanks :)
Patricia
- OwenHoltSuper Hero
Glad it worked for you, happy to have helped.
- JeffreyRileyCommunity Member
Owen,
I find that I am not able to print anything in Internet Explorer or Edge when using your concept. Have you had that problem? In fact, the preview screen in Edge is blank and the Internet Explorer prints blank.
I am also working with Articulate Support for a solution. Thanks.
- JeffreyRileyCommunity Member
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!
- AndreaGomez-e13Community Member
I have problems too with internet explorer.
- FelixFrankeCommunity Member
This seems to be resolved according to this post (haven't tried it myself though) https://community.articulate.com/discussions/cannot-print-page-in-ie-or-edge
Anyway, awesome feature, thanks for sharing.
- OwenHoltSuper Hero
I've never used edge but haven't experienced any issues with I.E.
Sorry I can't offer you any help here.- JeffreyRileyCommunity Member
OK, thanks for letting me know. Once I have a solution I can reply here in
case anyone else needs help.- SylviaWrightCommunity Member
Jeff, please do let us know if you figure something out for Edge!! THANKS for working on it!!
- DonnaWestwoodCommunity Member
Owen to the rescue again!!! Fabulous stuff - btw - I am trying to use this method in SL3, (where you pull in text entry boxes) http://elearningbrothers.com/6-steps-on-how-to-make-a-printable-results-page-in-articulate-storyline/ - used to work fine for me in SL2 - but can't get it to work now - any ideas??
- JeffreyRileyCommunity Member
Yes, I am working on this with SL3 and have had issues. For example, I cannot print anything to Microsoft Edge or Internet Explorer browsers. I can get FireFox and Chrome to work. I have a support ticket with Articulate on that.
I have not tried the text entry boxes but if you are printing the window it should not make any difference. The problem must be in the Microsoft browsers but I will know more when Articulate gets back to me.
I agree that Owen Holt has given us a very good tool!
- SylviaWrightCommunity Member
It also works well in Safari so that's a plus...must be Microsoft...late to the party :(
- DonnaWestwoodCommunity Member
Thanks Jeffrey - users have a long questionnaire to fill in over three slide so I was trying to combine all their answers - as opposed to 3 separate prints.. i'll let you know if I come up with a solution....
Related Content
- 10 months ago
- 10 months ago
- 10 months ago
- 10 months ago