Storyline 2 Example - Generating a PDF Certificate for users who successfully complete a quiz

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

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

date = mm + '/' + dd + '/' + yyyy;

For those of you who work in an international setting I have the following UTC time code running in my certificate.html:

// Get todays date in format dd/mm/yyyy
 var today = new Date();
 var dd = today.getDate();
 var mm = today.getMonth() + 1; //January is 0!
 var yyyy = today.getFullYear();
 if (dd < 10) {
 dd = '0' + dd
 }
 if (mm < 10) {
 mm = '0' + mm
 }
 date = today.toUTCString();

And further down when defining the body of the document:

 // Include date
 {
 text: '\n\n\n\n\nAwarded on: ' + date,
 fontSize: 16,
 alignment: 'center',
 margin: [0, 0, 0, 0]
 },
 ]
 }; 

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

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

Ryan;

Just wanted to let you know that I have this working well now.  thank you so much for this code.

I have a storyline block that pulls learner name and date of completion from the lms and passes it into your certificate.  That file was placed into a rise program as a block.  The rise module was published as a scorm package and put into moodle where it functions perfectly.  this allows us to provide custom pdf certificates of completion in Rise pulling lms data when packaged as a scorm and with a simple input when published to web. 

I really appreciate your work on this.  Thank you so much.

Tim