Matthew Bibby
Matthew Bibby

Search a Text Entry Field for Keywords or Phrases

Matthew BibbyMatthew Bibby

Have you ever wanted to check if certain keywords or phrases have been typed into a Storyline text entry field?

Maybe you want to count how many important terms have been included in a learner's response to ensure that they have a solid grasp on the subject matter? Or perhaps you want to check if they've used a particular phrase as part of their response?

In this tutorial, we will look at how to use JavaScript to analyse the text entered into a Storyline text entry field and count how many times particular keywords are mentioned.

In this tutorial we will look at how to count the number of times certain words or phrases have been typed into a Storyline text entry field.

Before we dive into how this works, here is a quick demo:

Okay, so let's begin by adding a text entry field and a submit button to the stage:

Storyline stage showing a text entry field and submit button

Next, let's add an Execute JavaScript trigger to the submit button.

This is where we will add the JavaScript once we have written it.

Execute JavaScript trigger

So we are going to look at this code in detail, because I think it is important to understand what's happening so that you can adapt this yourself at a later stage. But if you'd prefer to skip the explanation, click here to jump to the end of this tutorial where you can do the copy and paste monkey thing.

Okay, the first thing that you need to figure out what keywords and phrases that we are looking for in the text entry field. For this example, let's go with:

Next, we need to check what variable the text entry field is using. In this case, that variable name is TextEntry. If you are playing along at home, yours may be different.

The variable the text entry field is using

Now let's do the JavaScript thing.

The first step is to establish communication with Storyline:

var player = GetPlayer();

Then we are going to create a new JavaScript variable called text which we will fill with the text that is stored in Storyline's TextEntry variable:

var text = player.GetVar('TextEntry');

Now, in this example we are simply counting the number of key words that have been typed into the text entry field.

So, since we are keeping score, we're going to need a variable to remember it. So let's create another JavaScript variable called score and give it a default value of 0:

var score = 0;

Next, let's have a look around in our text variable to see if we can find our keywords or phrases. For this example, I'm going to assume that we want to count all uses of these keywords, regardless of how they are capitalised. So One, one, ONE, oNe etc. will all be considered valid answers.

If correct capitalisation matters for your project, then make sure you read the FAQs at the bottom of this post.

Let's now create a new JavaScript variable called pos (which is short for position). The name isn't important, so you can change all instances of pos to turnip if that makes you happy, but I digress.

Next we want to take our text variable (which contains the information that was typed into the text entry field in Storyline) and convert it to lower case. This is so that we don't have to account for all possible combinations of upper and lower case letters. Then we are going to use the .indexOf method to check if one of our keywords or phrases is included in this text.
Why lowercase?

Because I don't like to yell. But if you LOVE UPPERCASE, then you can change toLowerCase to toUpperCase. It'll work fine.

var pos = text.toLowerCase().indexOf('one');

.indexOf will return the position of the thing that we are looking for. So if one is included anywhere in the text, then we are going to get told its position.

For example, if one was the first word in the text box, the .indexOf method would return 0. If it was the second word, it would return 1 and so on. If the keyword or phrase is not included, the result will be -1.

Yeah I know, JavaScript is weird. But that's cool, so are we.

In this case, we don't care so much about where the word shows up, we just want to know if it is somewhere in the text. And if it is, then are going to want to keep combing through the text to see if it is included more than once.

We can do this using something called a while loop, which we will use to say:

"Hey, if we look at the text and find our keyword, then we want to make note of that and then keep looking to see if it is there more than once."

This is how we do that:

while (pos !== -1) {
score++;
pos = text.toLowerCase().indexOf('one', pos + 1);
}

What does all that mean? I'll explain it as simply as I can.

If our keyword is found then we will get a result that is not -1.

So when we write while (pos !== -1), we are saying "We want to run this code if the keyword is found."

Then we are going to add 1 to the score variable, which we do through score++;.

Next we want to continue checking the text to see if the keyword occurs again, i.e.pos = text.toLowerCase().indexOf('one', pos + 1);. Because this is all in a while loop, it'll will continue to run until no more instances of the keyword is found in the text.

In order to check for our other keywords, we'll just need duplicate some of this code. So for our second keyword, we would include:

pos = text.toLowerCase().indexOf('two');
while (pos !== -1) {
score++;
pos = text.toLowerCase().indexOf('two', pos + 1);
}

I've changed three things for this second block of code. I've removed the var from the beginning as we have already created (or 'declared') the pos variable. I've also changed the keyword in both the first and second last line.

So, our third code block would follow the same pattern:

pos = text.toLowerCase().indexOf('skip a few');
while (pos !== -1) {
score++;
pos = text.toLowerCase().indexOf('skip a few', pos + 1);
}

You can add as many of these code blocks as you need.

Once we have finished checking for the different keywords and phrases, then we just need to pass our score back to Storyline. You can do that using the following code:

player.SetVar("Points",score);

Note that you will need to have a variable in Storyline called Points for this to work.

So, here is the complete code:

var player = GetPlayer();
var text = player.GetVar('TextEntry');
var score = 0;
var pos = text.toLowerCase().indexOf('one');
while (pos !== -1) {
score++;
pos = text.toLowerCase().indexOf('one', pos + 1);
}
pos = text.toLowerCase().indexOf('two');
while (pos !== -1) {
score++;
pos = text.toLowerCase().indexOf('two', pos + 1);
}
pos = text.toLowerCase().indexOf('skip a few');
while (pos !== -1) {
score++;
pos= text.toLowerCase().indexOf('skip a few', pos + 1);
}
player.SetVar("Points",score);

So you can copy this code into the Execute JavaScript trigger we created earlier.

Remember that you will need two variables in Storyline for this to work correctly. One is TextEntry, which is where the stuff typed into the text entry field goes. And the other is Points, which is where the score will be stored after the JavaScript runs.

That's it! You now know how to get Storyline to count how many times a keyword or phrase has been typed into a text entry field. There are lots of different ways that this code could be used. If you have something particular in mind but aren't sure how to pull it off, let me know.

Frequently asked questions:

Q. When I published this project and played it on my computer, it didn't work. Why is that?
A. It's because security restrictions are stopping the JavaScript from working. This happens when you view the Flash output on your local hard drive. To get around this, view the HTML5 output instead (by opening story_html5.html). Or, upload your published output to the environment for which it was published.

Q. Will this work in an LMS?
A. Yes, it works in SCORM Cloud. If you'd like to test it in your LMS, you can use this SCORM package.

Q. Will this work in Articulate Mobile Player?
A. No, no it won't. That's because the Articulate Mobile Player is allergic to JavaScript.

Q. Does this work in HTML5? (i.e. will it work on my phone and tablet?)
A. Yes, this will work in the HTML5 output.

Q. What if capitalisation matters?
A. You'll just need to remove all mentions of .toLowerCase().

Q. Are there any other known issues with this approach?
A. Yes, the code isn't as specific as it could be. For example, if a keyword is included as part of another word (e.g. abalones abandoned aforementioned anemones), then it will be counted. Also, spaces are only taken into account if they are used as part of a phrase. So if you type onetwo in the demo, you'll get a score of 2. But if you typed skipafew, you'd get nada.

Q. My question isn't listed here, what should I do?
A. A little dance? No, that'd be silly. But fun. So once you've finished dancing, just leave a comment below or contact me.

Files you might need:

Here is the .story file that was used in this example.

Here is a SCORM package you can use to test if this works in your LMS.

If you found this tutorial helpful and think that others in your network will also, please share using the share buttons below. Thanks!

Matthew Bibby
Author

Matthew Bibby

I'm Matt. I'm an eLearning Consultant. I help people like you develop memorable, engaging and profitable training programs. What do you need a hand with?

Comments