Text Entry - Detecting Characteristics of What is Entered

Hello all,

 

Is it possible in Storyline 360 to place a text entry box onto a slide, and set up variables that change depending what is in the box.

 

For example: Can a variable be set up that changes from a false state to a true state if 8 or more characters are typed into the text entry box, but remains false if 7 or less characters are in the box?

14 Replies
Matthew Bibby

Yes and no.

You can use JavaScript to determine how many characters have been entered and trigger a variable change when it exceeds 7 characters. However, if using a Storyline text entry field the user will need to click outside of the text box before the text they entered will be saved in the variable. 

This probably isn't what you are looking for.

So to get things working how you envision, you'll need to create your text entry fields in HTML and import those into Storyline via a Web Object. Zsolt has written a tutorial showing how to do this. You can read it here.

If you decide to go this route and need a hand writing the JavaScript that checks how many characters have been entered, let me know. Happy to help where I can. 

Sam Barnard

Thank you for your reply :)

Basically I want to demonstrate password security to learners. so the idea was to give them a text box to type a word into (doesn't matter what) and then for a bunch of variables to be updated based on what's been entered into the text box (i.e. 8 characters minimum, uses both alphanumeric and non-alphanumeric, upper and lower case).

If there was a way to do this in Storyline (even if you have to click outside the box so it loses focus to change variables and such) that would be most preferable.

I'll have a look at the tutorial you posted but I must confess I've never written JavaScript myself.

Sam Barnard

So I'm doing a project that encompasses a few things and one those is IT Security. Now this is for internal use only and the idea being to just have a new starter induction course for those new to the company. I've gone through various bits already and I'm writing it and as I was going through some common practices for keeping computers relatively secure, I wrote the bit on passwords and considerations of what to avoid and some recognised good practice.

I thought, if I could make this a bit more interactive it would help with learner engagement. So providing them a box that they could literally type whatever word they want into a box and then have some variables change depending on what's typed into the box.

The requirements of the box would be:

  1. it must be 8 characters minimum
  2. it must contain at least one non-alphanumeric character
  3. it must contain a minimum of one alpha and one numerical character.
  4. It must contain at least one lower and upper case letter

There would then be a tick that would appear for each one depending on what was in the box.

So if someone typed a 5 letter word that was all lower case but also included numbers and one non-alphanumeric character then they would see a tick appear by the second and third requirements. and a cross by 1 and 4. It's just to illustrate and for them to experiment with some good practices for passwords.

If possible it would be nice to have the "Next" button of the player become active only after all 4 requirements have been met, but I have no problem with settling without it.

Matthew Bibby

Hey Sam, 

Here is a demo.

You'll need the text entry field to use a variable called Password (note, this is case sensitive).

You'll also need the following text variables set up in Storyline: Length Numbers Letters Special Lowercase Uppercase

These variables will change when their associated conditions have been met. You can see the triggers used to make this happen in the source file.

Here is the JavaScript that runs when you hit the Check Password button:

//First, let's establish communication with Storyline:
var player = GetPlayer();

//Then let's get the text from the password field:
var pw = player.GetVar("Password");

//Then we'll store the value of the password in a JavaScript variable called str:
var str = pw;

//Then we will check if the password has 8 or more characters and if so, we will change the Storyline variable Length to Yes:
if (str.length >= 8) {
player.SetVar("Length","Yes");
}

//Then we will check if the password has any numerical characters and if so, we will change the Storyline variable Numbers to Yes:
if (str.search(/\d/) != -1) {
player.SetVar("Numbers","Yes");
}

//Then we will check if the password has any alpha characters and if so, we will change the Storyline variable Letters to Yes:
if (str.search(/[a-zA-Z]/) != -1) {
player.SetVar("Letters","Yes");
}

//Then we will check if the password has any special characters and if so, we will change the Storyline variable Special to Yes:
if (str.search(/[ !@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/) != -1) {
player.SetVar("Special","Yes");
}

//Then we will check if the password has any lowercase characters and if so, we will change the Storyline variable Lowercase to Yes:
if (str.toLowerCase() && str !== str.toUpperCase()) {
player.SetVar("Lowercase","Yes");
}

//Then we will check if the password has any uppercase characters and if so, we will change the Storyline variable Uppercase to Yes:
if (str.toUpperCase() && str !== str.toLowerCase()) {
player.SetVar("Uppercase","Yes");
}

Hope that helps. 

Yell out if you have any questions.

Sam Barnard

Hi Matthew,

I know this thread is relatively old as is the topic, but I've finally gotten around to using the password checker and script that you kindly provided me on a live project, however, there is one issue it's experiencing.

When a password is entered into the text field and the "Check password" button is clicked, it checks the password as you would expect. However, if you then change the content of what's in the text field, it seems to remove characteristics that may have been met on the first attempt and this continues until it no longer flags any characteristics that have been met.

Effectively, it seems the script is either not running correctly, or the variables are not being updated and fed into the script. I've tried a reset button to force the screen to revert to it's initial state but this doesn't solve the described problem.

Do you happen to have any suggestions? I've attached the screen in question (albeit without the reset button).

Kind regards,

Sam

Matthew Bibby

Hi Sam,

Sorry about that, I did a terrible job with that last script I provided you. I must have been in "make a rough sample" mode rather than "let's do this properly" mode.

All fixed now and I've updated your project, please see the file attached at the bottom of this post.

I've changed the JavaScript so it's using boolean variables and is resetting them each time the script runs (so there is no need for you to have a reset button). This will help ensure that everything that needs to update... will update each time the script runs.

I've also changed the triggers used in the Storyline file so that the states of those things will update correctly based on the variables from the script. 

Let me know if you have any questions.

Here is the new JavaScript used:

//First, let's establish communication with Storyline:
var player = GetPlayer();

//Then let's reset our variables:
player.SetVar("Length",false);
player.SetVar("Numbers",false);
player.SetVar("Letters",false);
player.SetVar("Special",false);
player.SetVar("Lowercase",false);
player.SetVar("Uppercase",false);

//Then let's get the text from the password field. The text entry field in Storyline will need to use a variable called Password:
var pw = player.GetVar("Password");

//Then we'll store the value of the password in a JavaScript variable called str:
var str = pw;

//Then we will check if the password has 8 or more characters and if so, we will change the Storyline variable Length to true:
if (str.length >= 8) {
player.SetVar("Length",true);
}

//Then we will check if the password has any numerical characters and if so, we will change the Storyline variable Numbers to true:
if (str.search(/\d/) != -1) {
player.SetVar("Numbers",true);
}

//Then we will check if the password has any alpha characters and if so, we will change the Storyline variable Letters to true:
if (str.search(/[a-zA-Z]/) != -1) {
player.SetVar("Letters",true);
}

//Then we will check if the password has any special characters and if so, we will change the Storyline variable Special to true:
if (str.search(/[ !@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/) != -1) {
player.SetVar("Special",true);
}

//Then we will check if the password has any lowercase characters and if so, we will change the Storyline variable Lowercase to true:
if (str.toLowerCase() && str !== str.toUpperCase()) {
player.SetVar("Lowercase",true);
}

//Then we will check if the password has any uppercase characters and if so, we will change the Storyline variable Uppercase to true:
if (str.toUpperCase() && str !== str.toLowerCase()) {
player.SetVar("Uppercase",true);
}

And here is a sample of the updated triggers:

Your file is attached.

Hope that helps.

Sam Barnard

Thank you for your response! I appreciate the effort and help.

The only issue we're experiencing with it now, I don't know if this is something to do with our LMS - Moodle, browser or whether there's something to do with Java involved in this (as I mentioned before, I am not experienced with Java).

It is now not updating the met requirements if you're value in the text field changes. If you manage to meet all six requirements, this is registered as you would expect. However, if you then edit what is in the text field to something that doesn't meet them, and then click "Check Password", it doesn't update the requirements to reflect this.

Do you know why that might be?

Kind regards,

Sam

Sam Barnard

Hi Matthew,

I've had a bit of a fiddle with it and it's now working as intended. Really haven't a clue what was happening, perhaps something went a bit funny during publishing.

It's working now so thank you very, very much for your help and writing the Java script! :) It's the icing on the cake for this particular little module.

Sam