Select Page
(Last Updated On: August 10, 2016)

In the “drag and drop onto image” question type the instructor specifies a background image, markers that students will drag, and the correct marker locations. Students then have to drag the markers to the correct locations specified by their instructor.

To create a drag and drop onto image question click on “add” in the edit quiz page, and find “drag and drop onto image.”

Drag and drop onto image

Drag and drop onto image question type


Next, give the question a title so that you can find it again in the question bank. Below the title box, type in the question text.

question text

Give the question a title so you can find it in the question bank if you want to re-use it.

You will have to upload a ‘background’ image. This is the image that students will drag and drop markers on-to. For example, I chose a blank world map:

Drag and drop background image

Select an image for students to drag and drop the correct markers on to.

Next, you have to choose what kind of “marker” students will be dragging onto the image. You can choose a “draggable image” marker type, or a “text” marker type. If you choose a draggable image, the image can be no bigger than 150 x 150 pixels. Students will then be able to drag the images you have chosen onto the background images in the correct way. I chose the “text” question type. If you choose the text question type, enter text in the fields in the “draggable items” section to make it a draggable option for students to choose from:

Drag and drop text markers

For the “draggable text” option, enter text into each field to make it a draggable option for students to drop onto the image.

Next, click the “refresh preview” button in the “preview” section.

Refresh preview button

Click on the “refresh preview” button in the preview section after typing in the draggable marker text.

Then, go to the “drop zones” section and click on the dropdown box next to the words, “draggable item,” for each answer. Then, select the text option that you want to turn into a marker. They will appear in the preview section as boxes below the background image:

Draggable marker answers

The text options you choose will appear below the preview image in the preview section. Drag each one onto the right place on the image to update the coordinates that correspond with the right answer.

Simply drag each one onto the right place in the background image and the coordinates for the correct answer will update in the “drop zones” section below:

Drag markers for correct coordinates

Drag each marker onto the correct spot on the background image to link it with the correct coordinates.

Finally, click “save changes” and you are finished.