Storyline 2 Example - Generating a PDF Certificate for users who successfully complete a quiz
Aug 27, 2015
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
Thanks Ryan. I understand now, and I've got it working. I really appreciate you answering so quickly!
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
Hi Michael,
If you replace this:
with this:
It should work as desired.
Cheers,
Ryan
Thanks Ryan for sharing an update to the code here!
Hello Ryan,
I was trying your certificate.html file but it's not working.
When I click on my download button it shows an empty pdf.
Can you please share the .story file which includes the js code to download pdf.
Thanks
Apoorv
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.
Hi Apoorv,
The zip file attached to the first post in this thread contains a working .story file.
You could also check the browser console to see if you are getting any error messages when clicking the download button and report back here.
Thanks,
Ryan
I have been trying to add my own background but every time I put in the code or remove the logo code it ceases to download??
Any idea what I'm doing wrong?
Just wondering Ryan will your PDF example work if I don't have any questions, I just want a certificate if they completed the eLearning to the last slide? Do I have to do anything differently?
Yes it will work. In my example the download button is only shown on the success layer of the results slide. You could move the download button to any slide within your project.
Hi all-
First - Ryan, thanks so much! This is a great resource and your continued support for everyone is amazing. I am a bit new to the coding/java side of things so please excuse my newbie question. I can't, for the life of me, figure out how to modify the certificate image. We have a PDF version of a certificate that I am trying to make this work with, and I'm really struggling. I was able to copy your file (thank you!) into the project and it does generate the basic certificate as you intended. Now, I just need some direction in getting our PDF template as the background!
Any help from anyone would be amazing. We are on a tight deadline and I've been wracking my brain for hours now.
I am attaching our certificate for you all to see what we're looking to fill (simply name and date, that's it!)
Best,
Logan
Hi Logan,
I've mocked up a quick example using the blank PDF certificate you supplied.
I exported the PDF as an image and converted it to a BASE64 string.
I then used this as the background for the certificate.
When you generate the certificate it should produce the attached PDF.
I've attached the source files for the certificate so you can give it a go.
Hope this helps!
Cheers,
Ryan
Oh man, Ryan, this is sweet! THANK YOU! I will try it shortly, but one quick question - the date is off - 05/06/2018 - any idea why?
No worries! The date is in UK format DD/MM/YYYY e.g. 5th June 2018
You'll need to edit line 42 if you want to switch to another format e.g. MM/DD/YYYY
Ahhh, that makes sense! Thanks again, looking forward to implementing this. You rock.
Odd, I edited the certificate.html file with that line change and it's still spitting out 05/06/2018.
Did you delete and re-add the web object? You need to do this every time you make an edit.
That was the trick I needed! Thank you, thank you!
For those of you who work in an international setting I have the following UTC time code running in my certificate.html:
And further down when defining the body of the document:
Ryan/Ashley;
I tried to push the envelope with this today and have a question.
I published a storyline 360 to articulate online and put it into Rise as a Storyline block to see if I could get a certificate into Rise. It worked, kind of. It pulled default data for the variables rather than any input data. so it is getting something from the storyline file, it is just not updating the variables when I enter in a new name for example.
Any thoughts? I think this has great potential. Thank you for your work.
Tim
Hey Tim,
Does the Storyline Block contain more than one slide? Does it have one slide for the learner to enter their name, and another slide to generate the certificate?
Also, are you using javascript to generate the certificate?
Hey Alyssa;
It is just one slide with an entry box for the name and then the javascript discussed in this thread to generate the pdf certificate. The javascript seems to be using the default storyline variable values rather than accepting the input from the slide.
Tim
Hi Tim,
Just did a quick test. Published to Articulate 360 and added as a Storyline block to Rise. All works as expected. Does your certificate generate properly when not added to a Rise project?
Cheers,
Ryan
Ryan;
I changed so many things trying to figure this out I was not sure where I left off. Thank you for the test and letting me know it can work. After realizing I had to go back and start over, I was able to get this to work with the changed logo and text perfectly.
This will be a wonderful addition to my rise courses that do not go into an LMS.
This is such a great service you have provided.
Thanks again.
Tim
Ryan;
In trying to push this one step further, what changes would be needed to the code to access the LMS data for the users name rather than them inputting it? Would a storylline block published to articulate 360 then imported into a rise program that is then published as a scorm package even be able to access the lms data? I know that is a lot of steps but it would be my end goal. Then a single scorm file would be completely self sufficient regardless of what lms it was loaded onto.
Tim