Few learners can resist the allure of great eLearning storytelling, enhanced with interactive illustrations. A set of free tools, developed for journalists, can help L&D professionals easily add interactive elements, such as timelines and before-and-after images. These free interactive storytelling tools, developed at Northwestern University Knight Lab, have already been used to create thousands of engaging online stories—the types of stories that eLearning designers and developers can use to draw in learners while presenting information in a variety of formats and media.

Students and professionals at Knight Lab collaborate to create prototypes of tools that can be used in conventional media reporting and for data visualization, research—and eLearning—to enhance storytelling.

The open-source, JavaScript-based tools are available for free; they use other free tools, such as Google Sheets, or pull in photos from social media sites including Instagram and Twitter. Each tool is presented on the Knight Lab site with examples, instructions, tips, and links to FAQs and a support forum; some even have short tutorial videos. The tools are:

  • TimelineJS: Start with a Google Sheets document that includes a list of events and dates. End up with an interactive timeline that pulls in photos, graphics, web links, maps, and videos. Any story or information that follows a chronological progression is suitable for presentation in a timeline. Use it to create a history of your company for new hires or step-by-step instructions for onboarding. A timeline could also be used to illustrate the development of a company product, highlighting key features and benefits.
  • Soundcite: Liven up a text passage with audio. Learners don’t need to switch to another tool to hear sound clips that bring stories to life. It’s easy to add ambient sounds, music, or spoken words to stories. Soundcite can pull multiple short clips from a single audio file.
  • JuxtaposeJS: Compare before and after or similar images using the JuxtaposeJS tool. It’s easy to create a Juxtapose if you have two images that are the same size and are in alignment. You simply upload them, enter the labels and credits, and choose the initial position of the slider. Learners can move the slider back and forth to compare the images.
  • StoryMapJS: Build a story around a map or around sections of a large image with StoryMapJS. The “gigapixel” feature of StoryMapJS allows designers to use a large image as the basis of an interactive narrative. These tools are useful for annotating a map or image with historical or other information. Note that StoryMapJS lacks a tutorial, and learning how to use it is not as intuitive as some of the other Knight Lab tools.

Beta versions of two additional tools are also available on the Knight Lab project website:

  • SceneVR: This new tool offers an easy way to turn a collection of panoramas or photos into a navigable 360-degree image. You simply add tags and other information to a Google Sheets document, along with links to the images.
  • Storyline: A basic data visualization tool, Storyline lets developers illustrate and explain a data-over-time story. Designed for mobile use, Storyline limits the length and number of “cards” per story.

Developers with some coding knowledge can use JSON or CSS tools to customize their interactive stories, but little technical skill is needed to get started using these free interactive storytelling tools. To learn more about free and low-cost tools that can enhance your eLearning, download The eLearning Guild’s free eBook, High Performance, Low Cost: The Best Budget-Friendly L&D Tools.