Muti-choice options with images (click)

Muti-choice options with images (click)

by Ivan Muñoz -
Number of replies: 5

Hi everybody

I want to make a question with multi-choice options with images. 

I have desing  a question using a model question called: Dropdown menu with images 

but I have some problems with this format because my question has 2 parts: one is the dropdown menu and a second part with a calculus where the student must write a number and unit.

When the mouse is on the box of the second part, the dropdown menu is  hovered, being a lot of annoying because I can't insert the answer.

I have tried to convert this format in onclick dropdown but my knowedge in JS is null. 

I see the JS code and all formulaspart is affected by hover function and I don't know how to do that hover function affects only for first formulaspart. I tried with <div id="xxx"> tag but it is not enough. 

How can I change the format to onclick dropdown or the second part is not affected by hover mouse in its boxtext?

Thanks you


If you need the xml file, tell me it and I upload it.



Average of ratings: -
In reply to Ivan Muñoz

Re: Muti-choice options with images (click)

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers
Hello Ivan,

Uploading the xml file would be a good idea. Maybe someone will be able to help you.
Average of ratings: -
In reply to Ivan Muñoz

Re: Muti-choice options with images (click)

by Ivan Muñoz -
Hi again

I have another problem with this task.

My students can't see the images of the dropdown box while I can see them. Why?

I uploaded each image in my server and I inserted it. You can see it in the XML file. What is the error?

Thanks.
Average of ratings: -
In reply to Ivan Muñoz

Re: Muti-choice options with images (click)

by Dominique Bauer -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hello Ivan,

When there are multiple parts to the question, you have to use a slightly modified script as shown on https://moodleformulas.org/course/view.php?id=91&section=12 ↗. I edited your question to make it work. You will find it attached below. You will note that I modified the presentation and translated it into English to make an example which can be tried on https://moodleformulas.org/course/view.php?id=118&section=7 ↗. The images appear on hover, but if you want them to appear on click, the code change is minor and easy to do.

As far as images are concerned, you must ensure that the image links are fixed. The easiest way to do it is to put images in a folder in Stealth mode, as explained on https://moodleformulas.org/course/view.php?id=77&section=10 ↗ (don't worry, it's very easy).

A small remark about the names of the images. They should not reveal which one is the correct image. Indeed, a student who is knowledgeable in computer science could discover the name of the images. Try giving names that give little clue, for example ¼½¾½¾½¾¾½¾½¾¾½¾¼¼½¾½¼¾½¼½½¼½¾½¼½¾½¼½¾½¼½¼½¼¼¾.png which will also show up as https://moodleformulas.org/pluginfile.php/15193/mod_folder%C2%%/0/BC BD%C2%BE%C2%BD%C2%BE%C2%BD%C2%BE%C2%BE%C2%BD%C2%BE%C2%BD%C2%BE%C2%BE%C2%BD% C2%BE%C2%BC%C2%BC%C2%BD%C2%BE%C2%BD%C2%BC%C2%BE%C2%BD%C2%BC%C2%BD%C2%BD%C2% BC%C2%BD%C2%BE%C2%BD%C2%BC%C2%BD%C2%BE%C2%BD%C2%BC%C2%BD%C2%BE%C2%BD%C2%BC% C2%BD%C2%BC%C2%BD%C2%BC%C2%BE.png
(maybe a bit overkill).

MoodleForum_20220611_2010.png

Average of ratings: Useful (1)
In reply to Dominique Bauer

Re: Muti-choice options with images (click)

by Ivan Muñoz -
Oh, thanks you Dominique. This is perfect.
Finally, I changed the form to show the options with radio buttom because my students could not use it correctly but I can updated the question with your recommendations and finally I will be able to use the dropdown options.

Thanks you
Average of ratings: -