title: Javascript dialog script feedback needed
body: <p>I am writing a Javascript dialog script which is seen in a lot of typical Role Playing Games.<a href="http://www.dailynintendo.com/wp-content/uploads/2008/12/luminous-arc-2-dialogue.jpg" rel="nofollow noreferrer">alt text http://www.dailynintendo.com/wp-content/uploads/2008/12/luminous-arc-2-dialogue.jpg</a></p>
  <p>At the moment I got an array with text strings which you can skip trough. I got at the point where you can make a decision and based on the input a different string will show.</p>
  <p>However I don't think this is the right way to do it. These are the requirements for the script:</p>
  <ul>
  <li>Support for multiple dialog scripts</li>
  <li>multiple characters</li>
  <li>user decision input (&quot;Do you like me?&quot; -yes -no)</li>
  </ul>
  <p>This is my code at the moment:</p>
  <pre><code>// Intro script
  var script_intro = [];
  script_intro[0] = 'Hello how are you?';
  script_intro[1] = 'So I heard..';
  script_intro[2] = 'This is a cool game!';
  
  script_intro[3] = [];
  script_intro[3][0] = 'Do you like me?';
  script_intro[3][1] = [];
  script_intro[3][1][0] = 'Jah';
  script_intro[3][1][1] = 4;
  script_intro[3][2] = [];
  script_intro[3][2][0] = 'Nah';
  script_intro[3][2][1] = 5;
  
  // Intro script: variation I
  var script_intro_1 = [];
  script_intro_1[0] = 'I love you too!';
  
  // Intro script: variation II
  var script_intro_2 = [];
  script_intro_2[0] = 'Damn you...';
  
  function initDialog()
  {
      // This is where the text will be shown
      var dialog = document.getElementById('dialog');
      var content = document.getElementById('content');
      
      var nextButton = document.getElementById('nextButton');
      var optionButton_1 = document.getElementById('optionButton_1');
      var optionButton_2 = document.getElementById('optionButton_2');
      
      // How fast the characters will appear after each other (milliseconds)
      var scrollSpeed = 50;
  }
  
  // Scroll text per line, character
  function scrollText(script, line)
  {
      var char = 0;
      
      // If this line contains a question that requires user input
      if(typeof(script[line]) == 'object')
      {
          var textScroller = setInterval(
              function()
              {
                  // Add the string char for char
                  content.innerHTML += script[line][0][char];
                  char ++;
                  
                  if(char &gt;= script[line][0].length)
                  {
                      clearInterval(textScroller);
                      
                      // Show options
                      options(script, line);
                  }
              }, scrollSpeed);
      }
      else
      {
          var textScroller = setInterval(
              function()
              {
                  content.innerHTML += script[line][char];
                  char++;
          
                  if(char &gt;= script[line].length)
                  {
                      clearInterval(textScroller);
                      
                      // Show next line
                      next(script, line);
                  };
              }, scrollSpeed);
      }
  }
  
  function next(script, line)
  {
      line = line + 1;
      
      // Last line has been shown
      if(script[line] == undefined)
      {
          //alert('End of dialog');
      }
      else
      {
          nextButton.style.visibility = 'visible';
          
          nextButton.onclick = function()
          {
              nextButton.style.visibility = 'hidden';
              content.innerHTML = '';
          
              scrollText(script, line);
          }
      }
  }
  
  function options(script, line)
  {
      optionButton_1.innerHTML = script[line][1][0];
      optionButton_2.innerHTML = script[line][2][0];
      optionButton_1.style.visibility = 'visible';
      optionButton_2.style.visibility = 'visible';
      
      optionButton_1.onclick = function()
      {
          optionButton_1.style.visibility = 'hidden';
          optionButton_2.style.visibility = 'hidden';
          content.innerHTML = '';
          
          scrollText('script_intro_1', 0);
      }
      
      optionButton_2.onclick = function()
      {
          optionButton_1.style.visibility = 'hidden';
          optionButton_2.style.visibility = 'hidden';
          content.innerHTML = '';
          
          scrollText('script_intro_2', 0);
      }
  }
  </code></pre>
  <p>html</p>
  <pre><code>&lt;body onload=&quot;scrollText(script_intro, 0)&quot;&gt;
      &lt;h1&gt;rpg&lt;/h1&gt;
      &lt;a id=&quot;reset&quot; href=&quot;#&quot;&gt;Reset&lt;/a&gt;
      &lt;div id=&quot;device&quot;&gt;
          &lt;div id=&quot;dialog&quot;&gt;
              &lt;strong&gt;NPC:&lt;/strong&gt;
              &lt;div id=&quot;content&quot;&gt;&lt;/div&gt;
              &lt;a id=&quot;nextButton&quot; href=&quot;#&quot;&gt;Next&lt;/a&gt;
              &lt;a id=&quot;optionButton_1&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
              &lt;a id=&quot;optionButton_2&quot; href=&quot;#&quot;&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>I could really use some feedback. What is the best way to write such script with the requirements above? Is using JSON or XML a better option than an Array for the dialog scripts?
  I especially need some hints on how to implement multiple choices in the script.</p>
  <p>Thank you!</p>