Documentation
Image Viewer
Description
The Image Viewer module allows users to embed simple animations where new frames are shown on a mouse click. It also allows users to add a sound notification to a changing frame. It supports 3 audio formats:
- MP3
- OGG
- AAC
Additionally, this module is extended with frame names. These frame names were added to integrate Image Viewer with the Image Gap module. Of course, it can serve other purposes - possibilities are limited to the author's imagination.
Note: Image Viewer supports the following graphic formats: JPG, PNG, and BMP. Vector formats are not supported.
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 |
|---|---|
| Image | An image that serves as a foundation for the animation. It should contain at least one frame.
This property allows online resources. Find out more » |
| Frames | Number of frames specifies how many pieces an image will be split into. In our example, it is 6. Remember to set only positive integer numbers here! |
| Frame size | List of possible frame size adjustments to the module's size: 'Original' (no changes), 'Keep aspect ratio', and 'Stretched'. |
| Sounds | A collection of audio files played by the module on a frame change. For each frame, you can upload 3 audio files in different formats. Sounds will be played on a frame change accordingly to the order of sounds set. If playing audio on some frame change is unwanted, it is enough not to upload relevant files and just leave this Item empty.
This property allows online resources. Find out more » |
| Frame names | A collection of frame names with corresponding frame numbers. Frame numbers must be positive integers from 1 to the frame count. |
| Alternative texts | This text will be added to the module's HTML tag. It will be read by the Text To Speech module (if used) after the user performs a certain action. |
| Is click disabled | With this option selected, the user is disabling mouse clicks on the Image Viewer module and limits the frame manipulation to commands. |
| Labels | A collection of text labels shown at a given frame. Each Label is composed of a text string, its position (counted from the slide's upper-left corner) in pixels, and a list of frames on which the Label should be displayed. Frames can be specified as comma separated list of numbers or their range (i.e. 1-3,5 will display Label on frames 1,2,3 and 5). |
| Show watermark | With this option selected, a watermark will be displayed after the module loads. Its purpose is to inform the user to click the module to start the presentation. |
| Watermark color | Watermark color in #RRGGBB format (default is #000000 - black). |
| Watermark opacity | Watermark opacity (value must be between 1 - fully visible and 0 - fully transparent, default is 1). |
| Watermark size | Watermark size counted in pixels. |
| Show frame | This option is for the editor view only! It allows you to view a specified frame (counted from 1 to Frames). |
| Animation | List of possible animations during frame change. Choice is from: 'None' (simple change), 'Linear' and 'Fading'. |
| Correct frames | List of comma-separated frames that are treated as correct answers. If nothing is set, the module acts as a static module without point calculation. |
| Do not reset | If this property is checked, then the Reset button will NOT revert any changes. |
| Random frame | If this property is checked, then random frame is displayed. |
| Initial frame | It's the number of the frame to be displayed. |
| Show frame counter | If this property is checked, frame counter is displayed. |
| Lang attribute | This property allows defining the language for this module (different than the language of the lesson). |
| Base width | Base width and base height properties are used for positioning labels. If the current dimensions of the module differ from those provided in the Base width/height property (because the module has a different size depending on the selected layout), the position of the labels will be scaled appropriately. If the properties are left empty, the position of the labels will be the same regardless of the size of the module. |
| Base height | This property is used for positioning labels. See "Base width" property for more details. |
Supported commands
| Command name | Params | Description |
|---|---|---|
| next | --- | Change displayed frame to the next one (or the first one, if the last frame was displayed). |
| previous | --- | Change displayed frame to the next one (or the last if the first frame was displayed). |
| moveToFrame | frame | Change displayed frame to the specified one. |
| moveToFrameName | frameName | Change the displayed frame to the one specified in the 'Frame names' property. |
| getCurrentFrame | --- | Returns current frame number (values from 1 to frame count). |
| hide | --- | Hides the module if it is visible. |
| show | --- | Shows the module if it is hidden. |
| markAsCorrect | --- | Marks the module as correct (adds the "correct" class to the image-viewer and removes the "wrong" class). |
| markAsWrong | --- | Marks the module as wrong (adds the "wrong" class to image-viewer and removes the "correct" class). |
| setClickDisabled | --- | Blocks the option of clicking on the module. |
| setClickEnabled | --- | Allows the user to click on the module. |
Advanced Connector integration
Each command supported by the Image Viewer module can be used in the Advanced Connector module's scripts. The below example shows how to react on the Text module gap content changes (i.e. throughout putting in it elements from Source List) and change displayed frame accordingly.
EVENTSTART
Source:Text2
Value:1
SCRIPTSTART
var imageViewer = presenter.playerController.getModule('Image_Viewer_Public1');
imageViewer.moveToFrame(1);
SCRIPTEND
EVENTEND
EVENTSTART
Source:Text2
Value:2
SCRIPTSTART
var imageViewer = presenter.playerController.getModule('Image_Viewer_Public1');
imageViewer.moveToFrame(2);
SCRIPTEND
EVENTEND
EVENTSTART
Source:Text2
Value:3
SCRIPTSTART
var imageViewer = presenter.playerController.getModule('Image_Viewer_Public1');
imageViewer.moveToFrame(3);
SCRIPTEND
EVENTEND
EVENTSTART
Source:Text2
Value:4
SCRIPTSTART
var imageViewer = presenter.playerController.getModule('Image_Viewer_Public1');
imageViewer.moveToFrame(4);
SCRIPTEND
EVENTEND
EVENTSTART
Source:Text2
Value:5
SCRIPTSTART
var imageViewer = presenter.playerController.getModule('Image_Viewer_Public1');
imageViewer.moveToFrame(5);
SCRIPTEND
EVENTEND
EVENTSTART
Source:Text2
Value:6
SCRIPTSTART
var imageViewer = presenter.playerController.getModule('Image_Viewer_Public1');
imageViewer.moveToFrame(6);
SCRIPTEND
EVENTEND
Scoring
The Image Viewer module allows creating activities. To set the module in the exercise mode, set the 'Correct frames' property. If the module is not in the exercise mode, all the below methods return 0!
| Property | Description |
|---|---|
| maxScore | The maximum score is 1 point. |
| score | 1 if the user selects one of the specified correct frames, otherwise 0. |
| errorCount | 0 if the user selects one of the specified correct frames, otherwise 1. |
Events
The Image Viewer module sends the ValueChanged type of events to the Event Bus when the frame is changed.
| Field name | Description |
|---|---|
| Item | Current frame number (1 to n). |
| Value | N/A |
| Score | N/A |
CSS classes
| Class name | Description |
|---|---|
| image-viewer | DIV surrounding the image element. The image element is a direct child of this element. |
| correct | Additional class for image-viewer element for correctly selected frame in error checking mode. |
| wrong | Additional class for image-viewer element for incorrectly selected frame in error checking mode. |
| image-viewer-helper | DIV element, child of image-viewer element, adding more styling possibilities. |
| image-viewer-label | Labels are span elements that are shown when the animation isn't playing. Do not change/set position attributes for these elements! |
| image-viewer-loading-image | Loading image showed while loading resources. The image is placed in the slide's center. The default width and height are 50px. Do not change/set position attributes for these elements! |
| image-viewer-watermark | DIV surrounding watermark canvas element. |
| frame-counter-wrapper | DIV element, parent of .frame-counter element. |
| frame-counter | DIV element containing all dot elements. |
| dot | DIV element representing page. |
| current | additional class for .dot element representing current frame dot. |
The module accepts all CSS selectors and modifiers, i.e., if the user would like to specify a different appearance for the image on mouse hover, a CSS declaration could look like this:
.Image_Viewer_Public_custom {}
.Image_Viewer_Public_custom .image-viewer {
border: 2px solid black;
}
.Image_Viewer_Public_custom .image-viewer:hover {
border: 2px solid red;
}
This declaration will result in a red border on mouse hover over the module.
Demo presentation
Demo presentation contains examples of how to use the Image Viewer module.