Using regular expressions with Storyline

Any help from some javascript wizards would be much appreciated.  What I'm trying to to is incorporate a password checker for a training on internet security.  The user would input a password into a data entry field and then I have an 'Execute Javascript' trigger set to run a regular expression to check that there is at least 8 characters, lowercase letter, uppercase letter, and a number.  I've checked the regular expression outside of storyline and it works.  Here's the javascript I have setup in storyline:

 

var pattern = new RegExp(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,15}$/);

var check = pattern.test(Password);

var player = GetPlayer();

player.SetVar("checkTF", check);

 

'Password' is the variable name given to the text entry field.  'checkTF' is the variable name given to a storyline true/false variable.  I then have other triggers to show different layers based on whether 'checkTF' is true or false.

 

Thanks so much for any help!

13 Replies
Erin Mahabir

Hi Michael

Wondering if you could help... I'm doing the same type of interaction, however I'd like to show the increments of success based on the 4 aspects of a good password.  

So, on a sliding scale,  you either got 1/4 correct, 2/4 correct, etc...

What would I need to incorporate into my triggers to make that happen? 

Thanks

Erin

Walt Hamilton

Michael's script only checks for legal characters and length. To break out those four characteristics, you would need to write a separate check for each one that would set a variable to pass back to SL.

Where he has

var pattern = new RegExp(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{8,15}$/);
var check = pattern.test(password);

you would need one pattern for legal characters, one for length, one for uppercase, and one for other characters. Just cut down what he has to check only the exact part you want. You could reuse the "pattern" variable, but for the second line, you would need distinct variables. Then pass all four of them to SL, and write triggers. I would create a correct and an incorrect layer for each one and allow them all to show at the same time. So show correct or incorrect for the first one, lower down on the page, show the second, etc..

Erin Mahabir

Thank you Walt.  If I'm understanding you correctly, I will have 4 triggers each executing a separate javascript.  

#1: (lower case)

var player = GetPlayer();
var password = player.GetVar("Password");
var pattern = new RegExp(?=.*[a-z]);
var check = pattern.test("Password");

player.SetVar("checkTF", check);

#2: (upper case)

var player = GetPlayer();
var password = player.GetVar("Password");
var pattern = new RegExp(?=.*[A-Z]);
var check = pattern.test("Password");

#3: (special character)

var player = GetPlayer();
var password = player.GetVar("Password");
var pattern = new RegExp(/^(?=.*\d);
var check = pattern.test("Password");

#4: (number)

var player = GetPlayer();
var password = player.GetVar("Password");
var pattern = new RegExp(?=.*[0-9]);
var check = pattern.test("Password");

Then I was thinking I could have a number variable to "add 1" every time one of those turn a response of 'true'.  Then assign the state changes of my visual indicators according to the strength (# of 'true).  <--- except, I'm unsure how to do that!! 

Have I got that right?  I shared the file here...

Walt Hamilton

Yes, you have it, but I might be able to save you some work. Put all your scripts together into one script.:

var player = GetPlayer();
var password = player.GetVar("Password");
var pattern = new RegExp(?=.*[A-Z]);
var checkLC= pattern.test("Password");
var pattern = new RegExp(/^(?=.*\d);
var checkUC = pattern.test("Password");
var pattern = new RegExp(/^(?=.*\d);
var checkSC = pattern.test("Password");
var pattern = new RegExp(?=.*[0-9]);
var checkNum = pattern.test("Password");

Then, a command to setVar for each of the 4 check variables.
player.SetVar("LCCheck", checkLC);
player.SetVar("UCCheck", checkLC);
player.SetVar("SCCheck", checkSC);
player.SetVar("NumCheck", checkNum);
player.SteVar("Done","True");

I'm rusty on js, so I'm assuming that your expressions will work, and I think you may need to delete the var in front of password after the first one. I'm assuming that test will passback "true" or "false", and i think it will come as lowercase. Experiment; maybe js will set the variables directly if they are T/F, and maybe you'll have to do it yourself: Change LC to True if LCCheck = "true".

I put some triggers in that will show the strength of the password. This will show all the states up to whatever one the user achieved. If you don't like that, and want to show only the level it is, delete the covers, set the padlocks to initial state of hidden, and change the triggers: Change state of level 1 to normal if strength = 1, etc.


One other thought: do you want to include length?


 

Erin Mahabir

Unfortunately this is all just way too complicated for me :(  Thank you for trying Walt.  I tried your js and I can see that instead of altering the states of the locks, you have added super-imposed images to be 'hidden' but nothing happens upon clicking "Check".  I'm just getting more and more confused.  
Thanks for trying. I think I'll have to go with a less-intelligent method of validation instead of an automated one.  

Matthew Bibby

There are lots of scripts that others have written to evaluate password strength. It is probably better to find one you like and them bring that into Storyline.

Personally, it bothers me when people focus on upper case, lower case, special characters and numbers as these do not make secure passwords (when humans are involved in choosing them). See here for an explanation as to why.