17 Replies
Darren Heath

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

Darren Heath

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!!

Darren Heath

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.

Ryan Lowry

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

Rudy Valentine

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.

Caroline Silver

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?

Ryan Lowry
Lauren Corlett

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.

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