Attributes Element Hierarchy Regions Output See Also

crowd-entity-annotation

A widget for labeling words, phrases, or character strings within a longer text. Workers select a label, and highlight the text that the label applies to.

Important: Self-contained Widget

Do not use <crowd-entity-annotation> element with the <crowd-form> element. It contains its own form submission logic and Submit button.

See an interactive example of an HTML template that uses this Crowd HTML Element in CodePen.

The following is an example of a template that uses the <crowd-entity-annotation> element. Copy the following code and save it in a file with the extension .html. Open the file in any browser to preview and interact with this template.

Attributes

The following attributes are supported by this element.

header

The text to display above the image. This is typically a question or simple instruction for the worker.

initial-value

A JSON formatted array of objects, each of which defines an annotation to apply to the text at initialization. Objects contain a label value that matches one in the labels attribute, an integer startOffset value for labeled span's starting unicode offset, and an integer endOffset value for the ending unicode offset.


[
  {
    label: 'person',
    startOffset: 0,
    endOffset: 16
  },
  ...
]

labels

A JSON formatted array of objects, each of which contains:

label (required): The name used to identify entities.
fullDisplayName (optional): Used for the label list in the task widget. Defaults to the label value if not specified.
shortDisplayName (optional): An abbreviation of 3-4 letters to display above selected entities. Defaults to the label value if not specified.

shortDisplayName is highly recommended
Values displayed above the selections can overlap and create difficulty managing labeled entities in the workspace. Providing a 3-4 character shortDisplayName for each label is highly recommended to prevent overlap and keep the workspace manageable for your workers.


[
  {
    label: 'person',
    shortDisplayName: 'per', 
    fullDisplayName: 'person'
  }
]

name

Serves as the widget's name in the DOM. It is also used as the label attribute name in form output and the output manifest.

text

The text to be annotated. The templating system escapes quotes and HTML strings by default. If your code is already escaped or partially escaped, see Variable filters for more ways to control escaping.

Element Hierarchy

This element has the following parent and child elements.

Child elements: full-instructions, short-instructions

Regions

The following regions are supported by this element.

full-instructions

General instructions about how to work with the widget.

short-instructions

Important task-specific instructions that are displayed in a prominent place.

Output

The following output is supported by this element.

entities

A JSON object that specifies the start, end, and label of an annotation. This object contains the following properties.

label – The assigned label.
startOffset – The Unicode offset of the beginning of the selected text.
endOffset – The Unicode offset of the first character after the selection.

Example : Sample Element Outputs

The following is a sample of the output from this element.


{
  "myAnnotatedResult": {
    "entities": [
      {
        "endOffset": 54,
        "label": "person",
        "startOffset": 47
      },
      {
        "endOffset": 97,
        "label": "event",
        "startOffset": 93
      },
      {
        "endOffset": 219,
        "label": "date",
        "startOffset": 212
      },
      {
        "endOffset": 271,
        "label": "location",
        "startOffset": 260
      }
    ]
  }
}