Building Certificates of Completion in Articulate Storyline
Certificates of completion are a mainstay of online learning modules. However, Articulate Storyline does not have a built-in function to generate them. In this guide, I explore a straightforward method to create customized certificates as a slide in Storyline, utilizing variables and custom JavaScript.
1. Collecting User's Name
The first essential variable for the certificate of completion is the user’s name. Typically, this is collected within the module to personalize the learning experience. However, it’s important to ensure that the name entered by the learner is the one they wish to see displayed on their certificate. You may additionally wish to include the user´s last name. For these reasons, it might be appropriate to verify the user´s name or names prior to generating the certificate.
2. Extracting the Completion Date
While a basic certificate may only include the learner’s name, it’s often beneficial to include the date of completion. Achieving this requires some custom JavaScript. The script shown here retrieves the current date from the user´s device and inputs it into Articulate Storyline variables.
In this case, the date will be output as three separate variables: the day, the month, and the year. This way, it can be displayed in the format: “This %todaysDay% Day of %todaysMonth%, %todaysYear%,” on the certificate.
3. Determining the Date Suffix
In addition to pulling the current date from the user’s system, this JavaScript code has a couple of further functions. In order to correctly display the date on the certificate, the correct suffix (1st, 2nd, 3rd, 4th etc.) to follow the date number needs to be identified and applied. This can be done in Storyline itself using a series of contingent triggers and a separate suffix variable (i.e. set the variable %dateSuffix% to “st” if %todaysDay% is = 1). However, this solution becomes cumbersome due to the requirement of contingencies for each day of the month.
Instead, the custom JavaScript will determine if the date is the 11th, 12th, or 13th, as these three dates are the only ones ending in a 1, 2, or 3 that receive a “th” suffix. For other dates, the script determines the appropriate suffix based on the last digit of the date.
4. Handling the Month
With the day of the month dealt with, the script then handles the month. The value initially pulled is in numeric form, but is probably more ideally displayed with the month’s name. While this too can be achieved using contingent Storyline triggers by reassigning certain month numbers to their corresponding names, integrating this functionality within the JavaScript enhances efficiency and reduces the potential for errors. This is accomplished by assembling an array containing the month names and selecting the correct month name based on the month number.
5. Building the Slide
With the variables all set, we can throw together a slide to serve as our certificate. Most of the elements of this should be simple and straightforward. Add visual components and the user’s name and date variables in a layout that suits the module or organization’s aesthetic.
One final feature I like to include is a timeline loop. Setting up this loop requires the user interface elements be set to display normally when the slide loads, and again triggered to toggle to their normal state immediately after the slide’s timeline begins at around 0.25s. Immediately following that timeline trigger, at around 0.5s, another timeline trigger should be added to pause the slide. A last trigger should then be included to jump back to the start of the timeline. This can be at a set point, or the end of the timeline, but should be around 2-3 seconds after the slide is paused.
With the loop set up, triggers should be added to change the states of all the user interface elements to hidden when the user clicks print. By also adding a trigger to resume the timeline when print is selected, we can remove the buttons from the printed certificate and then have them reappear as the timeline completes and loops back to the start.
Conclusion
By employing this straightforward method, completion certificates can be dynamically generated for all Storyline projects, enhancing the user experience and potentially record keeping efforts. If you’d like to explore further how I go about adding certificates to my eLearning modules, feel free to reach out. I’d love to hear from you.
