Examples

Basic Tutorial

A tutorial with a navigation menu to move to the next step, go back a step, or end the tutorial altogether.

Code Demo 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// Elements that will be highlighted
const basicTutorialDiv = document.getElementById("basicTutorial");
const basicTutorialHeading = document.getElementById("basicTutorialHeading");
const importantInfo = document.getElementById("importantInfo");
const importantNote = document.getElementById("importantNote");

const basicTut = new BasicTutorial(
  [
    {
      position: 0,
      domElement: basicTutorialHeading,
      info: document.createTextNode(
        "We can highlight information that may be important to user. \n Note: You can move this menu by clickling and dragging the header."
      ),
    },
    {
      position: 1,
      domElement: importantInfo,
      info: document.createTextNode(
        "These are important features of the menu."
      ),
    },
    {
      position: 2,
      domElement: importantNote,
      info: document.createTextNode(
        "This is more important info you might have missed."
      ),
    },
    {
      position: 3,
      domElement: basicTutorialDiv,
      info: document.createTextNode("This was the basic tutorial."),
    },
  ],
  "turquoise",
  true
);

Timeline Tutorial

A tutorial with a timeline that provides you an overview of the content of the whole tutorial.

Code Demo 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
const heading = document.getElementById("heading");
const jsObjectsDiv = document.getElementById("jsObjects");
const timelineTutorialDiv = document.getElementById("timelineTutorial");
const timedSequenceDiv = document.getElementById("timedSequence");
const customizationHeading = document.getElementById("customizationHeading");

const timelineTut = new TimelineTutorial(
  [
    {
      position: 0,
      domElement: heading,
      info: document.createTextNode(
        "Here are some examples of Tutorial.js in action. You can use the timeline at the bottom to navigate."
      ),
      title: "Start",
    },
    {
      position: 1,
      domElement: jsObjectsDiv,
      info: document.createTextNode(
        "There are three main JS objects available."
      ),
      title: "JS Objects",
    },
    {
      position: 2,
      domElement: basicTutorialDiv,
      info: document.createTextNode(
        "BasicTutorial provides a standard tutorial where a user moves one step at a time whenever they want."
      ),
      title: "Basic Tutorial",
    },
    {
      position: 3,
      domElement: timelineTutorialDiv,
      info: document.createTextNode(
        "TimelineTutorial is the tutorial you are using right now!"
      ),
      title: "Timeline Tutorial",
    },
    {
      position: 4,
      domElement: timedSequenceDiv,
      info: document.createTextNode(
        "TimedSequence is a tutorial where the user is not required to press any buttons. Time spent on a particular element in the tutorial is determined by devs."
      ),
      title: "Timed Sequence",
    },
    {
      position: 5,
      domElement: customizationHeading,
      info: document.createTextNode(
        "These are some ways you can customize the library to your needs."
      ),
      title: "Customization",
    },
  ],
  "red",
  true
);

Timed Sequence

A sequence of highlights and messages where developers can specify the length spent on each item.

Code Demo 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
const timedSequenceCode = document.getElementById("timedSequenceCode");
const timedSequenceDemo = document.getElementById("timedSequenceDemo");

const timedSeq = new TimedSequence(
  [
    {
      position: 0,
      domElement: timedSequenceDiv,
      info: document.createTextNode(
        "This is a timed tutorial that progresses automatically. This element is highlighted for 7s."
      ),
      duration: 7000,
    },
    {
      position: 1,
      domElement: timedSequenceCode,
      info: document.createTextNode(
        "We can introduce new features. You can click the button to view code after the tutorial."
      ),
      duration: 7000,
    },
    {
      position: 2,
      domElement: timedSequenceDemo,
      info: document.createTextNode("This element will be highlighted for 3s."),
      duration: 3000,
    },
  ],
  true,
  "lightblue"
);

Customization

Embedded Timed Sequences

Both TimelineTutorial and BasicTutorial allow users to specify a callback when a particular element is highlighted. This means we can add TimedSequences within tutorials.

Code Demo 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
const timedSeq = new TimedSequence(
  [
    {
      position: 0,
      domElement: timedSequenceDiv,
      info: document.createTextNode(
        "This is a timed tutorial that progresses automatically. This element is highlighted for 7s."
      ),
      duration: 7000,
    },
    {
      position: 1,
      domElement: timedSequenceCode,
      info: document.createTextNode(
        "We can introduce new features. You can click the button to view code after the tutorial."
      ),
      duration: 7000,
    },
    {
      position: 2,
      domElement: timedSequenceDemo,
      info: document.createTextNode("This element will be highlighted for 3s."),
      duration: 3000,
    },
  ],
  true,
  "lightblue"
);

const embeddedDiv = document.getElementById("embeddedDiv");
const dummyData = document.getElementById("dummyData");
const option1 = document.getElementById("option1");
const option2 = document.getElementById("option2");

const subsequence = new TimedSequence(
  [
    { position: 0, domElement: option1, duration: 1000 },
    { position: 1, domElement: option2, duration: 1000 },
  ],
  false,
  "gray"
);

const embeddedBasic = new BasicTutorial(
  [
    {
      positon: 0,
      domElement: embeddedDiv,
      info: document.createTextNode("We can trigger callbacks with tutorials."),
    },
    {
      position: 1,
      domElement: dummyData,
      info: document.createTextNode(
        "We started a sequence with 3 repititions."
      ),
      callback: () => {
        subsequence.startSequence(3);
      },
    },
  ],
  "black",
  true
);


Dummy Data for Demo
  • Some option 1
  • Some option 2

Change CSS styling

Styling can easily be adjusted using the CSS selectors. Here we styled the tutorialControls in the BasicTutorial to a dark theme.

Code 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#tutorialControls {
  color: white;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 400px;
  border: 2px solid;
  background-color: #383838;
  padding: 5px;
  z-index: 1;
  margin: 0px;
  border-radius: 10px;
}

#tutorialControlsHeader {
  text-align: center;
  width: 100%;
  background-color: black;
}

#tutorialControlsBody {
  text-align: center;
  align-items: center;
  justify-content: center;
  display: flex;
  width: 100%;
  min-height: 100px;
}

#tutorialControlsButtons {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

NOTE: during this demo you cannot run two of the tutorial classes together.