Forum Discussion
Solved
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....
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.
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.