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.
- 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.
- SteveFlowersCommunity Member
Hi Carolyn,
Unfortunately, you can't access the results variables directly through GetVar. You'll need to add a trigger on your results slide to copy the score into another variable then reference that variable through JavaScript.
Steve
- CarolynLewisCommunity Member
Thanks Steve. I'll give it a go.
- CarolynLewisCommunity Member
Hi Steve
I've had a go a what you suggest, but I'm struggling a bit. The score is still not displaying on the certificate so I'm obviously doing someing wrong. I've taken the following steps:
I set up a new variable called Score and assigned it a numeric value
I then set up a new trigger which 'adjusted' the variable 'Score' equal to the variable Results1.ScorePercent when the user clicks the object "Create My Certificate".
Then in the html I have:
.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("Score").toString();
document.write(""+learnerScore+"");Can you point out where I'm going wrong.
Thanks for your help.
- CarolynLewisCommunity Member
All sorted, thanks for your help.