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