Drag/Drop Preferences - Alignment, etc.

Good Evening -

I'm taking a stab at developing a hands-on activity where learners place the probes of a digital multi-meter at different points on an electrical drawing and get different readings from the meter.

Here's what I've got so far: https://deibelpundt.s3.amazonaws.com/DMM+prototype/story_html5.html

Since there will be various readings possible from one screen (not built yet), I didn't use the free form drag and drop option.  Instead, I'm changing the state of the probes to "150" when placed on the appropriate areas (color coded here but will be transparent hot spots later).  When both probes are "150" and the learner clicks submit, the reading on the meter updates to a state of "150."

Where I need help is how the probes connect to and align with the proper hotspot areas.  Right now, everything is defaulted to middle/center.

Ideally, the drag and drop would only register as correct when just the silver tip of the meter is within the hotspot.  Then, i'd like for it to snap so that the top of the probe tip is aligned to the middle top of the hotspot.

4 Replies
Ned Whiteley

Hi Julie,

In the attached example I have created a dropped state for each probe which has not only changed the angle of the probe, but also moved it so that the tip is where the centre of the probe originally was. Now when the probe snaps to the centre of the object it not only turns on an angle, but also places the tip at the centre of the object to achieve the result I think you are looking for.

To achieve this when editing the state, I have first of all created a copy of the original probe and then set that in the new position (i.e. correct rotation) and copied that new image. When I have gone to edit states and created my new Dropped state, I have simply pasted the new image, aligned the tip with the centre of the original and then deleted the original in my new state. The reason I have done this is because I was not able to rotate the original when creating a new state. You may notice that I have also created new red and black probes with transparent backgrounds so that you can still see the circuit diagram underneath.

In the second slide, I have shown you another option you may wish to consider, depending on how complex you want to make your multimeter. I have cropped the dial in Photoshop and saved it with a transparent background. I have then placed that over the top of the original multimeter image, sized it accordingly and then converted it to a dial in Storyline. Now you are able to turn the dial to whatever setting you want and the DialPosition variable that I have created will provide a number from 1 to 20 to represent its position. This variable can then be used to adjust the scale on your meter.

Ned Whiteley

Hi Julie,

A quick update to my earlier post. In slide 2, I have now added a rectangle over the top of the meter reading with the same background colour as the display and no outline and then added a text box containing the variable value with a leading zero and using a digital font (Liquid Crystal) on top of the rectangle. This now shows the display changing to reflect the dial position and using a realistic font as if it were the actual display.

Ned Whiteley

Hi Julie,

As you said in your original post, the problem you had was that the centre of the probe was snapping to the centre of the coloured shape. The trick I have used to get the tip to snap to the centre of the cross is to not only rotate the probe, but also to move it down so that the tip is resting on the centre of the original location of the probe:

Once I have the new state of the probe in the correct location relative to the original, I have then deleted the original probe from the Dropped state.

What happens when a state change occurs is that everything occurs relative to the original position of the item even if its position on the page has changed (as in this case). In other words, think of the tip of the new probe being in the centre of the original probe, which then snaps to the centre of the cross. The fact that the original probe has been deleted, is just the same as it still being there, but being invisible. If I had simply rotated the probe to create the new position, the centre of the rotated probe would have ended up snapping to the centre of the cross.

I hope this makes sense, but if you are still having problems following what I have done, just get back to me here.