Merge pull request #1203 from MITx/feature/alex/gst-mitx

Feature/alex/gst mitx

common/lib/xmodule/setup.py

@@ -36,6 +36,7 @@ setup(
             "videodev = xmodule.backcompat_module:TranslateCustomTagDescriptor",
             "videosequence = xmodule.seq_module:SequenceDescriptor",
             "discussion = xmodule.discussion_module:DiscussionDescriptor",
+            "graphical_slider_tool = xmodule.gst_module:GraphicalSliderToolDescriptor",
         ]
     }
 )

common/lib/xmodule/xmodule/gst_module.py

+"""
+Graphical slider tool module is ungraded xmodule used by students to
+understand functional dependencies.
+"""
+
+import json
+import logging
+from lxml import etree
+from lxml import html
+import xmltodict
+
+from xmodule.mako_module import MakoModuleDescriptor
+from xmodule.xml_module import XmlDescriptor
+from xmodule.x_module import XModule
+from xmodule.stringify import stringify_children
+from pkg_resources import resource_string
+
+
+log = logging.getLogger(__name__)
+
+
+class GraphicalSliderToolModule(XModule):
+    ''' Graphical-Slider-Tool Module
+    '''
+
+    js = {
+      'js': [
+        # 3rd party libraries used by graphic slider tool.
+        # TODO - where to store them - outside xmodule?
+        resource_string(__name__, 'js/src/graphical_slider_tool/jstat-1.0.0.min.js'),
+
+        resource_string(__name__, 'js/src/graphical_slider_tool/gst_main.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/state.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/logme.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/general_methods.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/sliders.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/inputs.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/graph.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/el_output.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/g_label_el_output.js'),
+
+        resource_string(__name__, 'js/src/graphical_slider_tool/gst.js')
+      ]
+    }
+    js_module_name = "GraphicalSliderTool"
+
+    def __init__(self, system, location, definition, descriptor, instance_state=None,
+                 shared_state=None, **kwargs):
+        """
+        For XML file format please look at documentation. TODO - receive
+        information where to store XML documentation.
+        """
+        XModule.__init__(self, system, location, definition, descriptor,
+                         instance_state, shared_state, **kwargs)
+
+    def get_html(self):
+        """ Renders parameters to template. """
+
+        # these 3 will be used in class methods
+        self.html_id = self.location.html_id()
+        self.html_class = self.location.category
+        self.configuration_json = self.build_configuration_json()
+        params = {
+                  'gst_html': self.substitute_controls(self.definition['render']),
+                  'element_id': self.html_id,
+                  'element_class': self.html_class,
+                  'configuration_json': self.configuration_json
+                  }
+        self.content = self.system.render_template(
+                        'graphical_slider_tool.html', params)
+        return self.content
+
+    def substitute_controls(self, html_string):
+        """ Substitutes control elements (slider, textbox and plot) in
+        html_string with their divs. Html_string is content of <render> tag
+        inside <graphical_slider_tool> tag. Documentation on how information in
+        <render> tag is organized and processed is located in:
+        mitx/docs/build/html/graphical_slider_tool.html.
+
+        Args:
+            html_string: content of <render> tag, with controls as xml tags,
+                         e.g. <slider var="a"/>.
+
+        Returns:
+                html_string with control tags replaced by proper divs
+                (<slider var="a"/> -> <div class="....slider" > </div>)
+        """
+
+        xml = html.fromstring(html_string)
+
+        #substitute plot, if presented
+        plot_div = '<div class="{element_class}_plot" id="{element_id}_plot" \
+                    style="{style}"></div>'
+        plot_el = xml.xpath('//plot')
+        if plot_el:
+            plot_el = plot_el[0]
+            plot_el.getparent().replace(plot_el, html.fromstring(
+                                plot_div.format(element_class=self.html_class,
+                                               element_id=self.html_id,
+                                               style=plot_el.get('style', ""))))
+
+        #substitute sliders
+        slider_div = '<div class="{element_class}_slider" \
+                                   id="{element_id}_slider_{var}" \
+                                   data-var="{var}" \
+                                   style="{style}">\
+                     </div>'
+        slider_els = xml.xpath('//slider')
+        for slider_el in slider_els:
+            slider_el.getparent().replace(slider_el, html.fromstring(
+                                slider_div.format(element_class=self.html_class,
+                                    element_id=self.html_id,
+                                    var=slider_el.get('var', ""),
+                                    style=slider_el.get('style', ""))))
+
+        # substitute inputs aka textboxes
+        input_div = '<input class="{element_class}_input" \
+                                  id="{element_id}_input_{var}_{input_index}" \
+                                   data-var="{var}" style="{style}"/>'
+        input_els = xml.xpath('//textbox')
+        for input_index, input_el in enumerate(input_els):
+            input_el.getparent().replace(input_el, html.fromstring(
+                                input_div.format(element_class=self.html_class,
+                                        element_id=self.html_id,
+                                        var=input_el.get('var', ""),
+                                        style=input_el.get('style', ""),
+                                        input_index=input_index)))
+
+        return html.tostring(xml)
+
+    def build_configuration_json(self):
+        """Creates json element from xml element (with aim to transfer later
+         directly to javascript via hidden field in template). Steps:
+
+            1. Convert xml tree to python dict.
+
+            2. Dump dict to json.
+
+        """
+        # <root> added for interface compatibility with xmltodict.parse
+        # class added for javascript's part purposes
+        return json.dumps(xmltodict.parse('<root class="' + self.html_class +
+                '">' + self.definition['configuration'] + '</root>'))
+
+
+class GraphicalSliderToolDescriptor(MakoModuleDescriptor, XmlDescriptor):
+    module_class = GraphicalSliderToolModule
+    template_dir_name = 'graphical_slider_tool'
+
+    @classmethod
+    def definition_from_xml(cls, xml_object, system):
+        """
+        Pull out the data into dictionary.
+
+        Args:
+            xml_object: xml from file.
+
+        Returns:
+            dict
+        """
+        # check for presense of required tags in xml
+        expected_children_level_0 = ['render', 'configuration']
+        for child in expected_children_level_0:
+            if len(xml_object.xpath(child)) != 1:
+                raise ValueError("Graphical Slider Tool definition must include \
+                    exactly one '{0}' tag".format(child))
+
+        expected_children_level_1 = ['functions']
+        for child in expected_children_level_1:
+            if len(xml_object.xpath('configuration')[0].xpath(child)) != 1:
+                raise ValueError("Graphical Slider Tool definition must include \
+                    exactly one '{0}' tag".format(child))
+        # finished
+
+        def parse(k):
+            """Assumes that xml_object has child k"""
+            return stringify_children(xml_object.xpath(k)[0])
+        return {
+                    'render': parse('render'),
+                    'configuration': parse('configuration')
+                }
+
+    def definition_to_xml(self, resource_fs):
+        '''Return an xml element representing this definition.'''
+        xml_object = etree.Element('graphical_slider_tool')
+
+        def add_child(k):
+            child_str = '<{tag}>{body}</{tag}>'.format(tag=k, body=self.definition[k])
+            child_node = etree.fromstring(child_str)
+            xml_object.append(child_node)
+
+        for child in ['render', 'configuration']:
+            add_child(child)
+
+        return xml_object

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+(function (requirejs, require, define) {
+
+define('ElOutput', ['logme'], function (logme) {
+
+    return ElOutput;
+
+    function ElOutput(config, state) {
+
+        if ($.isPlainObject(config.functions.function)) {
+            processFuncObj(config.functions.function);
+        } else if ($.isArray(config.functions.function)) {
+            (function (c1) {
+                while (c1 < config.functions.function.length) {
+                    if ($.isPlainObject(config.functions.function[c1])) {
+                        processFuncObj(config.functions.function[c1]);
+                    }
+
+                    c1 += 1;
+                }
+            }(0));
+        }
+
+        return;
+
+        function processFuncObj(obj) {
+            var paramNames, funcString, func, el, disableAutoReturn, updateOnEvent;
+
+            // We are only interested in functions that are meant for output to an
+            // element.
+            if (
+                (typeof obj['@output'] !== 'string') ||
+                ((obj['@output'].toLowerCase() !== 'element') && (obj['@output'].toLowerCase() !== 'none'))
+            ) {
+                return;
+            }
+
+            if (typeof obj['@el_id'] !== 'string') {
+                logme('ERROR: You specified "output" as "element", but did not spify "el_id".');
+
+                return;
+            }
+
+            if (typeof obj['#text'] !== 'string') {
+                logme('ERROR: Function body is not defined.');
+
+                return;
+            }
+
+            updateOnEvent = 'slide';
+            if (
+                (obj.hasOwnProperty('@update_on') === true) &&
+                (typeof obj['@update_on'] === 'string') &&
+                ((obj['@update_on'].toLowerCase() === 'slide') || (obj['@update_on'].toLowerCase() === 'change'))
+            ) {
+                updateOnEvent = obj['@update_on'].toLowerCase();
+            }
+
+            disableAutoReturn = obj['@disable_auto_return'];
+
+            funcString = obj['#text'];
+
+            if (
+                (disableAutoReturn === undefined) ||
+                    (
+                        (typeof disableAutoReturn === 'string') &&
+                        (disableAutoReturn.toLowerCase() !== 'true')
+                    )
+            ) {
+                if (funcString.search(/return/i) === -1) {
+                    funcString = 'return ' + funcString;
+                }
+            } else {
+                if (funcString.search(/return/i) === -1) {
+                    logme(
+                        'ERROR: You have specified a JavaScript ' +
+                        'function without a "return" statemnt. Your ' +
+                        'function will return "undefined" by default.'
+                    );
+                }
+            }
+
+            // Make sure that all HTML entities are converted to their proper
+            // ASCII text equivalents.
+            funcString = $('<div>').html(funcString).text();
+
+            paramNames = state.getAllParameterNames();
+            paramNames.push(funcString);
+
+            try {
+                func = Function.apply(null, paramNames);
+            } catch (err) {
+                logme(
+                    'ERROR: The function body "' +
+                        funcString +
+                        '" was not converted by the Function constructor.'
+                );
+                logme('Error message: "' + err.message + '".');
+
+                $('#' + gstId).html('<div style="color: red;">' + 'ERROR IN XML: Could not create a function from string "' + funcString + '".' + '</div>');
+                $('#' + gstId).append('<div style="color: red;">' + 'Error message: "' + err.message + '".' + '</div>');
+
+                paramNames.pop();
+
+                return;
+            }
+
+            paramNames.pop();
+
+            if (obj['@output'].toLowerCase() !== 'none') {
+                el = $('#' + obj['@el_id']);
+
+                if (el.length !== 1) {
+                    logme(
+                        'ERROR: DOM element with ID "' + obj['@el_id'] + '" ' +
+                        'not found. Dynamic element not created.'
+                    );
+
+                    return;
+                }
+
+                el.html(func.apply(window, state.getAllParameterValues()));
+            } else {
+                el = null;
+                func.apply(window, state.getAllParameterValues());
+            }
+
+            state.addDynamicEl(el, func, obj['@el_id'], updateOnEvent);
+        }
+
+    }
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/g_label_el_output.js

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+(function (requirejs, require, define) {
+
+define('GLabelElOutput', ['logme'], function (logme) {
+    return GLabelElOutput;
+
+    function GLabelElOutput(config, state) {
+        if ($.isPlainObject(config.functions.function)) {
+            processFuncObj(config.functions.function);
+        } else if ($.isArray(config.functions.function)) {
+            (function (c1) {
+                while (c1 < config.functions.function.length) {
+                    if ($.isPlainObject(config.functions.function[c1])) {
+                        processFuncObj(config.functions.function[c1]);
+                    }
+
+                    c1 += 1;
+                }
+            }(0));
+        }
+
+        return;
+
+        function processFuncObj(obj) {
+            var paramNames, funcString, func, disableAutoReturn;
+
+            // We are only interested in functions that are meant for output to an
+            // element.
+            if (
+                (typeof obj['@output'] !== 'string') ||
+                (obj['@output'].toLowerCase() !== 'plot_label')
+            ) {
+                return;
+            }
+
+            if (typeof obj['@el_id'] !== 'string') {
+                logme('ERROR: You specified "output" as "plot_label", but did not spify "el_id".');
+
+                return;
+            }
+
+            if (typeof obj['#text'] !== 'string') {
+                logme('ERROR: Function body is not defined.');
+
+                return;
+            }
+
+            disableAutoReturn = obj['@disable_auto_return'];
+
+            funcString = obj['#text'];
+
+            if (
+                (disableAutoReturn === undefined) ||
+                    (
+                        (typeof disableAutoReturn === 'string') &&
+                        (disableAutoReturn.toLowerCase() !== 'true')
+                    )
+            ) {
+                if (funcString.search(/return/i) === -1) {
+                    funcString = 'return ' + funcString;
+                }
+            } else {
+                if (funcString.search(/return/i) === -1) {
+                    logme(
+                        'ERROR: You have specified a JavaScript ' +
+                        'function without a "return" statemnt. Your ' +
+                        'function will return "undefined" by default.'
+                    );
+                }
+            }
+
+            // Make sure that all HTML entities are converted to their proper
+            // ASCII text equivalents.
+            funcString = $('<div>').html(funcString).text();
+
+            paramNames = state.getAllParameterNames();
+            paramNames.push(funcString);
+
+            try {
+                func = Function.apply(null, paramNames);
+            } catch (err) {
+                logme(
+                    'ERROR: The function body "' +
+                        funcString +
+                        '" was not converted by the Function constructor.'
+                );
+                logme('Error message: "' + err.message + '".');
+
+                $('#' + gstId).html('<div style="color: red;">' + 'ERROR IN XML: Could not create a function from string "' + funcString + '".' + '</div>');
+                $('#' + gstId).append('<div style="color: red;">' + 'Error message: "' + err.message + '".' + '</div>');
+
+                paramNames.pop();
+
+                return;
+            }
+
+            paramNames.pop();
+
+            state.plde.push({
+                'elId': obj['@el_id'],
+                'func': func
+            });
+        }
+
+    }
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/general_methods.js

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+(function (requirejs, require, define) {
+
+define('GeneralMethods', [], function () {
+    if (!String.prototype.trim) {
+        // http://blog.stevenlevithan.com/archives/faster-trim-javascript
+        String.prototype.trim = function trim(str) {
+            return str.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
+        };
+    }
+
+    return {
+        'module_name': 'GeneralMethods',
+        'module_status': 'OK'
+    };
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst.js

+/*
+ * We will add a function that will be called for all GraphicalSliderTool
+ * xmodule module instances. It must be available globally by design of
+ * xmodule.
+ */
+window.GraphicalSliderTool = function (el) {
+    // All the work will be performed by the GstMain module. We will get access
+    // to it, and all it's dependencies, via Require JS. Currently Require JS
+    // is namespaced and is available via a global object RequireJS.
+    RequireJS.require(['GstMain'], function (GstMain) {
+        // The GstMain module expects the DOM ID of a Graphical Slider Tool
+        // element. Since we are given a <section> element which might in
+        // theory contain multiple graphical_slider_tool <div> elements (each
+        // with a unique DOM ID), we will iterate over all children, and for
+        // each match, we will call GstMain module.
+        $(el).children('.graphical_slider_tool').each(function (index, value) {
+            GstMain($(value).attr('id'));
+        });
+    });
+};

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst_main.js

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+(function (requirejs, require, define) {
+
+define(
+    'GstMain',
+
+    // Even though it is not explicitly in this module, we have to specify
+    // 'GeneralMethods' as a dependency. It expands some of the core JS objects
+    // with additional useful methods that are used in other modules.
+    ['State', 'GeneralMethods', 'Sliders', 'Inputs', 'Graph', 'ElOutput', 'GLabelElOutput', 'logme'],
+    function (State, GeneralMethods, Sliders, Inputs, Graph, ElOutput, GLabelElOutput, logme) {
+
+    return GstMain;
+
+    function GstMain(gstId) {
+        var config, gstClass, state;
+
+        if ($('#' + gstId).attr('data-processed') !== 'processed') {
+            $('#' + gstId).attr('data-processed', 'processed');
+        } else {
+            logme('MESSAGE: Already processed GST with ID ' + gstId + '. Skipping.');
+
+            return;
+        }
+
+        // Get the JSON configuration, parse it, and store as an object.
+        try {
+            config = JSON.parse($('#' + gstId + '_json').html()).root;
+        } catch (err) {
+            logme('ERROR: could not parse config JSON.');
+            logme('$("#" + gstId + "_json").html() = ', $('#' + gstId + '_json').html());
+            logme('JSON.parse(...) = ', JSON.parse($('#' + gstId + '_json').html()));
+            logme('config = ', config);
+
+            return;
+        }
+
+        // Get the class name of the GST. All elements are assigned a class
+        // name that is based on the class name of the GST. For example, inputs
+        // are assigned a class name '{GST class name}_input'.
+        if (typeof config['@class'] !== 'string') {
+            logme('ERROR: Could not get the class name of GST.');
+            logme('config["@class"] = ', config['@class']);
+
+            return;
+        }
+        gstClass = config['@class'];
+
+        // Parse the configuration settings for parameters, and store them in a
+        // state object.
+        state = State(gstId, config);
+
+        // It is possible that something goes wrong while extracting parameters
+        // from the JSON config object. In this case, we will not continue.
+        if (state === undefined) {
+            logme('ERROR: The state object was not initialized properly.');
+
+            return;
+        }
+
+        // Create the sliders and the text inputs, attaching them to
+        // appropriate parameters.
+        Sliders(gstId, state);
+        Inputs(gstId, gstClass, state);
+
+        // Configure functions that output to an element instead of the graph.
+        ElOutput(config, state);
+
+        // Configure functions that output to an element instead of the graph
+        // label.
+        GLabelElOutput(config, state);
+
+        // Configure and display the graph. Attach event for the graph to be
+        // updated on any change of a slider or a text input.
+        Graph(gstId, config, state);
+    }
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+(function (requirejs, require, define) {
+
+define('Inputs', ['logme'], function (logme) {
+    return Inputs;
+
+    function Inputs(gstId, gstClass, state) {
+        var c1, paramName, allParamNames;
+
+        allParamNames = state.getAllParameterNames();
+
+        for (c1 = 0; c1 < allParamNames.length; c1 += 1) {
+            $('#' + gstId).find('.' + gstClass + '_input').each(function (index, value) {
+                var inputDiv, paramName;
+
+                paramName = allParamNames[c1];
+                inputDiv = $(value);
+
+                if (paramName === inputDiv.data('var')) {
+                    createInput(inputDiv, paramName);
+                }
+            });
+        }
+
+        return;
+
+        function createInput(inputDiv, paramName) {
+            var paramObj;
+
+            paramObj = state.getParamObj(paramName);
+
+            // Check that the retrieval went OK.
+            if (paramObj === undefined) {
+                logme('ERROR: Could not get a paramObj for parameter "' + paramName + '".');
+
+                return;
+            }
+
+            // Bind a function to the 'change' event. Whenever the user changes
+            // the value of this text input, and presses 'enter' (or clicks
+            // somewhere else on the page), this event will be triggered, and
+            // our callback will be called.
+            inputDiv.bind('change', inputOnChange);
+
+            inputDiv.val(paramObj.value);
+
+            // Lets style the input element nicely. We will use the button()
+            // widget for this since there is no native widget for the text
+            // input.
+            inputDiv.button().css({
+                'font': 'inherit',
+                'color': 'inherit',
+                'text-align': 'left',
+                'outline': 'none',
+                'cursor': 'text',
+                'height': '15px'
+            });
+
+            // Tell the parameter object from state that we are attaching a
+            // text input to it. Next time the parameter will be updated with
+            // a new value, tis input will also be updated.
+            paramObj.inputDivs.push(inputDiv);
+
+            return;
+
+            // Update the 'state' - i.e. set the value of the parameter this
+            // input is attached to to a new value.
+            //
+            // This will cause the plot to be redrawn each time after the user
+            // changes the value in the input. Note that he has to either press
+            // 'Enter', or click somewhere else on the page in order for the
+            // 'change' event to be tiggered.
+            function inputOnChange(event) {
+                var inputDiv;
+
+                inputDiv = $(this);
+                state.setParameterValue(paramName, inputDiv.val(), inputDiv);
+            }
+        }
+    }
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/logme.js

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+(function (requirejs, require, define) {
+
+define('logme', [], function () {
+    var debugMode;
+
+    // debugMode can be one of the following:
+    //
+    //     true - All messages passed to logme will be written to the internal
+    //            browser console.
+    //     false - Suppress all output to the internal browser console.
+    //
+    // Obviously, if anywhere there is a direct console.log() call, we can't do
+    // anything about it. That's why use logme() - it will allow to turn off
+    // the output of debug information with a single change to a variable.
+    debugMode = true;
+
+    return logme;
+
+    /*
+     * function: logme
+     *
+     * A helper function that provides logging facilities. We don't want
+     * to call console.log() directly, because sometimes it is not supported
+     * by the browser. Also when everything is routed through this function.
+     * the logging output can be easily turned off.
+     *
+     * logme() supports multiple parameters. Each parameter will be passed to
+     * console.log() function separately.
+     *
+     */
+    function logme() {
+        var i;
+
+        if (
+            (typeof debugMode === 'undefined') ||
+            (debugMode !== true) ||
+            (typeof window.console === 'undefined')
+        ) {
+            return;
+        }
+
+        for (i = 0; i < arguments.length; i++) {
+            window.console.log(arguments[i]);
+        }
+    } // End-of: function logme
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/sliders.js

+// Wrapper for RequireJS. It will make the standard requirejs(), require(), and
+// define() functions from Require JS available inside the anonymous function.
+(function (requirejs, require, define) {
+
+define('Sliders', ['logme'], function (logme) {
+    return Sliders;
+
+    function Sliders(gstId, state) {
+        var c1, paramName, allParamNames, sliderDiv;
+
+        allParamNames = state.getAllParameterNames();
+
+        for (c1 = 0; c1 < allParamNames.length; c1 += 1) {
+            paramName = allParamNames[c1];
+
+            sliderDiv = $('#' + gstId + '_slider_' + paramName);
+
+            if (sliderDiv.length === 1) {
+                createSlider(sliderDiv, paramName);
+            } else if (sliderDiv.length > 1) {
+                logme('ERROR: Found more than one slider for the parameter "' + paramName + '".');
+                logme('sliderDiv.length = ', sliderDiv.length);
+            } else {
+                logme('MESSAGE: Did not find a slider for the parameter "' + paramName + '".');
+            }
+        }
+
+        function createSlider(sliderDiv, paramName) {
+            var paramObj;
+
+            paramObj = state.getParamObj(paramName);
+
+            // Check that the retrieval went OK.
+            if (paramObj === undefined) {
+                logme('ERROR: Could not get a paramObj for parameter "' + paramName + '".');
+
+                return;
+            }
+
+            // Create a jQuery UI slider from the slider DIV. We will set
+            // starting parameters, and will also attach a handler to update
+            // the 'state' on the 'slide' event.
+            sliderDiv.slider({
+                'min': paramObj.min,
+                'max': paramObj.max,
+                'value': paramObj.value,
+                'step': paramObj.step
+            });
+
+            // Tell the parameter object stored in state that we have a slider
+            // that is attached to it. Next time when the parameter changes, it
+            // will also update the value of this slider.
+            paramObj.sliderDiv = sliderDiv;
+
+            // Atach callbacks to update the slider's parameter.
+            paramObj.sliderDiv.on('slide', sliderOnSlide);
+            paramObj.sliderDiv.on('slidechange', sliderOnChange);
+
+            return;
+
+            // Update the 'state' - i.e. set the value of the parameter this
+            // slider is attached to to a new value.
+            //
+            // This will cause the plot to be redrawn each time after the user
+            // drags the slider handle and releases it.
+            function sliderOnSlide(event, ui) {
+                // Last parameter passed to setParameterValue() will be 'true'
+                // so that the function knows we are a slider, and it can
+                // change the our value back in the case when the new value is
+                // invalid for some reason.
+                if (state.setParameterValue(paramName, ui.value, sliderDiv, true, 'slide') === undefined) {
+                    logme('ERROR: Could not update the parameter named "' + paramName + '" with the value "' + ui.value + '".');
+                }
+            }
+
+            function sliderOnChange(event, ui) {
+                if (state.setParameterValue(paramName, ui.value, sliderDiv, true, 'change') === undefined) {
+                    logme('ERROR: Could not update the parameter named "' + paramName + '" with the value "' + ui.value + '".');
+                }
+            }
+        }
+    }
+});
+
+// End of wrapper for RequireJS. As you can see, we are passing
+// namespaced Require JS variables to an anonymous function. Within
+// it, you can use the standard requirejs(), require(), and define()
+// functions as if they were in the global namespace.
+}(RequireJS.requirejs, RequireJS.require, RequireJS.define)); // End-of: (function (requirejs, require, define)

common/lib/xmodule/xmodule/tests/test_export.py

@@ -39,9 +39,12 @@ def strip_filenames(descriptor):
 
 
 class RoundTripTestCase(unittest.TestCase):
-    '''Check that our test courses roundtrip properly'''
+    ''' Check that our test courses roundtrip properly.
+        Same course imported , than exported, then imported again.
+        And we compare original import with second import (after export).
+        Thus we make sure that export and import work properly.
+    '''
     def check_export_roundtrip(self, data_dir, course_dir):
-
         root_dir = path(mkdtemp())
         print "Copying test course to temp dir {0}".format(root_dir)
 
@@ -117,3 +120,7 @@ class RoundTripTestCase(unittest.TestCase):
     def test_selfassessment_roundtrip(self):
         #Test selfassessment xmodule to see if it exports correctly
         self.check_export_roundtrip(DATA_DIR,"self_assessment")
+
+    def test_graphicslidertool_roundtrip(self):
+        #Test graphicslidertool xmodule to see if it exports correctly
+        self.check_export_roundtrip(DATA_DIR,"graphic_slider_tool")

common/lib/xmodule/xmodule/tests/test_import.py

@@ -352,3 +352,19 @@ class ImportTestCase(unittest.TestCase):
         sa_sample = modulestore.get_instance(sa_id, location)
         #10 attempts is hard coded into SampleQuestion, which is the url_name of a selfassessment xml tag
         self.assertEqual(sa_sample.metadata['attempts'], '10')
+
+    def test_graphicslidertool_import(self):
+        '''
+        Check to see if definition_from_xml in gst_module.py
+        works properly.  Pulls data from the graphic_slider_tool directory
+        in the test data directory.
+        '''
+        modulestore = XMLModuleStore(DATA_DIR, course_dirs=['graphic_slider_tool'])
+
+        sa_id = "edX/gst_test/2012_Fall"
+        location = Location(["i4x", "edX", "gst_test", "graphical_slider_tool", "sample_gst"])
+        gst_sample = modulestore.get_instance(sa_id, location)
+        render_string_from_sample_gst_xml = """
+        <slider var="a" style="width:400px;float:left;"/>\
+<plot style="margin-top:15px;margin-bottom:15px;"/>""".strip()
+        self.assertEqual(gst_sample.definition['render'], render_string_from_sample_gst_xml)

common/test/data/graphic_slider_tool/README.md

+This is a very very simple course, useful for debugging graphical slider tool
+code.

common/test/data/graphic_slider_tool/course.xml

+roots/2012_Fall.xml
\ No newline at end of file

common/test/data/graphic_slider_tool/course/2012_Fall.xml

+<course>
+  <chapter url_name="Overview">
+    <graphical_slider_tool url_name="sample_gst"/>
+  </chapter>
+</course>

common/test/data/graphic_slider_tool/graphical_slider_tool/sample_gst.xml

+
+    <graphical_slider_tool>
+      <render>
+<slider var='a' style="width:400px;float:left;"/><plot style="margin-top:15px;margin-bottom:15px;"/>
+      </render>
+      <configuration>
+        <parameters>
+            <param var="a" min="5" max="25" step="0.5" initial="12.5" />
+        </parameters>
+        <functions>
+          <function color="red">return Math.sqrt(a * a - x * x);</function>
+          <function color="red">return -Math.sqrt(a * a - x * x);</function>
+        </functions>
+        <plot>
+          <xrange>
+            <!-- dynamic range -->
+              <min>
+                  return -a;
+              </min>
+              <max>
+                  return a;
+              </max>
+          </xrange>
+          <num_points>1000</num_points>
+          <xticks>-30, 6, 30</xticks>
+          <yticks>-30, 6, 30</yticks>
+        </plot>
+      </configuration>
+    </graphical_slider_tool>
+

common/test/data/graphic_slider_tool/policies/2012_Fall.json

+{
+    "course/2012_Fall": {
+        "graceperiod": "2 days 5 hours 59 minutes 59 seconds",
+        "start": "2015-07-17T12:00",
+        "display_name": "GST Test",
+        "graded": "false"
+    },
+    "chapter/Overview": {
+        "display_name": "Overview"
+    },
+    "graphical_slider_tool/sample_gst": {
+        "display_name": "Sample GST",
+    },
+}

common/test/data/graphic_slider_tool/roots/2012_Fall.xml

+<course org="edX" course="gst_test" url_name="2012_Fall"/>

common/test/data/self_assessment/course.xml

-roots/2012_Fall.xml
\ No newline at end of file

common/test/data/self_assessment/course.xml

+<course org="edX" course="sa_test" url_name="2012_Fall"/>

docs/source/gst_example_bars.xml

+<vertical>
+    <graphical_slider_tool>
+      <render>
+        <h2>Graphic slider tool: Bar graph example.</h2>
+
+        <p>We can request the API to plot us a bar graph.</p>
+        <div style="clear:both">
+          <p style="width:60px;float:left;">a</p>
+          <slider var='a' style="width:400px;float:left;"/>
+          <textbox var='a' style="width:50px;float:left;margin-left:15px;"/>
+          <br /><br /><br />
+          <p style="width:60px;float:left;">b</p>
+          <slider var='b' style="width:400px;float:left;"/>
+          <textbox var='b' style="width:50px;float:left;margin-left:15px;"/>
+        </div>
+          <plot style="clear:left;"/>
+      </render>
+      <configuration>
+        <parameters>
+            <param var="a" min="-100" max="100" step="5" initial="25" />
+            <param var="b" min="-100" max="100" step="5" initial="50" />
+        </parameters>
+        <functions>
+          <function bar="true" color="blue" label="Men">
+            <![CDATA[if (((x>0.9) && (x<1.1)) || ((x>4.9) && (x<5.1))) { return Math.sin(a * 0.01 * Math.PI + 2.952 * x); }
+            else {return undefined;}]]>
+          </function>
+          <function bar="true" color="red" label="Women">
+            <![CDATA[if (((x>1.9) && (x<2.1)) || ((x>3.9) && (x<4.1))) { return Math.cos(b * 0.01 * Math.PI + 3.432 * x); }
+            else {return undefined;}]]>
+          </function>
+          <function bar="true" color="green" label="Other 1">
+            <![CDATA[if (((x>1.9) && (x<2.1)) || ((x>3.9) && (x<4.1))) { return Math.cos((b - 10 * a) * 0.01 * Math.PI + 3.432 * x); }
+            else {return undefined;}]]>
+          </function>
+          <function bar="true" color="yellow" label="Other 2">
+            <![CDATA[if (((x>1.9) && (x<2.1)) || ((x>3.9) && (x<4.1))) { return Math.cos((b + 7 * a) * 0.01 * Math.PI + 3.432 * x); }
+            else {return undefined;}]]>
+          </function>
+        </functions>
+        <plot>
+          <xrange><min>1</min><max>5</max></xrange>
+          <num_points>5</num_points>
+          <xticks>0, 0.5, 6</xticks>
+          <yticks>-1.5, 0.1, 1.5</yticks>
+          <xticks_names>
+          <![CDATA[
+              {
+                  "1.5": "Single", "4.5": "Married"
+              }
+          ]]>
+          </xticks_names>
+          <yticks_names>
+          <![CDATA[
+              {
+                  "-1.0": "-100%", "-0.5": "-50%", "0.0": "0%", "0.5": "50%", "1.0": "100%"
+              }
+          ]]>
+          </yticks_names>
+          <bar_width>0.4</bar_width>
+        </plot>
+      </configuration>
+    </graphical_slider_tool>
+</vertical>

docs/source/gst_example_dynamic_labels.xml

+<vertical>
+ <graphical_slider_tool>
+      <render>
+        <h1>Graphic slider tool: Dynamic labels.</h1>
+        <p>There are two kinds of dynamic lables.
+        1) Dynamic changing values in graph legends.
+        2) Dynamic labels, which coordinates depend on parameters </p>
+         <p>a: <slider var="a"/></p>
+          <br/>
+          <p>b: <slider var="b"/></p>
+          <br/><br/>
+          <plot style="width:400px; height:400px;"/>
+      </render>
+
+      <configuration>
+        <parameters>
+            <param var="a" min="-10" max="10" step="1" initial="0" />
+            <param var="b" min="0" max="10" step="0.5" initial="5" />
+        </parameters>
+        <functions>
+          <function label="Value of a is: dyn_val_1">a * x + b</function>
+         <!-- dynamic values in legend -->
+         <function output="plot_label" el_id="dyn_val_1">a</function>
+        </functions>
+        <plot>
+          <xrange><min>0</min><max>30</max></xrange>
+          <num_points>10</num_points>
+          <xticks>0, 6, 30</xticks>
+          <yticks>-9, 1, 9</yticks>
+          <!-- custom labels with coordinates as any function of parameter -->
+          <moving_label text="Dynam_lbl 1" weight="bold">
+          <![CDATA[  {'x': 10, 'y': a};]]>
+          </moving_label>
+          <moving_label text="Dynam lbl 2" weight="bold">
+          <![CDATA[  {'x': -6, 'y': b};]]>
+          </moving_label>
+        </plot>
+      </configuration>
+    </graphical_slider_tool>
+</vertical>
\ No newline at end of file

docs/source/gst_example_dynamic_range.xml

+<vertical>
+    <graphical_slider_tool>
+      <render>
+        <h2>Graphic slider tool: Dynamic range and implicit functions.</h2>
+
+        <p>You can make x range (not ticks of x axis) of functions to depend on
+          parameter value. This can be useful when function domain depends
+          on parameter.</p>
+        <p>Also implicit functons like circle can be plotted as 2 separate
+            functions of same color.</p>
+         <div style="height:50px;">
+         <slider var='a' style="width:400px;float:left;"/>
+         <textbox var='a' style="float:left;width:60px;margin-left:15px;"/>
+       </div>
+        <plot style="margin-top:15px;margin-bottom:15px;"/>
+      </render>
+      <configuration>
+        <parameters>
+            <param var="a" min="5" max="25" step="0.5" initial="12.5" />
+        </parameters>
+        <functions>
+          <function color="red">Math.sqrt(a * a - x * x)</function>
+          <function color="red">-Math.sqrt(a * a - x * x)</function>
+        </functions>
+        <plot>
+          <xrange>
+            <!-- dynamic range -->
+              <min>-a</min>
+              <max>a</max>
+          </xrange>
+          <num_points>1000</num_points>
+          <xticks>-30, 6, 30</xticks>
+          <yticks>-30, 6, 30</yticks>
+        </plot>
+      </configuration>
+    </graphical_slider_tool>
+</vertical>

docs/source/gst_example_html_element_output.xml

+<vertical>
+    <graphical_slider_tool>
+        <render>
+            <h2>Graphic slider tool: Output to DOM element.</h2>
+
+            <p>a + b = <span id="answer_span_1"></span></p>
+
+            <div style="clear:both">
+                <p style="float:left;margin-right:10px;">a</p>
+                <slider var='a' style="width:400px;float:left;"/>
+                <textbox var='a' style="width:50px;float:left;margin-left:15px;"/>
+            </div>
+
+            <div style="clear:both">
+                <p style="float:left;margin-right:10px;">b</p>
+                <slider var='b' style="width:400px;float:left;"/>
+                <textbox var='b' style="width:50px;float:left;margin-left:15px;"/>
+            </div>
+            <br/><br/><br/>
+            <plot/>
+        </render>
+        <configuration>
+            <parameters>
+                <param var="a" min="-10.0" max="10.0" step="0.1" initial="0" />
+                <param var="b" min="-10.0" max="10.0" step="0.1" initial="0" />
+            </parameters>
+
+            <functions>
+                <function output="element" el_id="answer_span_1">
+                    function add(a, b, precision) {
+                        var x = Math.pow(10, precision || 2);
+                        return (Math.round(a * x) + Math.round(b * x)) / x;
+                    }
+
+                    return add(a, b, 5);
+                </function>
+            </functions>
+        </configuration>
+    </graphical_slider_tool>
+</vertical>

docs/source/gst_example_with_documentation.xml

+<vertical>
+    <graphical_slider_tool>
+      <render>
+
+          <h2>Graphic slider tool: full example.</h2>
+            <p>
+                A simple equation
+                    \(
+                        y_1 = 10 \times b \times \frac{sin(a \times x) \times sin(b \times x)}{cos(b \times x) + 10}
+                    \)
+                can be plotted.
+            </p>
+
+            <!-- make text and input or slider at the same line -->
+            <div>
+              <p style="float:left;"> Currently \(a\) is</p>
+              <!-- readonly input for a -->
+              <span id="a_readonly" style="width:50px; float:left; margin-left:10px;"/>
+            </div>
+            <!-- clear:left will make next text to begin from new line -->
+            <p style="clear:left">   This one
+                  \(
+                      y_2 = sin(a \times x)
+                  \)
+              will be overlayed on top.
+            </p>
+            <div>
+              <p style="float:left;">Currently \(b\) is </p>
+              <textbox var="b" style="width:50px; float:left; margin-left:10px;"/>
+            </div>
+            <div style="clear:left;">
+              <p style="float:left;">To change \(a\) use:</p>
+              <slider var="a" style="width:400px;float:left;margin-left:10px;"/>
+            </div>
+            <div style="clear:left;">
+              <p style="float:left;">To change \(b\) use:</p>
+              <slider var="b" style="width:400px;float:left;margin-left:10px;"/>
+            </div>
+            <plot style='clear:left;width:600px;padding-top:15px;padding-bottom:20px;'/>
+            <div style="clear:left;height:50px;">
+             <p style="float:left;">Second input for b:</p>
+             <!-- editable input for b -->
+              <textbox var="b" style="color:red;width:60px;float:left;margin-left:10px;"/>
+            </div >
+      </render>
+
+      <configuration>
+
+        <parameters>
+            <param var="a" min="90" max="120" step="10" initial="100" />
+            <param var="b" min="120" max="200" step="2.3" initial="120" />
+        </parameters>
+
+        <functions>
+
+          <function color="#0000FF" line="false" dot="true" label="\(y_1\)">
+            return 10.0 * b * Math.sin(a * x) * Math.sin(b * x) / (Math.cos(b * x) + 10);
+          </function>
+          <function color="red" line="true" dot="false" label="\(y_2\)">
+            <!-- works w/o return, if function is single line -->
+            Math.sin(a * x);
+          </function>
+          <function color="#FFFF00" line="false" dot="false" label="unknown">
+            function helperFunc(c1) {
+              return c1 * c1 - a;
+            }
+
+            return helperFunc(x + 10 * a * b) + Math.sin(a - x);
+          </function>
+          <function output="element" el_id="a_readonly">a</function>
+        </functions>
+
+        <plot>
+
+          <xrange>
+              <min>return 0;</min>
+              <!-- works w/o return -->
+              <max>30</max>
+          </xrange>
+
+          <num_points>120</num_points>
+
+          <xticks>0, 3, 30</xticks>
+          <yticks>-1.5, 1.5, 13.5</yticks>
+
+          <xunits>\(cm\)</xunits>
+          <yunits>\(m\)</yunits>
+        </plot>
+      </configuration>
+    </graphical_slider_tool>
+</vertical>

docs/source/index.rst

@@ -14,7 +14,7 @@ Contents:
    overview.rst
    common-lib.rst
    djangoapps.rst
-
+   xml_formats.rst
 
 Indices and tables
 ==================

docs/source/xml_formats.rst

+XML formats of Inputtypes and Xmodule
+=====================================
+Contents:
+
+.. toctree::
+   :maxdepth: 2
+
+   graphical_slider_tool.rst
\ No newline at end of file

lms/envs/common.py

@@ -430,6 +430,7 @@ courseware_only_js += [
 main_vendor_js = [
   'js/vendor/RequireJS.js',
   'js/vendor/json2.js',
+  'js/vendor/RequireJS.js',
   'js/vendor/jquery.min.js',
   'js/vendor/jquery-ui.min.js',
   'js/vendor/jquery.cookie.js',

lms/templates/graphical_slider_tool.html

+<div align="center" id="${element_id}" class="${element_class}">
+    <!-- hidden field to read configuration json from -->
+    <div class="${element_class}" id="${element_id}_json" style="display: none;">
+        ${configuration_json}
+    </div>
+
+    <!-- main xml with marked places for sliders, numbers, and plot -->
+    ${gst_html}
+</div>

requirements.txt

@@ -56,3 +56,4 @@ dogstatsd-python==0.2.1
 sphinx==1.1.3
 Shapely==1.2.16
 ipython==0.13.1
+xmltodict==0.4.1