diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index c07c0670d7..9e9273bc25 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/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 = '
This is input
'
+ input_div = ''
for var in vars:
html_string = re.sub(r'\$input\s+' + var + r'\$',
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst_main.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst_main.js
index 71de12b423..47881b66c6 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst_main.js
+++ b/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);
}
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
new file mode 100644
index 0000000000..5b9f1f87c2
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
@@ -0,0 +1,70 @@
+// 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 = $('');
+ 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)
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/sliders.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/sliders.js
index 226f53d696..51bd2c8b12 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/sliders.js
+++ b/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
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/state.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/state.js
index d632429c9b..88951f0e9d 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/state.js
+++ b/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) {