Image Drop Down

Description

In the Image Drop Down question type, students select their response from a response box drop down menu located somewhere on an image.

Figure 1 - Image Drop Down question example.


Create a Question

Enter the question stem into the Compose question area. Then upload the image to be used for the question in the Image URI field. You can either upload the image or paste image URL. For information about image requirements visit our Images page. You can also add Image Alternative Text, which appears if an image cannot be displayed to users, and Image Title, which is shown when mouse pointer is hover over an image.

Figure 2 - Composing a question.


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

You can then position the response boxes on the image. In order to add more response boxes click on +Add Response above the image. Response boxes will pop up on the image. Drag response boxes and position them on the image as required. See example in Figure 3. Notice number labels on the top right corner of each response box.

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

Drag and drop the response boxes on the image as desired. In order to add more response boxes click on +Add Response above the image. See example in Figure 3.

Figure 3 - Uploading an image.

An Edit Aria label toggle is available for the Image Cloze Dropdown question type. Once enabled it will be possible to add an Aria Label for each response box position on the image.

Figure 4 - Edit Aria Labels

Then you need to list possible responses for each drop down menu. In the Possible Responses you will see Response 1, Response 2 lists. This represents the drop down menus of each response box you added to the image. You will see as many response lists as you have response boxes on the image.
Enter possible responses for each drop down menu as shown in Figure 4. Click on +Add to add a new response to the list. Click on the delete icon if you want to remove it.

Figure 5 - 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. The default value is 1.
  • In the Correct tab you will see the uploaded image with drop down menus on it. To validate the question simply select the correct response from each menu. See example in Figure 5.

Figure 6 - Image Drop Down question validation.


Scoring type menu can be found under More Options.

The following scoring types are avaialable in Image Drop Down 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.

More Options

Under More Options section you will find additional formatting options that can be applied to the question.

Layout

From the Possibility List Position drop down menu choose where to position the possible responses container. Options are: Top, Bottom, Left or Right.

Image Scale allows the uploaded image to be scaled along with font size. The option is disabled by default.

Authors also have the ability to control the size of response boxes in the text. Width and height of all response boxes can be changed at once in the Response Container (global) section. However if you only wish to change the size of specific boxes go to Response Container (individual).

If you set width to a fixed size enable Wordwrap, it will allow the response box to expand vertically to fit the response into it.

Example 1 - Image Dropown question with added pointers positioned to the left.

Source
{
    "instant_feedback": true,
    "image": {
        "alt": "Human skeleton",
        "scale": true,
        "src": "//assets.learnosity.com/organisations/1/human_skeleton_2015723171655.jpg"
    },
    "possible_responses": [
        [
            "Skull",
            "Clavicle",
            "Ulna"
        ],
        [
            "Ischium",
            "Metacarpus",
            "Patella"
        ],
        [
            "Lumbar Vertebrae",
            "Femur",
            "Humerus"
        ]
    ],
    "response_container": {
        "pointer": "left"
    },
    "response_positions": [
        {
            "x": 49.43,
            "y": 5.43
        },
        {
            "x": 55.29,
            "y": 67.81
        },
        {
            "x": 49.51,
            "y": 36.97
        }
    ],
    "stimulus": "<p>Label this image of a human skeleton.&nbsp;</p>",
    "type": "imageclozedropdown",
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                "Skull",
                "Patella",
                "Lumbar Vertebrae"
            ]
        }
    }
}


Example 2 - Image Drop Down question with fixed width response containers and placeholders.

Source
{
    "instant_feedback": true,
    "image": {
        "alt": "Map of Ireland",
        "scale": false,
        "src": "//assets.learnosity.com/organisations/1/Ireland Map_2015616173535.png",
        "title": "Map of Ireland"
    },
    "possible_responses": [
        [
            "Cork",
            "Kerry",
            "Waterford"
        ],
        [
            "Donegal",
            "Sligo",
            "Galway"
        ]
    ],
    "response_containers": [
        {
            "pointer": "left"
        },
        {
            "pointer": "right"
        }
    ],
    "response_positions": [
        {
            "x": 38.02,
            "y": 83.53
        },
        {
            "x": 46.01,
            "y": 7.94
        }
    ],
    "stimulus": "Choose the appropriate county names.",
    "type": "imageclozedropdown",
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                "Cork",
                "Donegal"
            ]
        }
    }
}


Example 3 - Image Drop Down question with placeholders text.

Source
{
    "instant_feedback": true,
    "image": {
        "src": "//assets.learnosity.com/organisations/1/greek-philosophers.png",
        "title": "Greek philosophers"
    },
    "possible_responses": [
        [
            "Plato",
            "Aristotle",
            "Socrates"
        ],
        [
            "Plato",
            "Aristotle",
            "Socrates"
        ],
        [
            "Plato",
            "Aristotle",
            "Socrates"
        ]
    ],
    "response_container": {
        "placeholder": "Select...",
        "pointer": ""
    },
    "response_positions": [
        {
            "x": 2.8,
            "y": 78.18
        },
        {
            "x": 39.76,
            "y": 78.17
        },
        {
            "x": 74.61,
            "y": 78.17
        }
    ],
    "stimulus": "<p>Select the correct names of the Ancient Greek philosophers.</p>",
    "type": "imageclozedropdown",
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                "Plato",
                "Aristotle",
                "Socrates"
            ]
        }
    }
}


Example 4 - Image Drop Down question with fixed widths for individual response boxes.

Source
{
    "image": {
        "src": "//assets.learnosity.com/organisations/1/apparatus.jpg",
        "title": "Chemistry Apparatus"
    },
    "instant_feedback": true,
    "possible_responses": [
        [
            "Jar",
            "Beaker",
            "Funnel"
        ],
        [
            "Beaker",
            "Flask",
            "Canula"
        ],
        [
            "Volumetric Flask",
            "Cylinder",
            "Funnel"
        ],
        [
            "Condenser",
            "Graduated Cylinder",
            "Beaker"
        ],
        [
            "Evaporation dish",
            "Trough",
            "Balance"
        ]
    ],
    "response_container": {
        "height": "30px",
        "width": "90px"
    },
    "response_containers": [
        [],
        [],
        {
            "width": "170px"
        },
        {
            "width": "170px"
        }
    ],
    "response_positions": [
        {
            "x": 2.14,
            "y": 49.79
        },
        {
            "x": 49.68,
            "y": 39.64
        },
        {
            "x": 68.26,
            "y": 45.87
        },
        {
            "x": 16.78,
            "y": 91.32
        },
        {
            "x": 70.19,
            "y": 87.53
        }
    ],
    "stimulus": "<p><strong>Chemistry Apparatus</strong></p>

<p>Select the correct name for every object.</p>
",
    "type": "imageclozedropdown",
    "validation": {
        "scoring_type": "partialMatchV2",
        "valid_response": {
            "score": 3,
            "value": [
                "Funnel",
                "Beaker",
                "Volumetric Flask",
                "Graduated Cylinder",
                "Balance"
            ]
        }
    }
}