Storyline 2 Example - Generating a PDF Certificate for users who successfully complete a quiz

Awesome! I found this resource but was missing the URI convert step and couldn't figure out how to properly reference the image. Thanks again!

Thanks Leslie.

Ryan just answered this a few posts up

Hi Ryan,

My question to you is: How do you customize the background?

Specifically, can an existing PDF be imported into the background?

I would like to avoid using the online conversion tool, referred to in your previous posting.

This does not seem to work?

// under NodeJS (or in case you use virtual file system provided by pdfmake)
// you can also pass file names here
image: 'myImageDictionary/image1.jpg'

Ideally with a vector based image would be great!

Thanks,

Kevin

Hi Ryan, 

Would that be possible to get the storyine file "Certificate with Background Image" attached? :) 

Thank you!

Hi Kevin,

As I mentioned in my previous post images must be converted to base64 strings and included as data uri's. You don't need to use an online converter, you can do this locally. I'm not going to go into how to do this, a quick google should point you in the right direction.

The following example demonstrates how you can use filenames when using pdfmake with NodeJS locally / on  a server.

// under NodeJS (or in case you use virtual file system provided by pdfmake)
// you can also pass file names here
image: 'myImageDictionary/image1.jpg'

There's no way to directly import a PDF, it would need to be converted to an image.

Unfortunately pdfmake doesn't support vector based images.

If you want to do something more advanced I think you'll have to do it server side. We use TCPDF to generate certificate PDF's server side with PHP in our VLE. This PHP class is much more advanced than pdfmake and the other javascript pdf libraries. Another benefit of generating server side is that you can keep a record of all issued certificate pdfs, 

Cheers,

Ryan

Thank you Ryan. 

All the best,

Kevin

Nested iframes

Will the code still work?

If in an LMS, we have nested iframes. First iframe is for the lms <iframe class="tl-scorm-frame"... inside that we have the the web object...

Should this be updated to target the nested iframe:

var iframeElements = document.getElementsByTagName("iframe"); iframeElements[0].contentWindow.generatePDF();

If so, lil'help ;)

Late of night of google'n "nested iframe targeting" ...

/life of a gangster

Ryan

P.S. Great job Ryan

Maybe target the iframe id? If nested in an LMS?

<iframe frameborder="0" id="div5ZXigntYKK9.6C0CWw28H1t.64Y3LmijXhu.69J7dQoqcJI" src="..." style="border: 0px; width: 100%; height: 100%;"></iframe>

Hi Ryan,

I don't think this is an issue, at least it hasn't been for me when testing in Moodle.

The page structure when viewing a Storyline SCORM package in Moodle is as follows:

moodle page
--> iframe
----> frameset
------>frame
--------> storyline
----------> iframe (webobject)

Tthe JavaScript targeting the webobject iframe is called from the Storyline content so the 1st child iframe will still be the webobject.

Cheers,

Ryan

Cool.

I'm going to Dev Learn like this...

If there is more that one web object it is not possible to get the print certificate popup to appear.  Is there a way around this?

It will be possible. You'll need to modify the JavaScript called by the Execute JavaScript trigger to target the specific webobject (iframe) that contains the certificate html. I'm on my phone at the moment so can't elaborate but I'll update this post tomorrow if nobody else has replied to you.

Hi Karin,

Here's one possible solution for you. The following code would replace what's currently in the JavaScript trigger.

Instead of targeting the 1st webobject (iFrame) on the page it targets a specific webobject based on the name of the src file.

Set the variable certFilename to the name of the certificate html file.

UPDATE: Fixed bug preventing this working in certain browsers

// Name of the certificate html file
var certFilename = 'certificate.html';

// HTMLCollection of elements of type iFrame
var iframeElements = document.getElementsByTagName("iframe");

// Iterate over the iFrameElements HTMLCollection
for(var i = 0; i < iframeElements.length; i++){
  /* If src of current iFrame element equals the filename set in
  ** variable certFilename call the generatePDF() function.
  */
  var src = iframeElements[i].getAttribute('src');
  if (src.indexOf(certFilename) !=-1) {
    iframeElements[i].contentWindow.generatePDF();
  }
}

Ryan thank you for your prompt reply.  It works perfectly.

Hey Karin!  So glad Ryan was able to step in here with a solution for you!  We aren't equipped to support JavaScript work, but it feels good when the community can come up with good ideas.

I seem to have broken the code!  I can get the module to print in Firefox but not in IE or Chrome.  I cannot see what has changed. I've attached a reduced version of the module. 

Hi Karin,

Sorry the code I posted previously wouldn't have worked in IE or Chrome...

The following should do the trick.

// Name of the certificate html file
var certFilename = 'certificate.html';

// HTMLCollection of elements of type iFrame
var iframeElements = document.getElementsByTagName("iframe");

// Iterate over the iFrameElements HTMLCollection
for (var i = 0; i < iframeElements.length; i++) {
 /* If src of current iFrame element equals the filename set in variable
 ** certFilename call the generatePDF() function.
 */
 var src = iframeElements[i].getAttribute('src');
 if (src.indexOf(certFilename) != -1) {
  iframeElements[i].contentWindow.generatePDF();
 }
}

Thank you very much for your help.  You're a star!

Hi Ryan,

Thank you for sharing this method and for taking time to answer questions posted in this forum.

I was able to create a custom certificate solution using your method and technique. However, Once the SL output was loaded on a Gov webserver the PDFmake function would not work. Nothing happens when the function is called.

I noticed that there is a server-side version of the PDFmake, however, the organization I work for will not allow the PDFMake package to  be installed on the server. I wonder if you might have experience with this issue and more importantly, a solution.

Thank you for your time,

Dan

Hi Dan,

Do you get any error messages in the browser console when the call to PDFmake fails? Does this happen in all browsers or a specific one?

Cheers,

Ryan

Hi Ryan,

Allow me to clarify, your method and my SL file worked as designed. It is only when it's accessed from a government computer, which is running IE-11 on Windows 7 that it doesn't work. From the same government computer using Chrome, it also worked as designed.

The trigger I have for calling the html and pdfmake function doesn't do anything. Because I also have a trigger to advance to the next slide immediately after the pdf trigger, I can't really trouble shoot for error messages.

I have also tested two other certificate methods posted on the forum; https://community.articulate.com/discussions/building-better-courses/create-a-course-certificate-in-storyline-with-java-and-html?page=3#reply-359742 and https://community.articulate.com/discussions/articulate-storyline/saving-storyline-variables-to-a-pdf. In both of these cases, I am also experiencing problems with creating the certificate as designed when I used IE-11. But as in the case above, the certificate function worked as designed in Chrome.

I'd be very pleasantly surprised if you would have any trouble-shooting tip for my problem, as I think it's all related to the configuration of IE-11 installed on the Government computers.

Thank you for your time,

dan