Forum Discussion
Converting typed numbers/letters to symbols in text entry field
Hello! I was wondering if there is a way to convert data entered into a text entry field to a particular symbol while the learner is typing in the text entry field. For example, if I ask the learner to type in an alpha-numeric password in a text entry field but want what they type to display as asterisks as they type, is there a way to do that? I have attached an example of what I want to have happen. Any help is much appreciated 😁.
Hi Susan_B_Rice73 I've put together a couple of solutions for you. The first one uses JavaScript to convert the input text fields into input password field. This means any character typed will be obfuscated. It is important that the JavaScript can find the correct input field by using the ALT text. This is why the ALT text is set via a variable %passwordInputALT%
The second solution was a bit of an experiment to see if this could be done without using JS. It can, but it has it's problems. The Storyline solution I developed shows a mask over the input field as the user hits a key. It then moves the state of the mask based on a counter number which is incremented when the users pushes a key on the keyboard. In each of the states, the text field just contains the • character, incrementing by one for each state.
This has issues though, as you cannot define a single trigger in Storyline to detect if A-Za-z0-9 has been selected. You therefore have to define a trigger for each letter.
The other issue is if the user hits the delete key, we can't detect if the delete key is deleting anything, for example at the end of the line, hitting delete does nothing, but in between two characters, it deletes a characters. We can't differentiate between those, and so can't confidently show the correct number of masking characters. Backspace is ok, as you know it is always taking a character away.
The other issue is, in Storyline, I don't think you can restrict to Alphanumberic characters.
Hi Susan_B_Rice73 I've put together a couple of solutions for you. The first one uses JavaScript to convert the input text fields into input password field. This means any character typed will be obfuscated. It is important that the JavaScript can find the correct input field by using the ALT text. This is why the ALT text is set via a variable %passwordInputALT%
The second solution was a bit of an experiment to see if this could be done without using JS. It can, but it has it's problems. The Storyline solution I developed shows a mask over the input field as the user hits a key. It then moves the state of the mask based on a counter number which is incremented when the users pushes a key on the keyboard. In each of the states, the text field just contains the • character, incrementing by one for each state.
This has issues though, as you cannot define a single trigger in Storyline to detect if A-Za-z0-9 has been selected. You therefore have to define a trigger for each letter.
The other issue is if the user hits the delete key, we can't detect if the delete key is deleting anything, for example at the end of the line, hitting delete does nothing, but in between two characters, it deletes a characters. We can't differentiate between those, and so can't confidently show the correct number of masking characters. Backspace is ok, as you know it is always taking a character away.
The other issue is, in Storyline, I don't think you can restrict to Alphanumberic characters.
Thank you so much SamHill! This is awesome and will be most helpful. I really appreciate you taking the time to provide multiple solutions.
