Items API Initialization

Defines the active color scheme for the assessment player for accessibility purposes.

You would want to specify this option so that you can select one of the built-in preset palettes or define your own custom accessible color palette, for example.

See the accessibility panel knowledge base article for examples and more information on how to create and register a palette.

Examples

// Load an external CSS file containing color palette styling
var initializationOptions = {
    "config": {
        "configuration": {
            "contrast": "https://my.path.to.color.css"
        }
    }
};

// Manually provide a custom color palette
var initializationOptions = {
    "config": {
        "configuration": {
            "contrast": {
                "active": "Example_1",
                "custom_palettes": [{
                        "name": "Example_1",
                        "colors": {
                            "content-background": "#ffffff",
                            "content-color": "#000000",
                            "content-color-hover": "#cccccc"
                        }
                    },
                    {
                        "name": "Example_2",
                        "colors": {
                            // ...
                        }
                    },
                    // ...
                ]
            }
        }
    }
};

Values

Attribute path config.configuration.contrast

• Type object

  • active string

    Contains the name of a palette to use as the active palette. This name will be used to find the palette settings inside the custom_palettes array.

  • custom_palettes array[AccessibilityPalette]

    An array of accessibility palette objects that defines multiple custom palettes. See the "Type definitions" section on this page for the AccessibilityPalette structure.

• Type string

  A valid URL to a custom CSS file containing the accessibility palettes. This accessibility scheme will be loaded by default.

Type definitions

• AccessibilityPalette object

  • name string

    A name that describes the palette.

  • colors object

    The colors object sets the colors of various elements in the assessment player. These attribute values can be defined as a string with either a hexadecimal color or RGB color code value.

    • button-background
    • button-background-highlight
    • button-background-highlight-hover
    • button-background-hover
    • button-color
    • button-color-highlight
    • content-background
    • content-background-correct
    • content-background-highlight
    • content-background-highlight-hover
    • content-background-incorrect
    • content-background-selected
    • content-border
    • content-border-correct
    • content-border-focus
    • content-border-incorrect
    • content-color
    • content-color-active
    • content-color-hover
    • content-color-link
    • content-color-link-hover
    • content-color-link-visited
    • content-color-neutral
    • content-color-subheading
    • content-color-toolbar
    • content-color-widget
    • progress-background
    • progress-color
    • well-background
    • well-background-toolbar
    • well-background-grayed
    • well-background-highlight
    • well-background-warning
    • well-color
    • well-color-grayed
    • well-color-highlight
    • well-color-toolbar
    • well-color-warning
    • widget-background
    • widget-background-active
    • widget-background-hover

Related articles

• Displaying and Configuring the Accessibility Panel in an Assessment
• The Assess API setAccessibility() method, which allows you to select a color palette.
• The Assess API addAccessibilityPalettes() method, which allows you to define new color palettes.