tutorialjs v0.1.0

Tutorialjs

Check how it works in this video! (YouTube)

TutorialJS is a better way to introduce your application or new features of an existing application.

It shows new users a step-by-step guide on how to use the various components of your project.

This library is based on Semantic UI elements and uses Semantic UI popups.

How to contribute

*This project is in alpha version (0.1.4).

You can contribute following the contribution guidelines in CONTRIBUTING.md. Also check issues to start contributing to this project.

Dependencies

JQuery

The main dependency is JQuery, it also use Semantic UI styles and scripts but those are included in this repository.

How to use tutorialjs

Add Semantic UI CSS components

<link rel="stylesheet" href="./tutorialjs/semantic_components/popup.min.css">
<link rel="stylesheet" href="./tutorialjs/semantic_components/transition.min.css">

Add Semantic UI Scripts

<script src="./tutorialjs/semantic_components/transition.min.js"></script>
<script src="./tutorialjs/semantic_components/popup.min.js"></script>

Include Tutorialjs script

<script src="./tutorialjs/tutorial.js"></script>

Optional

If you want to use Semantic UI button styles you can add the following:

<link rel="stylesheet" href="./tutorialjs/semantic_components/button.min.css">

HTML

In order to link html tags with Tutorialjs you must add a tutorial class to each tag you want to have a step tutorial. Also, you need to include a custom property to define the index of the step; tutorial-index="index:int".

<div class="tutorial" tutorial-index="0">
  
</div>

By default the start index is 0.

To set a title and text to the popup you have to add two more custom attributes:

tutorial-title="title"

tutorial-text="text"

<div class="tutorial" tutorial-index="0" tutorial-title="My title" tutorial-text="My text">
  
</div>

The following is a tutorial with three index steps:

<div class="tutorial" tutorial-index="0" tutorial-title="My title" tutorial-text="My text">
</div>

<div class="tutorial" tutorial-index="1" tutorial-title="My title" tutorial-text="My text">
</div>

<div class="tutorial" tutorial-index="2" tutorial-title="My title" tutorial-text="My text">
</div>

Javascript

Once you have setup the HTML you are ready to run the tutorial. The simplest way to do it is using the start function of the Tutorial object, as follow:

Tutorial.start().then((success) => {
    console.warn(success)
}).catch((error) => {
    console.warn(error)
})

Tutorialjs runs the start function as a async promise so you must use then and catch to way for the response.

Success response:

Error response:

Options

The correct way to set options is to assign them before you trigger the start function, here an example:

Tutorial.startIndex = 0;
Tutorial.endIndex   = 4;

Tutorial.start().then((success) => {
    console.warn(success)
}).catch((error) => {
    console.warn(error)
})

Options available

License

The Tutorialjs library is an open-sourced software licensed under the MIT License.