PiAir/type_effect.html

## 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, texts[index][1], 0, 100, function() {
                setTimeout(function() {
                  typeArray(texts, index + 1);
                }, 2000);
              })
            }, 1000);
          });
        } else {
          // Finished let's return
          return;
        }
      }
      const questionsAndAnswers = [
        ["Question 1", "Answer 1. Just some extra text to see if the cursor is visible in longer answers."],
        ["Question 2", "Answer 2"],
        ["Question 3", "Answer 3"],
        ["Question 4", "Answer 4"],
        ["Question 5", "Answer 5"]
      ];

      typeArray(questionsAndAnswers, 0);

    </script>
  </body>

</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, texts[index][1], 0, 100, function() {
	setTimeout(function() {
	typeArray(texts, index + 1);
	}, 2000);
	})
	}, 1000);
	});
	} else {
	// Finished let's return
	return;
	}
	}
	const questionsAndAnswers = [
	["Question 1", "Answer 1. Just some extra text to see if the cursor is visible in longer answers."],
	["Question 2", "Answer 2"],
	["Question 3", "Answer 3"],
	["Question 4", "Answer 4"],
	["Question 5", "Answer 5"]
	];

	typeArray(questionsAndAnswers, 0);

	</script>
	</body>

	</html>