Submit a request
Submit a request

Label Image with Drag & Drop

In this Image Drag and Drop question, students can select from a list of potential answers and drag them to the correct response box on the image. There is the option of allowing more than one correct response per container.


Figure 1: Label image with drag & drop question example.

Create a question

Enter the question stem into the Compose question area. In the Add image field, upload your chosen image, or paste the image URL. For information about image requirements visit our Images page. You can add Image Alternative Text, which appears if the image cannot be displayed on a page, and Text on hover text, which appears when the mouse hovers over the image. You can then specify the Width (px) for the image.


Figure 2: uploading an image to the question.

The uploaded image preview will be shown below in the Response Containers section.

You can now add response containers to your image. Three appear by default. To add a new Response container, click on the Draw and resize option to the left of the toolbar. Then click and drag the response container to the desired size. Add pointers by selecting a response container and choosing one of the four option in the Pointers button on the toolbar. To delete a response container, select the response container and hit the delete button on the toolbar.


Figure 3: Adding response containers to an image.

In the Possible Responses section, enter all responses that the student can choose from. Clicking the +Add button will create a new response, and the trash can icon will remove that particular response. Ticking the checkbox for the Edit ARIA labels option will display a list of fields corresponding to each possible response, where meaningful ARIA labels can be entered.


Figure 4: Listing possible responses.

You can now configure validation for your question. Follow these steps to set up score and correct response:

  • Insert value in the Point(s) box to set up a mark for the question. Default value is set to 1.
  • In the Scoring section, underneath the Set correct answer(s) section, you can set the correct response for this question by dragging and dropping the appropriate responses into the correct location on the image. In this case there are more than one correct answer per response container. An ellipses appears to indicate this. Click on the ellipses to open the window showing all responses.


Figure 5: Question validation.


The Scoring type menu can be found under More Options.

The following scoring types are available in Image Cloze Drag & Drop questions:

  • Exact Match - Student must answer all parts of the question correct to receive a mark.
  • Partial Match Per Response - Each correct response element will be awarded an individual score.
  • Partial Match - Each correct response element will be scored individually and the overall question score will be divided between responses.

When done with validation you can specify additional options:

  • Enable Duplicate responses if you want the responses to be used infinite times. This means a response when dragged into a box will not disappear from the possible responses container and is reusable.
  • You can also decide whether to show or hide the responses drag handles by toggling Show Drag Handles.
  • Shuffle possible responses displays the possible response drag and drop options in a different order each time the question is rendered.
  • Transparent possible responses: If enabled, responses will be transparent after being dragged into the response container.
  • Fill color defines the color and opacity for the background of all response containers.
  • Maximum responses per container allows author to define how many responses can be dropped per container.
  • Show dashed border determines whether or not borders are visible in response containers.

Other scoring options

  • Unscored/Practice usage type - Enabling this option will remove all scoring from the question.
  • Penalty point(s) - The value entered here indicates marks that will be deducted from the student for an incorrect response.
  • Minimum score if attempted - The value entered here indicates marks that will be awarded to the student for an attempt.
  • Check answer button - If this is enabled, a "Check answer button" will appear to the student alongside the question; clicking this button will indicate to the student if their answer is correct or incorrect, but it will not tell them the correct response. This can be useful for informal assessment.
  • Check answer attempts - The value entered here will indicate how many times the student can use the "Check answer button". A value of 0 indicates an infinite number of times.


  • Response container position defines the position of the possible responses container. The container can be positioned on the top, bottom, left or right of the question.
  • Stem numeration (review only): numeration characters displayed to the left of the validation label. Only visible in review state.
  • Font size controls the size of the font for this question. Options are: "small"(11px), "normal"(14px), "large"(17px), "extra large"(20px) and "huge"(24px).


Was this article helpful?

Did you arrive here by accident? If so, learn more about Learnosity by clicking here.