Three Learning Interactions from One JavaScript Function

October 4, 2018
Jim is an independent consultant working in the fields of training, communication and change management. He has extensive experience supporting large scale organizational change efforts through the creation of training and communication programs. Jim is a licensed PROSCI professional and holds a Ph.D. in Organizational Psychology from the University of Akron.
Wizard 21 posts
Followers: 20 people
Independent Consultant
0

Three Learning Interactions from One JavaScript Function

Jim is an independent consultant working in the fields of training, communication and change management. He has extensive experience supporting large scale organizational change efforts through the creation of training and communication programs. Jim is a licensed PROSCI professional and holds a Ph.D. in Organizational Psychology from the University of Akron.
Wizard 21 posts
Followers: 20 people
October 4, 2018

Click to Launch Project: Play

Learning Interactions are components of Adobe Captivate 2019 that provide the learner with a specific way of viewing information or interacting with published courses. For example, a Glossary is a Captivate Learning Interaction that presents terms in a list and allows learners to search the list using an input field or scrollbar. A number of contributors have created videos and blog posts on Learning Interactions, and I’ve listed them in the reference section, should you want to view them yourself.

You may be tempted to call Learning Interactions “widgets”, and you wouldn’t necessarily be wrong. However, as Leive Weymeis notes,  within the Captivate environment a “Widget” refers specifically to components compatible with Adobe Flash (.swf) while Learning Interactions refer to those compatible with both Flash and HTML5. A subtle, but important distinction when you’re developing courses.

Learning Interactions have a number of advantages, including improving engagement through the organized presentation of content and increased opportunities for user interactivity. Another advantage is that you don’t have to create them, as there are a number of Learning Interactions in Captivate ranging from a simple Table to games, such as Jeopardy and Who Wants to be a Millionaire.

While Captivate’s Learning Interactions provide great features and functions, you could find yourself in a situation where you don’t need all the bells and whistles or want greater control over slide layout and content. Learning Objects require that you cover the entire slide, and while some configuration and use of alternative themes is available, the basic slide layout is standardized.

Recently, I found myself in a situation where I wanted some of the functionality that Learning Interactions provide, but couldn’t find a Learning Interaction that was consistent with my overall graphic design concept. After giving it some thought, I decided to create my own, and while they don’t contain all the functions of the onboard Captivate Learning Interactions, they worked for me. JavaScript is a personal preference for me, and you could likely create something similar with Captivate’s Shared Actions.

This article presents three simple interactions created with Captivate 2019 and JavaScript:  A Tabs interaction, a Timeline interaction and a Process interaction. The code is set up in such a way that all three interactions used the same JavaScript function, provided a structured naming scheme was used for a relatively common set of multi-state objects.

If you’re familiar with JavaScript and multi-state objects, you can jump to the JavaScript code later in the post. I’ve included comments that explain how it works. If you’d like more detail on the reasoning behind the code, I’ve included additional detail and pictures in the following sections.

Component Objects: Multi-State Rectangles and Circles

The fundamental components of the interactions in this article are multi-state rectangles and circles, with one dedicated object each for titles, text and pictures. Each multi-state object was a container of sorts for all the content of its type. In the figure below, the highlighted rectangle (ttp2_pic) contains a series of states each having a picture corresponding to a “Milestone” in the Timeline interaction. For example, “pic_1” corresponded to a picture for “2010” while “pic_9” corresponded to picture for “2014”.

In order to make the JavaScript function work, without resorting to additional scripting, each Learning Interaction was limited to one multi-state object for title, text and pictures. In other words, all content for a single interaction was displayed in the same objects, a “single” display of sorts.

In contrast, there were as many buttons in each interaction as needed, with each button serving as a trigger for a specific state. For example, there were 9 buttons in the Timeline with each corresponding to a specific point in time. When a button was clicked, such as the “2010” button (i.e., ttp2_button_1), it would change the state of the related title, text and picture objects to the state associated with 2010 (i.e., title_1, text_1 and pic_1).

Naming Conventions

In order for the buttons to “call” the appropriate title, text and picture states, a standard naming scheme was used. While the end result was that there was no need to use variables in Captivate, it did mean that care had to be taken in naming each multi-state object and button across the three interactions. The general scheme is shown in the figure below.

In short, the slide was the name of the Learning Interaction, with “ttp” signifying “Tabs, Timeline and Process”. To ensure each interaction had a unique name, a number was added to the end. For example, the Timeline was the second interaction so it was named “ttp2”.

In turn, the Learning Interaction name (e.g., “ttp2”) served as a prefix of sorts for all display objects and buttons on the slide. This ensured they could be uniquely identified by Captivate and the JavaScript function. In addition to the Learning Interaction name prefix, each button received a number at the end to distinguish them from other buttons on the screen.

Invoking JavaScript

Clicking on a button resulted in calling the f_tabTimeProcSing() function, named for interactions “Tab”, “Timeline” and “Process”. The “Sing” text string indicates a single set of display objects (i.e., title, text, picture). The function sends three key arguments:

  • numberButtons: The number of buttons used in the specific interaction (e.g., “9” for the Timeline)
  • charWidgetName: The number of characters in the “prefix” of the button name corresponding to the “widget” (Learning Interaction) name (e.g., “4” for “ttp2”)
  • numbCharStem: The number of characters excluding the number at the end of the button name (e.g., “12” for “ttp2_button_”).

Example: f_tabTimeProcSing(“9”,”4”,”12”);

For the three interactions in this post, much depends on correctly naming the objects, especially the buttons. While a bit tedious, it resulted in only about 12 lines of code and allowed for the creation of a  large number of independent Learning Objects within the same project.

JavaScript Execution

There are three general areas of execution in the JavaScript:

  1. Extracting the active button’s name, its “prefix” (i.e., interaction name) and “suffix” (i.e., ending number)
  2. Change state of all button states to “inactive” using a loop limited by the number of buttons (numberButtons).
  3. Change state of all objects associated with the button “prefix” and “suffix” to “active

Invoking JavaScript Function

//Invoke Function via Button Click

f_tabTimeProcSing(numberButtons,charWidgetName,numbCharStem);

Executing JavaScript Function

/*

Tab, Timeline and Process Widget – Single Set of Display Objects

Parameters: Number of Buttons, Widget Name, Number of Characters Excluding Number at end of Button Name

*/

function f_tabTimeProcSing(numberButtons,charWidgetName,numbCharStem) {

//Extract Active Button Name, Widget Name and State Number

var v_buttonName = this.document.activeElement.getAttribute(“id”);  //Get Id of active button

var v_widgetName = v_buttonName.slice(0,charWidgetName);  //Extract widget name from button

var v_contentNumber = v_buttonName.slice(numbCharStem);  //Slice state number off  button’s end

//Deactivate Previously “active” Button by Setting all Buttons States to “inactive”

//Note: Number of Buttons is Used to Limit the Loop

var i=1;

while (i<=numberButtons){

cp.changeState(v_widgetName+”_button_”+i,”inactive”);

i++;

}

//Set State of Clicked Button to Active

cp.changeState(v_buttonName,”active”);

//Create Target Names of Multi-State Display Objects Using Widget Name and Content Type

//Create State Using State Type and Unique Number at End of Button Name

cp.changeState(v_widgetName+”_title”,”title_”+v_contentNumber);

cp.changeState(v_widgetName+”_pic”,”pic_”+v_contentNumber);

cp.changeState(v_widgetName+”_text”,”text_”+v_contentNumber);

}

Conclusion

While the Learning Interactions created weren’t as sophisticated as the those within Captivate 2019, they did serve the requirements of the project, especially in terms of creating a common graphic design theme across the slides. While some of the additional Captivate features, such as animated process boxes or a responsive design, would have been nice, they weren’t needed.

References

Adobe eLearning | Create learning interactions in Adobe Captivate

Lieve Weymeis | Tips – Learning Interactions

The Captivate Team | Introduction to Drag-and-Drop interactions

Allen Partridge Ph.D. – Adobe eLearning | Smart Learning Interactions Tutorial

Paul Wilson | Adobe Captivate – Make Your eLearning Interactions Experiential

Media

Daniel Jacobs | Sydney Opera House

Jeremy Galliani | Sydney Opera House

Wallpaper Flare | Green and Black Floral Textile, Colorful, Abstract

Comments (0)
Add your comment