eClass Support
Drag and drop onto image question type
Last modified on 26 June 2023 12:12 PM

This question type allows students to drag words, images or both from a list and drop them into pre-defined spaces on a base image.

How to create a question

  1. Complete all required fields. The descriptive name is only for your reference and is not visible to students.
  2. Add the question to the text editor.
  3. Preview - click the background image button to upload an image. Your image will then display under the file upload box.
  4. Draggable items - you can upload images if you leave the type as 'draggable image' or you can type in words if you change the type to 'draggable text'. You may have a mix of images and text.
  5. Drop zones - choose which items to go in which zone. Click the 'Refresh preview' button.
  6. Then position the items on the background image and it will add their coordinates.


  1. Draggable images cannot be more than 150 x 100 pixels. If they are larger, they will be scaled on import. Remember to add a short text descriptor too. If you change your mind about an image, simply upload a different one to replace it.
  2. The following markup is allowed for use in this question type:
    1. <sub> (subscript)
    2. <sup> (superscript)
    3. <b> (bold)
    4. <i> (italics)
    5. <em> (italics)
    6. <strong> (bold)
    7. <br/> (line break)
  3. Choices that are within the same Group are colour coded and may only be dropped into a drop zone with the corresponding colour. Choices that are marked as 'Unlimited' may be used in multiple locations.

Example 1

In this example, the student must put the stages in order.

In the Preview section, a basic image of steps is uploaded.

In the Draggable items section, the 'type' chosen is 'draggable text' and text for each stage is added. (Groups and the Unlimited setting are not used in this example)

In the Drop zones section, items from the previously added options are chosen from the drop down:

The text then appears below the image:

The text boxes are dragged to their correct positions on the image (steps on the staircase) This will then add the co-ordinates to the Dropzones section automatically:

Once other settings are completed (see below) and the question is saved, test takers must drag the stages to the correct step:

Example two

Participants must add the correct country flag and capital city onto a map of Europe.

This question has both images and text while making use of the Groups feature.

In the Preview section, a basic map of Europe is uploaded.

In the Draggable items section, the capital cities are added as the type 'draggable text' and the flags are added as the type "draggable image".

All draggable images (the flags) are in Group 1 and all draggable text items (the capital cities) are in Group 2.

In the Drop zones section, an item from the previously added options is chosen from the drop down. The Group 1 boxes will display in a different colour from the Group 2 boxes.

When the boxes are dragged to their appropriate places on the background image, the coordinates in the Drop zones section are updated automatically.

Once other settings are completed and the question is saved (see below):

Scoring and feedback

All gaps are weighted identically. Only drop zones that are filled correctly gain marks. There is no negative marking of drop zones that are filled incorrectly.

Advanced Scoring and feedback

Whether or not Combined feedback is shown to students is governed by the Specific feedback setting on the quiz settings form.

Penalty for each incorrect try: The available mark is reduced by the penalty for second and subsequent tries. In the example above a correct answer at the second try will score 0.6666667 of the available marks and a correct answer at the third try will score 0.3333334 of the available marks.

If the question is used in 'interactive with multiple tries' behaviour the marking is modified as follows:

  1. The mark is reduced for each try by the penalty factor.
  2. Allowance is made for when a correct choice is first chosen providing it remains chosen in subsequent tries.

Hint: You can complete as many of these boxes as you wish. If you wish to give the student three tries at a question you will need to provide two hints. At runtime when the hints are exhausted the question will finish and the student will be given the general feedback and the question score will be calculated.

Clear incorrect responses: When ‘Try again’ is clicked incorrect choices are cleared.

Show the number of correct responses: Include in the feedback a statement of how many choices are correct.


Drag and drop questions are keyboard accessible. Use the <tab> key to move between the drop zones and the <space> key to cycle around the possible choices for each drop zone.

Note: This question type is not accessible to users who are visually impaired.

(0 vote(s))
Not helpful

Comments (0)