Login Register

Documentation

Addon Presenter

Presenter

Minimal presenter code:

function AddonDemo_create() {

    var presenter = function() {}

    presenter.run = function(view, model) {}

    return presenter;
}

Required functions:

Function Description
run(view, model) Initialize the addon when a module is loaded.
  • view - DOM reference with addon view code loaded.
  • model - Array with property values.

Editor functions:

Function Description
createPreview(view, model) Used by the presentation editor to create the preview in the editor's mode.
  • view - DOM reference with addon's view code loaded.
  • model - Array with property values.

Optional functions:

Function Description
executeCommand(commandName, params) Execute command with given *name* and *params*.
setShowErrorsMode() Addon should mark all errors and disable all interaction.
setWorkMode() Return to the normal mode.
reset() Return module to the initial state.
getErrorCount() Return current number of errors.
getMaxScore() Get the maximum score for this module.
getScore() Get the current score.
getState() Return state (as String) that should be preserved while switching between the pages.
setState(state) Return to the previously saved state.
preDestroy() This method is invoked by the player immediately before the page is closed (due to a lesson page change). It should only be used to send the PreDestroyed event, such as in cases where the user has not attempted to interact with the addon. Please refer to Addon-Events for further details.

Restricted functions

Function Description
getView() Implementation provided by the player. Returns this module's DOM element that can be wrapped in a jQuery object. Overriding this function may cause critical errors.

Media addons

While creating a media addon, it's necessary to implement the function dedicated to listening to the dropdownClicked event needed for proper communication between the Text module (dropdown gap) and Media modules (such as Audio and Video) on mobile devices.
Therefore, after clicking (onClick event) on a dropdown gap, you can play a Media module by selecting (onChange event) the applicable option from the dropdown gap (onChange not triggering playing).
For example, in the MultiAudio module such a function is presented below: 
presenter.onEventReceived = function (eventData) {
    if (eventData.value == 'dropdownClicked') {
        this.audio.load();
    }
}

Player Controller

If you want to access player functions from the addon, you must implement the following function:

presenter.setPlayerController = function(controller){}

The object controller is type Player Controller

Performance optimization

Some custom addons may require adding a method to clear event listeners or timeouts when the custom addon is removed from the DOM (e.g. when changing the page in a lesson). This is done to clean the browser's memory for performance optimization reasons.

This can be done by adding the following code to the presenter.run method:

MutationObserverService.createDestroyObserver(presenter.destroy);
MutationObserverService.setObserver();

Then it is necessary to make sure that the custom addon has the presenter.destroy() method defined:

presenter.destroy = function (event) {
    /* Code erasing event listeners and timeouts */
};

If an addon contains a timeout that is assigned to e.g. a presenter.timeOut property, the code to delete the timeout would look as follows:

presenter.destroy = function (event) {
    clearTimeout(presenter.timeOut);
};

Important note:
Previously these optimizations were performed with the use of 'DOMNodeRemoved' browser event which is now deprecated in browsers - it is necessary to replace all the code referring to that event to prevent breakdowns.