× Announcement: . Read more.

Wiki pages

Text Coloring

Description

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

Properties

Property Description
Colors A list of colors which 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 eraser 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.

Configuration

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.

Events

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 – deselecting.
Score It's 1 for the correct selection, 0 for 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.

Scoring

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.

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 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.