Serious eLearning: Use Interactivity to Prompt Deep Engagement

Elements of Interactivity

The Serious eLearning Manifesto challenges us to move beyond typical eLearning to the values  and principles of Serious eLearning.   One of those principles is, to quote the manifesto, ‘Use Interactivity to Prompt Deep Engagement’.  The sky is the limit in terms of what that actually means.  We know that it means something beyond page turners and roll overs.  Authoring tools offer us templates that have interactivity logic baked into the template.  The tools’ form-based interfaces allow us to provide information that feeds the template.  To do something original – outside of the constraints of a page turner presentation, or even an interaction template — requires a bit of code.  Few authoring tools allow you to realize your design fully without the knowledge and application of some basic coding.

ZebraZapps is  one of the notable exceptions.  ZebraZapps enables you to build complex interactions by wiring objects together.  A click, hover, drag or collision, for example, on one object could change the properties of another.  Dragging the earth and moon along their orbital path can cause the rise and fall of a tide graphic.  Authors connect the drag of an object constrained to a path to the height property of another object.  Expressing this relationship comes from wiring the drag event of one object to the property height of another object.  This expressiveness through the action of wiring is rare.  Most systems enable this expressiveness through language.  In other words, code.

If you google “should instructional designers learn to code” you’ll get more than 37 million results and many opinions.  My own view relates to the situation that many instructional designers find themselves in.  Whether they support a university department or mid-sized firm, they lack access to a programmer.  They are limited to what they know and how well they can work an authoring tool like Storyline or Captivate.  For them, a little knowledge of code can go a long way.  With a little knowledge, they can realize some pretty sophisticated designs.  They can do more than ‘click and present’. 

In the late 80s I was driving down a dark, country road listening to MPR.  The story was on Interactive Video.  Laserdiscs.  I was enthralled by the possibilities.  I asked my dean who was completing an advanced degree at the time in computer-based learning, what I needed to learn to control an interactive video laserdisc.  He answered “C”.  C was a programming language and his answer, which was actually incorrect, sealed my fate.  I began studying my first programming language oblivious to tools like TenCore and Course of Action (progenitor of Authorware) that afforded a much simpler way to control the laserdisc.

To finish this anecdote, I also began to study instructional design at the University of Minnesota.  At my first Wisconsin Distance Teaching and Learning Conference, I attended a pre-conference cracker barrel session.  Sitting around drinking wine were a bunch of researchers from Alberta’s Athabasca University.  I posed the question to them: “should instructional designers learn to code”.  The answer from at least one was unequivocal.  Become an instructional designer or a programmer.  You can’t do both.  There is too much to learn in either discipline.

So, I don’t necessarily take issue with that.  There is so much to learn in either discipline.  But modern authoring systems give us a way forward where we don’t have to totally geek out.  With just a few coding skills we can go long long way to realizing the serious eLearning principle:  “Use Interactivity to Prompt Deep Engagement.”

So let’s explore the basic prerequisites to interactivity.   There are three parts to this post.  First, this post discusses the relationships between computer code and this thing called interactivity.   Secondly, this video (LodeStar 9 — Elements Of Interactivity – YouTube) demonstrates a simple interaction that is made possible with the LodeStar eLearning authoring tool and its script (code) editor. Lastly, this DIY tutorial (Making your projects interactive and interesting with a little bit of code | LodeStar Help (wordpress.com)) walks through the video example step by step.

But first we need to look at ‘interactivity’ and understand where we benefit from some knowledge of coding.

The Serious eLearning Manifesto states that “We will use elearning’s unique interactive capabilities to support reflection, application, rehearsal, elaboration, contextualization, debate, evaluation, synthesization, et cetera”.   When we examine this list of strategies/activities and consider the unique interactive capabilities that will support them, we start with the following:

  • Ability to store information about the learners and their behavior.
  • Ability to offer something different and individualized based on this information.
  • Ability to create a visual, manipulatable, and functional learning environment that suggests an authentic (if not totally realistic) context.

That’s not an exhaustive list.  It’s a start.  It promises more than page turners and roll-overs.  Now, we need to match these capabilities with the authoring tool and the required code.

 

Ability to store information about the learners and their behavior.

Variables are used in code to store information.  The information can range from a number to a sentence to a list to a full essay.  Variables provide a human-friendly way to store and retrieve information.  They represent addresses in the computer’s memory.  As instructional designers we don’t need to know anything about those gobbledygook addresses or how the information is stored physically in the computer.  We usually need to know whether the variable is intended to store a number or a string of characters. (See Appendix A) 

So what can we store in a variable?  The answer is many things. 

  • Points scored
  • Type of question answered incorrectly
  • Number of tries
  • Learner’s journal entry
  • Bookmarked page where the learner left off
  • Much much more

In a recent eLearning program, our objective was to help the learners use LinkedIn effectively to promote their professional brand.  Their eLearning task was to help a fictitious character build up his Social Selling Index.  The index is made up of four components: brand, people, insights and relationships.  Successful completion of the activities increased the character’s brand index, people index, insights index, and relationships index.  We created four variables and, you guessed it, they were:  brand, people, insights, and relationships.  Each activity was categorized and affected one of these indices.  In other words, we increased the numerical value in the corresponding variable.

Variables included in a LodeStar authored eLearning module

This contributed to what the Serious eLearning Manifesto calls authentic context.  The performance objective was to help employees increase their SSI.  The activities in the eLearning module increased the character’s SSI.  We could have designed a presentation and a quiz.  We didn’t.  But to achieve that authentic context, we needed to store values in variables. 

To learn more about variables, complete the hands-on exercise shown in the video (mentioned above) and the accompanying tutorial.  You can download LodeStar 9 and use it at no charge to complete the exercise.  LodeStar Learning Corporation

Ability to offer something different and individualized based on this information.

In another recent project, we created a simple simulation of a workplace engagement platform.  The simulation helped guide employees through the steps of requesting feedback from their supervisor, co-worker or reports. A future simulation will be focused less on the procedural and more on the best practices of soliciting and giving feedback.  The first simulation was a post-training exercise. Our HR Director conducted the training.  The post-training exercise helped refresh participants’ memory on the basic steps.   The strategy was to add points for correct choices and subtract points for incorrect choices.  In response to wrong choices, feedback steered participants in the right direction.    A counter in the bottom left corner showed the result of correct and incorrect choices.  It was a bit of gamification but always with the intent to guide participants to the right choice.  In other words, guided practice.

So what role does code play?

This simple simulation wasn’t built from a template with some sort of pre-defined logic.  It was custom built for our purposes.  But it was a very simple construction. We began with a blank screen, uploaded screenshots and defined click/touch areas.

As a result of click, we wanted to a) add or subtract points and b) branch to a new screen or display an overlay.  We never subtracted points multiple times in response to multiple clicks on the same thing – but we always showed feedback.

Code can help us to:

  • Check if the item has been clicked before.  If no and if correct choice, add points and then branch.  If no and if not correct, subtract points and provide corrective feedback.  If yes and incorrect, increment a counter to provide another level of feedback with more urgency.
  • Store a value that enables us to check if item has been clicked.

These rules are simple.  They can be complex.  In this simple example, we use variables and conditional logic (i.e. if statements).  We also use branching, which, in this case means, display an overlay or display a new screen with hotspots and more code that gets executed when the invisible hotspot is clicked on.

A Simple eLearning Simulation

To be true to this section heading (i.e. Offer something individualized) , we could have gone further.   If the participant breezed through a scenario, we could have used conditional logic to increase the difficulty of the scenario.   If the participant stumbled through, we could have kept the level of difficulty the same (i.e. plateau).  The same tools apply: variables and if-then statements.  I’m tempted to say that this approach is simpler than trying to shoehorn a pre-programmed template to your needs.  

Ability to create a visual, manipulatable, and functional learning environment that suggests an authentic (if not totally realistic) context.

The screenshot below shows the beginnings of a tutorial on automatic direction finding (ADF), an older navigational method for airplane pilots.  There is just enough detail to make this panel somewhat realistic but the panel is a simple composition of ellipses, paths, rectangles and text.  The Scalable Vector Graphic (SVG) is composed of these elements.  Each element can generate a click event that can result in the execution of some code.  In the screenshot we are highlighting a switch that has the id of g2423.  When this switch is clicked, with a bit of code, we can cause something to happen.   The graphical element is tied to a LodeStar branch option.  The branch option executes commands that relate to a NDB (Non-Directional Beacon) that the pilot can tune in – in this case, the audio playback of Morse Code to identify the beacon.   As I’ve heard Ethan Edwards from Allen Interactions say many times, you just need enough realism to accomplish your learning objective.  Any more and you’re wasting your time or your client’s money or both.

Automatic Direction Finding — eLearning Module

To show another example, in the video and tutorial link referenced in the conclusion, I walk through a simple example of how to make Scalable Vector Graphics interactive.  I walk through an example of a traffic light switch.   I chose this example because it is a little easier to understand than the ADF on an airplane.

A LodeStar Learning tutorial on variables, conditional statements, functions, and SVG graphics

 

Conclusion

In the pursuit of serious eLearning and meaningful interactivity, I’ve noted LodeStar’s ability to support variables, conditional statements, branch options and the ability to change the properties of objects.  Other authoring systems also support these concepts and require the author to understand the basics behind variables, conditional statements and logic in general.  Allen Learning Technologies’ ZebraZapps requires no coding – but it does require the instructional designer to think logically.  Wiring replaces code, but logical reasoning is still required.  Articulate Storyline has the concept of triggers and supports events such as clicks, hovers and drags.  Those events can be tied to property changes of Storyline’s native vector format.  Storyline also supports variables and has an easy-to-use interface for building sophisticated conditional statements.  Adobe Captivate supports the association of actions with graphics.  For example, the learner can click on a rectangle associated with an action such as show/hide and increment/decrement.   Captivate also supports an interface that can apply conditional logic to an action.  For example, a variable might keep track of slide states.  Each state can house different text.  As the learner clicks a rectangle, an ‘if’ condition displays the matching text based on the current value of the variable.   In short, Storyline and Captivate support the idea of variables, events, conditional statements and the ability to dynamically change the properties of graphics.  ZebraZapps has the same ability but without requiring a line of code. 

Whatever the authoring tools’ approach, the ability to store information about the learners, to offer something different and tailored for the learner, and the ability to create a visual, manipulatable, and functional learning environment relies on the instructional designer’s logical thinking and the authoring tools’ ability to store values, change course based on conditions, and modify the visual environment in some way.

These resources can help you get started.  The first two, I’ve already mentioned.  The third is a terrific resource to learn the basics of coding.

LodeStar 9 — Elements Of Interactivity – YouTube

Making your projects interactive and interesting with a little bit of code | LodeStar Help (wordpress.com)

Learn to Code – for Free | Codecademy

Appendix A

To illustrate the concept of data type in variables, examine the following table:

Name                    Rank

Joe                         11

Anna                      2

Kim                        1

In the preceding table, Kim came in first place, Anna in second, and Joe in eleventh place.    A variable stores a person’s rank.  If we interpreted the information in the variable as a number, then this would be the sorted order:

Kim     1

Anna   2

Joe       11

If we treated the variable as a string of characters, this would be the sorted order:

Kim     1

Joe       11

Anna  2

In the second case, the value stored in the variable is treated as a character.  In the computer’s character table, ‘1’ is assigned the numerical value of 49.  ‘2’ is assigned the numerical value of 50.  The computer compares the first character 1 to the first character of 2.  It looks up the character value and processes the comparison as 49 to 50.  49 is lower, therefore, the computer places 11 before 2.    But that’s practically all there is to the complexity.  Variables store information.  It matters whether we interpret the information as numbers or as characters. This is known as the data type of the variable.

10 Techniques to Engage Students

The instructor as designer recognizes that the online platform can do more than simply compel students to read, watch, and listen. With carefully designed learning activities, instructors can engage students in explaining, categorizing, inferring, applying, solving problems and more. In short, rather than simply reading content, students can be working and interacting with content in meaningful ways.

Our audience is the instructor as designer. We hold on to the hope that online learning won’t be commercialized to the point of reducing instructors to proctors. We value the instructor as designer because no one understands his or her students’ needs better than the instructor. And, although developing online learning may be time consuming, it’s a lot of fun. Who wants to delegate that entirely to publishers?

Screenshot of the LodeStar eLearning authoring tool

Screenshot of the LodeStar eLearning authoring tool

In recent posts, we’ve been thinking and writing about larger design concepts that help instructors to engage students. This article, in contrast, surveys a range of techniques supported by the LodeStar eLearning authoring tool — sometimes in minute detail — that sharpen the edge of a well-designed activity and make it more effective.

Unless, you follow the development of the LodeStar authoring tool very closely, some of the items below will come as a surprise to you. Again, some of these items are simply techniques that will enhance your online learning projects; other items are larger in scope.

Let’s start with some simple techniques and then work our way up.

Introduction

The LodeStar eLearning authoring tool offers a range of templates that help instructors build online activities. The ‘Swiss Army Knife’ of templates is the ActivityMaker template. If you wish to get a good sense of what ActivityMaker can do, visit our post at https://lodestarlearn.wordpress.com/2015/01/03/12-ways-to-engage-students-with-elearning-authoring-tools/

This article (not the link) dips into some of the settings of the authoring system that can affect student engagement in a significant and meaningful way. Each of the techniques is numbered and listed below.

#1: Link to other pages in a project

Knowledge is an interconnected web of informational, procedural and conceptual relationships. Sometimes, we want our designs to pick a ‘happy path’ through a topic’s complexity. We want students to start with a limited number of simple propositions or declarations and build up to a more complex understanding of the subject matter. Sometimes we want students to infer generalizations from the information that is presented to them in a relational manner.

A LodeStar activity can be a linear progression through content and application or it can be an interconnected website or both. A LodeStar activity can have navigational buttons that step a student through the content or it can turn off navigational buttons. Students can navigate through links, table of contents, or branching (discussed later).

For example, instructors may want to create a menu to give students choice of content. The menu page in the ActivityMaker template is restricted to four menu options and may, therefore, not be satisfactory. What if an instructor wanted five or … ten menu items?

What if an instructor simply wanted to link together pages in a LodeStar activity? Fortunately, the technique is simple in LodeStar 7.2 build 12 or later.

To make this work, be sure to give each of your pages a unique page ID. Once you have given your pages a page id, then select text that you wish to convert to a link. Click on the link button in the editor. The pull- down menu will reveal page id’s to you both in name and numerical format. Select the page that you want linked.

Of course, you are not restricted to pages within LodeStar. You can link to anywhere on the internet.

#2: Link to an overlay

So now that we know how create links to pages within LodeStar, let’s see what more we can do. Typically, links cause the program to jump to the linked page. If designers check ‘Show as Overlay’, the linked page displays as an overlay. In other words, students won’t jump to the page. The linked content gets overlaid on the current page. Students don’t lose their place or the context of the learning.

Note that text pages, with or without graphics, make the best overlays. Other page types are restricted from acting as overlays for technical reasons.

#3: Make Use of the Page Options

Each page type in ActivityMaker comes with various options that will help instructors to enhance the students’ experience.

The speaker icon enables instructors to import an MP3 file. In the audio dialog they can choose to display a player control to pause and play audio.They can also cause the audio to play automatically when the page starts.

Pages with audio look like this:

A small audio icon appears at the top left when audio is available

A small audio icon appears at the top left when audio is available

I’ll review some of the other controls that instructors may see either on a text page or question page or both.

Controls found on the right side of LodeStar pages

Controls found on the right side of LodeStar pages

The Correct Answer and Incorrect Answer branch icons allow instructors to branch or provide feedback based on overall (page level) correct or incorrect responses instead of answer level option branches.

The Table of Contents check box adds the current page to the table of contents. Different options for table of contents are found under Tools > Project Settings.

The Resources check box turns the current page into a resource that can be accessed at any time. Checking the check box causes a button to display at the bottom of the screen (depending on the layout), which will bring up the page as resource at any time.

Again, text pages, with or without graphics, make the best resources.

The ‘Do Not Display Correct Answer’ suspends feedback that informs the student of the correct answer.

The ‘Use Multiple Choice Radio Buttons’ converts the multiple select question type to a multiple choice question type. In playback mode, students will see radio buttons rather than checkboxes next to each answer option.

‘Point Value’, of course, assigns points to the current Question page.

‘Remove from Flow’ prevents the page from being displayed, unless branched to.

#4: Use Page Branching to Differentiate Instruction

The following is self-evident and almost foolish to write, if not for common practice: Student’s don’t all learn in the same manner. They don’t share the same level of prior knowledge, aptitude, experience, motivation, etc. A benefit of online learning, which is largely unrealized today, is that we can differentiate instruction based on student choice and performance.

Here is a recital of the various ways that projects created from the ActivityMaker template can differentiate instruction.

  • Links to different pages (content areas) offer students choice and a sense of control over their own learning. This is particularly important for adult learners.
  • Displaying pages as resources allows a student to summon up page content at any time. The student may be working on a case study and may wish to have quick access to critical information.
  • Branches based on performance either at the answer option level, page level or section level. The branch icon appears in LodeStar in various places. We see it next to answer options on the multiple choice question page. That means that a branch option and/or feedback will display if that answer is picked. There are many branch actions. ‘Jump to Page’ is one example.
  • Page Level branches follow a branch and/or provide feedback based on overall correct or incorrect responses. For example, in multiple select questions it might be difficult to branch based on any one selection. A page level branch can be based on whether or not the student answered correctly overall.
  • Section level branches are accomplished with gates. A ‘Gate’ is an ActivityMaker page type. Gates support all of the branch actions supported by answer level options and more. In other words, gates control program flow. For example, the program can jump to remedial activities or a higher level of challenge.

#5: Use Video to Bring a Project to Life

Even though the well-known educational psychologist Richard E. Mayer observes that we don’t fully understand the role of video in online learning, he acknowledges that it plays an important role.

In our view, short videos can bring an online learning project to life. It can bring experts to the course site; provide students with an audio-visual look at phenomena in, perhaps, a more efficient way than text and graphics; and it may be the preferred mode of learning for many students.

LodeStar supports three important forms of video.

One, the ActivityMaker template video page supports YouTube Video. Rather than fussing with embed codes, instructors can simply paste a YouTube URL into the main field. Although the LodeStar previewer doesn’t display YouTube videos, instructors can preview videos by launching the project in Firefox. The Firefox browser supports the preview of local resources. Other browsers do not.

Two, ActivityMaker enables an instructor to link an MP4 video file that is available by URL over the internet. LodeStar supports merging an MP4 video from an internet source with a WebVtt (.vtt) caption file imported into the project.

Three, ActivityMaker enables an instructor to import an MP4 file into the project.

#6: Use Flashcards to Help Students Remember

When students struggle to remember a term or definition it increases their cognitive load and makes the assimilation of new information more taxing than need be.  Many strategies help students remember information.  The use of Flashcards is but one example.

ActivityMaker supports Flashcards. In other words, Flashcards are part of the Swiss Army knife that ActivityMaker represents. The positive side is that a Flashcard activity can be blended with other pages that engage students in such things as video, text and graphics and checks for understanding. The negative side is that instructors have found it challenging to set up the gates that are needed for incorrectly answered flashcards to be returned to the queue.

LodeStar now offers the Flashcards template. Instructors will find the gates preset correctly. Instructors need only add the instructions, fill in the first card and add more. This template is still based on the ActivityMaker template. That means that instructors can add other page types and benefit from the full functionality of ActivityMaker.

#7: Use Instructional Design Patterns (compound strategies) like WebQuests

In previous articles, we introduced the concept of instructional design patterns. If you missed the articles, start with https://lodestarlearn.wordpress.com/2015/05/04/instructional-design-patterns/

WebQuests are one example of an instructional design pattern. WebQuests are an inquiry-based format, first introduced by Dr, Bernie Dodge at San Diego State.

LodeStar now offers the Webquest template to make it easier for faculty to build them and export them to learning management systems. Webquests are extremely popular in K12, but they show great promise in higher education. In brief, a Webquest sends students out into the internet with a purpose. A Webquest defines a task for students to complete, often in groups, and then spells out a process for completing the task. A Webquest offers a finite set of links as resources that have been vetted by the instructor or ‘an expert’.

For a closer look at Webquests in area of nursing education, view the following quantitative and qualitative study submitted to the International Journal of Nursing:

http://aripd.org/journals/ijn/Vol_1_No_1_June_2014/4.pdf

The LodeStar Webquest template is also based on ActivityMaker. That means that Webquest authors have the full range of ActivityMaker capabilities open to them. At the same time, instructors do not need to complete all of the set up required for a Webquest.  That is all done for them in the Webquest template.

#8: Use eBooks (epub 3)

If you missed our article on Open Textbooks and ePub, you’ll want to visit the following link:

https://lodestarlearn.wordpress.com/2015/07/29/open-textbooks-and-epub/

In short, LodeStar enables instructors to author their own eBooks. Actually, authoring an eBook may seem daunting. The epub3Maker template supports not only eBooks but something much much smaller in scale such as white papers,  pamphlets, lab manuals, course introductions….whatever.

#9: Jazz up your Activities with Themes and Layouts

LodeStar now supports both themes and layouts. Themes enable instructors to choose from a number of color coordinated presets. Theme is mostly about color. Theme controls the colors of the header, footer, content area and HTML background. Instructors can even click on the advanced button in the ThemesManager dialog and create their own header and footer gradients.

Themes have been around in LodeStar for a long long time. Layouts are relatively new.

Layouts enable instructors to choose from a range of presets that affect the position of the header, footer, content body, table of contents and any gadgets that are used in the project.

With the combination of Themes and Layouts, instructors can create a unique look for their projects.

#10: Infographics

Infographics can play a number of roles in eLearning. They can provide data in a pleasing pictorial format through the use of headlines, graphs, symbols and images. They can outline a topic of interest to help students organize material and understand up front what some of the key points will be. They can be used to assess students when instructors invite students to generate their own infographics to communicate their understanding of a key issue or concept.

Here is the typical infographic:

http://elearninginfographics.com/elearning-statistics-2014-infographic/b

Here is one more to look at.

The following infographic was created in LodeStar and combines a Prezi style presentation with an infographic style of presentation. It introduces seven phenomena that we are paying close attention to:

www.lodestarlearning.com/samples/Ten_Trends_Infographic/index.htm

Conclusion

Instructors and students benefit from LodeStar’s rich array of options. Instructors can choose from a variety of templates. The ActivityMaker template offers an array of page types. Page types can offer an array of options. All of this helps the instructor create a rich and engaging experience for students.