Track User Input and Character Count Dynamically with Storyline Variables

Execute the JavaScript below when the timeline starts on a slide.

var inputs = document.querySelectorAll('.acc-textinput');

inputs.forEach(function(input) {
  input.addEventListener('input', function() {
    var inputValue = input.value;
    setVar('typedText', inputValue);
    var charCount = inputValue.length;
    setVar('charCount', charCount);
  });
});

In this example, I am updating two Storyline variables: a text variable "textTyped" and a number variable "charCount" that are referenced on the slide. This code can be used for one or multiple text entry fields simultaneously.