Tutorial: How to Password Protect Your eLearning Course

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.

Click here to see the tutorialclick here to see a demo and here to download the source file

Let me know if you have any questions, comments or are stuck with implementing any of this. I'm happy to help where I can.

11 Replies
Michael Anderson

Matthew, I helped a gentleman on the forum recently that wanted to simulate a password being entered onscreen. I was able to use your Google Fonts tutorial and some other research to embed his custom "Password" font into the course directly, so that anything typed with that font shows up as password dots. I think it worked pretty well, and has one benefit of being able to use the built in text entry box, although it cannot evaluate on keyup like yours does. I guess each way has its own benefits.

gary moulton

Hi Matthew

This is a great piece of work for password protecting a course. I would like to emulate this for one of my existing clients but they use asterisks instead of black dots to mask the pasword display.

I have downloaded and looked at your work in detail but cannot see how you got the dots. I was hoping I could change them to asterisks. 

Would you be able to advise?  I am very grateful.

Gary

 

 

 

Matthew Bibby

Hi Gary,

Thanks for the kind words.

The way that the masked password is shown is determined by the browser. The black circle (●) is used by Firefox, Internet Explorer and Safari, but I believe Chrome uses the bullet character (•).

It's also important to note that the password field will behave differently on different devices. Notably, on iPhones and iPads the last letter of the password will be displayed for a second before it is replaced by the black circle. On newer versions of IE, an eye icon may be added to the right of the password input field that allows the user to make the password visible if they need to check it is correct. 

Anyway, there are a couple of ways that you could approach this.

One would be to create a font (or modify an existing font) that has an asterisk instead of the black circle and bullet characters.

Alternatively, you can ditch the default password input field and write JavaScript that replaces each character with an asterisk. I've done similar in the past for a client who had some unique requirements (essentially they needed to force iOS not to display the last character typed as the password would often be entered while others were watching). In the end I got it working, however, it ended up being a lot more complex than I imagined it would be!