Type effect

HTML

<html>

  <head>
    <style>
      #question,
      #answer {
        font-size: 16px;
        font-weight: normal;
        font-family: "Söhne", sans-serif;
      }

      .label{
        font-size: 16px;
        font-weight: bold;
        font-family: "Söhne", sans-serif;
      }
      #blink {
        content: "";
        width: 10px;
        height: 16px;
        background: #000000;
        animation: cursor-blink 0.5s steps(2) infinite;
        display: inline-block;
      }
      @keyframes cursor-blink {
        0% {
          opacity: 0;
        }
      }

    </style>
  </head>

  <body>
    <div class="label">Question: <br />
      <div id="question">
        <span></span>
      </div>
    </div>
    <div class="label">Answer: <br />
      <div id="answer">
        <span></span>
      </div>
    </div>
    <script>
      function typeText(element, text, index, interval, callback) {
        if (index < text.length) {
          element.innerHTML = element.innerHTML.substring(0,element.innerHTML.length-cursor.length) + text[index] + cursor;
          setTimeout(function() {
            typeText(element, text, index + 1, interval, callback);
          }, interval);
        } else {
          // Call the callback function when the typing has finished
          callback();
        }
      }

      const questionElement = document.getElementById("question");
      const answerElement = document.getElementById("answer");
      const cursor = '<span id="blink">_</span>';

      function typeArray(texts, index) {
        if (index < texts.length) {
          questionElement.innerHTML = ""; // Clear the element's content
          answerElement.innerHTML = ""; // Clear the element's content
          typeText(questionElement, texts[index][0], 0, 50, function() {
            setTimeout(function() {
              questionElement.innerHTML = questionElement.innerHTML.substring(0,questionElement.innerHTML.length-cursor.length)
              typeText(answerElement,...