Drag and Drop

This article will no longer be updated. New article available at support.inspera.com.

Norwegian: Oppgavetype dra og slipp

English: Question type Drag and drop


Automatic evaluation. The question is answered by dragging and dropping text or objects.

Drag and drop is a question type in which a number of drag elements should be dragged over to the pre-defined drop areas. Drag items can be images and/or text. The drop area is added as a background image, or alternatively as a field.

Drag and drop questions are evaluated automatically. The score for correct or incorrect answers is to be set collectively for the entire question.

General options:

  1. Marks: Set the marks per correct and incorrect answer. Note, marks for unanswered are achieved if the question as a whole is unanswered (no drag elements have been moved). An option for this question type is "Regard as unanswered outside defined drop areas" - if none of the drag elements are placed within a drop area, marks for unanswered will be achieved if this option is selected.  
  2. Main illustration: To display any content as the main illustration, either upload an image or enter an embed code. Click here to read more.
  3. PDF Panel: Attach a PDF. The PDF will not be visible in question edit mode, preview your question to ensure it is displayed correctly. Click here to learn more. 
  4. Labels: Add meta-data to the question such as a subject-code, a theme or topic, or other assessment criteria. Click here to learn more.

Options for this question type:

  1. Prompt:. Write an explanatory text for the question or use the predefined text to serve as a guide.
  2. Background: Add a background image (jpg, png or svg) with dimensions 620x400.
  3. Drag areas: Add a drag area for each element as text and/or an image. Images are automatically adjusted to the drag area, however, it is recommended that their size be as close to the actual size of the area as possible.
  4. Drop areas: Add a drop area. It is possible to have more or fewer drop areas then drag areas. 
  5. Options: 
    Snap to grid. Makes it easier for the author of the question to set up the drag and drop elements.
    Free placing drag areas. A default setting where users themselves must drag and drop the element within the corresponding drop area. If this is not selected, the element will automatically snap into place.
    Mark drop areas. Areas where drag elements must be dropped into are demarcated and made visible to the user. One can, instead, use background images to demarcate drop areas.
    Consider unanswered if outside the drop area. If the user does not drag the element into a drop area, it will be considered unanswered. Note, all drop areas must be regarded as unanswered for the questions as a whole to be regarded as unanswered.
    Height. The standard is 400p (recommended height). In case the height needs to be increased to add more elements, it is recommended that it be tested properly to ensure good end user experience.

Connecting the drag and drop areas together:

  1. Click on the drag element to be connected. A blue frame appears around the selected drag element.
  2. Click on the drop element that corresponds to the selected drag element. The same drag element can be connected to one or more drop areas.
  3. The link is created and is visualised as a green line connecting the drag and drop elements and is added/removed by clicking repeatedly on the drop element.
  4. Click outside the elements to withdraw focus from the drag element. Now all elements and their connections will be visible for the entire question.
  5. Repeat this process until all drag and drop areas are defined.