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

Aug 27, 2015

Ryan Lowry
By Ryan Lowry

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

152 Replies
Simone Earle
over 8 years ago09/21/15 at 11:31 am (UTC)

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

 

 

Ashley Terwilliger-Pollard
over 8 years ago09/21/15 at 1:28 pm (UTC)

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. 

Ryan Lowry
over 8 years ago09/22/15 at 8:06 am (UTC)
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

Ryan Lowry
over 8 years ago09/23/15 at 9:44 am (UTC)
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

janis stars
8 years ago02/14/16 at 2:21 am (UTC)

Hello, community members!

Ryan, thank you very much for the example! 

I am fairly new to articulate and not very familiar with programming. Could anyone please give me a hand by telling, where can I find the actual code which can be modified (so I change the text which is on the certificate:

"Organisation name,
this is to certify that,
successfully completed the following activity..."

I would like to just copy and paste the original concept of the certificate, but need to add Organisation name etc... 

Trying to solve this puzzle.. 

Thank you very much!
 

janis stars
8 years ago02/15/16 at 9:57 am (UTC)

Hi Ryan, 

Yes, thank you very much for the reply. I did work it out theoretically and will try to edit the html file to insert the text and maybe new variables from the storyline which i need - test results for example (though it requires some decent programming skills which i am not very familiar with).

Will see how it works with inserting and re-inserting the web object also..thought just copying the web object from your file and inserting it into mine will work..will see..  Love challenges.   

Thank you very much indeed and have a good day!

Nicky A
8 years ago02/15/16 at 7:01 pm (UTC)

Hi Ryan,

Thanks so much for this post. Do you know of an easy way to have an image populate as the background (if we already a certificate template for example). I was thinking using adobe edge animate to try and convert the image into html and plug it into the certificate.html file but that might be wishful thinking..

Ryan Lowry
8 years ago02/16/16 at 1:27 pm (UTC)

Hi Nicky,

It's possible to set a background layer in the document definition. This can contain any content including images.

See bold section below.

Note that images are included as data uri's with images encoded as base64 strings. You could use the converter here to convert your image to a base64 string.

(The dimensions set below are the size in pixels needed to cover the full background of an A4 page).

var docDefinition = {

// Set page size
pageSize: 'A4',

// Set document orientation
pageOrientation: 'landscape',

// Set page margins
pageMargins: [0, 110, 0, 100],

// Define document background
background: [
  {
    image: 'data:image/jpeg;base64,/9j/4QAY...',
    width: 841.89,
    height: 595.28
  }
],

// Define document header
header: [
  {
    text: 'Organisation Test\n\n',
    fontSize: 30,
    alignment: 'center',
    margin: [0, 40, 0, 40]
  }

],

//doc definition continues here...

};
Sign In to Reply