Downright Sneaky Lectora Tricks Part 5: Creating a MORE SECRET Secret Passageway

blog_SneakyPt5

pt5_img1In the previous Downright Sneaky Tricks tutorials for Lectora®, you learned how to create devMode, turn it on and off with a hidden button , add an indicator , and give yourself special powers . In this tutorial, you will learn how to make your secret entrance to devMode a little harder to access by adding a password.

If there’s one thing I learned from Scooby Doo, it’s that you’ve got to account for meddling kids. A “secret passageway” needs to be “secret;” otherwise, it’s just a passageway.

When you think about it, using an invisible button as the gateway to devMode is not very tight security. Some meddling kid mousing around might see the cursor change into a finger. If they clicked, they would discover your secret passageway, and after some shenanigans involving running on barrels, the jig would be up.

So how do you beef up security for your secret passageway? With a password, of course! Instead of going right into devMode, if users click on our secret entrance, they will get a password field. They’ll have to guess the correct password before they can access the riches of devMode. Take THAT, meddling kids!

Here’s the recipe…

EVEN MORE SECRET ENTRANCE RECIPE

You will need…

  • One invisible button (to show the password field—we will repurpose our devEntrance button)
  • One form field (where you enter the password)
  • One green SUBMIT button (where you click to SUBMIT the password)
  • One red Exit button (you always need a red button for cancelling stuff)
  • One green checkmark (to indicate to the user when they entered the CORRECT password)
  • One Group called PASSWORD GROUP (in this group you place the Form field and the CANCEL and SUBMIT buttons. This group is Hidden by default.)
  • One ACTION GROUP called CORRECT PASSWORD
  • One ACTION GROUP called WRONG PASSWORD

pt5_img2

The password process

Let me take a moment to explain how this password will work.

Step 1: A user clicks the hidden button which displays the password group (password field, submit button, and cancel button).

Step 2: The user enters the password in the password field.

Step 3: The user clicks the green SUBMIT button which checks if the password is correct (or the user clicks the EXIT button to back out)

Step 4: If the password is correct, devMode is turned ON and the green checkmark appears (as well as anything else associated with devMode). If the password is incorrect, the password items all hide and devMode is turned off.

First, let’s add the groups we will need.

  1. At the top level of the course, on the Insert ribbon, click the Group button three times to add three groups with the following names:
  • RIGHT password
  • WRONG Password
  • Password Group

Screen Shot 2016-02-03 at 4.13.45 PM

Next, let’s add the password field, green submit button, red Exit button, and green checkmark.

  1. On the Test & Survey ribbon, click Entry field to add an entry field. Rename it Password field.
  2. Double-click Password Field and, in the Properties ribbon, specify the following settings:
  • Variable: keyCode (instead of Entry 1)
  • Max characters: 40
  • Select the Password checkbox
  • Select Initially hidden
  • Optional: Change the Background color to a light yellow

pt5_img3

The entry field is where the user enters the password. Selecting the Password checkbox means when a user types in the field, it shows up as dots instead of alphanumeric characters. SNEAKY!

  1. To add the green Submit button, open the Stock/Media Library, select Buttons, select Green, and add the Green-Basic-Next to the page. Set it to Initially Hidden.

 
pt5_img4

  1. To add the red Exit button, open the Stock/Media Library, select Buttons, select Red, and add the Red-Basic-Exit to the page. Set it to Initially Hidden.

The Red Exit button is there for the user to back out if he or she gets here accidentally. The action associated with clicking the CANCEL button is to hide the 3 PASSWORD components.

  1. To add the green Checkmark, open the Stock/Media Library tab, select Status Indicators and add the Status-check.png to the page. Set it to Initially Hidden.
  2. Position these four items as shown.

pt5_img5

  1. Move the Password field, green Submit, and red Exit buttons into the Password Group. Change the properties this group to Always on Top.

Next we will repurpose the devEntrance button. Instead of toggling devMode on and off, its function will only be to show the Password group.

  1. Select the devEntrance invisible button and drag the three actions (devMode Toggle, show indicator if, and show menu if) into the RIGHT Password action group.

We will trigger these actions ONLY when the user enters the correct password.

10. Select the devEntrance button and add the following action:

  • Trigger: Mouse Click
  • Action: Toggle Show/Hide
  • Target: Password group

pt5_img6

Now the only thing that the devEntrance does is toggle the password group on or off.

Next, we will add the action that checks the password. When is the password checked? When the user clicks the green SUBMIT button. Our password will be scoobysnack. (Or anything you like. The key is to pick a password that no meddling kid is likely to guess.)

11. Select the green Submit button and add the following action:

  • Trigger: Mouse Click
  • Action: Run Action Group
  • Target: RIGHT Password
  • Condition: IF keyCode is equal to scoobysnack (or your password)
  • Else action: Run Action Group WRONG password

pt5_img7

“When the user clicks the green Submit button, if the password is equal to scoobysnack, then run the RIGHT Password actions. Otherwise, run the WRONG password actions.”

pt5_img8
If a user enters the wrong password, or if they click the red EXIT button, then this should HIDE the Password group and turn off devMode (if it is on).

The WRONG Password action group is where you define what happens if the WRONG password is entered. We want 2 things… hide the password elements and change devMode to OFF (0).

12. Select the WRONG Password action group and add the following action:

  • Name: Hide pwd grp
  • Action: Hide
  • Target: Password Grou

13. Select the WRONG Password action group and add another action:

  • Name: Exit devMode
  • Action: Modify variable
  • Variable: devMode
  • Type: Set equal to
  • Value: 1

The RIGHT Password Action Group is where you nest all of the good and happy events associated with entering the correct password such as showing the green checkmark, the devMode indicator, the devMenu, and turning devMode to ON.

14. Select the RIGHT Password action group.

15. Select the devMode Toggle Click the IF condition and remove the condition. Rename the action devMode ON.

pt5_img9

16. Add a new action to the RIGHT Password action group with the following settings:

  • Name: show checkmark
  • Action: Show
  • Target: Statuscheck

Add one more new action to the RIGHT Password action group with the following settings:

  • Name: clear pwd field
  • Action: modify variable
  • Target: keycode
  • Type: set as empty
  • Value: (leave this field empty)

This last action will clear out the password from the entry field.

17. Select the green Statuscheck checkmark, add a Fade for the Transition In and Transition Out, and add the following action:

  • Name: hide this 2.5
  • Trigger: Show
  • Delay: 5 seconds
  • Action: Hide
  • Target: This object

We only need the checkmark to show up briefly when the correct password is entered. Once it shows up, it will fade away after 2.5 seconds.

We need to do one last thing: clicking the red Exit button should trigger the WRONG password actions.

18. Select the red Exit button and add the following action:

  • Name: devMode OFF
  • Trigger: Mouse Click
  • Action: Run Action Group
  • Target: WRONG Password

Okay, that’s everything. Give your password field a test!

In conclusion

So, at the end of the day, we’ve made accessing devMode is much harder. If users find the hidden button (devEntrance), they only see the password group. If they enter an incorrect password, it all disappears! BUT if the correct password is entered, they enter the devMode, where they have SUPER-POWERS of instant navigation and god-like knowledge of right and wrong answers!

At long last, you too can be the creepy villain in your own online courses! Happy haunting!

pt5_img10

Download the Lectora and Lectora Online files for this course in the Trivantis® Community.

John Mortenson is the Online Learning Manager for The Fresh Market. He has been developing online courses for over 10 years and is a member of the Lectora Advisory Board. He is also an Adobe Creative Suite Guru and cartoonist. You can contact him on LinkedIn and Twitter.