title: Algorithm design for a simple "tour / intro" javascript
body: <p>I'm creating a tour for my web app.. It consists in multiple steps that are basically javascript functions</p>
  
  <p>I thought of creating something like:</p>
  
  <pre><code>function step1(){
  // show the first step text
  // highlight a specific element or button
  }
  
  function step2{
  // show the second step text
  // highhlight a different button or area
  }
  </code></pre>
  
  <p>Now these steps will be called on different actions, some will be when a button is clicked, some will be when something is hovered or maybe when the screen is clicked..</p>
  
  <p>So I thought of creating an object called tourObj that holds an array of these functions and, when called, </p>
  
  <pre><code>tourObj.nextStep() 
  </code></pre>
  
  <p>or </p>
  
  <pre><code> gotoStep(x) 
  </code></pre>
  
  <p>will go to next, back or to a specific part of the tutorial. </p>
  
  <p>I came up with this solution but it kinda feels like there's a better way to do it. I'm sorry for the broad question but I'm a bit confused on how to build this, can someone point me a good way?</p>