ELC 396 How to Create the Human Skull Bones Project

ELC 396 How to Create the Human Skull Bones Project

   Storyline 360    November 30, 2022  |  0
Articulate Storyline eLearning Designer and Developer
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) and other training modalities 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 26, 2022
Time to Read: 20 minutes   

Image of Final Content Skull Slide

Summary

In this post, I show how I created the Human Skull Bones project for the Custom Glossary Interactions in E-Learning Challenge #396. It does not address how to create the custom glossary in the project. An earlier post addresses that topic: How to Create a Custom Glossary in Articulate Storyline. This post shows how to create the main content slide and the 11 supporting lightbox slides.

VIEW THE PROJECT IN ACTION.
Articulate Storyline eLearning Designer and Developer

The full project includes 19 slides. A title slide introduces the course with a short video clip of a dancing skeleton, intro music and cheesy skeleton joke. The project includes a slide for navigation instructions and one for the learning objective. There is a content slide with a video clip and a gateway to the glossary and additional content. There is 1 text entry quiz slide, 11 content, lightbox slides, 1 glossary slide and 1 conclusion slide. One extra blank slide is used to reset the quiz.

Specifications

Below are the specifications I used for the project.

  • Slide Size: 720 pixels by 540 pixels
  • Glossary Letter Button: Articulate Extra Bold, 12-point
  • Content Text: Calibri Light, 16-point
  • Rectangle Shape Color: HTML #00B0F0
  • Icon Color: HTML #00B0F0

Assets

  • Image: 3-D image of human skull; I found the image on the Adobe Stock website and used Adobe Dimensions to edit it and save it as a .PNG file.
  • Video: Video of skeleton; I found the video in the Articulate Content Library.

Development Time

 It took six hours to design, build and QA (quality assurance check) all 19 slides.

Prerequisites

To successfully complete this interaction, you’ll need to know how to do 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
  • How to create a lightbox 

Introduction

The development of this interaction has three major steps:

  1. Create the variables.
  2. Create the content lightbox slides: a) add the slide objects; and b) add the slide triggers.
  3. Create the content slide: a) add base layer objects; b) add navigation layer with objects and triggers; c) add variable triggers to base layer; and d) add object triggers to base layer.

Development Process

Start the Project

  1. Create a new project.

Create the Variables

  1. Create 12 True/False variables: Ethmoid_Btn, Frontal_Btn, Lacrimal_Btn, Mandible_Btn, Maxilla_Btn, Nasal_Btn, Parietal_Btn, Occipital_Btn, Sphenoid_Btn, Temporal_Btn, Zygomatic_Btn and View_Complete. Make sure the default value is False for all variables.
Variables

Create the Content Lightbox Slides

  1. Create a new scene; name the scene Glossary.

Create the Ethmoid Bone Lightbox Slide

  1. Insert a new slide; name the slide Ethmoid Bone.
  2. Add a text box with the definition of the ethmoid bone. Changed the shape fill and outline to #00B0F0. Adjust the position and size to X = 60 px, Y = 29 px, Width = 300 px, Height = 482 px.
  3. Insert the skull image. Adjust the position and size to X = 360 px, Y = 29 px, Width = 300 px, Height = 482 px.
  4. Insert a close icon from the Content Library 360; name the icon Close Icon. Adjust the shape fill color to HTML # Adjust the position and size to X = 637 px, Y = 29 px, Width = 57 px, Height = 56 px.
  5. Insert a rectangle shape; name the shape Close Button. Remove the shape fill and outline from the shape. Adjust the position and size to X = 360 px, Y = 29 px, Width = 57 px, Height = 56 px.
  6. Insert two arrow icons from the Content Library 360. Name the icons Ethmoid Point 1 and Ethmoid Point 2. Adjust the size and position of Ethmoid Point 1 to X = 433 px, Y = 279 px, Width = 33 px, Height = 62 px. Adjust the size and position of Ethmoid Point 2 to X = 551 px, Y = 281px, Width = 33 px, Height = 62 px.
  1. Add the slide trigger Set Ethmoid_Btn to value True when the timeline starts on this slide.
  2. Add the slide trigger Execute JavaScript when the timeline starts on this slide. getElementById(“light-box-close”).style.display = “none”;
Illustrates Part 2 of Step 9
  1. Add the object trigger Set View_Complete to value True when the user clicks Exit Button if Ethmoid_Btn = value True and Frontal_Btn = value True and Lacrimal_Btn = value True and Mandible_Btn = value True and Maxilla_Btn = value True and Occipital_Btn = value True and Parietal_Btn = value and Sphenoid_Btn = value True and Temporal_Btn = value True and Zygomatic_Btn = value True.
  2. Add the object trigger Close lightbox when the users click Exit Button.

Create the Remaining Lightbox Slides

  1. Repeat steps 2 to 7 for the remaining 10 bones: frontal bone, lacrimal bone, mandible bone, maxilla bone, nasal bone, parietal bone, occipital bone, sphenoid bone, temporal bone and zygomatic bone. The steps for the remaining 10 bones are the same except for the following differences:
    1. the name of each slide (e.g., the lightbox slide with the frontal bone content is named Frontal Bone); there should be a total of 11 lightbox slides named Ethmoid Bone, Frontal Bone, Lacrimal Bone, Mandible Bone, Maxilla Bone, Nasal Bone, Parietal Bone, Occipital Bone, Sphenoid Bone, Temporal Bone and Zygomatic Bone.
Illustrates Step 11a
    1. the number of, position, size and name of the arrow icons used to point to the specific bone in the skull; these specifications for all 11 slides are indicated in Table 1.
Table 1
Table 1
  1. Repeat step 8 for the remaining slides and variables. There should be one trigger on each bone lightbox slide (11 total) as indicated in Table 2
Table 2
Table 2
  1. Repeat steps 9 to 11 for the remaining 10 lightbox slides: Frontal Bone, Lacrimal Bone, Mandible Bone, Maxilla Bone, Nasal Bone, Occipital Bone, Parietal Bone, Sphenoid Bone, Temporal Bone and Zygomatic Bone.

Create the Content Slide

  1. Insert a new slide; name the slide Skull.

Add the Objects to the Base Layer

  1. Insert a text box on the base layer. Adjust the position and size to X = 26, Y = 405 px, Width = 668 px, Height = 135 px.

The skull, a skeletal framework of the head of vertebrates, is composed of bones and cartilage. These bones and cartilage form a unit that protects the brain and some sense organs. The skull is made up of 11 bones: ethmoid bone, frontal bone, lacrimal bone, mandible, maxilla, nasal bone, parietal bone, occipital bone, sphenoid bone, temporal bone and zygomatic bone.

  1. Adjust the font of the 11 bone terms to bold and color to HTML #00B0F0.
  2. Insert text-to-speech audio on the base layer with the following content.

The skull, a skeletal framework of the head of vertebrates, is composed of bones and cartilage. These bones and cartilage form a unit that protects the brain and some sense organs. The skull is made up of 11 bones: the ethmoid bone, the frontal bone, the lacrimal bone, the mandible, the maxilla, the nasal bone, the parietal bone, the occipital bone, the sphenoid bone, the temporal bone and finally, the zygomatic bone.

Illustrates Steps 2, 3 and 4
  1. Insert the 18 second skull video from the Content Library 360. Adjust the position and size to X = 0, Y = 0 px, Width = 720 px, Height = 405 px.
  2. Insert a Skull Icon from the Content Library 360. Change the fill color to HTML #00B0F0. Adjust the position and size to X = 533, Y = 51 px, Width = 52 px, Height = 69 px.
  3. Insert a rectangle shape; type Glossary in the shape. Change the shape fill color to HTML #00B0F0. Adjust the position and size to X = 569, Y = 57 px, Width = 125 px, Height = 48 px. *
  4. Insert a rectangle shape; remove the shape fill and outline from the rectangle. Name the shape Glossary Button. Adjust the position and size to X = 533, Y = 51 px, Width = 161 px, Height = 68 px. *
  5. Insert a rectangle shape; name the shape Ethmoid Button. Add a new state, Visited, to the button; change the shape fill color of the Visited state to HTML #00B0F0 and the transparency to 75%. Adjust the position and size to X = 533, Y = 51 px, Width = 161 px, Height = 68 px.
Illustrates Steps 5 to 9

*  You can find detailed instructions for creating the custom glossary in the How to Create a Custom Glossary in Articulate Storyline post.

  1. Repeat step 9 for the remaining 11 buttons as indicated in Table 3. NOTE: There are a total of 12 buttons because the term “temporal bone” in separated into two lines and requires two buttons. There is a Temporal Button 1 and Temporal Button 2.
Table 3
Table 3

Add the Navigation Slide Layer

  1. Add a new slide layer; name the layer Navigation.
  2. Insert a Back icon from the Content Library 360. Name the icon Back Icon. Change the shape fill and outline to white, if not already. Adjust the position and location of the icon to X = 26 px, Y = 241 px, Width = 59 px, Height = 59 px.
  3. Insert a Next icon from the Content Library 360. Name the icon Next Icon. Change the shape fill and outline to white, if not already. Adjust the position and location of the icon to X = 635 px, Y = 241 px, Width = 59 px, Height = 59 px.
  4. Insert a rectangle shape; name the shape Back Button. Remove the shape fill and outline. Adjust the position and location of the icon to X = 26 px, Y = 235 px, Width = 59 px, Height = 71 px.
  5. Insert a rectangle shape; name the shape Next Button. Remove the shape fill and outline. Adjust the position and location of the icon to X = 635 px, Y = 235 px, Width = 59 px, Height = 71 px.

 

  1. Add the object trigger Jump to slide 1.7 Objectives when the user clicks Back Button. 
  2. Add the object trigger Jump to slide 1.4 Quiz when the user clicks Next Button. 
Illustrates Steps 6 and 7

NOTE: I did not include the development steps for the Objectives and Quiz slides in this post. However, both slides exist in the original project. You can replace the reference to these slides with the generic previous and next slides.

Add the Variable Triggers to the Base Layer

  1. Navigate back to the base layer of the slide.
  2. Add the triggers Set state of Ethmoid Bone Button to Visited when Ethmoid_Btn changes, if Ethmoid_Btn = value True.
  3. Add the trigger Set state of Frontal Bone Button to Visited when Frontal_Btn changes, if Frontal_Btn = value True.
  4. Add the trigger Set state of Lacrimal Bone Button to Visited when Lacrimal_Btn changes, if Lacrimal_Btn = value True.
  5. Add the trigger Set state of Mandible Bone Button to Visited when Mandible_Btn changes, if Mandible_Btn = value True.
  6. Add the trigger Set state of Maxilla Bone Button to Visited when Maxilla_Btn changes, if Maxilla_Btn = value True.
  7. Add the trigger Set state of Nasal Bone Button to Visited when Nasal_Btn changes, if Nasal_Btn = value True.
Illustrates Steps 2 to 7
  1. Add the trigger Set state of Occipital Bone Button to Visited when Occipital_Btn changes, if Occipital_Btn = value True.
  2. Add the trigger Set state of Parietal Bone Button to Visited when Parietal_Btn changes, if Parietal_Btn = value True.
  3. Add the trigger Set state of Sphenoid Bone Button to Visited when Sphenoid_Btn changes, if Sphenoid_Btn = value True.
  4. Add the Set state of Temporal Bone Button 1 to Visited when Temporal_Btn changes, if Temporal_Btn = value True.
  5. Add the trigger Set state of Temporal Bone Button 2 to Visited when Temporal_Btn changes, if Temporal_Btn = value True.
  6. Add the trigger Set state of Zygomatic Bone Button to Visited when Zygomatic_Btn changes, if Zygomatic_Btn = value True.
  7. Add the trigger Show layer Navigation when View_Complete changes if View_Complete = value True.
Illustrates Steps 8 to 14

Add the Object Triggers to the Base Layer

  1. Add the following lightbox object triggers. These triggers allow users to open the lightbox triggers for additional content. NOTE: The lightbox slide numbers may differ from below; the numbers are based on the order in which you add each slide.
    1. Lightbox 2.4 Ethmoid Bone when user clicks Ethmoid Bone Button.
    2. Lightbox 2.3 Frontal Bone when user clicks Frontal Bone Button.
    3. Lightbox 2.9 Lacrimal Bone when user clicks Lacrimal Bone Button.
    4. Lightbox 2.8 Mandible Bone when user clicks Mandible Bone Button.
    5. Lightbox 2.6 Maxilla when user clicks Maxilla Bone Button.
    6. Lightbox 2.1 Nasal Bone when user clicks Nasal Bone Button.
    7. Lightbox 2.11 Occipital Bone when user clicks Occipital Bone Button.
    8. Lightbox 2.10 Parietal Bone when user clicks Parietal Bone Button.
    9. Lightbox 2.5 Sphenoid Bone when user clicks Sphenoid Bone Button.
    10. Lightbox 2.12 Temporal Bone when user clicks Temporal Bone Button 1.
    11. Lightbox 2.12 Temporal Bone when user clicks Temporal Bone Button 2.
    12. Lightbox 2.7 Zygomatic Bone when user clicks Zygomatic Bone Button.
    13. Lightbox 2.2 Glossary when user clicks Glossary Button.*

*  You can find detailed instructions for creating the custom glossary in the How to Create a Custom Glossary in Articulate Storyline post.

Illustrates Steps a - m
  1. Add the following triggers. These buttons make the term buttons clickable once the narration completes.
    1. Set state of Ethmoid Bone Button to Normal when Narration completes.
    2. Set state of Frontal Bone Button to Normal when Narration completes.
    3. Set state of Lacrimal Bone Button to Normal when Narration completes.
    4. Set state of Mandible Bone Button to Normal when Narration completes.
    5. Set state of Maxilla Bone Button to Normal when Narration completes.
    6. Set state of Nasal Bone Button to Normal when Narration completes.
    7. Set state of Occipital Bone Button to Normal when Narration completes.
    8. Set state of Parietal Bone Button to Normal when Narration completes.
    9. Set state of Sphenoid Bone Button to Normal when Narration completes.
    10. Set state of Temporal Bone Button to Normal when Narration completes.
    11. Set state of Temporal Bone Button to Normal when Narration completes.
    12. Set state of Zygomatic Bone Button to Normal when Narration completes.
Illustrates Steps a - l

Final Product

This image shows that final version of the content slide named Skull.

Image of Final Content Skull Slide

Wrap Up

Again, the development of this interaction took three major steps:

  1. Create the variables.
  2. Create the content lightbox slides: 1) add the slide objects; and 2) add the slide triggers.
  3. Create the content slide: 1) add base layer objects; 2) add navigation layer with objects and triggers; 3) add variable triggers to base layer; and 4) add object triggers to base layer.

Remember, this post does not include the development instructions for every slide in the original project. It only includes instructions for the content slide (named Skull) and the corresponding content lightbox slides. You can find instructions for creating the custom glossary in the How to Create a Custom Glossary in Articulate Storyline post.

ENOVATE LEARNING HOW -TO CREATE INTERACTIONS GUIDE

Contact

If you have any questions about this article or our company, please contact us at info@enovatelearning.com or (727) 897-5456.

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.