Forum Discussion
Text Entry Minimum Character Requirement
- 3 months ago
Hi NickiMazzocca-8,
I have provided a storyline file with an example of this. It does require JavaScript, but you should just be able to add to your project.
Here's the outcome on Review 360 before you get into it.
In my example, I have added a message below the text area indicating how many words have been typed.
This solution uses two variables, these are:
name: minWords
Type: Number
Value: 50name: wordCountMessage
Type: Text
Value:name:wordCountReached
Type: True/False
Value: False
I then add an input box to the slide, and ensure it is set to Multi-line, but selecting the input box, and selecting CTRL+ENTER and then selecting Text Box and then Text Entry > Multi-line.I then add a single line Text Box below the Multi-line text input, and add the variable %wordCountMessage% to the contents of the Text Box. The variable name is displayed with a yellow background, to indicate it is a variable reference, and dynamic text.
I then add an icon to the slide which has two states, to visually indicate if the minimum requirement has been met. The Normal state is a cross icon and the Tick state is a tick icon. I use the variable wordCountReached to switch between the two states.
I then add a trigger to change the state of the icon when the variable wordCountReached is changed between True/False. True = Tick (Tick state of icon), False = Cross (Normal state of icon)
I then add the following JavaScript to the "timeline starts on this slide - Execute JavaScript" trigger. This will control the variables in Storyline which will either update text, or cause the icon to switch to the Tick or Cross.
// Get the Storyline Player const player = GetPlayer(); // Get the text area const textarea = document.querySelector('textarea'); // Get the number of minimum words required const minWords = player.GetVar('minWords') // Add the event listener textInput = function() { const text = textarea.value.trim(); // Get the text and trim whitespace const words = text.split(/\s+/).filter(word => word.length > 0); // Split text into words const wordCount = words.length; // Count the words player.SetVar('wordCountMessage',`You have typed ${wordCount} words. Minimum required is ${minWords}.`); player.SetVar('wordCountReached',wordCount >= minWords); } textarea.addEventListener('input', textInput); // run to init textInput();
Hello, I have just discovered this which is exactly what I am looking for, thank you for sharing. Is there a way to change the value of the variable so you can edit the number of words that is set to the minimum? Thank you
The variable "minWords" which is defined in Storyline is the variable that controls the minimum number of words that are required.
- JenniferGordon16 days agoCommunity Member
Thank you so much, I figured it after a bit of playing but really appreciate you taking the time to reply. Thanks again