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.