Hi all,
\n
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.
\n
You can see an example at http://rlowry.github.io/certificate/story.html
\n
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.
\n
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.
\n
The generated PDF certificate is very basic at the moment, you'll need to refer to the pdfmake documentation to update the design.
\n
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.
\n
UPDATE 2: I've updated the attached source files so they now use the latest version of pdfmake (v0.1.27).
\n
Cheers,
\n
Ryan
Hi all,
\n
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.
\n
You can see an example at http://rlowry.github.io/certificate/story.html
\n
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.
\n
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.
\n
The generated PDF certificate is very basic at the moment, you'll need to refer to the pdfmake documentation to update the design.
\n
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.
\n
UPDATE 2: I've updated the attached source files so they now use the latest version of pdfmake (v0.1.27).
\n
Cheers,
\n
Ryan
\n
Hi Matthew,
\n
To be honest I didn't really spend any time looking at why this didn't work with the Flash version as we have just been using the HTML5 output. I've had a quick look and the following tweaks sort it out...
\n
In my example I hid the web object that contains the certificate code off the project canvas. This works fine with the HTML5 output but the web object is not included in the Flash output if you do this. The easiest thing to do is to make the web object very small and hide it behind another element on the project canvas.
\n
Also you'd need to modify / remove the little bit of JS that i use to retrieve the title of the project.
\n
// title = window.parent.story.title;
\n
Once these changes have been made it works fine for both the HTML5 and Flash versions. I'll update my original post sometime soon to reflect these changes.
\n
Cheers,
\n
Ryan
\n
Hi Matthew,
\n
To be honest I didn't really spend any time looking at why this didn't work with the Flash version as we have just been using the HTML5 output. I've had a quick look and the following tweaks sort it out...
\n
In my example I hid the web object that contains the certificate code off the project canvas. This works fine with the HTML5 output but the web object is not included in the Flash output if you do this. The easiest thing to do is to make the web object very small and hide it behind another element on the project canvas.
\n
Also you'd need to modify / remove the little bit of JS that i use to retrieve the title of the project.
\n
// title = window.parent.story.title;
\n
Once these changes have been made it works fine for both the HTML5 and Flash versions. I'll update my original post sometime soon to reflect these changes.
\n
Cheers,
\n
Ryan
