1. From the edit page, select Add Block then choose Add Block from the dropdown menu.
    Add Block menu item in Add Block area
  2. From the Add Block modal, select Image Labeling.
    Add Block modal with list of blocks, Image Labeling option highlighted
  3. The Add Image Labeling editor will appear. The editor has two areas: the editing pane and the preview pane. Changes made in the editing pane will show in the preview pane so that the activity can be visualized as it is being built. The Image Labeling Block editor has two tabs: Activity Settings and Add an Item.

  4. Complete the Activity Settings tab with the following information:
    • Title: The default title is Image Labeling. The title can be changed by entering a custom value in the field. The title will appear in the Overview page and the More Information area for learners and instructors.
    • Points: Enter the point value for this activity.
      Note: This field will only appear if the course is graded. 
    • Image (Required):* Click on the Select an Image field to access the File Manager. Choose an existing image or upload a new image. Upon adding an image, the image will appear in the preview pane.
    • Alt Text (Required):If there is Alt Text associated with this image in the file manager, it will automatically populate upon selecting the image. If the field is blank, describe the image by telling viewers as much as possible about the image, using as few words as possible. The purpose of alternative text is to allow the content or purpose of the image to be revealed to someone with visual or cognitive disabilities. Alt text is not visible to learners—it is only read aloud by screen readers. To learn more about alternative text, visit WebAIM's Alternative Text.
      Screenshot of the image labeling Activity Settings tab featuring the following fields: title, points, image, alt text, and view
    • View: Choose Classic or Pinpoint. As a default, it is set to Classic
      • The Classic view shows larger rectangular fields/drop zones for the labels directly on the image and is a drag-and-drop activity.
      • The Pinpoint view displays a circle with a number on the image that learners select and then choose the label from a dropdown menu. This view can be used for more complex images where the areas that need to be labeled are smaller.

        screenshots of classic view and pinpoint view, as described in previous bullets
  5. Add items to the Image Labeling activity using the Add an Item tab. At least two items must be added to the Image Labeling block.
    • Location (Required):* Drag label (either rectangular field or pinpoint) to place it on the part of the image to be identified.
    • Label (Required):* Enter the label name.
    • Alt Text (Required):Describe the image by telling viewers as much as possible about the image, using as few words as possible. Try to describe the  image in a way that does not give away the answer.  The purpose of alternative text is to allow the content or purpose of the image to be revealed to someone with visual or cognitive disabilities. Alt text is not visible to learners—it is only read aloud by screen readers. To learn more about alternative text, visit WebAIM's Alternative Text.
    • Press the Save button to save the current label. To add additional labels, press the Save and Add Another button and repeat the previous steps until you have the labels needed to describe the parts of the image.
      Screenshot of the image labeling block Add an Item tab featuring the following fields: label and alt text
  6. The Item Settings tab will appear when editing an existing label. Use the pencil icon to edit the fields, the trashcan icon to delete the label, or move the point to a new location.
    screenshot of the image settings tab showing label 1 selected
  7. Press the Add Block + button to save the Image Labeling block.
  8. The new block will now appear on the course page in edit mode. 

    Screenshot of the image labeling block in edit mode

  9. Press the Publish My Edits button to save the block to the page. The block and page will now show how it will appear to learners. When learners complete the Image Labeling activity, they can check their latest move or check and submit the whole activity.

    Classic View:
    diagram of a heart in the classic view

    Pinpoint View:
    diagram of a heart in the pinpoint view