Opening tutorial for webapp

[MathewSuran]

Hello,

What is it called when there is a tutorial when you first open a webapp or webpage.  Basically instructions highlighting what to do in a few steps?  Are there other programs to build that in or is this done through javascript? Any resources anyone can direct me to?

[Drew]

I call it a "Tour".
Here is a decent lib.
Intro.js - Step-by-step guide and feature introduction for your website 

[MathewSuran]

That looks pretty cool.  Thanks for the resource!

[MathewSuran]

I am having trouble getting this to work.  I am getting this error: Uncaught TypeError: Cannot read property 'querySelectorAll' of null  intro.js:130

I added the intro.js and introjs.css to my working directory.  Added the stylesheets (css & js) to the body.  Added the introJs().start(); script before the body.  Then added data-step="1" data-intro="Hello step one!" to the query execute id.  Am I missing a step?

Do you know if I am able to step through the webapp?  For example, a chart is generated after the query is executed, which right now I am not able to show.

[Drew]

without seeing it all its hard to determine what the issue is.

I would have to guess a timing issue.

Try setting a delay before it starts to test... 

Sample

setTimeout(function ()
{
 _createIntro();
}, 2000)

[MathewSuran]

Should the introJs().start(); be before the arcgis api?

Unfortunately I cant share the whole app since the data is not public.  

[Drew]

Here is how I implemented it a while back..

this.appTour = introJs();
this.appTour.setOptions({
showStepNumbers: false,
exitOnOverlayClick: true,
steps: [
{
intro: "Welcome to my site"
},
{
element: "#myElementId",
intro: "Sample Text",
position: "bottom",
}
]
});

//START THE TOOL
this.appTour.start();

[MathewSuran]

Ok, that makes more sense.  Where did you plug that into your html?

[Drew]

I have the code in a WAB widget. The elements it needs to attach to are already loaded.
Thats why I suggested the timer, it could add a delay... Try calling the code on a button click or something - That way all other elements are loaded . see if it works anyway.

[MathewSuran]

Has anyone got intro.js to work in the regular arcgis js api?  I am having trouble implementing it into my HTML.  The instructions on their site say to include the steps within the html lines.  This makes the code messy, imo, and not all located together in one place at the end with references to each id.  I have tried both ways though and have not had much success.  I keep getting a "multiple defined" error along with "introJs not defined".

I did get a different Tour called Joyride to work and it looks great!  Only problem, which is a big problem, is I can't get it to recognize a button id and I can't get the previous button to appear on the tour.

I couldn't get bootstrap tour to work either.

Anyone have any other suggestions and examples of a workflow that they know works in the environment I am using?