Free Print Certificate Template: Using JavaScript & Storyline Challenge #132

A couple of years ago a client requested a printable certificate option for a Storyline assessment module I was designing. Since Storyline does not have that option, I had to scramble to create the feature. Of course, I did a google search first, and found many different tutorials on the subject.

It turns out there are various ways to create a printable certificate, using JavaScript with Storyline! This example is just one way to go about it.  

Preview: Click the image below to view the demo of the Print Certificate template in action!

Launch Presentation

 

Download: The Zip file download contains the .story file, the printCertificate.html file, and the Storyline output folder: http://tracycarroll.net/Freebie_Print_Cert.zip

Customize:  To customize the look of the Certificate, edit the printCertificate.html file with any html editor, such as Dreamweaver or Notepad.

Remember: Be sure to insert the printCertificate.html into the Storyline output folder after you publish your Storyline module.  Otherwise, the print certificate function will not work! (See the example Storyline output folder in the zip file you downloaded).

22 thoughts on “Free Print Certificate Template: Using JavaScript & Storyline Challenge #132

  1. Hello,

    I’m french (so excuse for my english)and we use many characters with accents.
    when I type the text in the field “Type your full name” characters with accents are poorly printed in the pop up page (for exmple “é” become “Ã ©”).
    Is there a line of code specified in the file “PrintCertificate.html”?

    Carine

    • Hi Carine,

      Thank you for your question! The problem seems to be associated with particular fonts. I would change the font in the Storyline presentation to a font that you know works well with French accent marks, and see if that solves the problem.

      I found a discussion of this problem with printed certificates generated with the Moodle print certificate add-on at the following site: https://moodle.org/mod/forum/discuss.php?d=230356

      The discussion recommends using the “freeserif” font. I’m not sure if that helps or not, but I would love it if you let me know your results!

      Tracy

    • Hi Helena,

      Thank you for your comment!

      I’m not sure what the issue is from your comment:
      “I am copying the html print certificate file to the output (but its not copying)”

      Are you saying you cannot copy the printCertificate.html file? You should be able to right-click on the printCertificate.html file and copy it, then paste it into the output folder.

      If not, then you could open the file with Notepad, or any html editor, then select the contents and copy them to another text document.

      I hope this helps.

      Tracy

      • when i copy the print certificate html file the paste function isn’t enabled. Where exactly in the output folder is the information suppose to be copied?

        Do I have to republish the file?

        • Sounds like you haven’t unzipped the Freebie_Print_Cert.zip folder first. You’ll need to unzip the folder, then open the extracted folder. Then you will be able to copy, paste, and/or edit the print certificate html file.

  2. Good morning,
    Is there a video on how to make this work? I am still not getting this work. I have copied the print html file into the published output folder and no success.

    I think I need a visual, so that I can see exactly what I am doing wrong.

    Or is this an issue with the CHROME browser?

  3. Hi Helena,

    I uploaded this storyline project to Articulate online and was not able to print certificate. You say to insert printCertificate.html into the storyline output folder after you publish the storyline module.

    My question…Where is the storyline output folder?

    Thanks a lot.
    Robert

    • Hi Robert,

      Thank you for your question! I’m assuming the question is for me (Tracy), rather than for Helena, who has asked several questions about this Storyline template.

      The Storyline output folder is the folder that is produced when you publish a Storyline project. The folder will be wherever you have placed it on your computer when you published the project (My Articulate Projects, My Documents, Desktop, etc.). Right after publishing the project, you should insert the printCertificate.html document into the Storyline output folder on your computer. Then you upload the output folder to Articulate Online, or whatever service you are using to host the files online.

      If you want to insert the printCertificate.html document into your output folder after you have already uploaded it to Articulate Online, you will need to contact Articulate Online Support to determine how to do that. (I don’t use the Articulate Online service, so I don’t have instructions for how to access the output files on Articulate Online.)

      Tracy

  4. Hello Tracy,

    From all the solutions for the certificate I ended up with yours.

    I didn’t want to include the date or give the user the option to change his name, so I made the appropriate changes to my story file.

    I wanted to have Greek characters so I modified your code a bit.

    In the javascript trigger the code is like this:

    var player = GetPlayer();

    var theName =(
    player.GetVar(“username”)
    )

    var enName = encodeURIComponent(theName);

    var theDate =(
    player.GetVar(“DateValue”)
    )

    var urlstring = (“printCertificate.html?print=” + enName + “&” + theDate);

    window.open(urlstring,”_blank”,”width=800px,height=600px,menubar=no”);

    /*—————————————-*/

    And your code in the printCertificate.html is like this (I am including only the line I changed):

    document.write(” + decodeURIComponent(learner_name) + ”);

    /*—————————————-*/

    Now I can print the certificate on Firefox, IE, Opera and Chrome.

    I used decodeURIComponent cause at first I couldn’t print if I used Greek letters.

    Then the problem that came up was that despite printing on Firefox and IE, Chrome and Opera encoded the letters as %20%21 etc.

    So all I had to do is to create a variable that would encode the user name before putting it to the url as a parameter. (var enName = encodeURIComponent(theName);)

    Hope this will help others too!

  5. Hi Tracy,

    First, thank you for creating this; it’s a wonderful resource and certificates really provide a sense of accomplishment for students; an “end goal” sort of speak.

    The question I have is this: is there any way to place a .png file as the “background” and then have the text fields print “over” it? I have a great looking certificate in AI that I would like to use, but I’m not sure how to do that.

  6. Hi Tracy, sorry to trouble you but I wonder if it would be possible to insert a background image on the certificate and also would like the certificate to show the score of the result slide. I have been trying all day long making alterations and they are working fine. I’m just stuck with these to items and I really would appreciate some help. Thanks in advance for your reply!

    • Hi John,

      Yes, I think both things are possible, but unfortunately I’m note a coder or programmer myself. I tried to figure it out today, but I just don’t know the javascript required! You would need to put the learner’s score variables [%Results.ScorePercent%% (%Results.ScorePoints% points)] from the results slide on to the certificate slide, which is easy enough, but then you would need to add a javascript trigger to the print.html file to get the score results variables to print out. For the background image, of course you would need to upload the image to the output folder, and then you would need to put another javascript trigger in the print.html file to tell Storyline to use that image as background for the certificate. I would go to the Articulate E-Learning Heroes community and ask how to do this–I’m pretty sure they will come up with an answer quicker than it would take me to try to figure it out!

      Here are a couple of links I’ve given out before, concerning editing course completion certificates: https://support.edubrite.com/oltpublish/site/cms.do?view=custom_certificate & https://community.articulate.com/discussions/building-better-courses/create-a-course-certificate-in-storyline-with-java-and-html

      Hopefully they will be useful to you!

      Best regards,
      Tracy

  7. Hi Tracy, thanks for reaching out and spending time trying. Appreciated! I’ll try to set some things up today and may post a request on E-Learning Heroes! We’ll get there in the end and I will share it as soon as I have managed to get it right. Best regards, John

Leave a Reply

Your email address will not be published. Required fields are marked *