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.
Render SVG as HTML This option allows to represent the loaded SVG files as an HTML tag.

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.