Is it possible to check the password (bad, good) in AS with Javascript

Jan 30, 2017

Hello, everyone! I'm new to Articulate Storyline. Can I ask your advice how to get text from data entry into javascript storyline, and how to check it for the further feedback (like "good password", "bad password"). Is it possible to realize?

Thank you in advance!

8 Replies
Dave Cox

Hi Maryna,

Yes, you can do this with javascript. 

To get your variable out of the storyline use this code in a javascript trigger:

var player = GetPlayer(); // gets the storyline player object
var myPassword = player.GetVar("Storyline_Variable_Name"); // gets the value of the storyline variable

Now that you have the value of the storyline variable in a javascript variable, you can perform any javascript action on it that you want. The javascript code to do this can be pretty involved, but look here for a good example how you can do this with regExp (Regular expression). regExp is a very powerful string checking algorithm that is built into javascript.

Maryna Skorokhod

 

Thank you, Dave, and how to input this value of the variable in a javascript using this code: (and then how to get a feedback in storyline). Sorry for so simple questions. I'm really new to the Storyline.

 

var player = GetPlayer()
var my Password = player.GetVar("SystemDate")
<script type="text/javascript">

function checkPassword(form) {

var password = form.password.value; 

var s_letters = "qwertyuiopasdfghjklzxcvbnm"; 
var b_letters = "QWERTYUIOPLKJHGFDSAZXCVBNM"; 
var digits = "0123456789"; 
var specials = "!@#$%^&*()_-+=\|/.,:;[]{}"; 
var is_s = false; 
var is_b = false;
var is_d = false; 
var is_sp = false; 
for (var i = 0; i < password.length; i++) {
if (!is_s && s_letters.indexOf(password[i]) != -1) is_s = true;
else if (!is_b && b_letters.indexOf(password[i]) != -1) is_b = true;
else if (!is_d && digits.indexOf(password[i]) != -1) is_d = true;
else if (!is_sp && specials.indexOf(password[i]) != -1) is_sp = true;
}
var rating = 0;
var text = "";
if (is_s) rating++; 
if (is_b) rating++; // 
if (is_d) rating++; // 
if (is_sp) rating++; // 
if (password.length < 6 && rating < 3) text = "Bad";
else if (password.length < 6 && rating >= 3) text = "Good";
else if (password.length >= 8 && rating < 3) text = "Good";
else if (password.length >= 8 && rating >= 3) text = "Excellent";
else if (password.length >= 6 && rating == 1) text = "Bad";
else if (password.length >= 6 && rating > 1 && rating < 4) text = "Good";
else if (password.length >= 6 && rating == 4) text = "Excellent";
alert(text); 
return false;

player.SetVar("SystemDate");}
</script>
}

Maryna Skorokhod

Many thanks for yor answer, Matthew!

The criteria would be like this:

Excellent password = more than 10 symbols (numbers, letters including capital letters or at least one symbol)

Good password = from 6 to 8 symbols (numbers and letters only)

Bad password (up to 6 symbols) 

Like the example below.

Just I really don't know how to put it into Storyline.

Dave Cox

Hi Maryna,

Ok, I'm a bit confused, is your Storyline variable called "SystemDate"? The text string in player.GetVar and player.SetVar should be the name of the variable that you created in Storyline.

Assuming that name is correct, I made a few changes to your code that should help. I'm assuming that you found the function somewhere, so I really didn't check the code within the function.

function checkPassword(form) {

var password = form.password.value;

var s_letters = "qwertyuiopasdfghjklzxcvbnm";
var b_letters = "QWERTYUIOPLKJHGFDSAZXCVBNM";
var digits = "0123456789";
var specials = "!@#$%^&*()_-+=\|/.,:;[]{}";
var is_s = false;
var is_b = false;
var is_d = false;
var is_sp = false;
for (var i = 0; i < password.length; i++) {
if (!is_s && s_letters.indexOf(password[i]) != -1) is_s = true;
else if (!is_b && b_letters.indexOf(password[i]) != -1) is_b = true;
else if (!is_d && digits.indexOf(password[i]) != -1) is_d = true;
else if (!is_sp && specials.indexOf(password[i]) != -1) is_sp = true;
}
var rating = 0;
var text = "";
if (is_s) rating++;
if (is_b) rating++; //
if (is_d) rating++; //
if (is_sp) rating++; //
if (password.length < 6 && rating < 3) text = "Bad";
else if (password.length < 6 && rating >= 3) text = "Good";
else if (password.length >= 8 && rating < 3) text = "Good";
else if (password.length >= 8 && rating >= 3) text = "Excellent";
else if (password.length >= 6 && rating == 1) text = "Bad";
else if (password.length >= 6 && rating > 1 && rating < 4) text = "Good";
else if (password.length >= 6 && rating == 4) text = "Excellent";
console.log(text); // Alert will not work for us here. Console.log allows you to export data to the console for troubleshooting.
return text;
}

var player = GetPlayer(); // Gets the player object.
var myPassword = player.GetVar("SystemDate"); // Gets the value for myPassword
var newValue = checkPassword(myPassword); // Run the function and return to newValue

player.SetVar("SystemDate",newValue); // Set the value of newValue back to Storyline

 

A few basics for you. I apologize if you already know this ...

When you enter your code into the javascript window, everything in that window is already javascript. You don't use the script tags in this window.

With javascript, anything after the characters "//" is treated as a comment and ignored by javascript. This is a great way to add comments directly in the code. You can see above where I've added some comments for you.

In your function above, I've changed the return value to return the value of the calculated text. I've also moved the function to the top, to separate it from the rest of your code, which is now all at the bottom and grouped together. This isn't completely necessary for the code, but I think it makes it easier to understand what is going on.

You may also notice, that I replaced the line alert(text) with console.log(text). Alert will not work for us here, but we can send output to the console. Sending output to the console is a great way to see what is going on with your code when debugging. To view the output, press F12 when you first run the published content, and then select the console tab. You will also see any errors that the browser reports there.

I changed your javascript variable my Password to myPassword. You can't have spaces in a javascript variable name.

I created a new variable, "newValue" which we will use to store the output of the function.

Finally, once the calculation has run, we can send the value of newValue back to Storyline with the SetVar function. The syntax for SetVar is: SetVar(StorylineVariableName, value);

I know that this is a lot, but I hope that it helps.

Maryna Skorokhod

Thank you, Dave, for so long and really useful answer! Really, my Storyline variable is called "SystemDate". Your answer is right that I wanted to hear. Actually, maybe there are some mistakes with javascript code because it still doesn't work. I think I have to learn it before using. This way would be more effectively I hope) 

Maryna Skorokhod

Thank you, Dave, for so long and really useful answer! Really, my Storyline variable is called "SystemDate". Your answer is right that I wanted to hear. Actually, maybe there are some mistakes with javascript code because it still doesn't work. I think I have to learn it before using. This way would be more effectively I hope)

Dave Cox

Hi Maryna,

A couple of suggestions.

A good place to find good information on Javascript is w3schools.com/js/.

 

Set up localhost on your machine you can test your code in a browser. Google "setup localhost server" to see methods that you can use to set it up. I prefer USB webserver, but you can also set it up through your operating system.

Console.log is your friend. Use console.log to output the results of your variable as your develop. That way you can see what your code is doing. If the code stops anywhere, then there is an error on the line just prior to where the code stopped. When javascript can't execute something, it just gives up and quits.

Since your are doing such intensive string testing for your values, take a look at javascript's RegEx command. the expression var lower = RegExp(/[a-z]/); will return only lowercase characters from a string, var upper = RegExp(/[A-Z]/); returns only upper case characters, and there are many more matching methods you can use. Whenever I need to check a string for a particular set of characteristics, I always use RegExp(). A good resource to learn RegExp is again w3cschools.

I could write this code for you, but the best way for you to learn javascript is to write the code yourself. I hope these suggestions help.

This discussion is closed. You can start a new discussion or contact Articulate Support.