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
- RayHandley-b333Community Member
Hi Ryan, this is all great and works quite well to print or open a PDF. Have you ever extended this to the ability to automatically email this PDF to a supervisor/manager email?
- AishaConner-GatCommunity Member
FYI This option for certificates kept breaking my google Chrome Version 59.0.3071.115.
Hi Aisha,
Have you confirmed that you're testing it by uploading to a web server or LMS? The options of a certificate may not work if you're testing it locally due to security restrictions.
- AishaConner-GatCommunity Member
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.
- StefanGunaratneCommunity Member
Aisha, what error message/s are you getting? are you able to post a screenshot or share your SL file?
Thanks Aisha - glad you found another method that would work out for you!
- PaulKnights-45cCommunity Member
Brilliant stuff!
Glad this was helpful to you as well Paul :)
- NormanLamontCommunity Member
Hi. I'm trying to get Ryan's basic file working on my server but it's the first time I've tried working with web objects and I'm puzzled by this bit of Ryan's instructions:
To get this example project working on your own machine you will need to delete and then re-add the web object selecting the certificate folder as the source.
I understand that it has to point to the right place but when I try to point it anywhere, Storyline keeps telling me it can't create the web object because there's no index.html in that folder.
Say my output folder (where story.html sits) is 'myoutput' and certificate.html is also in that folder - is that the folder I'm looking for? Do I have to create a blank index.htm in that folder? Or do i need myoutput/certificate and create one in there?
- MichaelAmbechCommunity Member
Hi Ryan,
I know this is an old post but thought I might give it a try anyway. Your code is working great on my end. Good job!
I have a few variables in my course (True/False). Based on user choice these variables represents certain parts of the course that have been done/not done. I would like the done parts to show up in the certificate.
I have a variable named CameraControlDone. I get this from the player as demonstrated in your javascript
// Retrieve the status camera control variable
var cameracontrol = player.GetVar("CameraControlDone");According to my limited javascript skills the following should display the camera control text if CameraControlDone is set to true (code placed in content section).
// Include Camera control
if (cameracontrol = true) {
text: "Camera control",
fontSize: 16,
alignment: 'center',
margin: [0, 0, 0, 0]
},However clicking the Download button doesn't do anything. It works without this code though. Any ideas?
Best regards
Michael
- RyanLowryCommunity Member
Hi Michael,
If you replace this:
// Include Camera control
if (cameracontrol = true) {
text: "Camera control",
fontSize: 16,
alignment: 'center',
margin: [0, 0, 0, 0]
},with this:
// Include Camera control
(function () {if (cameracontrol) {return {text:'Camera Control', fontSize: 16, alignment: 'center', margin: [0, 0, 0, 0]}} else { return null; }})(),It should work as desired.
Cheers,
Ryan
- DiarmaidCollinsCommunity Member
Hi Ryan. This PDFMake thing is simply amazing. A really clever solution.
I just had a couple of quick questions if you had the time to respond?
You mention the following code (which works perfectly) as a solution to Michael's problem above:
// Include Camera control
(function () {if (cameracontrol) {return {text:'Camera Control', fontSize: 16, alignment: 'center', margin: [0, 0, 0, 0]}} else { return null; }})(),There's no declaration there that the variable
cameracontrol
has to be TRUE in order to display the text - is it just assumed TRUE equals display text and FALSE equals ignore text?What if one wanted two or more items to be visible/hidden dependant on the one variable?
Currently, I have two duplicates of that above code displaying two lines, themselves two variables,
List_A_Option_01_TITLE
andList_A_Option_01_INFO
. The visibility of both TITLE and INFO is dependent onList_A_Option_01
being TRUE.(function () {if (List_A_Option_01) {return {text: List_A_Option_01_TITLE, style: "title"}} else { return null; }})(),
(function () {if (List_A_Option_01) {return {text: List_A_Option_01_INFO, style: "info"}} else { return null; }})(),How does one combine these two functions into one?
Also (apologies), and this what wrecks my head testing out variations of the Certificate Template you have supplied, I have managed to get the cert to work in previous projects by naming the
html
file to whatever, say, certificate.html, but now, with this project, I rename my file to ChecklistCOMPILE.html and when I try to import the webobject it says there is no index file and I cannot get it to work?What stupid thing am I doing stupidly?
Thanks Ryan for sharing an update to the code here!
Hello Apoorv,
Did you mean that you had difficulty with the attached zip file that you replied to? I'm attaching here in case that's helpful.
Looks like Ryan has still been replying here. You are certainly welcome to reach out to the user directly via the 'Contact Me' option on the user profile if you do not hear back soon.