Documentation
Double State Button
Description
Double state button allows users to perform different actions in presentations, such as changing other addons' 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 selected state. |
| Text selected | Text displayed while in selected state. |
| Image | Image displayed while not in selected state.
This property allows online resources. Find out more » |
| Image selected | Image displayed while in selected state.
This property allows online resources. Find out more » |
| onSelected | Event which should be triggered while a user presses the button and changes its state to selected. Event isn't triggered with select() command |
| onDeselected | Event which should be triggered while a user presses the button and changes its state to deselected. Event isn't triggered with select() command |
| isSelected | With this option checked, the addon is selected at startup |
| Disable | Allows disabling the module so that the user is not able to interact with it. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| select | --- | Change button's state to selected if not in this state already |
| deselect | --- | Change button state to deselected if not in this state already |
| show | --- | Shows the button |
| hide | --- | Hides the button |
| enable | --- | Changing state to enable |
| disable | --- | Changing state to disable |
| isSelected | --- | Returns true if addon is selected, otherwise returns false |
Advanced Connector integration
Each command supported by the Double State Button addon can be used in the Advanced Connector addon's scripts. The below examples show how to enable the button when True/False addon will send event about correct answer and how to disable it when event means that a 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
Double State Button addon sends ValueChanged type events to Event Bus when either 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. 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 image (IMG) element |
| doublestate-button-text | Class for text (SPAN) element |
| disable | Additional class for singlestate-button-element when the button is disabled. |
Note that the addon'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 examples on how to use the Double State Button addon.
Demo disable property contains examples of the "disable" property.