Image Upload

Description

This question type allows students to upload and annotate an image. The question can be used in two ways. One way is using annotation tool to add response boxes and label the image that has been uploaded by the author. This can be auto scored. Another way is asking the students to upload an image themselves directly from their machine and then use the annotation tool to place and label the response areas. In this case the question cannot be auto scored.

Figure 1 - Example of an Image Upload question with an image uploaded by the author.

Figure 2 - Example of an Image Upload question with the students being asked to upload an image and then label it.

Basic

Start with entering the question stem into the Stimulus field. Specify the task depending on whether the students are required to upload an image themselves or not. No additional steps are required if an image is to be uploaded by the students. You can make styling changes in the Formatting pane and save the question.
Below we will look at how to author a question with image upload.

Formatting

In the Formatting pane you can change the font size. You can also specify Max Width of the response area. The value can be inserted in px or em.

Validation

Scoring Type

Insert a value in the Score field to set up a mark for the question and select one of the following scoring types:

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

Valid Response

On top of the Validation pane you will see the Stimulus Image sectiona and upload an image you want the students to label. You can then specify its width and height. These will be the dimensions of the preview that will appear below.

Now you have to draw Validation areas. They are polygons you draw on the image preview in order to define area(s) that should be labelled. It can be used when you want the students to label only specific parts of the image.
In the image preview start drawing validation areas. You will see the areas you create as highlighted polygons with borders, titled Area 1, Area 2 etc. Draw as many validation areas as you need. Validation areas will not be seen by students.

Figure 3 - Drawing validation areas

Now you can define correct response for each validation area. For this click on "+" beside the Value section to add response boxes. You will see that each empty response box is titled Valid response for area 1, Valid response for area 2 etc. Enter correct responses for each validation area as shown in Figure 4.

Figure 4 - Entering correct responses for validation areas.


The question will validate correct if the student types the correct answers in the response boxes and places them correctly on the respective areas as shown in Figure 5.

Figure 5.

For more detailed information on validation visit our Validation page.

Examples


Example 1 - Image Upload question with no image uploaded.

Source
{
    "type": "imageupload",
    "stimulus": "Upload an image of Florence and label its most popular tourist sights."
}


Example 2 - Image Upload question with an image uploaded by the author.

Source
{
    "image": {
        "height": 187,
        "source": "//assets.learnosity.com/organisations/1/ireland_provinces.png",
        "width": 150
    },
    "imageValidationAreas": [
        [
            {
                "x": 45.333333333333,
                "y": 19.786096256684
            },
            {
                "x": 65.333333333333,
                "y": 41.711229946524
            },
            {
                "x": 97.333333333333,
                "y": 26.737967914439
            },
            {
                "x": 87.333333333333,
                "y": 4.2780748663102
            },
            {
                "x": 48,
                "y": 3.7433155080214
            }
        ],
        [
            {
                "x": 40.666666666667,
                "y": 24.064171122995
            },
            {
                "x": 54.666666666667,
                "y": 40.106951871658
            },
            {
                "x": 44.666666666667,
                "y": 62.032085561497
            },
            {
                "x": 6,
                "y": 48.128342245989
            },
            {
                "x": 15.333333333333,
                "y": 24.598930481283
            }
        ],
        [
            {
                "x": 57.333333333333,
                "y": 43.31550802139
            },
            {
                "x": 51.333333333333,
                "y": 64.705882352941
            },
            {
                "x": 76.666666666667,
                "y": 84.491978609626
            },
            {
                "x": 89.333333333333,
                "y": 39.572192513369
            }
        ],
        [
            {
                "x": 22.666666666667,
                "y": 58.823529411765
            },
            {
                "x": 66,
                "y": 84.491978609626
            },
            {
                "x": 13.333333333333,
                "y": 97.326203208556
            },
            {
                "x": 1.3333333333333,
                "y": 78.609625668449
            }
        ]
    ],
    "instant_feedback": true,
    "stimulus": "Label the provinces of Ireland",
    "type": "imageupload",
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                "Ulster",
                "Connacht",
                "Leinster",
                "Munster"
            ]
        }
    }
}


Example 3 - Image Upload question with an uploaded image and Case Sensitive option enabled.

Source
{
    "case_sensitive": true,
    "image": {
        "height": 160,
        "source": "//assets.learnosity.com/organisations/1/europe_map.gif",
        "width": 200
    },
    "imageValidationAreas": [
        [
            {
                "x": 14.5,
                "y": 58.125
            },
            {
                "x": 26,
                "y": 50.625
            },
            {
                "x": 33.5,
                "y": 59.375
            },
            {
                "x": 29,
                "y": 75
            },
            {
                "x": 21.5,
                "y": 77.5
            },
            {
                "x": 14.5,
                "y": 72.5
            }
        ]
    ],
    "instant_feedback": true,
    "stimulus": "Find and label France.",
    "type": "imageupload",
    "ui_style": {
        "fontsize": "large"
    },
    "validation": {
        "scoring_type": "exactMatch",
        "valid_response": {
            "score": 1,
            "value": [
                "France"
            ]
        }
    }
}