Last modified: February 08 2015 16:45:05.

Text Annotation Tool

Courseware Text Annotation Tool Interface

The text annotation tool allows instructors to add a text passage so that instructors and enrolled learners can engage in close reading by adding media-rich annotations or commentaries and tags to selected text passages.

To add the text annotatin tool click on the “Advanced Module” button (see figure below) and then click on the “Text Annotation” list item.

If you don't see the Text Annotation tool listed you will need to install it under the Manual Policy Definition Advanced Module List for your course settings. For more information on how to do this please visit the the Setup page.

Text annotation install text module item

After clicking the “Text Annotation” list item, you will be presented with a sample text loaded in the component ready to be edited and replaced with your text.

Text Annotation Studio Module

To change the content of the text annotation module click on the “Edit” button and the Editor window will pop-up on top of the module page. Here you have two window options: the Editor window to change the text to be annotated or the Settings window to change the tool settings. You can toggle between “Editor” and “Settings” by clicking on the corresponding buttons on the top right of the window. See a description bellow for each window option.

Editing Text Annotation Module: Editor View

To change the text or edit the instructions click on the “edit” button. Then click on the “Editor” button if it’s not already selected and the editor window will pop-up on top of the module

Text Annotation Editor

Add your Instructions and text to be annotated inside the window following the example using HTML code.
To add a set of instructions to your module enclose the assignment directions between the <instructions> </instructions> opening and closing tags.
To add the text to be annotated in HTML format between the HTML paragraph tags (<p> </p>) below the closing </instruction> tag. The HTML editor will give you a warning if the HTML code is not properly formatted.
Note that it may be easier to copy and paste HTML code generated from a WYSIWYG editor of your preference (for example Adobe Dreamweaver).

Editing the Text Annotation Module: Settings View

To change the settings for the text annotation module click on the “Settings” button. The settings are listed in the alphabetical order of the titles.

TExt Annotation Settings (part 1)

Default Annotations Tab: Here you can define what annotations will be preloaded when students first visit the page. You can chose from one of three possible options: myNotes, Instructor, or Public (only enter one). See below a description for each option:

Diacritics Marks: You can associate a custom diacritic mark to appear above the highlighted annotation text fragment. Diacritic marks will need to be saved in a common HTML image format (preferably a small optimized file size, such as jpg, png, or gif). These images need to be hosted either on the edX platform (see edX instructions to upload image file to course) or served from a reliable web hosting source.
To add a new mark use a semicolon separated sequence of keywords, such as: “markname;URLtoMark;baseline”, where:

[ figure showing example ]

Display Name: To add a title for the module enter the name in text field.

Email for ‘instructor’ Annotations: Instructors have the option to display pre-populated annotations within the text. You can enter the email of one registered user in the course (preferably one of the administrators of the site) to use as the “instructor” annotations. The annotations entered by the “instructor” will be displayed when the “instructor” tab is selected in the student view.

Additional settings are available if you scroll down the window.

Text Annotation Tool settings (part 2)

See bellow the descriptions for each:

Mode for Annotation Tool: Here you can define annotation read and writing privileges for the entire course. There are three possible modalities using two predefined terms: “instructor” and “everyone”.

Source/Citation: It is highly recommended that you add a citation for the text to be annotated (to indicate the origin of the text excerpt). You can use a citation generator such as the online Free Automatic Bibliography and Citation Generator from EasyBib ( to create your citations and paste them in the textfield.

Tags for Assignments: You can add a set of predefined tags (or thematic terms or categories) that you can instruct students to use in a specific assignment. Tags have to be associated with a custom text highlight color (see image below where "themeTag2" is associated with a blue highlight text selection "porttitor quis rutrum ac").

text annotation color highlights

Each tag needs to be paired with the corresponding highlight color separated by a colon and multiple tags need to be separated by a coma (for example: tag1:color1,tag2:color2,tag3:color3). The color can be any hexadecimal HTML color number beginning with the hashtag (#) (see When choosing a color be sure to test that there is enough contrast to between it and the text.

Using the Text Annotation Tool

When learners visit the a courseware page with a text annotation exercise with instructions will be presented with either a pre-loaded set of text annotation highlights containing instructors annotations (with the "instructor's" tab pre-selected on the search bar), or the plain text of the exercise with no highlights (the personal "My Notes" tab selected on the search bar).

Learners can browse and discover peer annotations by clicking on the "Public" Tab" in the search bar. The search can also be refined by user name, tag, or custom term within the text of the annotation. For more information on the search bar visit the My Notes page where the search features are described.

Grid search bar

When the "Public" tab is selected the annotation highlights will be displayed with the "Annotations Grouping: ON".

TExt Grouping turned on

Users can turn the annotation grouping off by clicking on the upper right "Annotations Grouping: ON" button and toggling it off.

Group annotation off

Learners will need to closely follow the instructions above the text to complete the annotation exercise. A set of tags might already be available and required to use with each annotation.



Creating a Text Annotation

To create a text annotation simply click and drag with to select (highlight) the portion of text you would like to annotate. When you release the mouse the Annotator pencil icon will appear (see fig below)

text annotator icon

Click on the icon and the Annotator Editor interface window will pop-up ready for you to enter your text or add rich media as a note. Visit the Annotator Editor pages for more information on how to use it.

Demo video for Text Annotation Tool

Annotation dashboard