GST work in progress.

common/lib/xmodule/xmodule/gst_module.py

@@ -30,6 +30,7 @@ class GraphicalSliderToolModule(XModule):
         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/gst.js')
@@ -154,8 +155,8 @@ class GraphicalSliderToolModule(XModule):
             inputs = [inputs]
         vars = [x['@var'] for x in inputs]
 
-        input_div = '<div class="{element_class}_input" id="{element_id}_input_{var}" \
-        data-var="{var}">This is input</div>'
+        input_div = '<span class="{element_class}_input" id="{element_id}_input_{var}" \
+        data-var="{var}"></span>'
 
         for var in vars:
             html_string = re.sub(r'\$input\s+' + var + r'\$',

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

@@ -4,8 +4,8 @@
 
 define(
     'GstMain',
-    ['State', 'GeneralMethods', 'Sliders', 'Graph'],
-    function (State, GeneralMethods, Sliders, Graph) {
+    ['State', 'GeneralMethods', 'Sliders', 'Inputs', 'Graph'],
+    function (State, GeneralMethods, Sliders, Inputs, Graph) {
 
     return GstMain;
 
@@ -17,6 +17,7 @@ define(
         state = State(gstId, config);
 
         Sliders(gstId, config, state);
+        Inputs(gstId, config, state);
 
         Graph(gstId, config, state);
     }

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, config, state) {
+        logme('Inside "Inputs" module.');
+        logme(gstId, config, state);
+
+        // We will go thorugh all of the inputs, and those that have a valid
+        // '@var' property will be added to the page as a HTML text input
+        // element.
+        if ((typeof config.inputs !== 'undefined') &&
+            (typeof config.inputs.input !== 'undefined')) {
+            if ($.isArray(config.inputs.input)) {
+                // config.inputs.input is an array
+
+                for (c1 = 0; c1 < config.inputs.input.length; c1++) {
+                    createInput(config.inputs.input[c1]);
+                }
+            } else if ($.isPlainObject(config.inputs.input)) {
+                // config.inputs.input is an object
+                createInput(config.inputs.input);
+            }
+        }
+
+        function createInput(obj) {
+            var constName, constValue, inputDiv, textInputDiv;
+
+            if (typeof obj['@var'] === 'undefined') {
+                return;
+            }
+
+            constName = obj['@var'];
+
+            constValue = state.getConstValue(constName);
+            if (constValue === undefined) {
+                constValue = 0;
+            }
+
+            inputDiv = $('#' + gstId + '_input_' + constName);
+
+            if (inputDiv.length === 0) {
+                return;
+            }
+
+            textInputDiv = $('<input type"text" />');
+            textInputDiv.width(50);
+
+            textInputDiv.appendTo(inputDiv);
+            textInputDiv.val(constValue);
+
+            textInputDiv.bind('change', inputOnChange);
+
+            return;
+
+            function inputOnChange(event) {
+                state.setConstValue(constName, $(this).val());
+            }
+        }
+    }
+});
+
+// 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

@@ -104,6 +104,7 @@ define('Sliders', [], function () {
 
             // Set the new width to the slider.
             sliderDiv.width(sliderWidth);
+            sliderDiv.css('display', 'inline-block');
 
             // Create a jQuery UI slider from the current DIV. We will set
             // starting parameters, and will also attach a handler to update

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

@@ -107,6 +107,8 @@ define('State', [], function () {
         }
 
         function setConstValue(constName, constValue) {
+            var inputDiv;
+
             if (constants.hasOwnProperty(constName) === false) {
                 // If the name of the constant is not tracked by state, return an
                 // 'undefined' value.
@@ -123,6 +125,11 @@ define('State', [], function () {
             if (plotDiv !== undefined) {
                 plotDiv.trigger('update_plot');
             }
+
+            inputDiv = $('#' + gstId + '_input_' + constName).children('input');
+            if (inputDiv.length !== 0) {
+                inputDiv.val(constValue);
+            }
         }
 
         function addConstFromInput(obj) {