Label Image

Description

This question allows students to enter text into response box labels positioned on an image. This is similar to the Image Drag & Drop and Image Dropdown questions, but students are required to type their own responses.

Figure 1 - Label Image 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 Image Title text, which appears when the mouse hovers over the image.

Figure 2 - Label Image question example.


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

The numbered response boxes will appear on the image, and you can drag and position them as required. In order to add more response boxes click on +Add Response above the image. See example in Figure 3.

Figure 3 - Response boxes positions on the image.

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 1.
  • In the Correct tab you will see the uploaded image with empty response boxes on it. To validate the question type correct responses in each box. See example in Figure 4.

Figure 4 - Image Cloze Text question validation.


Scoring type menu can be found under More Options.

The following scoring types are avaialable in Image Cloze Text 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

You can specify maximum amount of characters that can be entered in the response boxes. Enter a value in the Maximum Length (characters) field. Max possible value is 250.

Multiple Line option allows student to enter text in multiple lines in the response area by pressing the return key on the keyboard.

Browser Spellcheck - This will turn on spellcheck in the text entry area. Note: This is a browser feature and may not always be available.

Case Sensitive toggle determines whether students responses should match case or not. By default all questions are not case sensitive i.e. “Yes” and “yes” are treated as the same answer. If you wish the students to enter the response in the correct case enable Case Sensitive.

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

Character Map - Inserting a character map allows students to select non-typical letters and symbols in language e.g. ó, ç, ñ or Math and Science e.g. μ, ∞ ,≤, and make them available for the students in Label Image questions. Clicking Yes/No will turn on our default character maps. The Alpha Character Map is the default Character Map. To enable the Numerical Character Map Has Mathematical Formulas must be also be enabled. To create a Custom Character Map enter the specific characters into the Characters to display box.

Alpha Character Map Numerical Character Map Custom Character Map

If you wish to set specific sizes for the response boxes in the text you can do so in the Advanced pane. You can control the size of all response boxes at once by setting height and width in the Response Container (global) section. If you only wish to change the size of specific boxes go to Response Container (individual).

Layout

  • Height - Specify the height of all response containers. e.g. 40px.
  • Width - Specify the weight of all response containers. e.g. 70px.
  • Pointer - Add a pointer to the top, right, bottom or left of the response box.
  • Placeholder - Add text to give a hint to the student. This text will appear in the response box and disappear when the student starts typing.
  • Input Type - This the keyboard that will display on Tablet devices. Options are Text or Number.

Example 1 - Label Image question with customised pointers positions.

Hint Insert "Blade", "Vein" and "Petiole".


Source
{
    "instant_feedback": true,
    "image": {
        "alt": "Leaf",
        "scale": false,
        "src": "//assets.learnosity.com/organisations/1/leaf_2015724125123.jpg",
        "title": "Leaf Parts"
    },
    "max_length": 25,
    "response_containers": [
        {
            "pointer": "bottom",
            "width": "130px"
        },
        {
            "pointer": "right",
            "width": "130px"
        },
        {
            "pointer": "left",
            "width": "130px"
        }
    ],
    "response_positions": [
        {
            "x": 54.31,
            "y": 52.36
        },
        {
            "x": 38.54,
            "y": 27.81
        },
        {
            "x": 48.46,
            "y": 95.28
        }
    ],
    "stimulus": "<p>Label the leaf parts.</p>
",
    "type": "imageclozetext",
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                "Vein",
                "Blade",
                "Petiole"
            ]
        }
    }
}


Example 2 - Label Image question with placeholders.

Hint Try "Hypotenuse", "Opposite" and "Adjacent".


Source
{
    "instant_feedback": true,
    "image": {
        "src": "//assets.learnosity.com/organisations/1/triangle_2015724144818.png",
        "title": "Triangle"
    },
    "response_container": {
        "width": "120px"
    },
    "response_containers": [
        {
            "pointer": "bottom",
            "placeholder": "Type here"
        },
        {
            "pointer": "left",
            "placeholder": "Type here"
        },
        {
            "pointer": "top",
            "placeholder": "Type here"
        }
    ],
    "response_positions": [
        {
            "x": 35,
            "y": 39.6
        },
        {
            "x": 56,
            "y": 41.4
        },
        {
            "x": 35.4,
            "y": 81.2
        }
    ],
    "stimulus": "Label the sides of the triangle.",
    "type": "imageclozetext",
    "ui_style": {
        "fontsize": "large"
    },
    "validation": {
        "scoring_type": "partialMatchV2",
        "valid_response": {
            "score": 3,
            "value": [
                "Hypotenuse",
                "Opposite",
                "Adjacent"
            ]
        }
    }
}


Example 3 - Label Image question with multiple lines enabled and Case Sensitive option.

Source
{
    "instant_feedback": true,
    "case_sensitive": true,
    "image": {
        "src": "//assets.learnosity.com/organisations/1/Continents_map.png",
        "title": "Map of the World"
    },
    "max_length": 30,
    "multiple_line": true,
    "response_container": {
        "height": "60px",
        "width": "80px"
    },
    "response_positions": [
        {
            "x": 0.83,
            "y": 19
        },
        {
            "x": 34.67,
            "y": 1.33
        },
        {
            "x": 58.67,
            "y": 10.67
        },
        {
            "x": 65.17,
            "y": 71.67
        },
        {
            "x": 8.83,
            "y": 61.67
        },
        {
            "x": 32.67,
            "y": 48
        }
    ],
    "stimulus": "<h4>Label the continents</h4>

<hr />
",
    "type": "imageclozetext",
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                "North America",
                "Europe",
                "Asia",
                "Australia",
                "South America",
                "Africa"
            ]
        }
    }
}