Text Coloring


The Text Coloring addon allows marking / selecting relevant parts of the text with chosen colors.

You can work in one of two modes:

  • 'All selectable' (default), where all words are selectable.
  • 'Mark phrases to select', where only some phrases are selectable. Unlike in 'All selectable' however, a phrase may be longer than a single word.


The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.

Property Description
Colors A list of colors that can be used to mark words.
Property name Description
ID Color ID which will be used to mark words.
Color RGB Hex Color format, e.g. #FFAA00.
Description The text to be shown in the color box.
Text Input text
Buttons position Sets the buttons' position in relation to the text. Possible positions: left, top, right, bottom.
Hide Color Buttons Hides color buttons.
Show all answers in gradual show answers mode If this property is selected the Gradual Show Answer button will show correct answers for the entire addon.
Show set eraser mode button Shows the eraser button.
Eraser button text Sets the eraser button text. If no text is provided, the default value: "Eraser Mode" is displayed.
Mode 'Mark phrases to select' or 'All selectable'.
Count Errors If checked, the module will not send an event to AllOK and will not return true when the .isAllOK() command is called on it if all correct answers and at least one wrong answer are checked.
Legend title The legend is only visible in the print preview.
Speech texts Sets the values of speech texts - predefined phrases providing additional context while using the module in the TTS mode. Speech texts are always read using the content's default language.
Lang attribute Allows you to set the language used to read the points descriptions via the TTS module.


Each text element has to be marked with the relevant keywords \color{correct_color_id}{word}.

Supported commands

Command name Params Description
setColor Color id Sets an active color for coloring selected words.
setEraserMode Set the erasing mode.
show Shows the addon.
hide Hides the addon.


The Text Coloring addon sends ValueChanged type events to Event Bus when a user selects the word.

Field name Description
Source Id of the source addon.
Item Index of a word in a text, all words are indexed starting from 1.
Value The Value is 1 for selecting, 0 – for deselecting.
Score It's 1 for the correct selection, 0 for the wrong.

AllOk Event

This event contains the following fields

Field name Description
Source module id
Item value: "all"
Value N/A
Score N/A

Show Answers

This module is fully compatible with Show Answers module and displays correct answers when an adequate event is sent.


Property Description
maxScore maximum score is equal to the number of phrases marked
score score is equal to the number of phrases selected correctly
errorCount errorCount is equal to the number of phrases selected incorrectly

CSS classes

Class name Description
text-coloring-active-button The class for an active button.
text-coloring-token-correct-marking The class for correctly selected words.
text-coloring-token-wrong-marking The class for incorrectly selected words.
text-coloring-colored-with-[color-id] The class for words selected with the color of a defined id. Coloring a word with the "red" color id will add the class: "text-coloring-colored-with-red"
text-coloring-color-button The class for buttons switching to a defined color.
text-coloring-eraser-button The class for a button switching to the eraser mode.
text-coloring-show-answers-[color-id] This class will be given for selectable words with defined color in show answers mode. If the word should be colored with "green" color id, it will be given "text-coloring-show-answers-green".

Position CSS classes

Text Coloring depending on the value selected in the property "position" adds different CSS classes for HTML elements. Position values are: left, top, bottom, right

Class name Description
text-coloring-main-container-[position value]-position The class for the main container. The property "position" with the value "top" will add the class: text-coloring-main-container-top-position
text-coloring-colors-buttons-container-[position value]-position The class for the color buttons container. The property "position" with the value "top" will add the class: text-coloring-colors-buttons-container-top-position
text-coloring-eraser-button-container-[position value]-position The class for the eraser mode button container. The property "position" with the value "top" will add the class: text-coloring-eraser-button-container-top-position
text-coloring-buttons-container-[position value]-position The Class for the buttons container. The property "position" with the value "top" will add the class: text-coloring-buttons-container-top-position
text-coloring-tokens-container-[position value]-position The class for the words container. The property "position" with the value "top" will add the class: text-coloring-tokens-container-top-position

Demo presentation

Demo presentation contains examples of how to use the Text Coloring addon.