Forum Discussion
Example files: Generating a certificate from Storyline
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.
- BenGianacakosCommunity Member
Way late to the party...but how do I set the font size for inputing the learner name into the certificate. I've got my own certificate generated, but I can't figure out how to control the font size.
- OwenHoltSuper Hero
I used a style guide in the html. Something like this....
< style type="text/css">h2 { font-family:"Segoe Script"; font-size:20px; color:#333333}
Then you can use h2 as an html tag before the learner name. Like this:
< h2>'+LearnerName+'</h2>
- DSuttonCommunity Member
Thanks to everyone in this thread for the collaboration. I was able to implement this method and it works wonderfully - in Firefox and Chrome. But in IE, the "Print Certificate" button I added to my results slide is unresponsive. Nothing happens when it's clicked. In Chrome and FF, clicking it launches a new broswer window with the certificate.
Since the training is playing in Moodle as a flash module, there's no browser error to help me troubleshoot the problem. Has anyone else had problems with this method working in IE? Any help or guidance is greatly appreciated!
Thanks.
- TriaVangCommunity Member
Hi,
I followed the steps in the post, but when the certificate is supposed to pull up, I get an error. My module eventually is zipped and uploaded into an LMS where it is hosted. Will the steps in the post still work for that? Also, is the "published output directory" different from the output folder that is created when I publish my articulate module?
Thank you,
Tria
- DSuttonCommunity Member
Hi Tria,
The zipped module uploaded to your LMS shouldn't be the cause of any problems. That's how I have mine working as well (using Moodle) and it works just fine.
Not sure how others have done this, but I simply uploaded the 2 files (the .html and the certificate image) into a folder inside the same host where my Moodle installation lives. For example, my files live at http://www.mydomainname.com/certificate/certificate.html and http://www.mydomainname.com/certificate/certificate.jpg. /certificate is my "published output directory".
So here's how my javascript reads:
var newWin=window.open("http://www.mydomainname.com/certificate/certificate.html", "http://www.mydomainname.com/certificate/certificate.jpg","status=0,scrollbars=0,width=950,height=605");
Hope this helps!
- OwenHoltSuper Hero
I have any required images or other inputs hosted on a SharePoint. The course itself is zipped and hosted in our LMS (Saba). The codes use a full path for the images and other inputs and this works just fine.
- MelissaMorri679Community Member
Hello,
I need to be able to do this on CD. How can I set it up since everything seems to be for the LMS.
Thank you,
Melissa
- OwenHoltSuper Hero
I haven't tested it, but I would assume relative links should work just as well.
- MelissaMorri679Community Member
They don't. When you publish to CD using Steve's it does not pull any of the information into it. I have attached my file.
- OwenHoltSuper Hero
I'm no expert on javascript, but you might need to investigate if there is a way to first, identify the users CD drive letter and then second, use this information to construct a hard link to the file on the disc.
Another potential use of javascript would be to assume the drive will be one of several drives (i.e. D:, E:, F:, G and then check each for your file path, ignoring any that are not a match or that return a null result. Once you have a match, you have the path to use to the graphics for your certificate.
Steve is great at javascript challenges like this; you might consider sending him a direct message.