Documentation

Getting Started

Steps to follow:

Generated by hilite.me 
 1
            2
            3
            4
            5
            6
            7
            8
            9
            10
            11
            12
<!DOCTYPE html>
            <head>
                <link rel="stylesheet" type="text/css" href="styles/myStyles.css" />
                <link rel="stylesheet" type="text/css" href="styles/tutorialjsStyles.css" />
            </head>
            <html>
                <body>
                
                    <script type="module" src="./scripts/tutorial/tutorial.js"></script>
                    <script type="module" src="./scripts/myScript.js" ></script>
                </body>
            </html>

Now you can use the Tutorial object in your code!

BasicTutorial

Constructor

Parameter Description Structure/Example
elements The array of elements that will be highlighted during this tutorial. Each element specifies a position corresponding to the position of the element in the tutorial. Each element also specifies a domElement that indicates the DOM element to be highlighted. Also, info indicates the the info to be displayed on the floating tool tip. Lastly, you can provide an optional callback parameter that is fired when the element is highlighted. 
[{position: int (starts at 0),
                        domElement: DOM element,
                        info: DOM element),
                        callback: function (optional)}, ...]
outlineColor The color of the highlight box. Any valid CSS color: ie. "red" or "#fff8dc".
defaultControls A boolean to specify whether the default tutorial controller should be added to the DOM. true , false

Attributes

Name Description
isRunning A boolean that is true when the tutorial is executing, and false when the tutorial is idle or finished.

Methods

Name Description
startTutorial() Starts the tutorial, adding the controller and highlighter to DOM
next() Move to the next step in the tutorial (highlight the next DOM element and update the info displayed).
prev() Move to the previous step in the tutorial (highlight the DOM element previous to the current one and update the info displayed).
skip() Ends the tutorial and removes controller and highlighter from the DOM.

TimelineTutorial

Constructor

Parameter Description Structure/Example
elements The array of elements that will be highlighted during this tutorial. Each element specifies a position corresponding to the position of the element in the tutorial. Each element also specifies a domElement that indicates the DOM element to be highlighted. Also, info indicates the the info to be displayed on the floating tool tip. You must provide a unique title for each element so that it can be displayed on the timeline. Lastly, you can provide an optional callback parameter that is fired when the element is highlighted. NOTE: the title "Exit" is reserved. 
[{position: int (starts at 0)
                    domElement: DOM Element
                    info: DOM Element,
                    title: String
                    callback: function (optional)}, ...]
outlineColor The color of the highlight box. Any valid CSS color: ie. "red" or "#fff8dc".

Attributes

Name Description
isRunning A boolean that is true when the tutorial is executing, and false when the tutorial is idle or finished.

Methods

Name Description
startTutorial() Starts the tutorial, adding the timeline bar, tooltip, and highlighter to DOM
reset() Ends the tutorial and removes timeline bar, highlighter, and tooltip from the DOM.

TimedSequence

Constructor

Parameter Description Structure/Example
elements The array of elements that will be highlighted during this tutorial. Each element specifies a position corresponding to the position of the element in the tutorial. Each element also specifies a domElement that indicates the DOM element to be highlighted. Also, info indicates the the info to be displayed on the floating tool tip (this is only needed if useTooltip is true). You must specify a duration to indicate the amount of time spent on a particular element. 
[{position: int (starts at 0)
                    domElement: DOM Element
                    info: DOM Element,
                    duration: int (milliseconds)} ...]
useTooltip A boolean to indicate whether a tooltip, displaying info, should accompany highlighted elements. true, false
outlineColor The color of the highlight box. Any valid CSS color: ie. "red" or "#fff8dc".

Methods

Name Description
startSequence(repititions: int) Initiates the timed sequence and repeats it repititions number of times.
reset() Ends the sequence before it is completed.