Watch-try-do simulations are ideal for software training. They enable learners to first watch, and then, try it themselves, and finally, work on the software. Recently, we satisfied a unique requirement. A training manager wanted to have a login screen in some screens of software. Learners have to type their usernames and passwords in the text entry fields. The most important requirement here is to add password fields i.e. the password typed by learners should be displayed as ‘*’.
This is not possible by default, as text entry fields in Articulate Storyline don’t provide much control for online course developers. The only option is to use external text entry fields (HTML ‘Input’ field). So, I have used a HTML field through a web object.
In my previous blog, I explained how to add a normal text field using HTML. In this post, I will share how to add password fields in Articulate Storyline.
Here are the steps.
Step 1: Create a Boolean variable. I have created one here with the name password.
Step 2: Develop a HTML page with an Input field (text field, in general). Format it as you desire, as shown in the screenshot below.
In the above code, I have used commlab as password. And this code will set the value of the variable password to True when the learner types the correct password.
Note: Make sure to save the HTML file as index.html.
Step 3: Now, in the Insert tab, select the Web Object option to insert the HTML page into Storyline.
Step 4: In the window opened, paste the location of the HTML file, or you can browse for its location by clicking the folder icon as shown below.
Step 5: Adjust the size and position of the Web Object on the screen. You can even place a portion of the Web Object off the stage. However, the output remains the same. Shown below are the references.
Step 6: Add a trigger in the base layer to jump to the next slide when the learner clicks the Submit button, if the value of the variable password is True.
Step 7: Publish the course and check the output.
Now, you can see that the password typed by the learner is displayed as *.
Hope you find this post useful. Do share your views.