Printable Certificates In Storyline ++

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.

Screenshots of the sample file from tutorial above.

Figure 1. Screenshots of sample file from tutorial.

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

  1. Functionality is fine – it’s just a sample question as means to the Results slide end.
  2. 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.
  3. Two things. First, the only thing Storyline is capable of getting from the LMS is the learner’s name so why not use Javascript to do that one thing instead of having them type it? Also, I’ve learned the hard way that despite there being directions to click the “+” button right beneath the field and button, those directions will, far too often, be ignored if they’re read at all. Last bit about that field is the placeholder text remains after you’ve clicked in the field so the certificate will either include that placeholder text or, if they didn’t click “+,” that’s all the certificate will display. Second, we’re in the USA so I want to change the date format. Americans in general are an easily confused bunch. Okay, three things. Third, that “Print” button doesn’t print anything. I know, I know … it sounds like I’m being nit-picky but as often as I’ve felt employers’ mandates to dumb things down were unnecessary and unfounded—my current employer consistently proves that I do, in fact, overestimate our audience. I hate admitting that. So much. So, I’m now thinking the first “Print Certificate” button should just say “Proceed” or something (even though the player has a “NEXT” button) and the “Print” button should say “Get Certificate.” Maybe, we’ll see.
  4. Not only do I want the certificate in the player to match the certificate in the little web page but I, like most people, kinda like certificates that use an Old English type of typeface.* Playing with the JavaScript and CSS is what took the most work (trial and error on my part that you may or may not require).

*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

StorylineInterface2

Figure 2

I love this. I love having courses greet learners by name so I put this code on the first slide.

  1. Click the Manage Project Variables button (last button under Triggers on the right in Figure 2).
  2. Click the Create a New Variable (blue “plus” sign in Figure 3) button.

    variables

    Figure 3

  3. Enter “firstname” (or whatever you like) in Name.

    addingVariable

    Figure 4

  4. 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.
  5. On any slide you’d like to display the name, click the Create a New Trigger button (first button under Triggers on the right).

    triggerWizard

    Figure 5

  6. Choose Execute JavaScript from the Action menu.
  7. Click the Script button.
  8. Type the JavaScript as pictured below (you can even copy and paste from the sample file). The LMS provides the learner’s name as, “Lastname, Firstname” so we need to split that into an array then grab and arrange the pieces how we want. Also, we need to “convert” the Javascript variables to Storyline variables (that’s very important). When finished, click OK (Figure 6).

    nameCode

    Figure 6

  9. Choose Timeline starts from the When menu (Figure 5) and click OK.
  10. In a text box, type the Storyline (that’s very important) variable between percentage symbols (Figure 2).
  11. 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.
StorylineInterface

Figure 7

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.

Dynamic Date

  1. Create a date variable and textbox to receive its value as discussed above (Figure 3).
  2. 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).
dateCode

Figure 8

 Print Button Code

Create a trigger as before, using the code below.

printCode

Figure 9

Yes, you need to convert the Storyline variables into Javascript variables even though the Javascript variables existed first. Because Storyline is stupid, that’s why.

urlstring opens the html file (note the filename here must exactly match the actual name of the file) using the file name plus our variables (as a “string”) in the URL so they’ll be swallowed and spit out by the JavaScript in the html file.

Certificate Background

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.

directory

Here’s the code and some explanation highlights.

Between the <body> tags of your html document are two sections: the <script> and the <style>.

html_top

The <script> tears apart the URL, splitting the pieces into an array (just like our earlier script did with the learner name from the LMS) and rearranges the pieces as it assembles the final web page. You won’t need to change anything except for the filename of the certificate image. If it doesn’t make sense to you, you’ll have to learn the JavaScriptiness elsewhere – I often post about great resources and put some in the links on the right.

html_bottom

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.

evolution

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.

printableDevTools_01

Finally, I opened IE’s developer tools – which show the final code the JavaScript writes, not the code in the html file – and, after a while, noticed that for some reason, some <div>s were being given a 360px offset which is why my <style> goes out of its way to assign left: 0 (line 40).

So, there you go. Enjoy.

Advertisements

About jotascript

Aiming to please. Seeking to impress.
This entry was posted in JavaScript, Tutorials and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s