Documentation
Slider
Description
This module allows adding a slider to exercises. The users either slide the image from one position to another or mouse-click on the position they wish to move an image (slider) to.
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 |
|---|---|
| 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. |
| Stepwise mode bar always visible | If this option is selected, the "Stepwise" bar will be visible in editor's mode and normal run. If this option is deselected, bar will be visible only in editor's mode. |
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 |
| slider-stepwise-bar | Class for the bar represented by canvas element when the Stepwise property is selected |
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.