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

Glad to hear you've got this working Tim!

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

Hi Lisa, I'll try and have a quick look at you files tomorrow and get back to you.

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 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

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 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 ;-)

Hi Tim,

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

Cheers,

Ryan

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 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,

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.

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

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.

Hi Mary! I got this working absolutely fine in several projects. What do you need?

This code is great and works really well. Is it possible to not use iframes on it though? How do I convert the code?