Using images in multiple choice answers?

Submitted by roman on Wed, 04/20/2016 - 15:57
roman's picture
Forums: 
Content creation

Hi all, 

I thought I saw this somewhere, but cannot find it again. I am wondering if it is possible to use images, instead of or alongside with, text as part of an answer. 

For example, instead of showing a picture of a strawberry and asking what type of berry that is, I want to write the word "Strawberry" and have the answers be pictures that users will click on.

 

Any possibility to do this?

falcon's picture

falcon

Wed, 04/20/2016 - 21:35

I'm afraid not. You would have to use the drag and drop content type instead and put the word as a drop zone and the pictures as draggable alternatives for instance.

pamelawolff

Mon, 07/26/2021 - 19:53

I see that this wasn't possible in 2016.  Is it possible yet?

Thanks,

Pam

BV52's picture

BV52

Tue, 07/27/2021 - 18:03

Hi Pam,

No, I'm afraid this feature has not been added by the developers within the H5P core team or anyone in the community. The good thing about H5P is that it is open sourced so anyone can add the feature or hire someone to do it.

-BV

otacke's picture

otacke

Tue, 07/27/2021 - 18:09

If only you could peek at the source code ... What might https://github.com/h5p/h5p-multi-media-choice be(come)?

cfp

Sun, 08/01/2021 - 22:08

You mean something like this

https://turnipeater.github.io/MC-with-image-demo.html

It's a workaround but quite quick to do.

Although I do think H5P is brilliant in many ways, as a long-time user of Moodle, where you can always edit the underlying HTML, I do find that omission in H5P surprising. Perhaps there is a reason for not having that option.

To create the strawberry example I created a normal H5P in the Lumi app and for the answers wrote something that I would later be able to find easily — IMAGE1HERE, IMAGE2HERE & IMAGE3HERE. I then exported the question as an HTML file, opened it in a text editor and replaced my three text markers with the standard HTML for an image. For convenience I'm linking to images on wikipedia rather than having to save and upload my own images. The only extra thing you need to do is to ensure that any quotation marks are preceded by three backslashes (and avoid putting in any line returns). If you view the source for my strawberry example you will find the html image tags near the top.

To improve the appearance of the page I also wrapped the DIV at the bottom of the file, the one inside the BODY element, into another DIV giving the webpage some small borders.