Tutorial-Ey is an active step-by-step tutorial for web-based applications. It provides a mechanism for explaining application processes to users.
Tutorial-Ey is an active step-by-step tutorial for web-based applications. It provides a mechanism for explaining application processes to users.
$(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();
});
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.
Responsible for handling an independent section. Tracks the current active step for that section.
new com.eynon.tutorialSection("Section name", mySteps);
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");
}
}
);