View Source

under construction

Introduction

This guide describes how to create Tutorials for the Integrated Genome Browser.

Directory structure

The tutorials should be contained in a single directory, with a properties file
tutorials.properties listing the available tutorials

File format

The tutorials are text files written in json http://www.json.org

The tutorial consists of an array of steps that the user will take.
each step can contain the following fields (only the text field is required):

text - the text to display in the tutorial status bar
highlight - the widget to highlight during the step, use thewidget id
timeout - the amount of time in seconds that this step is displayed before it continues onto the next step
waitAction - the name of an action that the user is supposed to do. The tutorial will stay on this step until the user performs the action.
waitMenu - the name of a menu item (action) that the user is supposed to select. The tutorial will stay on this step until the user performs selects the menu item.
execute - an action that the tutorial will perform; this is an object containing the following fields (only name is required):
name - the name of the action to perform
amount - a numeric value to pass to the action

sample tutorial

[
    { 
      "text": "Welcome to the IGB tutorial. Click Next to get started.",
      "highlight": "TutorialNavigator_next"
    },
    {
      "text": "This is the main view of data and annotations.",
      "highlight": "SeqMapView",
      "timeout": 3
    },
    {
      "text": "This is the zoom slider. Watch as we zoom out.",
      "highlight": "SeqMapView_xzoomer",
      "timeout": 3
    },
    {
      "text": "We are zooming out 20%",
      "execute": { "name": "TweeningZoomAction", "amount": -0.2 } 
    },
    {
      "text": "This panel is for loading and manipulating data.",
      "highlight": "IGBTabPanel_GeneralLoadViewGUI",
      "execute": { "name": "select_GeneralLoadViewGUI_action" },
      "timeout": 3
    },
    { 
      "trigger": "select_SearchView_action",
      "subTutorial" :
        [
          {
            "text": "Use this tab for searching for your favorite gene.",
            "highlight": "IGBTabPanel_SearchView",
            "timeout": 3
          },
          {
            "text": "At the top is the search box, try entering a gene like 'ADAR'.",
            "highlight": "SearchView_searchTF",
            "waitAction": "SearchAction"
          }
        ]
    },
    {
      "text": "Explore some of the other tabs and click Next when finished."
    }
]