How to create a guided tutorial for a web-page using JavaScript?

Question

Certain websites (notably Facebook games) have a step by step tutorial for new users, where JavaScript is used to create a pop-up which tells the user where to click next and what is happening.

How does one create such a system? What sort of architecture is required?

I suppose that a script is loaded if a flag is a tutorial flag is set, and that stored within the user's state there's a 'pointer' which indicate which step in the tutorial the user is at. That script would echo out the relevant JavaScript for pop-ups and highlight and whatever.

The question, I guess, is how does one detects when the user has performed the required action and that the tutorial is to proceed to the next step?

On Edit : The 'action required to proceed to the next step' could involve the user clicking on a link itself, or submitting a value through a form. So the state must be able to persists and the script must be able to detect interactions on different UI elements throughout the page.

Answer 1

I think solution will depend on which technologies you are using.

Simply - you can store user's tutorial progress in a cookie file, and on each his action (e.g. button click) call javaScript handler, which will update it's status.

You can prototype your tutorial as Finite State Machine. I think this tutorial data presentation will be very helpful.