Documentation
Double State Button
Description
The Double State Button module allows users to perform different actions in presentations, such as changing other modules' states when the button is selected/deselected.
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 name | Description |
|---|---|
| Text | Text displayed while not in the selected state. |
| Image | Image displayed while not in the selected state.
This property allows online resources. Find out more » |
| Image alternative text | This property enables defining a text description that will be added to the image. |
| On selected | Event that should be triggered while the user presses the button and changes its state to selected. The event is not triggered with the select() command. |
| Text selected | Text displayed while in the selected state. |
| Image selected | Image displayed while in the selected state.
This property allows online resources. Find out more » |
| Image selected alternative text | This property enables defining a text description that will be added to the image in the selected state. |
| On deselected | Event that should be triggered while the user presses the button and changes its state to deselected. The event isn't triggered with the deselect() command. |
| Is selected | With this option checked, the module is selected at the startup. |
| Disable | Allows disabling the module so that the user is not able to interact with it. |
| Do not block in check mode | If this option is selected, the module is blocked in the error checking mode. |
| Lang attribute | This property allows defining the language for this module (different than the language of the lesson). |
| Render SVG as HTML | This option allows to represent the loaded SVG files as an HTML tag. | Omit text in TTS | After selecting this option, TTS will not read what is in the Text and Text selected fields. However, it will still read the content of the Image alternative text and Image selected alternative text. | Speech texts | List of speech texts: Selected, Deselected, Disabled. This text will be read by the Text to Speech module after the user performs a certain action. The list also includes the "Do not read the Speech texts" checkbox. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| select | --- | Change button's state to selected if not in this state already. |
| deselect | --- | Change button's state to deselected if not in this state already. |
| show | --- | Shows the module if it is hidden. |
| hide | --- | Hides the module if it is visible. |
| enable | --- | Changes the state of the module to enable. |
| disable | --- | Changes the state of the module to disable. |
| isSelected | --- | Returns "true" if the module is selected, otherwise returns "false". |
Advanced Connector integration
Each command supported by the Double State Button module can be used in the Advanced Connector module's scripts. The examples below show how to enable the button when the True/False module sends an event about the correct answer and how to disable it when the user selects the incorrect answer.
EVENTSTART
Source:TrueFalse1
Score:1
SCRIPTSTART
var doubleButton = presenter.playerController.getModule('DSB1');
doubleButton.enable();
SCRIPTEND
EVENTEND
EVENTSTART
Source:TrueFalse1
Score:0
SCRIPTSTART
var doubleButton = presenter.playerController.getModule('DSB1');
doubleButton.disable();
SCRIPTEND
EVENTEND
Events
The Double State Button module sends ValueChanged type events to the Event Bus when the user selects or deselects it.
| Field name | Description |
|---|---|
| Item | N/A |
| Value | 1 for selection, 0 for deselection. |
| Score | N/A |
CSS classes
| Class name | Description |
|---|---|
| doublestate-button-wrapper | DIV surrounding the image element. The image element is a direct child of this element. |
| doublestate-button-element | Element base class, when it has no other state. |
| doublestate-button-element-mouse-hover | Class for element on which mouse pointer is positioned while not in selected state. |
| doublestate-button-element-mouse-click | Class for element on which a mouse click is positioned while not in selected state. |
| doublestate-button-element-selected | Class for selected element. |
| doublestate-button-element-selected-mouse-hover | Class for element on which a mouse pointer is positioned while in selected state. |
| doublestate-button-element-selected-mouse-click | Class for element on which a mouse click is positioned while in selected state. |
| doublestate-button-image | Class for the image (IMG) element. |
| doublestate-button-text | Class for the text (SPAN) element. |
| disable | Additional class for the singlestate-button-element when the button is disabled. |
Note that the module's size is the same in every state so properties responsible for dimensions (i.e. width, height, border/margin/padding size) should be consistent across all states.
Demo presentation
Demo presentation contains showing how to use the Double State Button module.
Demo disable property contains examples of the "disable" property.