Warning Warning! This is a lower-level API. Lower-level APIs are not recommended for most projects, and may not be available on all plans. See our page on recommended deployment patterns for more information.

Initialization

This page details the initialization options for Annotations API.

Enabling Annotations API

This section details how to enable Learnosity Annotations API in Items API. You can enable Annotations API in Items API by adding annotations: true to the config object within the request object of Items API. By default, Annotations API is disabled in Items API.

Note Annotations API is instantiated in Items API (Assess mode). It cannot be used in Items inline mode. Additionally, when enabling Annotations API via specifying annotations_api_init_options, these will override the more general annotations: true setting.

Initialization object

The initialization object contains all of the configuration properties for user & session identification, look and feel for the user interface, as well as properties to enable/disable certain functionality of the API. Most configuration is done within the “modules” object, where each module can be enabled and configured as desired.

const annotations_api_init_options = {
    "modules": {
        "notepad": true, // enable notepad module with default options
        "texthighlight": { // enable texthighlight with the following options:
            // Allows client to define a custom set of color scheme classes
            // Learnosity Default colors are named: theme-1, theme-2, theme-3, theme-4
            "highlight_colors": [
                'my-color-1', // highlighted DOM node will have classname "lrn-annotations-color--my-color-1"
                'my-color-2'
            ],
        },
        "stickynote": { // enable stickynote with the following options:
            "start_expanded": true, //sticky notes will be loaded in an expanded form
            "start_hidden": true //sticky notes will be loaded in hidden state
        },
        "drawing": { // enable drawing with the following options:
            // Allows client to define a custom set of color scheme classes
            // Learnosity Default colors are named:
            // lrn-annotations-drawing-color-1, lrn-annotations-drawing-color-2,
            // lrn-annotations-drawing-color-3, lrn-annotations-drawing-color-4
            "colors": [
                'my-color-1', // drawing elements will have classname "my-color-1"
                'my-color-2'
            ],
            "show_grid": true // enable the background grid display.
        }
    }
};
        


Important by default, all modules of Annotations API are disabled unless specified. Modules can be enabled by providing either a true or object value for that module. If no modules are enabled, Annotations API will not initialize.

Note Specifying "annotations": true in Items API enables all Annotations modules with a set of useful defaults, so you can activate all of the modules of Annotations API with one setting.

The available modules of Annotations API are:

Properties

Note All initialization options for Annotations API are optional.
object

Enables the drawing module, which allows users to annotate the page with a freehand drawing tool.

Properties:
colors
Type: array[string]

By default, Learnosity provides CSS class names for the colors such as "theme_1", or "theme_2" so the highlight Items will have the classname "lrn-annotations-color--theme-1". If you want to create your own set of colors using CSS, you can use this attribute to craft the color set as follows: "color-1" will generate the classname "lrn-annotations-color--color-1".

Default:
  • .lrn-annotations-color--theme-1 – hex code: #ff0; "yellow"
  • .lrn-annotations-color--theme-2 – hex code: #ffb4d9; "pink"
  • .lrn-annotations-color--theme-3 – hex code: #90ee90; "green"
  • .lrn-annotations-color--theme-4 – hex code: #0ff; "cyan"

Note These values are CSS class names.

show_grid
Type: boolean

Toggles the background grid display on and off.

Default: false
boolean

Enables the notepad module, which allows users to type notes into a separate window on the page.

  • True: enables the notepad module.
  • False or unspecified: does not enable the notepad module.

Note This module has no other initialization options.

Default: false
object

Enables the sticky note module, which allows users to place colored squares onto the page and type text into them.

Properties:
start_expanded
Type: boolean

When opening an assessment, you can control how existing sticky notes will be shown when loaded: either in an expanded or collapsed form.

  • True: sticky notes will be loaded in an expanded form.
  • False: sticky notes will loaded in a collapsed form.

Default: false
start_hidden
Type: boolean

You can control whether or not sticky notes will be shown on the page.

  • True: sticky notes will be hidden.
  • False: sticky notes will be shown.

Default: false
object

Enables the text highlight module, which allows users to select text elements on screen and have those selections marked with different colors.

Properties:
highlight_colors
Type: array[string]
Default:
  • $textHighlight_theme_1 - (hex code: #ff0; "red")
  • $textHighlight_theme_2 - (hex code: #ffb4d9; "orange")
  • $textHighlight_theme_3 - (hex code: #90ee90; "light green")
  • $textHighlight_theme_4 - (hex code: #0ff; "green")

Note These values are CSS class names.