GST work in progress.

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

@@ -2,13 +2,12 @@
 // define() functions from Require JS available inside the anonymous function.
 (function (requirejs, require, define) {
 
-define('Graph', ['logme'], function (logme) {
+define('Graph', [], function () {
 
     return Graph;
 
-    function Graph(gstId, state) {
-        var plotDiv, data;
-        logme('We are inside Graph module.', gstId, state);
+    function Graph(gstId, config, state) {
+        var plotDiv, dataSets, functions;
 
         plotDiv = $('#' + gstId + '_plot');
 
@@ -21,34 +20,102 @@ define('Graph', ['logme'], function (logme) {
 
         state.bindUpdatePlotEvent(plotDiv, onUpdatePlot);
 
+        createFunctions();
+
         generateData();
         updatePlot();
 
         return;
 
-        function onUpdatePlot(event) {
-            logme('redrawing plot');
+        function createFunctions() {
+            functions = [];
 
+            if (typeof config.plot['function'] === 'undefined') {
+                return;
+            }
+
+            if (typeof config.plot['function'] === 'string') {
+                addFunction(config.plot['function']);
+            } else if ($.isPlainObject(config.plot['function']) === true) {
+
+            } else if ($.isArray(config.plot['function'])) {
+
+            }
+
+            return;
+
+            function addFunction(funcString, color, line, dot, label, style, point_size) {
+                var newFunctionObject, func, constNames;
+
+                if (typeof funcString !== 'string') {
+                    return;
+                }
+
+                newFunctionObject = {};
+
+                constNames = state.getAllConstantNames();
+
+                // The 'x' is always one of the function parameters.
+                constNames.push('x');
+
+                // Must make sure that the function body also gets passed to
+                // the Function cosntructor.
+                constNames.push(funcString);
+
+                func = Function.apply(null, constNames);
+                newFunctionObject['func'] = func;
+
+                if (typeof color === 'string') {
+                    newFunctionObject['color'] = color;
+                }
+
+                if (typeof line === 'boolean') {
+                    newFunctionObject['line'] = line;
+                }
+
+                if (typeof dot === 'boolean') {
+                    newFunctionObject['dot'] = dot;
+                }
+
+                if (typeof label === 'string') {
+                    newFunctionObject['label'] = label;
+                }
+
+                functions.push(newFunctionObject);
+            }
+        }
+
+        function onUpdatePlot(event) {
             generateData();
             updatePlot();
         }
 
         function generateData() {
-            var a, b, c1;
+            var c0, c1, datapoints, constValues, x, y;
 
-            a = state.getConstValue('a');
-            b = state.getConstValue('b');
+            constValues = state.getAllConstantValues();
 
-            data = [];
-            data.push([]);
+            dataSets = [];
 
-            for (c1 = 0; c1 < 30; c1++) {
-                data[0].push([c1, a * c1 * (c1 + a)* (c1 - b) + b * c1 * (c1 + b * a)]);
+            for (c0 = 0; c0 < functions.length; c0 += 1) {
+                datapoints = [];
+
+                for (c1 = 0; c1 < 30; c1 += 0.1) {
+                    x = c1;
+                    // Push the 'x' variable to the end of the parameter array.
+                    constValues.push(x);
+                    y = functions[c0].func.apply(window, constValues);
+                    constValues.pop();
+
+                    datapoints.push([x, y]);
+                }
+
+                dataSets.push(datapoints);
             }
         }
 
         function updatePlot() {
-            $.plot(plotDiv, data, {xaxis: {min: 0, max: 30}});
+            $.plot(plotDiv, dataSets);
         }
     }
 });

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

@@ -4,9 +4,8 @@
 
 define(
     'GstMain',
-    ['State', 'logme', 'GeneralMethods', 'Sliders', 'Graph'],
-    function (State, logme, GeneralMethods, Sliders, Graph) {
-    logme(GeneralMethods);
+    ['State', 'GeneralMethods', 'Sliders', 'Graph'],
+    function (State, GeneralMethods, Sliders, Graph) {
 
     return GstMain;
 
@@ -19,7 +18,7 @@ define(
 
         Sliders(gstId, config, state);
 
-        Graph(gstId, state);
+        Graph(gstId, config, state);
     }
 });
 

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

@@ -2,16 +2,10 @@
 // define() functions from Require JS available inside the anonymous function.
 (function (requirejs, require, define) {
 
-define('Sliders', ['logme'], function (logme) {
+define('Sliders', [], function () {
     return Sliders;
 
     function Sliders(gstId, config, state) {
-        logme('We are inside Sliders function.');
-
-        logme('gstId: ' + gstId);
-        logme(config);
-        logme(state);
-
         // We will go through all of the sliders. For each one, we will make a
         // jQuery UI slider for it, attach "on change" events, and set it's
         // state - initial value, max, and min parameters.
@@ -102,12 +96,8 @@ define('Sliders', ['logme'], function (logme) {
             // The default slider width.
             sliderWidth = 400;
 
-            logme('width: 0');
-            logme(obj['@width']);
             if (typeof obj['@width'] === 'string') {
-                logme('width: 1');
                 if (isNaN(parseInt(obj['@width'], 10)) === false) {
-                    logme('width: 2');
                     sliderWidth = parseInt(obj['@width'], 10);
                 }
             }

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

@@ -2,7 +2,7 @@
 // define() functions from Require JS available inside the anonymous function.
 (function (requirejs, require, define) {
 
-define('State', ['logme'], function (logme) {
+define('State', [], function () {
     // Since there will be (can be) multiple GST on a page, and each will have
     // a separate state, we will create a factory constructor function. The
     // constructor will expect the ID of the DIV with the GST contents, and the
@@ -56,16 +56,40 @@ define('State', ['logme'], function (logme) {
             }
         }
 
-        logme(constants);
-
         // The constructor will return an object with methods to operate on
         // it's private properties.
         return {
             'getConstValue': getConstValue,
             'setConstValue': setConstValue,
-            'bindUpdatePlotEvent': bindUpdatePlotEvent
+            'bindUpdatePlotEvent': bindUpdatePlotEvent,
+            'getAllConstantNames': getAllConstantNames,
+            'getAllConstantValues': getAllConstantValues
         };
 
+        function getAllConstantNames() {
+            var constName, allConstNames;
+
+            allConstNames = [];
+
+            for (constName in constants) {
+                allConstNames.push(constName);
+            }
+
+            return allConstNames;
+        }
+
+        function getAllConstantValues() {
+            var constName, allConstValues;
+
+            allConstValues = [];
+
+            for (constName in constants) {
+                allConstValues.push(constants[constName]);
+            }
+
+            return allConstValues;
+        }
+
         function bindUpdatePlotEvent(newPlotDiv, callback) {
             plotDiv = newPlotDiv;
 
@@ -96,8 +120,6 @@ define('State', ['logme'], function (logme) {
 
             constants[constName] = parseFloat(constValue);
 
-            logme('From setConstValue: new value for "' + constName + '" is ' + constValue);
-
             if (plotDiv !== undefined) {
                 plotDiv.trigger('update_plot');
             }