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
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.
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?
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
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.
@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
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'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?
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.
This walkthrough is the greatest. Thank you so much, worked flawlessly. <3
