How can I make multipage intro by using Intro.js programmatic

Question

Hello I just start learning with javascript and I would like to know how to make multipage intro by using intro.js

   function beginer() {
    var intro = introJs();
    intro.setOptions({
        steps: [
        {
            element: '#beginer1',
            intro: "This is a <b>bold</b> tooltip."
        },
        {
            element: '#beginer2',
            intro: "Ok, <i>wasn't</i> that fun?",
            position: 'bottom'
        },

        ]
    });

    intro.setOptions({
        'showStepNumbers': false
    });

    intro.start();
}

Possible duplicate of [Can I use multiple intro.js with more than 2 pages?](http://stackoverflow.com/questions/33135590/can-i-use-multiple-intro-js-with-more-than-2-pages) — Carl, Oct 18 '16 at 22:03

score 3 · Answer 1 · answered Oct 15 '16 at 08:09

It is as simple as combining the options given in the multipage and programmatic examples in the repo. The multipage example is here

All you got to do is add an onComplete listener on the first page like so:

function beginer() {
   var intro = introJs();
   intro.setOptions({
    showStepNumbers: false,
    doneLabel: "Next page",
    steps: [
    {
        element: '#beginer1',
        intro: "This is a <b>bold</b> tooltip."
    },
    {
        element: '#beginer2',
        intro: "Ok, <i>wasn't</i> that fun?",
        position: 'bottom'
    },

    ]
   });

  intro.start().oncomplete(function() {
      window.location.href = 'second.html?multipage=true';
  });
}

I have sanitized the setOptions call in your function and combined all the options there. So that you don't have to do setOptions multiple doneLabel param. I guess, it triggers the oncomplete method which is defined after intro.start(). It redirects to the next page which in my case is second.html. Remember to pass the param multipage=true.

second.html is a regular HTML file but you need to start the introJs function to make the whole transition mulitpage. All you do is:

<script type="text/javascript">
  if (RegExp('multipage', 'gi').test(window.location.search)) {
    introJs().start();
  }
</script>

This in essence triggers the introJs().start() function after it finds the word multipage in the url or href in your browser address bar. Remember we called second.html like second.html?multipage=true. This just starts another intro instance on the second page. Now you can define the options here in form of JSON if you want or just use the data-step attributes on DOM as defined in the docs.

Hope it gets you started in the right direction.

Thank you, for the next page function is working but how can I define JSON within this code — Thida, Oct 15 '16 at 13:38
@Thida, just like you define the `steps` object in your first file, just like that you'll have to do `IntroJs.setOptions()` and set the `steps` object. You will have to provide the JSON of the steps to be shown in the second page. So the JSON for first and second page would be different. — Vivek Pradhan, Oct 15 '16 at 16:42
I had try this, but it still not working. Can you please check my code below of second page? I think there something wrong but I just can't figured it out where. — Thida, Oct 15 '16 at 17:54

How can I make multipage intro by using Intro.js programmatic

1 Answers1