Forum Discussion

Nedim's avatar
Nedim
Community Member
8 days ago

Track User Input and Character Count Dynamically with Storyline Variables

This functionality captures user input in real-time, updating both the typed text and character count dynamically in Storyline variables. Ideal for tracking text input and providing instant feedback. 

  • Nedim's avatar
    Nedim
    Community Member

    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.