GST work in progress.

common/lib/xmodule/xmodule/gst_module.py

@@ -30,7 +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/mod5.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/graph.js'),
 
         resource_string(__name__, 'js/src/graphical_slider_tool/gst.js')
       ]

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.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('Graph', ['logme'], function (logme) {
+
+    return Graph;
+
+    function Graph(gstId, state) {
+        var plotDiv, data;
+        logme('We are inside Graph module.', gstId, state);
+
+        plotDiv = $('#' + gstId + '_plot');
+
+        if (plotDiv.length === 0) {
+            return;
+        }
+
+        plotDiv.width(300);
+        plotDiv.height(300);
+
+        plotDiv.bind('update_plot', function (event, forGstId) {
+            if (forGstId !== gstId) {
+                logme('update_plot event not for current ID');
+            }
+
+            logme('redrawing plot');
+
+            generateData();
+            updatePlot();
+        });
+
+        generateData();
+        updatePlot();
+
+        return;
+
+        function generateData() {
+            var a, b, c1;
+
+            a = state.getConstValue('a');
+            b = state.getConstValue('b');
+
+            data = [];
+            data.push([]);
+
+            for (c1 = 0; c1 < 30; c1++) {
+                data[0].push([c1, a * c1 * (c1 + a)* (c1 - b) + b * c1 * (c1 + b * a)]);
+            }
+        }
+
+        function updatePlot() {
+            $.plot(plotDiv, data, {xaxis: {min: 0, max: 30}});
+        }
+    }
+});
+
+// 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_main.js

@@ -2,7 +2,10 @@
 // define() functions from Require JS available inside the anonymous function.
 (function (requirejs, require, define) {
 
-define('GstMain', ['State', 'logme', 'GeneralMethods', 'Sliders'], function (State, logme, GeneralMethods, Sliders) {
+define(
+    'GstMain',
+    ['State', 'logme', 'GeneralMethods', 'Sliders', 'Graph'],
+    function (State, logme, GeneralMethods, Sliders, Graph) {
     logme(GeneralMethods);
 
     return GstMain;
@@ -15,6 +18,8 @@ define('GstMain', ['State', 'logme', 'GeneralMethods', 'Sliders'], function (Sta
         state = State(gstId, config);
 
         Sliders(gstId, config, state);
+
+        Graph(gstId, state);
     }
 });
 

common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod5.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('mod5', [], function () {
-    console.log('we are in the mod5 callback');
-    return {
-        '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/state.js

@@ -76,6 +76,8 @@ define('State', ['logme'], function (logme) {
         }
 
         function setConstValue(constName, constValue) {
+            var plotDiv;
+
             if (constants.hasOwnProperty(constName) === false) {
                 // If the name of the constant is not tracked by state, return an
                 // 'undefined' value.
@@ -90,6 +92,12 @@ define('State', ['logme'], function (logme) {
             constants[constName] = parseFloat(constValue);
 
             logme('From setConstValue: new value for "' + constName + '" is ' + constValue);
+
+            plotDiv = $('#' + gstId + '_plot');
+
+            if (plotDiv.length === 1) {
+                plotDiv.trigger('update_plot', [gstId]);
+            }
         }
 
         function addConstFromInput(obj) {