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

Hi Wes! Glad that you were able to find what you needed and that Ryan was able to assist as well. 

I'm just popping in to mention that replying to the forums via e-mail attaches your signature. You are welcome to edit that if needed.

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!

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

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

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