Print ANYTHING in StoryLine

Jul 10, 2017

OWEN HOLT
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
Victor Madison
almost 5 years ago05/01/19 at 3:20 pm (UTC)

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
almost 5 years ago06/28/19 at 1:03 pm (UTC)

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
almost 5 years ago07/02/19 at 1:48 pm (UTC)

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
almost 5 years ago07/03/19 at 8:22 pm (UTC)

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)
almost 5 years ago07/05/19 at 2:27 pm (UTC)

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
over 4 years ago07/25/19 at 2:31 pm (UTC)
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
over 4 years ago09/19/19 at 1:55 am (UTC)

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.

Ros McNamee
over 4 years ago11/21/19 at 7:19 pm (UTC)
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.

THIS!!! Thank you! :)

OWEN HOLT
over 4 years ago12/11/19 at 6:37 pm (UTC)
  1. 360 with Player Style = Modern: Click the ADD button under the player Tabs list window.
    - The New Player Tab Wizard Opens
    - There are 3 sections
    1. Name - Give your tab a name like "Print"
    2. Action
      1. Click the default action of "Jump to Slide" to see the list of options
      2. Select "Execute JavaScript" from the list
        This will change the default "next slide" link to a link titled "JavaScript
      3. Click the now visible JavaScript link - this will open the JS code window
        Add your code
    3. Conditions - optional
  2. 360 with Player Style = Classic: Click the ADD button under the player Tabs list window.
    - Everything is the same as above EXCEPT you have an additional option for Alignment with the choices of Top Left or Top Right.
Marek Jędryka
4 years ago02/04/20 at 10:10 am (UTC)

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.

Sign In to Reply