Labeled Graphic Interaction


This weeks elearning challenge is to create a labeled graphic interaction.


I thought that I’d make some type of an anatomical interaction, but I wanted to make something more than just the normal image with markers that carry additional information.


I found a free vector graphic of bodily organs at  I thought it would be interesting to create a drag and drop effect that would provide additional information once the organ was placed in it’s correct location.  I made the organ location simple, by providing dashed lines, shaped like the organ, at the correct placement point.  When the organ is placed in its location, it shows a layer with addition information on that body part.  I also changed the state of the dashed outlines to hidden when the organ was correctly placed.  Finally, I included a reset button so that the learner could review the body parts again, if they missed or forgot some of the information.


As challenges go, this was a very easy one, so a lot of explanations of techniques are unnecessary (thus the short post this week).  What I found the most fun was thinking of a way to take this challenge up a level, beyond what was expected.  Check out my mini anatomy course here.