Tutorial-Ey Overview

Tutorial-Ey is an active step-by-step tutorial for web-based applications. It provides a mechanism for explaining application processes to users.

Demo Code

$(window).load(function() {
    var tutorial = new com.eynon.tutorialEy();
    var tutorials = [
        {
            Section: "Overview",
            Contents: [
                {
                    title: "Tutorial-Ey Overview",
                    body: "This is the Tutorial-Ey demo. Click next for an example.",
                    pointTo: $("#step1"),
                    advanceOptions : {
                        onStep: function () {
                            $("#step1").hide();
                        }
                    }
                },
                {
                    title: "Step 1",
                    body: "Please mouseover the button to continue.",
                    pointTo: $("#step1"),
                    advanceOptions : {
                        eventListeners: {
                            target: $("#step1"),
                            action: "mouseover"
                        },
                        onStep: function () {
                            $("#step1").show();
                            $("#step1").text("Mouse over for step 2");
                        }
                    }
                },
                {
                    title: "Step 2",
                    body: "Please mouseout the button to continue.",
                    pointTo: $("#step1"),
                    advanceOptions : {
                        eventListeners: {
                            target: $("#step1"),
                            action: "mouseout"
                        },
                        onStep: function () {
                            $("#step1").show();
                            $("#step1").text("Mouse out for step 3");
                        }
                    }
                },
                {
                    title: "Step 3",
                    body: "Please click the button to continue.",
                    pointTo: $("#step1"),
                    advanceOptions : {
                        eventListeners: {
                            target: $("#step1"),
                            action: "click"
                        },
                        onStep: function () {
                            $("#step1").show();
                            $("#step1").text("Click for step 3");
                        }
                    }
                },
                {
                    title: "Finished",
                    body: "Thanks for viewing our tutorial.",
                    pointTo: $("#step1"),
                    advanceOptions : {
                        eventListeners: {
                            target: $("#step1"),
                            action: "click"
                        },
                        onStep: function () {
                            $("#step1").hide();
                        }
                    }
                }
            ]
        }
    ];

    for (var i in tutorials) {
        var steps = [];
        for (var j in tutorials[i].Contents) {
            var data = tutorials[i].Contents[j];
            steps.push(new com.eynon.tutorialStep(data.pointTo, data.title, data.body, data.advanceOptions));
        }
        tutorial.addSection(tutorials[i].Section, steps);
    }

    tutorial.play();
});
                

Details

com.eynon.tutorialEy (options)

This is the main tutorial object. Responsible for keeping track of the current section being displayed, drawing the arrow to the target, monitoring events, and positioning the window.

var tutorial = new com.eynon.tutorial-ey({
    "lockPosition": false, // Lock the position of the tutorial window in between steps.
    "keepInFront": true, // Periodically check to make sure the window is still at the front
    "sectionSpacer" : 15, // Gap in between section items on the left section bar.
    "pointerControlDistance": 0.3, // The distance of the control point from the mid point of the pointer arrow. Larger = more curved arrow.
    "arrowHeadSize": 10, // Width of the arrow head
    "arrowHeadLength": 20, // Length of the arrow head.
    "maxSpacing": 50, // Distance to place the tutorial window from the target of a step if that space is available.
    "uiRefresh": 500, // Interval to refresh the UI to make sure the arrow follows any moving object.
    "sectionCSS" : {}, // Optional CSS
    "sectionHeaderCSS" : {}, // Optional CSS
    "sectionItemCSS" : {},// Optional CSS
    "activeStepCSS" : {},// Optional CSS
    "tutorialCSS": {},// Optional CSS 
    "stepsCSS": {},// Optional CSS
    "stepItemCSS": {},// Optional CSS
    "activeStepTitleCSS": {},// Optional CSS
    "activeStepBodyCSS": {}// Optional CSS
});
tutorial.play(); // Open the tutorial window.

Methods


com.eynon.tutorialSection (sectionName, steps)

Responsible for handling an independent section. Tracks the current active step for that section.

new com.eynon.tutorialSection("Section name", mySteps);

Methods


com.eynon.tutorialStep (targetElement, title, content, advanceOptions)

Contains each individual step and it's linked events.

new com.eynon.tutorialStep(
    $("#myButton"), // Point to #myButton
    "My Title", 
    "Do X to advance to step Y.", 
    {
        eventListeners: {
            target: $("#myButton"),
            action: "mouseover"
        },
        onStep: function () {
            $("#step1").show();
            $("#step1").text("Mouse over for step 2");
        }
    }
);