Adding a Print Button to the Player and other SL3 / 360 Player Hacks

Similar to my post about adding a logo to the player, you can add a print button directly to the player too!  Here is how:

  1. Add a T/F variable to control running the JavaScript only once. Set its initial value to True.
  2. Add your JavaScript trigger to run When timeline starts if your control variable is equal to true. (See JavaScript explanation below)
  3. Set your control variable equal to false When timeline starts and be sure it is in the trigger stack below your JavaScript trigger
  4. Be sure the Volume Control has been selected in the Player Properties Window. (You can hide this later if you want to, but for now you will need it to use as a location target.)

Here is the JavaScript:
//First we are going to create and add a Print Button to the webpage
//Create a new input element and set its attributes
var printButton = document.createElement('input');
printButton.setAttribute('type', 'button');
printButton.setAttribute('id', 'CustomPrint');
printButton.setAttribute('value', 'Print Page');
printButton.setAttribute('onClick', 'window.print()');

//Add your button to the page
document.body.insertBefore(printButton, document.body.firstChild);

//This next part uses a bit of JQuery to find the volume control in the StoryLine player and then move the button you just created to be right after it.
$(".volume").after($("#CustomPrint"));
//Format the button with the same style as other player buttons.
$("#CustomPrint").addClass('btn cs-button')

//If you want to hide the volume control, add the following line.
$(".volume").hide();

The StoryLine file I'm including demonstrates adding a Logo, adding a Print button, hiding various player elements, and showing elements that you've previously hidden.

Credits: Thanks to James Kingsley for the inspiration. His "Hacking the Player" webinar was very useful. You can view it here: Webinar Recording

26 Replies
Jacob Olivier

Hi Owen,

I wanted to play with your file.

When I publish it and launch it with IE / Chrome, my print button appears exactly like Ed, mentionned above, on up left part of the webpage, out of the Storyline content/player

 

When I use IE, while clicking on Print button, a popup appears called 'Message from webpage', with following text 'There was an interanl error, and Internet Explorer is unable to print this document'.

Are you aware of this issue and do you have any idea to solve it?

 

Jacob Olivier

Hi Owen,

I'm using Storyline 3, Update 1: 3.1.12115.0. I tried different things:

* Before changing your file : the "Print button" appears now properly inside the player, like for Ed...very strange! But it still leads to an error message, which appears after allowing to pick a printer

* after changing your file (only change the player) : print button appears still "out of the content"...and still an issue while clicking on the button...

I publish as LMS, Tin Can API as Output option, and I have a look to the story.html file

I attach 3 different screenshots of the content

OWEN HOLT

It appears that you are changing the links and this might break some of the JavaScript used to move the button into the player. The JavaScript is looking for certain elements to be in certain places for this to work.  Can you send me your .story file?

Regarding the other print issue, that seems to be a browser/driver issue unrelated to StoryLine.
See this link for help: https://www.techwalla.com/articles/there-was-an-internal-error-internet-explorer-is-unable-to-print-this-document

 

Jacob Olivier

Hi Owen,

Do you want me to share the file here? or do you want I send it to you by mail?

Concerning the print issue, you're right, this is not related to Storyline...This is another topic,  could be linked to printer drivers ,according to a few websites...but, if it does not work also with PDFCReator, I'm not so sure this is a driver issue

regards

Olivier

OWEN HOLT

OK - several issues that I see that could be the culprit.

Issue 1: This leverages HTML 5 functionality and your publish setting are for Flash with HTML 5 fallback.  You need to change this to HTML 5 with Flash fallback.

Issue 2: As noted in the post, you need to have the volume button selected in order move the Print Button next to it.  From the post....

//This next part uses a bit of JQuery to find the volume control in the StoryLine player and then move the button you just created to be right after it.
$(".volume").after($("#CustomPrint"));
//Format the button with the same style as other player buttons.
$("#CustomPrint").addClass('btn cs-button')

//If you want to hide the volume control, add the following line.
$(".volume").hide();

Fix these issues and see if that resolves the problem.

Jacob Olivier

Hi Owen,

 

Thansk for your very quick answer!

Just to be ensure I do not make mistakes, should I open the story.html and check that everything is fine on it or should I launch the story.swf or story_html5.html ?

With IE, it seems that your print button well appears with story_html5.html, but not with story.html, is it normal?

Olivier

 

 

Melissa Pittman

Can someone help me with why this will not work?  I just simply added the print onto the media player to test before I went any further or built out a print view results slide.  When I publish it and click the print page, it pulls up the printer view but there is nothing there.  

Would appreciate any tips!!

Thanks!