Documentation

Slider

Description

This addon allows users to add a slider functionality to their exercises. You can either slide image from one position to another or mouse click on the position you wish to move an image (slider) to.

Properties

Property name Description
ImageElement An image which serves as a slider
Orientation Addon can be used in either horizontal ("Landscape") and vertical ("Portrait") orientation
Stepwise If you want to set number of steps of slider then this option must be checked
StepsCount Number of steps in Stepwise mode
Initial Initial slider position (from 1 to StepsCount)
onStepChange Event triggered on step change
Block in error checking mode If this option is selected, addon will not respond to touch/mouse gestures and commands in error checking mode
Continuous events If this option is selected, events will be sent in a continuous way.
Continuous events steps

    This option is available if the "Continuous events" property is selected.

  • Stick: slider will snap to steps.
  • Smooth: slider will not snap to steps.

Supported commands

Command name Params Description
nextStep* --- Move slider to next position if possible
previousStep* --- Move slider to previous position if possible
moveToFirst* --- Move slider to first position
moveToLast* --- Move slider to last position
moveTo* step Move slider to given position (from 1 to StepsCount)
moveToInitialStep* --- Move slider to initial position
getCurrentStep --- Returns current slider position (from 1 to StepsCount). Returned value is a string!
hide --- Hides addon
show --- Shows addon

Commands marked with '*' have additional parameter which can disable sending events to Event Bus (helpful when in Advanced Connector user wants to manipulate one Slider from another). To disable sending events just add 'false' parameter (with single quotes characters) like in example below.

EVENTSTART
Source:Text2
SCRIPTSTART
    var sliderModule = presenter.playerController.getModule('Slider1');
    sliderModule.moveTo(2, 'false');
    sliderModule.show();
SCRIPTEND
EVENTEND

Advanced Connector integration

Each command supported by the Slider addon can be used in the Advanced Connector addon's scripts. The below example shows how to display the hidden module and move it to step 2.

EVENTSTART
Source:Text2
SCRIPTSTART
    var sliderModule = presenter.playerController.getModule('Slider1');
    sliderModule.moveTo(2);
    sliderModule.show();
SCRIPTEND
EVENTEND

Events

The Slider addon sends ValueChanged type events to Event Bus when a step is changed. On every step change the addon sends two events - one for leaving a current step and other for entering a new one.

Field name Description
Item Step number
Value 1 for entering step, 0 for leaving it
Score N/A

CSS classes

Class name Description
slider-wrapper DIV surrounding the slider element. Slider element is a direct child of this element
disabled Additional class for 'slider-wrapper' element added in Error Checking mode when Slider is disabled (via adequate property in Model)
slider-element-image Image elements which serve as a slider
slider-element-image-mouse-hover Image elements which serves as a slider with mouse over it
slider-element-image-mouse-click Image elements which serves as a slider when a mouse click is on it

Demo presentation

Demo presentation contains examples on how to use the Slider addon and integrate it with other addons, i.e. Image Viewer or Video.