Downright Sneaky Lectora Tricks Part 3: Add a devMode Indicator

blog_SneakyPt3

Previously, we defined the devMode variableand added an invisible button to turn it ON and OFF. Today, we will add a visual element to devMode to distinguish it from regular mode. So you’ve made devMode in Lectora® and you have a button to turn it on and off, but it doesn’t DO anything… yet. Basically, we made a light fixture and attached a light switch, but there’s no light bulb, so flicking the switch on and off won’t do much. Today, we’re going to add the words devMode on to act as our light bulb.How to add a devMode indicator

  1. At the top level of your course, add a textbox.

This textbox is at the same level of your course as your devEntrance button so that the button can refer directly to the textbox. Presumably this is at the top level so that it can be inherited throughout the course.

  1. In the textbox, enter the words devMode on and style them as you like.

I like to use Arial Black and an orange font color so that the text stands out. You can use whatever words or formatting you like.

pt3_img1_devMode_Location
  1. In the Properties ribbon, name the textbox dM indicator and select Initially Hidden as well as Always on Top. Feel free to also add an entrance and exit FADE transition.
pt3_img2_indicator_propys

Next, we will make the button that turns devMode on and off ALSO turn this textbox ON and OFF.

  1. Select the devEntrance button and add a second action:
  • Trigger: Mouse Click
  • Action: show dm Indicator
  • In the Conditions column, click Always and add the following condition Variable: devModeRelationship: is equal to Value: 1
  • Click OK.
pt3_img3_conditions

In English, what we are programming is this… “when the devEntrance button is clicked, show the 'light bulb' if devMode is ON. Otherwise, do nothing."NOTE: Actions run top to bottom, first to last. It is critical that THIS action run AFTER the action which turns devMode ON. In other words, the show indicator action MUST be below the devMode toggle action in the Title Explorer or else it won’t work. Also, whenever I create a conditional action, I like to add the word IF to the name.

pt3_img4_action_position

Finally, we will specify what happens if devMode is already ON when you click the button, which is to turn off the indicator.

  1. In the Else Actions area, add the following action:
  • Action: Hide
  • Target: dM indicator
pt3_img5_action_order

Feel free to test this functionality by previewing your course and clicking your hidden devEntrance button. You should now be turning your “light bulb” on and off.Now go to the next page. DevMode is still on, but your indicator text is NOT. We will now fix this.

  1. Select the dM indicator textbox and add an action with the following properties:
  • Trigger: onPageShow
  • Action: Show
  • Target: this object
  • Conditions: devMode is equal to 1
  • Else Actions: None
pt3_img6_final_action

In plain English: “when you go to a new page, if devMode is on, show this indicator. If not, do nothing.” Now if you travel to a new page, your devMode indicator will remain on. Test this.Good work, today!Next time, we are going to give ourselves some superpowers in devMode .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 onLinkedIn andTwitter.

Previous Tutorial

Next Tutorial