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

Annotator: the Common Annotation Tool User Interface

Annotator UI

The open EdX Annotation Tools share one common user interface to create annotations on text, images and videos. The interface consists of two distinct windows or popup “bubbles”: the Editor window to create a new annotation or edit an existing annotation and the Browser mode window to view the existing annotations by hovering over the annotated segment. Here is a Quick Reference Guide explaining the features of bothe the Editor and the Viewer windows.

back to top

The Annotator Editor View

The Annotation Editor appears anytime you create an new annotation or edit a new annotation. Read the text description for each of the numbered features on the image below.

Annotator Editor View

1. Rich Text Editor: Place your cursor inside the box and start typing your annotations. Here you can format your text and add links, images, video clips as part of your annotation.

2. Text Formatting Tool Bar: You can format your text with basic text formatting tools such as alignment, bullets, font styles. These are standard text formatting tools similar to any webased rich text editor.

3. Insert a web link button: After clicking on the Insert an web link button a new window will pop up for you to add you link info.
Annotator insert link
Here you enter the link address in the “URL” text field, enter a “Text to Display” instead of the link address and choose the Target where you want the link to load from the pulldown menu (target the same browser window or a new browser window).

4. Add Image button: After you click on the add image button a new window will pop up for you to add the image information. Annotator edit image
Copy the link to the image and past it in the “Source” field. You can add an image description and the dimensions you would like your image to display at.

5. Insert/edit video button: After clicking on the Insert/Edit video button a new window will pop up for you to add the video clip information in the “General” tab view.
Annotator insert video
Source: In the Source field add the URL to the video clip.
Alternative source: If you have an alternative URL source for the video you can enter it here.
Poster: If you want a default image to appear on the video player before it starts, enter the URL to the image in the text field

If you are using a YouTube video, click on the “Embed” tab.

Copy the embed code from a video source such as YouTube and paste it in the embed text field.

6. Raw HTML Source Code button:
Annotator edit raw html
If you understand HTML and would like to further customize the annotation entry, you have the option of entering raw code HTML. After clicking on the Source Code button a new window will pop up for you to enter plain HTML text (see fig. above). Please be sure to enter well formatted HTML code and try to keep the code simple to avoid display issues.

7. Privacy settings: When you create a new annotation, by default the tool is set to display the annotation to everyone in the course. If you wish to keep your annotation private make sure to click on the box to uncheck the public display option.

8. Tagging you annotation: Here you can enter any tag name you desire. Enter words separated by a coma for each tag category under which you want to classify your annotation. In some exercises your instructor might select a list of tags for you use. The tag names should be listed in the instructions above the annotation exercise. For text annotation a predefined highlight color set by the instructor will be associated with the tag name. When you begin typing the predefined tag you will notice that the full tag name will autocomplete underneath the tag text field (white text on blue highlight). Click on the tag word to accept the autocomplete.

9. Share Without Saving:
Annotator share without saving
At any time you can share your annotation with your peers and friends through social networks (Facebook, Twitter, Email or Google) without saving it to the database. This can be useful if you want to share the location (point to a specific segment) of the annotated piece.

10. Cancel Button: You can quit entering the annotation anytime you want by clicking the “Cancel” button. This will delete any notes and information you have entered in the window. Please note that once canceled the window will close and the information will be permanently deleted (unless you are editing the annotation) and cannot be retrieved. We recommend you formulate the annotation on a simple notepad

11. Save Button: After you have finished writing you annotation and adding the tags you press the “save” button to store you annotations. You can always go back and edit your annotation after it was saved.



The Annotator Viewer

Annotator Viewer

1. Flag Annotation Button: If you discover an annotation written by one of your peers in the course that seems offensive to you, you have the option to flag the annotation as “inappropriate”. To do this simply click on the “Flag” button (top left of the viewer) and it will be reported to the course administrators for review. Flagged annotations are highlighted in bold as it appears on #1

2. Annotation body: the annotation text (or body) is displayed here. Here you can check that all the content you entered in the editor is correctly displaying in this area. You can always click the edit button (#6) to make revisions to your annotation.

3. Username field: Here is displayed the user name of the student that created the annotation. If you are interested in the user’s post, you can discover other postings by the same user by entering the user name in the search area of the annotation tool.

4. Tags: Here are displayed the tags that you have entered, the tags words should appear bounded by button-like box.

5. Share Button:
Annotator viewer share
Click this button if you wish to share a link to the annotation either via email or on a social site (this is the same feature as item # 9 on the Annotation editor). This feature also allows you to do cross references of annotations, such as annotating a text with a link to an image annotation. For example, you can copy the annotation link in the Share window and paste it inside the link feature of another annotation through the Annotation Editor (see 1. #3). This can be done within the same annotation exercise or between two different annotation exercises within the course.

6. Edit Annotation button: This button only appears when you roll over the annotation window. Click on this button when you want to edit your annotation. Clicking this button will take you to the Annotation Editor view (see section 1.).

7. Delete Annotation Button: Clicking on this button will delete the annotation. When you click this button the annotation will be deleted immediately with no warning so be careful! If you accidentally delete an annotation that you consider important and would like to absolutely retrieve it, send the course administrator an email with the details and we will try our best to retrieve it (but not guarantees).

Please note that only the creator of the annotation will have the option to delete his or her entry (the button is not available to other students).

Known Issues