Creating a quiz object with hotspots on an image--Moodle 2.4

Creating a quiz object with hotspots on an image--Moodle 2.4

por Abigail Smith -
Número de respostas: 15

I'm just starting with Moodle, setting up a sample course from my personal computer.  I'm sure I'll have lots of questions along the way!

My first challenge I haven't been able to figure out--I want to create a quiz question that allows me to upload an image, and the user needs to click on a certain part of the image to get the answer right.  So the question will be something like, "Where is X in the image below," and they have to click on "X".  I'm assuming I need hotspots.

What tools do I need to create and implement this?

Thank you in advance?

Nota média:  -
Em resposta a 'Abigail Smith'

Re: Creating a quiz object with hotspots on an image--Moodle 2.4

por Joseph Rézeau -
Foto de Core developers Foto de Particularly helpful Moodlers Foto de Plugin developers Foto de Testers Foto de Translators

Hi Abigail,

You can't do that with the "standard" question types. You'll have to install the Drag and drop onto image 3rd-party question type available from the Moodle plugins Directory.

Joseph

Nota média:  -
Em resposta a 'Joseph Rézeau'

Re: Creating a quiz object with hotspots on an image--Moodle 2.4

por Jean-Michel Védrine -

Hello Abigail and Joseph,

Maybe looking at Abigail description of questions, the Drag and drop markers question type would be a better choice.

Even better, install both Drag and drop onto image and Drag and drop markers because they are both excellent and useful

Nota média: Useful (2)
Em resposta a 'Jean-Michel Védrine'

Re: Creating a quiz object with hotspots on an image--Moodle 2.4

por Tzvi Daum -

Hi Abigail,

I created a tutorial video on Youtube for how to use the Drag and Drop with Markers question type which you might find useful. Viewing in full screen is best.

Tzvi

Nota média:  -
Em resposta a 'Tzvi Daum'

Re: Creating a quiz object with hotspots on an image--Moodle 2.4

por Jamie Pratt -

That's a very useful little tutorial Tzvi, thanks! You demonstrate how to easily define the drop zones using their coordinates and you show what the infinite check box does, something that some users have difficult understanding.

Maybe we need a different label for that 'infinite' check box?? Or maybe we should make it a select box with two different labels 'single instance', 'infinite instances'. It could be more clear.

 

Jamie (programmer of this question type)

Nota média:  -
Em resposta a 'Jamie Pratt'

Re: Creating a quiz object with hotspots on an image--Moodle 2.4

por Tzvi Daum -

Hi Jamie,

First or all, thank YOU for this extremely useful question type! I can't tell you how helpful it is. I just pray it keeps on getting maintained in future Moodle upgrades. sorriso

Furthermore, thank you for the kind words regarding the tutorial. It has been up on Youtube since March and I did link to it a couple of month's ago in the comments of the question's page. However, it might benefit from a more visible location.

In terms of changing the label, I might not be the best person to ask and you should certainly get some more feedback, but my own personal opinion is that changing the infinite label is not going to make things too much clearer. In general due to the nature of this question type, its mechanics are not as intuitive as your typical multiple choice or matching question. Any user who wants to use this question type is going to have to play with it to get the idea of how it is supposed to work. Initially, I too could not figure out how the question type was supposed to work until - when all else failed - I actually read the instructions. sorriso That and playing with the question type is what got me to understand it and I assume that is what others will need to do as well. Hopefully, the tutorial will makes things a little easier.

In my mind, what would really make things simpler would be that if instead of inputting the coordinates a user could just drag a shape onto the image, stretch it as needed and the coordinates would appear filled in. (The reverse of the way it is now.) However, I assume that is a ton of work if it is at all possible!

Be that as it may, this really is an awesome question type.

Thanks again for all your work!

Tzvi

Nota média:  -
Em resposta a 'Tzvi Daum'

Re: Creating a quiz object with hotspots on an image--Moodle 2.4

por Joseph Rézeau -
Foto de Core developers Foto de Particularly helpful Moodlers Foto de Plugin developers Foto de Testers Foto de Translators

Tzvi: "... what would really make things simpler would be that if instead of inputting the coordinates a user could just drag a shape onto the image, stretch it as needed and the coordinates would appear filled in."

Yes, that feature would really make this question type so much more ergonomic.

Joseph

Nota média:  -
Em resposta a 'Joseph Rézeau'

Re: Creating a quiz object with hotspots on an image--Moodle 2.4

por Marcus Green -
Foto de Core developers Foto de Particularly helpful Moodlers Foto de Plugin developers Foto de Testers

A feature that allowed the user to drag a shape in the image to define the co-ordinates would switch my experience with  this question from

"I have fired it up and played with it 10 times but never used it"

to

"Ooooh this is really handy I shall start using it frequently to give my students a variety of question types" .

I have fired up the question and fiddled with the co-ordinates and always decided that it is just a bit too complex for me.

It is such a lovely, lovely idea for a quesiton type and there has obviously been a huge amount of thought into its creation and programming that this remaining feature is just keeping it out of reach of much wider use.

Nota média:  -
Em resposta a 'Marcus Green'

Re: Creating a quiz object with hotspots on an image--Moodle 2.4

por Mary Cooch -
Foto de Documentation writers Foto de Moodle HQ Foto de Particularly helpful Moodlers Foto de Testers Foto de Translators

I agree with Marcus!

Nota média: Useful (2)
Em resposta a 'Mary Cooch'

Re: Creating a quiz object with hotspots on an image--Moodle 2.4

por Gideon Williams -

I second that as every time I have to consult my notes as to the XYR or XYwL co-ordinates.

it is a lovely question though and a couple of our students produced some really good work with it as a question (after a little bit of coaxing. We chickened out and used the circle hotspots..

Nota média:  -
Em resposta a 'Marcus Green'

Re: Creating a quiz object with hotspots on an image--Moodle 2.4

por Tim Hunt -
Foto de Core developers Foto de Documentation writers Foto de Particularly helpful Moodlers Foto de Peer reviewers Foto de Plugin developers

I will just point out that Jamie created this question type for the OU. I am sure it is quite possible to add visual editing of hot-spots. You could ask Jamie for a quote, and then see if you can club together to raise that much. I don't think the OU would pay for this since most of our users are happy typing coordinates, but if other people wanted to add this to 'our' question type we would receive the addition gratefully.

Mind you, the OU has just contracted Jamie to do two other question types for us (as I said in another thread before Christmas), so if you want Jamie to do any development for you, you will have to get in line piscar o olho

Nota média:  -
Em resposta a 'Tim Hunt'

Re: Creating a quiz object with hotspots on an image--Moodle 2.4

por Marcus Green -
Foto de Core developers Foto de Particularly helpful Moodlers Foto de Plugin developers Foto de Testers

It might be a good thing to create a tracker item just to see how many people would like this feature. I looked at the code a few months ago but at the time I knew little about YUI apart from "its not Jquery". I know slightly more now.

Nota média:  -
Em resposta a 'Marcus Green'

Re: Creating a quiz object with hotspots on an image--Moodle 2.4

por Jamie Pratt -

I thought about how to make a wysiwyg interface before programming this question type. We decided it wasn't a priority for the first release of this question type.

My thinking was as follows :

 

 
I have been thinking that it would be nice to implement what you see is what you get style editing of drop zones.
 
For circles and rectangles :
  • There would be just one draggable 'knob' on the bottom right of the circular and rectangular drop zones to change the circles or rectangles size.
  • And the circular or rectangular drop zone itself would also be draggable. Thus the size and position of the circular drop zone would be fully adjustable.
I attach an image showing draggable knobs on a small image to show what I mean by 'knobs'.
 
It is not the square or circular drop zone editing that is tricky but the adding and moving corners of the polygon drop zone.
 
This is how I imagine the editing could work for polygons:
  • I figure we need a drag 'knob' at each point of the corners of the polygon. These points would be draggable to move the corners of the polygon.
  • To add points to the polygon you would click somewhere outside the currently selected polygon and a new polygon corner would be inserted there (splitting the nearest vertice with the two nearest endpoints), then this corner could also be dragged to anywhere.
  • The polygon itself would be a draggable object. So the teacher can drag the polygon as a whole across the image. Simultaneously changing the coordinates of all points in the polygon.

 
It would be great to see this added to the question type. Hope my thinking on how the interface might be designed might be helpful if someone else wants to give it a go, maybe a starting point for other ideas or whatever. I would also be happy to work on this when I have some time, if someone wants to hire me.
 
Of course someone could work on just the circle and rectangle wysiwyg interface and leave the more difficult polygon drop zone editing for later.
Anexo dragknobs.JPG
Nota média: Useful (2)
Em resposta a 'Jamie Pratt'

Re: Creating a quiz object with hotspots on an image--Moodle 2.4

por Abigail Smith -

Not sure if this helps or not, but Dreamweaver has image maps with hotspot drawing capability.  I'm not one to advocate illegal reverse-engineering, but just saying, it's been done.

Nota média:  -
Em resposta a 'Joseph Rézeau'

Re: Creating a quiz object with hotspots on an image--Moodle 2.4

por Phil Everist -

there are image mapping online and download tools you use to do the image mapping outside of Moodle then just bring in the code - search for image mapping tools


  1. Add your image to moodle
  2. use the tool to load your image and follow instructions to add hotspots  and destination links etc  - copy the code produced
  3. Go back to Moodle and toggle into HTML  - find the <img='your image name'   line where your image was added
  4. copy the code from step 2
  5. replace the src="filelocation" bit in the step 4 code with the src=filelocation" bit from the original image you added in step 2 
  6. toggle Edit HTML off - you should have your original image followed by the version with hotspot navigation - give a test and delete the original image with no hotspots when all working OK  

Hope it helps

Nota média:  -
Em resposta a 'Abigail Smith'

Re: Creating a quiz object with hotspots on an image--Moodle 2.4

por Abigail Smith -

Thank you, everyone, for your friendly responses.  Sorry I haven't replied in such a long time!  I was waylaid with a different project, and am only now able to get back to puzzling over the Moodle project.

Until I get my setup issues figured out, I won't be able to comment on the usefulness of the plugins you mentioned.  I downloaded the plugin, but I don't know where to save it or how to install it, etc., yet.  When I can get that stuff sorted out, I'll try your suggestions and comment on their usefulness.

Thank you, again!

Nota média:  -