Storyline 2 Example - Generating a PDF Certificate for users who successfully complete a quiz
Aug 27, 2015
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
Hi Dan,
As you suggest it is probably an IE11 configuration issue on these particular machines.
This method works without issue on my machine with IE11 on Windows 7.
Do you have a sample storyfile I could have a look at?
One other thing, are the users on the government machines accessing the content over an intranet? I've had problems in the past with a compatibility view setting in IE that forces all intranet content to be viewed in compatibility view. I realise you have no control over this setting but it could be the cause of your problems.
Cheers,
Ryan
Hi Ryan,
I suspect that all the issues I'm seeing on IE is related to their flash player configuration, in which case I don't think there is anything I can do about it. I do wonder if it would make any difference to have the administrator add the course url to the exception list.
Regarding your question about users accessing info over the intranet, yes they are. I will certainly check on the compatibility view settings and see if that will make a difference.
One other point I've been curious about, you had mentioned in your post that this method has to published to a server for the script to function. I've always been able to publish to my local hd and able to see the result. Is this due to my less secured settings on IE?
My SL example is attached.
Thank you for your assistance,
dan
Hey Dan,
Had a quick look at your file and all looks good. Have you got the users to try accessing the html5 version? It seems to work in IE11 despite it not been a browser officially supported for html5. Bare in mind I've only tested a very basic file.
My point about publishing to a server only applies to Chrome. Storyline automatically disables web objects and custom javascript when content is viewed locally in chrome as it is not supported by the browser.
Hope you find a solution. Not sure I can help any further. If you do figure it out please post back and let me know.
Cheers,
Ryan
Hi Ryan,
Thank you very much for your time. I will certainly share and post any info I discover. I really do like your method for creating a pdf certificate and I hope that I will be able to use it with our courses.
Best regards,
dan
Hi Dan. To quickly build on what Ryan brought up about viewing content locally... we don't recommend it. If you view an Articulate Storyline course on your local hard drive (or send it to someone else to view on their local hard drive), you'll encounter security restrictions from the computer, web browser, Flash Player, and network that'll cause various features of your content to fail.
So we always say have a final look at it in its intended final destination (web, LMS, etc)! Here's our knowledge base article about publishing and sharing your project, including ways to view the content offline if you need to do so.
Hi Ryan,
Although I have not found a solution to the problem of accessing the course certificate when using IE in a citrix environment, I have determined the cause to be the "var Player=GetPlayer" script. Please see my detailed post at https://community.articulate.com/discussions/articulate-storyline/getplayer-script-does-not-work-in-citrix-environment.
Thank you,
dan
Hi Ryan,
Many thanks for this excellent solution.
I was wondering if you could please share the Storyline file for this certificate?
I can't get the certificate background image to generate.
Kind Regards,
Greg
Hi Greg,
No problem, see attached zip.
Cheers,
Ryan
Hi Ryan,
Thank you so, so much - will let you know how I get on.
Have a great day.
Many thanks,
Greg
Thanks Ryan for coming back to share the file for Greg.
Hi all, I am using this for a course that clients will view without any internet access. I am publishing to CD and when I launch the Launch_Story.exe file and get to the last screen with the download button....to no avail----no pdf instantly downloads. I took the exact Storyline template from the original post and published it to test. Any ideas/thoughts why its not working for me?
Hi Makayla,
I know the original example mentioned a Javascript behavior and a web object, the latter of which would need internet access, so that sounds like where you're run into a hiccup. Since the Javascript is outside my area of expertise and support it may also be worth messaging other users on this thread directly using the "contact me" button in case they're no longer subscribed to this discussion.
Would this work for a course that needs to be published for CD? The clients will be taking it completely offline.
Hi Makayla,
Based on your other post here, it sounds like you would be ok with a final slide that acts as a certificate and that users could take a screenshot of? If so, that would likely be the easiest way and would ensure that it would work for them offline as it's not going to rely on generating that report.html file.
A screenshot would definitely work if it could happen by trigger. The demographic of clients require us to be VERY simplified. Instructing them to open a separate screenshot program or even pushing the PrintScreen button and then needing to explain what to do after that is too much for them. Is there a function we know that will capture the image on the screen and download/save it as a png/jpeg? I think my best bet is having a trigger that downloads a txt file that has the "certificate" language on it. However, I would need it to immediately pop up in a separate window so that they are not clueless searching for the file on their hard drive. Technology is hard haha especially trying to find the write technology path to cater to people who don't use technology! hahaha
Hey Makayla,
I totally understand that - I tech support my mom all the time. It's hard. ;-)
Happen by trigger <- That's the part that is likely through the Javascript which is well beyond my expertise (and not something our team can offer support for) but I don't doubt that it's possible!
This forum discussion is a bit older, so I may also suggest writing a new post with the specifics of what you're looking to accomplish - that may get a bit more eyes on it. Also feel free to reach out for help in the Building Better Courses side of the forums as folks tend to share more design and how to ideas there. Also, there are a few users that you'll see throughout these discussions who seem to be "Javascript experts" you could also message them directly using the contact me button on their profiles to see if they can offer you some one on one help.
Best of luck with your project!
Hi there.
Does PDFmake not work anymore? Their website does not seem to work (http://pdfmake.org/).
I'm looking to create a certificate of completion for one of my courses. This is exactly what I was looking for; user fills out their name, takes the quiz, then generate a PDF of the certificate. But, now I don't know the best way to edit the "certificate.html" to customize it for our branded certificate since PDFmake does not work. I'm not very familiar with code. Does anyone have any ideas or know of any other tutorials out there that will generate a PDF of the certificate?
Hello Arhip - Not a site I'm familiar with. Hopefully someone in the community will be able to chime in and assist you here. I saw another thread here with a similar conversation. Not sure if that will assist you.
Arhip, the link above seems to circle back to this post but you can search pdfmake in the discussions. I did so but didn't see any update on the status. I sent a message to Ryan to let him know there were some additional questions that he may provide answers to. I don't feel completely confident in using this feature if pdfmake is not available in case Ryan or anyone else needs (or wants to) make updates, but I really have no idea about that. Maybe there is an alternative to pdf make? I did read about customizing the background of the certificate with a graphic and adding a bit of additional information such as the user's score somewhere in this thread.
It looks like the PDFMake website was temporarily down but it's now back up so the documentation is available again. It should contain everything you need to generate your own custom certificate.
PDFMake is one of several Javascript PDF generation libraries. You could swap in jsPDF for example.
Sweet! Thanks Ryan!
Dear Ryan,
seems like the PDFMake Project was updated and now also include .jpg and .png functionality (link). However, even if I do not use the image functionality and only replace your pdfmake JS files by the 4 new pdfmake JS files, the script does not work anymore. Maybe you have an idea? Would be really great!
Thx.
Hi Jesko, thought i'd reply here rather than by email in case this is useful for someone else.
I've attached updated source files that make use of the latest version of PDFMake (v0.1.27). This seems to work fine for me. Please note I've only tested in Chrome and IE.
I don't think anything has really changed with regard to images. They still have to be base64 encoded as far as I can see. See my previous post here for details.
Hi Ryan,
I'm not sure what I'm doing wrong, but I can't get this to work.
I uploaded the certificate folder into the same directory as my 'Storyline' subdomain (where I have my published story stored). I created a new web object with the link to: http://www.MYWEBSITE.com/subdomain/certificate .
It still is not working, do you know why this may be? I'm publishing as LMS with SCORM 1.2.
All the best,
Stef (:
Update: tried publishing as 'Web' and it is still not working
Update 2: Here is the text given within the WebObject:
403 - Forbidden Error
You are not allowed to access this address.
If the error persists, please contact the website webmaster.
If you are the webmaster of this site please log in to Cpanel and check the Error Logs. You will find the exact reason for this error there.
Common reasons for this error are:
Incorrect file/directory permissions: Below 644.
In order files to be read by the webserver, their permissions have to be equal or above 644. You can update file permissions with a FTP client or through cPanel's File Manager.
Restrictive Apache directives inside .htaccess file.
There are two Apache directives which can cause this error - 'Deny from' and 'Options -Indexes'."
My permissions for the subdirectory are 755, so I'm not sure why this is happening. Any ideas?
Hi Stef, You shouldn't need to upload the WebObject separately. When adding the WebObject select the certificate folder on your local file system. This folder will be automatically included with your project on publication.