Elearning samples

This page links to samples of interactive graphics, simulations, and other materials from many different sources. These are not examples of my work. Maybe they’ll give you ideas for your own projects.

More examples: See the elearning examples category on this site.

Simpler interactions

Interactive documentary example

Storyplanet: Big River Rising

These don’t need lots of Flash wizadry. Most use photos and some illustrations. Many of these demonstrate how good visual design can make a simple animation more effective.

  • Learn to kern. A learn-by-doing interaction to help web developers improve the display of text.
  • The Scale of the Universe. Zoom in and out to see the relative sizes of things in our world.
  • Diary of a Food Tracker. Simple interactive chart showing one man’s weight loss.
  • A Workout at Work. Simple animations demonstrate workouts you can do at your desk, with ratings by viewers.
  • Kowloon Walled City. Explore the former walled city through video, text, and clickable images. (On a Mac? Use Safari.)
  • The Wealthiest Americans Ever. Excellent graphic design makes a simple rollover impressive.
  • The Serve: Creating Racket Speed. Illustrations and narration show tennis players’ body movements combine to create a high-speed serve.
  • AIDS at 25. Simple graphs and photos tell a compelling story.
  • Turning a Corner?. Clear explanations make this animated graph about economic cycles easy to understand.
  • Amazing Girls. Photos with audio interviews of high-achieving high school students. A similar format could be used to introduce a company’s culture to new employees.
  • RSS in Plain English. Not interactive, but a clever and low-budget approach to a video demonstration that uses pieces of paper. They describe their equipment briefly here.
  • Six Famous Thought Experiments. Also not interactive, but shows how animation and humor can be used to explain abstract concepts.
  • Birth of a Tornado. Explanation is provided by text that’s placed near the graphic–the efficient and cost-effective alternative to audio.
  • Laptop ports. Review the ports, then click on the port you would use for each task. Lets you explore the laptop and skip what you already know.
  • Crimescene game. Simple branching scenario in which you interview a teller after a bank robbery. The page includes several versions of the game with different production levels.

More advanced interactions

Example of elearning activity

Blood Typing Game from Nobelprize.org

The samples below include more complex navigation or sophisticated animation.

  • What Is a Print?. Make four types of prints in this fun interactive from the Museum of Modern Art.
  • The Elegant Universe. A PBS site on string theory. Try “Multidimensional Math.”
  • The Making of a Brick. Shows how Legos are made. The text is hard to read, but the cartoon incorporates video in an interesting way.
  • Is It Better to Buy or Rent? Interactive graphic that lets you input data to see when it’s better to buy a home. Much more efficient than pages of text-only explanation.
  • The flow towards Europe. Combines an interactive map and timeline to let you explore the flow of migrants into Europe.
  • Skeleton game. Drag the bone to the right area of the body. Explore the site to try many other games.
  • Blood typing game. Figure out each patient’s blood type and give them the right transfusion before it’s too late. Simple graphics but compelling situation.

video branching scenario example

Choose a Different Ending from droptheweapons.org

Simulations and branching scenarios
For scenario design tips and more examples, see the scenarios category of this site.

  • Connect with Haji Kamal. Can you help a young lieutenant make a good impression on a tribal leader in Afghanistan?
  • Choose a Different Ending. Video that uses YouTube’s linking annotation feature to create a compelling first-person story (warning: uses some violent content to deliver an anti-violence message).
  • Spent. You’ve lost your job and are running out of money. Can you get a new job and stay afloat?
  • Inner Vision. Keep fictional characters from killing themselves. Basic images but intelligent script; some language not safe for work. This was done in Flash but could easily have been produced in a more basic tool like Twine.
  • CameraSim. Change the aperture and other settings and see how that affects your photo.
  • Mi Vida Loca. Learn basic Spanish vocabulary in realistic settings while a mystery unfolds.
  • Design a Cell Phone. Use market research to design a popular phone that will fit a certain budget.
  • Leadership and Team Simulation: Everest. Make decisions as you lead a team climbing Mt. Everest.
  • The Great Flu. Choose a flu and try to prevent it from becoming a global pandemic.
  • Industry Player. Two business simulations: download (Windows) and browser-based.
  • The POD Game. Dispense drugs and medical advice to people during an emergency.
  • Trade Ruler Game. Simulates international trade. Simple graphics but complex topic.
  • Aftermarket profit potential. Read a paper about the aftermarket profit potential for products and services, then experiment with several types of offerings.
  • Nursing simulation. You’re a nurse and need to make decisions about two patients.
  • Manage the budget of France. French-language simulation that requires you to balance the country’s budget and win parliamentary approval.

Vendor demonstrations

Artistic and political
Screen shot from Their Circular Life

  • Bear 71. Follow a GPS-collared bear as she tells how her life is affected by humans.
  • Folksongs for the Five Points. Drag five points around the streets of New York’s Lower East Side and hear sounds from all points simultaneously. Use the mixer at the bottom of the screen to change the mix or stop individual sounds.
  • Dangers of Fracking. Unique approach to scrolling reveals details about how hydraulic fracking works.
  • Turning a Page, the Joseph Herscher Way. Labelled photo explains a complicated chain of reactions used to turn a page of a newspaper.
  • Suspended Life. Essentially a PowerPoint-like presentation based on a comic. Notice how much use the artist gets out of a small collection of images.
  • Billy Collins Action Poetry. Animations interpret the poetry of former US poet laureate Billy Collins. Shows very evocative ways to visualize text.
  • Their Circular Life. Drag a pointer around a circle to advance through photos and audio of an everyday scene in Italy.

More collections

Share
Tweet about this on TwitterShare on LinkedInShare on Facebook

Comments

  1. Hello,

    Glad that you shared my blog in this useful post.

    Regards,
    e-Learning Tyro

  2. These are awesome. I find that even the “simple” interaction, when done well, can really get the point across as well. Thanks so much for creating this! Examples act as a “muse” for new ideas manytimes…thank you thank you thank you

  3. Tom Kuhlmann says:

    Good collection. I have a bunch that I’ve collected over the years. I need to weed through them. The Nobel has a lot. So does the Smithsonian Institute. Here’s one of my favorites. Build a sod house.

    Sometimes the best learning comes from deconstructing what others have done. I like to look at the award winning products (when you can see them) and try to replicate elements of what they did.

  4. Cathy Moore says:

    Tom, thanks for the sod house link. The same site led to another good activity, in which you examine a painted buffalo hide and try to answer questions about the symbols it uses: http://www.americanhistory.si.edu/kids/buffalo/hideactivity/index.html

  5. One of the most impressive simulations that I have seen is the AMD Virtual Experience 2.0. This is on the HIGH end of simulations, but we managed to replicate some of the blue screen technology in a training program that we did for a customer. Much like Tom I like to borrow from high end examples and incorporate elements into our training.

    Check out the AMD simulation at:
    http://ave.amd.com/

  6. chesco says:

    Hola, muy buenos todos estos recursos. Gracias.

  7. Emma says:

    Hi Cathy
    I’ve just seen http://cambridgeenglishonline.com/Phonetics_Focus/ – – which you might like to add to the list.

    It strikes me as a good example – with lots of different games, and I particularly liked the small app to allow you to record your own attempts at the different phonemes. (I did the intro test – and clearly need to use it all a bit more; I’m hopeless at knowing which symbol is for which sound!)

  8. thanks for the GREAT post! Very useful…

  9. MM says:

    Great compilation of Learning Samples Cathy. Thank you!

    Question, where does the Jellyvision iCi approach fall into this? REF: http://www.jellyvision.com/examples.htm

  10. Cathy Moore says:

    MM, thanks for the link to Jellyvision. I was so inspired by them that I wrote an entire post: http://blog.cathy-moore.com.php5-12.dfw1-1.websitetestlink.com/?p=149

  11. Anitha says:

    Hi Cathy,

    Very interesting collection of samples. Thank you.

    Regards,

    Anitha

  12. Günter says:

    Great collection! Many thanks for that! (I have one here: http://del.icio.us/guenter_w/BestPractice)

    Are you aware of any excellent learning material that has been designed following a specific instructional design model? (e. g. learning material that has been designed following Merrill’s ITT or following Schank’s Learning by Doing or …)

  13. Cathy Moore says:

    Günter, thanks for your comment and the link to your collection. I’m not familiar with any material that has been designed by following a specific model. I’d be interested in hearing from others about this. It would be especially cool if we could see the same topic presented in two ways, according to two different models.

  14. Günter says:

    Just wrote my own blog-entry about that: http://wageneder.blogspot.com/2008/01/elearning-designed-following-specific.html … let’s see whether there will be some reaction.

  15. bob deford says:

    Love your site, but your elearning samples page isn’t working.

  16. Cathy Moore says:

    Bob, I’m not sure what you’re referring to. Your comment is on the elearning samples page, so it seems like you’re able to view it. Are you saying that some links to examples on other sites don’t work? That could easily be possible. I know one site (Minneapolis Historical Soc.) is having trouble at the moment. It’s also possible that your organization is using an internet filter that blocks some of the domains.

  17. Joan Walker says:

    Hello, I enjoyed Forest, Fields and the Falls-Connecting Minnesota. Would you happen to know what program was used to create the interactive in the scroll window? Is it possible it was created in a game or simulation shell that can be purchased? Thanks!

  18. Cathy Moore says:

    Joan, thanks for your question. The Flash was apparently developed by Invioni, a web design firm (see http://www.invioni.com). They have information about the program on their site, but I couldn’t get the link to work. Maybe you’ll have better luck!

  19. Good collection. Thanks

Scenario design online course

Learn more