The Teaching Machine – Past, Present and Future

Robert N. Bilyk
President, LodeStar Learning Corporation

I’ve been reading Teaching Machines, The History of Personalized Learning by Audrey Watters1, who may be best known for her “Hack Education” blog.  Teaching Machines is a great read.   It was published in 2021.  Since then, Audrey Watters posted her last on ‘Hack Education’ and, according to her post, no longer writes about Tech Education. 

The Past

A good part of Teaching Machines is dedicated to B.F. Skinner’s Teaching Machine.  By today’s standards, it’s a crude mechanical device.  The early versions were wood boxes that displayed questions through a small window and required students to write answers on a paper strip.  Once students submitted their answers, they pulled a lever to display the answer and advance the paper strip.  The questions and answers were printed on a paper disk partitioned into pie wedges.

For fun, I simulated an early prototype of B.F. Skinner’s Teaching Machine.  I used our LodeStar Authoring tool to simulate how the early machine worked.

An early prototype of B.F. Skinner’s Teaching Machine

See the simulation at https://lodestarlearning.github.io/Teaching-Machine/index.htm

Films from that era (the 50s) conjure up rows of students working on the machines – a setting not unlike a factory floor with row upon row of workers at their sewing machines.

And yet, as Watters writes, the impetus – the motivation – behind the design of these teaching machines was largely, in the opinion of their inventors, altruistic and intended for the benefit of the student.

Watters recalls how Skinner visited his daughter’s 4th grade math class.  The teacher wrote math problems on the board.  Some students finished quickly and squirmed in their seats as they waited for the class to progress.  Other students struggled to complete the problem and perhaps never successfully finished.

Fast forward thirty years.  I was a high school language arts teacher in the 80s.  One of my classes consisted of students who could not read or write very well.  I’ve spoken about this a dozen times.  The underlying reasons for their inability to read or write very well had to do with who they were:  some students were newly immigrated from non-English speaking countries; other students had learning disabilities; and others hated school.  I was handed one curriculum that treated the class as one homogenous body.  I really needed materials and strategies that addressed the needs of at least three populations.  I needed some form of teaching machine.

Skinner, in response to his daughter’s class, decried that “something must be done”.  I approached our Instructional Materials Center Coordinator and asked if, in any way, the Apple IIe machine in the library could help me ‘individualize’ the instruction.  For Skinner, the realization led to his idea of a teaching machine.  For me, I began a career-long journey into the world of technology-assisted personalized learning.

Minnesota Educational Computing Consortium’s (MECC) Oregon Trail on an Apple II.

From time to time, I’ve challenged myself to take a hard look at the principles that drove my pursuit to help students with technology.  As a starting point, I was interested in the following ideas:

For the student:

  • Go at your own pace, where the learning objective is constant, but time is variable.
  • Get quick feedback.
  • Have fun.
  • Pursue lesson branches based on your interest, choices and performance.
  • Be challenged.

For the instructor:

  • Free up time for individualized help.
  • Get information on what questions students are consistently getting wrong. 
  • Inform future lesson plans.

I used computer programs on the Apple IIe, but I wanted to write my own.  Several years later, I was headed home on a dark country road, listening to Minnesota Public Radio.   I was listening to a story about interactive video discs – and I became smitten.  At this point in my career, I worked at a college.  I asked my dean (who had a background in instructional systems), what I needed to learn to program interactive discs.  He answered, “Learn C”.  And so I began my study of both learning theory and computer programming and camped out at their crossroads.

At the University of Minnesota, I studied curriculum and instruction.  At Saint Paul College, where I worked, I took classes from programmers who made their living at Unisys, Honeywell and other industries.  As I soon discovered, my dean’s advice was both bad and good.  It was bad because, by the 90s, one did not need to learn a low-level programming language, like C, to control a video disc player.  The TenCore Language Authoring System could do that with a much higher level language (thus easier).   It was good because I became proficient at programming and could extend authoring systems with lower-level code. In short, I was never limited by the authoring tool, only by my imagination. Later I worked on teams to design a content management system, several instructional products and two authoring systems.

The Tencore Language Authoring System (LAS)
was a TUTOR (PLATO) derivative developed by Paul Tenczar 
The Interactive Videodisc was a laser– readable random-access disc that contained both audio and analog video. The videodisc’s full motion video was displayed on a computer with the help of a video overlay card that superimposed the analog video on a digital monitor.

Authoring systems like TenCore, Authorware and Toolbook enabled designers to program the computer to send commands to the player via serial communications.

In the early 90s, the University of Minnesota introduced me to Course of Action, which was later renamed Authorware.  Authorware was a game-changer.  With this system, I could finally efficiently realize all the ideas I had started out with and that now took the form of:

  • Individualized instruction
  • Immediate feedback, or strategically delayed feedback, based on the design.
  • Fun interaction with analog video, high-fidelity sound, dithered graphics (256 color displays), three-dimensional animation (yes, in the early 90s), simulations, games….
  • Branched, non-linear instruction.
  • Data collection and reporting. (The installed computer program could gather data and, using an early standard from the aviation industry (AICC), report it to the instructor.)

It was a great start and a step toward the present. 

Authorware, designed by Dr. Michael Allen and his amazing team, changed everything. The work shifted from arcane computer commands to the design of learning experiences. Authors dragged icons onto a flowline that commanded the computer to present graphics and text, animate, play audio and video, branch instruction and execute simple scripts.

The Present

The promise of personalized instruction is partially realized today.  Our current teaching machines are programmed by smart authoring systems that can present and control media, animate, branch instruction, simulate real-world conditions in various degrees of fidelity, and report student performance through standards like SCORM, xAPI and CMI5.  We also have virtual reality, which can immerse learners in some ‘real-world’ or imaginary context, and augmented reality, which can add a digital layer over one’s interaction with the physical world.

We also benefit from gamification, adaptive learning, learning experience platforms, learning management systems, microlearning, digital story-telling, three-dimensional graphics, and 360 imagery and video.  In short, Teaching Machines have come a long way from questions displayed in a tiny window.

And yet there is still something significantly missing that would have benefited both Skinner’s daughter and my high school students…or any learner.

The Future

When it comes to the future, I’m on thin ice.  I offer this up more as an invitation to hear from others who have greater insights than I. There is so much happening in academia, industry and in academic-commercial partnerships that I’m just not aware of.  But I’ll briefly touch on what has been nagging me for years – and return to this theme in a later post with, perhaps, your contributions.

The problem, in my view, is in the finiteness of our present- day teaching machines.  As an example, years ago, my colleagues put out a math series on interactive video disc, then later on CDROM, and then later on the web.  The lessons were well presented and followed by numerous exercises in various topics like college-level algebra.

I observed students working through the math programs in Saint Paul College’s Instructional Technology Center.  If students didn’t ‘get it’ from the presentation or the exercise feedback, they had little recourse.  Fortunately, in some settings, a qualified instructor would then take over and help the student with a different tactic.  I observed settings, however, where similar programs were being used but with underqualified tutors.  If the students didn’t comprehend the lesson, that was the end of the line.  The lab monitor was unable to help them.

A lot of topics rely on a student’s prior knowledge, which may or may not be present.  In short, prerequisite skills. 

Several years ago, a fleet of‘adaptive learning’ platforms appeared on the market that proposed to remedy this short-coming.  (examples of adaptive learning systems include CogBooks, Acrobatiq, Knewton).  A lot of investment and effort went into assessing student’s performance and confidence with the subject matter and providing alternative instruction.  Some of the platforms catalogued open educational resources and used, what they called, semantic engines to match students with open resources to help them.

Adaptive learning systems are software platforms that optimize the content to adjust for the learner’s goals and current state of knowledge. They are designed to address challenges such as slow pace, difficulty, lack of practice, and insufficient mastery of content. In traditional e-learning courses, students linearly follow the path an instructor creates. They watch videos, read articles, take quizzes, and practice interactive modules often in a predetermined order. An adaptive learning system contains the same types of material but the order, pacing, and content may change for each learner. The system decides which content to show the learner based on the learner’s goal, performance and confidence level.  If the system determines the current path is too easy for the learner, it can branch to more challenging material. If it finds out the current path is too difficult, it may intervene and review prerequisite content, reduce the challenge, or slow down the pace. 

Most of these systems are proprietary and operate through subscription or a pay wall.  Presumably, students who use them benefit from them but the modern teaching machine (i.e., authoring systems, Learning management systems, learner experience platforms) needs to tap into the same technology and benefit from open systems.

Work is being done to open-source systems that use such approaches as Bayesian Knowledge Tracing.  Bayesian Knowledge Tracing is used in a number of Cognitive Tutoring systems.  This approach develops a model of a student’s knowledge in a given domain and constantly updates that model based on the student’s performance.  Probability of skill mastery can be computed from the student’s current knowledge and the proposed learning material.  Efforts are underway to use these systems to link learning management systems with open content repositories.

 A possibility in the future is that the entire web becomes the new teaching machine.  In the past, several concepts and specifications rose and fell in popularity.   We may see their renaissance.  One concept was Tim Berners-Lee’s Semantic web.

The goal of the semantic web as it relates to education is to make content on the web machine readable – and therefore categorizable and discoverable.  To support the description of educational resources several specifications exist including the Resource Description Framework, and the Web Ontology Language. 

A recently published article titled ‘Investigating the potential of the semantic web for education: Exploring Wikidata as a learning platform’2  explores the application of the semantic web in academic pursuits. 

In short, if one could accurately describe educational content (which may reside in an open educational repository), then authoring tools, Learning Management Systems, adaptive systems, etc. could discover and propose the content to a student who is struggling to achieve an objective.

The key is in an accurate and meaningful description so that its appropriateness can be evaluated for a given student and a given objective.

In the past, we haven’t done well with descriptions, ontologies, taxonomies, metadata and the like.  (By we, I mean the teaching profession.)  Even the concept of the re-usable learning object (RLO) fell to criticism.  A learning object was described by IEEE Learning Object Metadata specification.  The LOM standard defined the attributes required to describe learning content. Unfortunately, learning objects were created without adequate descriptions (after all, what was the point?) and their reusability was called into question.  In general, it’s possible that content authors don’t have the knowledge or the means to properly describe their content in a way that is meaningful to authoring, tutoring or adaptive systems.

The game-changer will probably be machine learning.  Blogs have been filled with examples of how artificial intelligence has supported content generation.  Another important use of AI will be to scan and describe open learning content.

For fun, I asked ChatGPT to parse some educational content on an electrical circuit and then provide me with a description that followed both the Resource Description Framework and then IEEE Learning Object Metadata.   I then asked ChatGPT to come up with its own machine-readable schema that included keywords and reading level.   The simple schema (markup in XML) is shown in the appendix.

The future Teaching Machine may be the semantic World Wide Web

Conclusion:

In my view, to personalize learning, the future Teaching Machine needs to tap into the World Wide Web as a resource to shore up prerequisite knowledge needed to achieve an educational objective.  The systems can’t be proprietary.  They must be open and available to a variety of platforms through an application programming interface (API).  The platforms include authoring systems like LodeStar eLearning authoring system, Captivate, and Storyline as well as learning experience platforms, adaptive learning systems, cognitive tutors and learning management systems. 

As importantly, the resources should remain in their repositories, but still report performance to a learning management system or learning experience platform.  That is now possible through standards like CMI5, but — as I’ve lamented in the past — few learning management systems support CMI5.

The teaching machine began with limited content printed on paper disks.  It progressed to include all of the affordances of the modern computer.  Its future promise might lie in open standards that connect learner needs to appropriate content scattered across the globe.

References

1Watters, A. (2021). Teaching machines the history of personalized learning. The MIT Press.

2 Evenstein Sigalov, S., Nachmias, R. Investigating the potential of the semantic web for education: Exploring Wikidata as a learning platform. Educ Inf Technol 28, 12565–12614 (2023). https://doi.org/10.1007/s10639-023-11664-1

Appendix

ChatGPT generated XML schema for a learning resource on electrical fundamentals.

<educational_resource>
    <title>Understanding Electrical Fundamentals: Voltage, Current, and Resistance</title>
    <keywords>
        <keyword>Voltage</keyword>
        <keyword>Current</keyword>
        <keyword>Resistance</keyword>
        <keyword>Electricity</keyword>
        <keyword>Electrical Power</keyword>
        <keyword>Ohm’s Law</keyword>
        <keyword>Circulatory System</keyword>
        <keyword>Electrical Concepts</keyword>
    </keywords>
    <reading_level>High School / Early College</reading_level>
    <content>
        Just as your heart produces the pressure to make blood circulate, a battery or generator produces the pressure or force to push electrons around a circuit. …..(the remaining content omitted for the sake of brevity)
    </content>
</educational_resource>

Beyond Presentations and Puzzles … to Problems

Introduction

The thrill of learner experience design is in finding the tools, techniques and strategies to engage learners with designs that go well beyond presentations and puzzles.  Often learners must solve problems to achieve a performance or academic goal and it’s in the nature of the problem that we find the best-suited strategies.

I use the term ‘problem’ very broadly to encompass many different things.  The late David H. Jonassen presented a typology of problems in his work, ‘Toward a design theory of problem solving’1.  He wrote that ‘learning to solve problems is too seldom required in formal educational settings.’  Even outside of formal education, we’re often asked to create presentations with assessments that cover some area of compliance whether it be data security, diversity in the workplace, or health and safety.  But often we’re challenged with a training problem that can’t be addressed without engaging learners with the problem.

David H. Jonassen published many books on constructivism, problem-solving and learning with technology.

The Challenge

Our challenge is to develop the right thing that gets the best results with the least expenditure of time and money.  We need strategies that are well-suited to the problem. Seasoned designers have a wide repertoire of strategies, templates, and models that can be used given a level of learning, type of learning, and type of problem.  However, this industry sees new entrants every year2 and the casual developer (an instructor, for example) may not have uncovered all of their options or know when to apply them.

What are the activity types that provide a situation, a problem to solve, and an activity that elicits student performance and constructive feedback?  What are the activities that help designers and instructors engage students at a level that involves challenge, activity and feedback.  More generally, what activities promote higher order thinking that allow us to integrate component skills into a coordinated response that enables us to complete tasks, analyze data, solve problems, and create things?

We have limited time and money.  The quick solution to any higher order learning objective is to simply talk about it, present on it, show a video, hear from an expert, ask some questions, and then, forgive me, throw the learners in the deep end.  Moreover, if we take the time to create an activity that makes the learner do things we may ask ourselves:  was the result commensurate with the time and effort?   In other words, given a learning objective and educational goal, the online instructor or trainer might wonder about the return of investment for a given strategy.  For example, an instructor may ask ‘Is it worth my time to create an activity rather than a multiple choice test?’   And what would that activity be?

Our industry doesn’t make it easy.  It turns out that the industry has many names for things.  There is no standard taxonomy with precise attributes.  And yet we can start with a few widely recognizable terms:  Interactive case study.  Decision-making scenario.  ShortSims3.  Simulation. Branching interaction.  Interactive Non-Fiction. 

Matching Strategies to the Problem

Our first clue that we need more than a presentation is that we’re asking learners to do more than just recall.  We recognize a need to engage learners’ ability to analyze, apply, synthesize, evaluate, make decisions, create things – all of which requires thinking beyond simple recall. Of course, the learner may need to recall the right fact, principle, concept, or rule that is useful in a given situation.  But it is the application of that information that is the key. We recognize that we need a story, a context, possibly varying levels of difficulty, and possibly a challenge in the form of incomplete information, confusion and stress. 

So what’s the solution?  The solution is suggested by the problem.

We can be guided by the nature of the problem that we want learners to solve or engage in.  M. David Merrill tells us that ‘effective instruction is problem-centered’.  Robert Gagné asserted that the point of education was to help learners become better problem solvers. Michael Allen emphasizes the importance of context (‘a problem-solving environment’) and challenge. Richard Mayer wrote that ‘a major challenge of education is improving students’ minds–a goal that is reflected in people being able to solve novel problems they encounter’. 

In ‘Toward a Design Theory of Problem Solving’, David H. Jonassen creates a typology of problems – a useful tool that might help in the selection of instructional activities to promote problem solving.

Categorizing Problems

David Jonassen gave us a way to categorize problems based on problem variation.  Does the problem have multiple solutions or only one?  How many steps are included in the solution?  Does the problem solution draw from multiple principles, concepts, or even disciplines?  Does it require research beyond the content offered in a program of study?  Is the problem domain specific – can it only be solved by learners who are schooled in a specific area of study — or is it general?  Do learners need varying stages of support or scaffolding as they engage in the problem?

If we’re tackling one aspect of the problem, we can think of a key principle from ‘How Learning Works’ 3. Loosely, learners need practice on component skills and then practice with integrating them.  Is our learning objective focused on one component skill or does it involve integration of multiple skills?   If the component skill is simple enough, we might prescribe an activity like a word problem or matching type of exercise.  If we engage students in a synthesis of skills, we’re going to need something more – something that has story (context) and multiple challenges. Jonassen recommends embedding instruction in some authentic context. Context is also a key element to the CCAF model.

Now we’re in the territory of ShortSims (generically, simple sims), decision making scenarios, interactive non-fiction, interactive case studies and other forms of interactions that place learners in realistic settings, challenge them, and make them do things.

A Document Management System was simulated with the LodeStar eLearning authoring tool that challenged new employees to find key documents based on varying search criteria

One way of rationalizing the design and development time relates to the complexity of thinking and acting …and the complexity of the problem.

In a ShortSim the learner is presented with choices.  The choices can cause the narrative to branch or simply advance the narrative in a linear progression.  Making better choices might cause the learner to recall past learning, read and analyze information while looking for clues.  The learner might wonder ‘Is this an instance of, for example, the unconscious bias that I’ve been told about?  If I make the wrong choice, am I compromising data security, risking my safety, … making my supervisor unhappy?’

A ShortSim can engage the learner in some pretty advanced stuff with the clever use of graphics, text and choices.

Clark Aldrich wrote a How-To book, ShortSims,
that walks designers through the process of planning and producing
a simple decision-making simulation. Full reference below

Further down the continuum of simulations, our learning objective might require the learner to make decisions in an environment that includes many variables.  The underlying model might not be a finite set of choices but a complex interplay of multiple variables.  The activity might require a coordinated, intelligent response to an infectious disease outbreak, for example.  The underlying model might be the SEIR model, which represents a population that is susceptible to a specific disease, exposed, infected and partly recovered.   The learning program might vary the number of treatment days, incubation period, contacts per day, and fatality rate.  The learner might need to observe the data and then prescribe a response.  The computer environment can present one scenario from a nearly infinite number of possible scenarios. 

The choice of one strategy over the other can relate to the complexity of the problem we are wanting learners to solve.  Jonassen helps us here. The level of realism and variability of the problem will require increasingly more sophisticated (and time-consuming) designs.

Logical problems that require students to recall information might suggest a word game, a crossword puzzle, or a multiple-choice quiz.

Algorithmic problems require learners to progress through a series of procedural steps and this might suggest a ShortSim or decision-making scenario. 

Story problems with embedded procedures might suggest word problems or interactive fiction or non-fiction that houses word problems in a longer narrative.

Rule-Using Problems and Decision-Making problems that involve defined procedures and methods can be handled with ShortSims, other forms of interactive branching and decision-making scenarios, and role-playing.

Trouble-shooting problems can begin with interactive trouble-shooting guides or low fidelity simulations but when the problem state has variation and complexity then a virtual lab or full-blown simulation might be needed that can a) generate variable states, b) represent those states to the learner in the form of dials, instruments, changes in the environment, changes in characters, etc., c) elicit learner response and d) and provide feedback in the form of dialog, pop-ups, and/or changes in the environment.

Case-analysis problems can be presented through problem-based learning scenarios, historical case analyses, interactive case studies in which the learner is presented with case descriptions and data and asked to accomplish a goal.

Additional forms of problems in Jonassen’s typology include design problems and dilemmas. The types of problems can certainly be expanded to include additional categories of problems: for example, strategic performance problems that involve business simulations and strategy games. And the list goes on …. all beyond presentations and puzzles.

Conclusion

After the designer has looked at the learner, the learner’s environment, the performance goal, the gap analysis, etc., the performance might be whittled down to a problem type that the learner may need to solve.  The problem can range from providing performance feedback to evaluating equations, from delegating authority to applying statistics to improve production.   The type of program often suggests the treatment.  The fun of being a learning experience designer is in exploring strategies and applying them where appropriate in a cost-effective, time-saving manner.

In past articles, I have covered some of these strategies. You’re welcome to visit them.

ShortSims

Interactive Storytelling

Interactive Case Studies

Decision-Making Scenarios

Simulations

References

1Jonassen, D.H. Toward a design theory of problem solving. ETR&D 48, 63–85 (2000). https://doi.org/10.1007/BF02300500

2In a 2021 survey held by Devlin Peck (n=615) (Instructional Designer Full Report 2021 | Devlin Peck), 44% of the respondents had 0 – 3 years’ experience.

3Aldrich, Clark (2020) ShortSims, CRC Press

 4 Ambrose, S., Bridges, M., & Lovett, M. (2010). How learning works: 7 research-based principles for smart teaching. John Wiley and Sons.) 

Designing with Animation

Animation can enrich the learning experience and, when used appropriately, improve learning outcomes.  New standards and new technology under the hood of the modern browser give learning experience designers a whole new set of tools and techniques to apply to their designs.  I’ll parse out the different types of animations and their uses, discuss the underlying technologies and present examples. 

To start, let’s reprise Richard Mayer, the author of Multimedia Learning. 

Mayer defines a concise narrated animation.  He explains that concise refers to a focus on the essential steps in the process. If the objective is related to understanding how a four-cycle engine works, then a concise animation would include only the details that related to the objective.  For example, I might include a simple animation of a piston traveling up and down a cylinder, compressing gas, power stroking from the combustion, exhausting the spent fuel and then refilling with fresh gas.

Wikimedia Commons ((CC BY-SA 3.0)

Concise in this example means that we focus on the crankshaft, the traveling piston, the ignition, the intake and the exhaust.  The learner is not distracted by anything not related to the objective

The image above is an animated GIF.  Most authoring tools can easily import an animated GIF. This technology, however, has its uses and its limitations.  It is difficult to use the animated GIF in a concise narrated animation because it is difficult synchronizing the 4 cycles with the narration.  If you understand four-cycle engines, the GIF makes sense.  If not, then narration will help learners understand each cycle of the process.  Fortunately, there are easy ways to sync animation with narration.  This brings us to the timeline animation.

Timeline Animation

The basic idea behind a timeline is that you control animation effects according to time.  In tools like Storyline, each row of the timeline represents a different screen element.  You can then apply entrance and exit animations to the screen element at specific times.

The timeline in our authoring tool, LodeStar, works differently.   LodeStar displays one timeline per graphical element.  Each row represents a different property such as left, top, opacity, rotation and scale.   With these five properties you can control the position of an element on the x and y axis at a specific time and you can control fade-in and fade-out, rotation and size.  These are the properties that designers typically want to animate.

In the screenshot below, you can see that I have two gears.  A left gear and a right gear.  When I select a gear or choose it from the lower right pull-down menu, I get its corresponding timeline.

As you can see on the timeline, each row represents a different property.

LodeStar Animation Editor with SVG graphic

To understand the positioning properties, we need to understand the difference between the SVG image and its sub-elements.  We also need to understand other types of images like PNGs, GIFs, and JPEGs.  These are called bitmapped or raster graphics because that is precisely what the graphic is:  a map of binary digit (bit) values for every colored pixel.  The rules for positioning bitmapped graphics and SVG elements differ.

To understand this, let’s first tackle the SVG graphic.

SVG

SVG stands for Scalable Vector Graphics. It is a vector image format that can be scaled up or down without losing any image quality. This is different from the bitmap or raster graphics which are made up of pixels and can become pixelated or blurry when they are resized.

SVG graphics are great for logos, icons, and other types of graphics that need to be scalable and look crisp at any size. They can also be easily edited with text editors or graphic design software, and they support interactivity and animation through script.

We can think of an SVG graphic in two ways: as a whole image or as a collection of elements.  Examine the SVG image of an old Buick below.  The automobile can be animated from left to right, for example, like any bitmapped graphic.

SVG Graphic on a LodeStar page

We can do that with a timeline:

Timeline applied to graphic

The timeline shows a duration of 5 seconds.  At 0 seconds the car’s left property is 1.  That means 1% of the width of the window.  At 5 seconds, the left value is 100%.  This means that the left edge of the graphic will be at the right edge of the window – in other words the car rolls off the screen.

This animation would be less than satisfactory because the tires don’t rotate.  So, if we only animated the entire graphic we’d get an inferior result.

That now brings us to SVG elements.  Loosely described, these are the sub elements of the SVG graphic.  They consist of polygons, lines, rectangles, ellipses, paths, layers, groups, and more. In the screenshot below of LodeStar’s SVG editor, we see that the rear tire is selected.  It has a cryptic id, which we can change to an easier name.  Whatever the name, this element is both programmatically addressable (meaning we can change it with a simple script) and it is separately animate-able.  For example, we can rotate the tire.  Now we can move the whole graphic from left to right and rotate two of its sub-elements to improve the animation. (You will see this in an animation sampler introduced in the conclusion.)

SVG graphic with element selected

Bitmapped Graphics

Bitmapped graphics, also known as raster graphics, are digital images made up of tiny colored squares called pixels. Each pixel represents a small portion of the image and can be assigned a specific color value. Generally, only programs like Photoshop allow us to manipulate bitmapped graphics at the pixel level.  Examples of bitmapped graphics are PNGS, JPEGs, and GIFs.

With bitmapped graphics we can animate the entire graphic’s position, opacity, rotation and scale.  But we can’t take one of its subparts (a small sub-section of pixels) and independently animate that section.  At least, not without sophisticated code. Nevertheless, bitmapped graphics have their advantages. Any photorealistic image is best captured in a bitmapped graphic.

The animate-able properties

In LodeStar, the meaning of left and top differ between SVG graphics and bitmapped graphics.  To best explain this, we need to place images in three categories:  the entire SVG graphic, an SVG element (sub-element) and bitmapped graphics that are not inside an SVG graphic.

For SVG elements, left means a translation or change along the x axis.  1 means that the graphic has shifted 1 pixel to the right.  100 means that the graphic has shifted 100 pixels to the right.

For images (including JPEGS, PNGS, GIFS and the SVG graphic as a whole), left means the percentage of the window.  0 means that graphic is painted at the very left of the window.  50 means that the graphic is painted half-way across the window on the x axis.  The reason for the difference is that LodeStar projects maintain their responsiveness to different devices with different screen widths whenever possible.

Technically, when we reposition an image, we are removing it from its normal place in the HTML document.  When we assign a timeline to an image, we are removing it from the HTML flow and assigning it an absolute position. 

If you didn’t want to remove the image from the flow (its position in the document), then you can lock the image position in the image dialog.

An absolute position means a position relative to its parent.  If its parent is 1000 pixels wide, a left position of 10 places the image 100 pixels to the left of its parent’s left edge. If the image is positioned beyond its parent’s boundaries, it is hidden.

SVG elements are displayed inside a viewbox.  We transform the position, scale and rotation of these elements without removing them from the flow. They are painted or shown inside the viewbox.  If we shift the position beyond the boundaries of the viewbox, the element is clipped or hidden.

For SVG elements it is important, when adding a left, top or rotate keyframe to also add a keyframe at the same time offset for the other two properties. SVG transformations (change of position and rotation) are defined by all three properties.

Controlling animations with script

LodeStar animations can be controlled by the timeline, as we’ve seen in the example above.  They can also be controlled by script or by a combination of timeline and script.

Let’s return to the gears example. In this example there are two SVG elements inside an SVG graphic.  In the example, the SVG graphic is not animated at all.  However, its elements (the gears) are positioned and rotated.  One gear is rotated from 0 to 360, the other gear is rotated from 35 to -325.  This causes the gears to rotate in opposite directions at a slight offset from one another so that they mesh.

A separate timeline for each graphic or SVG element

In the example we also positioned a rectangle with rounded corners at the bottom of the viewbox.  We are treating this graphic as a button. We added a branch option to the rectangle, which converts it into a button that responds to clicks.

The branch option that we applied to the rectangle is called a ‘Select Branch Option’.  When clicked, the button executes the following script:

appendValue(“rate”, 1);
var rate= getValue(“rate”)
updateAnimation(“1681686408319”, “play”, “”, “”,10, rate);

In this script, we are adding 1 (appending) to a stored value named “rate”.  We then get that value from storage and assign it to a variable named ‘rate’.  ‘var’ means variable. 

In the third line we use the variable in a function called updateAnimation().  This function allows us to

  1. Identify a page by a page unique identifier called a UID.
  2. Set the state of the animation:  play, pause, or reverse
  3. Optionally we can set the current time in the animation.  By default it starts at 0 seconds. That is why we use “” in the function and don’t bother setting the current time.
  4. Optionally, we can also state the duration of the animation.  By default, the duration is set by the timeline.  We therefore use “” in the function.  We could shorten or lengthen the duration.
  5. We set the number of iterations or the number of times the animation repeats.
  6. Lastly we set the rate. A rate of 1 is standard. A rate of 2 is twice as fast. Every time we click on the button, the animation speeds up.  The gears turn faster.
Controlling animation with LodeStar Script

Animation synced with narration

In the next example, graphics are synced to different points in the narration with the use of the timeline.

Modern browsers now offer us fast and efficient animations and audio support with the ability to synchronize the two.  This is a significant development in the web platform.

In the example below, the author added a narration and a SVG graphic to the same LodeStar page.  In the SVG graphic, the piston, connecting rod, crankshaft, valve, etc. are all SVG elements.  As you can see in the screenshot, the crankshaft is selected and shows an ID of ‘crank2’.  This helps to identify the element in the animation editor.

Synching animation to narration

After the audio narration was imported and the SVG graphic created, the author launched the animation editor.  The play button now plays the audio narration and the animation.  The author can pause the narration and add keyframes to control the position of the piston, the position and rotation of the connecting rod and so forth.

The pivot point or anchor point of the connecting rod is changed with the following buttons TL, TR, C, BL, BR.  These buttons place the pivot point top-left, top-right, center, bottom-left, and bottom-right respectively.  Essentially, we are pinning down the center or a corner so that the rotation happens around this point.  Under the hood, we are really changing the transformation origin.  The transformation origin is the point around which a transformation such as a rotation is applied.

Listening to narration in Animation Editor and adding keyframes to control position, opacity, scale and rotation

Finally, once a timeline is created for an element it can be given a unique identifier and applied to any element with script. For example, if I rotated a rectangle with a timeline on one page, I could apply that animation to a triangle on another page — with the use of script. The script function is webAnimate. (See appendix A)

Conclusion

In the sampler linked below, we can see multiple uses of animation.  On page one, we see a simple decorative animation of an attitude indicator or artificial horizon used in airplanes.  You can easily imagine how this can be applied to a simulation.

One page two, we illustrate how an SVG graphic is moved from left to right while its elements (the tires) are rotated.

On page three is the gear example.  Click on the faster button repeatedly to see a demonstration of how we controlled speed programmatically by changing rate..

On page four we have a simple graphic with foreground and background synced to an audio file.

One page five, we can immerse the viewer in a scene with the use of parallax. Parallax is a visual effect where the background of a web page appears to stay still or move in the opposite direction of the foreground.

Finally, on page six we show a narration synced to an animation.  Pausing or replaying the narration causes the animation to pause or reset.  The narration and animation are synchronized.

(Best viewed in Chrome, Edge, and Safari)

Animation Sampler

https://lodestarlearning.github.io/Animations/index.htm

Author’s Note:

Animations were done in LodeStar 10 (Beta Build 5). Secondly the script for the 4-cycle engine explanation was generated by ChatGPT, and the narration was text-to-speech using Amazon Polly.

Appendix A

webanimate(elementid, timelineid, duration (optional), direction (optional), currentTime (optional), position (optional), callBack (optional))

animates the element’s css properties based on a timeline creating with the animation editor, where id is element ID (no hashtag), timelineid is the id of an existing timeline created in the editor, duration is the length of the animation in seconds, currentTime is where to start the animation in seconds, position is the css position property which is usually set to ‘absolute’ to support top and left movement, and callBack is the name of a page whose branch options will be called when animation finishes.

Top Influences on the Development of LodeStar 10

Introduction

Modern web pages offer designers a rich palette of media types and standards to create engaging learning experiences. The web page has become an amazing success story.  It started as a battle ground of competing standards and self-interests and has arguably matured to become a meeting ground. 

If you aren’t on the bleeding edge, you’ll benefit from the convergence of standards. In CanIUse.com, browser support for many enabling technologies such as SVG and WebGL (explained later) shows up as green tiles across the table of browsers.  Green means these technologies are commonly supported, which is good news because learning experience designers can put these technologies to work.

caniuse.com by Alexis Deveria, available under a Creative Commons Attribution 4.0 License

Many of today’s eLearning projects are essentially webpage applications with additional standards that support communication to learning management systems or learner record stores. Many of the technologies that make the web interactive, responsive, accessible, and expressive are the same technologies used in eLearning applications.  Most of the major eLearning authoring systems are web page design systems for web pages that are hosted in learning management or content management systems.  There are many exceptions, of course, which include augmented reality systems, gaming engines and environments, and other virtual spaces that are not built on HTML5.  But let’s stay focused, for a moment, on the web.

For maturing standards, the web has become a place of agreement.  In the not-too-distant past, basic HTML markup and styling had to address the many differences between browsers and how they interpreted the World Wide Web Consortium (W3C) standards.  Even a technology that most of us take for granted, the audio file, was once unsupported by a single file format that every browser could play.  Designers had to choose both an audio format and a fallback format. Thankfully that has changed.  All browsers can now legally play the .mp3 file or the HTML5 Ogg Vorbis audio format.

caniuse.com by Alexis Deveria, available under a Creative Commons Attribution 4.0 License

Soon the .m4a audio file (AAC) will be supported by all browsers and offer even higher quality audio at less the data cost.

caniuse.com by Alexis Deveria, available under a Creative Commons Attribution 4.0 License

But audio is only the beginning.  All modern browsers (IE 11 excluded) support GIF, animated GIF, JPEG, PNG images, animated PNG, and motion video in the MPEG-4/H.264 video format. 

All browsers support the language features of the last major revision to JavaScript.  JavaScript is the code that makes the web interactive.  It is the code that makes eLearning projects interactive.  Standardization allows all of us to benefit from the interactions that eLearning authoring tools produce with less worry about browser and device differences.  (I emphasize less worry because there is always something to worry about.)

Interactive 3D has become a new frontier for eLearning.  All major browsers support WebGL, which is a method of generating 3D graphics using JavaScript and hardware acceleration.  In the early 90’s, when I first created 3D worlds, I needed an entire lab of computers dedicated to rendering three-dimensional meshes into an animation of three-dimensional images that we would transfer onto a laser disc.  Today, WebGL enables us to render a mesh into a rotatable, scalable image in real-time, all in a browser.  If you’re not familiar with WebGL, please read on.

In short, Learning Experience designers, instructors and trainers can now use audio, video, imagery, text, three-dimensional graphics, scalable vector graphics, math mark-up, interactivity, and logic to realize their grandest designs and create engaging experiences for their learners.

On the eve of LodeStar 10’s release, I am taking stock of these standards and other influences that had a strong bearing on where our product is headed.  Like all toolmakers, I am keeping an eye on effective strategies as well as emerging and maturing technologies and am imagining the opportunities for designers as we work to make these technologies practical and accessible.

Here is a list of standards and strategies that are central to LodeStar’s current development.

Scalable Vector Graphics

A lot of our development has focused on Scalable Vector Graphics.  SVG offers the designer many benefits.  Simple graphics such as the famous SVG tiger pictured here keep their sharpness regardless of the display size and the resolution. They are scalable.  They also offer more opportunity for accessibility.  Scaling can help learners with low vision.  The SVG title is readable by most screen readers. Also importantly, the SVG graphic is made up of individual elements whose properties can be changed by program code or user interaction.

LodeStar displays SVG graphic

In the screenshot below, the tiger graphic is opened in an SVG editor in LodeStar.  The author has right-clicked on an eyeball and can now choose branch options based on selection, deselection, drag, hover over and hover out.  All of LodeStar’s branching options and script can be executed based on any of the above events.  For example, based on the click of an eye, things can happen: the eye color changes, an audio description plays, an overlay appears with a complete description of a tiger’s vision and so on.

With LodeStar, designers edit SVG graphics and add interactivity

Importing PowerPoint as SVG

We’ve never been huge fans of starting an eLearning Project as a PowerPoint.  That hasn’t changed, but LodeStar10 does support importing a single PowerPoint slide or an entire PowerPoint presentation as a series of SVG pages. 

PowerPoint supports exporting a slide or series of slides as SVG.

PowerPoint Presentation

LodeStar 10 adds support for importing a single SVG image or an entire folder of SVG images.  LodeStar interrogates each slide and looks for things like Base64-encoded images.  PowerPoint converts imported images to a long string of characters called Base64.  This is a great format for transporting images inside a single file but browsers tend to load and render Base64-encoded images very very slowly.  LodeStar detects the Base64 encoding and then translates the characters back into an image file that is loaded into the project. 

The result is that vector graphics are editable as SVG elements, and embedded images load and display quickly.  The designer can display the slide as is, edit elements and add branch options to elements.

Designer edits a PowerPoint slide in SVG editor

MathML

For a short while, all browsers supported the MathML markup language, enabling markup without the need for add-ons.

Rendered MathML in LodeStar HTML editor

But there have been setbacks. We’re looking forward to when MathML is once again available in all browsers. Given the likelihood of that, LodeStar continues to support MathML.

Support for MathML

MathML (Mathematical Markup Language) is supported by W3C as the preferred way of displaying mathematics on a web page or eLearning application. MathML describes structure and content of mathematical notation and provides for a higher level of accessibility than simply displaying an image.  Designers can quickly edit and manipulate the size of a MathML expression.  This is an improvement over taking a picture of an equation, for example, and pasting the image into a presentation.  In the past LodeStar automatically converted expressions into images or it used the MathJax library to convert expressions written in Latex to MathML.  But now we’re banking on full support for MathML in the near future.

SimpleSim

For years, LodeStar offered the Interviewer Page Type to support what we called decision-making scenarios and simple simulations.  We continue to offer that page type but have expanded the number of layout options for interactive decision-making. 

For starters, we added a new page type called the SimpleSim.  This page type supports graphics, interactive widgets, text and whatever else is needed to set the scene.  At center stage is the situational prompt and three decision options (as pictured below).   All of LodeStar’s branching options can be invoked based on the learner’s choice.   For example, the ‘Jump to Page’ branch option can bring up a scene that matches the choice and advances the narrative.   Branching options also allow us to add feedback, keep track of points, collect user responses and so forth.

To style the scene shown below, the author used a palette for the color scheme, added a header graphic through Tools>Themes, selected a layout style that set the window width and navigation at the top, and added a background graphic.   The use of palettes, themes, layouts and page types enables the author to control every aspect of this simple simulation, including the interactivity.

Look and feel is controlled by Layout, Theme, and Palette

CCAF

It’s no secret that we are huge fans of Dr. Michael Allen’s Context-Challenge-Activity-Feedback model.  In a project that was intended to improve employees’ social sales index (SSI) in LinkedIn, we set the context as a simulated LinkedIn.  For the challenge, the learner must improve the main character’s SSI score by providing the right advice and interacting with a simulated profile, notifications, messaging, etc. – just like LinkedIn!

LinkedIn Simulation

CCAF projects are not page turners or Present-and-Checks.  They can be quite advanced.  To support a more sophisticated interaction than the display of content and multiple-choice questions, LodeStar offers LodeStarScript, which can be written in the Execute Command branch option.

LodeStarScript enables designers to change the properties of graphics on the fly, including SVG graphics.  Properties can include color, position, image source, rotation, opacity, etc.  LodeStarScript offers the designer the power of conditional logic, loops, local and global scoped variables, and a long long list of functions.

In the simulation below, the learner can select a camera aperture and control exposure.  The effects of exposure are simulated with the simple change of the color and opacity properties of an SVG element.

Camera simulation with LodeStarScript

xAPI/CMI5

Megan Torrance, a veteran of learning design, authored a research paper sponsored by the Learning Guild.  I won’t steal her thunder and encourage you to read the paper for yourself, but I’ll cite two statistics from her research that tell the story of xAPI.

In a survey of 368 respondents, the majority of whom belong to organizations that create or purchase learning solutions, 44.9% of the respondents indicated that ‘We are interested in xAPI but have not used it at all.” 

Version 1.0 of xAPI was released way back in 2013, and yet 10 years later adoption is not widespread.

So what is xAPI, how does it relate to CMI5, and why are we so interested in it?  In short, xAPI and CMI5 are game changers.  They are not the same thing but they are close cousins.  An eLearning activity that uses CMI5 can generate an xAPI statement, which gets recorded in a Learner Record Store.  CMI5 can also tell the LMS whether the learner passed or failed. 

So, let me be a little more specific.

With these technologies, I can store my eLearning projects in my own repository — GitHub for example.  I can then import a very lean and simple file to the Learning Management System, which tells the LMS from where to launch the activity.  The LMS then passes to the activity learner information and a token for secure communication.

CMI5 uses xAPI technology but it also understands the vocabulary that LMSs require.  Pass/Fail.  Incomplete/Complete.  xAPI reports to a learner record store any statement that the designer has added to the eLearning activity.  ‘Learner has reached Level Two.  Learner completed a video.  Learner attempted Level Three four times.’  CMI5 can generate any kind of xAPI statement in the form of learner actions.  In addition, CMI5 can tell the LMS whether the learner passed and/or completed the module.

 But among the reasons why people don’t yet use it are:  lack of knowledge, lack of Learner Record Store, and LMS does not support it.

I am extremely fortunate in that our Learning Management System is Prolaera.  It is designed for the CPA industry.  Prolaera can import a CMI5 activity.  As a result, I can do the following:

  1. Send a statement about the learner reaching Level 5 to the learner record store.
xAPI statement

2.

Read a list of learner experiences from the Learning Management System’s Learner Record Store. (the learner’s name has been erased from the screenshot).

Learner Record Store

From the screenshot above, you can see that we can report on any learner experience.  For example, the learner first experienced the results page with a score of 200 points.  We can also see that the learner passed, satisfied the requirements, completed the module and terminated the activity.  These are all terms that the Learning Management System understands.

It may take time but CMI5/xAPI will eventually be widely adopted.  These standards are incredibly important to the advancement of eLearning.  It begins with awareness. The more designers learn about it, the more they can encourage their learning management system vendors to support it.  In the meantime, we are ready for it!

3D

Glen Fox’s Littlest Tokyo is a great example of what is possible with Three Dimensional objects viewed jn a browser.  The object is beautifully detailed with a running streetcar animation as an integral part of the 3D object.

Littlest Toyko, by Glen Fox

Designers will be able to use free tools like Blender, TinkerCAD, Sketchup or even their smartphones to produce 3D meshes.  

Smartphones like iPhone 12 come equipped with LIDAR.  LIDAR emits a laser pulse that reflects off of solid surfaces and returns to a sensor on the smartphone.  The round-trip duration is noted. From that, the software can accurately position the solid surface in three-dimensional space. LIDAR has been available in specialty instruments for a long time but for designers to be able to use this technology practically, the software needed to improve.

In whatever way the 3D model gets created (3D graphics software, downloaded from a warehouse, generated by LIDAR) it can then be loaded into a viewer and manipulated (scaled, rotated, navigated) by the learner.  Imagine vital organs or historical places or complicated machines as manipulable objects. 

Currently, we’re working on a loader and viewer for 3D Models.  The first LodeStar 10 release won’t include a 3D model viewer, but we’ll introduce it later in a minor release.

In the meantime, we do support photospheres.  Photospheres use the same underlying technology: WebGL. WebGL enables hardware-accelerated physics and image processing and rendering onto the HTML5 canvas.  The hardware is a dedicated processor called the Graphical Processing Unit or GPU.

The photosphere that appears in the screenshot shows a distorted view of an art gallery.  The first art gallery image (shown below) was produced in Blender.  The second art gallery image was taken with an iPhone at the Minnesota Marine Art Museum in Winona.

Photosphere created in Blender
Photosphere created in iPhone

The image appears distorted – in fact, spherical.

Once in LodeStar, the designer can add images, markers, and hotspots to the photosphere.  All of these things get correctly positioned on the sphere.

In the LodeStar editor below, I am adding Lawren Harris’ paintings to the gallery as well as hotspots.  A hotspot click takes the learner to another room in the gallery.  A click on the painting brings up an image overlay.  A click on the video graphic starts a video. 

LodeStar editor adds interactivity to Photosphere

The end result:

Interactive Art Gallery on the Group of Seven

Conclusion

2023 marks the twentieth anniversary of LodeStar Learning.  We filed with the Minnesota Secretary of State on March 11, 2003.  I’m pleased that LodeStar has adapted to all of the technology changes over the years.  LodeStar began as code embedded in Lotus’ LearningSpace.  It then enabled instructors to create rich learning activities in ActionScript and Flash.  In 2013, LodeStar Learning pivoted to a whole new generation of software that used HTML5.  LodeStar10 continues that progression and harnesses the power of HTML5, SVG, 3D and so much more to help designers create great learning experiences.

CMI5: A Call to Action

Introduction

Since 2000 a lot has changed. Think airport security, smart phones, digital television, and social media. In 2000, the Advanced Distributed Learning (ADL) Initiative gathered a set of eLearning specifications and organized them under the name of SCORM. In 2021, in a time of tremendous technological change, SCORM still remains the standard for how we describe, package, and report on eLearning.

However, finally, we are on the eve of adopting something new and something better: CMI5.

We no longer have landlines, but we still have SCORM

CMI5 Examples

To many, CMI5 is another meaningless acronym. To understand the power and benefit of CMI5, consider these very simple examples:


A Learning and Development specialist creates a learning activity that offers managers several samples of readings and videos from leadership experts. The activity allows the managers the freedom to pick and choose what they read or view; however, the specialist wants to know what they choose to read or watch as well as how they fare on a culminating assessment.

CMI5 enables the activity to capture both the learner experience (for example, the learner read an excerpt from Brené Brown’s Daring to Lead ) and the test score. CMI5 can generate a statement on virtually any kind of learner experience as well as the traditional data elements such as score, time on task, quiz questions and student answers. In this sense, CMI5 supports both openness and structure.

Let’s consider another example:

An instructor authors a learning activity that virtually guides students to places in Canada to observe the effects of climate change. She wants students to answer questions, post reflections and observe the effects of climate change on glaciers, Arctic ice, sea levels and permafrost. She sets a passing threshold for each activity. Once students have completed all of the units, then the learning management system registers that the course was mastered.

Let’s go further:

The instructor wants the learning activity to reside in a learning object repository or website outside of the learning management system – but still report to the learning management system. In fact, she wishes that no content reside on the learning management system. Regardless of where the content resides, she wants to know what sites students visited, how they scored on short quizzes, and how students reacted to the severe impact of climate change on Canada.

For students with disabilities, the instructor makes an accommodation and requests that the LMS administrator adjust the mastery score without editing the activity.

As the course becomes more and more popular, she anticipates placing the website and its activity onto CloudFlare or some content distribution network so that students all around the world can gain faster access to the learning activities.

The instructor works as adjunct for multiple universities and wants each of their learning management systems to get the content from a single location. In some cases, she wants the content locked for anyone who circumvents the Learning Management System and in other cases she openly lists the unlocked content with OER libraries like Merlot and OER Commons.


Before CMI5 much of this was difficult to achieve, if not impossible. So, let’s review what CMI5 offers us.


CMI5 captures scores in the traditional sense. But it also records data on learning experiences such as students virtually observing the change in the permafrost. CMI5 allows instructors and trainers to set the move-on criteria for each unit in a course (i.e. passing score before student moving on to the next unit).

CMI5 activities can reside anywhere – on one’s own website, for example, and still report to the learning management system. CMI5 enables an LMS administrator to change the mastery score from the LMS for the benefit of students who need accommodations and essentially trump what is set in the unit.

LodeStar’s CMI5 Implementation allows
authors to indicate where the content resides


CMI5 is a game changer. And yet for many – learning and development leaders, instructional designers, technologists and students – it doesn’t seem that way in 2021. CMI5 seems like a non-event. It feels like something we all talked about – a welcome change of weather on the horizon –and then nothing. Not a drop of rain.


We have been talking about and anticipating CMI5 for a long time – and yet, major learning management systems both in the corporate and academic worlds still don’t support it. CMI5 was envisioned in 2010, released to developers in 2015, and then released to the public in its first edition in 2016. We are now in the waning days of 2021—with limited adoption.


But that is likely to change.


For one, Rustici Software and ADL delivered on their promise of Catapult. Catapult is likely to accelerate adoption of CMI5. It provides many benefits to developers, including the ability to test if a CMI5 package conforms to the standard.

In my view, the learning technology architects have done their part. They brought us a meaningful set of specifications. They brought us the tools to test learning packages and to test the learning management system’s implementation of CMI5. Now’s it’s up to learning and development specialists and the instructional design community to cheer CMI5 on. It is my belief that once the community understands CMI5, spreads the word, and imposes its collective will on the LMS providers, CMI5 will become an important part of our tool bag. I urge you to share this article and others like it.


In the meantime, let’s take a deeper dive into CMI5’s potential.


Benefit One: Freedom to capture and report on any learner experience.


With CMI you can report on scores, completion status, and just about anything else. You can report on standard assessment results, and the not-so-standard learning experiences.


To understand this, we need to re-look at SCORM.


One should consider CMI5 as a replacement for SCORM – an improved specification. Conforming to SCORM was useful because a learning object or learning activity could be imported into just about any modern learning management system. As an instructor, if you created a game, quiz, presentation, simulation, whatever and exported it as a SCORM package, your activity could be imported into Moodle, BrightSpace, Canvas, Cornerstone, Blackboard, and any learning management system that supported SCORM. So, the benefit of SCORM was that it was a set of standards that most LMS systems understood. The standards that fell under the SCORM umbrella included metadata, a reporting data model, and standard methods for initializing an activity, reporting scores, reporting on interactions, and reporting passing or failing and completion status.

The data model included dozens of elements. One example of a data element is cmi.core.score.min. Related to score, SCORM conformant activities reported on the minimum score, the maximum score, the raw score (absolute number) and the scaled score ( a percentage between 0 and 1).


SCORM supported a lot of different data elements. A SCORM conformant activity could report on a variety of things. The limitation of SCORM, however, was that, despite the large number of elements, it was still a finite list. Take a Geolocation Storytelling activity as an example or an eBook reading. If I wanted to capture and report that the student virtually or physically visited location A, then B, and then C, I would have to work around the limitations of SCORM. I could not generate a statement such as, for example, ‘Student visited the Amphitheater in Arles’. If I wanted to capture a student’s progress through an eBook, SCORM would be problematic.


At this point, you might be protesting, but xAPI does that! xAPI? Another acronym! Yes. xAPI, or The Experience API is a new specification that makes it possible to report on a limitless range of things that a learner has experienced: such as, completed a chapter of an eBook; watched a video; toured a museum, and on and on. So, if we have this thing called xAPI, why CMI5?


The benefit of xAPI is that it supports the reporting of anything. The downside to xAPI is that, by itself, it doesn’t have a vocabulary that the LMS understands such as launched, initialized, scored, passed, completed. That is what CMI5 offers. CMI5 is, in fact, an xAPI profile that includes a vocabulary that the LMS understands. In addition, CMI5 can report on any type of learner experience. Here is the definition of CMI5 from the Advanced Distributed Learning Initiative:


cmi5 is a profile for using the xAPI specification with traditional learning management (LMS) systems

(Advanced Distributed Learning).


With CMI5, you can have your cake and eat it too. You can report on learner activity in a way that LMS understands and you can report on just about anything else that the Learning Management System stores in a Learner Record Store. The Learner Record Store or LRS is a database populated by statements about what the learner experienced.

xAPI Statements can capture an
any learner experience, including reading the instructions


Benefit Two: Freedom to put the learning activity anywhere


With CMI5, you can place a learning activity in a repository, in GitHub, on a web server, in a Site44 drop box site, in SharePoint, in a distributed network, wherever….without restricting its ability to connect with a learning management system. CMI5 content does not need to be imported. A CMI5 package can contain as little as one XML file, which among other things, tells the LMS where to find the content.


To appreciate this, we need to look back at SCORM once more (as if it were ancient history).


I’ll start with a pseudo technical explanation and then follow with why it matters.
The way SCORM works is that the learning activity sits in a window. The learning activity uses a simple looping algorithm to find the Learning Management System’s SCORM Adapter. It checks its parent window for a special object. If the window’s parent doesn’t contain the object, the activity looks to the parent’s parent, and so on. In other words, somewhere in that chain of parents, there must be that special object. Typically, the SCORM activity can only communicate to the learning management system if it is a child window of that system or if some server-side technology is used.

CMI5 works quite differently. CMI5 gives us freedom to leave our parents’ home. Whereas SCORM uses a Javascript Application Programmer Interface to communicate, CMI5 uses xAPI to reach across the internet and call a web service’s methods. Loosely, it’s like the difference between a landline and a cellular phone service. To use the landline you must be in the house; to use a cell phone, you must be in the network.

Benefit Three: A simplified sequencing model.

SCORM supported simple sequencing, which many say is not so simple. CMI5’s ‘move on’ property, in contrast, is very easy. A CMI course can contain one or more Assignable Units (AUs). The instructor spells out what the learner must achieve in an assignable unit before being able to move on. The move on property has one of the following values:


• Passed
• Completed
• Completed Or Passed
• Completed And Passed
• Not Applicable


Once the student has ‘moved on’ through all of the assignable units, the LMS notes that the course has been satisfied by that student.


Benefit Four: An assignable unit passing score can be overridden


In SCORM, the mastery score is hard-coded in the activity. In a SCORM activity, the instructor can base completion status on a passing score. But what if that hard-coded score were inappropriate for a group of students, for whatever reason? The specification enables an LMS to pass the mastery score to the Assignable Unit upon launch. So the LMS launches the AU, and sends it student name and mastery score (among other things). By specification, the AU cannot ignore the mastery score but must use it to trump what is hard-coded in the unit or refuse to run.


Benefit Five: Theoretically, CMI5 isn’t hamstrung by pop-up blockers.

When an LMS launches a SCORM activity, it either embeds the activity in an Iframe or launches a window. Both scenarios are problematic. The content may not be well suited for an iFrame and a pop-up blocker can obstruct the launched window.


Theoretically, CMI5 AU can replace the LMS with its own content. It’s not in an embedded iFrame and it’s not a pop-up window. When the LMS launches the AU, along with student name and mastery score, the LMS sends the AU a return URL. When ended, the AU returns the student to that return URL, which is the address of the LMS.


I write “theoretical” because the LMS should not but may ignore this requirement.

Benefit Six: CMI5 activities securely communicate to the Learner Record Store


As I wrote, the activity can send information about learner experiences clear across the internet to the learner record store. But how does the AU have the authorization to do this from, let’s say, a web site? And how does it happen securely?


This is the marvel of 2021 technology versus 2000 technology. Before 2000, we had difficult-to-use protocols for passing information securely across the internet. Oftentimes, special rules needed to be added to internet routers. Then along came a simpler protocol that the first version of CMI5 used (SOAP). Then came an even better way (OAUTH and REST). After launch, the LMS hands the AU a security token (kind of like a key that dissolves in time). The AU uses that key to gain access and to post information to the Learner Record Store.

Conclusion

CMI5 returns power to the instructor and to the L&D specialist. CMI5 allows one to choose where the content resides and to choose what the content reports. CMI5 captures learner experiences more completely and yet it communicates with Learning Management Systems with a vocabulary that LMSs understand. CMI5 supports accommodations for a special group of students without needing to change the code of the Assignable Unit. Finally, CMI5 uses current technology to send data over the internet.

The implications of this emerging specification are tremendous. It is better suited to mobile learning and it is better suited to the learner experience platforms that are emerging (e.g. LinkedIn Learning’s Learning Hub). Soon instructors may be able to organize content from a variety of providers (like LinkedIn Learning, Khan Academy, or OER Commons) but retain the learning management system as an organizer of content, data collector, and credentialing agent. Now instructors, average instructors, may be able participate in that content market from their own GitHub repositories and web sites.

But many LMSs have yet to adopt CMI5. The architects have done their part. Now it’s on us to understand this technology and advocate for it. Start by sharing this article. Thank you.

Appendix A — How it Works (A simplified flow)

For those interested in a deeper dive, let’s walk through the CMI5 process flow step-by-step. (See diagram)

To begin, the author (instructor, L&D specialist) exports content as a CMI5 package. The package can be a simple file that instructs the LMS where to find the content or it can include the content itself.

(1) When a student needs the content, the Learning Management System (LMS) launches the content and sends the Assignable Unit (a course can contain one or more Assignable Units) (2) information that includes student name, a fetch URL and the activity ID.

(3) The Assignable Unit (AU) uses the fetch URL to retrieve a security token. The security token enables the AU to communicate securely to the Learner Record Store (LRS).

(4) As the student interacts with the content, the AU can optionally send Experience API (xAPI) statements to the LRS . (5) At some point, the AU reports that the student passed and/or completed the unit.

(6) The LMS uses the ‘move-on’ information to determine whether or not the student can move on to the next assignable unit. The move-on options are passed, completed, passed and completed, passed or completed, or not applicable.

Finally, when all of the assignable units within a course are completed, the course is marked as satisfied for the specific learner.

A simplified process flow that starts with the
launch of the CMI5 Assignable Unit by the LMS

Short Sims

Introduction

Some of us aren’t content with simply presenting information in a linear fashion in an online course.  We have dozens of words to express what we wish to achieve: interactive, game-like, thought-provoking, challenging, problem-based….   We are also hard-pressed to find the time or the budget or the design that will fulfill our highest aspirations for eLearning. 

It’s easy to get discouraged – but occasionally we’re offered a strategy that works within our budget and time constraints.  One such strategy is the basis of  Clark Aldrich’s recent book, “Short Sims” (Aldrich, C. (2020). Short sims: A game changer. Boca Raton: CRC Press.)  

In his book, Clark Aldrich discusses the methodology of the short simulation.  He begins by lauding the virtues of interactivity.  Interactivity allows learners to experiment, customize their experience, role-play, make decisions and apply skills. He writes that game-like interactivity is expensive to build.  We all recognize that.  Short Sims, on the other hand, can be built in the “same time frame as linear content”.  Short Sims engage students in making decisions, doing things, meeting challenges, solving problems, learning from mistakes and so forth.  Essentially Short Sims offer us a strategy – a methodology – to do things differently and more effectively.

The hook comes from this excerpt: 

“From a pedagogical perspective, the more interactivity the better.  Connecting user action with feedback has long been proven to be critical for most neuron connections”. 

Aldrich, 2020

Aldrich credits the Journal of Comparative and Physiological Psychology for that insight.  But again, in Aldrich’s words, “game-like interactivity is expensive to build.  It is time-consuming.”  Aldrich offers a new Short Sim methodology as an antidote to linear-style presentation the death-by-PowerPoint approach.

Short Sims

                Show, not tell

                Engage learners quickly and are re-playable

                Are quick to build and easy to update

Short Sims square with the Context-Challenge-Activity-Feedback model that we’ve heard so much about from Dr. Michael Allen, Ethan Edwards and the designers at Allen Interactions.  They are a solution to M. David Merrill’s lament that so much learning material is shovelware.  ShortSims are not shovelware.  They are a cost-effective means of engaging students.

Quite frankly, the LodeStar eLearning authoring tool was made for the Short Sim.  Instructors have used LodeStar for years to produce Short Sims but never used that term.  We called them Simple Sims, which sometimes included decision-making scenarios, interactive case studies, problem-based learning and levelled challenges.  We solved the same problem.  We made it easy for instructors to create Short Sims quickly. 

Our design methodology has a lot in common with Aldrich’s methodology as described in his book.   The following ten points outline our approach to creating a simple decision-making scenario, which, in our view, is one form of Simple Sim.  To avoid mischaracterizing Aldrich’s methodology, I’ll use our own terms in this outline.

  1. Select Challenge
  2. Pick Context
  3. Determine the Happy Path
  4. Determine Distractors
  5. Pick a setting – background graphic
  6. Choose a character set
  7. Produce the Happy Path
  8. Add the Distractors
  9. Add Branches
  10. Add Randomness                                                                                                                                                                                                                                    

Select Challenge

Selecting the right problem and the right scope is, in itself, a challenge for the instructor or trainer.  Straightforward processes that present clear consequences for each decision are easy to simulate.   Processes like strategic planning that are influenced by dozens of variables are much more difficult.   The Short Sim methodology itself would be good candidate for a Short Sim.  Another example would be the backwards design method of instructional design.  In my early days at Metro State, a decade ago, we discussed the backwards design approach with instructors.   We then used a Short Sim to rehearse instructors on the key questions to ask during each phase of the backwards design process.  We based a lot of our thinking on Dee Fink’s “Creating Significant Learning Experiences” and  Grant Wiggins’ “Understanding By Design”.  Our objective was to help instructors design with the end in mind.  In Backwards Design, outcomes and assessments come before the development of activities.   The Short Sim did the trick.  Planning instruction is complicated business.  A simple and short simulation is not, in itself, transformative.  But we just wanted assurance that instructors understood the basic principles of backward design by the decisions they made.

Pick Context

In the Backwards Design example, a dean asks an instructor to design an online class to help K12 teachers use educational technology in their classrooms.  So, in this context, the learner is playing the role of online course designer.  The learner is challenged to make the right decisions at the right time.  If the learner holds off on designing activities until completing an analysis, defining outcomes and creating assessments, then the learner succeeds in the challenge.

Determine the Happy Path

The happy path is all the right decisions in the right order.  Situational Analysis -> Learner Outcomes -> Assessments -> Activities -> Transfer.  It is all of the right answers with no distractors.  It’s like creating a multiple choice test with only one option: the correct answer.

Determine Distractors

Now come the distractors.  What are the common pitfalls to Backward Design?  What might tempt the learner to go astray.  If we were designing a Short Sim on the Short Sim methodology, the pits and snares might be what Aldrich calls the Time Sucks:  choosing the wrong authoring tool, too many decision-makers on the project, custom art, and so on.  The learner might be tempted with “the medium is the message.  Invest in the medium.  Commission a graphic artist to create a compelling interface.”  The point of Short Sims is to not invest heavily in artwork or graphic design.  The focus is more on describing the context, presenting choices to the learner, and showing the consequence of learner choices.

Pick a Setting

A background photo helps to set the context.  Images that display settings without people can be found on sites like Pexels, Wikimedia Commons, in the public domain section of stock image services and, of course, on stock image sites. Because one image often suffices in a short sim, authors can snap their own photos and not waste too much time.

Alternatively, vector artwork can serve as an effective background.  Vector art can be found and  downloaded from such sites as https://publicdomainvectors.org/.    (LodeStar Learning doesn’t endorse any of these sites – but we have used them all.)

In either case, if the scene is relevant to the learning context and not just a vain attempt to gamify, it might actually contribute to content retention and recall. 

Choose a character set

A popular approach to Short Sims is the use of cutout characters with different poses and expressions.  Cutout characters can be photo-realistic images with transparent backgrounds or illustrations.  To see examples, please google ‘elearning interactive case studies’, select ‘images’ and you’ll see thousands of examples.  Despite their popularity, finding cutout characters cheaply can be frustrating.  Several authoring tools offer a built-in catalog of characters.  These tools tend to be expensive.  Many stock photo sites offer character packs but usually one must subscribe to these sites for a monthly charge.  Some sites offer pay-as-you-go services, meaning that you pay for the character pack once, without signing on to a monthly subscription.  The character pack can be as cheap as $4.  One such site is eLearning Templates for Course Developers – eLearningchips.  A complete character pack purchased from eLearningChips with more than 137 poses costs as little as $54. No subscription.  No additional fee.  (Again, we’re not endorsing eLearningChips, but we have used their service.)

Produce the Happy Path

With the LodeStar authoring tool, we had several options for producing the Happy Path.  We used the ActivityMaker template and, after the title page, added a sequence of Interview Pages.  The ActivityMaker template offers a range of page types. The Interview Page is one of them.  In an Interview Page, we dropped in a character and filled in the best choice.  We didn’t concern ourselves with the distractors (the wrong options) quite yet.  Again, we were focused on the Happy Path.

Here is the author view:

Authoring a short sim happy path

Here is what the student sees:

A short sim happy path

Add the distractors

Once we sorted out the happy path – a sequence of perfect, well-informed choices, we thought about the pits and snares—the problems and challenges.

In our course design example, a common problem is that we think too early about the content–that is, what topics should the course cover.  We anticipated those problems when designing our Short Sim.  If a learner unwittingly falls into our trap, we have the opportunity of providing feedback. It’s a teachable moment.

A short sim

An alternative to the Interview Page type is the Text Page.  In a text page, we can add images and widgets.  These give us a bit more flexibility than the Interview Page Type.  On a Text page, we can add an image (left or right aligned), then a Text Layout Widget.  Here you can see the page with image and the Text Layout widget.  The image was composed in our SVG editor. 

Authoring View

Here is what the student sees.

Student View of a LodeStar Activity

Add Branches

In one sense, a branch is a place where we get sent based on our decisions.  If this were a customer service sim and we made poor choices, the customer would appear more and more irritated and ultimately we lose his or her business.  Programmatically, the place where we get sent is a page that shows an irate customer and choices that represent a difficult situation.  The branches could lead us down a path of destruction but we may also have the opportunity of winning back the customer’s trust with a string of good decisions. 

Branching adds variety to the sim.  It gives us a customized experience or allows us safely to ‘test’ bad choices.

Branching can also be viewed as the consequence of a decision or choice.  In LodeStar, branch options include going to the next page, last page or jumping to a page.  They also include bringing up a web resource, adding an instructive overlay, setting a variable value, etc.  It could also mean the execution of a script or series of commands to make a lot of things happen simultaneously, such as setting a variable (that tracks our failings), sending us down a path, changing the image of a happy customer to an unhappy one, showing feedback, marking the choice with red, and more.

It’s probably most effective to show the learners the natural consequence of their decisions–an unhappy customer for example.  As designers, we might also need to be explicit and display feedback, or introduce a coach who provides feedback.  As Clark Aldrich writes, the sign of a good Short Sim is one that is played over and over again.  Branching helps us make the sim a different experience each time.

LodeStar Branching options

Add Randomness (optional)

Randomness might be difficult to achieve and should, therefore, be considered optional.

Randomness is more than randomizing distractors.  (Randomizing distractors happens automatically on an Interview Page.  It’s done through a simple checkbox in a Text Layout widget.)  More sophisticated randomness might include a randomly generated sum of money, or a randomly selected path or scene, or randomly generated assets that are assigned to the learner.  It might be a randomly generated length of fuse that represents the customer’s patience.   In our course design example, it might be randomly generated student characteristics that include age, gender, and subject interest.  That level of randomness is best achieved with the help of LodeStar’s scripting language and is best left to its own article.

Conclusion

Short Sims represent a level of interactivity that goes beyond the linear presentation of information.  They have the potential of promoting learner retention and application.  With the right tool (and there are plenty),  everyone can build short simulations.  One tool, LodeStar, was designed from the very start with the short simulation and the intrepid instructor in mind.  Short Sims may vary in sophistication and design but, in any form, they cause learners to think and to see the consequence of their actions.  The short sim is a strategy that is doable and repeatable within our budgets and time constraints.  Make it happen in your world!

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.