Hi all, I've been experimenting with a JavaScript PDF library (pdfmake) to generate PDF certificates client side for learners who have successfully completed a quiz in Storyline 2. You can see an example at http://rlowry.github.io/certificate/story.html The 1st slide of the example provides a brief overview of how this works. I've tested this successfully in Internet Explorer, Chrome, Firefox, Chrome on Android and Safari on iOS. I've attached a simple source file that contains a basic .story file as well as a folder (certificate) that includes the required HTML and JavaScript that needs to be included within a web object within the project. Feel free to have a look and re-use if it's useful. The generated PDF certificate is very basic at the moment, you'll need to refer to the pdfmake documentation to update the design. UPDATE: Originally this example only worked with the HTML5 output. I've tweaked it so it now works with the Flash output as well. I've updated the attached files to reflect this change. UPDATE 2: I've updated the attached source files so they now use the latest version of pdfmake (v0.1.27). Cheers, Ryan

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 filevar certFilename = 'certificate.html';// HTMLCollection of elements of type iFramevar iframeElements = document.getElementsByTagName("iframe");// Iterate over the iFrameElements HTMLCollectionfor(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 filevar certFilename = 'certificate.html';// HTMLCollection of elements of type iFramevar iframeElements = document.getElementsByTagName("iframe");// Iterate over the iFrameElements HTMLCollectionfor (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?

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

LeslieMcKerchie
Staff
9 years ago
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.
- wessykes
  Community Member
  9 years ago
  Thanks Leslie.
NickyA
Community Member
9 years ago

Kevin Brake

Hi Ryan,

Nice work getting this done, I had a long and painful sample created for PHP to PDF.

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

Specifically, change your certificate graphic to my certificate graphic ?

Ideally with a vector based image would be great!

I have tried several edits to the code and it just does not execute.

Any help would be great.

Thanks,

Kevin

Ryan just answered this a few posts up
KevinBrake1
Community Member
9 years ago
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
- RyanLowry
  Community Member
  9 years ago
  
  Kevin Brake
  
  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 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
  - KevinBrake1
    Community Member
    9 years ago
    Thank you Ryan.
    
    All the best,
    
    Kevin
janisstars
Community Member
9 years ago
Hi Ryan,

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

Thank you!
RyanMartin
Community Member
9 years ago
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
- RyanMartin
  Community Member
  9 years ago
  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>
RyanMartin
Community Member
9 years ago
I'm going to Dev Learn like this...
KarinFernandes
Community Member
9 years ago
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?
RyanLowry
Community Member
9 years ago
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.
KarinFernandes
Community Member
9 years ago
Ryan thank you for your prompt reply. It works perfectly.
- Crystal-Horn
  Staff
  9 years ago
  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.
KarinFernandes
Community Member
9 years ago
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.
Dementia_Virtual_Patient_Module_1_printtest.story2.3 MB