In this Image Drag and Drop Question, learners 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 learner 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.
Scoring
The Scoring type menu can be found under More Options.
The following scoring types are available in Image Cloze Drag & Drop Questions:
- Exact Match - Learner 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 learner for an incorrect response.
- Minimum points if attempted1 - Points awarded to the learner for attempting the Question, regardless of a correct or incorrect response.
- Check answer button - If this is enabled, a "Check answer button" will appear to the learner alongside the Question; clicking this button will indicate to the learner 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 learner can use the "Check answer button". A value of 0 indicates an infinite number of times.
Layout
- 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).
'Extra' options
The extras section in the authoring interface allows you to add more information about the Question, information that we refer to as metadata.
There are a number of fields available: acknowledgements, contains math, distractor rationale, distractors, instructor stimulus, rubric reference, sample answer, and stimulus (review only).
To learn more about the options shown in the Extras section, see Understanding the Extras Section of the Question Editor.
1. Note: “Minimum points if attempted” replaces the earlier label “Minimum score if attempted”. Version added: v2026.1.LTS