Forum Discussion
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
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
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
Glad to hear you've got this working Tim!
Hi Lisa, I'll try and have a quick look at you files tomorrow and get back to you.
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;
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
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
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
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 ;-)
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
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
TeresaCONFIDENTIALITY 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.
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
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!
Hi Ryan,
Thanks again for your help, completely missed that. Again thank you for supplying this, I don't have much experience with JavaScript and now I know the basics from this it is really going to help improve things.
This is perfect Ryan. It works great and the files are relatively easy to modify, even with my limited html and javascript experience. Thanks for the resource.
Could someone help me do this? I have a few simple questions.
