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

RyanLowry
Community Member
7 years ago
Yes it will work. In my example the download button is only shown on the success layer of the results slide. You could move the download button to any slide within your project.
RyanLowry
Community Member
3 years ago
Hi Doug, this is quite an old post and I've since deleted the example files. There's a slightly more recent post for Storyline 360 here that includes an example link: Storyline 360 - Generating a PDF Certificate using JavaScript - Articulate Storyline Discussions - E-Learning Heroes
- DougDewan
  Community Member
  3 years ago
  Thank you, I eventually did stumble upon the newer one. 😊
  Thanks for sharing
MariaCS
Staff
3 years ago
Hi, Doug.

I'm happy to hear you found what you were looking for!

I just wanted to add a quick note: it looks like your signature with contact information came through when you replied via email. You can remove it by clicking 'Edit' below your response. Here's a quick Peek 360 video if you need help.
TamaraClarke-96
Community Member
10 years ago
thanks for this - so good - works perfectly.
SimoneEarle
Community Member
10 years ago
This is brilliant...thank you Ryan! Hmmm...can I also pick your brain??

I've been asked to create an initial assessment questionnaire, with each question carrying a score.

The score collated determines the eLearning pathway that user takes. At the end of the assessment, on screen feedback is given. My client would like the feedback to be also accessed via a downloadable pdf.

I'm very new to eLearning and want to know if the method highlighted here would work?

Thanks in advance.

Simone
- RyanLowry
  Community Member
  10 years ago
  
  Simone Earle
  
  This is brilliant...thank you Ryan! Hmmm...can I also pick your brain??
  
  I've been asked to create an initial assessment questionnaire, with each question carrying a score.
  
  The score collated determines the eLearning pathway that user takes. At the end of the assessment, on screen feedback is given. My client would like the feedback to be also accessed via a downloadable pdf.
  
  I'm very new to eLearning and want to know if the method highlighted here would work?
  
  Thanks in advance.
  
  Simone
  
  Hi Simone,
  
  Glad you've found this useful. As Ashley suggested you would set the value of a text variable to be equal to the feedback text. You could then retrieve this value when you generate the certificate.
  
  e.g. if you had a storyline variable learnerFeedback
  
  You would retrieve the value of this storyline variable by adding the following JavaScript to certificate.html
  
  var feedback = player.GetVar("learnerFeedback");
  
  You would then need to modify the layout of the PDF document definition to include this new variable.
  
  Remember to account for the varying amount of space that will be required for the different pieces of feedback text when designing your certificate.
  
  Hope this helps,
  
  Ryan
AshleyT-Pollard
Staff
10 years ago
Glad this helped you out Tamara and Simone. In regards to your other question Simone, it's likely that you'll need to utilize a variable for this feedback and some Javascript to pass that variable to your PDF as it generates. I'll defer to the community as Javascript is not something I can offer support for but you may want to begin by reviewing the best practices here.
SimoneEarle
Community Member
10 years ago
Thanks for getting back to me Ashley. I'll be sure to have look and thank you for the offer of support....!! I'll let you know how I get on.
AshleyT-Pollard
Staff
10 years ago
Thanks Ryan for popping back in to share those specifics.
SimoneEarle
Community Member
10 years ago
Thank you Ryan I'm definately going to give this a try!!!
RyanLowry
Community Member
10 years ago

Matthew Bibby

This is great Ryan, thanks for sharing this example.

What was the issue you ran into with the Flash output? As PDFmake is JavaScript based I thought it would work okay... but I'm obviously missing something.

Hi Matthew,

To be honest I didn't really spend any time looking at why this didn't work with the Flash version as we have just been using the HTML5 output. I've had a quick look and the following tweaks sort it out...

In my example I hid the web object that contains the certificate code off the project canvas. This works fine with the HTML5 output but the web object is not included in the Flash output if you do this. The easiest thing to do is to make the web object very small and hide it behind another element on the project canvas.

Also you'd need to modify / remove the little bit of JS that i use to retrieve the title of the project.

// title = window.parent.story.title;

Once these changes have been made it works fine for both the HTML5 and Flash versions. I'll update my original post sometime soon to reflect these changes.

Cheers,

Ryan