This demo shows a dynamic embedded help system for a Web-based application. This embedded help system displays context-sensitive help based on the form element that has focus. It also senses which step the user is performing in a task and highlights it with an arrow.

Dynamic Context-sensitive Help

To open a context-sensitive help topic, select a form element and click the Help button. The help topic will automatically change when you select a different form element.

Each form element uses the onFocus and onBlur events to tell the script it has (or has lost) focus. When the user click the help button, the script displays the help topic that matches the last field that has focus. If no form element has focus, the page-level help topic appears.

Dynamic Task Help

To open the task help topic, click the Help button and click the "Sample task" link in the page-level help topic.

Each form element uses the onChange event to tell the script its value has been changed, and the script stores the task order in an array. When a form element’s vlaue changes, the script finds the changed element in the array and shows the arrow for the matching task.