Recently I’ve been playing around with creating interactive tutorials that teach people how to create things on the Web.
Check out this prototype. At the end of a movie-like tutorial, you’ll be given a challenge to write your first bit of HTML. At any time, you can use the scrubber at the bottom-right to review any part of the tutorial; anything you’ve typed so far in the challenge is undone while you’re scrubbing, and is automatically re-applied once you’re back at the challenge.
This prototype is an evolution of an idea that Jess Klein wrote about regarding instructional overlays for our webmaking tools.
How It Works
The tutorial uses Popcorn to construct a “movie” that automates the user interface of a two-paned HTML editor with an instructional overlay. I made an ad hoc mini-framework called tutorial.js to make it easy to script these sorts of experiences; for example, here’s what the beginning of the prototype’s tutorial looks like:
Tutorial
.dialogue("Hi! I am Mr. Love Bomb and will teach you how to be a webmaker now.", 0)
.typechars("you're really cool.")
.dialogue("Check it out, this is HTML source code—the language of the Web.", 0)
.spotlight("#editor")
The dialogue() method just makes the tutorial avatar—in this case, Mr. Lovebomb—say something. typechars() types some characters into the HTML editor, and spotlight() draws the user’s attention to part of the page. Each action is queued to occur serially, in a style inspired by the chaining API of soda.
The full tutorial script is at tutorial-script.js, and the full tutorial source is available on Github.