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
152 Replies
- RyanLowryCommunity Member
- ArhipAlagozCommunity Member
Sweet! Thanks Ryan!
- JeskoKaltenb161Community Member
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.
- RyanLowryCommunity Member
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.
- StefMladCommunity Member
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?
- RyanLowryCommunity Member
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.
- TristanHunt3Community Member
Bumping an old thread, but this is a great feature!
I just used this on a project to capture a number of long answer questions (for a learner self-reflection) and allow them to download their answers to keep on record.
- KevinBrake1Community Member
NIce work you should provide an example .story file.
Hey Kevin - Are you asking Tristan for an example here? I know that Ryan recently shared an example above.
- KevinBrake1Community Member
Yes, I wanted to see his exact example.
Related Content
- 3 months ago
- 9 months ago