How do I create an image labeling activity?

Modified on Thu, 26 Feb at 2:11 PM

Navigate to the page and select Edit this Page. Find the position you want to add a block and select the plus (+) icon.
From the dropdown, select Add Block.
In the Add Block modal, you can:
- Use the Search field to find a block by keyword
- Select a block from your custom list of Favorites
- Scroll through the list of All Blocks to select one
- Use the various Categories to filter by block type
- Select a star icon to customize your Favorites list
Select the Image Labeling block. The Add Image Labeling form will open. 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.
Complete the Activity Settings tab with the following information:
- Title: The default title is Image Labeling. Enter a clear, descriptive title. Block titles 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. After you addn image, the image will appear in the preview pane. For more information on how to upload an image to the File Manager, see https://coursearc.freshdesk.com/support/solutions/articles/9000197231-how-do-i-upload-files-to-the-file-manager-.
- 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.
- Image Width: Enter the desired image width (max 750 pixels)
- 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.
- Adjust Padding: adjust the padding (px) or the space around the image. -
- The Reading Order allows screen reader users to navigate through elements on a page or website in a logical order.
  - Automatic: screen readers will read elements in the interactive working from the top of the page to the bottom, reading left to right.
  - Manual: content creators can manually set the order that they want screen readers to follow by selecting the hamburger icon next to the answer choice and dragging it to the correct spot.
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.
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.
Press the Add Block+ button to save the Image Labeling block.
The new block will appear on the page in Edit Mode with a red, dotted outline indicating it's editable.
Select the Publish My Edits button to save the block to the course page and see the content as 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:
- Pinpoint View: