Certificate of Completion

Hi Nancy,

there have been quite a lot of questions raised regarding this. I have spent the afternoon looking for a solution. I have grabbed bits from other really helpful people on here from forum posts going back 2 to 3 years.

I have just finalised my solution that takes the username entered by the learner in storyline and writes it dynamically to a PDF file that is my certificate. The PDF also has some JS in it to write the current date.

I may not have time this evening to post the solution, but I will do it tomorrow morning for you

That's really great. Thanks very much.

- Nancy

Hi Nancy! Glad that Darren is assisting you here :)

Thanks Darren! Looking forward to your solution.

http://prescript-dev.co.uk/storyline/certificate/story.html

Hi Nancy, here is a quick working demo using a sample image of a certificate from Google images.

EDIT: this only appears to work in IE. Chrome and google dont want to play properly :o(

I'll be back tomorrow morning to explain how it works, and post the code/source files.

This solution is a combination of various solution posted up by other users on this forum that has worked well for our needs so will post the appropriate credit to those helpful souls too!!

Morning Nancy,

Firstly, this forum post had all the answers I was looking for and my solution uses help and advice from these guys, especially Steve Flowers : https://community.articulate.com/discussions/articulate-storyline/example-files-generating-a-certificate-from-storyline

The solution is formed of 2 parts, the storyline module, and a PDF file with some JavaScript embedded. Ive highlighted variables in bold just to try and makes things clearer.

1. In the storyline file, you'll capture the learner's name into a variable (varLearner)

I then have an Execute JavaScript trigger that links to the PDF file (stored in the same directory as story.html). This URL is appended with the varLearner value to form the URL querystring. The script is:

var player = GetPlayer();

var lname = player.GetVar ("varLearner");

window.open("certificate.pdf?theName="+lname);

So, when the user clicks the button to go to the PDF the URL will be
certificate.pdf?theName=Darren Heath

Now for the PDF side of things:

http://www.halnesbitt.com/pages/pdfqs.php provided a solution for dynamically adding data via a QueryString and this works great. Although, as I mentioned yesterday, it works great in IE, in firefox it will work if you have the browser set to view PDFs and not download them. In Chrome the user will manually have to turn off the PDF plugin. Mobile Safari on the iPad is a non-starter too sadly.

1. Create a PDF file for your certificate.
2. In the PDF add a form text box. This will be for the learners name.
3. Go to the properties of that text box, and if you are following the naming protocol from my example call it theName
4. Close the form editing window
5. Open the document JavaScripts window
6. Create a new script called docOpen
7. Paste the following and save the script:
   

   function docOpen(){
//only run the script if the PDF file is being viewed in a browser window
if (this.external)
{
//The whiteList defines which fields are permitted to be changed by the URL.
//If you want all fields to be changed, leave the array empty as in "[]"
whiteList = ["theName"]

//get the parameters portion of the URL and unescape it so we get the spaces and punctuation back
grabParams = this.URL.substring(this.URL.indexOf("?")+1)
//this replaces the stupid +s from the URLEncoding
parametersString = grabParams.replace(/\+/g," ")
//only run the script if there are parameters
if (parametersString.length > 0)
{
//create an array of key/value pairs
parameters = parametersString.split("&")
//loop through the array...
for each (parameter in parameters)
{
//create a 2 element array for each parameter as [key, value]
kvPair = parameter.split("=")
//set the field named "key" to "value"
fieldName = unescape(kvPair[0])
if (whiteList.length > 0)
{
if (whiteList.indexOf(fieldName) > -1)
{
this.getField(fieldName).value = unescape(kvPair[1])
}}
else
{
this.getField(fieldName).value = unescape(kvPair[1])
}}}}}
// call the docOpen() function
docOpen();

I have a field in my certificate that brings in the current date. If you want to do that then add another form text field, call it Today.

1. In the properties, under the General tab, tick Read Only
2. Click on the Format tab, select Date, and then the required date format. I choose dd-mmm-yyyy
3. Go back to your docOpen script that you saved in step 7 and add the following two lines to the end after the last line docOpen();

var f = this.getField("Today");
f.value = util.printd("dd/mm/yyyy", new Date());
4. If you have selected a different date format in the date field properties make sure it reflects here in the script "dd/mmm/yyyy"

Save your PDF file, publish your storyline content. Copy the PDF to the root directory (where your story.html lives). Upload and test.

Ive uploaded my demo story file and a sample PDF certificate using an image from a Google image search.

Hope this works for you. On the forum thread I posted at he top of the message there are some other solutions that people have used. It is 8 pages long but a valuable read.

Hi both,

I recently posted an alternative way of doing this. Have a look at my thread here:

https://community.articulate.com/discussions/articulate-storyline/storyline-2-example-generating-a-pdf-certificate-for-users-who-successfully-complete-a-quiz-html5

The PDF certificate is generated dynamically in the client browser using pdfmake, a javascript PDF library. The certificate produced in this example is very basic but can be customized easily.

I've tested this successfully in Internet Explorer, Chrome, Firefox, Chrome on Android and Safari on iOS.

Ryan

Nice solution Ryan !!

Thanks for sharing everyone! I'm sure this will be helpful to others in the forums.

Thanks! I haven't actually used this in the wild yet as I've been too busy to do thorough testing. 

Thank you both for all the time you've given to this question. I really appreciate the help and support.

- Nancy

Hi Darren,

I know this thread is 4 years old now but I'm hoping you or someone else has worked out a version of this java-light example that works in multiple browsers?

Unfortunately, Ryan's pdfmake example doesn't give me enough flexibility in the visuals of the generated PDF. I really need to take a pre-built branded and image heavy PDF and just drop some text in from the SL variables, which your example above would be ideal for.

One way is to use the PDF widget that the learners can generate and download from within the course: https://cluelabs.com/pdf-maker-elearning-widget.html

This has been very helpful - thank you!

Additional question:  Will this work if I am packaging this Storyline module to be run in an LMS, or are there any changes I need to make?

When I run this module (published for an LMS), it opens the certificate, but the name I entered in Storyline has not been passed to it. It also opens in "Form mode", asking me to fill in the name.

Any suggestions?

Hey there, Caroline!

While Javascript is outside our wheelhouse, I just wanted to stop by and share Owen Holt's Javascript workaround for automatically pulling the name from an LMS!

I hope that helps with your goal, and I look forward to hearing what the community advises!

Hi Katie,

Thanks for the code - I actually tried this, but it doesn't work with our LMS. I am actually more concerned about the following: The file with the actual certificate, whether it is in an html or pdf document, doesn't seem to be housed in the .zip SCORM file that we upload to the LMS. So how does the module actually find it? If I could figure that out, I may be able to figure out how to pass the variable to it.

Any thoughts?

Hi Lauren - One way to do what you require would be to include the visuals of the PDF as a background image using pdfmake and then just overlay the text from SL variables on top of this. See this post: https://community.articulate.com/discussions/articulate-storyline/storyline-2-example-generating-a-pdf-certificate-for-users-who-successfully-complete-a-quiz-html5#reply-334327