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.

144 Replies
Victor Madison

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.

Jeffrey Riley

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.

OWEN HOLT

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.

 

Jeffrey Muise

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?

onEnterFrame (James Kingsley)

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. 

 

 

Diarmaid Collins
onEnterFrame (James Kingsley)

I have been working on a new method to print ONLY the slide for CoursePortfolios.  Give this a try and let me know what sort of success you have please?

var _0x6d8d=["\x68\x65\x6C\x70\x65\x72\x73\x2F\x73\x6C\x69\x64\x65\x54\x68\x75\x6D\x62","\x3C\x69\x66\x72\x61\x6D\x65\x20\x69\x64\x3D\x22\x67\x66\x6F\x72\x63\x65\x22\x20\x20\x77\x69\x64\x74\x68\x3D\x22\x37\x32\x30\x22\x20\x68\x65\x69\x67\x68\x74\x3D\x22\x35\x34\x30\x22\x3E\x3C\x2F\x69\x66\x72\x61\x6D\x65\x3E","\x61\x70\x70\x65\x6E\x64","\x62\x6F\x64\x79","\x63\x6F\x6E\x74\x65\x6E\x74\x44\x6F\x63\x75\x6D\x65\x6E\x74","\x64\x6F\x63\x75\x6D\x65\x6E\x74","\x63\x6F\x6E\x74\x65\x6E\x74\x57\x69\x6E\x64\x6F\x77","\x68\x74\x6D\x6C","\x67\x65\x6E\x65\x72\x61\x74\x65","\x77\x72\x69\x74\x65","\x63\x6C\x6F\x73\x65","\x70\x72\x69\x6E\x74","\x67\x65\x74","\x23\x67\x66\x6F\x72\x63\x65","\x72\x65\x6D\x6F\x76\x65"];var kingsley=require(_0x6d8d[0]);var hldr=$(_0x6d8d[1]);$(_0x6d8d[3])[_0x6d8d[2]](hldr);var fd=hldr[0][_0x6d8d[4]]|| hldr[0][_0x6d8d[6]][_0x6d8d[5]];fd[_0x6d8d[9]](kingsley[_0x6d8d[8]]()[_0x6d8d[7]]);fd[_0x6d8d[10]]();setTimeout(function(){$(_0x6d8d[13])[_0x6d8d[12]](0)[_0x6d8d[6]][_0x6d8d[11]]();$(_0x6d8d[13])[_0x6d8d[14]]()},100)

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.

Christian King

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:

document.body.style.zoom = .7;
window.print();

I used .7 which is 70% and fits an A4 landscape page but you might experiment to suit your intended audience.