Documentation
Text Coloring
Description
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.
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 that 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 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. |
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 – 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.
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 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.