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.
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.
Soon the .m4a audio file (AAC) will be supported by all browsers and offer even higher quality audio at less the data cost.
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.
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.
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.
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.
MathML
For a short while, all browsers supported the MathML markup language, enabling markup without the need for add-ons.
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.
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.
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!
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.
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:
- Send a statement about the learner reaching Level 5 to the learner record store.
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).
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.
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.
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.
The end result:
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.
LodeStar Web Journal 