I found a Storyline tutorial for creating printable certificates– something our users have been requesting as long as I’ve been at my day job.
There’s certainly nothing about the functionality to criticize but there were several things I immediately wanted to change so I thought I’d throw up a tutorial of my version.
Room for Improvement IMHO
- Functionality is fine – it’s just a sample question as means to the Results slide end.
- The “Print Certificate” button doesn’t print anything (let alone the certificate) but, rather, takes the user to the next slide. I have my own reasons for that in addition to the fact that my organizations users get very confused very easily. My first task was changing it to, “Get Certificate” but, looking at it now, I don’t like that either.
*OMG, I have to stop and say that when Helvetica, the little girl in Shorts, gets called “Typeface!” I want to die. Am I allowed to say Robert Rodriguez is my favorite filmmaker?
Getting the Learner’s Name from the LMS
I love this. I love having courses greet learners by name so I put this code on the first slide.
- Click the Manage Project Variables button (last button under Triggers on the right in Figure 2).
- Click the Create a New Variable (blue “plus” sign in Figure 3) button.
- Enter “firstname” (or whatever you like) in Name.
- Choose Text from the Type menu and click OK to close the variable creation window. Repeat as needed then click OK to close the variable manager window.
- On any slide you’d like to display the name, click the Create a New Trigger button (first button under Triggers on the right).
- Click the Script button.
- Choose Timeline starts from the When menu (Figure 5) and click OK.
- In a text box, type the Storyline (that’s very important) variable between percentage symbols (Figure 2).
- For testing, you must publish the LMS shizzle and test it in your LMS. Publishing for Web won’t work. You need that SCORM yummy goodness to do its magic. If Storyline does nothing else well, it does SCORM reasonably well.
Course Name: An Apology for Misleading You
Before you get excited, no Storyline does not get the course name from the LMS. Storyline can’t do anything of the sort. Remember, you’re using a child’s toy, not a quality piece of software made by professionals for professionals.
I use a variable (Figure 3) instead of just typing the course name because I can then easily pass it along to the html page. I just have to remember to change the value to the appropriate course name.
- Create a date variable and textbox to receive its value as discussed above (Figure 3).
- Create a trigger for the slide using the code below (unless you’re outside the USA, in which case you can grab the code from the original tutorial).
Print Button Code
Create a trigger as before, using the code below.
I just adapted the certificate I made for live classes (the subject of a really cool dynamic pdf tutorial). I inserted it into Storyline behind the dynamic text fields and include it in the HTML biz-nizzle we’ll discuss in a moment. So, what they see in the course is what they get. I love the Smudge tool in Photoshop.
HTML (and image) File(s)
The original tute didn’t include an image file – the certificate is plain text and there’s nothing wrong with that. AFTER (very important) publishing for LMS, drop this HTML file and any images into the root folder.
Here’s the code and some explanation highlights.
Between the <body> tags of your html document are two sections: the <script> and the <style>.
The <style> is what you’ll need to wrestle with but don’t be too scared – it’s just changing the numbers until it looks good. In its current state, it works perfectly for the layout of my 720×540 image.
The most important piece is the z-index of #cert and #layoutContainer id selectors. That’s what puts the image behind (instead of beneath) the dynamic text on the page.
Ah, yes, I suppose there is one thing to criticize about the original code! The author used id instead of class for multiple tags. Don’t do that.
Testing and Debugging
Behold, just a sampling of the evolution of my final certificate.
Once I pried them apart (B) and got them centered only to have them fly out the window (C), I was pretty pissed. And frustrated. For a long time.
So, there you go. Enjoy.