Business Problem

When you use a text entry object in Articulate Storyline, the text you type in the field does not get registered until the field loses focus. That means you need to click outside the field (for example, on a button) to make the the text entry field losing its focus. This also prevents you to monitor what the user is typing letter by letter.

The Hack

The following example “hacks” the out of the box feature. Before you try it, there’s some limitations for this trick.

  • It’s using JavaScript and jQuery (therefore, it won’t work in the mobile app)
  • It works only for the html5 output (not in Flash)
  • You need to do add one extra line after publishing the files

Let’s say you want the user to type in their name or some other information in a field to move on. You set up a button that is disabled unless the user types in something. This requires “monitoring” the text inside the field before it even gets to Storyline.

Try it!

http://rabbitoreg.com/examples/textentry/story.html

How it works

This is the screen inside Storyline. It has the intro text, nothing’s special about it. Then the first text entry field. The placeholder text inside the field is important. Normally, it’s just what you want the user to see as a hint. This time, it contains two pieces of information, divided by “|”. The first part is the name of the Storyline variable (in this case, CurrentTextEntry), the second is the actual text you want to display for the user.

The program will remove the Storyline variable name, so the user won’t see it. However, when the user types in the field, the program will update this variable instantly. You can then use this variable to set up triggers to disable or enable a button.

The second text entry has a different variable name: CurrentTextEntry2. When the user types in this field, the CurrentTextEntry2 variable gets updated. This way, you can have multiple text entries on the same page.

The third text entry does not have the “|” divider in the placeholder text, therefore the program will ignore it.

You can download the source from here if you want to play with it. In the source folder, there’s a readme.txt with instructions how to publish your version if you make any changes.