To temporarily disable the drag functionality associated with an object
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.
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.
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.
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.
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.