How I Temporarily Disabled the Drag Functionality in Articulate Storyline

The Challenge

To temporarily disable the drag functionality associated with an object

The Backstory

For ELH Challenge #125, which revolved around scratch-off cards, my entry had the learners click a paint brush, dip it in a blob of color and repeatedly drag it over a canvas to draw a logo.
Note: If you are just getting started with Articulate Storyline, note that you can allow any object (including shapes, images, and text) to be dragged by using the trigger ‘when the object is dragged over’ from the trigger wizard.
To add authenticity to the interaction, I used  Articulate Storyline’s  ‘States’ functionality to make the brush slanted once the learner clicks it.  The slant indicated that the learner has picked the brush.
Two Painting Brushes. One is vertically oriented. The other is slanted 120 degrees.
The Two States of the Painting Brush
The problem was that the learner could accomplish the dragging and dipping action with a straight brush too. Moreover, if the brush got clicked accidentally, it would become slanted, and the whole interaction would look rather odd. Check the video given below to see what I am saying.
The objective was clear: Until the brush becomes slanted, the learner should not be able to drag it.

The Solution

Initially, I decided to change the state of the brush to disabled when the timeline started and change it back to picked – and thus reactivate the drag functionality – once the learner clicks it. My plan, however, did not work.
After a little thinking, I came up with another solution; and this is what I did:
1. Created a rectangle and made it invisible by choosing the ‘No Fill’ option.
2. Placed the rectangle over the brush; therefore, the brush was still visible, but no longer clickable.  In other words, I had disabled the drag functionality of the brush.
Screenshot showing an invisible rectangle shaped object placed over a painting brush.
The Hidden Rectangle
3. Created a trigger to change the state of the brush when the rectangle (named ‘disabler’) is clicked.
4. Created another trigger to hide the rectangle once the state of the brush is changed.
Screenshot of Articulate Storyline's triggers' panee
Trigger Panel of Articulate Storyline
With the rectangle hidden, the learner could click the brush and drag it anywhere across the screen.

Thus, an invisible shape was all I needed to temporarily disable the drag functionality in Articulate Storyline.

Leave a Reply

Your email address will not be published.