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

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.

Stef Mlad

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?

Tristan Hunt

I can't share my .story due to the IP but essentially I  just stored the answers to the questions in variables %Answer1% through to %Answer10% and in the html file included the questions and pulled in the answer variables. 

 // Question 1
{
text: 'This is where I put my question',
fontSize: 20,
alignment: 'left',
margin: [0, 0, 0, 10]
},
// Answer 1
{
text: Answer1,
fontSize: 12,
alignment: 'left',
margin: [0, 0, 0, 30]
},
Nancy Woinoski

I am using PDFMake in a course I'm developing in Articulate 360 and am finding that the  PDF is not created when I update the course to Articulate Review.

It works when I upload to Articulate Online, SCORM Cloud and my own web server but not Review.

Has anyone else encountered this issue? 

Ashley Terwilliger

Hi Nancy and Tristan,

I'm not familiar with PDFMake, but would love to try and help! Can you tell me a bit more about what's happening (or you'd expect to be happening)? 

If you can share a copy of it with our Support engineers we're always happy to take a look! Upload a copy of your course here and a link to the Review hosted version here. 

Nancy Woinoski

Hi Ashley, PDFMake is a JavaScript library that enables you to create downloadable PDF files in your browser.  When used with Storyline it is a great way to capture user input, pass it to an html doc which is then converted to a downloadable pdf .

To do this you have to create an html doc that gets the player vars from  Storyline, formats the content and references the js functions that create the pdf.  You then insert the folder containing the html doc and the JS funtions  as a webObject into Storyline.  

There is a trigger in Storyline to run a JS script which runs the JS functions to create the PDF and download it to the user's client.

So to make a long story short, when you execute the trigger in the Review hosted version nothing happens.  When you execute the trigger in SCORM Cloud, Articulate-online and from a website, the pdf is downloaded as expected.

 

 

 

Nancy Woinoski

Interesting!  

So I guess that means I would have to change the code to get it to work in Review and then change it back again when my client hosts the course on their LMS (which is Moodle).  I'm not sure I like that. It is just one more point in which to introduce errors.

 

Ashley Terwilliger

Thanks for the explanation Nancy! Could you share that sample with our team so that we can take a look? If it's behaving differently in Review than SCORM Cloud, AO, etc. that's something we'd want to figure out and share with our team. Let me know if you can send it along here (even just a sample/mock up project!). 

Aisha Conner-Gaten

Hi Ashley, I was using a web server. It seemed to only happen on that version. No errors except the "Chrome Shut down unexpectedly" message and I had to restart.

I ended up doing a different certificate method as mentioned here:http://tracycarroll.net/free-print-certificate-template/

 

It worked for me.