Image swap for anatomy
Submitted by theotherdy on Wed, 11/13/2019 - 16:43
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:
- 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
- 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
- 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
Fri, 11/15/2019 - 23:54
Permalink
Hi Damion,Your proposal
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
Tue, 11/19/2019 - 16:39
Permalink
Thanks @papi Jo.Here's an
Thanks @papi Jo.
Here's an example of the simpler of the two ideas (image swaps triggered by links vs by hotspots in images):
Thanks also for the link to your muscle drag and drop - very nice.
BW
Damion
papi Jo
Tue, 11/19/2019 - 23:19
Permalink
An interesting idea. I'll
An interesting idea. I'll think about it.
theotherdy
Mon, 11/25/2019 - 18:31
Permalink
H5P.LinkedImageSwap created
Content type created - see below:
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
Wed, 11/27/2019 - 15:28
Permalink
Well-done, Damion!Just cloned
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).
clamy
Mon, 01/06/2020 - 17:42
Permalink
Useful resource
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: