Tutorial: How to Password Protect Your eLearning Course

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.

Yeah, I think I remember seeing that discussion. Would be pretty easy to set up, however it'd only work in the HTML5 output. Options are good... 

Good point about HTML5 output only! I haven't been asked to do much work lately that involves Flash output. Are you seeing that requirement fall by the wayside?

Only about a third of my clients are HTML5 only. It's amazing how many companies out there are still trying to support very outdated browsers...

Well that is also a good point. I saw a post recently mentioning IE5 and was hoping it was a typo. Maybe it wasn't!

IE5! I hope that was a typo!

Well at least I know I didn't dream it: https://community.articulate.com/discussions/articulate-storyline/storyline-360-4c6ff879-5826-4f42-ba12-5caac4d8df3f

That amazes me. Microsoft ended all support (including security fixes) for IE5 in 2005!

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

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! 

Doesn't it seem like that's usually the case! :)