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

Hi Janis, 

As I think you've already worked out you need to edit certificate.html

You will need to re-insert the web object after editing to see your changes.

Ryan

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();
  }
}

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();
 }
}

Thanks Ryan for sharing here - people are always looking for more certificate examples so I appreciate you sharing it here. 

Ok, this looks interesting and I was wondering if there is a tutorial on how to use this site?

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

It looks like the PDFMake website was temporarily down but it's now back up so the documentation is available again. It should contain everything you need to generate your own custom certificate.

PDFMake is one of several Javascript PDF generation libraries. You could swap in jsPDF for example.

Hi Jesko, thought i'd reply here rather than by email in case this is useful for someone else.

I've attached updated source files that make use of the latest version of PDFMake (v0.1.27). This seems to work fine for me. Please note I've only tested in Chrome and IE.

I don't think anything has really changed with regard to images. They still have to be base64 encoded as far as I can see. See my previous post here for details.

I can't share my .story due to the IP but essentially I  just stored the answers to the questions in variables %Answer1% through to %Answer10% and in the html file included the questions and pulled in the answer variables. 

 // Question 1
 {
 text: 'This is where I put my question',
 fontSize: 20,
 alignment: 'left',
 margin: [0, 0, 0, 10]
 },
 // Answer 1
 {
 text: Answer1,
 fontSize: 12,
 alignment: 'left',
 margin: [0, 0, 0, 30]
 },

Hi Norman,

You need to point the Web Object to a local copy of the folder certificate that's included in the zip file attached to the first post. This folder can be placed anywhere and should not be placed in the folder that you plan to publish to. (Storyline deletes the contents of this folder each time you publish).

When you Add a Web Object Storyline will import all of the files contained in the source folder into the project and will automatically include them in the published output.

Ryan