Matthew Bibby
Matthew Bibby

How to Password Protect Your eLearning Course

In this tutorial, we'll look at how to password protect a Storyline course so that we can, well, protect it with a password!

Matthew BibbyMatthew Bibby

Have you ever wanted to password protect a course?

Maybe you are delivering courses outside of an LMS? Just quickly testing something? Or you're in a blended learning environment and want to be able to check the learners' work before unlocking the next part of a course...

In this tutorial, we'll look at how to add a password to Storyline.

Where Do We Start?

Let's crack open Storyline and create a text variable called Password:

Text variable in Storyline called Password with an empty default value

As you can probably guess, this will be used to store the password so that we can check if it is correct.

While we are in Storyline, let's add some more stuff.

On the first slide, we just need a Submit button. We don't need to worry about the password field yet, we'll set that up later.

"What's the password?" with Submit button example

Then we can make Correct and Incorrect slides that'll be displayed after the password has been validated.

"Yay! That is the right password. Winning." with a Try again? button and "Bother, that is not the right password." with a Try again? button examples

Now we just need some triggers for our Submit button. These will check if the password is correct. For this tutorial, we are going to use the wonderful one word all lowercase password fourwordsalluppercase.

That means that we'd need triggers that look like this:

Jump to 1.3 Correct when the user clicks if Password is equal to fourwordsalluppercase and Jump to 1.2 Incorrect when the user clicks if Password is not equal to fourwordsalluppercase

So when the Submit button is clicked, it'll take the learner to the Correct page if the password is fourwordsalluppercase.

So now... let's build our password field.

Creating a Password Field

We'll need to open our code editor and create a new file called password.html:

In Sublime Text, go to File > Save as... and name the file password.html

We are going to use this page to display an input field.

First, let's tell the browser that this is a HTML page:

<!DOCTYPE html>

Then we will let it know that we are ready to write some HTML:

<html>

Then we'll create the head of the document:

<head>

Later, we will add some other stuff into this section, but for now, let's just close the head:

</head>

Now let's create the body of the document:

<body>

This is where we put the stuff that we want displayed in the browser. So let's add an input field:

    <input type="password" id="pass">

This code tells the browser to create an input field that can capture a password.

The type="password" means that the browser will show ******** rather than the text that is entered into this field.

And we will use the id later to keep an eye on what is happening with the password, but we'll come back to that in a bit.

For now, we can close the body and the html elements:

</body>
</html>

So, if we put all of that code together we should end up with something like this:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <input type="password" id="pass">
</body>
</html>

Which produces an input field that looks real exciting:

Default password field

At this stage the input field doesn't do much. You can enter a password, but nothing actually happens with that password.

Checking If the Password Is Correct

So let's validate the password. We could do this directly, however that would mean our password would be exposed in the source code:

if (password = "fourwordsalluppercase"){
  // Do something
}

I don't like that idea.

So instead, let's take the password and pass it to Storyline where it can be validated privately.

Remember earlier how we created the <head> element, but left it empty? Well now we are going to put some some stuff in there. Essentially, this is information that the browser needs to do its job properly, but shouldn't be displayed to the learner.

So just before the closing </head> tag, let's add our JavaScript:

<script type="text/javascript">
 function validatePassword() {
   var player = parent.GetPlayer();
   var password = document.getElementById("pass").value;
   player.SetVar("Password",password);
 }
</script>

This code creates a new JavaScript function called validatePassword which when run, will grab the password and pass it to Storyline. Let's step through this code.

First we need to tell the browser that we are going to give it some JavaScript:

<script type="text/javascript">

Then we are going to create a function called validatePassword:

 function validatePassword() {

When this function runs, we'll establish communication with Storyline:

  var player = parent.GetPlayer();

Then we'll create a JavaScript variable called password and update it to match the text the learner has entered into the input field:

  var password =      
   document.getElementById("pass").value;

Then we will send that password to Storyline. It will be stored in the Password variable we created earlier:

  player.SetVar("Password",password);

Finally, we can close both the function and our JavaScript:

}
</script>

So now, the code in our password.html file should look like this:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
 function validatePassword() {
   var player = parent.GetPlayer();
   var password =      
   document.getElementById("pass").value;
   player.SetVar("Password",password);
 }
</script>
</head>
<body>
    <input type="password" id="pass">
</body>
</html>

Getting the JavaScript to Run

Now we just need to make sure that our validatePassword function runs each time the user types in the password field.

We can do that by adding an onkeyup event to our input field. So rather than looking like this:

    <input type="password" id="pass">

The input field should now look like this:

    <input type="password" id="pass" 
    onkeyup="validatePassword()">

This tells the browser that each time the learner releases a key while typing in the input field, that we want the validatePassword function to run.

So now, the code in your password.html file should look like this:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
 function validatePassword() {
   var player = parent.GetPlayer();
   var password =      
   document.getElementById("pass").value;
   player.SetVar("Password",password);
 }
</script>
</head>
<body>
<input type="password" id="pass" onkeyup="validatePassword()">
</body>
</html>

Making It Look Pretty

At this stage, our password field should be working properly, but it won't look very pretty.

If you open the password.html file in a browser, it'll look like this:

default password field

Remember, this is what our Storyline project looks like:

"What's the password?" with Submit button example

If we added our password field at this stage, we'd end up with a project that looks like this:

Storyline project containing default password field

This doesn't really look right, so let's use some CSS to style the password field.

We will add an inline style sheet to our HTML page. So between the closing </script> tag and the closing </head> tag, let's add the following:

<style>
body {
  margin: 2px;
  background-color: #FFFFFF;
}
input {
  font-size: 40px;
  font-family: sans-serif;
  width: 250px;
  border: 2px solid #242F32;
  border-radius: 7px;
  padding: 2px 4px 2px 4px;
}
input:focus {
  outline: none;
  box-shadow: 1px 1px 2.5px #C8C8C8;
}
</style>

Now, our input field will look like this:

styled password field

Which as you can see below, now fits a lot better with the design of our Storyline project:

styled password field in Storyline project

Let's quickly step through the CSS that we have written so you can customise it for your future projects.

First, we need to tell the browser that we are going to give it some style information:

<style>

Then we'll describe how we want the body of the page to look:

body {
  margin: 2px;
  background-color: #FFFFFF;
}

This means that there will be a 2px margin on the page, which will offset our password field from the top and left of the page.

We are also giving the page a white backgroud (which is what #FFFFFF is).

Technically, we don't need to specify that the background should be white, as that is what it would be by default. However, having this code here makes it easy for you to change the background colour if needed.

Next, we are going to style the password field:

input {
  font-size: 40px;
  font-family: sans-serif;
  width: 250px;
  border: 2px solid #242F32;
  border-radius: 7px;
  padding: 2px 4px 2px 4px;
}

The first line above says "please apply this style to any input fields on the page".

Then we set the font size to 40px and the font family to sans-serif.

We'll make the width of the password field 250px, give it a solid border that is 2px wide and is a dark grey colour (e.g. #242F32).

We can then soften the corners a bit by adding a border-radius of 7px.

We can also add some padding around the inside of the input field, 2px to the top, 4px to the right, 2px to the bottom and 4px to the left.

And lastly, we will tell the browser how the password field should look when it is in focus:

input:focus {
  outline: none;
  box-shadow: 1px 1px 2.5px #C8C8C8;
}
</style>

This code means that when the user clicks on the password field, the default outline (which is a blue glow on the outside of the border) will be hidden and a shadow will be applied.

The effect here is really subtle, as shown below:

Shows focus state

And that's all that we need to do to style our password field.

So now, the code in your password.html file should look like this:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
 function validatePassword() {
   var player = parent.GetPlayer();
   var password =      
   document.getElementById("pass").value;
   player.SetVar("Password",password);
 }
</script>
<style>
body {
  margin: 2px;
  background-color: #FFFFFF;
}
input {
  font-size: 40px;
  font-family: sans-serif;
  width: 250px;
  border: 2px solid #242F32;
  border-radius: 7px;
  padding: 2px 4px 2px 4px;
}
input:focus {
  outline: none;
  box-shadow: 1px 1px 2.5px #C8C8C8;
}
</style>
</head>
<body>
<input type="password" id="pass" onkeyup="validatePassword()">
</body>
</html>

Adding This to Storyline

Now we just need to add this input field to Storyline.

We can do that by creating a web object that is a bit bigger than our password field.

Now, to use our password.html file in a web object, it'll need to be in a folder. So create a new folder called password and add the password.html document to that folder.

Then we can add a new web object by going to Insert > Web Object and clicking the folder icon as shown below:

Insert web object

We can then navigate the password folder and hit Select folder.

The web object has now been added to the project.

We can now publish and test that our password is working correctly.

Demo

Here is a little demo that shows how our password field works. Remember, the password is one word all lowercase fourwordsalluppercase:

And that's it! You now know how to add a password to your Storyline course.

Files you might need:

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

Frequently Asked Questions:

Q. How did you show the password as it is being typed?
A. By adding a variable reference.

Q. But when I use a text entry field in Storyline it doesn't update the variable until after the focus is lost on the input field. Why does this work differently?
A. Because we made it better.

Q. I want to change the password. How do I do that?
A. By changing the trigger in Storyline. You can even have multiple passwords if you like.

Q. Can I use a password field without a Submit button?
A. Sure. Just change your triggers in Storyline so that they execute when the Password variable changes rather than when the Submit button is clicked.

Q. Why didn't you use that font you like so much to show the password that has been typed?
A. Because fonts can't be embedded in the published output as noted here. That being said, if you are using SL360 there is a way that you can use fancy fonts with variable references.

Q. I published this and tested it but nothing happened. Why isn't my password field working?
A. It is because of the internet.

Q. That's not very helpful...
A. And that's not a question.

Q. Can I try again?
A. Sure.

Q. When I tested this locally, it didn't work. Do you know why that is?
A. Yes. It's because of some weird thing called the same-origin policy. If you upload your published output to a server it should resolve this issue.

Q. I don't have a server. Where can I get one?
A. Ask Tom.

Q. When I hit the Try again? button in your demo, the password that I typed originally is still shown on the page. What's up with that?
A. The North Storyline remembers. If you'd like that not to happen, just add another trigger to the slide that resets the Password variable when the slide starts.

Q. Does this work the same way in Storyline 360 and Storyline 3?
A. Yes.

Q. What about Storyline 1?
A. Probably.

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

Q. Will this work in Articulate Mobile Player?
A. No.

Q. Why not?
A. Because the Articulate Mobile Player doesn't support JavaScript.

Q. Why not?
A. ...

Q. Will this work in my LMS?
A. Probably, but just take a step back and think about things for a minute. Why do you need to password protect your Storyline course when it is in an LMS?

Q. Do Articulate support this approach?
A. No, they don't provide support for this stuff. So if you run into any issues leave a comment below (or contact me privately) and I'll help you.

Q. Where did you get that terrible password from?
A. The internet. If you are really uptight or are working around people who don't have a terrible sense of humour, please avoid watching this video.

Q. My question isn't listed here, what should I do?
A. Enter the password below. Or... you know, a comment.

If you found this tutorial helpful and think 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