out of date content - available for reference purposes only

Introduction

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

Users run tutorial through the Help menu's Tutorials sub-menu. When they choose a tutorial, the tutorial will start and guide users through IGB features.

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
waitFor - the name of an action or menu item that the user is supposed to do. The tutorial will stay on this step until the user performs the action or clicks 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
subTutorial - an inner tutorial that can be "triggered" by an action to start
trigger - an action that is a "trigger" to start a sub tutorial
script - will allow commands in the existing IGB scripting format. (e.g. "script": "goto chr4:18,040,000 - 18,045,056" )
tab - will allow navigation to a tab specified by its display name (e.g. "tab": ["Bookmarks"],) or multiple tabs
(e.g. "tab": [{"tab": "Bookmarks", "tab": "Selection Info"}])
checkServer - this will verify a specific server is enabled and offer the user the opportunity to enable or cancel the tutorial if it is not. (e.g. "checkServer": "IGB Quickload")

sample tutorial[
    { 
      "text": "Welcome to the IGB Getting Started tutorial. Click Next to Begin.",
      "checkServer": "IGB Quickload",
      "script": "homescreen",
      "tab": [{"tab": "Data Access", "tab": "Current Sequence"}],
      "highlight": ["TutorialNavigator_next"]
    },
    { 
      "text": "Select Arabidopsis thaliana in the species box",
      "highlight": ["DataAccess_species"],
      "waitFor": "speciesSelectionChanged.Arabidopsis thaliana"
    },
    { 
      "text": "Select A_thaliana_Jun_2009 in the version box",
      "highlight": ["DataAccess_version"],
      "waitFor": "groupSelectionChanged.Arabidopsis thaliana.A_thaliana_Jun_2009"
    },
    { 
      "text": "Drag horizontal slider to the right to zoom in. Click Next to see zooming in.",
      "script": "setZoomStripePosition 16267374",
      "highlight": ["TutorialNavigator_next", "SeqMapView_xzoomer"]
    },
    {
      "execute": { "name": "TweeningZoomAction", "amount": 1 }  
    },
    { 
      "text": "Click Load Sequence in View button to load sequence bases.",
      "highlight": ["DataAccess_sequenceInView"],
      "waitFor": "LoadResidueAction"
    },
    {
      "timeout": "3"
    },
    {
      "text": "Drag horizontal slider to the left to zoom out. Click Next to see zooming out.",
      "highlight": ["TutorialNavigator_next", "SeqMapView_xzoomer"]
    },
    {
      "execute": { "name": "TweeningZoomAction", "amount": -1 }  
    },
    {
      "text": "Try it for yourself. You can click a gene to focus zooming on that gene.  Click Next when you're done.",
      "highlight": ["TutorialNavigator_next", "SeqMapView_xzoomer"]
    },
    {
      "execute": { "name": "TweeningZoomAction", "amount": -1 }  
    },
    {
       "text": "Drag vertical slider down to stretch vertically. Click Next to see vertical stretch.",
       "highlight": ["TutorialNavigator_next", "SeqMapView_yzoomer"]
    },
    {
      "execute": { "name": "VerticalStretchZoomAction", "amount": 0.2 } 
    },
    { 
      "text": "Drag vertical slider back up to shrink everything into view. Click Next to see vertical shrink.",
      "highlight": ["TutorialNavigator_next", "SeqMapView_yzoomer"]
    },
    {
      "execute": { "name": "VerticalStretchZoomAction", "amount": -1 } 
    },
    { 
      "text": "Try it for yourself. You can click a gene to focus zooming on that gene.  Click Next when you're done.",
      "highlight": ["TutorialNavigator_next", "SeqMapView_yzoomer"]
    },
    {
      "execute": { "name": "VerticalStretchZoomAction", "amount": -1 } 
    },
    { 
      "text": "Congratulations, you have completed the Getting Started tutorial. Click Next to finish.",
      "highlight": ["TutorialNavigator_next"]
    }

]