Print ANYTHING in StoryLine
Jul 10, 2017
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.
206 Replies
Nice!
Thanks Owen for your work on this option. However, I have a client who uses IE as the corporate browser and runs my SL3 CBT in the local (CD) mode. I have tried everything, including this method, to print a certificate at the end of my course. When I say everything, I have literally tried every solution posted in these eLearning Heroes postings (hours of testing).
I have only had fair results using the simple java script "window.print ()" command. It prints the screen but the certificate is chopped off on the right side since the printout is in portrait mode (the same results occur when the printer is set for landscape). I may just have to delete the printing option for the certificate. I have spent too much time trying to find a solution that works in IE.
Hi Owen, This is awesome. Works great in Chrome. Why does it give an error when using IE and what is the workaround for that? Cheers, Doug
Same problem as you. But what i think is happening is that the popup that gives a preview doesn't work in IE, chrome as a popup that seems to work. I'm talking print diaglog popup. I'm finding IE is shiat and haven't found a workaround?
I have found that the IE and Edge browsers are the worst for almost everything except just browsing the Internet. I have only been able to get the print to work with Chrome or FireFox.
Owen I would be interested in your workshop as well. Where would it be or is this going to be virtual? I am especially interested in using javascript to email out a results slide with the score and some other data the user enters. I have experimented a lot with your information and Stephanie Harnett and I still can't get it to work.
Thanks for all you share in the community.
@doug, @jeffrey,
Are you having issues with Owen's original code or the solution I posted. (the one we are using for CoursePortfolios.com).
Ours seems to work in IE, Edge, Chrome, and Firefox. Please let me know if it is not working for you.
The code James posted is pretty $%^& slick! (Pardon the expletives...)
Did you try it in internet explorer. Would be slicker if works in all browsers. Unless someone has figured that out. Sad face.
Sent from my iPhone
I've tried it in IE9, Edge, and Chrome. Additionally, James has tested it in Firefox. However, no one can ever guarantee that everyone's browser settings and deployment environments will be exactly the same so one person's testing does not another person's success guarantee. Still, this is probably the closest I've seen... until Articulate changes coding or the next wave of browser version updates.
@doug,
Maybe you can post a link to your course and I can take a look?
When I think I am getting better at using javascript James posts something like that ;-)
Works fine (more than fine) in Safari on the Mac
I know, right?
I know this is an old thread but harbour hope someone might still be able to help.
I'm having no trouble executing the "window.print();" command, but what I'd like to do is print/save and entire survey built on a single slide within a scroll pane.
I've tried to tweak the code using various element names (like "scroll.area.print();") but to no avail.
If somebody could help me hack this I would be eternally grateful. This printed survey is intended to be a pretty big takeaway for the learner.
Can we print what's in the scroll area div even if it's not all on the screen at once?
For something like that I would probably recommend building a new HTML page that pulls the data from the course. That way you can format/style the page however you wish and use placeholder text. Then when it it is launched use JS to get the values from SL and replace your placeholders. This is also useful when learners are entering free form text because you never know how much (or little) they might enter.
I like to use this HTML2PDF library as it bundles html to canvas conversion with PDF creation and the ability to save/download the file.
[EDIT]
I should add that the library referenced above does not work very well within SL which is another reason why I recommend creating a new HTML page. SL slide content is very layered and much of it is converted to SVG using CSS classes. Those are hard for that library to render correctly.
Hi James. I was wondering if you could break this code down for me? I don't seem to recognise it as javascript and was wondering how it functions. Apologies for being a dunce.
This walkthrough is the greatest. Thank you so much, worked flawlessly. <3
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:
I used .7 which is 70% and fits an A4 landscape page but you might experiment to suit your intended audience.
Thanks! This is really helpful!
Get Outlook for iOS
THIS!!! Thank you! :)
I am using Storyline 360, and when I go to create a new player tab for a print screen, it does not open a Trigger Wizard-it opens up a Player Tab. Where on the player to I create the trigger?
- The New Player Tab Wizard Opens
- There are 3 sections
This will change the default "next slide" link to a link titled "JavaScript
Add your code
- Everything is the same as above EXCEPT you have an additional option for Alignment with the choices of Top Left or Top Right.
Does anyone know if this solution still works? I had it set up in a course 2-3 months ago, and it stopped working after the last Storyline update. Is there a workaround? The thing is that player buttons don't show up in developer tools as separate elements anymore.
Are you using the modern player? This was set up with the classic player.
Hi Owen,
Yes, I am using the modern player. However it did work few months ago, and now I can't see specific buttons in the developer tools so I can't even check if the JavaScript uses the right button names. Do you have any idea how to tackle this? I tried different browsers, but it makes no difference.