Documentation

Example code

 function AddonSample_create() {
    var presenter = function () {};
    var clickCounter = 0;

    function displayText() {
        var textToDisplay = presenter.model['Text to be displayed'],
            isTextColored = presenter.model['Color text'] === 'True',
            $textContainer = presenter.$view.find('.some-text-container');

        $textContainer.text(textToDisplay);
        if (isTextColored) {
            $textContainer.css('color', 'red');
        }
    }

    presenter.run = function(view, model) {
        presenter.$view = $(view);
        presenter.model = model;

        var $button = $(view).find('button'),
            $counter = $(view).find('.sample-addon-clicks-counter');

        $button.click(function (event) {
            event.preventDefault();
            clickCounter++;
            $counter.text('Count: ' + clickCounter);
        });

        displayText();
    };

    presenter.createPreview = function(view, model) {
        presenter.$view = $(view);
        presenter.model = model;

        $(view).find('button').click(function (event) {
            event.preventDefault();
        });

        displayText();
        presenter.$view.find('.sample-question-select option[value=green]').attr('selected', 'selected')
    };

    presenter.getState = function () {
        return JSON.stringify({
            clickCounter: clickCounter
        });
    };

    presenter.setState = function (state) {
        var parsedState = JSON.parse(state),
            $counter = presenter.$view.find('.sample-addon-clicks-counter');

        clickCounter = parsedState.clickCounter;
        $counter.text('Count: ' + clickCounter);
    };

    presenter.getMaxScore = function () {
        return 1;
    };

    presenter.getScore = function () {
        var greenOption = presenter.$view.find('.sample-question-select option[value=green]'),
            isGreenOptionSelected = greenOption.attr('selected');

        return isGreenOptionSelected ? 1 : 0;
    };

    presenter.getErrorCount = function () {
        return presenter.getMaxScore() - presenter.getScore();
    };

    presenter.setShowErrorsMode = function () {
        var $select = presenter.$view.find('.sample-question-select');
        $select.attr('disabled', 'disabled');

        if (presenter.getScore() === presenter.getMaxScore()) {
            $select.css('border', '2px solid green');
        } else {
            $select.css('border', '2px solid red');
        }
    };

    presenter.setWorkMode = function () {
        var $select = presenter.$view.find('.sample-question-select');

        $select.removeAttr('disabled');
        $select.css('border', 'none');
    };

    presenter.reset = function () {
        presenter.setWorkMode();
    };

    return presenter;
}