Intelligent Freeflow Text Using Javascript

Open text boxes are a useful tool, but the ability to utilise what users input is limited in default Storyline360.

You can grade an entire submission or reuse the input elsewhere, but what if you wanted to do something more dynamic? Is there no way to search the input for keywords?

The answer is yes, by using JavaScript. Sam Harold shows us how.

First, open your Storyline project and navigate to where you want your activity.

We will not be using the built-in text question type, as this only allows us to grade an entire text string; we want to search for keywords. So, we will need to insert our own..

A ‘TextEntry’ variable and trigger are made when the field is added. We will use these in our walkthrough, but if you need to use others, ensure you update them accordingly.

For our JavaScript, we need some True/ False Storyline variables to toggle, based on whether a keyword is found. You can create these now. There is no limit to how many you use, but we will be looking for five in this demonstration.

We have the text entry, and the True/False variables we will use like ‘keys’ toggle. Now we need to add the JavaScript.

Here you can see the complete JavaScript. These five lines are used to change one of our variables, True/False, if a keyword is found; let’s explore each line now…

Line 1: var answerText = getVar(“TextEntry”);

Tells the program to get our text field variable, “TextEntry”. Make sure you update TextEntry here if using a different text variable, but ensure you keep it within “ ” marks

Line 2: var words = {“1”, “one”};

Tells the program what words we are looking for. Each distinct word is contained between “ “ marks within the { }. A comma is used to separate each potential word variant. i.e 1 or one. Update the { } area in this format with your list of words.

Line 3: var foundWordsCount = words.filter(word => new RegExp(`\\b${word}\\b`, 'i').test(answerText)). length;

Tells the program how to review the list when looking for our words specified on Line 2. `\\b${word}\\b` defines the boundaries we expect between words.

It is important to ensure words are checked correctly. ‘i’ specifies that keywords are not case sensitive.

This line requires no modifications; copy as you see here to ensure correct functionality

Line 4: var containsMininumWords = foundWordsCount >= 1;

For this walkthrough, we require only one suitable keyword per True/False variable, but you can increase this number to require multiple unique variants.

Line 5: setVar("answer_contains_key1", containsMininumWords);

Updates our True/False variable “answer_contains_ key1” to match what was found based on our inputs in Lines 2 and 4. If a suitable number of keywords were found, it will update to True. Change the variable in the “ “ marks to the desired True/False variable.

Now that we understand this JavaScript, what would an example look like?

See how I modified Line 2 to check for variants of the Knight we see in the image. (i.e “knight”, “warrior”, “soldier”, “hero”) If at least one of these is used, it will set my “answer_contains_key1” variable to True.

We can now use this variable change to run other triggers, such as changing the state of an image based on whether the user inputs one of my Knight keywords.

Repeat the steps above for as many keyword checks as you desire, ensuring each aspect has its own unique True/False variable.

In this demo, I will use these variables to alter the visibility of images. You can use this functionality to provide custom feedback or branching scenarios for your users!

Using JavaScript, we have seen how easy it is to create dynamic text entry questions. Stretch your creativity with this and have fun!

Sam Harold is an Instructional Designer and Moodle Developer, who spends his time playing games and trying to break Articulate Storyline.