Documentation
Text Coloring
Description
The Text Coloring module 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 | ||||||||
| Is Not Activity | With this option marked, the score and errors will not be returned by the module. | ||||||||
| 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 marked, then the Gradual Show Answer module displays the complete solution after using this button only once. | ||||||||
| 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 the 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. | ||||||||
| Printable | Allows to choose if the module should be included in the printout. | ||||||||
| 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 Text To Speech mode. Speech texts are always read using the content's default language. | ||||||||
| Lang attribute | This property allows defining the language for this module (different than the language of the lesson). |
Configuration
Each text element must be marked with the relevant keywords \color{correct_color_id}{word}.
In the 'Mark phrases to select' mode, there is an additional relevant keyword \intruder{phrase}.
With this keyword, it is possible to mark phrases that should not be colored. Coloring them is counted as an error.
Supported commands
| Command name | Params | Description |
|---|---|---|
| setColor | Color id | Sets an active color for coloring selected words. |
| setEraserMode | Set the erasing mode. | |
| hide | Hides the module if it is visible. | |
| show | Shows the module if it is hidden. |
Events
The Text Coloring module sends the ValueChanged type events to the Event Bus when a user selects the word.
| Field name | Description |
|---|---|
| Source | Id of the source module. |
| 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 the 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. The position values are left, top, bottom, and 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 module.