Text Entry Minimum Character Requirement

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: 50

name: 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();