Image swap for anatomy

theotherdy's picture
Forums: 

Can anyone give me any pointers as to which interactions/libraries I should be looking at as the basis for developing a new content type:

  1. the end result is to show users one of a number of images - the same/a similar image but where the differences are important...this could be e.g a diagram of the body with different bones highlighted in different images
  2. the user is presented with a series of buttons e.g labelled 'humerus', 'tibia', 'fibula', etc. and rolling over or clicking a button swaps the image to e.g show the appropriate bone highlighted and, probably some plain text explanation
  3. as an alternative to the buttons, the image swapping could be controlled by hotspots on an image e.g image of the spine with hotspots for each vertebra - clicking on the vertebra shows a cross-section through the spinal cord at that point

This sort of interaction is used very commonly in our anatomy teaching materials, largely as a simple self-test activity for students. I realise that there are overlaps with Agamotto, Image Slider and Image Hotspots - in fact we could do a clunky version of this with Image Hotpots. However, the usefulness//beauty of this depends on easy switching between the images ie the buttons/control image are almost like a control panel for viewing the images.

Any pointers/suggestions gratefully received.

BW

Damion

 

papi Jo's picture

Hi Damion,

Your proposal sounds quite interesting. Could you point us to some existing online activities illustrating your suggestions? In the meantime, you might be interested in an anatomy H5P content I created with my customized Drag & Drop activity at this address: http://www.rezeau.org/drupal/node/64

theotherdy's picture

Thanks @papi Jo.

Here's an example of the simpler of the two ideas (image swaps triggered by links vs by hotspots in images):

Image swap animated gif

Thanks also for the link to your muscle drag and drop - very nice.

BW

Damion

papi Jo's picture

An interesting idea. I'll think about it.

theotherdy's picture

Content type created - see below:

  1. Works with mouse or (arrow/space/Enter) keys
  2. Responsive to smaller screens by moving buttons below images

Code is here: https://github.com/msdlt/h5p.LinkedImageSwap

Before I apply for developer access, I'd like to sort out the radio button icons  - see: https://h5p.org/comment/31040#comment-31040 . I am currently using css to draw circles but it doesn't render well.

It's not clear to me whether I can use my new content type anywhere outside my Drupal development environment e.g in Canvas where I want it to be!

BW

Damion

papi Jo's picture

Well-done, Damion!

Just cloned your h5p.LinkedImageSwap from your github and set it up on my localhost Drupal 7 site. It works OK.

To answer your second question, there should be no problem using your new H5P content type on another platform.Simply export (re-use) & save the h5p file and upload to your other platform will do the trick. I have just done it from my drupal to my wordpress site. Just noticed a slight difference in the way the radio buttons get displayed in those two platforms, don't know why.

One suggestion, you could make it an option in the editor to switch between displaying links in text (your example #1) vs. radio buttons (your example #2).

I have the same need as Damion for teaching anatomy. Thanks a lot @papi Jo for pointing me to this resource! @ Damion: great work! I will try to import this in Moodle for testing.

Is any of you making new developments on this content type, in particular regarding some of the features mentioned above:

  • Self-test mode: "3-  as an alternative to the buttons, the image swapping could be controlled by hotspots on an image" +  highlighting the corresponding item in the legend.
  • Displaying some some plain text explanation in addition to swapping the image
  • "Switch between displaying links in text vs. radio buttons"