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

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

149 Replies
Ryan Lowry
Tim Hillier

Ryan/Ashley;

I tried to push the envelope with this today and have a question.

I published a storyline 360 to articulate online and put it into Rise as a Storyline block to see if I could get a certificate into Rise.  It worked, kind of.  It pulled default data for the variables rather than any input data.  so it is getting something from the storyline file, it is just not updating the variables when I enter in a new name for example.

Any thoughts?  I think this has great potential.  Thank you for your work.

Tim

Hi Tim,

Just did a quick test. Published to Articulate 360 and added as a Storyline block to Rise. All works as expected. Does your certificate generate properly when not added to a Rise project?

Cheers,

Ryan 

Tim Hillier

Ryan;

I changed so many things trying to figure this out I was not sure where I left off.  Thank you for the test and letting me know it can work.  After realizing I had to go back and start over, I was able to get this to work with the changed logo and text perfectly.  

This will be a wonderful addition to my rise courses that do not go into an LMS.

This is such a great service you have provided.

Thanks again.

Tim

Tim Hillier

Ryan;

In trying to push this one step further, what changes would be needed to the code to access the LMS data for the users name rather than them inputting it?  Would a storylline block published to articulate 360 then imported into a rise program that is then published as a scorm package even be able to access the lms data? I know that is a lot of steps but it would be my end goal.  Then a single scorm file would be completely self sufficient regardless of what lms it was loaded onto.

Tim

Tim Hillier

Ryan;

Just wanted to let you know that I have this working well now.  thank you so much for this code.

I have a storyline block that pulls learner name and date of completion from the lms and passes it into your certificate.  That file was placed into a rise program as a block.  The rise module was published as a scorm package and put into moodle where it functions perfectly.  this allows us to provide custom pdf certificates of completion in Rise pulling lms data when packaged as a scorm and with a simple input when published to web. 

I really appreciate your work on this.  Thank you so much.

Tim

Lisa Spirko

Hi Ryan, I need clarification on this comment of yours from over 2 years ago...

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'

Are you saying here that there is no way to point to a jpg or png (pdfmake now supports them) that resides in the certificate folder? I tried just pointing to my image in an image folder like this, but it didn't work:

image: 'image/certificate.png'

I need to be able to easily swap out the background image in the output folder, so base64 and data uri's are not going to work for me (I tested with my image encoded and I still couldn't get it to work). I'm also not sure what NodeJS is.

Thank you in advance for any advice you can give.

Lisa

Lisa Spirko

Hi Ryan,

Thank you so much! Please check out my updated files attached below (the old ones are completely broken). I did a lot of troubleshooting today and finally managed to get it to retrieve the learner name. (Evidently, it didn't like that variable being captured on the same page as the Download button; I had to go to two pages.) The only thing I'm unable to get working now is the background image.

I currently have the background image code in certificate.html commented out, as I was testing the rest of it. The image files (jpg and png, in case one works better than the other) are in the image folder, but they are deidentified due to their proprietary nature.

I greatly appreciate your help!

Best regards,

Lisa

Ryan Lowry

Hi Lisa,

See working example attached. You must include images as data uri's. The only other change I made was adding a height and width to the background image. Note that the height and width are set in pixels and are calculated based on the document at 72DPI. So a letter document in landscape has a width of 792px and a height of 612px.

To get round your issue of swapping images in the published output why not just have different versions of the certificate.html file that include the different images encoded as base64 data uri's?

Cheers,

Ryan

Michael Ambech

Hi Lisa,

I've been using Ryans excellent code myself and there is no way around base64 data uri's for your images. A different approach (without knowing your project) could be to have a variable in the course that - depending on user choice - would ask the certificate to display a given base64 uri. That way you wouldn't need multiple certificates.

Just my 2 cents ;-)

Ryan Lowry
Tim Hillier

Ryan;

Are there any file size restrictions with this code you are aware of?

I could not get it to work until my image was down below 15kb prior to converting I think it was.  

Tim

Hi Tim,

Not sure, just tested an image about 1MB and seems to work fine in FireFox at least.

Cheers,

Ryan

Lisa Spirko

Thank you, Michael. This variable would actually have to come from the LMS, and I have no idea how to retrieve that. We can't have the learner select for which course to display the certificate (unless you mean something else).

A bit of background: These are certificates for third-party CEU courses supplied by that third party. Unfortunately, our LMS displays the certificate button in the course catalog (not as an object that displays only after the course has been taken); a learner can display and print the certificate with the third-party's course index number, and then claim credit for it without even enrolling for the course. We've argued with our LMS vendor about this, but they refuse to back down on making certificates available this way, saying that in most implementations of their LMS, the customer wants the certificate button to display in the catalog. (This stuns me--I ask, then, what's the point of course certificates?) So, this is our workaround: to create our own versions of the certificates, launched from a course-like shell that can be added to the training program and available only in sequence after the course is completed.

Unfortunately, I have no idea how to retrieve course information from the LMS (learner name would be great, too), but I'll research it and see if there's a way.

Thanks so much!

Lisa

Lisa Spirko

Hi Ryan, thank you so much! I truly appreciate you for looking at my files and adjusting them.

I found a base64 encoder online, so I guess that's what we'll have to do. I'm doing this for someone on my team who administers our LMS, so she wanted a solution that she would be able to do easily on her own. Every time we get an updated certificate image from the third-party vendor, she'll need me to modify the files with the new base64/data uri's and reinsert the web object. Oh well. Maybe we don't get updates for those certificates very often.

So, are base64/data uri's needed for all JavaScript, or is this just how this JavaScript library works?

Many thanks again,

Lisa

Teresa Vanderpost

Hi Lisa,

Is it just so you can print it?

I may thinking way too simple, but I have to have students print a certificate and send via email to someone for credit as they are not in our LMS….
Could you do the following (which is what I do, and I understand this may be way to basic for what you need).

· On the slide where they begin the quiz, indicated for them to use the Print Page menu option to print their certificate via PDF when completed.

· Then on your Player go and add a menu option called Print Certificate (or Print Page), the trigger wizard that pops up you will execute javascript and type window.print()

· Technically they can print any page.. so you may want to say certificate.

· Then make your “Success Layer” look like the certificate you need, then they just Print certificate button on that page, and the browsers print function appears and they have an option to save as PDF.

My apologies if this is way below what you need, but I thought it didn’t hurt to suggest it…

Cheers
Teresa

CONFIDENTIALITY NOTICE: This e-mail message, including any attachments, is for the sole use of the intended recipient(s) and may contain confidential and privileged information. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient, please contact the sender by reply e-mail and destroy all copies of the original message.

AVIS DE CONFIDENTIALITÉ : Ce message électronique, ainsi que tout fichier qui y est joint, est reserve à l'usage exclusif du destinataire visé et peut contenir des renseignements confidentiels et privilégiés. Toute lecture, utilisation, divulgation ou distribution non autorisée est interdite. Si vous n'êtes pas le destinataire visé, veuillez en aviser l'expéditeur par retour de courriel et détruire toutes les copies du message original.

Lisa Spirko

Hi Teresa. Thank you for the suggestion. When I first noodled on this project, I actually considered something along those lines: Putting the certificate image on a page with the captured learner name and system date on top. The problem is, we can't rely on print-to-PDF. Our learners tend to be non-technical, even computer-phobic folks, working in environments where their computers may be out-dated and don't have print-to-PDF capability. Even if they do have print-to-PDF capability, they may not know this or feel comfortable using it. This wouldn't be a big deal if they could get by with just printing the certificate on paper, or if these were free, non-CEU courses, but a saved PDF file is what they need; they have to email it to the third-party org that manages CEU credits for the learners' line of work. This needs to be fool-proof, and really the only way we can do that is to present the certificate to them already in PDF format, so all they have to do is save the file.

Thanks,

Lisa

Aaron Kapala

Hi Ryan,

This is amazing what you have pulled together. I have just had a request for something in-house and this is what I needed.

I have tried to amend both the Storyline file and the Certificate file as I need to create a Risk Assessment, which once completed I need it to create a PDF document which they can download or if possible email over to their manager. I can't seem to get the PDF to display. I have added a very basic SL file where there are some questions and then based on a checkbox, it will change the variable to a value of Yes or No followed by a comment box for additional information.

If you had a free minute, could you give some guidance on where I have gone wrong please?

Thank you in advance, once I know where I have gone wrong, this could easily be adapted for so much, would be great.

Best wishes,

Aaron

Ryan Lowry
aaron kapala

Hi Ryan,

This is amazing what you have pulled together. I have just had a request for something in-house and this is what I needed.

I have tried to amend both the Storyline file and the Certificate file as I need to create a Risk Assessment, which once completed I need it to create a PDF document which they can download or if possible email over to their manager. I can't seem to get the PDF to display. I have added a very basic SL file where there are some questions and then based on a checkbox, it will change the variable to a value of Yes or No followed by a comment box for additional information.

If you had a free minute, could you give some guidance on where I have gone wrong please?

Thank you in advance, once I know where I have gone wrong, this could easily be adapted for so much, would be great.

Best wishes,

Aaron

It's an easy fix to get this working. In my version the title variable which you've removed is used as part of the filename for the generated PDF. You'll need to amend line 169 in certificate.html so it doesn't include this variable. See below:

//Original
function generatePDF() {
pdfMake.createPdf(docDefinition).download(title + '.pdf');
}

//Fixed
function generatePDF() {
pdfMake.createPdf(docDefinition).download('RiskAssessment.pdf');
}

Hope that helps!