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
- RyanLowryCommunity Member
I've updated the attached files and my linked demo to work with both the Flash and HTML 5 output.
Thanks Ryan for the updates and additional work.
Hi Helena! Looks like Ryan shared a link in his initial post and the site seems to have their own docs. This is not an Articulate product.
- MikeTobiasCommunity Member
This is awesome, going to file the info for future projects. Thanks Ryan!
Then there are reasons threads get revived :) Glad to hear it Mike!
- janisstarsCommunity Member
Hello, community members!
Ryan, thank you very much for the example!
I am fairly new to articulate and not very familiar with programming. Could anyone please give me a hand by telling, where can I find the actual code which can be modified (so I change the text which is on the certificate:
"Organisation name,
this is to certify that,
successfully completed the following activity..."I would like to just copy and paste the original concept of the certificate, but need to add Organisation name etc...
Trying to solve this puzzle..
Thank you very much!
- janisstarsCommunity Member
Hi again! I think I found the html file that I need to edit! Just had to open in notepad ++
Will try to do that!
Have a good day everyone! ;) - janisstarsCommunity Member
Hi Ryan,
Yes, thank you very much for the reply. I did work it out theoretically and will try to edit the html file to insert the text and maybe new variables from the storyline which i need - test results for example (though it requires some decent programming skills which i am not very familiar with).
Will see how it works with inserting and re-inserting the web object also..thought just copying the web object from your file and inserting it into mine will work..will see.. Love challenges.
Thank you very much indeed and have a good day!
- RyanLowryCommunity Member
Hi Nicky,
It's possible to set a background layer in the document definition. This can contain any content including images.
See bold section below.
Note that images are included as data uri's with images encoded as base64 strings. You could use the converter here to convert your image to a base64 string.
(The dimensions set below are the size in pixels needed to cover the full background of an A4 page).
var docDefinition = {
// Set page size
pageSize: 'A4',
// Set document orientation
pageOrientation: 'landscape',
// Set page margins
pageMargins: [0, 110, 0, 100],
// Define document background
background: [
{
image: 'data:image/jpeg;base64,/9j/4QAY...',
width: 841.89,
height: 595.28
}
],
// Define document header
header: [
{
text: 'Organisation Test\n\n',
fontSize: 30,
alignment: 'center',
margin: [0, 40, 0, 40]
}
],
//doc definition continues here...
};- RyanLowryCommunity Member
I've put together a very quick example with a certificate image I pulled off the web.
http://rlowry.github.io/certificate-background/story.html
Certificate html attached.
- NickyACommunity Member
Awesome! I found this resource but was missing the URI convert step and couldn't figure out how to properly reference the image. Thanks again!
- RyanLowryCommunity Member
Hi Wes,
No problem, glad to hear this is useful.
Web objects are included in the published output so this isn't an issue.
You can find them in the following folder of a published project.
/story_content/WebObjects/
Ryan
- wessykesCommunity Member
Boy that was quick Ryan :)
After I typed the question I noticed the web objects were being passed in a folder then promptly deleted my question. You beat me to it :)
Thanks for your reply.
Regards
Wes