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.
236 Replies
- KimAlisonCommunity Member
Hi,
I've been trying to get this to work - at the moment just using Steve template and not attempting any changes yet. The text is displayed and my name but not the picture. I just see a black box with a red cross in the top left corner - so am assuming that the picture is being stopped somewhere. Is there a way around this?
Thanks,
Kim - KimAlisonCommunity Member
Hi,
Please ignore the last post. I think I've got it.
Thanks.
Thanks for the update Kim
- PatrickLabelleCommunity Member
Hi everyone. I've been able to get Steve's original solution to work, with one exception: the certificate background image is showing, but none of the text is. No title, no body text, no variables (first/last name, date). I've attached my html file here in case someone can help.
Thanks!
Patrick
- MariaD2016Community Member
Thanks for this. This works well. You have to change 'learner' to 'textentry' or 'textentry1..etc,.'
Just wondering if there's a quick code to add a current date to the certificate?
- RebeccaFleischCCommunity Member
Hi Maria,
Did you see this Articulate support page on Java Script Best Practices? It includes some content plus a link to a (very good) Brian Batt Screenr on how to insert the current date. I've used it in the past and it's worked for me.
- MariaD2016Community Member
Hi,
Thank you Rebecaa. I decided not to use the date this time but I see how this could work. I'll try it on my next project. Had you successfully added a date to a certificate? Here's my example. It would be nice to add a signature and date to it.
- TomWashamCommunity Member
I was able to add the date to the certificate and posted the HTML code to this thread back in November (page 3 of thread).
Tom
- MariaD2016Community Member
Thank you, Tom! Your script works very well.
- CarolynLewisCommunity Member
I can't see where anyone has answered the question asked by quite a few people about how to add the score to the certificate. I've got these entries in the html but i can't get it to work:
.score {
position:absolute;
left:520px;
top:500px;
width:320px;
font-family:Arial, Helvetica, sans-serif;
font-size:40px;
color:#cc00ff;
z-index:2;var learnerScore=player.GetVar("Results1.scorePercent").toString();
document.write(""+learnerScore+"");I'd be grateful if anyone can help as I'm going round in circles with this.
Related Content
- 3 months ago