How to create a guided tutorial for a web-page using JavaScript?
<p>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.</p>

<p>How does one create such a system? What sort of architecture is required?</p>

<p>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.</p>

<p>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?</p>

<p><strong>On Edit</strong> : 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.</p>
