title: I want one character at a time on html page. After completion load next one
body: <p>I am developing a javascript app.
  I have stuck to implementing this.
  I am able to load all characters but I want to implement :- load one characters after on completion load next characters.
  One characters at a time.</p>
  
  <p><a href="https://i.stack.imgur.com/4Mno1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Mno1.png" alt="image"></a></p>
  
  <p>I want to load one character. After completion load next then again after completion next but one character at a time.
   <a href="https://hanziwriter.org/docs.html" rel="nofollow noreferrer">https://hanziwriter.org/docs.html</a> </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var chars = new Array('我','很','爱');
  
  console.log(chars);
  
  for(i=0; i&lt; chars.length; i++){
       console.log(chars[i]);
      writeFunction(chars[i])
  }
  
  
  
  //c = '我';
  
  function writeFunction(c){
  
      var writer = HanziWriter.create('character-target-div' , c , {
          width: 150,
          height: 150,
          showCharacter: false,
          padding: 5
        });
        writer.quiz({
          onMistake: function(strokeData) {
            console.log('Oh no! you made a mistake on stroke ' + strokeData.strokeNum);
            console.log("You've made " + strokeData.mistakesOnStroke + " mistakes on this stroke so far");
            console.log("You've made " + strokeData.totalMistakes + " total mistakes on this quiz");
            console.log("There are " + strokeData.strokesRemaining + " strokes remaining in this character");
          },
          onCorrectStroke: function(strokeData) {
            console.log('Yes!!! You got stroke ' + strokeData.strokeNum + ' correct!');
            console.log('You made ' + strokeData.mistakesOnStroke + ' mistakes on this stroke');
            console.log("You've made " + strokeData.totalMistakes + ' total mistakes on this quiz');
            console.log('There are ' + strokeData.strokesRemaining + ' strokes remaining in this character');
          },
          onComplete: function(summaryData) {
            console.log('You did it! You finished drawing ' + summaryData.character);
            console.log('You made ' + summaryData.totalMistakes + ' total mistakes on this quiz');
  
            flagComplete = true;
  
          }
        });
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/hanzi-writer@2.2/dist/hanzi-writer.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="character-target-div"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>