main.js

(function (requirejs, require, define) {
define(
    ['js/capa/drag_and_drop/state',
     'js/capa/drag_and_drop/config_parser', 'js/capa/drag_and_drop/container',
     'js/capa/drag_and_drop/base_image', 'js/capa/drag_and_drop/scroller',
     'js/capa/drag_and_drop/draggables', 'js/capa/drag_and_drop/targets',
     'js/capa/drag_and_drop/update_input'],
    function (State, configParser, Container, BaseImage, Scroller, Draggables, Targets, updateInput) {
    return Main;

    function Main() {

        // https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/every
        //
        // Array.prototype.every is a recent addition to the ECMA-262 standard; as such it may not be present in
        // other implementations of the standard.
        if (!Array.prototype.every) {
            Array.prototype.every = function(fun /*, thisp */) {
                var thisp, t, len, i;

                if (this == null) {
                    throw new TypeError();
                }

                t = Object(this);
                len = t.length >>> 0;
                if (typeof fun != 'function') {
                    throw new TypeError();
                }

                thisp = arguments[1];

                for (i = 0; i < len; i++) {
                    if (i in t && !fun.call(thisp, t[i], i, t)) {
                        return false;
                    }
                }

                return true;
            };
        }

        $('.drag_and_drop_problem_div').each(processProblem);
    }

    // $(value) - get the element of the entire problem
    function processProblem(index, value) {
        var problemId, config, state;

        if ($(value).attr('data-problem-processed') === 'true') {
            // This problem was already processed by us before, so we will
            // skip it.

            return;
        }
        $(value).attr('data-problem-processed', 'true');

        problemId = $(value).attr('data-plain-id');
        if (typeof problemId !== 'string') {
            console.log('ERROR: Could not find the ID of the problem DOM element.');

            return;
        }

        try {
            config = JSON.parse($('#drag_and_drop_json_' + problemId).html());
        } catch (err) {
            console.log('ERROR: Could not parse the JSON configuration options.');
            console.log('Error message: "' + err.message + '".');

            return;
        }

        state = State(problemId);

        if (configParser(state, config) !== true) {
            console.log('ERROR: Could not make sense of the JSON configuration options.');

            return;
        }

        Container(state);
        BaseImage(state);

        (function addContent() {
            if (state.baseImageLoaded !== true) {
                setTimeout(addContent, 50);

                return;
            }

            Targets.initializeBaseTargets(state);
            Scroller(state);
            Draggables.init(state);

            state.updateArrowOpacity();

            // Update the input element, checking first that it is not filled with
            // an answer from the server.
            if (updateInput.check(state) === false) {
                updateInput.update(state);
            }
        }());
    }
}); // End-of: define(
}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define) {