Example files: Generating a certificate from Storyline

May 09, 2012

Steve Flowers
By Steve Flowers

This example demonstrates how you can take user input and generate a certificate for printing. Any Storyline variable or score can be used to generate the output. The file and file add-ins are both simple and straight forward. This will only work in the Flash based output. This will not work in the iOS output or HTML5. 

To replicate this on your end:

1) Modify the story file to your liking.

2) Extract the add-in zip file above (certificate.html and certificateBG.gif)

3) Copy these two files into your published output directory. You'll need to do this each time you publish.

This is a really basic example. You really can do quite a bit with this including adding a print button, extra fields, collecting values from the LMS like the user's first and last name. 

** I noticed a bug when playing with this file setup. I initially thought I would be able to include the certificate files as resources to avoid copy / paste surgery after publish. Unfortunately, Storyline mangled the HTML file on publish. Will be submitting this as a bug.

236 Replies
Curtis Kynerd
over 11 years ago08/28/12 at 7:00 am (UTC)

I have tried to make this work in my LMS to no avail.  I get a message that says this file cannot be found.  I have been experiencing other network or LMS issues lately and wonder if the two are related.  Could there be issues related to IE security settings, or version differences in Java that might be affecting things?  Attached is my version of the Certificate.  I am grateful for any direction or advice.  Thanks.

Daniel David
over 11 years ago09/20/12 at 6:44 am (UTC)

Hi,

I am trying to get his work, but can't even make Steve's files work.

This might be silly but which is the "published output directory"? Since SL saves one file and uses only that how can I get it to use a certificate ".html file? I guess I have to break the file, publishing it to web maybe? But how do I convert i back to ".story" file to be able to use it again?

I have no IT background whatsoever, so to change html files or javascript I would have to get a professional to come and help me but I would prefer to find a solution for this myself.

Dave Fulle
over 11 years ago09/20/12 at 6:54 am (UTC)

Hi Daniel,

I'm a little confused when you say SL only has one file. You'll need to publish the course (to LMS) and then your published output directory is the folder that is created from the publish. There are a bunch of files created. You'll need to put Steve's HTML file and Certificate graphic into that output directory.

I had to go into your HTML file, change learner name get VAR from "learner" to  "TextEntry7"  since this changes for me with every course created. I also had to change the file name of the graphic from "certificateBG.gif" to "CertificateBG.gif" to match what the HTML file was calling.  After doing that, the name was called in properly, the background displayed, and everything printed (on the LMS - not locally)!

You can edit the HTML file in Word, notepad++ or something similar - you shouldn't need a "professional".

I hope this helps.

Nancy Woinoski
over 11 years ago09/20/12 at 7:48 am (UTC)

Hi Daniel - Storyline has one source file this is the .story file but when you publish your course, a folder is created in Documents/My Articulate Projects folder the has the same name as the title of your course. This is the published output directory that Steve is referring too. This output directory contains all the folders and files that the course needs in order to run.

If you look in the folder you will see  story.swf, story.html files, a story_content folder and a mobile folder among others.

Steve created a special html page called certificate.html that is not a native part of Storyline so when you publish Storyline it does not get included in the published directory automatically. You have to save a copy of it and then place it in the published folder after you have published your course (same is true of the CertificateBG.gig that he is using in the certificate.html page).

In the sample .story file that Steve created, he put some JavaScript on  a button ( I think the button is called  Generate Report ) that basically says open this certificate.html page and make it a fixed size) when the user clicks the button.  You will have to include this JavaScript on a button in your course if you want to use the certificate.html file.

The certificate.html page contains JavaScript code that says to get a variable called learner from storyline and display it in certificate.html.   The variable "learner" is just a text entry field in the .storyline file.  When you add a text entry field to a screen in Storyline, it is given a default variable name, TextEntry, TextEntry1, TextEntry2 etc so that each one has a unique name.

You can change the name of these default variable names to give them more meaningful names - that is what Steve did in his example. In his .story file, he changed the name of Text Entry field to learner. 

So in your course, you need to add a text entry field where the user can enter his or her name. This will have a default name like I just mentioned.  So now you have 2 options, you change the variable name of the text entry field you created to learner, or you can edit the certificate.html file (using notepad  like Dave suggests) and change the  learner to TextEntry or whatever the default name is for the text entry field you created.

Sorry, this is a little long winded but I hope it helps.

Daniel David
over 11 years ago09/20/12 at 8:54 am (UTC)

Thank you Dave & Nancy,

It is a lot clearer now. I changed the file name to match what the .html refers to.

I published the file to LMS and copied the files in the published output directory. I have made the changes about the learner name, but now how do I uploaded it to Articulate Online? Online only accepts one file so now I have to change this Published output directory and all it's content into one file that Articulate Online accepts or SL opens.

Steve Flowers
over 11 years ago09/20/12 at 9:54 am (UTC)

For Articulate Online, you can either use the direct publish option or configure SL to enable manual upload. This will generate a .SL file. Change the extension to .ZIP, unzip it. Then do your magical surgery magic (add your post publish files). Then rezip, change the extension back to .SL. Manually upload this package to AO and Bob's your uncle.

Daniel David
over 11 years ago09/25/12 at 5:35 am (UTC)

Hi,

Asan addition to Steve's solution I have found another one based on the screenerJustin Wilcox recorded for Quizmaker (all credits to Justin). The principle isthe same. I have tested it and it works like a charm in storyline.

 

Nowthe "report.html" file was modified by somebody else but if you knowhow to write/amend .html files than you can do it yourself. You need to set up instoryline to "Print Results" at the end from the Results screen, thanit will generate a "report.html" file that you can modify.

 

Pleasefind the steps below on how to do this:

 

1.      Enable Manualupload from Storyline Options. (select “Enable publishing for manual upload toArticulate Online”)

2.      Enable manualupload from Articulate Online/Settings/Other Settings/Enable manual uploading(follow this link: http://receptionacademy.articulate-online.com/Settings/?Cust=53896)

3.      Download 7zipFile Manager (http://www.7-zip.org/) andinstall to your PC

4.      DownloadNotepad++ (http://notepad-plus-plus.org/)and install to your PC

5.      After the firstfour  steps:

6.      Add to resultpage a button with the trigger set “Print results” and style it to your liking

7.      Publish thecourse to Articulate Online but with the following changes:

          a.      Change URL to

          b.      Specify preferredfolder to publish

          c.      Publish

          d.      This willcreate a folder called “ output” including “.sl1”file

8.      Right click onthe published file (“.sl1” file)  and extract it with 7zip File Manager. Thiswill create a folder called “” including other folders (like story_contentfolder) and other .html files

9.      Go to publishedfolder and find story_content/report.html file.

10.  Modify thisfile to your preference using Notepad++ (or Any other program, I am sure thereare many more) Please keep in mind that we couldn’t figure out how to changethe course name on the certificate automatically, so you will have to do thismanually every time you post.

a.      To change thecourse name in the “report.html” file find this line:

varstrTitle = g_listQuizzes[g_oPrintOptions.strMainQuizId].strQuizName;

b.      And change itto this:

varstrTitle = "Course Name";

c.      If anybodyknows how this can be solved I would be happy to know

11.  Oncereport.html file is modified highlight every file and folder in the folder, right click on it and in 7zip compress it to .zipfile

12.  Once compressedchange the file extension from .zip to .sl1 and

13.  Ta-Daaaaa youhave your file to manually upload to Articulate Online from ArticulateOnline/Content/Manual upload with your very own certificate.

 

Hope this is helpful andclear. (This is the first time I am doing this.)

 

To see the originalscreener from Justin Wilcox  https://player.vimeo.com/video/145576223

To see my screener follow this link: https://player.vimeo.com/video/204932053

 

Daniel

Kate Atkinson
over 11 years ago10/02/12 at 12:45 pm (UTC)

Hi everyone, is there any way of pulling the variables from the Storyline project eg: Name, result score directly into the certificate without using an LMS? I am developing a flash published Storyline file that runs of a CD and want the user to be able to print a certificate after passing the end assessment reflecting their results & name.

Any suggestions?

Ashley W
over 11 years ago12/18/12 at 7:09 am (UTC)

By using this code:


var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!

var yyyy = today.getFullYear();
if(dd
document.write(today);   


I managed to get the date to appear.  Now the problem is, it's appearing instead of the background. 

I'm very new to scripts, anyone know if there's a way these two things can live in harmony?

Anthony Cottrell
11 years ago02/06/13 at 1:15 am (UTC)

Hi Steve,

@Peter Anderson pointed me in your direction to create a Completion Certificate.

Many thanks ... I've got it all up and running and a last have a great looking certificate to offer.

I am not terrific at code but managed to get everything looking perfect.

I was playing around with how I can get something included in the "certificate.html"  that allows me to also place the current date in the correct position on the certificate.  

I know this must be easy as well now.. but I have tried playing around with the header and body etc for a few hours.  I can get the date to show but not formatted or in the correct position.  I've obviously missed something in the script or style.  If you've got any nuggets of info for this one in regards to code that I need to place in the head and body... that would place the finishing touches for me.  

Again, thank you for providing the solution to an issue that has been bugging me for weeks

Cheers

Tom Washam
11 years ago02/07/13 at 7:58 am (UTC)

Hi Anthony,

I recently started working on this certificate and stumbled upon a solution to the date position on the certificate. I have limited knowledge of html, but I was able to wrap the script inside a div tag which uses absolute positioning ( .time). I was also able to use the same logic to center the learners name on the certificate. Hopefully you can get some use out of these attachments.

Tom

Alice Wong
11 years ago02/21/13 at 8:37 am (UTC)

Hi Steve, I have also followed your instructions and placed the certificate files inside the Published folder which was then uploaded to the Moodle server using LMS.  However, I only got the text " - you have passed The Grueler!For that feat, you deserve a break. Take 30 seconds. Then get back ',  but  the name and the graphics did not show up.   Any ideas how to get it to work?  Any directions will be appreciated.  Thanks

Marie Anthony
11 years ago02/21/13 at 6:49 pm (UTC)

Is this in the progress of being fixed?  I have produced a lot of courses in storyline and now I am finding out I cannot publsih these with a certificate of completion!  What is being done to correct this????

I look forward hearing a solution as I have around 20 continuing education courses that need to be published with a certificate of completion attached as a requirement? 

I am at loss!!!!

Thanks for your reply.

Sign In to Reply