How to Create a Certificate of Completion in Articulate Storyline 360

How to Create a Certificate of Completion in Articulate Storyline 360

   Storyline 360    November 17, 2022  |  0
Storyline 360 Certificate of Completion eLearning Template
Skilled Articulate Storyline eLearning Designer and Developer

Rema Merrick is owner, lead instructional designer and eLearning developer at Enovate Learning LLC. She has eight years of experience developing eLearning (CBTs and WBTs) for corporations in the airline, utilities and other industries. She holds a master of science in Instructional Technology from Bloomsburg University of Pennsylvania and is a member of ATD Florida Suncoast. Her hobbies include running, practicing yoga and participating in Articulate’s E-Learning Heroes E-Learning Challenges.

Author: Rema Merrick, MSIT
Published: November 17, 2022
Time to Read: 10 minutes  

Storyline 360 Certificate of Completion eLearning Template

Summary

I recently created a printable, superhero-inspired certificate of completion template for Articulate’s eLearning Heroes Challenge. This post shows how to create this template using variables, slide layers and simple JavaScript. The image below shows what the certificate of completion looks like when complete.

Development Time

It took me about one hour to develop this course, including editing and revising it.  

Prerequisites

To successfully build this interaction, you’ll need to know how to complete the following tasks in Articulate Storyline.

  • How to create a new project
  • How to insert a new slide
  • How to add text, images and objects to a slide
  • How to create a slide layer
  • How to create a variable
  • How to create an object trigger

Introduction

It is important to note that there are many ways to create a certificate of completion. This is just one way. For example, the first time I created this interaction, I used one base slide and three slide layers. However, I thought using four separate base slides would be simpler for newer Storyline users. Either approach is okay. The development of this interaction is divided into six major steps: 1) creating the variables 2) creating the master slides 3) creating the title slide; 4) creating the name-input slide; 5) creating the hero-selection slide; and 6) creating the certificate of completion slide.  

Specifications

These are the specifications I used for the objects on the base layer and slide layers.

  • Slide Size: 720 pixels by 540 pixels
  • Page Title Text: Montserrat Semibold Italic 91.01 pt (effects version from Adobe Stock)
  • Content Text: Calibri and Calibri Light 16 point

Development Process

Start the Project

Below are the steps I took to develop the interaction. I did not give specific instructions on how to accomplish each task; I listed the tasks I completed to develop the interaction.

Create a new project in Storyline 360.

Create the Variables

  1. Create five variables: Participant, sh1, sh2, sh3 and SystemDate.
    1. Participant: Text variable used to record the name of the learner
    2. sh1: Number variable used to identify the superhero mask 1
    3. sh2: Number variable used to identify the superhero mask 2
    4. sh3: Number variable used to identify the superhero mask 3
    5. SystemDate: Text variable used for the current

Create 4 Master Slides

  1. Insert a new slide master layout. Name the layout Title.
    1. Insert the background image. I used a comic book background image I found on Adobe Stock with these specifications: X = 0, Y = 0, Width = 720, Height = 540.
    2. Insert the comic title text. I used Adobe Illustrator file I found on Adobe Stock with these specifications: X = -26 px, Y = 16 px, Width = 433 px, Height = 241 px, Rotation = 345 degrees.
    3. Insert a text box; write Certificate Creation in the text box. Change the background of the text box to a solid fill, white color and 25% transparency: X = 20 px, Y = 244 px, Width = 680 px, Height = 144 px.
    4. Insert a white circle: X = 490 px, Y = 34 px, Width = 200 px, Height = 200 px.
    5. Insert a superhero image and align it to the center of the white circle. I used an image I got from Adobe Stock with these specifications: X = 514 px, Y = 57 px, Width = 152 px, Height = 155 px.
    6. Insert the start icon from the Content Library: X = 310 px, Y = 417 px, Width = 100 px, Height = 100 px.
  1. Insert a new slide master layout. Name the layout Input Name.
    1. Insert the background image. I used a comic book background image I found on Adobe Stock with these specifications: X = 0, Y = 0, Width = 720, Height = 540.
    2. Insert a rectangle shape object for the layout background. Change the background of the rectangle shape object to a solid fill, white color and 15% transparency: X = 20 px, Y = 0 px, Width = 680 px, Height = 540 px.
    3. Insert a text box; write the instructions in the text box: X = 20 px, Y = 183 px, Width = 680 px, Height = 69 px.
    4. Insert the comic title text. I used Adobe Illustrator file I found on Adobe Stock with these specifications: X = -2 px, Y = -6 px, Width = 300 px, Height = 168 px, Rotation = 345 degrees.
    5. Insert an icon for the Back Button. I used a superhero icon from the Storyline Content Library with these specifications: X = 30 px, Y = 435 px, Width = 62 px, Height = 62 px.
    6. Insert an icon for the Next Button. I used a superhero icon from the Storyline Content Library with these specifications: X = 622 px, Y = 435 px, Width = 62 px, Height = 62 px.
  1. Insert a new slide master layout. Name the layout Choose Hero Mask.
    1. Insert the background image. I used a comic book background image I found on Adobe Stock with these specifications: X = 0, Y = 0, Width = 720, Height = 540.
    2. Insert a rectangle shape object for the layout background. Change the background of the rectangle shape object to a solid fill, white color and 15% transparency: X = 20 px, Y = 0 px, Width = 680 px, Height = 540 px.
    3. Insert a text box; write the instructions in the text box: X = 20 px, Y = 183 px, Width = 680 px, Height = 69 px.
    4. Insert the comic title text. I used Adobe Illustrator file I found on Adobe Stock with these specifications: X = -2 px, Y = -6 px, Width = 300 px, Height = 168 px, Rotation = 345 degrees.
    5. Insert an icon for the Back Button. I used a superhero icon from the Storyline Content Library with these specifications: X = 30 px, Y = 435 px, Width = 62 px, Height = 62 px.
    6. Insert an icon for the Next Button. I used a superhero icon from the Storyline Content Library with these specifications: X = 622 px, Y = 435 px, Width = 62 px, Height = 62 px.
    7. Insert superhero mask image 1 (SH1): X = 30 px, Y = 230 px =, Weight = 189 px, Height = 203 px. I found this image on Adobe Stock.
    8. Insert superhero mask image 2 (SH2): X = 266 px, Y = 264 px =, Weight = 189 px, Height = 169 px. I found this image on Adobe Stock.
    9. Insert superhero mask image 3 (SH3): X = 500 px, Y = 284 px =, Weight = 189 px, Height = 96 px.I found this image on Adobe Stock.
  1. Insert a new slide master layout. Name the layout Certificate.
    1. Insert the background image. I used a comic book background image I found on Adobe Stock with these specifications: X = 0, Y = 0, Width = 720, Height = 540.
    2. Insert the comic title text. I used Adobe Illustrator file I found on Adobe Stock with these specifications: X = -26 px, Y = 16 px, Width = 433 px, Heigh = 241 px, Rotation = 345 degrees
    3. Insert a superhero image and align it to the center of the white circle. I used an image I got from Adobe Stock with these specifications: X = 514 px, Y = 57 px, Width = 152 px, Height = 155 px.
    4. Insert a white circle: X = 490 px, Y = 34 px, Width = 200 px, Height = 200 px.
    5. Insert the green superhero mask image. I used an image I found on Adobe Stock with the following specifications: X = 514 px, Y = 57 px, Width = 152 px, Height = 155 px.
    6. Insert the start icon from the Content Library: X = 310 px, Y = 417 px, Width = 100 px, Height = 100 px.

Create the Name Input Slide

  1. Insert a new slide. Name the slide Name-Input.
  2. Insert a data entry input box and name the box TE_Participant: X = 24 px, Y = 253 px, Width = 673 px, Height = 56 px. Notice the object trigger that Storyline automatically creates.
  3. Add two rectangle shape objects. Name one Next Button and the other Back Button. Remove the fill and outline from both shapes.
    1. Back Button: X = 29 px, Y = 432 px, Width = 65 px, Height = 67 px.
    2. Next Button: X = 621 px, Y = 432 px, Width 65 px, Height 67 px.

NOTE: The comic-style page title, instruction text and back and next icons are on the master slide.

  1. Create the object triggers.
    1. Change the variable of the TE_Participant object trigger to Participant. Storyline automatically created this trigger when you added the data entry input box called TE_Participant.
    2. Add the Back Button trigger.
    3. Add the Next Button trigger.

Create the Choose-a-Hero Slide

  1. Insert a new slide. Name the slide Choose a Hero.
  2. Add three rectangle shape objects. Remove the fill and outline from the five shapes. Rename the shape objects as follows. Add an additional state to each object called Selected. Highlight the selected state to make it stand out from the Normal state. I used a red line but the possibilities vary.
    1. SH1 Button: X = 28 px, Y = 229 px, Width = 192 px, Height = 203 px
    2. SH2 Button: X = 264 px, Y = 229 px, Width = 192 px, Height = 203 px
    3. SH3 Button: X = 498 px, Y = 229 px, Width = 192 px, Height = 203 px
  3. Add two rectangle shape objects.
    1. Back button: X = 29 px, Y = 432 px, Width = 65 px, Height = 67 px
    2. Next button: X = 621 px, Y = 432 px, Width 65 px, Height 67 px

NOTE: The comic-style page title, instruction text, superhero mask images, and back and next icons are on the master slide.

  1. Create the object triggers.
    1. Add the Back Button trigger.
    2. Add the Next Button trigger.
  1. Add the SH1 Button triggers.
    1. Set the variable sh1 = 1 when the user clicks the SH1 Button.
    2. Set the state of SH1 Button to Selected when the user clicks the SH1 Button.
    3. Set the state pf SH2 Button to Normal when the user clicks the SH1 Button.
    4. Set the state of SH3 Button to Normal when the user clicks the SH1 Button.
  1. Add the following SH2 Button triggers.
    1. Set the variable sh2 = 1 when the user clicks the SH2 Button.
    2. Set the state of SH1 Button to Normal when the user clicks the SH2 Button.
    3. Set the state pf SH2 Button to Selected when the user clicks the SH2 Button.
    4. Set the state of SH3 Button to Normal when the user clicks the SH2 Button.
  1. Add the SH3 Button triggers.
    1. Set the variable sh3 = 1 when the user clicks the SH3 Button.
    2. Set the state of SH1 Button to Normal when the user clicks the SH3 Button.
    3. Set the state pf SH2 Button to Normal when the user clicks the SH3 Button.
    4. Set the state of SH3 Button to Selected when the user clicks the SH3 Button.

Create the Certificate of Completion Slide

  1. Insert a new slide. Name the slide Completion Certificate.
  2. Add the objects to the slide. I’ve added the coordinates and size of the objects but you can adjust them as you see fit.
    1. Add the three superhero mask images to the slide: SH_Image1, SH_Image2 and SH_Image3. Change the initial state of each image to hidden.
      1. SH_Image1: X = 520 px, Y = 59 px, Width = 139 px, Height = 150 px.
      2. SH_Image2: X = 512 px, Y = 73 px, Width = 157 px, Height = 140 px.
      3. SH_Image3: X = 520 px, Y = 93 px, Width = 62 px, Height = 82 px.
    2. Add a white circle (named Hero BH) to the slide: X = 490, Y = 34, Width = 200 px, Height = 200 px.
    3. Add a text box (named Course Name) with the course name to the slide: X = 144 px, Y = 381 px, Width = 432, Height = 32 px.
    4. Add a text box (named Participant Name) with the statement %Participant%: X = 141 px, Y = 242 px, Width =432 px, Height = 69 px.

NOTE: The SystemDate variable text is added on the Master slide not the regular slide.

  1. Add the trigger to show the current date.
    1. Add Execute JavaScript when timeline starts trigger.
    2. Click on the JavaScript link to open the JavaScript Editor.
    3. Type the following script in the JavaScript Editor.
  1. Add the remaining slide triggers.
    1. Show the Print layer when timeline starts.
    2. Set state of SH_image1 to Normal when timeline starts if sh1 = 1.
    3. Set state of SH_image2 to Normal when timeline starts if sh2 = 1.
    4. Set state of SH_image3 to Normal when timeline starts if sh3 = 1.
  1. Add a new slide layer and name it Print.

NOTE: This layer will remove the Print button and Print icon, so that it does not show up when the user prints the certificate of completion.

  1. Add the following objects to the Print slide layer.
    1. Print icon: Select the Insert tab; then select the Icons button. Type the search term print; then select an icon. (X = 333 px, Y = 478 px, Width = 54 px, Height = 50 px)
    2. Print button: Insert a rectangle shape (X = 318 px, Y = 472, Width = 85 px, Height = 60 px)
  1. Add a trigger to hide the Print Button on the Print slide layer when the user clicks the Print Button.
  1. Add a trigger to add Execute JavaScript when the user clicks the Print Button.
    1. Click the JavaScript link to add the script.
    2. Add the script: window.print();

Final Product

Below is the final product. Be sure to adjust your print settings to accommodate the way you want the certificate to print (i.e., print orientation and margins.

Storyline 360 Certificate of Completion eLearning Template

Wrap Up

The development of this interaction is broken into six major steps: 1) creating the variables 2) creating the master slides 3) creating the title slide; 4) creating the name-input slide; 5) creating the hero-selection slide; and 6) creating certificate of completion slide. 

DOWNLOAD THE CERTIFICATE OF COMPLETION TEMPLATE

Please share your comments regarding the project and development process. I would love your feedback on what you found helpful, what you found confusing and what additional information would have been more helpful.

 

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

This blog was founded and is operated by Rema Merrick, instructional designer and Articulate Storyline 360 e-Learning developer. She has been a staple in the e-Learning industry since 2014. Her exciting career started after she received her master of science in Instructional Technology from Bloomsburg University. When she's not participating in Articulate’s E-Learning Heroes E-Learning Challenges, you can find her practicing yoga, jogging or biking in sunny, St. Petersburg, FL.

LEGAL

Cookie Policy

Privacy Policy

Terms and Conditions

CONTACT

 

info@enovatelearning.com

 

Enovate Learning E-Learning Development Blog

Copyright © 2019-2024. Rema L Merrick.

All rights reserved.