Documentation
Text Coloring
Description
The Text Coloring addon allows marking / selecting relevant parts of 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.
Properties
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 which can be used to mark words.
|
||||||||
| 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. | ||||||||
| Mode | 'Mark phrases to select' or 'All selectable' |
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. |
| text-coloring-show-answers-[color-id] | This class will be given for selectable words with defined color in show answers mode. If 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 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.