From c5107d42de7d3cafef4c7f0fec8f7785aa7f50fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B0=D0=BD=D0=B4=D1=80?=
 <kryklia@gmail.com>
Date: Mon, 26 Nov 2012 17:38:59 +0200
Subject: [PATCH 001/107] bug

---
 common/lib/xmodule/setup.py              |   1 +
 common/lib/xmodule/xmodule/gst_module.py | 141 +++++++++++++++++++++++
 2 files changed, 142 insertions(+)
 create mode 100644 common/lib/xmodule/xmodule/gst_module.py

diff --git a/common/lib/xmodule/setup.py b/common/lib/xmodule/setup.py
index c867fca228..8deb2a7ce5 100644
--- a/common/lib/xmodule/setup.py
+++ b/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",
+            "gst = xmodule.gst_module:GSTDescriptor",
         ]
     }
 )
diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
new file mode 100644
index 0000000000..8847a5224c
--- /dev/null
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -0,0 +1,141 @@
+"""
+GST (Graphical-Slider-Tool) module is ungraded xmodule used by students to
+understand functional dependencies
+"""
+
+# import json
+import logging
+
+from lxml import etree
+
+from xmodule.mako_module import MakoModuleDescriptor
+from xmodule.xml_module import XmlDescriptor
+from xmodule.x_module import XModule
+from xmodule.progress import Progress
+from xmodule.exceptions import NotFoundError
+from pkg_resources import resource_string
+from xmodule.raw_module import RawDescriptor
+
+# log = logging.getLogger("mitx.common.lib.seq_module")
+
+
+class GSTModule(XModule):
+    ''' Graphical-Slider-Tool Module
+    '''
+    # js = {'js': [resource_string(__name__, 'js/src/gst/gst.js')]}
+    # #css = {'scss': [resource_string(__name__, 'css/capa/display.scss')]}
+    # js_module_name = "GST"
+
+    def __init__(self, system, location, definition, descriptor, instance_state=None,
+                 shared_state=None, **kwargs):
+        """
+        pass
+    #     Definition  should have....
+    #     sliders, text, module
+
+    #     Sample file:
+
+    #     <gst>
+    #         <h2> Plot... </h2>
+    #         <slider name="1" var="a"/>
+    #         <number name="1" var="a"/>
+    #         <plot/>
+    #         <sliders_info>
+    #         <sliders/>
+    #         <numbers_info>
+    #         </numbers_info
+    #         <plot_info>
+    #         </plot_info>
+    #     </gst>
+    #     """
+    #     XModule.__init__(self, system, location, definition, descriptor,
+    #                      instance_state, shared_state, **kwargs)
+    #     import ipdb; ipdb.set_trace()
+    #     self.rendered = False
+
+    # def get_html(self):
+    #     self.render()
+    #     return self.content
+
+    # def render(self):
+    #     import ipdb; ipdb.set_trace()
+    #     if self.rendered:
+    #         return
+    #     ## Returns a set of all types of all sub-children
+    #     contents = []
+    #     # import ipdb; ipdb.set_trace()
+    #     for child in self.get_display_items():
+    #         progress = child.get_progress()
+    #         childinfo = {
+    #             'gst': child.get_html(),
+    #             'plot': "\n".join(
+    #                 grand_child.display_name.strip()
+    #                 for grand_child in child.get_children()
+    #                 if 'display_name' in grand_child.metadata
+    #             ),
+    #             # 'progress_status': Progress.to_js_status_str(progress),
+    #             'progress_detail': Progress.to_js_detail_str(progress),
+    #             'type': child.get_icon_class(),
+    #         }
+    #         # if childinfo['title']=='':
+    #             # childinfo['title'] = child.metadata.get('display_name','')
+    #         contents.append(childinfo)
+
+    #     params = {'items': contents,
+    #               'element_id': self.location.html_id(),
+    #               'item_id': self.id,
+    #               'position': self.position,
+    #               'tag': self.location.category
+    #               }
+
+    #     self.content = self.system.render_template('seq_module.html', params)
+    #     self.rendered = True
+
+
+class GSTDescriptor(RawDescriptor):
+    mako_template = "widgets/html-edit.html"
+    module_class = GSTModule
+    template_dir_name = 'gst'
+
+    # @classmethod
+    # def definition_from_xml(cls, xml_object, system):
+    #     """
+    #     Pull out the data into dictionary.
+
+    #     Returns:
+    #     {
+    #     'def1': 'def1-some-html',
+    #     'def2': 'def2-some-html'
+    #     }
+    #     """
+    #     import ipdb; ipdb.set_trace()
+    #     children = []
+    #     for child in xml_object:
+    #         try:
+    #             children.append(system.process_xml(etree.tostring(child)).location.url())
+    #         except:
+    #             log.exception("Unable to load child when parsing GST. Continuing...")
+    #             continue
+    #     return {'children': children}
+
+    # def definition_to_xml(self, resource_fs):
+    #     '''Return an xml element representing this definition.'''
+    #     import ipdb; ipdb.set_trace()
+    #     xml_object = etree.Element('gst')
+
+    #     def add_child(k):
+    #         # child_str = '<{tag}>{body}</{tag}>'.format(tag=k, body=self.definition[k])
+    #         child_str = child.export_to_xml(resource_fs)
+    #         child_node = etree.fromstring(child_str)
+    #         xml_object.append(child_node)
+
+    #     for child in self.get_children():
+    #         add_child(child)
+
+    #     return xml_object
+
+
+    # def __init__(self, system, definition, **kwargs):
+    #     '''Render and save the template for this descriptor instance'''
+    #     super(CustomTagDescriptor, self).__init__(system, definition, **kwargs)
+    #     self.rendered_html = self.render_template(system, definition['data'])
\ No newline at end of file

From d0fcaf0ac4f2de72ce696e125905184eab934ca8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BB=D0=B5=D0=BA=D1=81=D0=B0=D0=BD=D0=B4=D1=80?=
 <kryklia@gmail.com>
Date: Mon, 26 Nov 2012 18:11:01 +0200
Subject: [PATCH 002/107] next step

---
 common/lib/xmodule/xmodule/gst_module.py | 71 ++++++++++++------------
 1 file changed, 36 insertions(+), 35 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 8847a5224c..285eeb8fce 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -97,45 +97,46 @@ class GSTDescriptor(RawDescriptor):
     module_class = GSTModule
     template_dir_name = 'gst'
 
-    # @classmethod
-    # def definition_from_xml(cls, xml_object, system):
-    #     """
-    #     Pull out the data into dictionary.
+    @classmethod
+    def definition_from_xml(cls, xml_object, system):
+        """
+        Pull out the data into dictionary.
 
-    #     Returns:
-    #     {
-    #     'def1': 'def1-some-html',
-    #     'def2': 'def2-some-html'
-    #     }
-    #     """
-    #     import ipdb; ipdb.set_trace()
-    #     children = []
-    #     for child in xml_object:
-    #         try:
-    #             children.append(system.process_xml(etree.tostring(child)).location.url())
-    #         except:
-    #             log.exception("Unable to load child when parsing GST. Continuing...")
-    #             continue
-    #     return {'children': children}
+        Returns:
+        {
+        'def1': 'def1-some-html',
+        'def2': 'def2-some-html'
+        }
+        """
+        import ipdb; ipdb.set_trace()
+        children = []
+        for child in xml_object:
+            try:
+                children.append(system.process_xml(etree.tostring(child)).location.url())
+            except:
+                log.exception("Unable to load child when parsing GST. Continuing...")
+                continue
+        return {'children': children}
 
-    # def definition_to_xml(self, resource_fs):
-    #     '''Return an xml element representing this definition.'''
-    #     import ipdb; ipdb.set_trace()
-    #     xml_object = etree.Element('gst')
+    def definition_to_xml(self, resource_fs):
+        '''Return an xml element representing this definition.'''
+        import ipdb; ipdb.set_trace()
+        xml_object = etree.Element('gst')
 
-    #     def add_child(k):
-    #         # child_str = '<{tag}>{body}</{tag}>'.format(tag=k, body=self.definition[k])
-    #         child_str = child.export_to_xml(resource_fs)
-    #         child_node = etree.fromstring(child_str)
-    #         xml_object.append(child_node)
+        def add_child(k):
+            # child_str = '<{tag}>{body}</{tag}>'.format(tag=k, body=self.definition[k])
+            child_str = child.export_to_xml(resource_fs)
+            child_node = etree.fromstring(child_str)
+            xml_object.append(child_node)
 
-    #     for child in self.get_children():
-    #         add_child(child)
+        for child in self.get_children():
+            add_child(child)
 
-    #     return xml_object
+        return xml_object
 
 
-    # def __init__(self, system, definition, **kwargs):
-    #     '''Render and save the template for this descriptor instance'''
-    #     super(CustomTagDescriptor, self).__init__(system, definition, **kwargs)
-    #     self.rendered_html = self.render_template(system, definition['data'])
\ No newline at end of file
+    def __init__(self, system, definition, **kwargs):
+        '''Render and save the template for this descriptor instance'''
+        import ipdb; ipdb.set_trace()
+        super(CustomTagDescriptor, self).__init__(system, definition, **kwargs)
+        self.rendered_html = self.render_template(system, definition['data'])
\ No newline at end of file

From 884db888f953d651d18a1f4cf5445da436451bdd Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Wed, 28 Nov 2012 16:48:07 +0200
Subject: [PATCH 003/107] teting gst

---
 common/lib/xmodule/xmodule/gst_module.py | 128 +++++++++++------------
 1 file changed, 64 insertions(+), 64 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 285eeb8fce..f5b2095d95 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -29,70 +29,70 @@ class GSTModule(XModule):
     def __init__(self, system, location, definition, descriptor, instance_state=None,
                  shared_state=None, **kwargs):
         """
-        pass
-    #     Definition  should have....
-    #     sliders, text, module
+        Definition  should have....
+        sliders, text, module
 
-    #     Sample file:
+        Sample file:
 
-    #     <gst>
-    #         <h2> Plot... </h2>
-    #         <slider name="1" var="a"/>
-    #         <number name="1" var="a"/>
-    #         <plot/>
-    #         <sliders_info>
-    #         <sliders/>
-    #         <numbers_info>
-    #         </numbers_info
-    #         <plot_info>
-    #         </plot_info>
-    #     </gst>
-    #     """
-    #     XModule.__init__(self, system, location, definition, descriptor,
-    #                      instance_state, shared_state, **kwargs)
-    #     import ipdb; ipdb.set_trace()
-    #     self.rendered = False
+        <gst>
+            <h2> Plot... </h2>
+            <slider name="1" var="a"/>
+            <number name="1" var="a"/>
+            <plot/>
+            <sliders_info>
+            <sliders/>
+            <numbers_info>
+            </numbers_info
+            <plot_info>
+            </plot_info>
+        </gst>
+        """
+        XModule.__init__(self, system, location, definition, descriptor,
+                         instance_state, shared_state, **kwargs)
+        # import ipdb; ipdb.set_trace()
+        # self.rendered = False
 
-    # def get_html(self):
-    #     self.render()
-    #     return self.content
+    def get_html(self):
+        self.render()
+        return self.content
 
-    # def render(self):
-    #     import ipdb; ipdb.set_trace()
-    #     if self.rendered:
-    #         return
-    #     ## Returns a set of all types of all sub-children
-    #     contents = []
-    #     # import ipdb; ipdb.set_trace()
-    #     for child in self.get_display_items():
-    #         progress = child.get_progress()
-    #         childinfo = {
-    #             'gst': child.get_html(),
-    #             'plot': "\n".join(
-    #                 grand_child.display_name.strip()
-    #                 for grand_child in child.get_children()
-    #                 if 'display_name' in grand_child.metadata
-    #             ),
-    #             # 'progress_status': Progress.to_js_status_str(progress),
-    #             'progress_detail': Progress.to_js_detail_str(progress),
-    #             'type': child.get_icon_class(),
-    #         }
-    #         # if childinfo['title']=='':
-    #             # childinfo['title'] = child.metadata.get('display_name','')
-    #         contents.append(childinfo)
+    def render(self):
+        # import ipdb; ipdb.set_trace()
+        # if self.rendered:
+            return
+        ## Returns a set of all types of all sub-children
+        # contents = []
+        # # import ipdb; ipdb.set_trace()
+        # for child in self.get_display_items():
+        #     progress = child.get_progress()
+        #     childinfo = {
+        #         'gst': child.get_html(),
+        #         'plot': "\n".join(
+        #             grand_child.display_name.strip()
+        #             for grand_child in child.get_children()
+        #             if 'display_name' in grand_child.metadata
+        #         ),
+        #         # 'progress_status': Progress.to_js_status_str(progress),
+        #         'progress_detail': Progress.to_js_detail_str(progress),
+        #         'type': child.get_icon_class(),
+        #     }
+        #     # if childinfo['title']=='':
+        #         # childinfo['title'] = child.metadata.get('display_name','')
+        #     contents.append(childinfo)
 
-    #     params = {'items': contents,
-    #               'element_id': self.location.html_id(),
-    #               'item_id': self.id,
-    #               'position': self.position,
-    #               'tag': self.location.category
-    #               }
-
-    #     self.content = self.system.render_template('seq_module.html', params)
-    #     self.rendered = True
+        # params = {'items': contents,
+        #           'element_id': self.location.html_id(),
+        #           'item_id': self.id,
+        #           'position': self.position,
+        #           'tag': self.location.category
+                  # }
+        params= {}
+        self.content = self.system.render_template('gst_module.html', params)
+        # self.rendered = True
 
 
-class GSTDescriptor(RawDescriptor):
+# class GSTDescriptor(RawDescriptor):
+class GSTDescriptor(MakoModuleDescriptor, XmlDescriptor):
     mako_template = "widgets/html-edit.html"
     module_class = GSTModule
     template_dir_name = 'gst'
@@ -108,7 +108,7 @@ class GSTDescriptor(RawDescriptor):
         'def2': 'def2-some-html'
         }
         """
-        import ipdb; ipdb.set_trace()
+        # import ipdb; ipdb.set_trace()
         children = []
         for child in xml_object:
             try:
@@ -120,7 +120,7 @@ class GSTDescriptor(RawDescriptor):
 
     def definition_to_xml(self, resource_fs):
         '''Return an xml element representing this definition.'''
-        import ipdb; ipdb.set_trace()
+        # import ipdb; ipdb.set_trace()
         xml_object = etree.Element('gst')
 
         def add_child(k):
@@ -135,8 +135,8 @@ class GSTDescriptor(RawDescriptor):
         return xml_object
 
 
-    def __init__(self, system, definition, **kwargs):
-        '''Render and save the template for this descriptor instance'''
-        import ipdb; ipdb.set_trace()
-        super(CustomTagDescriptor, self).__init__(system, definition, **kwargs)
-        self.rendered_html = self.render_template(system, definition['data'])
\ No newline at end of file
+    # def __init__(self, system, definition, **kwargs):
+    #     '''Render and save the template for this descriptor instance'''
+    #     # import ipdb; ipdb.set_trace()
+    #     super(GSTDescriptor, self).__init__(system, definition, **kwargs)
+    #     self.rendered_html = self.render_template(system, definition['data'])
\ No newline at end of file

From 07cb76a7d99e822b4dbc9c140c6ad929c2bbbbc9 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Thu, 29 Nov 2012 16:43:33 +0200
Subject: [PATCH 004/107] first working version of gst module

---
 common/lib/xmodule/setup.py              |   2 +-
 common/lib/xmodule/xmodule/gst_module.py | 150 +++++++++++------------
 2 files changed, 73 insertions(+), 79 deletions(-)

diff --git a/common/lib/xmodule/setup.py b/common/lib/xmodule/setup.py
index 8deb2a7ce5..86636ef05a 100644
--- a/common/lib/xmodule/setup.py
+++ b/common/lib/xmodule/setup.py
@@ -36,7 +36,7 @@ setup(
             "videodev = xmodule.backcompat_module:TranslateCustomTagDescriptor",
             "videosequence = xmodule.seq_module:SequenceDescriptor",
             "discussion = xmodule.discussion_module:DiscussionDescriptor",
-            "gst = xmodule.gst_module:GSTDescriptor",
+            "graphical_slider_tool = xmodule.gst_module:GraphicalSliderToolDescriptor",
         ]
     }
 )
diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index f5b2095d95..d90bc46e6e 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -1,6 +1,6 @@
 """
-GST (Graphical-Slider-Tool) module is ungraded xmodule used by students to
-understand functional dependencies
+Graphical slider tool module is ungraded xmodule used by students to
+understand functional dependencies.
 """
 
 # import json
@@ -15,11 +15,12 @@ from xmodule.progress import Progress
 from xmodule.exceptions import NotFoundError
 from pkg_resources import resource_string
 from xmodule.raw_module import RawDescriptor
+from xmodule.stringify import stringify_children
 
 # log = logging.getLogger("mitx.common.lib.seq_module")
 
 
-class GSTModule(XModule):
+class GraphicalSliderToolModule(XModule):
     ''' Graphical-Slider-Tool Module
     '''
     # js = {'js': [resource_string(__name__, 'js/src/gst/gst.js')]}
@@ -34,92 +35,92 @@ class GSTModule(XModule):
 
         Sample file:
 
-        <gst>
-            <h2> Plot... </h2>
-            <slider name="1" var="a"/>
-            <number name="1" var="a"/>
-            <plot/>
-            <sliders_info>
-            <sliders/>
-            <numbers_info>
-            </numbers_info
-            <plot_info>
-            </plot_info>
-        </gst>
+        <sequential>
+          <vertical>
+            <graphical_slider_tool>
+              <render>
+                Graphic slider tool html. Can include
+                'number', 'slider' and plot tags. They will be replaced
+                by proper number, slider and plot widgets.
+              </render>
+              <configuration>
+                <sliders>
+                  <slider name="1" var="a" range="-100, 1, 100" />
+                </sliders>
+                <numbers>
+                  <number name="1" var="a"/>
+                </numbers>
+                <plot>
+                  <function name="1" y="x^2 + a"/>
+                  <function name="2" y="3*x + b"/>
+                  <!-- xrange and yrange are optional -->
+                  <xrange>-10, 1, 10</xrange>
+                  <!-- xticks and yticks are optional -->
+                  <xticks>1</xticks>
+                  <yticks>1</yticks>
+                </plot>
+                <!-- if some parameter in function is not related to any slider or
+                number, then only error message is displayed.
+                Sliders and numbers are optional. Plot is required.-->
+              </configuration>
+            </graphical_slider_tool>
+          </vertical>
+        </sequential>
         """
         XModule.__init__(self, system, location, definition, descriptor,
                          instance_state, shared_state, **kwargs)
-        # import ipdb; ipdb.set_trace()
-        # self.rendered = False
 
     def get_html(self):
-        self.render()
+        params = {
+                  'main_html': self.definition['render'].strip(),
+                  'element_id': self.location.html_id(),
+                  'element_class': self.location.category
+                  }
+        self.content = (self.system.render_template(
+                        'graphical_slider_tool.html', params))
         return self.content
 
-    def render(self):
-        # import ipdb; ipdb.set_trace()
-        # if self.rendered:
-            return
-        ## Returns a set of all types of all sub-children
-        # contents = []
-        # # import ipdb; ipdb.set_trace()
-        # for child in self.get_display_items():
-        #     progress = child.get_progress()
-        #     childinfo = {
-        #         'gst': child.get_html(),
-        #         'plot': "\n".join(
-        #             grand_child.display_name.strip()
-        #             for grand_child in child.get_children()
-        #             if 'display_name' in grand_child.metadata
-        #         ),
-        #         # 'progress_status': Progress.to_js_status_str(progress),
-        #         'progress_detail': Progress.to_js_detail_str(progress),
-        #         'type': child.get_icon_class(),
-        #     }
-        #     # if childinfo['title']=='':
-        #         # childinfo['title'] = child.metadata.get('display_name','')
-        #     contents.append(childinfo)
 
-        # params = {'items': contents,
-        #           'element_id': self.location.html_id(),
-        #           'item_id': self.id,
-        #           'position': self.position,
-        #           'tag': self.location.category
-                  # }
-        params= {}
-        self.content = self.system.render_template('gst_module.html', params)
-        # self.rendered = True
-
-
-# class GSTDescriptor(RawDescriptor):
-class GSTDescriptor(MakoModuleDescriptor, XmlDescriptor):
-    mako_template = "widgets/html-edit.html"
-    module_class = GSTModule
-    template_dir_name = 'gst'
+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:
-        {
-        'def1': 'def1-some-html',
-        'def2': 'def2-some-html'
-        }
+            dict
         """
-        # import ipdb; ipdb.set_trace()
-        children = []
-        for child in xml_object:
-            try:
-                children.append(system.process_xml(etree.tostring(child)).location.url())
-            except:
-                log.exception("Unable to load child when parsing GST. Continuing...")
-                continue
-        return {'children': children}
+        # 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("Self a\ssessment definition must include \
+                    exactly one '{0}' tag".format(child))
+        expected_children_level_1 = ['plot']
+        for child in expected_children_level_1:
+            if len(xml_object.xpath('configuration')[0].xpath(child)) != 1:
+                raise ValueError("Self a\ssessment 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': xml_object.xpath('configuration')[0],
+                }
 
     def definition_to_xml(self, resource_fs):
-        '''Return an xml element representing this definition.'''
+        '''Return an xml element representing this definition.
+        Not implemented'''
         # import ipdb; ipdb.set_trace()
         xml_object = etree.Element('gst')
 
@@ -133,10 +134,3 @@ class GSTDescriptor(MakoModuleDescriptor, XmlDescriptor):
             add_child(child)
 
         return xml_object
-
-
-    # def __init__(self, system, definition, **kwargs):
-    #     '''Render and save the template for this descriptor instance'''
-    #     # import ipdb; ipdb.set_trace()
-    #     super(GSTDescriptor, self).__init__(system, definition, **kwargs)
-    #     self.rendered_html = self.render_template(system, definition['data'])
\ No newline at end of file

From 54c222a0153073126a74cec3acb050a3e578e24e Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Thu, 29 Nov 2012 16:44:10 +0200
Subject: [PATCH 005/107] template for gst

---
 lms/templates/graphical_slider_tool.html | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 lms/templates/graphical_slider_tool.html

diff --git a/lms/templates/graphical_slider_tool.html b/lms/templates/graphical_slider_tool.html
new file mode 100644
index 0000000000..cb484d9e6c
--- /dev/null
+++ b/lms/templates/graphical_slider_tool.html
@@ -0,0 +1,3 @@
+<div align="center" id="element_id" class="element_class">
+${main_html}
+</div>

From 169d4b123ca9f803ab7b5381a4c4450ece1719a8 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Fri, 30 Nov 2012 14:55:00 +0200
Subject: [PATCH 006/107] updates

---
 common/lib/xmodule/xmodule/gst_module.py | 50 +++++++++++++++++++-----
 lms/templates/graphical_slider_tool.html | 14 ++++++-
 2 files changed, 53 insertions(+), 11 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index d90bc46e6e..e98b7b6c90 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -3,21 +3,19 @@ Graphical slider tool module is ungraded xmodule used by students to
 understand functional dependencies.
 """
 
-# import json
+import json
 import logging
-
 from lxml import etree
+import xmltodict
+import re
 
 from xmodule.mako_module import MakoModuleDescriptor
 from xmodule.xml_module import XmlDescriptor
 from xmodule.x_module import XModule
-from xmodule.progress import Progress
-from xmodule.exceptions import NotFoundError
-from pkg_resources import resource_string
-from xmodule.raw_module import RawDescriptor
 from xmodule.stringify import stringify_children
 
-# log = logging.getLogger("mitx.common.lib.seq_module")
+
+log = logging.getLogger("mitx.common.lib.gst_module")
 
 
 class GraphicalSliderToolModule(XModule):
@@ -71,15 +69,49 @@ class GraphicalSliderToolModule(XModule):
                          instance_state, shared_state, **kwargs)
 
     def get_html(self):
+        self.get_configuration()
+        gst_html = self.substitute_controls(self.definition['render'].strip())
+
         params = {
-                  'main_html': self.definition['render'].strip(),
+                  'gst_html': gst_html,
                   'element_id': self.location.html_id(),
-                  'element_class': self.location.category
+                  'element_class': self.location.category,
+                  'configuration_json': self.configuration_json
                   }
         self.content = (self.system.render_template(
                         'graphical_slider_tool.html', params))
+        # import ipdb; ipdb.set_trace()
         return self.content
 
+    def substitute_controls(self, html_string):
+        """ Substitue control element via their divs.
+        Simple variant: slider and plot controls are not inside any tag.
+        """
+        plot_div = '<div class="${element_class}_plot" id="${element_id}_plot" \
+        style="width: 600px; height: 600px; padding: 0px; position: relative;"> \
+        This is plot</div>'
+        html_string.replace('$plot$', plot_div)
+        vars = [x['@var'] for x in json.loads(self.configuration_json)['root']['sliders']['slider']]
+        for var in vars:
+            m = re.match('$slider\[([0-9]+),([0-9]+)]', self.value.strip().replace(' ', ''))
+        if m:
+            # Note: we subtract 15 to compensate for the size of the dot on the screen.
+            # (is a 30x30 image--lms/static/green-pointer.png).
+            (self.gx, self.gy) = [int(x) - 15 for x in m.groups()]
+        html.replace('$slider' + ' ' + x['@var'])
+        return html_string
+
+    def get_configuration(self):
+        """Parse self.definition['configuration'] and transfer it to javascript
+        via json.
+        """
+        # root added for interface compatibility with xmltodict.parse
+        self.configuration_json = json.dumps(
+                xmltodict.parse('<root>' +
+                stringify_children(self.definition['configuration'])
+                             + '</root>'))
+        return self.configuration_json
+
 
 class GraphicalSliderToolDescriptor(MakoModuleDescriptor, XmlDescriptor):
     module_class = GraphicalSliderToolModule
diff --git a/lms/templates/graphical_slider_tool.html b/lms/templates/graphical_slider_tool.html
index cb484d9e6c..7d6cc292c5 100644
--- a/lms/templates/graphical_slider_tool.html
+++ b/lms/templates/graphical_slider_tool.html
@@ -1,3 +1,13 @@
-<div align="center" id="element_id" class="element_class">
-${main_html}
+<div align="center" id="${element_id}" class="${element_class}">
+<!-- xidden field to read configuration json from -->
+<div class="${element_class}" id="${element_id}_json" style="hidden"
+data-json="${configuration_json}">
+
+<!-- main xml with marked places for sliders, number and plots -->
+${gst_html}
+
+
+{# widgests  <div class="slider" id="${element_class}_1" data-var="a"></div> #}
+
+
 </div>

From 69d0156c36c9316b365aa6128d09c737f3b78177 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Fri, 30 Nov 2012 17:17:32 +0200
Subject: [PATCH 007/107] slider, plot and input contrlos are transferred from
 xml to html substituted to proper div elements

---
 common/lib/xmodule/xmodule/gst_module.py | 50 ++++++++++++++++++------
 lms/templates/graphical_slider_tool.html |  7 +---
 2 files changed, 41 insertions(+), 16 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index e98b7b6c90..2d65b768ec 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -70,12 +70,14 @@ class GraphicalSliderToolModule(XModule):
 
     def get_html(self):
         self.get_configuration()
+        self.html_id = self.location.html_id()
+        self.html_class = self.location.category
         gst_html = self.substitute_controls(self.definition['render'].strip())
-
+        
         params = {
                   'gst_html': gst_html,
-                  'element_id': self.location.html_id(),
-                  'element_class': self.location.category,
+                  'element_id': self.html_id,
+                  'element_class': self.html_class,
                   'configuration_json': self.configuration_json
                   }
         self.content = (self.system.render_template(
@@ -87,18 +89,44 @@ class GraphicalSliderToolModule(XModule):
         """ Substitue control element via their divs.
         Simple variant: slider and plot controls are not inside any tag.
         """
+        #substitute plot
         plot_div = '<div class="${element_class}_plot" id="${element_id}_plot" \
         style="width: 600px; height: 600px; padding: 0px; position: relative;"> \
         This is plot</div>'
-        html_string.replace('$plot$', plot_div)
-        vars = [x['@var'] for x in json.loads(self.configuration_json)['root']['sliders']['slider']]
+        html_string = html_string.replace('$plot$', plot_div)
+
+        # substitute sliders
+        sliders = json.loads(self.configuration_json)['root']['sliders']['slider']
+        if type(sliders) == dict:
+            sliders = [sliders]
+        vars = [x['@var'] for x in sliders]
+
+        slider_div = '<div class="{element_class}_slider" id="{element_id}_{var}" \
+        data-var="{var}">This is slider</div>'
+
         for var in vars:
-            m = re.match('$slider\[([0-9]+),([0-9]+)]', self.value.strip().replace(' ', ''))
-        if m:
-            # Note: we subtract 15 to compensate for the size of the dot on the screen.
-            # (is a 30x30 image--lms/static/green-pointer.png).
-            (self.gx, self.gy) = [int(x) - 15 for x in m.groups()]
-        html.replace('$slider' + ' ' + x['@var'])
+            html_string = re.sub(r'\$slider\s+' + var + r'\$',
+                                slider_div.format(element_class=self.html_class,
+                                                  element_id=self.html_id,
+                                                  var=var),
+                                html_string, flags=re.IGNORECASE | re.UNICODE)
+
+        # substitute numbers
+        inputs = json.loads(self.configuration_json)['root']['inputs']['input']
+        if type(inputs) == dict:
+            inputs = [inputs]
+        vars = [x['@var'] for x in inputs]
+
+        input_div = '<div class="{element_class}_input" id="{element_id}_{var}" \
+        data-var="{var}">This is input</div>'
+
+        for var in vars:
+            html_string = re.sub(r'\$input\s+' + var + r'\$',
+                                input_div.format(element_class=self.html_class,
+                                                 element_id=self.html_id,
+                                                 var=var),
+                                html_string, flags=re.IGNORECASE | re.UNICODE)
+        # import ipdb; ipdb.set_trace()
         return html_string
 
     def get_configuration(self):
diff --git a/lms/templates/graphical_slider_tool.html b/lms/templates/graphical_slider_tool.html
index 7d6cc292c5..920e53cab3 100644
--- a/lms/templates/graphical_slider_tool.html
+++ b/lms/templates/graphical_slider_tool.html
@@ -1,13 +1,10 @@
 <div align="center" id="${element_id}" class="${element_class}">
+
 <!-- xidden field to read configuration json from -->
 <div class="${element_class}" id="${element_id}_json" style="hidden"
-data-json="${configuration_json}">
+data-json="${configuration_json}"></div>
 
 <!-- main xml with marked places for sliders, number and plots -->
 ${gst_html}
 
-
-{# widgests  <div class="slider" id="${element_class}_1" data-var="a"></div> #}
-
-
 </div>

From 30df77b9b24131c9e5960a81838379844c11727e Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Fri, 30 Nov 2012 17:21:30 +0200
Subject: [PATCH 008/107] added xmltodict to dependencies

---
 requirements.txt | 1 +
 1 file changed, 1 insertion(+)

diff --git a/requirements.txt b/requirements.txt
index a3e1e3e6e5..08cfe57e2e 100644
--- a/requirements.txt
+++ b/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

From da4a676513e201290ce02bdd36b90725163068f6 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Mon, 3 Dec 2012 15:08:37 +0200
Subject: [PATCH 009/107] working xmodule - GsT

---
 common/lib/xmodule/xmodule/gst_module.py      | 68 +++++++++++++------
 .../js/src/graphical_slider_tool/gst.js       | 17 +++++
 lms/templates/graphical_slider_tool.html      | 12 ++++
 3 files changed, 77 insertions(+), 20 deletions(-)
 create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst.js

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 2d65b768ec..60c03dec10 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -13,6 +13,7 @@ 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("mitx.common.lib.gst_module")
@@ -21,9 +22,8 @@ log = logging.getLogger("mitx.common.lib.gst_module")
 class GraphicalSliderToolModule(XModule):
     ''' Graphical-Slider-Tool Module
     '''
-    # js = {'js': [resource_string(__name__, 'js/src/gst/gst.js')]}
-    # #css = {'scss': [resource_string(__name__, 'css/capa/display.scss')]}
-    # js_module_name = "GST"
+    js = {'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):
@@ -37,30 +37,55 @@ class GraphicalSliderToolModule(XModule):
           <vertical>
             <graphical_slider_tool>
               <render>
-                Graphic slider tool html. Can include
-                'number', 'slider' and plot tags. They will be replaced
-                by proper number, slider and plot widgets.
+                <p>Graphic slider tool html.</p>
+                <p>Can include 'input', 'slider' and 'plot' tags.
+                They will be replaced by proper number, slider and plot
+                widgets. </p>
+                For example: $slider a$, second $slider b$,
+                  number $input a$, and, plot:
+                  $plot$
+
+                  <!-- Sliders, and plot cannot be inside <p> -->
               </render>
               <configuration>
                 <sliders>
-                  <slider name="1" var="a" range="-100, 1, 100" />
+                  <!-- optional: width=100 (in pixels), default is 400,
+                  show_value=[editable, not-editable], default is disabled.-->
+                  <slider var="a" range="-100, 1, 100" />
+                  <slider var="b" range="-1000, 100, 1000" witdh="300"/>
                 </sliders>
-                <numbers>
-                  <number name="1" var="a"/>
-                </numbers>
+                <inputs>
+                  <!-- optional: width=100 (in pixels), readonly=[true|false] -->
+                  <input var="a" initial="1"/>
+                </inputs>
                 <plot>
-                  <function name="1" y="x^2 + a"/>
-                  <function name="2" y="3*x + b"/>
-                  <!-- xrange and yrange are optional -->
-                  <xrange>-10, 1, 10</xrange>
-                  <!-- xticks and yticks are optional -->
-                  <xticks>1</xticks>
-                  <yticks>1</yticks>
+                  <!-- optional: color=[standard web]; line=[true|false], default true;
+                  dot=[true|false], default false; label="string",
+                  style of line =[normal, dashed], default normal,
+                  point size-->
+                  <function y="x^2 + a" />
+                  <function y="3*x + b" color="red"/>
+                  <!-- asymtotes are functions,
+                  optional: name="string" -->
+                  <function y="b" color="red" style="dashed" name="b"/>
+                  <function y="b/2" color="red" style="dashed" name="b/2"/>
+                  <!-- xrange: min, max, yrange is calculated automatically -->
+                  <xrange>-10, 10</xrange>
+                  <!-- optional number of points, default is 300 -->
+                  <numpoints>60</numpoints>
+                  <!-- xticks and yticks are optional: min, step, max -->
+                  <xticks>-9, 1, 9</xticks>
+                  <yticks>-9, 1, 9</yticks>
+                  <!-- xaxis and xaxis are optional -->
+                  <xaxis unit="cm"/>
+                  <yaxis unit="s"/>
                 </plot>
                 <!-- if some parameter in function is not related to any slider or
                 number, then only error message is displayed.
                 Sliders and numbers are optional. Plot is required.-->
               </configuration>
+              <plot_code>
+              </plot_code>
             </graphical_slider_tool>
           </vertical>
         </sequential>
@@ -73,12 +98,13 @@ class GraphicalSliderToolModule(XModule):
         self.html_id = self.location.html_id()
         self.html_class = self.location.category
         gst_html = self.substitute_controls(self.definition['render'].strip())
-        
+        # import ipdb; ipdb.set_trace()
         params = {
                   'gst_html': gst_html,
                   'element_id': self.html_id,
                   'element_class': self.html_class,
-                  'configuration_json': self.configuration_json
+                  'configuration_json': self.configuration_json,
+                  'plot_code': self.definition['plot_code']
                   }
         self.content = (self.system.render_template(
                         'graphical_slider_tool.html', params))
@@ -157,11 +183,12 @@ class GraphicalSliderToolDescriptor(MakoModuleDescriptor, XmlDescriptor):
             dict
         """
         # check for presense of required tags in xml
-        expected_children_level_0 = ['render', 'configuration']
+        expected_children_level_0 = ['render', 'configuration', 'plot_code']
         for child in expected_children_level_0:
             if len(xml_object.xpath(child)) != 1:
                 raise ValueError("Self a\ssessment definition must include \
                     exactly one '{0}' tag".format(child))
+
         expected_children_level_1 = ['plot']
         for child in expected_children_level_1:
             if len(xml_object.xpath('configuration')[0].xpath(child)) != 1:
@@ -176,6 +203,7 @@ class GraphicalSliderToolDescriptor(MakoModuleDescriptor, XmlDescriptor):
         return {
                     'render': parse('render'),
                     'configuration': xml_object.xpath('configuration')[0],
+                    'plot_code': parse('plot_code'),
                 }
 
     def definition_to_xml(self, resource_fs):
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst.js
new file mode 100644
index 0000000000..03778ea437
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst.js
@@ -0,0 +1,17 @@
+//  Graphical Slider Tool module
+
+(function() {
+    this.GraphicalSliderTool = (function() {
+        function GST(el) {
+            console.log(el);
+        // element is :
+        //<section class="xmodule_display
+        // xmodule_GraphicalSliderToolModule" data-type="GST">
+        }
+        // console.log('in GST');
+        return GST;
+
+    })();
+}).call(this);
+// this=window, after call
+// window['Graphical_Slider_Tool'] is available.
\ No newline at end of file
diff --git a/lms/templates/graphical_slider_tool.html b/lms/templates/graphical_slider_tool.html
index 920e53cab3..fc5052893a 100644
--- a/lms/templates/graphical_slider_tool.html
+++ b/lms/templates/graphical_slider_tool.html
@@ -4,7 +4,19 @@
 <div class="${element_class}" id="${element_id}_json" style="hidden"
 data-json="${configuration_json}"></div>
 
+<!-- xidden field to read configuration json from -->
+<div class="${element_class}" id="${element_id}_plot_code" style="hidden"
+data-plot="${plot_code}"></div>
+
 <!-- main xml with marked places for sliders, number and plots -->
 ${gst_html}
 
 </div>
+
+
+<script type="text/javascript">
+//  wil be invoked for every GST section
+  $(document).ready(function() {
+    console.log('Another GST applet is loaded')
+  });
+</script>

From 643ac69a57af84733318fd06675a3f1126661ff2 Mon Sep 17 00:00:00 2001
From: valera-rozuvan <valera.rozuvan@gmail.com>
Date: Wed, 5 Dec 2012 16:56:31 +0200
Subject: [PATCH 010/107] Separating JS from the html for GST.

---
 common/static/js/graphical_slider_tool/main.js |  1 +
 lms/templates/graphical_slider_tool.html       | 10 +++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)
 create mode 100644 common/static/js/graphical_slider_tool/main.js

diff --git a/common/static/js/graphical_slider_tool/main.js b/common/static/js/graphical_slider_tool/main.js
new file mode 100644
index 0000000000..bb624d5888
--- /dev/null
+++ b/common/static/js/graphical_slider_tool/main.js
@@ -0,0 +1 @@
+alert('Hello, world!');
diff --git a/lms/templates/graphical_slider_tool.html b/lms/templates/graphical_slider_tool.html
index fc5052893a..97fca83ff4 100644
--- a/lms/templates/graphical_slider_tool.html
+++ b/lms/templates/graphical_slider_tool.html
@@ -14,9 +14,9 @@ ${gst_html}
 </div>
 
 
-<script type="text/javascript">
-//  wil be invoked for every GST section
-  $(document).ready(function() {
-    console.log('Another GST applet is loaded')
-  });
+<script type="text/javascript" src="/static/js/graphical_slider_tool/main.js">
+    // wil be invoked for every GST section
+    // $(document).ready(function() {
+    //     console.log('Another GST applet is loaded')
+    // });
 </script>

From 0913e9ef69c6f12f5d87195c54d683de040bc82c Mon Sep 17 00:00:00 2001
From: valera-rozuvan <valera.rozuvan@gmail.com>
Date: Wed, 5 Dec 2012 17:16:57 +0200
Subject: [PATCH 011/107] Work on GST.

---
 .../js/src/graphical_slider_tool/module.js    | 15 ++++
 .../js/graphical_slider_tool/gst_module.js    | 15 ++++
 .../static/js/graphical_slider_tool/main.js   | 76 ++++++++++++++++++-
 lms/envs/common.py                            |  1 +
 lms/templates/graphical_slider_tool.html      | 26 ++-----
 5 files changed, 114 insertions(+), 19 deletions(-)
 create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/module.js
 create mode 100644 common/static/js/graphical_slider_tool/gst_module.js

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/module.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/module.js
new file mode 100644
index 0000000000..c4661b5e44
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/module.js
@@ -0,0 +1,15 @@
+// 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([], function () {
+    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)
diff --git a/common/static/js/graphical_slider_tool/gst_module.js b/common/static/js/graphical_slider_tool/gst_module.js
new file mode 100644
index 0000000000..c4661b5e44
--- /dev/null
+++ b/common/static/js/graphical_slider_tool/gst_module.js
@@ -0,0 +1,15 @@
+// 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([], function () {
+    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)
diff --git a/common/static/js/graphical_slider_tool/main.js b/common/static/js/graphical_slider_tool/main.js
index bb624d5888..da36d9c9d6 100644
--- a/common/static/js/graphical_slider_tool/main.js
+++ b/common/static/js/graphical_slider_tool/main.js
@@ -1 +1,75 @@
-alert('Hello, world!');
+// 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) {
+
+// For documentation please check:
+//     http://requirejs.org/docs/api.html
+requirejs.config({
+    // Because require.js is included as a simple <script> tag (and is
+    // forcefully namespaced) it does not get it's configuration from a
+    // predefined 'data-main' attribute. Therefore, from the start, it assumes
+    // that the 'baseUrl' is the same directory that require.js itself is
+    // contained in - i.e. in '/static/js/vendor'. So, we must specify a
+    // correct 'baseUrl'.
+    //
+    // Require JS initially searches this directory for all of the specified
+    // dependencies. If the dependency is
+    //
+    //     'sylvester'
+    //
+    // then it will try to get it from
+    //
+    //     baseUrl + '/' + 'sylvester' + '.js'
+    //
+    // If the dependency is
+    //
+    //     'vendor_libs/sylvester'
+    //
+    // then it will try to get it from
+    //
+    //     baseUrl + '/' + 'vendor_libs/sylvester' + '.js'
+    //
+    // This means two things. One - you can use sub-folders to separate your
+    // code. Two - don't include the '.js' suffix when specifying a dependency.
+    //
+    // For documentation please check:
+    //     http://requirejs.org/docs/api.html#config-baseUrl
+    'baseUrl': '/static/js/graphical_slider_tool',
+
+    // If you need to load from another path, you can specify it here on a
+    // per-module basis. For example you can specify CDN sources here, or
+    // absolute paths that lie outside of the 'baseUrl' directory.
+    //
+    // For documentation please check:
+    //     http://requirejs.org/docs/api.html#config-paths
+    'paths': {
+
+    },
+
+    // Since all of the modules that we require are not aware of our custom
+    // RequireJS solution, that means all of them will be working in the
+    // "old mode". I.e. they will populate the global namespace with their
+    // module object.
+    //
+    // For each module that we will use, we will specify what is exports into
+    // the global namespace, and, if necessary, other modules that it depends.
+    // on. Module dependencies  (downloading them, inserting into the document,
+    // etc.) are handled by RequireJS.
+    //
+    // For documentation please check:
+    //     http://requirejs.org/docs/api.html#config-shim
+    'shim': {
+
+    }
+}); // End-of: requirejs.config({
+
+// Start the main app logic.
+requirejs(['gst_module'], function (GstModule) {
+    console.log(GstModule);
+}); // End-of: requirejs(['gst_module'], function (GstModule)
+
+// 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/lms/envs/common.py b/lms/envs/common.py
index 0364a8b6f8..6790e5b714 100644
--- a/lms/envs/common.py
+++ b/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',
diff --git a/lms/templates/graphical_slider_tool.html b/lms/templates/graphical_slider_tool.html
index 97fca83ff4..d6cffc67e2 100644
--- a/lms/templates/graphical_slider_tool.html
+++ b/lms/templates/graphical_slider_tool.html
@@ -1,22 +1,12 @@
 <div align="center" id="${element_id}" class="${element_class}">
+    <!-- xidden field to read configuration json from -->
+    <div class="${element_class}" id="${element_id}_json" style="hidden"
+    data-json="${configuration_json}"></div>
 
-<!-- xidden field to read configuration json from -->
-<div class="${element_class}" id="${element_id}_json" style="hidden"
-data-json="${configuration_json}"></div>
-
-<!-- xidden field to read configuration json from -->
-<div class="${element_class}" id="${element_id}_plot_code" style="hidden"
-data-plot="${plot_code}"></div>
-
-<!-- main xml with marked places for sliders, number and plots -->
-${gst_html}
+    <!-- xidden field to read configuration json from -->
+    <div class="${element_class}" id="${element_id}_plot_code" style="hidden"
+    data-plot="${plot_code}"></div>
 
+    <!-- main xml with marked places for sliders, number and plots -->
+    ${gst_html}
 </div>
-
-
-<script type="text/javascript" src="/static/js/graphical_slider_tool/main.js">
-    // wil be invoked for every GST section
-    // $(document).ready(function() {
-    //     console.log('Another GST applet is loaded')
-    // });
-</script>

From 5990fa2ef5e382465f2d042efbe5a44eba5a4762 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Fri, 7 Dec 2012 17:25:24 +0200
Subject: [PATCH 012/107] Integrated RequireJS with xmodule for GST.

---
 common/lib/xmodule/xmodule/gst_module.py      | 14 ++++++-
 .../js/src/graphical_slider_tool/gst.js       | 37 ++++++++++---------
 .../js/src/graphical_slider_tool/gst_main.js  | 17 +++++++++
 .../{module.js => mod1.js}                    |  3 +-
 .../js/src/graphical_slider_tool/mod2.js      | 16 ++++++++
 .../js/src/graphical_slider_tool/mod3.js      | 19 ++++++++++
 .../js/src/graphical_slider_tool/mod4.js      | 16 ++++++++
 .../js/src/graphical_slider_tool/mod5.js      | 16 ++++++++
 8 files changed, 119 insertions(+), 19 deletions(-)
 create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst_main.js
 rename common/lib/xmodule/xmodule/js/src/graphical_slider_tool/{module.js => mod1.js} (88%)
 create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod2.js
 create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod3.js
 create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod4.js
 create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod5.js

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 60c03dec10..f89cb0f990 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -22,7 +22,19 @@ log = logging.getLogger("mitx.common.lib.gst_module")
 class GraphicalSliderToolModule(XModule):
     ''' Graphical-Slider-Tool Module
     '''
-    js = {'js': [resource_string(__name__, 'js/src/graphical_slider_tool/gst.js')]}
+
+    js = {
+      'js': [
+        resource_string(__name__, 'js/src/graphical_slider_tool/gst_main.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/mod1.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/mod2.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/mod3.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/mod4.js'),
+        resource_string(__name__, 'js/src/graphical_slider_tool/mod5.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,
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst.js
index 03778ea437..1434d05f70 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst.js
@@ -1,17 +1,20 @@
-//  Graphical Slider Tool module
-
-(function() {
-    this.GraphicalSliderTool = (function() {
-        function GST(el) {
-            console.log(el);
-        // element is :
-        //<section class="xmodule_display
-        // xmodule_GraphicalSliderToolModule" data-type="GST">
-        }
-        // console.log('in GST');
-        return GST;
-
-    })();
-}).call(this);
-// this=window, after call
-// window['Graphical_Slider_Tool'] is available.
\ No newline at end of file
+/*
+ * 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'));
+        });
+    });
+};
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
new file mode 100644
index 0000000000..66f98eddf7
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/gst_main.js
@@ -0,0 +1,17 @@
+// 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', ['mod1', 'mod2', 'mod3', 'mod4'], function (mod1, mod2, mod3, mod4) {
+    return GstMain;
+
+    function GstMain(gstId) {
+        console.log('The DOM ID of the current GST element is ' + gstId);
+    }
+});
+
+// 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/module.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod1.js
similarity index 88%
rename from common/lib/xmodule/xmodule/js/src/graphical_slider_tool/module.js
rename to common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod1.js
index c4661b5e44..44674b96d3 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/module.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod1.js
@@ -2,7 +2,8 @@
 // define() functions from Require JS available inside the anonymous function.
 (function (requirejs, require, define) {
 
-define([], function () {
+define('mod1', [], function () {
+    console.log('we are in the mod1 callback');
     return {
         'module_status': 'OK'
     };
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod2.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod2.js
new file mode 100644
index 0000000000..9c26bb1dfe
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod2.js
@@ -0,0 +1,16 @@
+// 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('mod2', [], function () {
+    console.log('we are in the mod2 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)
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod3.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod3.js
new file mode 100644
index 0000000000..21961f3611
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod3.js
@@ -0,0 +1,19 @@
+// 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('mod3', ['mod5'], function (mod5) {
+    console.log('we are in the mod3 callback');
+
+    console.log('mod5 status: [' + mod5.module_status + '].');
+
+    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)
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod4.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod4.js
new file mode 100644
index 0000000000..0edf809155
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod4.js
@@ -0,0 +1,16 @@
+// 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('mod4', [], function () {
+    console.log('we are in the mod4 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)
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod5.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod5.js
new file mode 100644
index 0000000000..5e843ac468
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod5.js
@@ -0,0 +1,16 @@
+// 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)

From 080e96fdc481b95f9a50348c368872baacc17a12 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Mon, 10 Dec 2012 08:28:34 +0200
Subject: [PATCH 013/107] Work in progress on GST.

---
 common/lib/xmodule/xmodule/gst_module.py      |  14 +-
 .../{mod3.js => general_methods.js}           |  12 +-
 .../js/src/graphical_slider_tool/gst_main.js  |  12 +-
 .../js/src/graphical_slider_tool/logme.js     |  54 ++++++
 .../js/src/graphical_slider_tool/mod1.js      |  16 --
 .../js/src/graphical_slider_tool/mod2.js      |  16 --
 .../js/src/graphical_slider_tool/mod4.js      |  16 --
 .../js/src/graphical_slider_tool/sliders.js   | 142 +++++++++++++++
 .../js/src/graphical_slider_tool/state.js     | 165 ++++++++++++++++++
 lms/templates/graphical_slider_tool.html      |  16 +-
 10 files changed, 395 insertions(+), 68 deletions(-)
 rename common/lib/xmodule/xmodule/js/src/graphical_slider_tool/{mod3.js => general_methods.js} (65%)
 create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/logme.js
 delete mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod1.js
 delete mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod2.js
 delete mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod4.js
 create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/sliders.js
 create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/state.js

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index f89cb0f990..3d7b8a9f02 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -26,10 +26,10 @@ class GraphicalSliderToolModule(XModule):
     js = {
       'js': [
         resource_string(__name__, 'js/src/graphical_slider_tool/gst_main.js'),
-        resource_string(__name__, 'js/src/graphical_slider_tool/mod1.js'),
-        resource_string(__name__, 'js/src/graphical_slider_tool/mod2.js'),
-        resource_string(__name__, 'js/src/graphical_slider_tool/mod3.js'),
-        resource_string(__name__, 'js/src/graphical_slider_tool/mod4.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/mod5.js'),
 
         resource_string(__name__, 'js/src/graphical_slider_tool/gst.js')
@@ -128,7 +128,7 @@ class GraphicalSliderToolModule(XModule):
         Simple variant: slider and plot controls are not inside any tag.
         """
         #substitute plot
-        plot_div = '<div class="${element_class}_plot" id="${element_id}_plot" \
+        plot_div = '<div class="' + self.html_class + '_plot" id="' + self.html_id + '_plot" \
         style="width: 600px; height: 600px; padding: 0px; position: relative;"> \
         This is plot</div>'
         html_string = html_string.replace('$plot$', plot_div)
@@ -139,7 +139,7 @@ class GraphicalSliderToolModule(XModule):
             sliders = [sliders]
         vars = [x['@var'] for x in sliders]
 
-        slider_div = '<div class="{element_class}_slider" id="{element_id}_{var}" \
+        slider_div = '<div class="{element_class}_slider" id="{element_id}_slider_{var}" \
         data-var="{var}">This is slider</div>'
 
         for var in vars:
@@ -155,7 +155,7 @@ class GraphicalSliderToolModule(XModule):
             inputs = [inputs]
         vars = [x['@var'] for x in inputs]
 
-        input_div = '<div class="{element_class}_input" id="{element_id}_{var}" \
+        input_div = '<div class="{element_class}_input" id="{element_id}_input_{var}" \
         data-var="{var}">This is input</div>'
 
         for var in vars:
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod3.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/general_methods.js
similarity index 65%
rename from common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod3.js
rename to common/lib/xmodule/xmodule/js/src/graphical_slider_tool/general_methods.js
index 21961f3611..9cdd4fff0f 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod3.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/general_methods.js
@@ -2,12 +2,16 @@
 // define() functions from Require JS available inside the anonymous function.
 (function (requirejs, require, define) {
 
-define('mod3', ['mod5'], function (mod5) {
-    console.log('we are in the mod3 callback');
-
-    console.log('mod5 status: [' + mod5.module_status + '].');
+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'
     };
 });
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 66f98eddf7..9f2c4c356d 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
@@ -2,11 +2,19 @@
 // define() functions from Require JS available inside the anonymous function.
 (function (requirejs, require, define) {
 
-define('GstMain', ['mod1', 'mod2', 'mod3', 'mod4'], function (mod1, mod2, mod3, mod4) {
+define('GstMain', ['State', 'logme', 'GeneralMethods', 'Sliders'], function (State, logme, GeneralMethods, Sliders) {
+    logme(GeneralMethods);
+
     return GstMain;
 
     function GstMain(gstId) {
-        console.log('The DOM ID of the current GST element is ' + gstId);
+        var config, state;
+
+        config = JSON.parse($('#' + gstId + '_json').html()).root;
+
+        state = State(gstId, config);
+
+        Sliders(gstId, config, state);
     }
 });
 
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/logme.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/logme.js
new file mode 100644
index 0000000000..c045757044
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/logme.js
@@ -0,0 +1,54 @@
+// 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)
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod1.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod1.js
deleted file mode 100644
index 44674b96d3..0000000000
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod1.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// 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('mod1', [], function () {
-    console.log('we are in the mod1 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)
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod2.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod2.js
deleted file mode 100644
index 9c26bb1dfe..0000000000
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod2.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// 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('mod2', [], function () {
-    console.log('we are in the mod2 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)
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod4.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod4.js
deleted file mode 100644
index 0edf809155..0000000000
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod4.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// 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('mod4', [], function () {
-    console.log('we are in the mod4 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)
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
new file mode 100644
index 0000000000..6ef53bdbeb
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/sliders.js
@@ -0,0 +1,142 @@
+// 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, 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.
+        if ((typeof config.sliders !== 'undefined') &&
+            (typeof config.sliders.slider !== 'undefined')) {
+            if ($.isArray(config.sliders.slider)) {
+                // config.sliders.slider is an array
+
+                for (c1 = 0; c1 < config.sliders.slider.length; c1++) {
+                    createSlider(config.sliders.slider[c1]);
+                }
+            } else if ($.isPlainObject(config.sliders.slider)) {
+                // config.sliders.slider is an object
+                createSlider(config.sliders.slider);
+            }
+        }
+
+        function createSlider(obj) {
+            var constName, constValue, rangeBlobs, valueMin, valueMax,
+                sliderDiv, sliderWidth;
+
+            // The name of the constant is obj['@var']. Multiple sliders and/or
+            // inputs can represent the same constant - therefore we will get
+            // the most recent const value from the state object. The range is
+            // a string composed of 3 blobs, separated by commas. The first
+            // blob is the min value for the slider, the third blob is the max
+            // value for the slider.
+
+            if (typeof obj['@var'] === 'undefined') {
+                return;
+            }
+
+            constName = obj['@var'];
+
+            constValue = state.getConstValue(constName);
+            if (constValue === undefined) {
+                constValue = 0;
+            }
+
+            if (typeof obj['@range'] !== 'string') {
+                valueMin = constValue - 10;
+                valueMax = constValue + 10;
+            } else {
+                rangeBlobs = obj['@range'].split(',');
+
+                // We must have gotten exactly 3 blobs (pieces) from the split.
+                if (rangeBlobs.length !== 3) {
+                    valueMin = constValue - 10;
+                    valueMax = constValue + 10;
+                } else {
+                    // Get the first blob from the split string.
+                    valueMin = parseFloat(rangeBlobs[0]);
+
+                    if (isNaN(valueMin) === true) {
+                        valueMin = constValue - 10;
+                    }
+
+                    // Get the third blob from the split string.
+                    valueMax = parseFloat(rangeBlobs[2]);
+
+                    if (isNaN(valueMax) === true) {
+                        valueMax = constValue + 10;
+                    }
+
+                    // Logically, the min, value, and max should make sense.
+                    // I.e. we will make sure that:
+                    //
+                    //     min <= value <= max
+                    //
+                    // If this is not the case, we will set some defaults.
+                    if ((valueMin > valueMax) ||
+                        (valueMin > constValue) ||
+                        (valueMax < constValue)) {
+                        valueMin = constValue - 10;
+                        valueMax = constValue + 10;
+                    }
+                }
+            }
+
+            sliderDiv = $('#' + gstId + '_slider_' + constName);
+
+            // If a corresponding slider  DIV for this constant does not exist,
+            // do not do anything.
+            if (sliderDiv.length === 0) {
+                return;
+            }
+
+            // 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);
+                }
+            }
+
+            // Set the new width to the slider.
+            sliderDiv.width(sliderWidth);
+
+            // Create a jQuery UI slider from the current DIV. We will set
+            // starting parameters, and will also attach a handler to update
+            // the state on the change event.
+            sliderDiv.slider({
+                'min': valueMin,
+                'max': valueMax,
+                'value': constValue,
+
+                'change': sliderOnChange
+            });
+
+            return;
+
+            function sliderOnChange(event, ui) {
+                state.setConstValue(constName, 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)
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
new file mode 100644
index 0000000000..17c8721a73
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/state.js
@@ -0,0 +1,165 @@
+// 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('State', ['logme'], function (logme) {
+    // 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
+    // configuration object (parsed from a JSON string). It will return and
+    // object containing methods to set and get the private state properties.
+
+    // This module defines and returns a factory constructor.
+    return State;
+
+    /*
+     * function: State
+     *
+     *
+     */
+    function State(gstId, config) {
+        var constants, c1;
+
+        constants = {};
+
+        // We must go through all of the input, and slider elements and
+        // retrieve all of the available constants. These will be added to an
+        // object as it's properties.
+        //
+        // First we will go through all of the inputs.
+        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++) {
+                    addConstFromInput(config.inputs.input[c1]);
+                }
+            } else if ($.isPlainObject(config.inputs.input)) {
+                // config.inputs.input is an object
+                addConstFromInput(config.inputs.input);
+            }
+        }
+
+        // Now we will go through all of the sliders.
+        if ((typeof config.sliders !== 'undefined') &&
+            (typeof config.sliders.slider !== 'undefined')) {
+            if ($.isArray(config.sliders.slider)) {
+                // config.sliders.slider is an array
+
+                for (c1 = 0; c1 < config.sliders.slider.length; c1++) {
+                    addConstFromSlider(config.sliders.slider[c1]);
+                }
+            } else if ($.isPlainObject(config.sliders.slider)) {
+                // config.sliders.slider is an object
+                addConstFromSlider(config.sliders.slider);
+            }
+        }
+
+        logme(constants);
+
+        // The constructor will return an object with methods to operate on
+        // it's private properties.
+        return {
+            'getConstValue': getConstValue,
+            'setConstValue': setConstValue
+        };
+
+        function getConstValue(constName) {
+            if (constants.hasOwnProperty(constName) === false) {
+                // If the name of the constant is not tracked by state, return an
+                // 'undefined' value.
+                return;
+            }
+
+            return constants[constName];
+        }
+
+        function setConstValue(constName, constValue) {
+            if (constants.hasOwnProperty(constName) === false) {
+                // If the name of the constant is not tracked by state, return an
+                // 'undefined' value.
+                return;
+            }
+
+            if (isNaN(parseFloat(constValue)) === true) {
+                // We are interested only in valid float values.
+                return;
+            }
+
+            constants[constName] = parseFloat(constValue);
+
+            logme('From setConstValue: new value for "' + constName + '" is ' + constValue);
+        }
+
+        function addConstFromInput(obj) {
+            var constName, constValue;
+
+            // The name of the constant is obj['@var']. The value (initial) of
+            // the constant is obj['@initial']. I have taken the word 'initial'
+            // into brackets, because multiple inputs and/or sliders can
+            // represent the state of a single constant.
+
+            if (typeof obj['@var'] === 'undefined') {
+                return;
+            }
+
+            constName = obj['@var'];
+
+            if (typeof obj['@initial'] === 'undefined') {
+                constValue = 0;
+            } else {
+                constValue = parseFloat(obj['@initial']);
+
+                if (isNaN(constValue) === true) {
+                    constValue = 0;
+                }
+            }
+
+            constants[constName] = constValue;
+        }
+
+        function addConstFromSlider(obj) {
+            var constName, constValue, rangeBlobs;
+
+            // The name of the constant is obj['@var']. The value (initial) of
+            // the constant is the second blob of the 'range' parameter of the
+            // slider which is obj['@range']. Multiple sliders and/or inputs
+            // can represent the same constant - therefore 'initial' is in
+            // brackets. The range is a string composed of 3 blobs, separated
+            // by commas.
+
+            if (typeof obj['@var'] === 'undefined') {
+                return;
+            }
+
+            constName = obj['@var'];
+
+            if (typeof obj['@range'] !== 'string') {
+                constValue = 0;
+            } else {
+                rangeBlobs = obj['@range'].split(',');
+
+                // We must have gotten exactly 3 blobs (pieces) from the split.
+                if (rangeBlobs.length !== 3) {
+                    constValue = 0;
+                } else {
+                    // Get the second blob from the split string.
+                    constValue = parseFloat(rangeBlobs[1]);
+
+                    if (isNaN(constValue) === true) {
+                        constValue = 0;
+                    }
+                }
+            }
+
+            constants[constName] = constValue;
+        }
+    } // End-of: function 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)
diff --git a/lms/templates/graphical_slider_tool.html b/lms/templates/graphical_slider_tool.html
index d6cffc67e2..17d2bae5e9 100644
--- a/lms/templates/graphical_slider_tool.html
+++ b/lms/templates/graphical_slider_tool.html
@@ -1,12 +1,14 @@
 <div align="center" id="${element_id}" class="${element_class}">
-    <!-- xidden field to read configuration json from -->
-    <div class="${element_class}" id="${element_id}_json" style="hidden"
-    data-json="${configuration_json}"></div>
+    <!-- hidden field to read configuration json from -->
+    <div class="${element_class}" id="${element_id}_json" style="display: none;">
+        ${configuration_json}
+    </div>
 
-    <!-- xidden field to read configuration json from -->
-    <div class="${element_class}" id="${element_id}_plot_code" style="hidden"
-    data-plot="${plot_code}"></div>
+    <!-- hidden field to read configuration json from -->
+    <div class="${element_class}" id="${element_id}_plot_code" style="display: none;">
+        ${plot_code}
+    </div>
 
-    <!-- main xml with marked places for sliders, number and plots -->
+    <!-- main xml with marked places for sliders, numbers, and plot -->
     ${gst_html}
 </div>

From ce7a01dd26b0f407487b4c78a27bad559b9699ae Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Mon, 10 Dec 2012 09:08:36 +0200
Subject: [PATCH 014/107] GST work in progress.

---
 common/lib/xmodule/xmodule/gst_module.py      |  2 +-
 .../js/src/graphical_slider_tool/graph.js     | 62 +++++++++++++++++++
 .../js/src/graphical_slider_tool/gst_main.js  |  7 ++-
 .../js/src/graphical_slider_tool/mod5.js      | 16 -----
 .../js/src/graphical_slider_tool/state.js     |  8 +++
 5 files changed, 77 insertions(+), 18 deletions(-)
 create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
 delete mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod5.js

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 3d7b8a9f02..633f5e9406 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/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')
       ]
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
new file mode 100644
index 0000000000..2aa19cfc02
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -0,0 +1,62 @@
+// 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)
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 9f2c4c356d..68ef73e441 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
@@ -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);
     }
 });
 
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod5.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod5.js
deleted file mode 100644
index 5e843ac468..0000000000
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/mod5.js
+++ /dev/null
@@ -1,16 +0,0 @@
-// 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)
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 17c8721a73..ffd618c51b 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
@@ -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) {

From 7de575a84bf5f1915b5a58c0e0646e8c7f6e99e7 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Mon, 10 Dec 2012 09:26:29 +0200
Subject: [PATCH 015/107] GST work in progress.

---
 .../js/src/graphical_slider_tool/graph.js     | 18 ++++++++----------
 .../js/src/graphical_slider_tool/state.js     | 19 +++++++++++--------
 2 files changed, 19 insertions(+), 18 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 2aa19cfc02..fbd1f96da1 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -19,22 +19,20 @@ define('Graph', ['logme'], function (logme) {
         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();
-        });
+        state.bindUpdatePlotEvent(plotDiv, onUpdatePlot);
 
         generateData();
         updatePlot();
 
         return;
 
+        function onUpdatePlot(event) {
+            logme('redrawing plot');
+
+            generateData();
+            updatePlot();
+        }
+
         function generateData() {
             var a, b, c1;
 
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 ffd618c51b..735c100344 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
@@ -18,7 +18,7 @@ define('State', ['logme'], function (logme) {
      *
      */
     function State(gstId, config) {
-        var constants, c1;
+        var constants, c1, plotDiv;
 
         constants = {};
 
@@ -62,9 +62,16 @@ define('State', ['logme'], function (logme) {
         // it's private properties.
         return {
             'getConstValue': getConstValue,
-            'setConstValue': setConstValue
+            'setConstValue': setConstValue,
+            'bindUpdatePlotEvent': bindUpdatePlotEvent
         };
 
+        function bindUpdatePlotEvent(newPlotDiv, callback) {
+            plotDiv = newPlotDiv;
+
+            plotDiv.bind('update_plot', callback);
+        }
+
         function getConstValue(constName) {
             if (constants.hasOwnProperty(constName) === false) {
                 // If the name of the constant is not tracked by state, return an
@@ -76,8 +83,6 @@ 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.
@@ -93,10 +98,8 @@ define('State', ['logme'], function (logme) {
 
             logme('From setConstValue: new value for "' + constName + '" is ' + constValue);
 
-            plotDiv = $('#' + gstId + '_plot');
-
-            if (plotDiv.length === 1) {
-                plotDiv.trigger('update_plot', [gstId]);
+            if (plotDiv !== undefined) {
+                plotDiv.trigger('update_plot');
             }
         }
 

From 32c70a524c3a3dca1cb1939b6417f9677ee8809b Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Mon, 10 Dec 2012 11:37:55 +0200
Subject: [PATCH 016/107] GST work in progress.

---
 .../js/src/graphical_slider_tool/graph.js     | 95 ++++++++++++++++---
 .../js/src/graphical_slider_tool/gst_main.js  |  7 +-
 .../js/src/graphical_slider_tool/sliders.js   | 12 +--
 .../js/src/graphical_slider_tool/state.js     | 34 +++++--
 4 files changed, 113 insertions(+), 35 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index fbd1f96da1..762789cbf5 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/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);
         }
     }
 });
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 68ef73e441..71de12b423 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,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);
     }
 });
 
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 6ef53bdbeb..e871e9f035 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
@@ -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);
                 }
             }
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 735c100344..d632429c9b 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
@@ -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');
             }

From ae03090f3c980ce5b7c7ee5862f31acc86b08773 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Mon, 10 Dec 2012 12:43:01 +0200
Subject: [PATCH 017/107] GST work in progress.

---
 common/lib/xmodule/xmodule/gst_module.py                  | 5 ++---
 .../xmodule/xmodule/js/src/graphical_slider_tool/graph.js | 8 +++++++-
 .../xmodule/js/src/graphical_slider_tool/sliders.js       | 1 +
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 633f5e9406..c07c0670d7 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -129,8 +129,7 @@ class GraphicalSliderToolModule(XModule):
         """
         #substitute plot
         plot_div = '<div class="' + self.html_class + '_plot" id="' + self.html_id + '_plot" \
-        style="width: 600px; height: 600px; padding: 0px; position: relative;"> \
-        This is plot</div>'
+        style="width: 600px; height: 600px; padding: 0px; position: relative;">This is plot</div>'
         html_string = html_string.replace('$plot$', plot_div)
 
         # substitute sliders
@@ -140,7 +139,7 @@ class GraphicalSliderToolModule(XModule):
         vars = [x['@var'] for x in sliders]
 
         slider_div = '<div class="{element_class}_slider" id="{element_id}_slider_{var}" \
-        data-var="{var}">This is slider</div>'
+        data-var="{var}"></div>'
 
         for var in vars:
             html_string = re.sub(r'\$slider\s+' + var + r'\$',
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 762789cbf5..991cb0a26e 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -28,6 +28,8 @@ define('Graph', [], function () {
         return;
 
         function createFunctions() {
+            var c1;
+
             functions = [];
 
             if (typeof config.plot['function'] === 'undefined') {
@@ -39,7 +41,11 @@ define('Graph', [], function () {
             } else if ($.isPlainObject(config.plot['function']) === true) {
 
             } else if ($.isArray(config.plot['function'])) {
-
+                for (c1 = 0; c1 < config.plot['function'].length; c1++) {
+                    if (typeof config.plot['function'][c1] === 'string') {
+                        addFunction(config.plot['function'][c1]);
+                    }
+                }
             }
 
             return;
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 e871e9f035..226f53d696 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
@@ -112,6 +112,7 @@ define('Sliders', [], function () {
                 'min': valueMin,
                 'max': valueMax,
                 'value': constValue,
+                'step': 0.01,
 
                 'change': sliderOnChange
             });

From 3e9d325a9f166901a2e24bc2dfe3942173f892c8 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Mon, 10 Dec 2012 14:07:06 +0200
Subject: [PATCH 018/107] GST work in progress.

---
 common/lib/xmodule/xmodule/gst_module.py      |  5 +-
 .../js/src/graphical_slider_tool/gst_main.js  |  5 +-
 .../js/src/graphical_slider_tool/inputs.js    | 70 +++++++++++++++++++
 .../js/src/graphical_slider_tool/sliders.js   |  1 +
 .../js/src/graphical_slider_tool/state.js     |  7 ++
 5 files changed, 84 insertions(+), 4 deletions(-)
 create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js

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 = '<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'\$',
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 = $('<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)
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) {

From b08b25b98388e4f42f501c930f8d7a4490fca960 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Mon, 10 Dec 2012 16:11:29 +0200
Subject: [PATCH 019/107] GST work in progress.

---
 common/lib/xmodule/xmodule/gst_module.py      |  4 +--
 .../js/src/graphical_slider_tool/inputs.js    | 27 ++++++++++++-------
 .../js/src/graphical_slider_tool/sliders.js   | 20 ++++++++------
 3 files changed, 32 insertions(+), 19 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 9e9273bc25..61a883fbf8 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -139,8 +139,8 @@ class GraphicalSliderToolModule(XModule):
             sliders = [sliders]
         vars = [x['@var'] for x in sliders]
 
-        slider_div = '<div class="{element_class}_slider" id="{element_id}_slider_{var}" \
-        data-var="{var}"></div>'
+        slider_div = '<span class="{element_class}_slider" id="{element_id}_slider_{var}" \
+        data-var="{var}"></span>'
 
         for var in vars:
             html_string = re.sub(r'\$slider\s+' + var + r'\$',
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
index 5b9f1f87c2..d7f64328e0 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
@@ -27,9 +27,9 @@ define('Inputs', ['logme'], function (logme) {
         }
 
         function createInput(obj) {
-            var constName, constValue, inputDiv, textInputDiv;
+            var constName, constValue, spanEl, inputEl;
 
-            if (typeof obj['@var'] === 'undefined') {
+            if (typeof obj['@var'] !== 'string') {
                 return;
             }
 
@@ -40,19 +40,28 @@ define('Inputs', ['logme'], function (logme) {
                 constValue = 0;
             }
 
-            inputDiv = $('#' + gstId + '_input_' + constName);
+            spanEl = $('#' + gstId + '_input_' + constName);
 
-            if (inputDiv.length === 0) {
+            if (spanEl.length === 0) {
                 return;
             }
 
-            textInputDiv = $('<input type"text" />');
-            textInputDiv.width(50);
+            inputEl = $('<input type"text" />');
 
-            textInputDiv.appendTo(inputDiv);
-            textInputDiv.val(constValue);
+            // inputEl.width(50);
+            inputEl.val(constValue);
+            inputEl.bind('change', inputOnChange);
+            inputEl.button().css({
+                'font': 'inherit',
+                'color': 'inherit',
+                'text-align': 'left',
+                'outline': 'none',
+                'cursor': 'text',
+                'height': '15px',
+                'width': '50px'
+            });
 
-            textInputDiv.bind('change', inputOnChange);
+            inputEl.appendTo(spanEl);
 
             return;
 
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 51bd2c8b12..3db0c3e67c 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
@@ -25,7 +25,7 @@ define('Sliders', [], function () {
 
         function createSlider(obj) {
             var constName, constValue, rangeBlobs, valueMin, valueMax,
-                sliderDiv, sliderWidth;
+                spanEl, sliderEl, sliderWidth;
 
             // The name of the constant is obj['@var']. Multiple sliders and/or
             // inputs can represent the same constant - therefore we will get
@@ -34,7 +34,7 @@ define('Sliders', [], function () {
             // blob is the min value for the slider, the third blob is the max
             // value for the slider.
 
-            if (typeof obj['@var'] === 'undefined') {
+            if (typeof obj['@var'] !== 'string') {
                 return;
             }
 
@@ -85,14 +85,16 @@ define('Sliders', [], function () {
                 }
             }
 
-            sliderDiv = $('#' + gstId + '_slider_' + constName);
+            spanEl = $('#' + gstId + '_slider_' + constName);
 
             // If a corresponding slider  DIV for this constant does not exist,
             // do not do anything.
-            if (sliderDiv.length === 0) {
+            if (spanEl.length === 0) {
                 return;
             }
 
+            sliderEl = $('<div>');
+
             // The default slider width.
             sliderWidth = 400;
 
@@ -103,21 +105,23 @@ define('Sliders', [], function () {
             }
 
             // Set the new width to the slider.
-            sliderDiv.width(sliderWidth);
-            sliderDiv.css('display', 'inline-block');
+            sliderEl.width(sliderWidth);
+            sliderEl.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
             // the state on the change event.
-            sliderDiv.slider({
+            sliderEl.slider({
                 'min': valueMin,
                 'max': valueMax,
                 'value': constValue,
-                'step': 0.01,
+                'step': (valueMax - valueMin) / 50.0,
 
                 'change': sliderOnChange
             });
 
+            sliderEl.appendTo(spanEl);
+
             return;
 
             function sliderOnChange(event, ui) {

From 3682cb46c4522bee93c6acafa7e38c02cc052403 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Mon, 10 Dec 2012 18:37:20 +0200
Subject: [PATCH 020/107] GST work in progress.

---
 .../js/src/graphical_slider_tool/graph.js     |  15 +-
 .../js/src/graphical_slider_tool/inputs.js    |  72 +++++++--
 .../js/src/graphical_slider_tool/sliders.js   | 137 ++++++++++++++----
 3 files changed, 186 insertions(+), 38 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 991cb0a26e..61228413f5 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -121,7 +121,20 @@ define('Graph', [], function () {
         }
 
         function updatePlot() {
-            $.plot(plotDiv, dataSets);
+            $.plot(
+                plotDiv,
+                dataSets,
+                {
+                    'xaxis': {
+                        'min': 0,
+                        'max': 30
+                    },
+                    'yaxis': {
+                        'min': -5,
+                        'max': 5
+                    }
+                }
+            );
         }
     }
 });
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
index d7f64328e0..3e7e55f02c 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
@@ -2,12 +2,24 @@
 // define() functions from Require JS available inside the anonymous function.
 (function (requirejs, require, define) {
 
-define('Inputs', ['logme'], function (logme) {
+define('Inputs', [], function () {
     return Inputs;
 
     function Inputs(gstId, config, state) {
-        logme('Inside "Inputs" module.');
-        logme(gstId, config, state);
+        var constNamesUsed;
+
+        // There should not be more than one text input per a constant. This
+        // just does not make sense. However, nothing really prevents the user
+        // from specifying more than one text input for the same constant name.
+        // That's why we have to track which constant names already have
+        // text inputs for them, and prevent adding further text inputs to
+        // these constants.
+        //
+        // constNamesUsed is an object to which we will add properties having
+        // the name of the constant to which we are adding a text input to.
+        // When creating a new text input, we must consult with this object, to
+        // see if the constant name is not defined as it's property.
+        constNamesUsed = {};
 
         // 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
@@ -15,42 +27,75 @@ define('Inputs', ['logme'], function (logme) {
         if ((typeof config.inputs !== 'undefined') &&
             (typeof config.inputs.input !== 'undefined')) {
             if ($.isArray(config.inputs.input)) {
-                // config.inputs.input is an array
 
+                // config.inputs.input is an array. For each element, we will
+                // add a text input.
                 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
+
+                // config.inputs.input is an object. Add a text input for it.
                 createInput(config.inputs.input);
+
             }
         }
 
         function createInput(obj) {
             var constName, constValue, spanEl, inputEl;
 
+            // The name of the constant is obj['@var']. If it is not specified,
+            // we will skip creating a text input for this constant.
             if (typeof obj['@var'] !== 'string') {
                 return;
             }
-
             constName = obj['@var'];
 
-            constValue = state.getConstValue(constName);
-            if (constValue === undefined) {
-                constValue = 0;
+            // We will not add a text input for a constant which already has a
+            // text input defined for it.
+            //
+            // We will add the constant name to the 'constNamesUsed' object in
+            // the end, when everything went successfully.
+            if (constNamesUsed.hasOwnProperty(constName)) {
+                return;
             }
 
+            // Multiple sliders and/or inputs can represent the same constant.
+            // Therefore we will get the most recent const value from the state
+            // object. If it is undefined, we will skip creating a text input
+            // for this constant.
+            constValue = state.getConstValue(constName);
+            if (constValue === undefined) {
+                return;
+            }
+
+            // With the constant name, and the constant value being defined,
+            // lets get the element on the page into which the text input will
+            // be inserted.
             spanEl = $('#' + gstId + '_input_' + constName);
 
+            // If a corresponding element for this constant does not exist on
+            // the page, we will not be making a text input.
             if (spanEl.length === 0) {
                 return;
             }
 
+            // Create the text input element.
             inputEl = $('<input type"text" />');
 
-            // inputEl.width(50);
+            // Set the current constant to the text input. It will be visible
+            // to the user.
             inputEl.val(constValue);
+
+            // 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.
             inputEl.bind('change', inputOnChange);
+
+            // Lets style the input element nicely. We will use the button()
+            // widget for this since there is no native widget for the text
+            // input.
             inputEl.button().css({
                 'font': 'inherit',
                 'color': 'inherit',
@@ -61,10 +106,17 @@ define('Inputs', ['logme'], function (logme) {
                 'width': '50px'
             });
 
+            // And finally, publish the text input element to the page.
             inputEl.appendTo(spanEl);
 
+            // Don't forget to add the constant to the list of used constants.
+            // Next time a slider for this constant will not be created.
+            constNamesUsed[constName] = true;
+
             return;
 
+            // When the user changes the value of this text input, the 'state'
+            // will be updated, forcing the plot to be redrawn.
             function inputOnChange(event) {
                 state.setConstValue(constName, $(this).val());
             }
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 3db0c3e67c..33bdd89dd1 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
@@ -6,68 +6,117 @@ define('Sliders', [], function () {
     return Sliders;
 
     function Sliders(gstId, config, state) {
+        var constNamesUsed;
+
+        // There should not be more than one slider per a constant. This just
+        // does not make sense. However, nothing really prevents the user from
+        // specifying more than one slider for the same constant name. That's
+        // why we have to track which constant names already have sliders for
+        // them, and prevent adding further sliders to these constants.
+        //
+        // constNamesUsed is an object to which we will add properties having
+        // the name of the constant to which we are adding a slider to. When
+        // creating a new slider, we must consult with this object, to see if
+        // the constant name is not defined as it's property.
+        constNamesUsed = {};
+
         // 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.
         if ((typeof config.sliders !== 'undefined') &&
             (typeof config.sliders.slider !== 'undefined')) {
             if ($.isArray(config.sliders.slider)) {
-                // config.sliders.slider is an array
 
+                // config.sliders.slider is an array. For each object in the
+                // array, create a slider.
                 for (c1 = 0; c1 < config.sliders.slider.length; c1++) {
                     createSlider(config.sliders.slider[c1]);
                 }
+
             } else if ($.isPlainObject(config.sliders.slider)) {
-                // config.sliders.slider is an object
+
+                // config.sliders.slider is an object. Create a slider for it.
                 createSlider(config.sliders.slider);
+
             }
         }
 
         function createSlider(obj) {
-            var constName, constValue, rangeBlobs, valueMin, valueMax,
-                spanEl, sliderEl, sliderWidth;
-
-            // The name of the constant is obj['@var']. Multiple sliders and/or
-            // inputs can represent the same constant - therefore we will get
-            // the most recent const value from the state object. The range is
-            // a string composed of 3 blobs, separated by commas. The first
-            // blob is the min value for the slider, the third blob is the max
-            // value for the slider.
+            var constName, constValue, rangeBlobs, valueMin, valueMax, spanEl,
+                sliderEl, sliderWidth;
 
+            // The name of the constant is obj['@var']. If it is not specified,
+            // we will skip creating a slider for this constant.
             if (typeof obj['@var'] !== 'string') {
                 return;
             }
-
             constName = obj['@var'];
 
-            constValue = state.getConstValue(constName);
-            if (constValue === undefined) {
-                constValue = 0;
+            // We will not add a slider for a constant which already has a
+            // slider defined for it.
+            //
+            // We will add the constant name to the 'constNamesUsed' object in
+            // the end, when everything went successfully.
+            if (constNamesUsed.hasOwnProperty(constName)) {
+                return;
             }
 
+            // Multiple sliders and/or inputs can represent the same constant.
+            // Therefore we will get the most recent const value from the state
+            // object. If it is undefined, then something terrible has
+            // happened! We will skip creating a slider for this constant.
+            constValue = state.getConstValue(constName);
+            if (constValue === undefined) {
+                return;
+            }
+
+            // The range is a string composed of 3 blobs, separated by commas.
+            // The first blob is the min value for the slider, the third blob
+            // is the max value for the slider.
             if (typeof obj['@range'] !== 'string') {
+
+                // If the range is not a string, we will set a default range.
+                // No promise as to the quality of the data points that this
+                // range will produce.
                 valueMin = constValue - 10;
                 valueMax = constValue + 10;
+
             } else {
+
+                // Separate the range string by commas, and store each blob as
+                // an element in an array.
                 rangeBlobs = obj['@range'].split(',');
 
                 // We must have gotten exactly 3 blobs (pieces) from the split.
                 if (rangeBlobs.length !== 3) {
-                    valueMin = constValue - 10;
-                    valueMax = constValue + 10;
+
+                    // Set some sensible defaults, if the range string was
+                    // split into more or less than 3 pieces.
+                    setDefaultMinMax();
+
                 } else {
-                    // Get the first blob from the split string.
+
+                    // Get the first blob from the split string. It is the min
+                    // value.
                     valueMin = parseFloat(rangeBlobs[0]);
 
+                    // Is it a well-formed float number?
                     if (isNaN(valueMin) === true) {
+
+                        // No? Then set a sensible default value.
                         valueMin = constValue - 10;
+
                     }
 
-                    // Get the third blob from the split string.
+                    // Get the third blob from the split string. It is the max.
                     valueMax = parseFloat(rangeBlobs[2]);
 
+                    // Is it a well-formed float number?
                     if (isNaN(valueMax) === true) {
+
+                        // No? Then set a sensible default value.
                         valueMax = constValue + 10;
+
                     }
 
                     // Logically, the min, value, and max should make sense.
@@ -79,38 +128,53 @@ define('Sliders', [], function () {
                     if ((valueMin > valueMax) ||
                         (valueMin > constValue) ||
                         (valueMax < constValue)) {
-                        valueMin = constValue - 10;
-                        valueMax = constValue + 10;
+
+                        // Set some sensible defaults, if min/value/max logic
+                        // is broken.
+                        setDefaultMinMax();
+
                     }
                 }
             }
 
+            // At this point we have the constant name, the constant value, and
+            // the min and max values for this slider. Lets get the element on
+            // the page into which the slider will be inserted.
             spanEl = $('#' + gstId + '_slider_' + constName);
 
-            // If a corresponding slider  DIV for this constant does not exist,
-            // do not do anything.
+            // If a corresponding element for this constant does not exist on
+            // the page, we will not be making a slider.
             if (spanEl.length === 0) {
                 return;
             }
 
+            // Create the slider DIV.
             sliderEl = $('<div>');
 
-            // The default slider width.
+            // We will define the width of the slider to a sensible default.
             sliderWidth = 400;
 
+            // Then we will see if one is provided in the config for this
+            // slider. If we find it, and it is a well-formed integer, we will
+            // use it, instead of the default width.
             if (typeof obj['@width'] === 'string') {
                 if (isNaN(parseInt(obj['@width'], 10)) === false) {
                     sliderWidth = parseInt(obj['@width'], 10);
                 }
             }
 
-            // Set the new width to the slider.
+            // Set the defined width to the slider.
             sliderEl.width(sliderWidth);
+
+            // And make sure that it gets added to the page as an
+            // 'inline-block' element. This will allow for the insertion of the
+            // slider into a paragraph, without the browser forcing it out of
+            // the paragraph onto a new line, separate line.
             sliderEl.css('display', 'inline-block');
 
-            // Create a jQuery UI slider from the current DIV. We will set
+            // 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 change event.
+            // the 'state' on the 'change' event.
             sliderEl.slider({
                 'min': valueMin,
                 'max': valueMax,
@@ -120,13 +184,32 @@ define('Sliders', [], function () {
                 'change': sliderOnChange
             });
 
+            // Append the slider DIV to the element on the page where the user
+            // wants to see it.
             sliderEl.appendTo(spanEl);
 
+            // OK! So we made it this far...
+            //
+            // Adding the constant to the list of used constants. Next time a
+            // slider for this constant will not be created.
+            constNamesUsed[constName] = true;
+
             return;
 
+            // Update the 'state' - i.e. set the value of the constant 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 sliderOnChange(event, ui) {
                 state.setConstValue(constName, ui.value);
             }
+
+            // The sensible defaults for the slider's range.
+            function setDefaultMinMax() {
+                valueMin = constValue - 10;
+                valueMax = constValue + 10;
+            }
         }
     }
 });

From 28f4921924c1e47c7a68a754292a63dcdea6c35e Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Tue, 11 Dec 2012 06:56:43 +0200
Subject: [PATCH 021/107] GST work in progress.

---
 .../js/src/graphical_slider_tool/graph.js     | 44 ++++++++++++++++---
 1 file changed, 39 insertions(+), 5 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 61228413f5..dba0483674 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -2,13 +2,15 @@
 // define() functions from Require JS available inside the anonymous function.
 (function (requirejs, require, define) {
 
-define('Graph', [], function () {
+define('Graph', ['logme'], function (logme) {
 
     return Graph;
 
     function Graph(gstId, config, state) {
         var plotDiv, dataSets, functions;
 
+        logme(config);
+
         plotDiv = $('#' + gstId + '_plot');
 
         if (plotDiv.length === 0) {
@@ -39,11 +41,29 @@ define('Graph', [], function () {
             if (typeof config.plot['function'] === 'string') {
                 addFunction(config.plot['function']);
             } else if ($.isPlainObject(config.plot['function']) === true) {
-
+                addFunction(
+                    config.plot['function']['#text'],
+                    config.plot['function']['@color'],
+                    config.plot['function']['@dot'],
+                    config.plot['function']['@label'],
+                    config.plot['function']['@line'],
+                    config.plot['function']['@point_size'],
+                    config.plot['function']['@style']
+                );
             } else if ($.isArray(config.plot['function'])) {
                 for (c1 = 0; c1 < config.plot['function'].length; c1++) {
                     if (typeof config.plot['function'][c1] === 'string') {
                         addFunction(config.plot['function'][c1]);
+                    } else if ($.isPlainObject(config.plot['function'][c1])) {
+                        addFunction(
+                            config.plot['function'][c1]['#text'],
+                            config.plot['function'][c1]['@color'],
+                            config.plot['function'][c1]['@dot'],
+                            config.plot['function'][c1]['@label'],
+                            config.plot['function'][c1]['@line'],
+                            config.plot['function'][c1]['@point_size'],
+                            config.plot['function'][c1]['@style']
+                        );
                     }
                 }
             }
@@ -76,17 +96,31 @@ define('Graph', [], function () {
                 }
 
                 if (typeof line === 'boolean') {
-                    newFunctionObject['line'] = line;
+                    if ((line === 'true') || (line === true)) {
+                        newFunctionObject['line'] = true;
+                    } else {
+                        newFunctionObject['line'] = false;
+                    }
                 }
 
-                if (typeof dot === 'boolean') {
-                    newFunctionObject['dot'] = dot;
+                if ((typeof dot === 'boolean') || (typeof dot === 'string')) {
+                    if ((dot === 'true') || (dot === true)) {
+                        newFunctionObject['dot'] = true;
+                    } else {
+                        newFunctionObject['dot'] = false;
+                    }
+                }
+
+                if ((newFunctionObject['dot'] === false) && (newFunctionObject['line'] === false)) {
+                    newFunctionObject['line'] = true;
                 }
 
                 if (typeof label === 'string') {
                     newFunctionObject['label'] = label;
                 }
 
+                logme(newFunctionObject);
+
                 functions.push(newFunctionObject);
             }
         }

From 3e46ecef646f194798dff81dc4f4176a9e69a27f Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Tue, 11 Dec 2012 10:47:46 +0200
Subject: [PATCH 022/107] GST work in progress.

---
 .../js/src/graphical_slider_tool/graph.js     | 132 ++++++++++++++----
 .../js/src/graphical_slider_tool/gst_main.js  |   4 +
 .../js/graphical_slider_tool/gst_module.js    |  15 --
 .../static/js/graphical_slider_tool/main.js   |  75 ----------
 4 files changed, 108 insertions(+), 118 deletions(-)
 delete mode 100644 common/static/js/graphical_slider_tool/gst_module.js
 delete mode 100644 common/static/js/graphical_slider_tool/main.js

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index dba0483674..c0c8addf80 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -7,7 +7,7 @@ define('Graph', ['logme'], function (logme) {
     return Graph;
 
     function Graph(gstId, config, state) {
-        var plotDiv, dataSets, functions;
+        var plotDiv, dataSeries, functions;
 
         logme(config);
 
@@ -39,37 +39,55 @@ define('Graph', ['logme'], function (logme) {
             }
 
             if (typeof config.plot['function'] === 'string') {
+
+                // If just one function string is present.
                 addFunction(config.plot['function']);
+
             } else if ($.isPlainObject(config.plot['function']) === true) {
-                addFunction(
-                    config.plot['function']['#text'],
-                    config.plot['function']['@color'],
-                    config.plot['function']['@dot'],
-                    config.plot['function']['@label'],
-                    config.plot['function']['@line'],
-                    config.plot['function']['@point_size'],
-                    config.plot['function']['@style']
-                );
+
+                // If a function is present, but it also has properties
+                // defined.
+                callAddFunction(config.plot['function']);
+
             } else if ($.isArray(config.plot['function'])) {
+
+                // If more than one function is defined.
                 for (c1 = 0; c1 < config.plot['function'].length; c1++) {
+
+                    // For each definition, we must check if it is a simple
+                    // string definition, or a complex one with properties.
                     if (typeof config.plot['function'][c1] === 'string') {
+
+                        // Simple string.
                         addFunction(config.plot['function'][c1]);
+
                     } else if ($.isPlainObject(config.plot['function'][c1])) {
-                        addFunction(
-                            config.plot['function'][c1]['#text'],
-                            config.plot['function'][c1]['@color'],
-                            config.plot['function'][c1]['@dot'],
-                            config.plot['function'][c1]['@label'],
-                            config.plot['function'][c1]['@line'],
-                            config.plot['function'][c1]['@point_size'],
-                            config.plot['function'][c1]['@style']
-                        );
+
+                        // Properties are present.
+                        callAddFunction(config.plot['function'][c1]);
+
                     }
                 }
             }
 
             return;
 
+            // This function will reduce code duplications. We have to call
+            // the function addFunction() several times passing object
+            // properties. A parameters. Rather than writing them out every
+            // time, we will have a single point of
+            function callAddFunction(obj) {
+                addFunction(
+                    obj['#text'],
+                    obj['@color'],
+                    obj['@line'],
+                    obj['@dot'],
+                    obj['@label'],
+                    obj['@style'],
+                    obj['@point_size']
+                );
+            }
+
             function addFunction(funcString, color, line, dot, label, style, point_size) {
                 var newFunctionObject, func, constNames;
 
@@ -95,7 +113,7 @@ define('Graph', ['logme'], function (logme) {
                     newFunctionObject['color'] = color;
                 }
 
-                if (typeof line === 'boolean') {
+                if ((typeof line === 'boolean') || (typeof line === 'string')) {
                     if ((line === 'true') || (line === true)) {
                         newFunctionObject['line'] = true;
                     } else {
@@ -111,6 +129,9 @@ define('Graph', ['logme'], function (logme) {
                     }
                 }
 
+                // By default, if no preference was set, or if the preference
+                // is conflicting (we must have either line or dot, none is
+                // not an option), we will show line.
                 if ((newFunctionObject['dot'] === false) && (newFunctionObject['line'] === false)) {
                     newFunctionObject['line'] = true;
                 }
@@ -131,33 +152,68 @@ define('Graph', ['logme'], function (logme) {
         }
 
         function generateData() {
-            var c0, c1, datapoints, constValues, x, y;
+            var c0, c1, functionObj, seriesObj, dataPoints, constValues, x, y;
 
             constValues = state.getAllConstantValues();
 
-            dataSets = [];
+            dataSeries = [];
 
             for (c0 = 0; c0 < functions.length; c0 += 1) {
-                datapoints = [];
+                functionObj = functions[c0];
+                logme('Functions obj:', functionObj);
 
-                for (c1 = 0; c1 < 30; c1 += 0.1) {
+                seriesObj = {};
+                dataPoints = [];
+
+                for (c1 = 0; c1 < 30; c1 += 1) {
                     x = c1;
+
                     // Push the 'x' variable to the end of the parameter array.
                     constValues.push(x);
-                    y = functions[c0].func.apply(window, constValues);
+
+                    // We call the user defined function, passing all of the
+                    // available constant values. inside this function they
+                    // will be accessible by their names.
+                    y = functionObj.func.apply(window, constValues);
+
+                    // Return the constValues array to how it was before we
+                    // added 'x' variable to the end of it.
                     constValues.pop();
 
-                    datapoints.push([x, y]);
+                    // Add the generated point to the data points set.
+                    dataPoints.push([x, y]);
+
                 }
 
-                dataSets.push(datapoints);
+                // Put the entire data points set into the series object.
+                seriesObj.data = dataPoints;
+
+                // See if user defined a specific color for this function.
+                if (functionObj.hasOwnProperty('color') === true) {
+                    seriesObj.color = functionObj.color;
+                }
+
+                // See if a user defined a label for this function.
+                if (functionObj.hasOwnProperty('label') === true) {
+                    seriesObj.label = functionObj.label;
+                }
+
+                seriesObj.lines = {
+                    'show': functionObj.line
+                };
+
+                seriesObj.points = {
+                    'show': functionObj.dot
+                };
+
+                dataSeries.push(seriesObj);
             }
         }
 
         function updatePlot() {
             $.plot(
                 plotDiv,
-                dataSets,
+                dataSeries,
                 {
                     'xaxis': {
                         'min': 0,
@@ -166,9 +222,29 @@ define('Graph', ['logme'], function (logme) {
                     'yaxis': {
                         'min': -5,
                         'max': 5
+                    },
+                    'legend': {
+
+                        // To show the legend or not. Note, even if 'show' is
+                        // 'true', the legend will only show if labels are
+                        // provided for at least one of the series that are
+                        // going to be plotted.
+                        'show': true,
+
+                        // A floating point number in the range [0, 1]. The
+                        // smaller the number, the more transparent will the
+                        // legend background become.
+                        'backgroundOpacity': 0
+
                     }
                 }
             );
+
+            MathJax.Hub.Queue([
+                'Typeset',
+                MathJax.Hub,
+                plotDiv.attr('id')
+            ]);
         }
     }
 });
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 47881b66c6..8611fed1f2 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,6 +4,10 @@
 
 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'],
     function (State, GeneralMethods, Sliders, Inputs, Graph) {
 
diff --git a/common/static/js/graphical_slider_tool/gst_module.js b/common/static/js/graphical_slider_tool/gst_module.js
deleted file mode 100644
index c4661b5e44..0000000000
--- a/common/static/js/graphical_slider_tool/gst_module.js
+++ /dev/null
@@ -1,15 +0,0 @@
-// 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([], function () {
-    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)
diff --git a/common/static/js/graphical_slider_tool/main.js b/common/static/js/graphical_slider_tool/main.js
deleted file mode 100644
index da36d9c9d6..0000000000
--- a/common/static/js/graphical_slider_tool/main.js
+++ /dev/null
@@ -1,75 +0,0 @@
-// 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) {
-
-// For documentation please check:
-//     http://requirejs.org/docs/api.html
-requirejs.config({
-    // Because require.js is included as a simple <script> tag (and is
-    // forcefully namespaced) it does not get it's configuration from a
-    // predefined 'data-main' attribute. Therefore, from the start, it assumes
-    // that the 'baseUrl' is the same directory that require.js itself is
-    // contained in - i.e. in '/static/js/vendor'. So, we must specify a
-    // correct 'baseUrl'.
-    //
-    // Require JS initially searches this directory for all of the specified
-    // dependencies. If the dependency is
-    //
-    //     'sylvester'
-    //
-    // then it will try to get it from
-    //
-    //     baseUrl + '/' + 'sylvester' + '.js'
-    //
-    // If the dependency is
-    //
-    //     'vendor_libs/sylvester'
-    //
-    // then it will try to get it from
-    //
-    //     baseUrl + '/' + 'vendor_libs/sylvester' + '.js'
-    //
-    // This means two things. One - you can use sub-folders to separate your
-    // code. Two - don't include the '.js' suffix when specifying a dependency.
-    //
-    // For documentation please check:
-    //     http://requirejs.org/docs/api.html#config-baseUrl
-    'baseUrl': '/static/js/graphical_slider_tool',
-
-    // If you need to load from another path, you can specify it here on a
-    // per-module basis. For example you can specify CDN sources here, or
-    // absolute paths that lie outside of the 'baseUrl' directory.
-    //
-    // For documentation please check:
-    //     http://requirejs.org/docs/api.html#config-paths
-    'paths': {
-
-    },
-
-    // Since all of the modules that we require are not aware of our custom
-    // RequireJS solution, that means all of them will be working in the
-    // "old mode". I.e. they will populate the global namespace with their
-    // module object.
-    //
-    // For each module that we will use, we will specify what is exports into
-    // the global namespace, and, if necessary, other modules that it depends.
-    // on. Module dependencies  (downloading them, inserting into the document,
-    // etc.) are handled by RequireJS.
-    //
-    // For documentation please check:
-    //     http://requirejs.org/docs/api.html#config-shim
-    'shim': {
-
-    }
-}); // End-of: requirejs.config({
-
-// Start the main app logic.
-requirejs(['gst_module'], function (GstModule) {
-    console.log(GstModule);
-}); // End-of: requirejs(['gst_module'], function (GstModule)
-
-// 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)

From f2fd649a1689941fb2c419ba1d93dd0507833f45 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Tue, 11 Dec 2012 12:13:35 +0200
Subject: [PATCH 023/107] Removed unnecessary XML section. Documenting.

---
 common/lib/xmodule/xmodule/gst_module.py | 10 +++-------
 lms/templates/graphical_slider_tool.html |  5 -----
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 61a883fbf8..f0c3d0b7e6 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -97,8 +97,6 @@ class GraphicalSliderToolModule(XModule):
                 number, then only error message is displayed.
                 Sliders and numbers are optional. Plot is required.-->
               </configuration>
-              <plot_code>
-              </plot_code>
             </graphical_slider_tool>
           </vertical>
         </sequential>
@@ -116,8 +114,7 @@ class GraphicalSliderToolModule(XModule):
                   'gst_html': gst_html,
                   'element_id': self.html_id,
                   'element_class': self.html_class,
-                  'configuration_json': self.configuration_json,
-                  'plot_code': self.definition['plot_code']
+                  'configuration_json': self.configuration_json
                   }
         self.content = (self.system.render_template(
                         'graphical_slider_tool.html', params))
@@ -195,7 +192,7 @@ class GraphicalSliderToolDescriptor(MakoModuleDescriptor, XmlDescriptor):
             dict
         """
         # check for presense of required tags in xml
-        expected_children_level_0 = ['render', 'configuration', 'plot_code']
+        expected_children_level_0 = ['render', 'configuration']
         for child in expected_children_level_0:
             if len(xml_object.xpath(child)) != 1:
                 raise ValueError("Self a\ssessment definition must include \
@@ -214,8 +211,7 @@ class GraphicalSliderToolDescriptor(MakoModuleDescriptor, XmlDescriptor):
 
         return {
                     'render': parse('render'),
-                    'configuration': xml_object.xpath('configuration')[0],
-                    'plot_code': parse('plot_code'),
+                    'configuration': xml_object.xpath('configuration')[0]
                 }
 
     def definition_to_xml(self, resource_fs):
diff --git a/lms/templates/graphical_slider_tool.html b/lms/templates/graphical_slider_tool.html
index 17d2bae5e9..93a6761784 100644
--- a/lms/templates/graphical_slider_tool.html
+++ b/lms/templates/graphical_slider_tool.html
@@ -4,11 +4,6 @@
         ${configuration_json}
     </div>
 
-    <!-- hidden field to read configuration json from -->
-    <div class="${element_class}" id="${element_id}_plot_code" style="display: none;">
-        ${plot_code}
-    </div>
-
     <!-- main xml with marked places for sliders, numbers, and plot -->
     ${gst_html}
 </div>

From 46d0045d0267aa359e3de23f192347fddb5c3238 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Tue, 11 Dec 2012 12:34:58 +0200
Subject: [PATCH 024/107] GST documentation and code refactoring.

---
 .../xmodule/xmodule/js/src/graphical_slider_tool/graph.js  | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index c0c8addf80..215feb214d 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -2,15 +2,13 @@
 // 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, config, state) {
         var plotDiv, dataSeries, functions;
 
-        logme(config);
-
         plotDiv = $('#' + gstId + '_plot');
 
         if (plotDiv.length === 0) {
@@ -140,8 +138,6 @@ define('Graph', ['logme'], function (logme) {
                     newFunctionObject['label'] = label;
                 }
 
-                logme(newFunctionObject);
-
                 functions.push(newFunctionObject);
             }
         }
@@ -160,7 +156,6 @@ define('Graph', ['logme'], function (logme) {
 
             for (c0 = 0; c0 < functions.length; c0 += 1) {
                 functionObj = functions[c0];
-                logme('Functions obj:', functionObj);
 
                 seriesObj = {};
                 dataPoints = [];

From 4265bf17c515cd6069980bea83c0f87d2a0eacbf Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Tue, 11 Dec 2012 14:46:05 +0200
Subject: [PATCH 025/107] Implemented ticks config, plot dimensions config. For
 sliders changed the event from Change to Slide. Now update to graph is
 near-instantaneous.

---
 .../js/src/graphical_slider_tool/graph.js     | 112 ++++++++++++++++--
 .../js/src/graphical_slider_tool/sliders.js   |   3 +-
 2 files changed, 102 insertions(+), 13 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 215feb214d..81c52e8ef5 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -2,12 +2,14 @@
 // define() functions from Require JS available inside the anonymous function.
 (function (requirejs, require, define) {
 
-define('Graph', [], function () {
+define('Graph', ['logme'], function (logme) {
 
     return Graph;
 
     function Graph(gstId, config, state) {
-        var plotDiv, dataSeries, functions;
+        var plotDiv, dataSeries, functions, xaxis, yaxis;
+
+        logme('config:', config);
 
         plotDiv = $('#' + gstId + '_plot');
 
@@ -15,8 +17,8 @@ define('Graph', [], function () {
             return;
         }
 
-        plotDiv.width(300);
-        plotDiv.height(300);
+        setGraphDimensions();
+        setGraphAxes();
 
         state.bindUpdatePlotEvent(plotDiv, onUpdatePlot);
 
@@ -27,6 +29,98 @@ define('Graph', [], function () {
 
         return;
 
+        function setGraphDimensions() {
+            var dimObj, width, height;
+
+            // If no dimensions are specified by the user, the graph have
+            // predefined dimensions.
+            width = 300;
+            height = 300;
+
+            // Get the user specified dimensions, if any.
+            if ($.isPlainObject(config.plot['dimensions']) === true) {
+                dimObj = config.plot['dimensions'];
+
+                if (dimObj.hasOwnProperty('@width') === true) {
+                    if (isNaN(parseInt(dimObj['@width'], 10)) === false) {
+                        width = parseInt(dimObj['@width'], 10);
+                    }
+                }
+
+                if (dimObj.hasOwnProperty('@height') === true) {
+                    if (isNaN(parseInt(dimObj['@height'], 10)) === false) {
+                        height = parseInt(dimObj['@height'], 10);
+                    }
+                }
+            }
+
+            plotDiv.width(width);
+            plotDiv.height(height);
+        }
+
+        function setGraphAxes() {
+            xaxis = {
+                'min': 0,
+                'tickSize': 3,
+                'max': 30
+            };
+
+            if (typeof config.plot['xticks'] === 'string') {
+                processTicks(config.plot['xticks'], xaxis);
+            }
+
+            yaxis = {
+                'min': -5,
+                'tickSize': 1,
+                'max': 5
+            };
+
+            if (typeof config.plot['yticks'] === 'string') {
+                processTicks(config.plot['yticks'], yaxis);
+            }
+
+            return;
+
+            function processTicks(ticksStr, ticksObj) {
+                var ticksBlobs, min, tickSize, max;
+
+                logme('Processing ticks. Ticks string is: [' + ticksStr + ']');
+                logme('Original ticks object:', ticksObj);
+
+                ticksBlobs = ticksStr.split(',');
+
+                if (ticksBlobs.length !== 3) {
+                    return;
+                }
+
+                min = parseFloat(ticksBlobs[0]);
+                if (isNaN(min) === false) {
+                    ticksObj.min = min;
+                }
+
+                tickSize = parseFloat(ticksBlobs[1]);
+                if (isNaN(tickSize) === false) {
+                    ticksObj.tickSize = tickSize;
+                }
+
+                max = parseFloat(ticksBlobs[2]);
+                if (isNaN(max) === false) {
+                    ticksObj.max = max;
+                }
+
+                if (ticksObj.min >= ticksObj.max) {
+                    ticksObj.min = 0;
+                    ticksObj.max = 10;
+                }
+
+                if (ticksObj.tickSize * 2 >= ticksObj.max - ticksObj.min) {
+                    ticksObj.tickSize = (ticksObj.max - ticksObj.min) / 10.0;
+                }
+
+                logme('Modified ticks object:', ticksObj);
+            }
+        }
+
         function createFunctions() {
             var c1;
 
@@ -210,14 +304,8 @@ define('Graph', [], function () {
                 plotDiv,
                 dataSeries,
                 {
-                    'xaxis': {
-                        'min': 0,
-                        'max': 30
-                    },
-                    'yaxis': {
-                        'min': -5,
-                        'max': 5
-                    },
+                    'xaxis': xaxis,
+                    'yaxis': yaxis,
                     'legend': {
 
                         // To show the legend or not. Note, even if 'show' is
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 33bdd89dd1..ea6398caad 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
@@ -181,7 +181,8 @@ define('Sliders', [], function () {
                 'value': constValue,
                 'step': (valueMax - valueMin) / 50.0,
 
-                'change': sliderOnChange
+                // 'change': sliderOnChange,
+                'slide': sliderOnChange
             });
 
             // Append the slider DIV to the element on the page where the user

From 46de7b2c52a822c48da7416516b85648e298fef8 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Tue, 11 Dec 2012 15:44:34 +0200
Subject: [PATCH 026/107] Added config options for number of points and xrange
 - start, end, step.

---
 .../js/src/graphical_slider_tool/graph.js     | 71 +++++++++++++------
 1 file changed, 49 insertions(+), 22 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 81c52e8ef5..5848c9da01 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -2,14 +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, config, state) {
-        var plotDiv, dataSeries, functions, xaxis, yaxis;
-
-        logme('config:', config);
+        var plotDiv, dataSeries, functions, xaxis, yaxis, xrange;
 
         plotDiv = $('#' + gstId + '_plot');
 
@@ -19,6 +17,7 @@ define('Graph', ['logme'], function (logme) {
 
         setGraphDimensions();
         setGraphAxes();
+        setGraphXRange();
 
         state.bindUpdatePlotEvent(plotDiv, onUpdatePlot);
 
@@ -30,27 +29,25 @@ define('Graph', ['logme'], function (logme) {
         return;
 
         function setGraphDimensions() {
-            var dimObj, width, height;
+            var dimObj, width, height, tempInt;
 
             // If no dimensions are specified by the user, the graph have
             // predefined dimensions.
-            width = 300;
-            height = 300;
+            width = 100;
+            height = 100;
 
             // Get the user specified dimensions, if any.
             if ($.isPlainObject(config.plot['dimensions']) === true) {
                 dimObj = config.plot['dimensions'];
 
-                if (dimObj.hasOwnProperty('@width') === true) {
-                    if (isNaN(parseInt(dimObj['@width'], 10)) === false) {
-                        width = parseInt(dimObj['@width'], 10);
-                    }
+                tempInt = parseInt(dimObj['@width'], 10);
+                if (isNaN(tempInt) === false) {
+                    width = tempInt;
                 }
 
-                if (dimObj.hasOwnProperty('@height') === true) {
-                    if (isNaN(parseInt(dimObj['@height'], 10)) === false) {
-                        height = parseInt(dimObj['@height'], 10);
-                    }
+                tempInt = parseInt(dimObj['@height'], 10);
+                if (isNaN(tempInt) === false) {
+                    height = tempInt;
                 }
             }
 
@@ -84,9 +81,6 @@ define('Graph', ['logme'], function (logme) {
             function processTicks(ticksStr, ticksObj) {
                 var ticksBlobs, min, tickSize, max;
 
-                logme('Processing ticks. Ticks string is: [' + ticksStr + ']');
-                logme('Original ticks object:', ticksObj);
-
                 ticksBlobs = ticksStr.split(',');
 
                 if (ticksBlobs.length !== 3) {
@@ -116,8 +110,42 @@ define('Graph', ['logme'], function (logme) {
                 if (ticksObj.tickSize * 2 >= ticksObj.max - ticksObj.min) {
                     ticksObj.tickSize = (ticksObj.max - ticksObj.min) / 10.0;
                 }
+            }
+        }
 
-                logme('Modified ticks object:', ticksObj);
+        function setGraphXRange() {
+            var xRangeStr, xRangeBlobs, tempNum;
+
+            xrange = {
+                'start': 0,
+                'end': 30,
+                'step': 0.1
+            };
+
+            if (typeof config.plot['xrange'] === 'string') {
+                xRangeStr = config.plot['xrange'];
+                xRangeBlobs = xRangeStr.split(',');
+
+                if (xRangeBlobs.length === 2) {
+
+                    tempNum = parseFloat(xRangeBlobs[0]);
+                    if (isNaN(tempNum) === false) {
+                        xrange.start = tempNum;
+                    }
+
+                    tempNum = parseFloat(xRangeBlobs[1]);
+                    if (isNaN(tempNum) === false) {
+                        xrange.end = tempNum;
+                    }
+
+                }
+            }
+
+            if (typeof config.plot['num_points'] === 'string') {
+                tempNum = parseInt(config.plot['num_points'], 10);
+                if (isNaN(tempNum) === false) {
+                    xrange.step = (xrange.end - xrange.start) / tempNum;
+                }
             }
         }
 
@@ -242,7 +270,7 @@ define('Graph', ['logme'], function (logme) {
         }
 
         function generateData() {
-            var c0, c1, functionObj, seriesObj, dataPoints, constValues, x, y;
+            var c0, functionObj, seriesObj, dataPoints, constValues, x, y;
 
             constValues = state.getAllConstantValues();
 
@@ -254,8 +282,7 @@ define('Graph', ['logme'], function (logme) {
                 seriesObj = {};
                 dataPoints = [];
 
-                for (c1 = 0; c1 < 30; c1 += 1) {
-                    x = c1;
+                for (x = xrange.start; x <= xrange.end; x += xrange.step) {
 
                     // Push the 'x' variable to the end of the parameter array.
                     constValues.push(x);

From 6caddad6679a6daebeb0c25ac2718c888c8fdb72 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Tue, 11 Dec 2012 17:52:04 +0200
Subject: [PATCH 027/107] Added ability to congiure a text input to be
 readonly. Changed the default width and height of the graph to 300px and
 300px respectively.

---
 .../js/src/graphical_slider_tool/graph.js     |  4 +--
 .../js/src/graphical_slider_tool/inputs.js    | 34 +++++++++++++++----
 .../js/src/graphical_slider_tool/state.js     |  6 +---
 3 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 5848c9da01..89b1bb17c1 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -33,8 +33,8 @@ define('Graph', [], function () {
 
             // If no dimensions are specified by the user, the graph have
             // predefined dimensions.
-            width = 100;
-            height = 100;
+            width = 300;
+            height = 300;
 
             // Get the user specified dimensions, if any.
             if ($.isPlainObject(config.plot['dimensions']) === true) {
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
index 3e7e55f02c..d7789cb000 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
@@ -42,7 +42,7 @@ define('Inputs', [], function () {
         }
 
         function createInput(obj) {
-            var constName, constValue, spanEl, inputEl;
+            var constName, constValue, spanEl, inputEl, readOnly;
 
             // The name of the constant is obj['@var']. If it is not specified,
             // we will skip creating a text input for this constant.
@@ -86,12 +86,34 @@ define('Inputs', [], function () {
             // Set the current constant to the text input. It will be visible
             // to the user.
             inputEl.val(constValue);
+            
+            // Before binding a 'change' event, we will check if this text
+            // input is specified as 'read only'.
+            //
+            // By default, this setting is false - the user can change the 
+            // value in the text input.
+            readonly = false;
+            if (typeof obj['@readonly'] === 'string') {
+                if (obj['@readonly'] === 'true') {
+                    readonly = true;
+                }
+            }
 
-            // 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.
-            inputEl.bind('change', inputOnChange);
+            if (readonly === true) {
+            
+                // In the case of a readonly config option, configure the text
+                // inputit as read-only, and NOT bind an event to it.
+                inputEl.attr('readonly', 'readonly');
+
+            } else { // readonly !== true
+
+                // 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.
+                inputEl.bind('change', inputOnChange);
+
+            }
 
             // Lets style the input element nicely. We will use the button()
             // widget for this since there is no native widget for the text
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 88951f0e9d..6e878e120f 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
@@ -12,11 +12,7 @@ define('State', [], function () {
     // This module defines and returns a factory constructor.
     return State;
 
-    /*
-     * function: State
-     *
-     *
-     */
+    // function: State
     function State(gstId, config) {
         var constants, c1, plotDiv;
 

From 8efab2c953175619c1d59da2b2655af87310f4d7 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Tue, 11 Dec 2012 18:28:19 +0200
Subject: [PATCH 028/107] Minor edits.

---
 .../xmodule/xmodule/js/src/graphical_slider_tool/inputs.js  | 6 +++---
 .../xmodule/xmodule/js/src/graphical_slider_tool/state.js   | 5 ++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

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
index d7789cb000..595021023f 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
@@ -86,11 +86,11 @@ define('Inputs', [], function () {
             // Set the current constant to the text input. It will be visible
             // to the user.
             inputEl.val(constValue);
-            
+
             // Before binding a 'change' event, we will check if this text
             // input is specified as 'read only'.
             //
-            // By default, this setting is false - the user can change the 
+            // By default, this setting is false - the user can change the
             // value in the text input.
             readonly = false;
             if (typeof obj['@readonly'] === 'string') {
@@ -100,7 +100,7 @@ define('Inputs', [], function () {
             }
 
             if (readonly === true) {
-            
+
                 // In the case of a readonly config option, configure the text
                 // inputit as read-only, and NOT bind an event to it.
                 inputEl.attr('readonly', 'readonly');
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 6e878e120f..996384fe74 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
@@ -26,14 +26,17 @@ define('State', [], function () {
         if ((typeof config.inputs !== 'undefined') &&
             (typeof config.inputs.input !== 'undefined')) {
             if ($.isArray(config.inputs.input)) {
-                // config.inputs.input is an array
 
+                // config.inputs.input is an array
                 for (c1 = 0; c1 < config.inputs.input.length; c1++) {
                     addConstFromInput(config.inputs.input[c1]);
                 }
+
             } else if ($.isPlainObject(config.inputs.input)) {
+
                 // config.inputs.input is an object
                 addConstFromInput(config.inputs.input);
+
             }
         }
 

From 78a3b7cf301f0043fa9c7de212bb34534edb48d1 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Wed, 12 Dec 2012 16:38:32 +0200
Subject: [PATCH 029/107] Added documentation for code. Fixed several minor
 issues. Added checks for some error cases.

---
 .../js/src/graphical_slider_tool/graph.js     | 167 +++++++++++++-----
 .../js/src/graphical_slider_tool/gst_main.js  |   8 +
 2 files changed, 132 insertions(+), 43 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 89b1bb17c1..bf74933f0f 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -9,29 +9,39 @@ define('Graph', [], function () {
     function Graph(gstId, config, state) {
         var plotDiv, dataSeries, functions, xaxis, yaxis, xrange;
 
+        // We must have a graph container DIV element available in order to
+        // proceed.
         plotDiv = $('#' + gstId + '_plot');
-
         if (plotDiv.length === 0) {
             return;
         }
 
+        // Configure some settings for the graph.
         setGraphDimensions();
         setGraphAxes();
         setGraphXRange();
 
-        state.bindUpdatePlotEvent(plotDiv, onUpdatePlot);
-
+        // Get the user defined functions. If there aren't any, don't do
+        // anything else.
         createFunctions();
+        if (functions.length === 0) {
+            return;
+        }
 
+        // Create the initial graph and plot it for the user to see.
         generateData();
         updatePlot();
 
+        // Bind an event. Whenever some constant changes, the graph will be
+        // redrawn
+        state.bindUpdatePlotEvent(plotDiv, onUpdatePlot);
+
         return;
 
         function setGraphDimensions() {
             var dimObj, width, height, tempInt;
 
-            // If no dimensions are specified by the user, the graph have
+            // If no dimensions are specified by the user, the graph will have
             // predefined dimensions.
             width = 300;
             height = 300;
@@ -51,27 +61,30 @@ define('Graph', [], function () {
                 }
             }
 
+            // Apply the dimensions to the graph container DIV element.
             plotDiv.width(width);
             plotDiv.height(height);
         }
 
         function setGraphAxes() {
+            // Define the xaxis Flot configuration, and then see if the user
+            // supplied custom values.
             xaxis = {
                 'min': 0,
-                'tickSize': 3,
-                'max': 30
+                'tickSize': 1,
+                'max': 10
             };
-
             if (typeof config.plot['xticks'] === 'string') {
                 processTicks(config.plot['xticks'], xaxis);
             }
 
+            // Define the yaxis Flot configuration, and then see if the user
+            // supplied custom values.
             yaxis = {
-                'min': -5,
+                'min': 0,
                 'tickSize': 1,
-                'max': 5
+                'max': 10
             };
-
             if (typeof config.plot['yticks'] === 'string') {
                 processTicks(config.plot['yticks'], yaxis);
             }
@@ -79,34 +92,41 @@ define('Graph', [], function () {
             return;
 
             function processTicks(ticksStr, ticksObj) {
-                var ticksBlobs, min, tickSize, max;
+                var ticksBlobs, tempFloat;
 
+                // The 'ticks' setting is a string containing 3 floating-point
+                // numbers.
                 ticksBlobs = ticksStr.split(',');
 
                 if (ticksBlobs.length !== 3) {
                     return;
                 }
 
-                min = parseFloat(ticksBlobs[0]);
-                if (isNaN(min) === false) {
-                    ticksObj.min = min;
+                tempFloat = parseFloat(ticksBlobs[0]);
+                if (isNaN(tempFloat) === false) {
+                    ticksObj.min = tempFloat;
                 }
 
-                tickSize = parseFloat(ticksBlobs[1]);
-                if (isNaN(tickSize) === false) {
-                    ticksObj.tickSize = tickSize;
+                tempFloat = parseFloat(ticksBlobs[1]);
+                if (isNaN(tempFloat) === false) {
+                    ticksObj.tickSize = tempFloat;
                 }
 
-                max = parseFloat(ticksBlobs[2]);
-                if (isNaN(max) === false) {
-                    ticksObj.max = max;
+                tempFloat = parseFloat(ticksBlobs[2]);
+                if (isNaN(tempFloat) === false) {
+                    ticksObj.max = tempFloat;
                 }
 
+                // Is the starting tick to the left of the ending tick (on the
+                // x-axis)? If not, set default starting and ending tick.
                 if (ticksObj.min >= ticksObj.max) {
                     ticksObj.min = 0;
                     ticksObj.max = 10;
                 }
 
+                // Make sure the range makes sense - i.e. that there are at
+                // least 3 ticks. If not, set a tickSize which will produce
+                // 11 ticks. tickSize is the spacing between the ticks.
                 if (ticksObj.tickSize * 2 >= ticksObj.max - ticksObj.min) {
                     ticksObj.tickSize = (ticksObj.max - ticksObj.min) / 10.0;
                 }
@@ -118,10 +138,13 @@ define('Graph', [], function () {
 
             xrange = {
                 'start': 0,
-                'end': 30,
+                'end': 10,
                 'step': 0.1
             };
 
+            // The 'xrange' is a string containing two floating point numbers
+            // separated by a comma. The first number is the starting
+            // x-coordinate , the second number is the ending x-coordinate
             if (typeof config.plot['xrange'] === 'string') {
                 xRangeStr = config.plot['xrange'];
                 xRangeBlobs = xRangeStr.split(',');
@@ -138,13 +161,25 @@ define('Graph', [], function () {
                         xrange.end = tempNum;
                     }
 
+                    if (xrange.start >= xrange.end) {
+                        xrange.start = 0;
+                        xrange.end = 10;
+                    }
+
                 }
             }
 
+            // The user can specify the number of points. However, internally
+            // we will use it to generate a 'step' - i.e. the distance (on
+            // x-axis) between two adjacent points.
             if (typeof config.plot['num_points'] === 'string') {
                 tempNum = parseInt(config.plot['num_points'], 10);
-                if (isNaN(tempNum) === false) {
-                    xrange.step = (xrange.end - xrange.start) / tempNum;
+                if (
+                    (isNaN(tempNum) === false) &&
+                    (tempNum >= 2) &&
+                    (tempNum <= 500)
+                ) {
+                    xrange.step = (xrange.end - xrange.start) / (tempNum - 1);
                 }
             }
         }
@@ -192,67 +227,97 @@ define('Graph', [], function () {
 
             return;
 
-            // This function will reduce code duplications. We have to call
+            // This function will reduce code duplication. We have to call
             // the function addFunction() several times passing object
-            // properties. A parameters. Rather than writing them out every
-            // time, we will have a single point of
+            // properties as parameters. Rather than writing them out every
+            // time, we will have a single place where it is done.
             function callAddFunction(obj) {
                 addFunction(
                     obj['#text'],
                     obj['@color'],
                     obj['@line'],
                     obj['@dot'],
-                    obj['@label'],
-                    obj['@style'],
-                    obj['@point_size']
+                    obj['@label']
                 );
             }
 
-            function addFunction(funcString, color, line, dot, label, style, point_size) {
+            function addFunction(funcString, color, line, dot, label) {
                 var newFunctionObject, func, constNames;
 
+                // The main requirement is function string. Without it we can't
+                // create a function, and the series cannot be calculated.
                 if (typeof funcString !== 'string') {
                     return;
                 }
 
-                newFunctionObject = {};
+                // Some defaults. If no options are set for the graph, we will
+                // make sure that at least a line is drawn for a function.
+                newFunctionObject = {
+                    'line': true,
+                    'dot': false
+                };
 
+                // Get all of the constant names defined by the user in the
+                // XML.
                 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.
+                // the Function constructor.
                 constNames.push(funcString);
 
-                func = Function.apply(null, constNames);
+                // Create the function from the function string, and all of the
+                // available constants + the 'x' variable as it's parameters.
+                // For this we will use the built-in Function object
+                // constructor.
+                //
+                // If something goes wrong during this step, most
+                // likely the user supplied an invalid JavaScript function body
+                // string. In this case we will not proceed.
+                try {
+                    func = Function.apply(null, constNames);
+                } catch (err) {
+                    // Let's tell the user. He will see a nice red error
+                    // message instead of a graph.
+                    plotDiv.html(
+                        '<span style="color: red;">' +
+                            'Error while parsing JavaScript function body string!' +
+                        '</span>'
+                    );
+
+                    return;
+                }
+
                 newFunctionObject['func'] = func;
 
                 if (typeof color === 'string') {
                     newFunctionObject['color'] = color;
                 }
 
-                if ((typeof line === 'boolean') || (typeof line === 'string')) {
-                    if ((line === 'true') || (line === true)) {
+                if (typeof line === 'string') {
+                    if (line === 'true') {
                         newFunctionObject['line'] = true;
-                    } else {
+                    } else if (line === 'false') {
                         newFunctionObject['line'] = false;
                     }
                 }
 
-                if ((typeof dot === 'boolean') || (typeof dot === 'string')) {
-                    if ((dot === 'true') || (dot === true)) {
+                if (typeof dot === 'string') {
+                    if (dot === 'true') {
                         newFunctionObject['dot'] = true;
-                    } else {
+                    } else if (dot === 'false') {
                         newFunctionObject['dot'] = false;
                     }
                 }
 
-                // By default, if no preference was set, or if the preference
-                // is conflicting (we must have either line or dot, none is
-                // not an option), we will show line.
-                if ((newFunctionObject['dot'] === false) && (newFunctionObject['line'] === false)) {
+                // If the preference is conflicting (we must have either line
+                // or dot, none is not an option), we will show line.
+                if (
+                    (newFunctionObject['dot'] === false) &&
+                    (newFunctionObject['line'] === false)
+                ) {
                     newFunctionObject['line'] = true;
                 }
 
@@ -264,6 +329,8 @@ define('Graph', [], function () {
             }
         }
 
+        // The callback that will be called whenever a constant changes (gets
+        // updated via a slider or a text input).
         function onUpdatePlot(event) {
             generateData();
             updatePlot();
@@ -282,6 +349,7 @@ define('Graph', [], function () {
                 seriesObj = {};
                 dataPoints = [];
 
+                // Generate the data points.
                 for (x = xrange.start; x <= xrange.end; x += xrange.step) {
 
                     // Push the 'x' variable to the end of the parameter array.
@@ -314,19 +382,25 @@ define('Graph', [], function () {
                     seriesObj.label = functionObj.label;
                 }
 
+                // Should the data points be connected by a line?
                 seriesObj.lines = {
                     'show': functionObj.line
                 };
 
+                // Should each data point be represented by a point on the
+                // graph?
                 seriesObj.points = {
                     'show': functionObj.dot
                 };
 
+                // Add the newly created series object to the series set which
+                // will be plotted by Flot.
                 dataSeries.push(seriesObj);
             }
         }
 
         function updatePlot() {
+            // Tell Flot to draw the graph to our specification.
             $.plot(
                 plotDiv,
                 dataSeries,
@@ -350,6 +424,13 @@ define('Graph', [], function () {
                 }
             );
 
+            // The first time that the graph gets added to the page, the legend
+            // is created from scratch. When it appears, MathJax works some
+            // magic, and all of the specially marked TeX gets rendered nicely.
+            // The next time when we update the graph, no such thing happens.
+            // We must ask MathJax to typeset the legend again (well, we will
+            // ask it to look at our entire graph DIV), the next time it's
+            // worker queue is available.
             MathJax.Hub.Queue([
                 'Typeset',
                 MathJax.Hub,
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 8611fed1f2..0b46eb42bb 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
@@ -16,13 +16,21 @@ define(
     function GstMain(gstId) {
         var config, state;
 
+        // Get the JSON configuration, and parse it, and store as an object.
         config = JSON.parse($('#' + gstId + '_json').html()).root;
 
+        // Parse the configuration settings for sliders and text inputs, and
+        // extract all of the defined constants (their names along with their
+        // initial values).
         state = State(gstId, config);
 
+        // Create the sliders and the text inputs, attaching them to
+        // approriate constants.
         Sliders(gstId, config, state);
         Inputs(gstId, config, state);
 
+        // Configure and display the loop. Attach event for the graph to be
+        // updated on any change of a slider or a text input.
         Graph(gstId, config, state);
     }
 });

From 5f988fd916fb8052a6ff0257e9b01bcc710ace56 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Thu, 13 Dec 2012 14:13:52 +0200
Subject: [PATCH 030/107] sliders and inputs are now optional

---
 common/lib/xmodule/xmodule/gst_module.py | 113 ++++++-----------------
 1 file changed, 29 insertions(+), 84 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index f0c3d0b7e6..74cc70e076 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -41,65 +41,8 @@ class GraphicalSliderToolModule(XModule):
     def __init__(self, system, location, definition, descriptor, instance_state=None,
                  shared_state=None, **kwargs):
         """
-        Definition  should have....
-        sliders, text, module
+        For XML file format please look at documentation.
 
-        Sample file:
-
-        <sequential>
-          <vertical>
-            <graphical_slider_tool>
-              <render>
-                <p>Graphic slider tool html.</p>
-                <p>Can include 'input', 'slider' and 'plot' tags.
-                They will be replaced by proper number, slider and plot
-                widgets. </p>
-                For example: $slider a$, second $slider b$,
-                  number $input a$, and, plot:
-                  $plot$
-
-                  <!-- Sliders, and plot cannot be inside <p> -->
-              </render>
-              <configuration>
-                <sliders>
-                  <!-- optional: width=100 (in pixels), default is 400,
-                  show_value=[editable, not-editable], default is disabled.-->
-                  <slider var="a" range="-100, 1, 100" />
-                  <slider var="b" range="-1000, 100, 1000" witdh="300"/>
-                </sliders>
-                <inputs>
-                  <!-- optional: width=100 (in pixels), readonly=[true|false] -->
-                  <input var="a" initial="1"/>
-                </inputs>
-                <plot>
-                  <!-- optional: color=[standard web]; line=[true|false], default true;
-                  dot=[true|false], default false; label="string",
-                  style of line =[normal, dashed], default normal,
-                  point size-->
-                  <function y="x^2 + a" />
-                  <function y="3*x + b" color="red"/>
-                  <!-- asymtotes are functions,
-                  optional: name="string" -->
-                  <function y="b" color="red" style="dashed" name="b"/>
-                  <function y="b/2" color="red" style="dashed" name="b/2"/>
-                  <!-- xrange: min, max, yrange is calculated automatically -->
-                  <xrange>-10, 10</xrange>
-                  <!-- optional number of points, default is 300 -->
-                  <numpoints>60</numpoints>
-                  <!-- xticks and yticks are optional: min, step, max -->
-                  <xticks>-9, 1, 9</xticks>
-                  <yticks>-9, 1, 9</yticks>
-                  <!-- xaxis and xaxis are optional -->
-                  <xaxis unit="cm"/>
-                  <yaxis unit="s"/>
-                </plot>
-                <!-- if some parameter in function is not related to any slider or
-                number, then only error message is displayed.
-                Sliders and numbers are optional. Plot is required.-->
-              </configuration>
-            </graphical_slider_tool>
-          </vertical>
-        </sequential>
         """
         XModule.__init__(self, system, location, definition, descriptor,
                          instance_state, shared_state, **kwargs)
@@ -130,37 +73,39 @@ class GraphicalSliderToolModule(XModule):
         style="width: 600px; height: 600px; padding: 0px; position: relative;">This is plot</div>'
         html_string = html_string.replace('$plot$', plot_div)
 
-        # substitute sliders
-        sliders = json.loads(self.configuration_json)['root']['sliders']['slider']
-        if type(sliders) == dict:
-            sliders = [sliders]
-        vars = [x['@var'] for x in sliders]
+        # substitute sliders if we have them
+        if json.loads(self.configuration_json)['root'].get('sliders'):
+            sliders = json.loads(self.configuration_json)['root']['sliders']['slider']
+            if type(sliders) == dict:
+                sliders = [sliders]
+            vars = [x['@var'] for x in sliders]
 
-        slider_div = '<span class="{element_class}_slider" id="{element_id}_slider_{var}" \
-        data-var="{var}"></span>'
+            slider_div = '<span class="{element_class}_slider" id="{element_id}_slider_{var}" \
+            data-var="{var}"></span>'
 
-        for var in vars:
-            html_string = re.sub(r'\$slider\s+' + var + r'\$',
-                                slider_div.format(element_class=self.html_class,
-                                                  element_id=self.html_id,
-                                                  var=var),
-                                html_string, flags=re.IGNORECASE | re.UNICODE)
+            for var in vars:
+                html_string = re.sub(r'\$slider\s+' + var + r'\$',
+                                    slider_div.format(element_class=self.html_class,
+                                                      element_id=self.html_id,
+                                                      var=var),
+                                    html_string, flags=re.IGNORECASE | re.UNICODE)
 
-        # substitute numbers
-        inputs = json.loads(self.configuration_json)['root']['inputs']['input']
-        if type(inputs) == dict:
-            inputs = [inputs]
-        vars = [x['@var'] for x in inputs]
+        # substitute numbers if we have them
+        if json.loads(self.configuration_json)['root'].get('inputs'):
+            inputs = json.loads(self.configuration_json)['root']['inputs']['input']
+            if type(inputs) == dict:
+                inputs = [inputs]
+            vars = [x['@var'] for x in inputs]
 
-        input_div = '<span class="{element_class}_input" id="{element_id}_input_{var}" \
-        data-var="{var}"></span>'
+            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'\$',
-                                input_div.format(element_class=self.html_class,
-                                                 element_id=self.html_id,
-                                                 var=var),
-                                html_string, flags=re.IGNORECASE | re.UNICODE)
+            for var in vars:
+                html_string = re.sub(r'\$input\s+' + var + r'\$',
+                                    input_div.format(element_class=self.html_class,
+                                                     element_id=self.html_id,
+                                                     var=var),
+                                    html_string, flags=re.IGNORECASE | re.UNICODE)
         # import ipdb; ipdb.set_trace()
         return html_string
 

From dbf1dc682bb0c8411f94b8e5ad54ab7afca2096f Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Thu, 13 Dec 2012 17:23:53 +0200
Subject: [PATCH 031/107] Added some debug output information via logme().

---
 .../js/src/graphical_slider_tool/graph.js     | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index bf74933f0f..14594a7b3b 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -2,7 +2,7 @@
 // define() functions from Require JS available inside the anonymous function.
 (function (requirejs, require, define) {
 
-define('Graph', [], function () {
+define('Graph', ['logme'], function (logme) {
 
     return Graph;
 
@@ -141,46 +141,72 @@ define('Graph', [], function () {
                 'end': 10,
                 'step': 0.1
             };
+            logme('Default xrange:', xrange);
 
             // The 'xrange' is a string containing two floating point numbers
             // separated by a comma. The first number is the starting
             // x-coordinate , the second number is the ending x-coordinate
             if (typeof config.plot['xrange'] === 'string') {
+                logme('xrange is a string; xrange = "' + config.plot['xrange'] + '".');
+
                 xRangeStr = config.plot['xrange'];
                 xRangeBlobs = xRangeStr.split(',');
 
                 if (xRangeBlobs.length === 2) {
+                    logme('xrange contains 2 blobs; 1 -> "' + xRangeBlobs[0] + '", 2 -> "' + xRangeBlobs[1] + '".');
 
                     tempNum = parseFloat(xRangeBlobs[0]);
                     if (isNaN(tempNum) === false) {
                         xrange.start = tempNum;
+
+                        logme('First blob was parsed as a float. xrange.start = "' + xrange.start + '".');
+                    } else {
+                        logme('ERROR: First blob was parsed as a NaN.');
                     }
 
                     tempNum = parseFloat(xRangeBlobs[1]);
                     if (isNaN(tempNum) === false) {
                         xrange.end = tempNum;
+
+                        logme('Second blob was parsed as a float. xrange.end = "' + xrange.end + '".');
+                    } else {
+                        logme('ERROR: Second blob was parsed as a NaN.');
                     }
 
                     if (xrange.start >= xrange.end) {
                         xrange.start = 0;
                         xrange.end = 10;
+
+                        logme('xrange.start is greater than xrange.end - will set defaults. xrange.start = "' + xrange.start + '". xrange.end = "' + xrange.end + '".');
                     }
 
+                } else {
+                    logme('ERROR: xrange does not contain 2 blobs.');
                 }
+            } else {
+                logme('ERROR: xrange is not a string.');
             }
 
             // The user can specify the number of points. However, internally
             // we will use it to generate a 'step' - i.e. the distance (on
             // x-axis) between two adjacent points.
             if (typeof config.plot['num_points'] === 'string') {
+                logme('num_points is a string. num_points = "' + config.plot['num_points'] + '".');
+
                 tempNum = parseInt(config.plot['num_points'], 10);
                 if (
-                    (isNaN(tempNum) === false) &&
+                    (isNaN(tempNum) === false) ||
                     (tempNum >= 2) &&
                     (tempNum <= 500)
                 ) {
+                    logme('num_points was parsed as a number. num_points = "' + tempNum + '".');
                     xrange.step = (xrange.end - xrange.start) / (tempNum - 1);
+                    logme('xrange.step = "' + xrange.step + '".');
+                } else {
+                    logme('ERROR: num_points was not parsed as a number, or num_points < 2, or num_points > 500.');
                 }
+            } else {
+                logme('ERROR: num_points is not a string.');
             }
         }
 

From 4e78e58902e9b2ea9c251534cdb52a348b7bd846 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Fri, 14 Dec 2012 11:00:25 +0200
Subject: [PATCH 032/107] Mod to XML GST.

---
 common/lib/xmodule/xmodule/gst_module.py               |  7 +++----
 .../xmodule/js/src/graphical_slider_tool/inputs.js     |  4 ++--
 .../xmodule/js/src/graphical_slider_tool/sliders.js    | 10 +++++++++-
 3 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 74cc70e076..276762408f 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -69,8 +69,7 @@ class GraphicalSliderToolModule(XModule):
         Simple variant: slider and plot controls are not inside any tag.
         """
         #substitute plot
-        plot_div = '<div class="' + self.html_class + '_plot" id="' + self.html_id + '_plot" \
-        style="width: 600px; height: 600px; padding: 0px; position: relative;">This is plot</div>'
+        plot_div = '<div class="' + self.html_class + '_plot" id="' + self.html_id + '_plot"></div>'
         html_string = html_string.replace('$plot$', plot_div)
 
         # substitute sliders if we have them
@@ -81,7 +80,7 @@ class GraphicalSliderToolModule(XModule):
             vars = [x['@var'] for x in sliders]
 
             slider_div = '<span class="{element_class}_slider" id="{element_id}_slider_{var}" \
-            data-var="{var}"></span>'
+            data-var="{var}" data-el_width="120"></span>'
 
             for var in vars:
                 html_string = re.sub(r'\$slider\s+' + var + r'\$',
@@ -98,7 +97,7 @@ class GraphicalSliderToolModule(XModule):
             vars = [x['@var'] for x in inputs]
 
             input_div = '<span class="{element_class}_input" id="{element_id}_input_{var}" \
-            data-var="{var}"></span>'
+            data-var="{var}" data-el_width="60"></span>'
 
             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/inputs.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
index 595021023f..b5d3217a85 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
@@ -124,8 +124,8 @@ define('Inputs', [], function () {
                 'text-align': 'left',
                 'outline': 'none',
                 'cursor': 'text',
-                'height': '15px',
-                'width': '50px'
+                'height': '15px'
+                // 'width': '50px'
             });
 
             // And finally, publish the text input element to the page.
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 ea6398caad..ef3d5bb6d3 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
@@ -164,7 +164,15 @@ define('Sliders', [], function () {
             }
 
             // Set the defined width to the slider.
-            sliderEl.width(sliderWidth);
+            // sliderEl.width(sliderWidth);
+
+            console.log('[Before]');
+            console.log('sliderEl.width: ' + sliderEl.width());
+
+            sliderEl.width(spanEl.data('el_width'));
+
+            console.log('[After]');
+            console.log('sliderEl.width: ' + sliderEl.width());
 
             // And make sure that it gets added to the page as an
             // 'inline-block' element. This will allow for the insertion of the

From b6417c797b14ac4f952be768f33416f6796d25c0 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Fri, 14 Dec 2012 16:10:47 +0200
Subject: [PATCH 033/107] change parsing to support new format of xml

---
 common/lib/xmodule/xmodule/gst_module.py | 97 ++++++++++++++++--------
 1 file changed, 67 insertions(+), 30 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 276762408f..87ce2a8b68 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -70,42 +70,79 @@ class GraphicalSliderToolModule(XModule):
         """
         #substitute plot
         plot_div = '<div class="' + self.html_class + '_plot" id="' + self.html_id + '_plot"></div>'
-        html_string = html_string.replace('$plot$', plot_div)
+        html_string = re.sub(r'\$[^\$]*plot[^\$]*\$',
+                plot_div, html_string, flags=re.IGNORECASE | re.UNICODE)
 
-        # substitute sliders if we have them
-        if json.loads(self.configuration_json)['root'].get('sliders'):
-            sliders = json.loads(self.configuration_json)['root']['sliders']['slider']
-            if type(sliders) == dict:
-                sliders = [sliders]
-            vars = [x['@var'] for x in sliders]
+        # get variables
+        if json.loads(self.configuration_json)['root'].get('parameters'):
+            variables = json.loads(self.configuration_json)['root']['parameters']['param']
+            if type(variables) == dict:
+                variables = [variables]
+            variables = [x['@var'] for x in variables]
+        else:
+            return html_string
 
-            slider_div = '<span class="{element_class}_slider" id="{element_id}_slider_{var}" \
-            data-var="{var}" data-el_width="120"></span>'
+        #substitute sliders
+        slider_div = '<div class="{element_class}_slider" \
+                                   id="{element_id}_slider_{var}" \
+                                   data-var="{var}" data-el_width="{width}"\
+                     </div>'
+        for var in variables:
+            # find $slider var='var' ... $
+            instances = re.findall(r'\$slider\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
+                          + r'[^\$]*\$', html_string)
+            if instances:  # if presented
+                slider_def = instances[0]  # get $slider var='var' ... $ string
+                # get width
+                width = re.search(r'(?=.*width\=[\"\'](\d+)[\"\'])', slider_def)
+                if width:
+                    width = width.groups()[0]
+                else:  # no width parameter
+                    width = ''
+                # substitue parameters to slider div
+                replacement = slider_div.format(element_class=self.html_class,
+                                            element_id=self.html_id,
+                                            var=var,
+                                            width=width)
+                # subsitute $slider var='var' ... $ in html_srting to proper
+                # html div element
+                html_string = re.sub(r'\$slider\s+(?=.*var\=[\"\'](' + \
+                    var + ')[\"\'])' + r'[^\$]*\$',
+                replacement, html_string, flags=re.IGNORECASE | re.UNICODE)
 
-            for var in vars:
-                html_string = re.sub(r'\$slider\s+' + var + r'\$',
-                                    slider_div.format(element_class=self.html_class,
-                                                      element_id=self.html_id,
-                                                      var=var),
-                                    html_string, flags=re.IGNORECASE | re.UNICODE)
+        # substitute inputs if we have them
+        input_el = '<input class="{element_class}_input" \
+                                  id="{element_id}_input_{var}" \
+                                   data-var="{var}" data-el_width="{width}" \
+                                   data-el_readonly="{readonly}"> \
+                     </input>'
 
-        # substitute numbers if we have them
-        if json.loads(self.configuration_json)['root'].get('inputs'):
-            inputs = json.loads(self.configuration_json)['root']['inputs']['input']
-            if type(inputs) == dict:
-                inputs = [inputs]
-            vars = [x['@var'] for x in inputs]
+        input_index = 0  # make multiple inputs for same variable have
+        # different id
 
-            input_div = '<span class="{element_class}_input" id="{element_id}_input_{var}" \
-            data-var="{var}" data-el_width="60"></span>'
+        for var in variables:  # multiple inputs test
+            input_index = +1
+            instances = re.findall(r'\$input\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
+                          + r'[^\$]*\$', html_string)
+            # import ipdb; ipdb.set_trace()
+            for input_def in instances:
+                width = re.search(r'(?=.*width\=[\"\'](\d+)[\"\'])', input_def)
+                if width:
+                    width = width.groups()[0]
+                else:
+                    width = ''
+                readonly = re.search(r'(?=.*readonly\=[\"\'](\w+)[\"\'])', input_def)
+                if readonly:
+                    readonly = readonly.groups()[0]
+                else:
+                    readonly = ''
 
-            for var in vars:
-                html_string = re.sub(r'\$input\s+' + var + r'\$',
-                                    input_div.format(element_class=self.html_class,
-                                                     element_id=self.html_id,
-                                                     var=var),
-                                    html_string, flags=re.IGNORECASE | re.UNICODE)
-        # import ipdb; ipdb.set_trace()
+                replacement = input_el.format(element_class=self.html_class,
+                        element_id=self.html_id + '_' + str(input_index),
+                        var=var, width=width, readonly=readonly)
+                html_string = re.sub(r'\$input\s+(?=.*var\=[\"\'](' + \
+                                     var + ')[\"\'])' + r'[^\$]*\$',
+                replacement, html_string, flags=re.IGNORECASE | re.UNICODE)
         return html_string
 
     def get_configuration(self):

From 29b4299070f4d2c93154d4a005207919a7de09c2 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Fri, 14 Dec 2012 16:25:24 +0200
Subject: [PATCH 034/107] Work in progress on updating version of GST.

---
 .../js/src/graphical_slider_tool/state.js     | 211 +++++++++++-------
 1 file changed, 135 insertions(+), 76 deletions(-)

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 996384fe74..6f55cf18e5 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
@@ -2,7 +2,7 @@
 // define() functions from Require JS available inside the anonymous function.
 (function (requirejs, require, define) {
 
-define('State', [], function () {
+define('State', ['logme'], function (logme) {
     // 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
@@ -14,79 +14,67 @@ define('State', [], function () {
 
     // function: State
     function State(gstId, config) {
-        var constants, c1, plotDiv;
+        var parameters, allParameterNames, allParameterValues, plotDiv;
 
-        constants = {};
+        parameters = {};
 
-        // We must go through all of the input, and slider elements and
-        // retrieve all of the available constants. These will be added to an
-        // object as it's properties.
-        //
-        // First we will go through all of the inputs.
-        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++) {
-                    addConstFromInput(config.inputs.input[c1]);
-                }
-
-            } else if ($.isPlainObject(config.inputs.input)) {
-
-                // config.inputs.input is an object
-                addConstFromInput(config.inputs.input);
+        if (
+            (typeof config.parameters !== 'undefined') &&
+            (typeof config.parameters.param !== 'undefined')
+        ) {
 
+            // If config.parameters.param is an array, pass it to the processor
+            // element by element.
+            if ($.isArray(config.parameters.param) === true) {
+                (function (c1) {
+                    while (c1 < config.parameters.param.length) {
+                        addConstFromInput(config.parameters.param[c1]);
+                        c1 += 1;
+                    }
+                }(0));
             }
-        }
 
-        // Now we will go through all of the sliders.
-        if ((typeof config.sliders !== 'undefined') &&
-            (typeof config.sliders.slider !== 'undefined')) {
-            if ($.isArray(config.sliders.slider)) {
-                // config.sliders.slider is an array
-
-                for (c1 = 0; c1 < config.sliders.slider.length; c1++) {
-                    addConstFromSlider(config.sliders.slider[c1]);
-                }
-            } else if ($.isPlainObject(config.sliders.slider)) {
-                // config.sliders.slider is an object
-                addConstFromSlider(config.sliders.slider);
+            // If config.parameters.param is an object, pass this object to the
+            // processor directly.
+            else if ($.isPlainObject(config.inputs.input) === true) {
+                addConstFromInput(config.parameters.param);
             }
+
         }
 
         // The constructor will return an object with methods to operate on
         // it's private properties.
         return {
-            'getConstValue': getConstValue,
-            'setConstValue': setConstValue,
-            'bindUpdatePlotEvent': bindUpdatePlotEvent,
-            'getAllConstantNames': getAllConstantNames,
-            'getAllConstantValues': getAllConstantValues
+            'getParameterValue': getParameterValue,
+            'setParameterValue': setParameterValue,
+
+            'getAllParameterNames': getAllParameterNames,
+            'getAllParameterValues': getAllParameterValues,
+
+            'bindUpdatePlotEvent': bindUpdatePlotEvent
         };
 
-        function getAllConstantNames() {
-            var constName, allConstNames;
+        // ####################################################################
+        //
+        // To get all parameter names, you would do:
+        //
+        //     allParamNames = getAllParameterProperties('name');
+        //
+        // To get all parameter values, you would do:
+        //
+        //     allParamValues = getAllParameterProperties('value');
+        //
+        // ####################################################################
+        function getAllParameterProperties(propertyName) {
+            var paramName, allParamProperties;
 
-            allConstNames = [];
+            allParamProperties = [];
 
-            for (constName in constants) {
-                allConstNames.push(constName);
+            for (paramName in parameters) {
+                allParamProperties.push(parameters[paramName][propertyName]);
             }
 
-            return allConstNames;
-        }
-
-        function getAllConstantValues() {
-            var constName, allConstValues;
-
-            allConstValues = [];
-
-            for (constName in constants) {
-                allConstValues.push(constants[constName]);
-            }
-
-            return allConstValues;
+            return allParamProperties;
         }
 
         function bindUpdatePlotEvent(newPlotDiv, callback) {
@@ -95,7 +83,9 @@ define('State', [], function () {
             plotDiv.bind('update_plot', callback);
         }
 
-        function getConstValue(constName) {
+        function getParameterValue(constName) {
+
+
             if (constants.hasOwnProperty(constName) === false) {
                 // If the name of the constant is not tracked by state, return an
                 // 'undefined' value.
@@ -131,31 +121,100 @@ define('State', [], function () {
             }
         }
 
-        function addConstFromInput(obj) {
-            var constName, constValue;
+        // ####################################################################
+        //
+        // Function: processParameter(obj)
+        // -------------------------------
+        //
+        //
+        // This function will be run once for each instance of a GST.
+        //
+        // 'newParamObj' must be empty from the start for each invocation of
+        // this function, that's why we will declare it locally.
+        //
+        // We will parse the passed object 'obj' and populate the 'newParamObj'
+        // object with required properties.
+        //
+        // Since there will be many properties that are of type floating-point
+        // number, we will have a separate function for parsing them.
+        //
+        // processParameter() will fail right away if 'obj' does not have a
+        // '@var' property which represents the name of the parameter we want
+        // to process.
+        //
+        // If, after all of the properties have been processed, we reached the
+        // end of the function successfully, the 'newParamObj' will be added to
+        // the 'parameters' object (that is defined in the scope of State()
+        // function) as a property named as the name of the parameter.
+        //
+        // If at least one of the properties from 'obj' does not get correctly
+        // parsed, then the parameter represented by 'obj' will be disregarded.
+        // It will not be available to user-defined plotting functions, and
+        // things will most likely break. We will notify the user about this.
+        //
+        // ####################################################################
+        function processParameter(obj) {
+            var newParamObj;
 
-            // The name of the constant is obj['@var']. The value (initial) of
-            // the constant is obj['@initial']. I have taken the word 'initial'
-            // into brackets, because multiple inputs and/or sliders can
-            // represent the state of a single constant.
+            if (typeof obj['@var'] !== 'string') {
+                logme(
+                    '[ERROR] state.processParameter(obj): obj["' + attrName + '"] is not a string.'
+                );
+            }
 
-            if (typeof obj['@var'] === 'undefined') {
+            newParamObj = {};
+
+            processString('@var', 'name');
+
+            processFloat('@min', 'min');
+            processFloat('@max', 'max');
+            processFloat('@initial', 'value');
+
+            if (checkRequired('name', 'min', 'max', 'value') === false) {
+                logme('Not creating a parameter.');
                 return;
             }
 
-            constName = obj['@var'];
-
-            if (typeof obj['@initial'] === 'undefined') {
-                constValue = 0;
-            } else {
-                constValue = parseFloat(obj['@initial']);
-
-                if (isNaN(constValue) === true) {
-                    constValue = 0;
-                }
-            }
 
             constants[constName] = constValue;
+
+            return;
+
+            function processFloat(attrName, newAttrName) {
+                var attrValue;
+
+                if (typeof obj[attrName] !== 'string') {
+                    logme(
+                        '[ERROR] state.processParameter(obj): obj["' + attrName + '"] is not a string.'
+                    );
+
+                    return;
+                } else {
+                    attrValue = parseFloat(obj[attrName]);
+
+                    if (isNaN(attrValue) === true) {
+                        logme(
+                            '[ERROR] state.processParameter(obj): for attrName = "' + attrName + '" attrValue is NaN.'
+                        );
+
+                        return;
+                    }
+                }
+
+                newParamObj[newAttrName] = paramValue;
+            }
+
+            function processString(attrName, newAttrName) {
+                if (typeof obj[attrName] !== 'string') {
+                    logme(
+                        '[ERROR] state.processParameter(obj): obj["' + attrName + '"] is not a string.'
+                    );
+
+                    return;
+                }
+
+                newParamObj[newAttrName] = obj[attrName];
+            }
         }
 
         function addConstFromSlider(obj) {

From 488140bf27d36cf3bd7593f67c4ee5adafbc0cea Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Fri, 14 Dec 2012 19:03:47 +0200
Subject: [PATCH 035/107] Work in progress on rewriting GST.

---
 .../js/src/graphical_slider_tool/state.js     | 134 ++++++++----------
 1 file changed, 60 insertions(+), 74 deletions(-)

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 6f55cf18e5..c647f96846 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
@@ -83,19 +83,48 @@ define('State', ['logme'], function (logme) {
             plotDiv.bind('update_plot', callback);
         }
 
-        function getParameterValue(constName) {
+        function getParameterValue(paramName) {
 
-
-            if (constants.hasOwnProperty(constName) === false) {
-                // If the name of the constant is not tracked by state, return an
-                // 'undefined' value.
+            // If the name of the constant is not tracked by state, return an
+            // 'undefined' value.
+            if (parameters.hasOwnProperty(paramName) === false) {
                 return;
             }
 
-            return constants[constName];
+            return parameters[paramname].value;
         }
 
-        function setConstValue(constName, constValue) {
+        // ####################################################################
+        //
+        // Function: setParameterValue(paramName, paramValue, element)
+        // --------------------------------------------------
+        //
+        // This function can be called from a callback, registered by a slider
+        // or a text input, when specific events ('slide' or 'change') are
+        // triggered.
+        //
+        // The 'paramName' is the name of the parameter in 'parameters' object
+        // whose value must be updated to the new value of 'paramValue'.
+        //
+        // Before we update the value, we must check that:
+        //
+        //     1.) the parameter named as 'paramName' actually exists in the
+        //         'parameters' object;
+        //     2.) the value 'paramValue' is a valid floating-point number, and
+        //         it lies within the range specified by the 'min' and 'max'
+        //         properties of the stored parameter object.
+        //
+        // If 'paramName' and 'paramValue' turn out to be valid, we will update
+        // the stored value in the parameter with the new value, and also
+        // update all of the text inputs and the slider that correspond to this
+        // parameter (if any), so that they reflect the new parameter's value.
+        //
+        // If something went wrong (for example the new value is outside the
+        // allowed range), then we will reset the 'element' to display the
+        // original value.
+        //
+        // ####################################################################
+        function setParameterValue(paramName, paramValue, element) {
             var inputDiv;
 
             if (constants.hasOwnProperty(constName) === false) {
@@ -119,7 +148,7 @@ define('State', ['logme'], function (logme) {
             if (inputDiv.length !== 0) {
                 inputDiv.val(constValue);
             }
-        }
+        } // End-of: function setParameterValue
 
         // ####################################################################
         //
@@ -154,27 +183,30 @@ define('State', ['logme'], function (logme) {
         //
         // ####################################################################
         function processParameter(obj) {
-            var newParamObj;
+            var paramName, newParamObj;
 
             if (typeof obj['@var'] !== 'string') {
                 logme(
-                    '[ERROR] state.processParameter(obj): obj["' + attrName + '"] is not a string.'
+                    '[ERROR] State.processParameter(obj): obj["@var"] is not a string.',
+                    obj['@var'],
+                    '---> Not adding a parameter.'
                 );
-            }
 
-            newParamObj = {};
-
-            processString('@var', 'name');
-
-            processFloat('@min', 'min');
-            processFloat('@max', 'max');
-            processFloat('@initial', 'value');
-
-            if (checkRequired('name', 'min', 'max', 'value') === false) {
-                logme('Not creating a parameter.');
                 return;
             }
 
+            paramName = obj['@var'];
+            newParamObj = {};
+
+            if (
+                (processFloat('@min', 'min') === false) ||
+                (processFloat('@max', 'max') === false) ||
+                (processFloat('@initial', 'value') === false)
+            ) {
+                logme('---> Not adding a parameter named "' + paramName + '".');
+
+                return;
+            }
 
             constants[constName] = constValue;
 
@@ -185,10 +217,11 @@ define('State', ['logme'], function (logme) {
 
                 if (typeof obj[attrName] !== 'string') {
                     logme(
-                        '[ERROR] state.processParameter(obj): obj["' + attrName + '"] is not a string.'
+                        '[ERROR] state.processParameter(obj): obj["' + attrName + '"] is not a string.',
+                        obj[attrName]
                     );
 
-                    return;
+                    return false;
                 } else {
                     attrValue = parseFloat(obj[attrName]);
 
@@ -197,62 +230,15 @@ define('State', ['logme'], function (logme) {
                             '[ERROR] state.processParameter(obj): for attrName = "' + attrName + '" attrValue is NaN.'
                         );
 
-                        return;
+                        return false;
                     }
                 }
 
                 newParamObj[newAttrName] = paramValue;
-            }
 
-            function processString(attrName, newAttrName) {
-                if (typeof obj[attrName] !== 'string') {
-                    logme(
-                        '[ERROR] state.processParameter(obj): obj["' + attrName + '"] is not a string.'
-                    );
-
-                    return;
-                }
-
-                newParamObj[newAttrName] = obj[attrName];
-            }
-        }
-
-        function addConstFromSlider(obj) {
-            var constName, constValue, rangeBlobs;
-
-            // The name of the constant is obj['@var']. The value (initial) of
-            // the constant is the second blob of the 'range' parameter of the
-            // slider which is obj['@range']. Multiple sliders and/or inputs
-            // can represent the same constant - therefore 'initial' is in
-            // brackets. The range is a string composed of 3 blobs, separated
-            // by commas.
-
-            if (typeof obj['@var'] === 'undefined') {
-                return;
-            }
-
-            constName = obj['@var'];
-
-            if (typeof obj['@range'] !== 'string') {
-                constValue = 0;
-            } else {
-                rangeBlobs = obj['@range'].split(',');
-
-                // We must have gotten exactly 3 blobs (pieces) from the split.
-                if (rangeBlobs.length !== 3) {
-                    constValue = 0;
-                } else {
-                    // Get the second blob from the split string.
-                    constValue = parseFloat(rangeBlobs[1]);
-
-                    if (isNaN(constValue) === true) {
-                        constValue = 0;
-                    }
-                }
-            }
-
-            constants[constName] = constValue;
-        }
+                return true;
+            } // End-of: function processFloat
+        } // End-of: function processParameter
     } // End-of: function State
 });
 

From dc42f1813f8bf09efe87494334e7f6c1036d9f90 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Mon, 17 Dec 2012 15:40:03 +0200
Subject: [PATCH 036/107] GST: work in progress on refactoring.

---
 common/lib/xmodule/xmodule/gst_module.py      |   4 +-
 .../js/src/graphical_slider_tool/graph.js     |  28 +--
 .../js/src/graphical_slider_tool/gst_main.js  |  15 +-
 .../js/src/graphical_slider_tool/inputs.js    | 149 +++++-------
 .../js/src/graphical_slider_tool/sliders.js   | 216 +++---------------
 .../js/src/graphical_slider_tool/state.js     | 134 ++++++++---
 6 files changed, 210 insertions(+), 336 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 87ce2a8b68..0d6677c2ff 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -85,7 +85,7 @@ class GraphicalSliderToolModule(XModule):
         #substitute sliders
         slider_div = '<div class="{element_class}_slider" \
                                    id="{element_id}_slider_{var}" \
-                                   data-var="{var}" data-el_width="{width}"\
+                                   data-var="{var}" data-el_width="{width}">\
                      </div>'
         for var in variables:
             # find $slider var='var' ... $
@@ -151,7 +151,7 @@ class GraphicalSliderToolModule(XModule):
         """
         # root added for interface compatibility with xmltodict.parse
         self.configuration_json = json.dumps(
-                xmltodict.parse('<root>' +
+                xmltodict.parse('<root class="' + self.location.category + '">' +
                 stringify_children(self.definition['configuration'])
                              + '</root>'))
         return self.configuration_json
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 14594a7b3b..385386eebc 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -268,7 +268,7 @@ define('Graph', ['logme'], function (logme) {
             }
 
             function addFunction(funcString, color, line, dot, label) {
-                var newFunctionObject, func, constNames;
+                var newFunctionObject, func, paramNames;
 
                 // The main requirement is function string. Without it we can't
                 // create a function, and the series cannot be calculated.
@@ -283,19 +283,19 @@ define('Graph', ['logme'], function (logme) {
                     'dot': false
                 };
 
-                // Get all of the constant names defined by the user in the
+                // Get all of the parameter names defined by the user in the
                 // XML.
-                constNames = state.getAllConstantNames();
+                paramNames = state.getAllParameterNames();
 
                 // The 'x' is always one of the function parameters.
-                constNames.push('x');
+                paramNames.push('x');
 
                 // Must make sure that the function body also gets passed to
                 // the Function constructor.
-                constNames.push(funcString);
+                paramNames.push(funcString);
 
                 // Create the function from the function string, and all of the
-                // available constants + the 'x' variable as it's parameters.
+                // available parameters AND the 'x' variable as it's parameters.
                 // For this we will use the built-in Function object
                 // constructor.
                 //
@@ -303,7 +303,7 @@ define('Graph', ['logme'], function (logme) {
                 // likely the user supplied an invalid JavaScript function body
                 // string. In this case we will not proceed.
                 try {
-                    func = Function.apply(null, constNames);
+                    func = Function.apply(null, paramNames);
                 } catch (err) {
                     // Let's tell the user. He will see a nice red error
                     // message instead of a graph.
@@ -363,9 +363,9 @@ define('Graph', ['logme'], function (logme) {
         }
 
         function generateData() {
-            var c0, functionObj, seriesObj, dataPoints, constValues, x, y;
+            var c0, functionObj, seriesObj, dataPoints, paramValues, x, y;
 
-            constValues = state.getAllConstantValues();
+            paramValues = state.getAllParameterValues();
 
             dataSeries = [];
 
@@ -379,16 +379,16 @@ define('Graph', ['logme'], function (logme) {
                 for (x = xrange.start; x <= xrange.end; x += xrange.step) {
 
                     // Push the 'x' variable to the end of the parameter array.
-                    constValues.push(x);
+                    paramValues.push(x);
 
                     // We call the user defined function, passing all of the
-                    // available constant values. inside this function they
+                    // available parameter values. Inside this function they
                     // will be accessible by their names.
-                    y = functionObj.func.apply(window, constValues);
+                    y = functionObj.func.apply(window, paramValues);
 
-                    // Return the constValues array to how it was before we
+                    // Return the paramValues array to how it was before we
                     // added 'x' variable to the end of it.
-                    constValues.pop();
+                    paramValues.pop();
 
                     // Add the generated point to the data points set.
                     dataPoints.push([x, y]);
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 0b46eb42bb..4d5d1d12ae 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
@@ -8,26 +8,29 @@ define(
     // 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'],
-    function (State, GeneralMethods, Sliders, Inputs, Graph) {
+    ['State', 'GeneralMethods', 'Sliders', 'Inputs', 'Graph', 'logme'],
+    function (State, GeneralMethods, Sliders, Inputs, Graph, logme) {
 
     return GstMain;
 
     function GstMain(gstId) {
-        var config, state;
+        var config, gstClass, state;
 
         // Get the JSON configuration, and parse it, and store as an object.
         config = JSON.parse($('#' + gstId + '_json').html()).root;
 
+        gstClass = config['@class'];
+        logme('gstClass: ' + gstClass);
+
         // Parse the configuration settings for sliders and text inputs, and
         // extract all of the defined constants (their names along with their
         // initial values).
-        state = State(gstId, config);
+        state = State(gstId, gstClass, config);
 
         // Create the sliders and the text inputs, attaching them to
         // approriate constants.
-        Sliders(gstId, config, state);
-        Inputs(gstId, config, state);
+        Sliders(gstId, gstClass, state);
+        Inputs(gstId, gstClass, state);
 
         // Configure and display the loop. Attach event for the graph to be
         // updated on any change of a slider or a text input.
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
index b5d3217a85..0365f40ea5 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
@@ -2,108 +2,60 @@
 // define() functions from Require JS available inside the anonymous function.
 (function (requirejs, require, define) {
 
-define('Inputs', [], function () {
+define('Inputs', ['logme'], function (logme) {
     return Inputs;
 
-    function Inputs(gstId, config, state) {
-        var constNamesUsed;
+    function Inputs(gstId, gstClass, state) {
+        var c1, paramName, allParamNames;
 
-        // There should not be more than one text input per a constant. This
-        // just does not make sense. However, nothing really prevents the user
-        // from specifying more than one text input for the same constant name.
-        // That's why we have to track which constant names already have
-        // text inputs for them, and prevent adding further text inputs to
-        // these constants.
-        //
-        // constNamesUsed is an object to which we will add properties having
-        // the name of the constant to which we are adding a text input to.
-        // When creating a new text input, we must consult with this object, to
-        // see if the constant name is not defined as it's property.
-        constNamesUsed = {};
+        allParamNames = state.getAllParameterNames();
 
-        // 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)) {
+        console.log(allParamNames);
 
-                // config.inputs.input is an array. For each element, we will
-                // add a text input.
-                for (c1 = 0; c1 < config.inputs.input.length; c1++) {
-                    createInput(config.inputs.input[c1]);
+        for (c1 = 0; c1 < allParamNames.length; c1 += 1) {
+            $('#' + gstId).children('.' + gstClass + '_input').each(function (index, value) {
+                var inputDiv, paramName;
+
+                paramName = allParamNames[c1];
+
+                inputDiv = $(value);
+
+                if (paramName === inputDiv.data('var')) {
+                    createInput(inputDiv, paramName);
                 }
-            } else if ($.isPlainObject(config.inputs.input)) {
-
-                // config.inputs.input is an object. Add a text input for it.
-                createInput(config.inputs.input);
-
-            }
+            });
         }
 
-        function createInput(obj) {
-            var constName, constValue, spanEl, inputEl, readOnly;
+        return;
 
-            // The name of the constant is obj['@var']. If it is not specified,
-            // we will skip creating a text input for this constant.
-            if (typeof obj['@var'] !== 'string') {
-                return;
-            }
-            constName = obj['@var'];
+        function createInput(inputDiv, paramName) {
+            var paramObj, inputWidth, readOnly;
 
-            // We will not add a text input for a constant which already has a
-            // text input defined for it.
-            //
-            // We will add the constant name to the 'constNamesUsed' object in
-            // the end, when everything went successfully.
-            if (constNamesUsed.hasOwnProperty(constName)) {
-                return;
+            paramObj = state.getParamObj(paramName);
+
+            // We will define the width of the slider to a sensible default.
+            inputWidth = 400;
+
+            // See if it was specified by the user.
+            if (isFinite(parseInt(inputDiv.data('el_width'))) === true) {
+                inputWidth = parseInt(inputDiv.data('el_width'));
             }
 
-            // Multiple sliders and/or inputs can represent the same constant.
-            // Therefore we will get the most recent const value from the state
-            // object. If it is undefined, we will skip creating a text input
-            // for this constant.
-            constValue = state.getConstValue(constName);
-            if (constValue === undefined) {
-                return;
+            // Set the width of the element.
+            inputDiv.width(inputWidth);
+
+            inputDiv.css('display', 'inline-block');
+
+            readOnly = false;
+            if (inputDiv.attr('data-el_readonly').toLowerCase() === 'true') {
+                readOnly = true;
             }
 
-            // With the constant name, and the constant value being defined,
-            // lets get the element on the page into which the text input will
-            // be inserted.
-            spanEl = $('#' + gstId + '_input_' + constName);
-
-            // If a corresponding element for this constant does not exist on
-            // the page, we will not be making a text input.
-            if (spanEl.length === 0) {
-                return;
-            }
-
-            // Create the text input element.
-            inputEl = $('<input type"text" />');
-
-            // Set the current constant to the text input. It will be visible
-            // to the user.
-            inputEl.val(constValue);
-
-            // Before binding a 'change' event, we will check if this text
-            // input is specified as 'read only'.
-            //
-            // By default, this setting is false - the user can change the
-            // value in the text input.
-            readonly = false;
-            if (typeof obj['@readonly'] === 'string') {
-                if (obj['@readonly'] === 'true') {
-                    readonly = true;
-                }
-            }
-
-            if (readonly === true) {
+            if (readOnly === true) {
 
                 // In the case of a readonly config option, configure the text
                 // inputit as read-only, and NOT bind an event to it.
-                inputEl.attr('readonly', 'readonly');
+                inputDiv.attr('readonly', 'readonly');
 
             } else { // readonly !== true
 
@@ -111,14 +63,16 @@ define('Inputs', [], function () {
                 // 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.
-                inputEl.bind('change', inputOnChange);
+                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.
-            inputEl.button().css({
+            inputDiv.button().css({
                 'font': 'inherit',
                 'color': 'inherit',
                 'text-align': 'left',
@@ -128,19 +82,22 @@ define('Inputs', [], function () {
                 // 'width': '50px'
             });
 
-            // And finally, publish the text input element to the page.
-            inputEl.appendTo(spanEl);
-
-            // Don't forget to add the constant to the list of used constants.
-            // Next time a slider for this constant will not be created.
-            constNamesUsed[constName] = true;
+            paramObj.inputDivs.push(inputDiv);
 
             return;
 
-            // When the user changes the value of this text input, the 'state'
-            // will be updated, forcing the plot to be redrawn.
+            // 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) {
-                state.setConstValue(constName, $(this).val());
+                var inputDiv;
+
+                inputDiv = $(this);
+                state.setParameterValue(paramName, inputDiv.val(), inputDiv);
             }
         }
     }
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 ef3d5bb6d3..f41a43fde7 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
@@ -2,222 +2,70 @@
 // define() functions from Require JS available inside the anonymous function.
 (function (requirejs, require, define) {
 
-define('Sliders', [], function () {
+define('Sliders', ['logme'], function (logme) {
     return Sliders;
 
-    function Sliders(gstId, config, state) {
-        var constNamesUsed;
+    function Sliders(gstId, gstClass, state) {
+        var c1, paramName, allParamNames, sliderDiv;
 
-        // There should not be more than one slider per a constant. This just
-        // does not make sense. However, nothing really prevents the user from
-        // specifying more than one slider for the same constant name. That's
-        // why we have to track which constant names already have sliders for
-        // them, and prevent adding further sliders to these constants.
-        //
-        // constNamesUsed is an object to which we will add properties having
-        // the name of the constant to which we are adding a slider to. When
-        // creating a new slider, we must consult with this object, to see if
-        // the constant name is not defined as it's property.
-        constNamesUsed = {};
+        allParamNames = state.getAllParameterNames();
 
-        // 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.
-        if ((typeof config.sliders !== 'undefined') &&
-            (typeof config.sliders.slider !== 'undefined')) {
-            if ($.isArray(config.sliders.slider)) {
+        for (c1 = 0; c1 < allParamNames.length; c1 += 1) {
+            paramName = allParamNames[c1];
 
-                // config.sliders.slider is an array. For each object in the
-                // array, create a slider.
-                for (c1 = 0; c1 < config.sliders.slider.length; c1++) {
-                    createSlider(config.sliders.slider[c1]);
-                }
-
-            } else if ($.isPlainObject(config.sliders.slider)) {
-
-                // config.sliders.slider is an object. Create a slider for it.
-                createSlider(config.sliders.slider);
+            logme('Looking for slider with ID: ' + gstId + '_slider_' + paramName);
+            sliderDiv = $('#' + gstId + '_slider_' + paramName);
 
+            if (sliderDiv.length === 1) {
+                logme('Found one slider DIV with such an ID.');
+                createSlider(sliderDiv, paramName);
+            } else {
+                logme('Did not find such a slider.');
             }
         }
 
-        function createSlider(obj) {
-            var constName, constValue, rangeBlobs, valueMin, valueMax, spanEl,
-                sliderEl, sliderWidth;
+        function createSlider(sliderDiv, paramName) {
+            var paramObj, sliderWidth;
 
-            // The name of the constant is obj['@var']. If it is not specified,
-            // we will skip creating a slider for this constant.
-            if (typeof obj['@var'] !== 'string') {
-                return;
-            }
-            constName = obj['@var'];
-
-            // We will not add a slider for a constant which already has a
-            // slider defined for it.
-            //
-            // We will add the constant name to the 'constNamesUsed' object in
-            // the end, when everything went successfully.
-            if (constNamesUsed.hasOwnProperty(constName)) {
-                return;
-            }
-
-            // Multiple sliders and/or inputs can represent the same constant.
-            // Therefore we will get the most recent const value from the state
-            // object. If it is undefined, then something terrible has
-            // happened! We will skip creating a slider for this constant.
-            constValue = state.getConstValue(constName);
-            if (constValue === undefined) {
-                return;
-            }
-
-            // The range is a string composed of 3 blobs, separated by commas.
-            // The first blob is the min value for the slider, the third blob
-            // is the max value for the slider.
-            if (typeof obj['@range'] !== 'string') {
-
-                // If the range is not a string, we will set a default range.
-                // No promise as to the quality of the data points that this
-                // range will produce.
-                valueMin = constValue - 10;
-                valueMax = constValue + 10;
-
-            } else {
-
-                // Separate the range string by commas, and store each blob as
-                // an element in an array.
-                rangeBlobs = obj['@range'].split(',');
-
-                // We must have gotten exactly 3 blobs (pieces) from the split.
-                if (rangeBlobs.length !== 3) {
-
-                    // Set some sensible defaults, if the range string was
-                    // split into more or less than 3 pieces.
-                    setDefaultMinMax();
-
-                } else {
-
-                    // Get the first blob from the split string. It is the min
-                    // value.
-                    valueMin = parseFloat(rangeBlobs[0]);
-
-                    // Is it a well-formed float number?
-                    if (isNaN(valueMin) === true) {
-
-                        // No? Then set a sensible default value.
-                        valueMin = constValue - 10;
-
-                    }
-
-                    // Get the third blob from the split string. It is the max.
-                    valueMax = parseFloat(rangeBlobs[2]);
-
-                    // Is it a well-formed float number?
-                    if (isNaN(valueMax) === true) {
-
-                        // No? Then set a sensible default value.
-                        valueMax = constValue + 10;
-
-                    }
-
-                    // Logically, the min, value, and max should make sense.
-                    // I.e. we will make sure that:
-                    //
-                    //     min <= value <= max
-                    //
-                    // If this is not the case, we will set some defaults.
-                    if ((valueMin > valueMax) ||
-                        (valueMin > constValue) ||
-                        (valueMax < constValue)) {
-
-                        // Set some sensible defaults, if min/value/max logic
-                        // is broken.
-                        setDefaultMinMax();
-
-                    }
-                }
-            }
-
-            // At this point we have the constant name, the constant value, and
-            // the min and max values for this slider. Lets get the element on
-            // the page into which the slider will be inserted.
-            spanEl = $('#' + gstId + '_slider_' + constName);
-
-            // If a corresponding element for this constant does not exist on
-            // the page, we will not be making a slider.
-            if (spanEl.length === 0) {
-                return;
-            }
-
-            // Create the slider DIV.
-            sliderEl = $('<div>');
+            paramObj = state.getParamObj(paramName);
 
             // We will define the width of the slider to a sensible default.
             sliderWidth = 400;
 
-            // Then we will see if one is provided in the config for this
-            // slider. If we find it, and it is a well-formed integer, we will
-            // use it, instead of the default width.
-            if (typeof obj['@width'] === 'string') {
-                if (isNaN(parseInt(obj['@width'], 10)) === false) {
-                    sliderWidth = parseInt(obj['@width'], 10);
-                }
+            // See if it was specified by the user.
+            if (isFinite(parseInt(sliderDiv.data('el_width'))) === true) {
+                sliderWidth = parseInt(sliderDiv.data('el_width'));
             }
 
-            // Set the defined width to the slider.
-            // sliderEl.width(sliderWidth);
+            // Set the width of the element.
+            sliderDiv.width(sliderWidth);
 
-            console.log('[Before]');
-            console.log('sliderEl.width: ' + sliderEl.width());
-
-            sliderEl.width(spanEl.data('el_width'));
-
-            console.log('[After]');
-            console.log('sliderEl.width: ' + sliderEl.width());
-
-            // And make sure that it gets added to the page as an
-            // 'inline-block' element. This will allow for the insertion of the
-            // slider into a paragraph, without the browser forcing it out of
-            // the paragraph onto a new line, separate line.
-            sliderEl.css('display', 'inline-block');
+            sliderDiv.css('display', 'inline-block');
 
             // 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 'change' event.
-            sliderEl.slider({
-                'min': valueMin,
-                'max': valueMax,
-                'value': constValue,
-                'step': (valueMax - valueMin) / 50.0,
+            sliderDiv.slider({
+                'min': paramObj.min,
+                'max': paramObj.max,
+                'value': paramObj.value,
+                'step': paramObj.step,
 
                 // 'change': sliderOnChange,
-                'slide': sliderOnChange
+                'slide': sliderOnSlide
             });
 
-            // Append the slider DIV to the element on the page where the user
-            // wants to see it.
-            sliderEl.appendTo(spanEl);
-
-            // OK! So we made it this far...
-            //
-            // Adding the constant to the list of used constants. Next time a
-            // slider for this constant will not be created.
-            constNamesUsed[constName] = true;
+            paramObj.sliderDiv = sliderDiv;
 
             return;
 
-            // Update the 'state' - i.e. set the value of the constant this
+            // 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 sliderOnChange(event, ui) {
-                state.setConstValue(constName, ui.value);
-            }
-
-            // The sensible defaults for the slider's range.
-            function setDefaultMinMax() {
-                valueMin = constValue - 10;
-                valueMax = constValue + 10;
+            function sliderOnSlide(event, ui) {
+                state.setParameterValue(paramName, ui.value, sliderDiv);
             }
         }
     }
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 c647f96846..ed0ca6ac8b 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
@@ -13,11 +13,22 @@ define('State', ['logme'], function (logme) {
     return State;
 
     // function: State
-    function State(gstId, config) {
-        var parameters, allParameterNames, allParameterValues, plotDiv;
+    function State(gstId, gstClass, config) {
+        var parameters, allParameterNames, allParameterValues,
+            plotDiv;
 
+        // Initially, there are no parameters to track. So, we will instantiate
+        // an empty object.
+        //
+        // As we parse the JSON config object, we will add parameters as
+        // named properties (for example
+        //
+        //     parameters.a = {...};
+        //
+        // for the parameter 'a'.
         parameters = {};
 
+        // Check that the required object is available.
         if (
             (typeof config.parameters !== 'undefined') &&
             (typeof config.parameters.param !== 'undefined')
@@ -28,7 +39,7 @@ define('State', ['logme'], function (logme) {
             if ($.isArray(config.parameters.param) === true) {
                 (function (c1) {
                     while (c1 < config.parameters.param.length) {
-                        addConstFromInput(config.parameters.param[c1]);
+                        processParameter(config.parameters.param[c1]);
                         c1 += 1;
                     }
                 }(0));
@@ -37,44 +48,53 @@ define('State', ['logme'], function (logme) {
             // If config.parameters.param is an object, pass this object to the
             // processor directly.
             else if ($.isPlainObject(config.inputs.input) === true) {
-                addConstFromInput(config.parameters.param);
+                processParameter(config.parameters.param);
             }
 
         }
 
+        // Instead of building these arrays every time when some component
+        // requests them, we will create them in the beginning, and then update
+        // by element when some parameter's value changes.
+        //
+        // Then we can just return the required array, instead of iterating
+        // over all of the properties of the 'parameters' object, and
+        // extracting their names/values one by one.
+        allParameterNames = [];
+        allParameterValues = [];
+
+        generateHelperArrays();
+
+        logme(parameters, allParameterNames, allParameterValues);
+
         // The constructor will return an object with methods to operate on
         // it's private properties.
         return {
             'getParameterValue': getParameterValue,
             'setParameterValue': setParameterValue,
 
+            'getParamObj': getParamObj,
+
             'getAllParameterNames': getAllParameterNames,
             'getAllParameterValues': getAllParameterValues,
 
             'bindUpdatePlotEvent': bindUpdatePlotEvent
         };
 
-        // ####################################################################
-        //
-        // To get all parameter names, you would do:
-        //
-        //     allParamNames = getAllParameterProperties('name');
-        //
-        // To get all parameter values, you would do:
-        //
-        //     allParamValues = getAllParameterProperties('value');
-        //
-        // ####################################################################
-        function getAllParameterProperties(propertyName) {
-            var paramName, allParamProperties;
+        function getAllParameterNames() {
+            return allParameterNames;
+        }
 
-            allParamProperties = [];
+        function getAllParameterValues() {
+            return allParameterValues;
+        }
 
-            for (paramName in parameters) {
-                allParamProperties.push(parameters[paramName][propertyName]);
+        function getParamObj(paramName) {
+            if (parameters.hasOwnProperty(paramName) === false) {
+                return;
             }
 
-            return allParamProperties;
+            return parameters[paramName];
         }
 
         function bindUpdatePlotEvent(newPlotDiv, callback) {
@@ -118,6 +138,8 @@ define('State', ['logme'], function (logme) {
         // the stored value in the parameter with the new value, and also
         // update all of the text inputs and the slider that correspond to this
         // parameter (if any), so that they reflect the new parameter's value.
+        // Finally, the helper array 'allParameterValues' will also be updated
+        // to reflect the change.
         //
         // If something went wrong (for example the new value is outside the
         // allowed range), then we will reset the 'element' to display the
@@ -125,29 +147,50 @@ define('State', ['logme'], function (logme) {
         //
         // ####################################################################
         function setParameterValue(paramName, paramValue, element) {
-            var inputDiv;
+            var paramValueNum, c1;
 
-            if (constants.hasOwnProperty(constName) === false) {
-                // If the name of the constant is not tracked by state, return an
-                // 'undefined' value.
+            // If a parameter with the name specified by the 'paramName'
+            // parameter is not tracked by state, do not do anything.
+            if (parameters.hasOwnProperty(paramName) === false) {
                 return;
             }
 
-            if (isNaN(parseFloat(constValue)) === true) {
-                // We are interested only in valid float values.
+            // Try to convert the passed value to a valid floating-point
+            // number.
+            paramValueNum = parseFloat(paramValue);
+
+            if (
+                // We are interested only in valid float values. NaN, -INF,
+                // +INF we will disregard.
+                (isFinite(paramValueNum) === false) ||
+
+                // If the new parameter's value is valid, but lies outised of
+                // the parameter's allowed range, we will also disregard it.
+                (paramValueNum < parameters[paramName].min) ||
+                (paramValueNum > parameters[paramName].max)
+            ) {
+                // We will also change the element's value back to the current
+                // parameter's value.
+                element.val(parameters[paramName].value);
+
                 return;
             }
 
-            constants[constName] = parseFloat(constValue);
+            parameters[paramName].value = paramValueNum;
 
             if (plotDiv !== undefined) {
                 plotDiv.trigger('update_plot');
             }
 
-            inputDiv = $('#' + gstId + '_input_' + constName).children('input');
-            if (inputDiv.length !== 0) {
-                inputDiv.val(constValue);
+            for (c1 = 0; c1 < parameters[paramName].inputDivs.length; c1 += 1) {
+                parameters[paramName].inputDivs[c1].val(paramValueNum);
             }
+
+            if (parameters[paramName].sliderDiv !== null) {
+                parameters[paramName].sliderDiv.slider('value', paramValueNum);
+            }
+
+            allParameterValues[parameters[paramName].helperArrayIndex] = paramValueNum;
         } // End-of: function setParameterValue
 
         // ####################################################################
@@ -156,7 +199,8 @@ define('State', ['logme'], function (logme) {
         // -------------------------------
         //
         //
-        // This function will be run once for each instance of a GST.
+        // This function will be run once for each instance of a GST when
+        // parsing the JSON config object.
         //
         // 'newParamObj' must be empty from the start for each invocation of
         // this function, that's why we will declare it locally.
@@ -201,6 +245,7 @@ define('State', ['logme'], function (logme) {
             if (
                 (processFloat('@min', 'min') === false) ||
                 (processFloat('@max', 'max') === false) ||
+                (processFloat('@step', 'step') === false) ||
                 (processFloat('@initial', 'value') === false)
             ) {
                 logme('---> Not adding a parameter named "' + paramName + '".');
@@ -208,7 +253,10 @@ define('State', ['logme'], function (logme) {
                 return;
             }
 
-            constants[constName] = constValue;
+            newParamObj.inputDivs = [];
+            newParamObj.sliderDiv = null;
+
+            parameters[paramName] = newParamObj;
 
             return;
 
@@ -234,11 +282,29 @@ define('State', ['logme'], function (logme) {
                     }
                 }
 
-                newParamObj[newAttrName] = paramValue;
+                newParamObj[newAttrName] = attrValue;
 
                 return true;
             } // End-of: function processFloat
         } // End-of: function processParameter
+
+        // Populate 'allParameterNames' and 'allParameterValues' with data.
+        // Link each parameter object with the corresponding helper array via
+        // an index ('helperArrayIndex'). It will be the same for both of the
+        // arrays.
+        function generateHelperArrays() {
+            var paramName, c1;
+
+            c1 = 0;
+            for (paramName in parameters) {
+                allParameterNames.push(paramName);
+                allParameterValues.push(parameters[paramName].value);
+
+                parameters[paramName].helperArrayIndex = c1;
+
+                c1 += 1;
+            }
+        }
     } // End-of: function State
 });
 

From 6c25bda20f0555cf62de2e2c695224aa25712e7d Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Mon, 17 Dec 2012 18:04:49 +0200
Subject: [PATCH 037/107] added style and removed width

---
 common/lib/xmodule/xmodule/gst_module.py | 76 +++++++++++++++---------
 1 file changed, 47 insertions(+), 29 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 0d6677c2ff..94ffa3d1d3 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -69,9 +69,19 @@ class GraphicalSliderToolModule(XModule):
         Simple variant: slider and plot controls are not inside any tag.
         """
         #substitute plot
-        plot_div = '<div class="' + self.html_class + '_plot" id="' + self.html_id + '_plot"></div>'
-        html_string = re.sub(r'\$[^\$]*plot[^\$]*\$',
-                plot_div, html_string, flags=re.IGNORECASE | re.UNICODE)
+        plot_div = '<div class="{element_class}__plot" id="{element_id}_plot \
+                    style="{style}"></div>'
+        # extract css style from plot
+        plot_def = re.findall(r'\$\s+plot[^\$]*\$', html_string)
+        style = re.search(r'(?=.*width\=[\"\'](.*)[\"\'])', plot_def)
+        if style:
+            style = style.groups()[0]
+        else:  # no style parameter
+            style = ''
+        replacement = plot_div.format(element_class=self.html_class,
+                                            style=style)
+        html_string = re.sub(r'\$\s+plot[^\$]*\$', replacement, html_string,
+                        flags=re.IGNORECASE | re.UNICODE)
 
         # get variables
         if json.loads(self.configuration_json)['root'].get('parameters'):
@@ -85,62 +95,70 @@ class GraphicalSliderToolModule(XModule):
         #substitute sliders
         slider_div = '<div class="{element_class}_slider" \
                                    id="{element_id}_slider_{var}" \
-                                   data-var="{var}" data-el_width="{width}">\
+                                   data-var="{var}" data-el_style="{style}">\
                      </div>'
         for var in variables:
             # find $slider var='var' ... $
-            instances = re.findall(r'\$slider\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
+            instances = re.findall(r'\$\s+slider\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
                           + r'[^\$]*\$', html_string)
-            if instances:  # if presented
+            if instances:  # if presented, only one slider per var
                 slider_def = instances[0]  # get $slider var='var' ... $ string
-                # get width
-                width = re.search(r'(?=.*width\=[\"\'](\d+)[\"\'])', slider_def)
-                if width:
-                    width = width.groups()[0]
-                else:  # no width parameter
-                    width = ''
-                # substitue parameters to slider div
+                # extract var for proper style extraction further
+                var_substring = re.search(r'(var\=[\"\']' + var + r'[\"\'])',
+                                          slider_def)
+                slider_def = slider_def.replace(var_substring, '')
+                # get style
+                style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', slider_def)
+                if style:
+                    style = style.groups()[0]
+                else:  # no style parameter
+                    style = ''
+                # substitute parameters to slider div
                 replacement = slider_div.format(element_class=self.html_class,
                                             element_id=self.html_id,
-                                            var=var,
-                                            width=width)
+                                            var=var, style=style)
                 # subsitute $slider var='var' ... $ in html_srting to proper
                 # html div element
-                html_string = re.sub(r'\$slider\s+(?=.*var\=[\"\'](' + \
+                html_string = re.sub(r'\$\s+slider\s+(?=.*var\=[\"\'](' + \
                     var + ')[\"\'])' + r'[^\$]*\$',
                 replacement, html_string, flags=re.IGNORECASE | re.UNICODE)
 
         # substitute inputs if we have them
         input_el = '<input class="{element_class}_input" \
                                   id="{element_id}_input_{var}" \
-                                   data-var="{var}" data-el_width="{width}" \
+                                   data-var="{var}" data-el_style="{style}" \
                                    data-el_readonly="{readonly}"> \
                      </input>'
 
         input_index = 0  # make multiple inputs for same variable have
         # different id
 
-        for var in variables:  # multiple inputs test
+        for var in variables:
             input_index = +1
-            instances = re.findall(r'\$input\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
+            instances = re.findall(r'\$\s+input\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
                           + r'[^\$]*\$', html_string)
             # import ipdb; ipdb.set_trace()
-            for input_def in instances:
-                width = re.search(r'(?=.*width\=[\"\'](\d+)[\"\'])', input_def)
-                if width:
-                    width = width.groups()[0]
-                else:
-                    width = ''
-                readonly = re.search(r'(?=.*readonly\=[\"\'](\w+)[\"\'])', input_def)
+            for input_def in instances:  # for multiple inputs per var
+                # extract var and readonly before style!
+                var_substring = re.search(r'(var\=[\"\']' + var + r'[\"\'])',
+                                          input_def)
+                input_def = input_def.replace(var_substring, '')
+                readonly = re.search(r'(?=.*(readonly\=[\"\'](\w+)[\"\']))', input_def)
                 if readonly:
-                    readonly = readonly.groups()[0]
+                    readonly = readonly.groups()[1]
+                    input_def = input_def.replace(readonly.groups()[0], '')
                 else:
                     readonly = ''
+                style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', input_def)
+                if style:
+                    style = style.groups()[0]
+                else:
+                    style = ''
 
                 replacement = input_el.format(element_class=self.html_class,
                         element_id=self.html_id + '_' + str(input_index),
-                        var=var, width=width, readonly=readonly)
-                html_string = re.sub(r'\$input\s+(?=.*var\=[\"\'](' + \
+                        var=var, readonly=readonly, style=style)
+                html_string = re.sub(r'\$\s+input\s+(?=.*var\=[\"\'](' + \
                                      var + ')[\"\'])' + r'[^\$]*\$',
                 replacement, html_string, flags=re.IGNORECASE | re.UNICODE)
         return html_string

From 6bbcadb40f7453be8ecf13962b6c264a2af81a86 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Mon, 17 Dec 2012 18:49:47 +0200
Subject: [PATCH 038/107] fix bugs

---
 common/lib/xmodule/xmodule/gst_module.py | 29 ++++++++++++------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 94ffa3d1d3..26d5793c59 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -69,18 +69,19 @@ class GraphicalSliderToolModule(XModule):
         Simple variant: slider and plot controls are not inside any tag.
         """
         #substitute plot
-        plot_div = '<div class="{element_class}__plot" id="{element_id}_plot \
+        plot_div = '<div class="{element_class}_plot" id="{element_id}_plot" \
                     style="{style}"></div>'
         # extract css style from plot
-        plot_def = re.findall(r'\$\s+plot[^\$]*\$', html_string)
-        style = re.search(r'(?=.*width\=[\"\'](.*)[\"\'])', plot_def)
+        plot_def = re.search(r'\$\s*plot[^\$]*\$', html_string).group()
+        style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', plot_def)
         if style:
             style = style.groups()[0]
         else:  # no style parameter
             style = ''
         replacement = plot_div.format(element_class=self.html_class,
+                                      element_id=self.html_id,
                                             style=style)
-        html_string = re.sub(r'\$\s+plot[^\$]*\$', replacement, html_string,
+        html_string = re.sub(r'\$\s*plot[^\$]*\$', replacement, html_string,
                         flags=re.IGNORECASE | re.UNICODE)
 
         # get variables
@@ -99,13 +100,13 @@ class GraphicalSliderToolModule(XModule):
                      </div>'
         for var in variables:
             # find $slider var='var' ... $
-            instances = re.findall(r'\$\s+slider\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
+            instances = re.findall(r'\$\s*slider\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
                           + r'[^\$]*\$', html_string)
             if instances:  # if presented, only one slider per var
                 slider_def = instances[0]  # get $slider var='var' ... $ string
                 # extract var for proper style extraction further
                 var_substring = re.search(r'(var\=[\"\']' + var + r'[\"\'])',
-                                          slider_def)
+                                          slider_def).group()
                 slider_def = slider_def.replace(var_substring, '')
                 # get style
                 style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', slider_def)
@@ -119,7 +120,7 @@ class GraphicalSliderToolModule(XModule):
                                             var=var, style=style)
                 # subsitute $slider var='var' ... $ in html_srting to proper
                 # html div element
-                html_string = re.sub(r'\$\s+slider\s+(?=.*var\=[\"\'](' + \
+                html_string = re.sub(r'\$\s*slider\s+(?=.*var\=[\"\'](' + \
                     var + ')[\"\'])' + r'[^\$]*\$',
                 replacement, html_string, flags=re.IGNORECASE | re.UNICODE)
 
@@ -127,26 +128,25 @@ class GraphicalSliderToolModule(XModule):
         input_el = '<input class="{element_class}_input" \
                                   id="{element_id}_input_{var}" \
                                    data-var="{var}" data-el_style="{style}" \
-                                   data-el_readonly="{readonly}"> \
-                     </input>'
+                                   data-el_readonly="{readonly}"/>'
 
         input_index = 0  # make multiple inputs for same variable have
         # different id
 
         for var in variables:
             input_index = +1
-            instances = re.findall(r'\$\s+input\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
+            instances = re.findall(r'\$\s*input\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
                           + r'[^\$]*\$', html_string)
             # import ipdb; ipdb.set_trace()
             for input_def in instances:  # for multiple inputs per var
                 # extract var and readonly before style!
                 var_substring = re.search(r'(var\=[\"\']' + var + r'[\"\'])',
-                                          input_def)
+                                          input_def).group()
                 input_def = input_def.replace(var_substring, '')
                 readonly = re.search(r'(?=.*(readonly\=[\"\'](\w+)[\"\']))', input_def)
                 if readonly:
-                    readonly = readonly.groups()[1]
                     input_def = input_def.replace(readonly.groups()[0], '')
+                    readonly = readonly.groups()[1]
                 else:
                     readonly = ''
                 style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', input_def)
@@ -158,9 +158,10 @@ class GraphicalSliderToolModule(XModule):
                 replacement = input_el.format(element_class=self.html_class,
                         element_id=self.html_id + '_' + str(input_index),
                         var=var, readonly=readonly, style=style)
-                html_string = re.sub(r'\$\s+input\s+(?=.*var\=[\"\'](' + \
+                # import ipdb; ipdb.set_trace()
+                html_string = re.sub(r'\$\s*input\s+(?=.*var\=[\"\'](' + \
                                      var + ')[\"\'])' + r'[^\$]*\$',
-                replacement, html_string, flags=re.IGNORECASE | re.UNICODE)
+                replacement, html_string, count=1, flags=re.IGNORECASE | re.UNICODE)
         return html_string
 
     def get_configuration(self):

From e703b3aa0cab93aa981564852c0ee782aae866fa Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Tue, 18 Dec 2012 09:21:29 +0200
Subject: [PATCH 039/107] Refactoring GST.

---
 .../js/src/graphical_slider_tool/graph.js     |  15 --
 .../js/src/graphical_slider_tool/gst_main.js  |  44 +++--
 .../js/src/graphical_slider_tool/inputs.js    |  23 +--
 .../js/src/graphical_slider_tool/sliders.js   |  40 +++--
 .../js/src/graphical_slider_tool/state.js     | 158 ++++++++++++------
 5 files changed, 170 insertions(+), 110 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 385386eebc..bd9567b201 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -141,25 +141,18 @@ define('Graph', ['logme'], function (logme) {
                 'end': 10,
                 'step': 0.1
             };
-            logme('Default xrange:', xrange);
 
             // The 'xrange' is a string containing two floating point numbers
             // separated by a comma. The first number is the starting
             // x-coordinate , the second number is the ending x-coordinate
             if (typeof config.plot['xrange'] === 'string') {
-                logme('xrange is a string; xrange = "' + config.plot['xrange'] + '".');
-
                 xRangeStr = config.plot['xrange'];
                 xRangeBlobs = xRangeStr.split(',');
 
                 if (xRangeBlobs.length === 2) {
-                    logme('xrange contains 2 blobs; 1 -> "' + xRangeBlobs[0] + '", 2 -> "' + xRangeBlobs[1] + '".');
-
                     tempNum = parseFloat(xRangeBlobs[0]);
                     if (isNaN(tempNum) === false) {
                         xrange.start = tempNum;
-
-                        logme('First blob was parsed as a float. xrange.start = "' + xrange.start + '".');
                     } else {
                         logme('ERROR: First blob was parsed as a NaN.');
                     }
@@ -167,8 +160,6 @@ define('Graph', ['logme'], function (logme) {
                     tempNum = parseFloat(xRangeBlobs[1]);
                     if (isNaN(tempNum) === false) {
                         xrange.end = tempNum;
-
-                        logme('Second blob was parsed as a float. xrange.end = "' + xrange.end + '".');
                     } else {
                         logme('ERROR: Second blob was parsed as a NaN.');
                     }
@@ -176,8 +167,6 @@ define('Graph', ['logme'], function (logme) {
                     if (xrange.start >= xrange.end) {
                         xrange.start = 0;
                         xrange.end = 10;
-
-                        logme('xrange.start is greater than xrange.end - will set defaults. xrange.start = "' + xrange.start + '". xrange.end = "' + xrange.end + '".');
                     }
 
                 } else {
@@ -191,17 +180,13 @@ define('Graph', ['logme'], function (logme) {
             // we will use it to generate a 'step' - i.e. the distance (on
             // x-axis) between two adjacent points.
             if (typeof config.plot['num_points'] === 'string') {
-                logme('num_points is a string. num_points = "' + config.plot['num_points'] + '".');
-
                 tempNum = parseInt(config.plot['num_points'], 10);
                 if (
                     (isNaN(tempNum) === false) ||
                     (tempNum >= 2) &&
                     (tempNum <= 500)
                 ) {
-                    logme('num_points was parsed as a number. num_points = "' + tempNum + '".');
                     xrange.step = (xrange.end - xrange.start) / (tempNum - 1);
-                    logme('xrange.step = "' + xrange.step + '".');
                 } else {
                     logme('ERROR: num_points was not parsed as a number, or num_points < 2, or num_points > 500.');
                 }
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 4d5d1d12ae..0d7c27c4b1 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
@@ -16,23 +16,47 @@ define(
     function GstMain(gstId) {
         var config, gstClass, state;
 
-        // Get the JSON configuration, and parse it, and store as an object.
-        config = JSON.parse($('#' + gstId + '_json').html()).root;
+        // 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'];
-        logme('gstClass: ' + gstClass);
 
-        // Parse the configuration settings for sliders and text inputs, and
-        // extract all of the defined constants (their names along with their
-        // initial values).
-        state = State(gstId, gstClass, config);
+        // 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
-        // approriate constants.
-        Sliders(gstId, gstClass, state);
+        // appropriate parameters.
+        Sliders(gstId, state);
         Inputs(gstId, gstClass, state);
 
-        // Configure and display the loop. Attach event for the graph to be
+        // 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);
     }
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
index 0365f40ea5..75a4275e90 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
@@ -10,14 +10,11 @@ define('Inputs', ['logme'], function (logme) {
 
         allParamNames = state.getAllParameterNames();
 
-        console.log(allParamNames);
-
         for (c1 = 0; c1 < allParamNames.length; c1 += 1) {
             $('#' + gstId).children('.' + gstClass + '_input').each(function (index, value) {
                 var inputDiv, paramName;
 
                 paramName = allParamNames[c1];
-
                 inputDiv = $(value);
 
                 if (paramName === inputDiv.data('var')) {
@@ -29,23 +26,17 @@ define('Inputs', ['logme'], function (logme) {
         return;
 
         function createInput(inputDiv, paramName) {
-            var paramObj, inputWidth, readOnly;
+            var paramObj, readOnly;
 
             paramObj = state.getParamObj(paramName);
 
-            // We will define the width of the slider to a sensible default.
-            inputWidth = 400;
+            // Check that the retrieval went OK.
+            if (paramObj === undefined) {
+                logme('ERROR: Could not get a paramObj for parameter "' + paramName + '".');
 
-            // See if it was specified by the user.
-            if (isFinite(parseInt(inputDiv.data('el_width'))) === true) {
-                inputWidth = parseInt(inputDiv.data('el_width'));
+                return;
             }
 
-            // Set the width of the element.
-            inputDiv.width(inputWidth);
-
-            inputDiv.css('display', 'inline-block');
-
             readOnly = false;
             if (inputDiv.attr('data-el_readonly').toLowerCase() === 'true') {
                 readOnly = true;
@@ -79,9 +70,11 @@ define('Inputs', ['logme'], function (logme) {
                 'outline': 'none',
                 'cursor': 'text',
                 'height': '15px'
-                // 'width': '50px'
             });
 
+            // 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;
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 f41a43fde7..7c9b5f1c38 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
@@ -5,7 +5,7 @@
 define('Sliders', ['logme'], function (logme) {
     return Sliders;
 
-    function Sliders(gstId, gstClass, state) {
+    function Sliders(gstId, state) {
         var c1, paramName, allParamNames, sliderDiv;
 
         allParamNames = state.getAllParameterNames();
@@ -13,38 +13,33 @@ define('Sliders', ['logme'], function (logme) {
         for (c1 = 0; c1 < allParamNames.length; c1 += 1) {
             paramName = allParamNames[c1];
 
-            logme('Looking for slider with ID: ' + gstId + '_slider_' + paramName);
             sliderDiv = $('#' + gstId + '_slider_' + paramName);
 
             if (sliderDiv.length === 1) {
-                logme('Found one slider DIV with such an ID.');
                 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('Did not find such a slider.');
+                logme('MESSAGE: Did not find a slider for the parameter "' + paramName + '".');
             }
         }
 
         function createSlider(sliderDiv, paramName) {
-            var paramObj, sliderWidth;
+            var paramObj;
 
             paramObj = state.getParamObj(paramName);
 
-            // We will define the width of the slider to a sensible default.
-            sliderWidth = 400;
+            // Check that the retrieval went OK.
+            if (paramObj === undefined) {
+                logme('ERROR: Could not get a paramObj for parameter "' + paramName + '".');
 
-            // See if it was specified by the user.
-            if (isFinite(parseInt(sliderDiv.data('el_width'))) === true) {
-                sliderWidth = parseInt(sliderDiv.data('el_width'));
+                return;
             }
 
-            // Set the width of the element.
-            sliderDiv.width(sliderWidth);
-
-            sliderDiv.css('display', 'inline-block');
-
             // 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 'change' event.
+            // the 'state' on the 'slide' event.
             sliderDiv.slider({
                 'min': paramObj.min,
                 'max': paramObj.max,
@@ -55,6 +50,9 @@ define('Sliders', ['logme'], function (logme) {
                 'slide': sliderOnSlide
             });
 
+            // 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;
 
             return;
@@ -65,7 +63,15 @@ define('Sliders', ['logme'], function (logme) {
             // This will cause the plot to be redrawn each time after the user
             // drags the slider handle and releases it.
             function sliderOnSlide(event, ui) {
-                state.setParameterValue(paramName, ui.value, sliderDiv);
+
+                // 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) === undefined) {
+                    logme('ERROR: Could not update the parameter named "' + paramName + '" with the value "' + ui.value + '".');
+                }
+
             }
         }
     }
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 ed0ca6ac8b..c72ce84230 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
@@ -6,14 +6,13 @@ define('State', ['logme'], function (logme) {
     // 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
-    // configuration object (parsed from a JSON string). It will return and
+    // configuration object (parsed from a JSON string). It will return an
     // object containing methods to set and get the private state properties.
 
     // This module defines and returns a factory constructor.
     return State;
 
-    // function: State
-    function State(gstId, gstClass, config) {
+    function State(gstId, config) {
         var parameters, allParameterNames, allParameterValues,
             plotDiv;
 
@@ -21,41 +20,50 @@ define('State', ['logme'], function (logme) {
         // an empty object.
         //
         // As we parse the JSON config object, we will add parameters as
-        // named properties (for example
+        // named properties. For example
         //
         //     parameters.a = {...};
         //
-        // for the parameter 'a'.
+        // will be created for the parameter 'a'.
         parameters = {};
 
-        // Check that the required object is available.
-        if (
-            (typeof config.parameters !== 'undefined') &&
-            (typeof config.parameters.param !== 'undefined')
-        ) {
+        // Check that the required parameters config object is available.
+        if ($.isPlainObject(config.parameters) === false) {
+            logme('ERROR: Expected config.parameters to be an object. It is not.');
+            logme('config.parameters = ', config.parameters);
 
-            // If config.parameters.param is an array, pass it to the processor
-            // element by element.
-            if ($.isArray(config.parameters.param) === true) {
-                (function (c1) {
-                    while (c1 < config.parameters.param.length) {
-                        processParameter(config.parameters.param[c1]);
-                        c1 += 1;
-                    }
-                }(0));
-            }
+            return;
+        }
 
-            // If config.parameters.param is an object, pass this object to the
-            // processor directly.
-            else if ($.isPlainObject(config.inputs.input) === true) {
-                processParameter(config.parameters.param);
-            }
+        // If config.parameters.param is an array, pass it to the processor
+        // element by element.
+        if ($.isArray(config.parameters.param) === true) {
+            (function (c1) {
+                while (c1 < config.parameters.param.length) {
+                    processParameter(config.parameters.param[c1]);
+                    c1 += 1;
+                }
+            }(0));
+        }
 
+        // If config.parameters.param is an object, pass this object to the
+        // processor directly.
+        else if ($.isPlainObject(config.inputs.input) === true) {
+            processParameter(config.parameters.param);
+        }
+
+        // If config.parameters.param is some other type, report an error and
+        // do not continue.
+        else {
+            logme('ERROR: config.parameters.param is of an unsupported type.');
+            logme('config.parameters.param = ', config.parameters.param);
+
+            return;
         }
 
         // Instead of building these arrays every time when some component
         // requests them, we will create them in the beginning, and then update
-        // by element when some parameter's value changes.
+        // each element individually when some parameter's value changes.
         //
         // Then we can just return the required array, instead of iterating
         // over all of the properties of the 'parameters' object, and
@@ -63,10 +71,9 @@ define('State', ['logme'], function (logme) {
         allParameterNames = [];
         allParameterValues = [];
 
+        // Populate 'allParameterNames', and 'allParameterValues' with data.
         generateHelperArrays();
 
-        logme(parameters, allParameterNames, allParameterValues);
-
         // The constructor will return an object with methods to operate on
         // it's private properties.
         return {
@@ -91,6 +98,8 @@ define('State', ['logme'], function (logme) {
 
         function getParamObj(paramName) {
             if (parameters.hasOwnProperty(paramName) === false) {
+                logme('ERROR: Object parameters does not have a property named "' + paramName + '".');
+
                 return;
             }
 
@@ -108,6 +117,8 @@ define('State', ['logme'], function (logme) {
             // If the name of the constant is not tracked by state, return an
             // 'undefined' value.
             if (parameters.hasOwnProperty(paramName) === false) {
+                logme('ERROR: Object parameters does not have a property named "' + paramName + '".');
+
                 return;
             }
 
@@ -119,6 +130,7 @@ define('State', ['logme'], function (logme) {
         // Function: setParameterValue(paramName, paramValue, element)
         // --------------------------------------------------
         //
+        //
         // This function can be called from a callback, registered by a slider
         // or a text input, when specific events ('slide' or 'change') are
         // triggered.
@@ -146,12 +158,14 @@ define('State', ['logme'], function (logme) {
         // original value.
         //
         // ####################################################################
-        function setParameterValue(paramName, paramValue, element) {
+        function setParameterValue(paramName, paramValue, element, slider) {
             var paramValueNum, c1;
 
             // If a parameter with the name specified by the 'paramName'
             // parameter is not tracked by state, do not do anything.
             if (parameters.hasOwnProperty(paramName) === false) {
+                logme('ERROR: Object parameters does not have a property named "' + paramName + '".');
+
                 return;
             }
 
@@ -159,38 +173,65 @@ define('State', ['logme'], function (logme) {
             // number.
             paramValueNum = parseFloat(paramValue);
 
-            if (
-                // We are interested only in valid float values. NaN, -INF,
-                // +INF we will disregard.
-                (isFinite(paramValueNum) === false) ||
+            // We are interested only in valid float values. NaN, -INF,
+            // +INF we will disregard.
+            if (isFinite(paramValueNum) === false) {
+                logme('ERROR: New parameter value is not a floating-point number.');
+                logme('paramValue = ', paramValue);
 
-                // If the new parameter's value is valid, but lies outised of
-                // the parameter's allowed range, we will also disregard it.
+                return;
+            }
+
+            // If the new parameter's value is valid, but lies outised of
+            // the parameter's allowed range, we will disregard it.
+            //
+            // We will also change the element's value back to the current
+            // parameter's value.
+            if (
                 (paramValueNum < parameters[paramName].min) ||
                 (paramValueNum > parameters[paramName].max)
             ) {
-                // We will also change the element's value back to the current
-                // parameter's value.
-                element.val(parameters[paramName].value);
+                logme('ERROR: New parameter\'s value lies outside of the allowed range.');
+                logme('Range is: min = ' + parameters[paramName].min + ', max = ' + parameters[paramName].max);
+                logme('paramValueNum = ' + paramValueNum);
+
+                // If element is a slider, the value must be set in a special
+                // way.
+                if (slider === true) {
+                    logme('Changing back the slider.');
+                    element.slider('value', parameters[paramName].value);
+                }
+
+                // If element is a text input, standard jQuery val() function
+                // will work.
+                else {
+                    element.val(parameters[paramName].value);
+                }
 
                 return;
             }
 
             parameters[paramName].value = paramValueNum;
 
+            // If we have a plot DIV to work with, tell to update.
             if (plotDiv !== undefined) {
                 plotDiv.trigger('update_plot');
             }
 
+            // Update all text inputs with the new parameter's value.
             for (c1 = 0; c1 < parameters[paramName].inputDivs.length; c1 += 1) {
                 parameters[paramName].inputDivs[c1].val(paramValueNum);
             }
 
+            // Update the single slider with the new parameter's value.
             if (parameters[paramName].sliderDiv !== null) {
                 parameters[paramName].sliderDiv.slider('value', paramValueNum);
             }
 
+            // Update the helper array with the new parameter's value.
             allParameterValues[parameters[paramName].helperArrayIndex] = paramValueNum;
+
+            return true;
         } // End-of: function setParameterValue
 
         // ####################################################################
@@ -230,11 +271,8 @@ define('State', ['logme'], function (logme) {
             var paramName, newParamObj;
 
             if (typeof obj['@var'] !== 'string') {
-                logme(
-                    '[ERROR] State.processParameter(obj): obj["@var"] is not a string.',
-                    obj['@var'],
-                    '---> Not adding a parameter.'
-                );
+                logme('ERROR: Expected obj["@var"] to be a string. It is not.');
+                logme('obj["@var"] = ', obj['@var']);
 
                 return;
             }
@@ -248,14 +286,19 @@ define('State', ['logme'], function (logme) {
                 (processFloat('@step', 'step') === false) ||
                 (processFloat('@initial', 'value') === false)
             ) {
-                logme('---> Not adding a parameter named "' + paramName + '".');
+                logme('ERROR: A required property is missing. Not creating parameter "' + paramName + '"');
 
                 return;
             }
 
+            // Pointers to text input and slider DIV elements that this
+            // parameter will be attached to. Initially there are none. When we
+            // will create text inputs and sliders, we will update these
+            // properties.
             newParamObj.inputDivs = [];
             newParamObj.sliderDiv = null;
 
+            // Everything went well, so save the new parameter object.
             parameters[paramName] = newParamObj;
 
             return;
@@ -264,19 +307,16 @@ define('State', ['logme'], function (logme) {
                 var attrValue;
 
                 if (typeof obj[attrName] !== 'string') {
-                    logme(
-                        '[ERROR] state.processParameter(obj): obj["' + attrName + '"] is not a string.',
-                        obj[attrName]
-                    );
+                    logme('ERROR: Expected obj["' + attrName + '"] to be a string. It is not.');
+                    logme('obj["' + attrName + '"] = ', obj[attrName]);
 
                     return false;
                 } else {
                     attrValue = parseFloat(obj[attrName]);
 
-                    if (isNaN(attrValue) === true) {
-                        logme(
-                            '[ERROR] state.processParameter(obj): for attrName = "' + attrName + '" attrValue is NaN.'
-                        );
+                    if (isFinite(attrValue) === false) {
+                        logme('ERROR: Expected obj["' + attrName + '"] to be a valid floating-point number. It is not.');
+                        logme('obj["' + attrName + '"] = ', obj[attrName]);
 
                         return false;
                     }
@@ -288,10 +328,22 @@ define('State', ['logme'], function (logme) {
             } // End-of: function processFloat
         } // End-of: function processParameter
 
+        // ####################################################################
+        //
+        // Function: generateHelperArrays()
+        // -------------------------------
+        //
+        //
         // Populate 'allParameterNames' and 'allParameterValues' with data.
         // Link each parameter object with the corresponding helper array via
-        // an index ('helperArrayIndex'). It will be the same for both of the
+        // an index 'helperArrayIndex'. It will be the same for both of the
         // arrays.
+        //
+        // NOTE: It is important to remember to update these helper arrays
+        // whenever a new parameter is added (or one is removed), or when a
+        // parameter's value changes.
+        //
+        // ####################################################################
         function generateHelperArrays() {
             var paramName, c1;
 

From f0ec3928e474bfe0dc0f38821c3034db3b36aac1 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Tue, 18 Dec 2012 11:37:02 +0200
Subject: [PATCH 040/107] Made the style setting be applied by Python, not by
 JS. Made background of readonly elements light gray.

---
 common/lib/xmodule/xmodule/gst_module.py        |  4 ++--
 .../js/src/graphical_slider_tool/inputs.js      | 17 +++++++++--------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 26d5793c59..572afd619f 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -96,7 +96,7 @@ class GraphicalSliderToolModule(XModule):
         #substitute sliders
         slider_div = '<div class="{element_class}_slider" \
                                    id="{element_id}_slider_{var}" \
-                                   data-var="{var}" data-el_style="{style}">\
+                                   data-var="{var}" style="{style}">\
                      </div>'
         for var in variables:
             # find $slider var='var' ... $
@@ -127,7 +127,7 @@ class GraphicalSliderToolModule(XModule):
         # substitute inputs if we have them
         input_el = '<input class="{element_class}_input" \
                                   id="{element_id}_input_{var}" \
-                                   data-var="{var}" data-el_style="{style}" \
+                                   data-var="{var}" style="{style}" \
                                    data-el_readonly="{readonly}"/>'
 
         input_index = 0  # make multiple inputs for same variable have
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
index 75a4275e90..7ec132b370 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
@@ -47,6 +47,7 @@ define('Inputs', ['logme'], function (logme) {
                 // In the case of a readonly config option, configure the text
                 // inputit as read-only, and NOT bind an event to it.
                 inputDiv.attr('readonly', 'readonly');
+                inputDiv.css('background-color', '#D3D3D3');
 
             } else { // readonly !== true
 
@@ -63,14 +64,14 @@ define('Inputs', ['logme'], function (logme) {
             // 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'
-            });
+            // 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

From 5ab1abf56f3fd218d34285853db01c4ae77c8e44 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Tue, 18 Dec 2012 13:17:44 +0200
Subject: [PATCH 041/107] Debug info for GST.

---
 .../js/src/graphical_slider_tool/graph.js     | 94 ++++++++++++-------
 .../js/src/graphical_slider_tool/state.js     |  9 +-
 2 files changed, 67 insertions(+), 36 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index bd9567b201..2357b706d5 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -7,17 +7,26 @@ define('Graph', ['logme'], function (logme) {
     return Graph;
 
     function Graph(gstId, config, state) {
-        var plotDiv, dataSeries, functions, xaxis, yaxis, xrange;
+        var plotDiv, dataSeries, functions, xaxis, yaxis, numPoints, xrange;
 
         // We must have a graph container DIV element available in order to
         // proceed.
         plotDiv = $('#' + gstId + '_plot');
         if (plotDiv.length === 0) {
+            logme('ERROR: Could not find the plot DIV with ID "' + gstId + '_plot".');
+
             return;
         }
 
+        if (plotDiv.width() === 0) {
+            plotDiv.width(300);
+        }
+
+        if (plotDiv.height() === 0) {
+            plotDiv.height(plotDiv.width());
+        }
+
         // Configure some settings for the graph.
-        setGraphDimensions();
         setGraphAxes();
         setGraphXRange();
 
@@ -25,6 +34,8 @@ define('Graph', ['logme'], function (logme) {
         // anything else.
         createFunctions();
         if (functions.length === 0) {
+            logme('ERROR: No functions were specified, or something went wrong.');
+
             return;
         }
 
@@ -38,34 +49,6 @@ define('Graph', ['logme'], function (logme) {
 
         return;
 
-        function setGraphDimensions() {
-            var dimObj, width, height, tempInt;
-
-            // If no dimensions are specified by the user, the graph will have
-            // predefined dimensions.
-            width = 300;
-            height = 300;
-
-            // Get the user specified dimensions, if any.
-            if ($.isPlainObject(config.plot['dimensions']) === true) {
-                dimObj = config.plot['dimensions'];
-
-                tempInt = parseInt(dimObj['@width'], 10);
-                if (isNaN(tempInt) === false) {
-                    width = tempInt;
-                }
-
-                tempInt = parseInt(dimObj['@height'], 10);
-                if (isNaN(tempInt) === false) {
-                    height = tempInt;
-                }
-            }
-
-            // Apply the dimensions to the graph container DIV element.
-            plotDiv.width(width);
-            plotDiv.height(height);
-        }
-
         function setGraphAxes() {
             // Define the xaxis Flot configuration, and then see if the user
             // supplied custom values.
@@ -76,6 +59,8 @@ define('Graph', ['logme'], function (logme) {
             };
             if (typeof config.plot['xticks'] === 'string') {
                 processTicks(config.plot['xticks'], xaxis);
+            } else {
+                logme('MESSAGE: "xticks" were not specified. Using defaults.');
             }
 
             // Define the yaxis Flot configuration, and then see if the user
@@ -87,6 +72,8 @@ define('Graph', ['logme'], function (logme) {
             };
             if (typeof config.plot['yticks'] === 'string') {
                 processTicks(config.plot['yticks'], yaxis);
+            } else {
+                logme('MESSAGE: "yticks" were not specified. Using defaults.');
             }
 
             return;
@@ -99,27 +86,37 @@ define('Graph', ['logme'], function (logme) {
                 ticksBlobs = ticksStr.split(',');
 
                 if (ticksBlobs.length !== 3) {
+                    logme('ERROR: Did not get 3 blobs from ticksStr = "' + ticksStr + '".');
+
                     return;
                 }
 
                 tempFloat = parseFloat(ticksBlobs[0]);
                 if (isNaN(tempFloat) === false) {
                     ticksObj.min = tempFloat;
+                } else {
+                    logme('ERROR: Invalid "min". ticksBlobs[0] = ', ticksBlobs[0]);
                 }
 
                 tempFloat = parseFloat(ticksBlobs[1]);
                 if (isNaN(tempFloat) === false) {
                     ticksObj.tickSize = tempFloat;
+                } else {
+                    logme('ERROR: Invalid "tickSize". ticksBlobs[1] = ', ticksBlobs[1]);
                 }
 
                 tempFloat = parseFloat(ticksBlobs[2]);
                 if (isNaN(tempFloat) === false) {
                     ticksObj.max = tempFloat;
+                } else {
+                    logme('ERROR: Invalid "max". ticksBlobs[2] = ', ticksBlobs[2]);
                 }
 
                 // Is the starting tick to the left of the ending tick (on the
                 // x-axis)? If not, set default starting and ending tick.
                 if (ticksObj.min >= ticksObj.max) {
+                    logme('ERROR: min >= max. Setting defaults.');
+
                     ticksObj.min = 0;
                     ticksObj.max = 10;
                 }
@@ -128,6 +125,8 @@ define('Graph', ['logme'], function (logme) {
                 // least 3 ticks. If not, set a tickSize which will produce
                 // 11 ticks. tickSize is the spacing between the ticks.
                 if (ticksObj.tickSize * 2 >= ticksObj.max - ticksObj.min) {
+                    logme('ERROR: tickSize * 2 >= max - min. Setting defaults.');
+
                     ticksObj.tickSize = (ticksObj.max - ticksObj.min) / 10.0;
                 }
             }
@@ -170,10 +169,10 @@ define('Graph', ['logme'], function (logme) {
                     }
 
                 } else {
-                    logme('ERROR: xrange does not contain 2 blobs.');
+                    logme('ERROR: xrange does not contain 2 blobs. xRangeBlobs.length = ' + xRangeBlobs.length);
                 }
             } else {
-                logme('ERROR: xrange is not a string.');
+                logme('ERROR: xrange is not a string. config.plot["xrange"] = ', config.plot['xrange']);
             }
 
             // The user can specify the number of points. However, internally
@@ -184,9 +183,10 @@ define('Graph', ['logme'], function (logme) {
                 if (
                     (isNaN(tempNum) === false) ||
                     (tempNum >= 2) &&
-                    (tempNum <= 500)
+                    (tempNum <= 1000)
                 ) {
-                    xrange.step = (xrange.end - xrange.start) / (tempNum - 1);
+                    numPoints = tempNum;
+                    xrange.step = (xrange.end - xrange.start) / (numPoints - 1);
                 } else {
                     logme('ERROR: num_points was not parsed as a number, or num_points < 2, or num_points > 500.');
                 }
@@ -201,6 +201,8 @@ define('Graph', ['logme'], function (logme) {
             functions = [];
 
             if (typeof config.plot['function'] === 'undefined') {
+                logme('ERROR: config.plot["function"] is undefined.');
+
                 return;
             }
 
@@ -234,6 +236,10 @@ define('Graph', ['logme'], function (logme) {
 
                     }
                 }
+            } else {
+                logme('ERROR: config.plot["function"] is of an unsupported type.');
+
+                return;
             }
 
             return;
@@ -348,7 +354,7 @@ define('Graph', ['logme'], function (logme) {
         }
 
         function generateData() {
-            var c0, functionObj, seriesObj, dataPoints, paramValues, x, y;
+            var c0, c1, functionObj, seriesObj, dataPoints, paramValues, x, y;
 
             paramValues = state.getAllParameterValues();
 
@@ -360,6 +366,11 @@ define('Graph', ['logme'], function (logme) {
                 seriesObj = {};
                 dataPoints = [];
 
+                // For counting number of points added. In the end we will
+                // compare this number to 'numPoints' specified in the config
+                // JSON.
+                c1 = 0;
+
                 // Generate the data points.
                 for (x = xrange.start; x <= xrange.end; x += xrange.step) {
 
@@ -378,6 +389,19 @@ define('Graph', ['logme'], function (logme) {
                     // Add the generated point to the data points set.
                     dataPoints.push([x, y]);
 
+                    c1 += 1;
+
+                }
+
+                // If the last point did not get included because of rounding
+                // of floating-point number addition, then we will include it
+                // manually.
+                if (c1 != numPoints) {
+                    x = xrange.end;
+                    paramValues.push(x);
+                    y = functionObj.func.apply(window, paramValues);
+                    paramValues.pop();
+                    dataPoints.push([x, y]);
                 }
 
                 // Put the entire data points set into the series object.
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 c72ce84230..19bb557b24 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
@@ -3,12 +3,16 @@
 (function (requirejs, require, define) {
 
 define('State', ['logme'], function (logme) {
+    var stateInst;
+
     // 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
     // configuration object (parsed from a JSON string). It will return an
     // object containing methods to set and get the private state properties.
 
+    stateInst = 0;
+
     // This module defines and returns a factory constructor.
     return State;
 
@@ -16,6 +20,9 @@ define('State', ['logme'], function (logme) {
         var parameters, allParameterNames, allParameterValues,
             plotDiv;
 
+        stateInst += 1;
+        logme('MESSAGE: Creating state instance # ' + stateInst + '.');
+
         // Initially, there are no parameters to track. So, we will instantiate
         // an empty object.
         //
@@ -48,7 +55,7 @@ define('State', ['logme'], function (logme) {
 
         // If config.parameters.param is an object, pass this object to the
         // processor directly.
-        else if ($.isPlainObject(config.inputs.input) === true) {
+        else if ($.isPlainObject(config.parameters.param) === true) {
             processParameter(config.parameters.param);
         }
 

From ed20fe3417dd32e8bd2463a446f49e41256bc5ed Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Tue, 18 Dec 2012 13:39:47 +0200
Subject: [PATCH 042/107] fix  inputs id

---
 common/lib/xmodule/xmodule/gst_module.py | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 572afd619f..21842054bb 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -126,19 +126,18 @@ class GraphicalSliderToolModule(XModule):
 
         # substitute inputs if we have them
         input_el = '<input class="{element_class}_input" \
-                                  id="{element_id}_input_{var}" \
+                                  id="{element_id}_input_{var}_{input_index}" \
                                    data-var="{var}" style="{style}" \
                                    data-el_readonly="{readonly}"/>'
 
-        input_index = 0  # make multiple inputs for same variable have
-        # different id
-
         for var in variables:
-            input_index = +1
+            input_index = 0  # make multiple inputs for same variable have
+                # different id
             instances = re.findall(r'\$\s*input\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
                           + r'[^\$]*\$', html_string)
             # import ipdb; ipdb.set_trace()
             for input_def in instances:  # for multiple inputs per var
+                input_index += 1
                 # extract var and readonly before style!
                 var_substring = re.search(r'(var\=[\"\']' + var + r'[\"\'])',
                                           input_def).group()
@@ -154,10 +153,11 @@ class GraphicalSliderToolModule(XModule):
                     style = style.groups()[0]
                 else:
                     style = ''
-
+                # import ipdb; ipdb.set_trace()
                 replacement = input_el.format(element_class=self.html_class,
-                        element_id=self.html_id + '_' + str(input_index),
-                        var=var, readonly=readonly, style=style)
+                        element_id=self.html_id,
+                        var=var, readonly=readonly, style=style,
+                        input_index=input_index)
                 # import ipdb; ipdb.set_trace()
                 html_string = re.sub(r'\$\s*input\s+(?=.*var\=[\"\'](' + \
                                      var + ')[\"\'])' + r'[^\$]*\$',

From b457bc6f4af900261e0bf2ce08d18b3faada8ed5 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Tue, 18 Dec 2012 13:58:06 +0200
Subject: [PATCH 043/107] Fixed input bug. Now if they are nested within DIVs,
 they are also included.

---
 .../lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 7ec132b370..e48174ddb5 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
@@ -11,7 +11,7 @@ define('Inputs', ['logme'], function (logme) {
         allParamNames = state.getAllParameterNames();
 
         for (c1 = 0; c1 < allParamNames.length; c1 += 1) {
-            $('#' + gstId).children('.' + gstClass + '_input').each(function (index, value) {
+            $('#' + gstId).find('.' + gstClass + '_input').each(function (index, value) {
                 var inputDiv, paramName;
 
                 paramName = allParamNames[c1];

From 96fd48f4a6c365e432b36613752a4f128daddd0c Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Tue, 18 Dec 2012 14:10:44 +0200
Subject: [PATCH 044/107] Added check for disabling of multiple processing of
 the same GST.

---
 .../xmodule/js/src/graphical_slider_tool/gst_main.js      | 8 ++++++++
 1 file changed, 8 insertions(+)

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 0d7c27c4b1..3c06cf9544 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
@@ -16,6 +16,14 @@ define(
     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;

From b79be15c17b88e6db8fa8c3aa800681c6e524af9 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Tue, 18 Dec 2012 14:46:19 +0200
Subject: [PATCH 045/107] directives now without starting space

---
 common/lib/xmodule/xmodule/gst_module.py | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 21842054bb..4366acc91f 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -72,7 +72,7 @@ class GraphicalSliderToolModule(XModule):
         plot_div = '<div class="{element_class}_plot" id="{element_id}_plot" \
                     style="{style}"></div>'
         # extract css style from plot
-        plot_def = re.search(r'\$\s*plot[^\$]*\$', html_string).group()
+        plot_def = re.search(r'\$plot[^\$]*\$', html_string).group()
         style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', plot_def)
         if style:
             style = style.groups()[0]
@@ -81,8 +81,8 @@ class GraphicalSliderToolModule(XModule):
         replacement = plot_div.format(element_class=self.html_class,
                                       element_id=self.html_id,
                                             style=style)
-        html_string = re.sub(r'\$\s*plot[^\$]*\$', replacement, html_string,
-                        flags=re.IGNORECASE | re.UNICODE)
+        html_string = re.sub(r'\$plot[^\$]*\$', replacement, html_string,
+                        flags=re.UNICODE)
 
         # get variables
         if json.loads(self.configuration_json)['root'].get('parameters'):
@@ -92,7 +92,8 @@ class GraphicalSliderToolModule(XModule):
             variables = [x['@var'] for x in variables]
         else:
             return html_string
-
+        # if variables[0] == 'v':
+        #     import ipdb; ipdb.set_trace()
         #substitute sliders
         slider_div = '<div class="{element_class}_slider" \
                                    id="{element_id}_slider_{var}" \
@@ -100,7 +101,7 @@ class GraphicalSliderToolModule(XModule):
                      </div>'
         for var in variables:
             # find $slider var='var' ... $
-            instances = re.findall(r'\$\s*slider\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
+            instances = re.findall(r'\$slider\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
                           + r'[^\$]*\$', html_string)
             if instances:  # if presented, only one slider per var
                 slider_def = instances[0]  # get $slider var='var' ... $ string
@@ -120,9 +121,9 @@ class GraphicalSliderToolModule(XModule):
                                             var=var, style=style)
                 # subsitute $slider var='var' ... $ in html_srting to proper
                 # html div element
-                html_string = re.sub(r'\$\s*slider\s+(?=.*var\=[\"\'](' + \
+                html_string = re.sub(r'\$slider\s+(?=.*var\=[\"\'](' + \
                     var + ')[\"\'])' + r'[^\$]*\$',
-                replacement, html_string, flags=re.IGNORECASE | re.UNICODE)
+                replacement, html_string, flags=re.UNICODE)
 
         # substitute inputs if we have them
         input_el = '<input class="{element_class}_input" \
@@ -133,7 +134,7 @@ class GraphicalSliderToolModule(XModule):
         for var in variables:
             input_index = 0  # make multiple inputs for same variable have
                 # different id
-            instances = re.findall(r'\$\s*input\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
+            instances = re.findall(r'\$input\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
                           + r'[^\$]*\$', html_string)
             # import ipdb; ipdb.set_trace()
             for input_def in instances:  # for multiple inputs per var
@@ -159,9 +160,9 @@ class GraphicalSliderToolModule(XModule):
                         var=var, readonly=readonly, style=style,
                         input_index=input_index)
                 # import ipdb; ipdb.set_trace()
-                html_string = re.sub(r'\$\s*input\s+(?=.*var\=[\"\'](' + \
+                html_string = re.sub(r'\$input\s+(?=.*var\=[\"\'](' + \
                                      var + ')[\"\'])' + r'[^\$]*\$',
-                replacement, html_string, count=1, flags=re.IGNORECASE | re.UNICODE)
+                replacement, html_string, count=1, flags=re.UNICODE)
         return html_string
 
     def get_configuration(self):

From 51db556efe9d3c2c3cdd062eff54de81c0593190 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Tue, 18 Dec 2012 15:58:26 +0200
Subject: [PATCH 046/107] now converts gt to > in function body

---
 .../lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 2357b706d5..05ff88e0f0 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -266,7 +266,7 @@ define('Graph', ['logme'], function (logme) {
                 if (typeof funcString !== 'string') {
                     return;
                 }
-
+                funcString = $('<div>').html(funcString).text();
                 // Some defaults. If no options are set for the graph, we will
                 // make sure that at least a line is drawn for a function.
                 newFunctionObject = {

From c2dd8800b0f280d12a5ed3c7745add72cc19a4e7 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Tue, 18 Dec 2012 15:59:44 +0200
Subject: [PATCH 047/107] Dynamic range part 1.

---
 .../js/src/graphical_slider_tool/graph.js     | 34 ++++++++++++++-----
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 05ff88e0f0..6dbac2aea8 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -27,8 +27,8 @@ define('Graph', ['logme'], function (logme) {
         }
 
         // Configure some settings for the graph.
-        setGraphAxes();
         setGraphXRange();
+        setGraphAxes();
 
         // Get the user defined functions. If there aren't any, don't do
         // anything else.
@@ -135,15 +135,29 @@ define('Graph', ['logme'], function (logme) {
         function setGraphXRange() {
             var xRangeStr, xRangeBlobs, tempNum;
 
-            xrange = {
-                'start': 0,
-                'end': 10,
-                'step': 0.1
-            };
+            xrange = {};
+
+            if ($.isPlainObject(config.plot.xrange) === false) {
+                logme('ERROR: Expected config.plot.xrange to be an object. It is not.');
+                logme('config.plot.xrange = ', config.plot.xrange);
+
+                return false;
+            }
+
+            if (typeof config.plot.xrange.min !== 'string') {
+                logme('ERROR: Expected config.plot.xrange.min to be a string. It is not.');
+                logme('config.plot.xrange.min = ', config.plot.xrange.min);
+
+                return false;
+            }
+
+            if (typeof config.plot.xrange.max !== 'string') {
+                logme('ERROR: Expected config.plot.xrange.max to be a string. It is not.');
+                logme('config.plot.xrange.max = ', config.plot.xrange.max);
+
+                return false;
+            }
 
-            // The 'xrange' is a string containing two floating point numbers
-            // separated by a comma. The first number is the starting
-            // x-coordinate , the second number is the ending x-coordinate
             if (typeof config.plot['xrange'] === 'string') {
                 xRangeStr = config.plot['xrange'];
                 xRangeBlobs = xRangeStr.split(',');
@@ -193,6 +207,8 @@ define('Graph', ['logme'], function (logme) {
             } else {
                 logme('ERROR: num_points is not a string.');
             }
+
+            return true;
         }
 
         function createFunctions() {

From 315cc7c7e41c677232ba4412a469f1c162df6834 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Tue, 18 Dec 2012 18:04:38 +0200
Subject: [PATCH 048/107] Dynamic xrange finished.

---
 .../js/src/graphical_slider_tool/graph.js     | 123 +++++++++++-------
 1 file changed, 79 insertions(+), 44 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 6dbac2aea8..28edf873c7 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -27,7 +27,12 @@ define('Graph', ['logme'], function (logme) {
         }
 
         // Configure some settings for the graph.
-        setGraphXRange();
+        if (setGraphXRange() === false) {
+            logme('ERROR: could not configure the xrange. Will not continue.');
+
+            return;
+        }
+
         setGraphAxes();
 
         // Get the user defined functions. If there aren't any, don't do
@@ -133,7 +138,7 @@ define('Graph', ['logme'], function (logme) {
         }
 
         function setGraphXRange() {
-            var xRangeStr, xRangeBlobs, tempNum;
+            var xRangeStr, xRangeBlobs, tempNum, allParamNames;
 
             xrange = {};
 
@@ -158,54 +163,60 @@ define('Graph', ['logme'], function (logme) {
                 return false;
             }
 
-            if (typeof config.plot['xrange'] === 'string') {
-                xRangeStr = config.plot['xrange'];
-                xRangeBlobs = xRangeStr.split(',');
+            allParamNames = state.getAllParameterNames();
 
-                if (xRangeBlobs.length === 2) {
-                    tempNum = parseFloat(xRangeBlobs[0]);
-                    if (isNaN(tempNum) === false) {
-                        xrange.start = tempNum;
-                    } else {
-                        logme('ERROR: First blob was parsed as a NaN.');
-                    }
+            allParamNames.push(config.plot.xrange.min);
+            try {
+                xrange.min = Function.apply(null, allParamNames);
+            } catch (err) {
+                logme('ERROR: could not create a function from the string "' + config.plot.xrange.min + '" for xrange.min.');
 
-                    tempNum = parseFloat(xRangeBlobs[1]);
-                    if (isNaN(tempNum) === false) {
-                        xrange.end = tempNum;
-                    } else {
-                        logme('ERROR: Second blob was parsed as a NaN.');
-                    }
-
-                    if (xrange.start >= xrange.end) {
-                        xrange.start = 0;
-                        xrange.end = 10;
-                    }
-
-                } else {
-                    logme('ERROR: xrange does not contain 2 blobs. xRangeBlobs.length = ' + xRangeBlobs.length);
-                }
-            } else {
-                logme('ERROR: xrange is not a string. config.plot["xrange"] = ', config.plot['xrange']);
+                return false;
             }
+            allParamNames.pop();
+
+            allParamNames.push(config.plot.xrange.max);
+            try {
+                xrange.max = Function.apply(null, allParamNames);
+            } catch (err) {
+                logme('ERROR: could not create a function from the string "' + config.plot.xrange.min + '" for xrange.min.');
+
+                return false;
+            }
+            allParamNames.pop();
+
+            logme('xrange = ', xrange);
 
             // The user can specify the number of points. However, internally
             // we will use it to generate a 'step' - i.e. the distance (on
             // x-axis) between two adjacent points.
-            if (typeof config.plot['num_points'] === 'string') {
-                tempNum = parseInt(config.plot['num_points'], 10);
-                if (
-                    (isNaN(tempNum) === false) ||
-                    (tempNum >= 2) &&
-                    (tempNum <= 1000)
-                ) {
-                    numPoints = tempNum;
-                    xrange.step = (xrange.end - xrange.start) / (numPoints - 1);
-                } else {
-                    logme('ERROR: num_points was not parsed as a number, or num_points < 2, or num_points > 500.');
+            if (typeof config.plot.num_points === 'string') {
+                tempNum = parseInt(config.plot.num_points, 10);
+                if (isNaN(tempNum) === true) {
+                    logme('ERROR: Could not parse the number of points.');
+                    logme('config.plot.num_points = ', config.plot.num_points);
+
+                    return false;
                 }
+
+                if (
+                    (tempNum < 2) &&
+                    (tempNum > 1000)
+                ) {
+                    logme('ERROR: Number of points is outside the allowed range [2, 1000]');
+                    logme('config.plot.num_points = ' + tempNum);
+
+                    return false;
+                }
+
+                numPoints = tempNum;
             } else {
-                logme('ERROR: num_points is not a string.');
+                logme('MESSAGE: config.plot.num_points is not a string.');
+                logme('Will set number of points to {width of graph} / 10.');
+
+                numPoints = plotDiv.width() / 10.0;
+
+                logme('numPoints = ' + numPoints);
             }
 
             return true;
@@ -282,7 +293,15 @@ define('Graph', ['logme'], function (logme) {
                 if (typeof funcString !== 'string') {
                     return;
                 }
+
+                // Make sure that any HTML entities that were escaped will be
+                // unescaped. This is done because if a string with escaped
+                // HTML entities is passed to the Function() constructor, it
+                // will break.
                 funcString = $('<div>').html(funcString).text();
+
+                logme('funcString = ' + funcString);
+
                 // Some defaults. If no options are set for the graph, we will
                 // make sure that at least a line is drawn for a function.
                 newFunctionObject = {
@@ -294,6 +313,8 @@ define('Graph', ['logme'], function (logme) {
                 // XML.
                 paramNames = state.getAllParameterNames();
 
+                logme('allParamNames = ', paramNames);
+
                 // The 'x' is always one of the function parameters.
                 paramNames.push('x');
 
@@ -301,6 +322,8 @@ define('Graph', ['logme'], function (logme) {
                 // the Function constructor.
                 paramNames.push(funcString);
 
+                console.log('paramNames = ', paramNames);
+
                 // Create the function from the function string, and all of the
                 // available parameters AND the 'x' variable as it's parameters.
                 // For this we will use the built-in Function object
@@ -323,6 +346,11 @@ define('Graph', ['logme'], function (logme) {
                     return;
                 }
 
+                // Return the array back to original state. Remember that it is
+                // a pointer to original array which is stored in state object.
+                paramNames.pop();
+                paramNames.pop();
+
                 newFunctionObject['func'] = func;
 
                 if (typeof color === 'string') {
@@ -370,7 +398,8 @@ define('Graph', ['logme'], function (logme) {
         }
 
         function generateData() {
-            var c0, c1, functionObj, seriesObj, dataPoints, paramValues, x, y;
+            var c0, c1, functionObj, seriesObj, dataPoints, paramValues, x, y,
+                start, end, step;
 
             paramValues = state.getAllParameterValues();
 
@@ -387,8 +416,14 @@ define('Graph', ['logme'], function (logme) {
                 // JSON.
                 c1 = 0;
 
+                start = xrange.min.apply(window, paramValues);
+                end = xrange.max.apply(window, paramValues);
+                step = (end - start) / (numPoints - 1);
+
+                logme('start = ' + start + ', end = ' + end + ', step = ' + step);
+
                 // Generate the data points.
-                for (x = xrange.start; x <= xrange.end; x += xrange.step) {
+                for (x = start; x <= end; x += step) {
 
                     // Push the 'x' variable to the end of the parameter array.
                     paramValues.push(x);
@@ -413,7 +448,7 @@ define('Graph', ['logme'], function (logme) {
                 // of floating-point number addition, then we will include it
                 // manually.
                 if (c1 != numPoints) {
-                    x = xrange.end;
+                    x = end;
                     paramValues.push(x);
                     y = functionObj.func.apply(window, paramValues);
                     paramValues.pop();

From 3eb3d7db139f61cb637ec4f8b54ee79fb5e21da3 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Tue, 18 Dec 2012 18:11:19 +0200
Subject: [PATCH 049/107] units implemented

---
 .../js/src/graphical_slider_tool/graph.js       | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 28edf873c7..452f6ecb92 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -63,7 +63,7 @@ define('Graph', ['logme'], function (logme) {
                 'max': 10
             };
             if (typeof config.plot['xticks'] === 'string') {
-                processTicks(config.plot['xticks'], xaxis);
+                processTicks(config.plot['xticks'], xaxis, 'xunits');
             } else {
                 logme('MESSAGE: "xticks" were not specified. Using defaults.');
             }
@@ -76,14 +76,14 @@ define('Graph', ['logme'], function (logme) {
                 'max': 10
             };
             if (typeof config.plot['yticks'] === 'string') {
-                processTicks(config.plot['yticks'], yaxis);
+                processTicks(config.plot['yticks'], yaxis, 'yunits');
             } else {
                 logme('MESSAGE: "yticks" were not specified. Using defaults.');
             }
 
             return;
 
-            function processTicks(ticksStr, ticksObj) {
+            function processTicks(ticksStr, ticksObj, unitsType) {
                 var ticksBlobs, tempFloat;
 
                 // The 'ticks' setting is a string containing 3 floating-point
@@ -134,6 +134,17 @@ define('Graph', ['logme'], function (logme) {
 
                     ticksObj.tickSize = (ticksObj.max - ticksObj.min) / 10.0;
                 }
+
+                //  units: change last tick to units
+                if (typeof config.plot[unitsType] === 'string') {
+                    var ticks =  _.map(_.range(ticksObj.min,
+                        ticksObj.max + ticksObj.tickSize, ticksObj.tickSize),
+                        function(x){  return [x,
+                        x > ticksObj.max - ticksObj.tickSize ? config.plot[unitsType] : x];
+                                    });
+                    ticksObj.tickSize = null;
+                    ticksObj.ticks = ticks;
+                }
             }
         }
 

From 1ffb091139f29d10afe7496b2b198124d5dd73f9 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Wed, 19 Dec 2012 07:47:36 +0200
Subject: [PATCH 050/107] GST work in progress.

---
 .../js/src/graphical_slider_tool/graph.js     | 153 ++++++++++++------
 1 file changed, 106 insertions(+), 47 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 452f6ecb92..0df84c35e2 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -22,6 +22,10 @@ define('Graph', ['logme'], function (logme) {
             plotDiv.width(300);
         }
 
+        // Sometimes, when height is not explicitly set via CSS (or by some
+        // other means), it is 0 pixels by default. When Flot will try to plot
+        // a graph in this DIV with 0 height, then it will raise an error. To
+        // prevent this, we will set it to be equal to the width.
         if (plotDiv.height() === 0) {
             plotDiv.height(plotDiv.width());
         }
@@ -84,7 +88,7 @@ define('Graph', ['logme'], function (logme) {
             return;
 
             function processTicks(ticksStr, ticksObj, unitsType) {
-                var ticksBlobs, tempFloat;
+                var ticksBlobs, tempFloat, tempTicks, c1, c2;
 
                 // The 'ticks' setting is a string containing 3 floating-point
                 // numbers.
@@ -137,13 +141,83 @@ define('Graph', ['logme'], function (logme) {
 
                 //  units: change last tick to units
                 if (typeof config.plot[unitsType] === 'string') {
-                    var ticks =  _.map(_.range(ticksObj.min,
-                        ticksObj.max + ticksObj.tickSize, ticksObj.tickSize),
-                        function(x){  return [x,
-                        x > ticksObj.max - ticksObj.tickSize ? config.plot[unitsType] : x];
-                                    });
+                    tempTicks = [];
+
+                    for (c1 = ticksObj.min; c1 <= ticksObj.max; c1 += ticksObj.tickSize) {
+                        c2 = roundToPrec(c1, ticksObj.tickSize);
+                        tempTicks.push([c2, c2]);
+                    }
+
+                    tempTicks.pop();
+                    tempTicks.push([
+                        roundToPrec(ticksObj.max, ticksObj.tickSize),
+                        config.plot[unitsType]
+                    ]);
+
                     ticksObj.tickSize = null;
-                    ticksObj.ticks = ticks;
+                    ticksObj.ticks = tempTicks;
+                }
+
+                return;
+
+                function roundToPrec(num, prec) {
+                    var c1, tn1, tn2, digitsBefore, digitsAfter;
+
+                    tn1 = Math.abs(num);
+                    tn2 = Math.abs(prec);
+
+                    // Find out number of digits BEFORE the decimal point.
+                    c1 = 0;
+                    tn1 = Math.abs(num);
+                    while (tn1 >= 1) {
+                        c1 += 1;
+
+                        tn1 /= 10;
+                    }
+                    digitsBefore = c1;
+
+                    // Find out number of digits AFTER the decimal point.
+                    c1 = 0;
+                    tn1 = Math.abs(num);
+                    while (Math.round(tn1) !== tn1) {
+                        c1 += 1;
+
+                        tn1 *= 10;
+                    }
+                    digitsAfter = c1;
+
+                    // For precision, find out number of digits AFTER the
+                    // decimal point.
+                    c1 = 0;
+                    while (Math.round(tn2) !== tn2) {
+                        c1 += 1;
+
+                        tn2 *= 10;
+                    }
+
+                    // If precision is more than 1 (no digits after decimal
+                    // points).
+                    if (c1 === 0) {
+                        return num;
+                    }
+
+                    // If the precision contains digits after the decimal
+                    // point, we apply special rules.
+                    else {
+                        tn1 = Math.abs(num);
+
+                        if (digitsAfter > c1) {
+                            tn1 = tn1.toPrecision(digitsBefore + c1);
+                        } else {
+                            tn1 = tn1.toPrecision(digitsBefore + digitsAfter);
+                        }
+                    }
+
+                    if (num < 0) {
+                        return -tn1;
+                    }
+
+                    return tn1;
                 }
             }
         }
@@ -190,46 +264,39 @@ define('Graph', ['logme'], function (logme) {
             try {
                 xrange.max = Function.apply(null, allParamNames);
             } catch (err) {
-                logme('ERROR: could not create a function from the string "' + config.plot.xrange.min + '" for xrange.min.');
+                logme('ERROR: could not create a function from the string "' + config.plot.xrange.max + '" for xrange.max.');
 
                 return false;
             }
             allParamNames.pop();
 
-            logme('xrange = ', xrange);
+            if (typeof config.plot.num_points !== 'string') {
+                logme('ERROR: config.plot.num_points is not a string.');
+                logme('config.plot.num_points = ', config.plot.num_points);
 
-            // The user can specify the number of points. However, internally
-            // we will use it to generate a 'step' - i.e. the distance (on
-            // x-axis) between two adjacent points.
-            if (typeof config.plot.num_points === 'string') {
-                tempNum = parseInt(config.plot.num_points, 10);
-                if (isNaN(tempNum) === true) {
-                    logme('ERROR: Could not parse the number of points.');
-                    logme('config.plot.num_points = ', config.plot.num_points);
-
-                    return false;
-                }
-
-                if (
-                    (tempNum < 2) &&
-                    (tempNum > 1000)
-                ) {
-                    logme('ERROR: Number of points is outside the allowed range [2, 1000]');
-                    logme('config.plot.num_points = ' + tempNum);
-
-                    return false;
-                }
-
-                numPoints = tempNum;
-            } else {
-                logme('MESSAGE: config.plot.num_points is not a string.');
-                logme('Will set number of points to {width of graph} / 10.');
-
-                numPoints = plotDiv.width() / 10.0;
-
-                logme('numPoints = ' + numPoints);
+                return false;
             }
 
+            tempNum = parseInt(config.plot.num_points, 10);
+            if (isFinite(tempNum) === false) {
+                logme('ERROR: Expected config.plot.num_points to be a a valid integer. It is not.');
+                logme('config.plot.num_points = ', config.plot.num_points);
+
+                return false;
+            }
+
+            if (
+                (tempNum < 2) &&
+                (tempNum > 1000)
+            ) {
+                logme('ERROR: Number of points is outside the allowed range [2, 1000]');
+                logme('config.plot.num_points = ' + tempNum);
+
+                return false;
+            }
+
+            numPoints = tempNum;
+
             return true;
         }
 
@@ -311,8 +378,6 @@ define('Graph', ['logme'], function (logme) {
                 // will break.
                 funcString = $('<div>').html(funcString).text();
 
-                logme('funcString = ' + funcString);
-
                 // Some defaults. If no options are set for the graph, we will
                 // make sure that at least a line is drawn for a function.
                 newFunctionObject = {
@@ -324,8 +389,6 @@ define('Graph', ['logme'], function (logme) {
                 // XML.
                 paramNames = state.getAllParameterNames();
 
-                logme('allParamNames = ', paramNames);
-
                 // The 'x' is always one of the function parameters.
                 paramNames.push('x');
 
@@ -333,8 +396,6 @@ define('Graph', ['logme'], function (logme) {
                 // the Function constructor.
                 paramNames.push(funcString);
 
-                console.log('paramNames = ', paramNames);
-
                 // Create the function from the function string, and all of the
                 // available parameters AND the 'x' variable as it's parameters.
                 // For this we will use the built-in Function object
@@ -431,8 +492,6 @@ define('Graph', ['logme'], function (logme) {
                 end = xrange.max.apply(window, paramValues);
                 step = (end - start) / (numPoints - 1);
 
-                logme('start = ' + start + ', end = ' + end + ', step = ' + step);
-
                 // Generate the data points.
                 for (x = start; x <= end; x += step) {
 

From b8ea29c0d2d5e14a1a402df1c9e73ae806683aeb Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Wed, 19 Dec 2012 12:00:58 +0200
Subject: [PATCH 051/107] GST work in progress. Added point size. Added ability
 to redirect function output to element. Updated some example demos.
 Refactoring code.

---
 common/lib/xmodule/xmodule/gst_module.py      |   1 +
 .../js/src/graphical_slider_tool/el_output.js |  97 +++++++++++++
 .../js/src/graphical_slider_tool/graph.js     | 137 ++++++++++++------
 .../js/src/graphical_slider_tool/gst_main.js  |   7 +-
 .../js/src/graphical_slider_tool/state.js     |  18 ++-
 5 files changed, 215 insertions(+), 45 deletions(-)
 create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 4366acc91f..0058c827d0 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -32,6 +32,7 @@ class GraphicalSliderToolModule(XModule):
         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/gst.js')
       ]
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
new file mode 100644
index 0000000000..e1cac3156e
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
@@ -0,0 +1,97 @@
+// 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.plot.function)) {
+            processFuncObj(config.plot.function);
+        } else if ($.isArray(config.plot.function)) {
+            (function (c1) {
+                while (c1 < config.plot.function.length) {
+                    if ($.isPlainObject(config.plot.function[c1])) {
+                        processFuncObj(config.plot.function[c1]);
+                    }
+
+                    c1 += 1;
+                }
+            }(0));
+        }
+
+        return;
+
+        function processFuncObj(obj) {
+            var outputEl, paramNames, funcString, func;
+
+            // We are only interested in functions that are meant for output to an
+            // element.
+            if (typeof obj['@output'] !== 'string') {
+                return;
+            }
+
+            if (obj['@output'].toLowerCase() !== 'element') {
+                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;
+            }
+
+            funcString = obj['#text'];
+
+            // Make sure that all HTML entities are converted to their proper
+            // ASCII text equivalents.
+            funcString = $('<div>').html(funcString).text();
+
+            outputEl = $('#' + obj['@el_id']);
+
+            if (outputEl.length !== 1) {
+                logme('ERROR: The element with id "' + obj['@el_id'] + '" was not found.');
+
+                return;
+            }
+
+            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.'
+                );
+
+                paramNames.pop();
+
+                return;
+            }
+
+            paramNames.pop();
+
+            outputEl.html(func.apply(window, state.getAllParameterValues()));
+
+            state.addDynamicEl(outputEl, 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)
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 0df84c35e2..7911496639 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -32,16 +32,21 @@ define('Graph', ['logme'], function (logme) {
 
         // Configure some settings for the graph.
         if (setGraphXRange() === false) {
-            logme('ERROR: could not configure the xrange. Will not continue.');
+            logme('ERROR: Could not configure the xrange. Will not continue.');
 
             return;
         }
 
-        setGraphAxes();
+        if (setGraphAxes() === false) {
+            logme('ERROR: Could not process configuration for the axes.');
+
+            return;
+        }
 
         // Get the user defined functions. If there aren't any, don't do
         // anything else.
         createFunctions();
+
         if (functions.length === 0) {
             logme('ERROR: No functions were specified, or something went wrong.');
 
@@ -49,8 +54,9 @@ define('Graph', ['logme'], function (logme) {
         }
 
         // Create the initial graph and plot it for the user to see.
-        generateData();
-        updatePlot();
+        if (generateData() === true) {
+            updatePlot();
+        }
 
         // Bind an event. Whenever some constant changes, the graph will be
         // redrawn
@@ -59,33 +65,33 @@ define('Graph', ['logme'], function (logme) {
         return;
 
         function setGraphAxes() {
-            // Define the xaxis Flot configuration, and then see if the user
-            // supplied custom values.
-            xaxis = {
-                'min': 0,
-                'tickSize': 1,
-                'max': 10
-            };
+            xaxis = {};
             if (typeof config.plot['xticks'] === 'string') {
-                processTicks(config.plot['xticks'], xaxis, 'xunits');
+                if (processTicks(config.plot['xticks'], xaxis, 'xunits') === false) {
+                    logme('ERROR: Could not process the ticks for x-axis.');
+
+                    return false;
+                }
             } else {
                 logme('MESSAGE: "xticks" were not specified. Using defaults.');
+
+                return false;
             }
 
-            // Define the yaxis Flot configuration, and then see if the user
-            // supplied custom values.
-            yaxis = {
-                'min': 0,
-                'tickSize': 1,
-                'max': 10
-            };
+            yaxis = {};
             if (typeof config.plot['yticks'] === 'string') {
-                processTicks(config.plot['yticks'], yaxis, 'yunits');
+                if (processTicks(config.plot['yticks'], yaxis, 'yunits') === false) {
+                    logme('ERROR: Could not process the ticks for y-axis.');
+
+                    return false;
+                }
             } else {
                 logme('MESSAGE: "yticks" were not specified. Using defaults.');
+
+                return false;
             }
 
-            return;
+            return true;
 
             function processTicks(ticksStr, ticksObj, unitsType) {
                 var ticksBlobs, tempFloat, tempTicks, c1, c2;
@@ -97,7 +103,7 @@ define('Graph', ['logme'], function (logme) {
                 if (ticksBlobs.length !== 3) {
                     logme('ERROR: Did not get 3 blobs from ticksStr = "' + ticksStr + '".');
 
-                    return;
+                    return false;
                 }
 
                 tempFloat = parseFloat(ticksBlobs[0]);
@@ -105,6 +111,8 @@ define('Graph', ['logme'], function (logme) {
                     ticksObj.min = tempFloat;
                 } else {
                     logme('ERROR: Invalid "min". ticksBlobs[0] = ', ticksBlobs[0]);
+
+                    return false;
                 }
 
                 tempFloat = parseFloat(ticksBlobs[1]);
@@ -112,6 +120,8 @@ define('Graph', ['logme'], function (logme) {
                     ticksObj.tickSize = tempFloat;
                 } else {
                     logme('ERROR: Invalid "tickSize". ticksBlobs[1] = ', ticksBlobs[1]);
+
+                    return false;
                 }
 
                 tempFloat = parseFloat(ticksBlobs[2]);
@@ -119,24 +129,25 @@ define('Graph', ['logme'], function (logme) {
                     ticksObj.max = tempFloat;
                 } else {
                     logme('ERROR: Invalid "max". ticksBlobs[2] = ', ticksBlobs[2]);
+
+                    return false;
                 }
 
                 // Is the starting tick to the left of the ending tick (on the
                 // x-axis)? If not, set default starting and ending tick.
                 if (ticksObj.min >= ticksObj.max) {
-                    logme('ERROR: min >= max. Setting defaults.');
+                    logme('ERROR: Ticks min >= max.');
 
-                    ticksObj.min = 0;
-                    ticksObj.max = 10;
+                    return false;
                 }
 
                 // Make sure the range makes sense - i.e. that there are at
                 // least 3 ticks. If not, set a tickSize which will produce
                 // 11 ticks. tickSize is the spacing between the ticks.
-                if (ticksObj.tickSize * 2 >= ticksObj.max - ticksObj.min) {
-                    logme('ERROR: tickSize * 2 >= max - min. Setting defaults.');
+                if (ticksObj.tickSize > ticksObj.max - ticksObj.min) {
+                    logme('ERROR: tickSize > max - min.');
 
-                    ticksObj.tickSize = (ticksObj.max - ticksObj.min) / 10.0;
+                    return false;
                 }
 
                 //  units: change last tick to units
@@ -158,7 +169,11 @@ define('Graph', ['logme'], function (logme) {
                     ticksObj.ticks = tempTicks;
                 }
 
-                return;
+                // ticksObj.font = {
+                //     'size': '16px'
+                // };
+
+                return true;
 
                 function roundToPrec(num, prec) {
                     var c1, tn1, tn2, digitsBefore, digitsAfter;
@@ -354,16 +369,36 @@ define('Graph', ['logme'], function (logme) {
             // properties as parameters. Rather than writing them out every
             // time, we will have a single place where it is done.
             function callAddFunction(obj) {
+                if (typeof obj['@output'] === 'string') {
+
+                    // If this function is meant to be calculated for an
+                    // element then skip it.
+                    if (obj['@output'].toLowerCase() === 'element') {
+                        return;
+                    }
+
+                    // It is an error if "output" is not "element" or "graph".
+                    // Though you can ommit the "output" attribute.
+                    else if (obj['@output'].toLowerCase() !== 'graph') {
+                        logme('ERROR: Function "output" attribute can be either "div" or "graph".');
+
+                        return;
+                    }
+                }
+
+                // The user did not specify an "output" attribute, or it is
+                // "graph".
                 addFunction(
                     obj['#text'],
                     obj['@color'],
                     obj['@line'],
                     obj['@dot'],
-                    obj['@label']
+                    obj['@label'],
+                    obj['@point_size']
                 );
             }
 
-            function addFunction(funcString, color, line, dot, label) {
+            function addFunction(funcString, color, line, dot, label, pointSize) {
                 var newFunctionObject, func, paramNames;
 
                 // The main requirement is function string. Without it we can't
@@ -407,14 +442,15 @@ define('Graph', ['logme'], function (logme) {
                 try {
                     func = Function.apply(null, paramNames);
                 } catch (err) {
-                    // Let's tell the user. He will see a nice red error
-                    // message instead of a graph.
-                    plotDiv.html(
-                        '<span style="color: red;">' +
-                            'Error while parsing JavaScript function body string!' +
-                        '</span>'
+                    logme(
+                        'ERROR: The function body "' +
+                        funcString +
+                        '" was not converted by the Function constructor.'
                     );
 
+                    paramNames.pop();
+                    paramNames.pop();
+
                     return;
                 }
 
@@ -445,6 +481,10 @@ define('Graph', ['logme'], function (logme) {
                     }
                 }
 
+                if (typeof pointSize === 'string') {
+                    newFunctionObject['pointSize'] = pointSize;
+                }
+
                 // If the preference is conflicting (we must have either line
                 // or dot, none is not an option), we will show line.
                 if (
@@ -465,8 +505,9 @@ define('Graph', ['logme'], function (logme) {
         // The callback that will be called whenever a constant changes (gets
         // updated via a slider or a text input).
         function onUpdatePlot(event) {
-            generateData();
-            updatePlot();
+            if (generateData() === true) {
+                updatePlot();
+            }
         }
 
         function generateData() {
@@ -501,7 +542,14 @@ define('Graph', ['logme'], function (logme) {
                     // We call the user defined function, passing all of the
                     // available parameter values. Inside this function they
                     // will be accessible by their names.
-                    y = functionObj.func.apply(window, paramValues);
+                    try {
+                        y = functionObj.func.apply(window, paramValues);
+                    } catch (err) {
+                        logme('ERROR: Could not generate data.');
+                        logme('Error message: "' + err.message + '".');
+
+                        return false;
+                    }
 
                     // Return the paramValues array to how it was before we
                     // added 'x' variable to the end of it.
@@ -549,14 +597,21 @@ define('Graph', ['logme'], function (logme) {
                     'show': functionObj.dot
                 };
 
+                if (functionObj.hasOwnProperty('pointSize')) {
+                    seriesObj.points.radius = functionObj.pointSize;
+                }
+
                 // Add the newly created series object to the series set which
                 // will be plotted by Flot.
                 dataSeries.push(seriesObj);
             }
-        }
+
+            return true;
+        } // End-of: function generateData
 
         function updatePlot() {
             // Tell Flot to draw the graph to our specification.
+
             $.plot(
                 plotDiv,
                 dataSeries,
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 3c06cf9544..bdbe317f36 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
@@ -8,8 +8,8 @@ define(
     // 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', 'logme'],
-    function (State, GeneralMethods, Sliders, Inputs, Graph, logme) {
+    ['State', 'GeneralMethods', 'Sliders', 'Inputs', 'Graph', 'ElOutput', 'logme'],
+    function (State, GeneralMethods, Sliders, Inputs, Graph, ElOutput, logme) {
 
     return GstMain;
 
@@ -67,6 +67,9 @@ define(
         // 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);
+
+        // Configure functions that output to an element instead of the graph.
+        ElOutput(config, state);
     }
 });
 
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 19bb557b24..04c0b0a60e 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
@@ -18,7 +18,9 @@ define('State', ['logme'], function (logme) {
 
     function State(gstId, config) {
         var parameters, allParameterNames, allParameterValues,
-            plotDiv;
+            plotDiv, dynamicEl;
+
+        dynamicEl = [];
 
         stateInst += 1;
         logme('MESSAGE: Creating state instance # ' + stateInst + '.');
@@ -92,7 +94,8 @@ define('State', ['logme'], function (logme) {
             'getAllParameterNames': getAllParameterNames,
             'getAllParameterValues': getAllParameterValues,
 
-            'bindUpdatePlotEvent': bindUpdatePlotEvent
+            'bindUpdatePlotEvent': bindUpdatePlotEvent,
+            'addDynamicEl': addDynamicEl
         };
 
         function getAllParameterNames() {
@@ -119,6 +122,13 @@ define('State', ['logme'], function (logme) {
             plotDiv.bind('update_plot', callback);
         }
 
+        function addDynamicEl(outputEl, func) {
+            dynamicEl.push({
+                'outputEl': outputEl,
+                'func': func
+            });
+        }
+
         function getParameterValue(paramName) {
 
             // If the name of the constant is not tracked by state, return an
@@ -238,6 +248,10 @@ define('State', ['logme'], function (logme) {
             // Update the helper array with the new parameter's value.
             allParameterValues[parameters[paramName].helperArrayIndex] = paramValueNum;
 
+            for (c1 = 0; c1 < dynamicEl.length; c1++) {
+                dynamicEl[c1].outputEl.html(dynamicEl[c1].func.apply(window, allParameterValues));
+            }
+
             return true;
         } // End-of: function setParameterValue
 

From 9b500a157cbce4b09336eef000b9399cc5cb8f26 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Wed, 19 Dec 2012 12:32:01 +0200
Subject: [PATCH 052/107] Added extra test checks for GST.

---
 .../js/src/graphical_slider_tool/graph.js     | 30 +++++++++++++++++--
 1 file changed, 27 insertions(+), 3 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 7911496639..ee1123a8d4 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -270,6 +270,7 @@ define('Graph', ['logme'], function (logme) {
                 xrange.min = Function.apply(null, allParamNames);
             } catch (err) {
                 logme('ERROR: could not create a function from the string "' + config.plot.xrange.min + '" for xrange.min.');
+                logme('Error message: "' + err.message + '"');
 
                 return false;
             }
@@ -280,6 +281,7 @@ define('Graph', ['logme'], function (logme) {
                 xrange.max = Function.apply(null, allParamNames);
             } catch (err) {
                 logme('ERROR: could not create a function from the string "' + config.plot.xrange.max + '" for xrange.max.');
+                logme('Error message: "' + err.message + '"');
 
                 return false;
             }
@@ -447,6 +449,7 @@ define('Graph', ['logme'], function (logme) {
                         funcString +
                         '" was not converted by the Function constructor.'
                     );
+                    logme('Error message: "' + err.message + '"');
 
                     paramNames.pop();
                     paramNames.pop();
@@ -529,8 +532,22 @@ define('Graph', ['logme'], function (logme) {
                 // JSON.
                 c1 = 0;
 
-                start = xrange.min.apply(window, paramValues);
-                end = xrange.max.apply(window, paramValues);
+                try {
+                    start = xrange.min.apply(window, paramValues);
+                } catch (err) {
+                    logme('ERROR: Could not determine xrange start.');
+                    logme('Error message: "' + err.message + '".');
+
+                    return false;
+                }
+                try {
+                    end = xrange.max.apply(window, paramValues);
+                } catch (err) {
+                    logme('ERROR: Could not determine xrange end.');
+                    logme('Error message: "' + err.message + '".');
+
+                    return false;
+                }
                 step = (end - start) / (numPoints - 1);
 
                 // Generate the data points.
@@ -568,7 +585,14 @@ define('Graph', ['logme'], function (logme) {
                 if (c1 != numPoints) {
                     x = end;
                     paramValues.push(x);
-                    y = functionObj.func.apply(window, paramValues);
+                    try {
+                        y = functionObj.func.apply(window, paramValues);
+                    } catch (err) {
+                        logme('ERROR: Could not generate data.');
+                        logme('Error message: "' + err.message + '".');
+
+                        return false;
+                    }
                     paramValues.pop();
                     dataPoints.push([x, y]);
                 }

From d45c490bf065833898f569d42c1de9009ddc9907 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Wed, 19 Dec 2012 12:40:21 +0200
Subject: [PATCH 053/107] plot now not required

---
 common/lib/xmodule/xmodule/gst_module.py | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 0058c827d0..3bedd6dc9f 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -73,17 +73,19 @@ class GraphicalSliderToolModule(XModule):
         plot_div = '<div class="{element_class}_plot" id="{element_id}_plot" \
                     style="{style}"></div>'
         # extract css style from plot
-        plot_def = re.search(r'\$plot[^\$]*\$', html_string).group()
-        style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', plot_def)
-        if style:
-            style = style.groups()[0]
-        else:  # no style parameter
-            style = ''
-        replacement = plot_div.format(element_class=self.html_class,
-                                      element_id=self.html_id,
-                                            style=style)
-        html_string = re.sub(r'\$plot[^\$]*\$', replacement, html_string,
-                        flags=re.UNICODE)
+        plot_def = re.search(r'\$plot[^\$]*\$', html_string)
+        if plot_def:
+            plot_def = plot_def.group()
+            style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', plot_def)
+            if style:
+                style = style.groups()[0]
+            else:  # no style parameter
+                style = ''
+            replacement = plot_div.format(element_class=self.html_class,
+                                          element_id=self.html_id,
+                                                style=style)
+            html_string = re.sub(r'\$plot[^\$]*\$', replacement, html_string,
+                            flags=re.UNICODE)
 
         # get variables
         if json.loads(self.configuration_json)['root'].get('parameters'):

From 12452f1020765ee5a26a0df7d5f5c24f50928527 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Wed, 19 Dec 2012 12:53:11 +0200
Subject: [PATCH 054/107] Removed functions from plot.

---
 .../js/src/graphical_slider_tool/el_output.js | 12 ++++----
 .../js/src/graphical_slider_tool/graph.js     | 28 ++++++++++---------
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
index e1cac3156e..98795b5d32 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
@@ -8,13 +8,13 @@ define('ElOutput', ['logme'], function (logme) {
 
     function ElOutput(config, state) {
 
-        if ($.isPlainObject(config.plot.function)) {
-            processFuncObj(config.plot.function);
-        } else if ($.isArray(config.plot.function)) {
+        if ($.isPlainObject(config.functions.function)) {
+            processFuncObj(config.functions.function);
+        } else if ($.isArray(config.functions.function)) {
             (function (c1) {
-                while (c1 < config.plot.function.length) {
-                    if ($.isPlainObject(config.plot.function[c1])) {
-                        processFuncObj(config.plot.function[c1]);
+                while (c1 < config.functions.function.length) {
+                    if ($.isPlainObject(config.functions.function[c1])) {
+                        processFuncObj(config.functions.function[c1]);
                     }
 
                     c1 += 1;
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index ee1123a8d4..fa976d4412 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -9,6 +9,8 @@ define('Graph', ['logme'], function (logme) {
     function Graph(gstId, config, state) {
         var plotDiv, dataSeries, functions, xaxis, yaxis, numPoints, xrange;
 
+        logme(config);
+
         // We must have a graph container DIV element available in order to
         // proceed.
         plotDiv = $('#' + gstId + '_plot');
@@ -322,44 +324,44 @@ define('Graph', ['logme'], function (logme) {
 
             functions = [];
 
-            if (typeof config.plot['function'] === 'undefined') {
-                logme('ERROR: config.plot["function"] is undefined.');
+            if (typeof config.functions === 'undefined') {
+                logme('ERROR: config.functions is undefined.');
 
                 return;
             }
 
-            if (typeof config.plot['function'] === 'string') {
+            if (typeof config.functions.function === 'string') {
 
                 // If just one function string is present.
-                addFunction(config.plot['function']);
+                addFunction(config.functions.function);
 
-            } else if ($.isPlainObject(config.plot['function']) === true) {
+            } else if ($.isPlainObject(config.functions.function) === true) {
 
                 // If a function is present, but it also has properties
                 // defined.
-                callAddFunction(config.plot['function']);
+                callAddFunction(config.functions.function);
 
-            } else if ($.isArray(config.plot['function'])) {
+            } else if ($.isArray(config.functions.function)) {
 
                 // If more than one function is defined.
-                for (c1 = 0; c1 < config.plot['function'].length; c1++) {
+                for (c1 = 0; c1 < config.functions.function.length; c1++) {
 
                     // For each definition, we must check if it is a simple
                     // string definition, or a complex one with properties.
-                    if (typeof config.plot['function'][c1] === 'string') {
+                    if (typeof config.functions.function[c1] === 'string') {
 
                         // Simple string.
-                        addFunction(config.plot['function'][c1]);
+                        addFunction(config.functions.function[c1]);
 
-                    } else if ($.isPlainObject(config.plot['function'][c1])) {
+                    } else if ($.isPlainObject(config.functions.function[c1])) {
 
                         // Properties are present.
-                        callAddFunction(config.plot['function'][c1]);
+                        callAddFunction(config.functions.function[c1]);
 
                     }
                 }
             } else {
-                logme('ERROR: config.plot["function"] is of an unsupported type.');
+                logme('ERROR: config.functions.function is of an unsupported type.');
 
                 return;
             }

From ac23c7c630bd9149e8242e554a781a081154599c Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Wed, 19 Dec 2012 13:10:12 +0200
Subject: [PATCH 055/107] fix typo

---
 common/lib/xmodule/xmodule/gst_module.py | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 3bedd6dc9f..b1e30bd7a1 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -173,6 +173,7 @@ class GraphicalSliderToolModule(XModule):
         via json.
         """
         # root added for interface compatibility with xmltodict.parse
+        # import ipdb; ipdb.set_trace()
         self.configuration_json = json.dumps(
                 xmltodict.parse('<root class="' + self.location.category + '">' +
                 stringify_children(self.definition['configuration'])
@@ -199,13 +200,13 @@ class GraphicalSliderToolDescriptor(MakoModuleDescriptor, XmlDescriptor):
         expected_children_level_0 = ['render', 'configuration']
         for child in expected_children_level_0:
             if len(xml_object.xpath(child)) != 1:
-                raise ValueError("Self a\ssessment definition must include \
+                raise ValueError("Graphical Slider Tool definition must include \
                     exactly one '{0}' tag".format(child))
 
-        expected_children_level_1 = ['plot']
+        expected_children_level_1 = ['functions']
         for child in expected_children_level_1:
             if len(xml_object.xpath('configuration')[0].xpath(child)) != 1:
-                raise ValueError("Self a\ssessment definition must include \
+                raise ValueError("Graphical Slider Tool definition must include \
                     exactly one '{0}' tag".format(child))
         # finished
 

From 4e368f7d7405479d7c24daac752da8785b18fbe3 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Wed, 19 Dec 2012 13:14:46 +0200
Subject: [PATCH 056/107] Fixed bug where config.plot was causing error if not
 present.

---
 .../xmodule/xmodule/js/src/graphical_slider_tool/graph.js    | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index fa976d4412..b87d6fccd7 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -11,6 +11,11 @@ define('Graph', ['logme'], function (logme) {
 
         logme(config);
 
+        // We need plot configuration settings. Without them we can't continue.
+        if ($.isPlainObject(config.plot) === false) {
+            return;
+        }
+
         // We must have a graph container DIV element available in order to
         // proceed.
         plotDiv = $('#' + gstId + '_plot');

From 54c0c36e645b12005bafd292748c921560dc1314 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Wed, 19 Dec 2012 13:17:39 +0200
Subject: [PATCH 057/107] fix \n in regext

---
 common/lib/xmodule/xmodule/gst_module.py | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index b1e30bd7a1..f8f296e97e 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -76,7 +76,8 @@ class GraphicalSliderToolModule(XModule):
         plot_def = re.search(r'\$plot[^\$]*\$', html_string)
         if plot_def:
             plot_def = plot_def.group()
-            style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', plot_def)
+            style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', plot_def,
+                flags=re.UNICODE | re.DOTALL)
             if style:
                 style = style.groups()[0]
             else:  # no style parameter
@@ -105,7 +106,7 @@ class GraphicalSliderToolModule(XModule):
         for var in variables:
             # find $slider var='var' ... $
             instances = re.findall(r'\$slider\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
-                          + r'[^\$]*\$', html_string)
+                          + r'[^\$]*\$', html_string, flags=re.UNICODE | re.DOTALL)
             if instances:  # if presented, only one slider per var
                 slider_def = instances[0]  # get $slider var='var' ... $ string
                 # extract var for proper style extraction further
@@ -113,7 +114,8 @@ class GraphicalSliderToolModule(XModule):
                                           slider_def).group()
                 slider_def = slider_def.replace(var_substring, '')
                 # get style
-                style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', slider_def)
+                style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', slider_def,
+                    flags=re.UNICODE | re.DOTALL)
                 if style:
                     style = style.groups()[0]
                 else:  # no style parameter
@@ -126,7 +128,7 @@ class GraphicalSliderToolModule(XModule):
                 # html div element
                 html_string = re.sub(r'\$slider\s+(?=.*var\=[\"\'](' + \
                     var + ')[\"\'])' + r'[^\$]*\$',
-                replacement, html_string, flags=re.UNICODE)
+                replacement, html_string, flags=re.UNICODE | re.DOTALL)
 
         # substitute inputs if we have them
         input_el = '<input class="{element_class}_input" \
@@ -138,7 +140,7 @@ class GraphicalSliderToolModule(XModule):
             input_index = 0  # make multiple inputs for same variable have
                 # different id
             instances = re.findall(r'\$input\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
-                          + r'[^\$]*\$', html_string)
+                          + r'[^\$]*\$', html_string, flags=re.UNICODE | re.DOTALL)
             # import ipdb; ipdb.set_trace()
             for input_def in instances:  # for multiple inputs per var
                 input_index += 1
@@ -146,13 +148,15 @@ class GraphicalSliderToolModule(XModule):
                 var_substring = re.search(r'(var\=[\"\']' + var + r'[\"\'])',
                                           input_def).group()
                 input_def = input_def.replace(var_substring, '')
-                readonly = re.search(r'(?=.*(readonly\=[\"\'](\w+)[\"\']))', input_def)
+                readonly = re.search(r'(?=.*(readonly\=[\"\'](\w+)[\"\']))', 
+                    input_def, flags=re.UNICODE | re.DOTALL)
                 if readonly:
                     input_def = input_def.replace(readonly.groups()[0], '')
                     readonly = readonly.groups()[1]
                 else:
                     readonly = ''
-                style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', input_def)
+                style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', input_def,
+                    flags=re.UNICODE | re.DOTALL)
                 if style:
                     style = style.groups()[0]
                 else:
@@ -165,7 +169,7 @@ class GraphicalSliderToolModule(XModule):
                 # import ipdb; ipdb.set_trace()
                 html_string = re.sub(r'\$input\s+(?=.*var\=[\"\'](' + \
                                      var + ')[\"\'])' + r'[^\$]*\$',
-                replacement, html_string, count=1, flags=re.UNICODE)
+                replacement, html_string, count=1, flags=re.UNICODE | re.DOTALL)
         return html_string
 
     def get_configuration(self):

From e1588ff903d258cea0047e4187149b34a71c701e Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Wed, 19 Dec 2012 13:51:31 +0200
Subject: [PATCH 058/107] fix regexp

---
 common/lib/xmodule/xmodule/gst_module.py | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index f8f296e97e..b5d1c69368 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -73,10 +73,10 @@ class GraphicalSliderToolModule(XModule):
         plot_div = '<div class="{element_class}_plot" id="{element_id}_plot" \
                     style="{style}"></div>'
         # extract css style from plot
-        plot_def = re.search(r'\$plot[^\$]*\$', html_string)
+        plot_def = re.search(r'\<plot[^\$]*\>', html_string)
         if plot_def:
             plot_def = plot_def.group()
-            style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', plot_def,
+            style = re.search(r'(?=[^\$]*style\=[\"\'](.*)[\"\'])', plot_def,
                 flags=re.UNICODE | re.DOTALL)
             if style:
                 style = style.groups()[0]
@@ -105,7 +105,7 @@ class GraphicalSliderToolModule(XModule):
                      </div>'
         for var in variables:
             # find $slider var='var' ... $
-            instances = re.findall(r'\$slider\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
+            instances = re.findall(r'\$slider\s+(?=[^\$]*var\=[\"\']' + var + '[\"\'])' \
                           + r'[^\$]*\$', html_string, flags=re.UNICODE | re.DOTALL)
             if instances:  # if presented, only one slider per var
                 slider_def = instances[0]  # get $slider var='var' ... $ string
@@ -114,7 +114,7 @@ class GraphicalSliderToolModule(XModule):
                                           slider_def).group()
                 slider_def = slider_def.replace(var_substring, '')
                 # get style
-                style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', slider_def,
+                style = re.search(r'(?=[^\$]*style\=[\"\'](.*)[\"\'])', slider_def,
                     flags=re.UNICODE | re.DOTALL)
                 if style:
                     style = style.groups()[0]
@@ -126,7 +126,7 @@ class GraphicalSliderToolModule(XModule):
                                             var=var, style=style)
                 # subsitute $slider var='var' ... $ in html_srting to proper
                 # html div element
-                html_string = re.sub(r'\$slider\s+(?=.*var\=[\"\'](' + \
+                html_string = re.sub(r'\$slider\s+(?=[^\$]*var\=[\"\'](' + \
                     var + ')[\"\'])' + r'[^\$]*\$',
                 replacement, html_string, flags=re.UNICODE | re.DOTALL)
 
@@ -139,23 +139,24 @@ class GraphicalSliderToolModule(XModule):
         for var in variables:
             input_index = 0  # make multiple inputs for same variable have
                 # different id
-            instances = re.findall(r'\$input\s+(?=.*var\=[\"\']' + var + '[\"\'])' \
+            instances = re.findall(r'\$input\s+(?=[^\$]*var\=[\"\']' + var + '[\"\'])' \
                           + r'[^\$]*\$', html_string, flags=re.UNICODE | re.DOTALL)
             # import ipdb; ipdb.set_trace()
             for input_def in instances:  # for multiple inputs per var
                 input_index += 1
                 # extract var and readonly before style!
+                # import ipdb; ipdb.set_trace()
                 var_substring = re.search(r'(var\=[\"\']' + var + r'[\"\'])',
                                           input_def).group()
                 input_def = input_def.replace(var_substring, '')
-                readonly = re.search(r'(?=.*(readonly\=[\"\'](\w+)[\"\']))', 
+                readonly = re.search(r'(?=[^\$]*(readonly\=[\"\'](\w+)[\"\']))', 
                     input_def, flags=re.UNICODE | re.DOTALL)
                 if readonly:
                     input_def = input_def.replace(readonly.groups()[0], '')
                     readonly = readonly.groups()[1]
                 else:
                     readonly = ''
-                style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', input_def,
+                style = re.search(r'(?=[^\$]*style\=[\"\'](.*)[\"\'])', input_def,
                     flags=re.UNICODE | re.DOTALL)
                 if style:
                     style = style.groups()[0]
@@ -167,7 +168,7 @@ class GraphicalSliderToolModule(XModule):
                         var=var, readonly=readonly, style=style,
                         input_index=input_index)
                 # import ipdb; ipdb.set_trace()
-                html_string = re.sub(r'\$input\s+(?=.*var\=[\"\'](' + \
+                html_string = re.sub(r'\$input\s+(?=[^\$]*var\=[\"\'](' + \
                                      var + ')[\"\'])' + r'[^\$]*\$',
                 replacement, html_string, count=1, flags=re.UNICODE | re.DOTALL)
         return html_string

From e755ade10caea8e43b09db70f07dc626435c7a83 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Wed, 19 Dec 2012 13:51:40 +0200
Subject: [PATCH 059/107] fix precision

---
 .../xmodule/js/src/graphical_slider_tool/graph.js      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index b87d6fccd7..ce4d714cce 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -228,11 +228,11 @@ define('Graph', ['logme'], function (logme) {
                     else {
                         tn1 = Math.abs(num);
 
-                        if (digitsAfter > c1) {
-                            tn1 = tn1.toPrecision(digitsBefore + c1);
-                        } else {
-                            tn1 = tn1.toPrecision(digitsBefore + digitsAfter);
-                        }
+                        // if (digitsAfter > c1) {
+                            tn1 = tn1.toFixed(c1);
+                        // } else {
+                        //     tn1 = tn1.toPrecision(digitsBefore + digitsAfter);
+                        // }
                     }
 
                     if (num < 0) {

From 0f330f61189803a7fb40fc9049cd829e6a9f0e6b Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Wed, 19 Dec 2012 13:58:55 +0200
Subject: [PATCH 060/107] fix

---
 common/lib/xmodule/xmodule/gst_module.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index b5d1c69368..33449dece6 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -73,7 +73,7 @@ class GraphicalSliderToolModule(XModule):
         plot_div = '<div class="{element_class}_plot" id="{element_id}_plot" \
                     style="{style}"></div>'
         # extract css style from plot
-        plot_def = re.search(r'\<plot[^\$]*\>', html_string)
+        plot_def = re.search(r'\$plot[^\$]*\$', html_string)
         if plot_def:
             plot_def = plot_def.group()
             style = re.search(r'(?=[^\$]*style\=[\"\'](.*)[\"\'])', plot_def,

From aa470639611d2b9486530a15512adc4180377735 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Wed, 19 Dec 2012 17:37:44 +0200
Subject: [PATCH 061/107] changed to xml syntax

---
 common/lib/xmodule/xmodule/gst_module.py | 34 ++++++++++++------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 33449dece6..aaa6e11198 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -73,10 +73,10 @@ class GraphicalSliderToolModule(XModule):
         plot_div = '<div class="{element_class}_plot" id="{element_id}_plot" \
                     style="{style}"></div>'
         # extract css style from plot
-        plot_def = re.search(r'\$plot[^\$]*\$', html_string)
+        plot_def = re.search(r'<plot[^<>]*/>', html_string)
         if plot_def:
             plot_def = plot_def.group()
-            style = re.search(r'(?=[^\$]*style\=[\"\'](.*)[\"\'])', plot_def,
+            style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', plot_def,
                 flags=re.UNICODE | re.DOTALL)
             if style:
                 style = style.groups()[0]
@@ -85,7 +85,7 @@ class GraphicalSliderToolModule(XModule):
             replacement = plot_div.format(element_class=self.html_class,
                                           element_id=self.html_id,
                                                 style=style)
-            html_string = re.sub(r'\$plot[^\$]*\$', replacement, html_string,
+            html_string = re.sub(r'<plot[^<>]*/>', replacement, html_string,
                             flags=re.UNICODE)
 
         # get variables
@@ -104,17 +104,17 @@ class GraphicalSliderToolModule(XModule):
                                    data-var="{var}" style="{style}">\
                      </div>'
         for var in variables:
-            # find $slider var='var' ... $
-            instances = re.findall(r'\$slider\s+(?=[^\$]*var\=[\"\']' + var + '[\"\'])' \
-                          + r'[^\$]*\$', html_string, flags=re.UNICODE | re.DOTALL)
+            # find <slider var='var' ... >
+            instances = re.findall(r'<slider\s+(?=[^<>]*var\=[\"\']' + var + '[\"\'])' \
+                          + r'[^<>]*/>', html_string, flags=re.UNICODE | re.DOTALL)
             if instances:  # if presented, only one slider per var
-                slider_def = instances[0]  # get $slider var='var' ... $ string
+                slider_def = instances[0]  # get <slider var='var' ... > string
                 # extract var for proper style extraction further
                 var_substring = re.search(r'(var\=[\"\']' + var + r'[\"\'])',
                                           slider_def).group()
                 slider_def = slider_def.replace(var_substring, '')
                 # get style
-                style = re.search(r'(?=[^\$]*style\=[\"\'](.*)[\"\'])', slider_def,
+                style = re.search(r'(?=[^<>]*style\=[\"\'](.*)[\"\'])', slider_def,
                     flags=re.UNICODE | re.DOTALL)
                 if style:
                     style = style.groups()[0]
@@ -124,10 +124,10 @@ class GraphicalSliderToolModule(XModule):
                 replacement = slider_div.format(element_class=self.html_class,
                                             element_id=self.html_id,
                                             var=var, style=style)
-                # subsitute $slider var='var' ... $ in html_srting to proper
+                # subsitute <slider var='var' ... > in html_srting to proper
                 # html div element
-                html_string = re.sub(r'\$slider\s+(?=[^\$]*var\=[\"\'](' + \
-                    var + ')[\"\'])' + r'[^\$]*\$',
+                html_string = re.sub(r'<slider\s+(?=[^<>]*var\=[\"\'](' + \
+                    var + ')[\"\'])' + r'[^<>]*/>',
                 replacement, html_string, flags=re.UNICODE | re.DOTALL)
 
         # substitute inputs if we have them
@@ -139,8 +139,8 @@ class GraphicalSliderToolModule(XModule):
         for var in variables:
             input_index = 0  # make multiple inputs for same variable have
                 # different id
-            instances = re.findall(r'\$input\s+(?=[^\$]*var\=[\"\']' + var + '[\"\'])' \
-                          + r'[^\$]*\$', html_string, flags=re.UNICODE | re.DOTALL)
+            instances = re.findall(r'<textbox\s+(?=[^<>]*var\=[\"\']' + var + '[\"\'])' \
+                          + r'[^<>]*/>', html_string, flags=re.UNICODE | re.DOTALL)
             # import ipdb; ipdb.set_trace()
             for input_def in instances:  # for multiple inputs per var
                 input_index += 1
@@ -149,14 +149,14 @@ class GraphicalSliderToolModule(XModule):
                 var_substring = re.search(r'(var\=[\"\']' + var + r'[\"\'])',
                                           input_def).group()
                 input_def = input_def.replace(var_substring, '')
-                readonly = re.search(r'(?=[^\$]*(readonly\=[\"\'](\w+)[\"\']))', 
+                readonly = re.search(r'(?=[^<>]*(readonly\=[\"\'](\w+)[\"\']))', 
                     input_def, flags=re.UNICODE | re.DOTALL)
                 if readonly:
                     input_def = input_def.replace(readonly.groups()[0], '')
                     readonly = readonly.groups()[1]
                 else:
                     readonly = ''
-                style = re.search(r'(?=[^\$]*style\=[\"\'](.*)[\"\'])', input_def,
+                style = re.search(r'(?=[^<>]*style\=[\"\'](.*)[\"\'])', input_def,
                     flags=re.UNICODE | re.DOTALL)
                 if style:
                     style = style.groups()[0]
@@ -168,8 +168,8 @@ class GraphicalSliderToolModule(XModule):
                         var=var, readonly=readonly, style=style,
                         input_index=input_index)
                 # import ipdb; ipdb.set_trace()
-                html_string = re.sub(r'\$input\s+(?=[^\$]*var\=[\"\'](' + \
-                                     var + ')[\"\'])' + r'[^\$]*\$',
+                html_string = re.sub(r'<textbox\s+(?=[^<>]*var\=[\"\'](' + \
+                                     var + ')[\"\'])' + r'[^<>]*/>',
                 replacement, html_string, count=1, flags=re.UNICODE | re.DOTALL)
         return html_string
 

From 0eeabc6896021ac9788062dd6a3c4e0afad9f97f Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Wed, 19 Dec 2012 18:25:15 +0200
Subject: [PATCH 062/107] Added exmple with normal distribution.

---
 common/lib/xmodule/xmodule/gst_module.py      |   2 +
 .../js/src/graphical_slider_tool/graph.js     |  34 ++-
 .../graphical_slider_tool/jstat-1.0.0.min.js  | 236 ++++++++++++++++++
 3 files changed, 266 insertions(+), 6 deletions(-)
 create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/jstat-1.0.0.min.js

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index aaa6e11198..7e61264929 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -25,6 +25,8 @@ class GraphicalSliderToolModule(XModule):
 
     js = {
       'js': [
+        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'),
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index ce4d714cce..39bc1bd9bf 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -403,11 +403,12 @@ define('Graph', ['logme'], function (logme) {
                     obj['@line'],
                     obj['@dot'],
                     obj['@label'],
-                    obj['@point_size']
+                    obj['@point_size'],
+                    obj['@fill_area']
                 );
             }
 
-            function addFunction(funcString, color, line, dot, label, pointSize) {
+            function addFunction(funcString, color, line, dot, label, pointSize, fillArea) {
                 var newFunctionObject, func, paramNames;
 
                 // The main requirement is function string. Without it we can't
@@ -422,6 +423,8 @@ define('Graph', ['logme'], function (logme) {
                 // will break.
                 funcString = $('<div>').html(funcString).text();
 
+                logme('graph: funcstr = "' + funcString + '"');
+
                 // Some defaults. If no options are set for the graph, we will
                 // make sure that at least a line is drawn for a function.
                 newFunctionObject = {
@@ -476,17 +479,17 @@ define('Graph', ['logme'], function (logme) {
                 }
 
                 if (typeof line === 'string') {
-                    if (line === 'true') {
+                    if (line.toLowerCase() === 'true') {
                         newFunctionObject['line'] = true;
-                    } else if (line === 'false') {
+                    } else if (line.toLowerCase() === 'false') {
                         newFunctionObject['line'] = false;
                     }
                 }
 
                 if (typeof dot === 'string') {
-                    if (dot === 'true') {
+                    if (dot.toLowerCase() === 'true') {
                         newFunctionObject['dot'] = true;
-                    } else if (dot === 'false') {
+                    } else if (dot.toLowerCase() === 'false') {
                         newFunctionObject['dot'] = false;
                     }
                 }
@@ -504,6 +507,21 @@ define('Graph', ['logme'], function (logme) {
                     newFunctionObject['line'] = true;
                 }
 
+                if (newFunctionObject['line'] === true) {
+                    if (typeof fillArea === 'string') {
+                        if (fillArea.toLowerCase() === 'true') {
+                            newFunctionObject['fillArea'] = true;
+                        } else if (fillArea.toLowerCase() === 'false') {
+                            newFunctionObject['fillArea'] = false;
+                        } else {
+                            logme('ERROR: The attribute fill_area should be either "true" or "false".');
+                            logme('fill_area = "' + fillArea + '".');
+
+                            return;
+                        }
+                    }
+                }
+
                 if (typeof label === 'string') {
                     newFunctionObject['label'] = label;
                 }
@@ -622,6 +640,10 @@ define('Graph', ['logme'], function (logme) {
                     'show': functionObj.line
                 };
 
+                if (functionObj.hasOwnProperty('fillArea') === true) {
+                    seriesObj.lines.fill = functionObj.fillArea;
+                }
+
                 // Should each data point be represented by a point on the
                 // graph?
                 seriesObj.points = {
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/jstat-1.0.0.min.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/jstat-1.0.0.min.js
new file mode 100644
index 0000000000..7f9cd4a124
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/jstat-1.0.0.min.js
@@ -0,0 +1,236 @@
+function jstat(){}
+j=jstat;(function(){var initializing=false,fnTest=/xyz/.test(function(){xyz;})?/\b_super\b/:/.*/;this.Class=function(){};Class.extend=function(prop){var _super=this.prototype;initializing=true;var prototype=new this();initializing=false;for(var name in prop){prototype[name]=typeof prop[name]=="function"&&typeof _super[name]=="function"&&fnTest.test(prop[name])?(function(name,fn){return function(){var tmp=this._super;this._super=_super[name];var ret=fn.apply(this,arguments);this._super=tmp;return ret;};})(name,prop[name]):prop[name];}
+function Class(){if(!initializing&&this.init)
+this.init.apply(this,arguments);}
+Class.prototype=prototype;Class.constructor=Class;Class.extend=arguments.callee;return Class;};})();jstat.ONE_SQRT_2PI=0.3989422804014327;jstat.LN_SQRT_2PI=0.9189385332046727417803297;jstat.LN_SQRT_PId2=0.225791352644727432363097614947;jstat.DBL_MIN=2.22507e-308;jstat.DBL_EPSILON=2.220446049250313e-16;jstat.SQRT_32=5.656854249492380195206754896838;jstat.TWO_PI=6.283185307179586;jstat.DBL_MIN_EXP=-999;jstat.SQRT_2dPI=0.79788456080287;jstat.LN_SQRT_PI=0.5723649429247;jstat.seq=function(min,max,length){var r=new Range(min,max,length);return r.getPoints();}
+jstat.dnorm=function(x,mean,sd,log){if(mean==null)mean=0;if(sd==null)sd=1;if(log==null)log=false;var n=new NormalDistribution(mean,sd);if(!isNaN(x)){return n._pdf(x,log);}else if(x.length){var res=[];for(var i=0;i<x.length;i++){res.push(n._pdf(x[i],log));}
+return res;}else{throw"Illegal argument: x";}}
+jstat.pnorm=function(q,mean,sd,lower_tail,log){if(mean==null)mean=0;if(sd==null)sd=1;if(lower_tail==null)lower_tail=true;if(log==null)log=false;var n=new NormalDistribution(mean,sd);if(!isNaN(q)){return n._cdf(q,lower_tail,log);}else if(q.length){var res=[];for(var i=0;i<q.length;i++){res.push(n._cdf(q[i],lower_tail,log));}
+return res;}else{throw"Illegal argument: x";}}
+jstat.dlnorm=function(x,meanlog,sdlog,log){if(meanlog==null)meanlog=0;if(sdlog==null)sdlog=1;if(log==null)log=false;var n=new LogNormalDistribution(meanlog,sdlog);if(!isNaN(x)){return n._pdf(x,log);}else if(x.length){var res=[];for(var i=0;i<x.length;i++){res.push(n._pdf(x[i],log));}
+return res;}else{throw"Illegal argument: x";}}
+jstat.plnorm=function(q,meanlog,sdlog,lower_tail,log){if(meanlog==null)meanlog=0;if(sdlog==null)sdlog=1;if(lower_tail==null)lower_tail=true;if(log==null)log=false;var n=new LogNormalDistribution(meanlog,sdlog);if(!isNaN(q)){return n._cdf(q,lower_tail,log);}
+else if(q.length){var res=[];for(var i=0;i<q.length;i++){res.push(n._cdf(q[i],lower_tail,log));}
+return res;}else{throw"Illegal argument: x";}}
+jstat.dbeta=function(x,alpha,beta,ncp,log){if(ncp==null)ncp=0;if(log==null)log=false;var b=new BetaDistribution(alpha,beta);if(!isNaN(x)){return b._pdf(x,log);}
+else if(x.length){var res=[];for(var i=0;i<x.length;i++){res.push(b._pdf(x[i],log));}
+return res;}else{throw"Illegal argument: x";}}
+jstat.pbeta=function(q,alpha,beta,ncp,lower_tail,log){if(ncp==null)ncp=0;if(log==null)log=false;if(lower_tail==null)lower_tail=true;var b=new BetaDistribution(alpha,beta);if(!isNaN(q)){return b._cdf(q,lower_tail,log);}else if(q.length){var res=[];for(var i=0;i<q.length;i++){res.push(b._cdf(q[i],lower_tail,log));}
+return res;}
+else{throw"Illegal argument: x";}}
+jstat.dgamma=function(x,shape,rate,scale,log){if(rate==null)rate=1;if(scale==null)scale=1/rate;if(log==null)log=false;var g=new GammaDistribution(shape,scale);if(!isNaN(x)){return g._pdf(x,log);}else if(x.length){var res=[];for(var i=0;i<x.length;i++){res.push(g._pdf(x[i],log));}
+return res;}else{throw"Illegal argument: x";}}
+jstat.pgamma=function(q,shape,rate,scale,lower_tail,log){if(rate==null)rate=1;if(scale==null)scale=1/rate;if(lower_tail==null)lower_tail=true;if(log==null)log=false;var g=new GammaDistribution(shape,scale);if(!isNaN(q)){return g._cdf(q,lower_tail,log);}else if(q.length){var res=[];for(var i=0;i<q.length;i++){res.push(g._cdf(q[i],lower_tail,log));}
+return res;}else{throw"Illegal argument: x";}}
+jstat.dt=function(x,df,ncp,log){if(log==null)log=false;var t=new StudentTDistribution(df,ncp);if(!isNaN(x)){return t._pdf(x,log);}else if(x.length){var res=[];for(var i=0;i<x.length;i++){res.push(t._pdf(x[i],log));}
+return res;}else{throw"Illegal argument: x";}}
+jstat.pt=function(q,df,ncp,lower_tail,log){if(lower_tail==null)lower_tail=true;if(log==null)log=false;var t=new StudentTDistribution(df,ncp);if(!isNaN(q)){return t._cdf(q,lower_tail,log);}else if(q.length){var res=[];for(var i=0;i<q.length;i++){res.push(t._cdf(q[i],lower_tail,log));}
+return res;}else{throw"Illegal argument: x";}}
+jstat.plot=function(x,y,options){if(x==null){throw"x is undefined in jstat.plot";}
+if(y==null){throw"y is undefined in jstat.plot";}
+if(x.length!=y.length){throw"x and y lengths differ in jstat.plot";}
+var flotOpt={series:{lines:{},points:{}}};var series=[];if(x.length==undefined){series.push([x,y]);flotOpt.series.points.show=true;}else{for(var i=0;i<x.length;i++){series.push([x[i],y[i]]);}}
+var title='jstat graph';if(options!=null){if(options.type!=null){if(options.type=='l'){flotOpt.series.lines.show=true;}else if(options.type=='p'){flotOpt.series.lines.show=false;flotOpt.series.points.show=true;}}
+if(options.hover!=null){flotOpt.grid={hoverable:options.hover}}
+if(options.main!=null){title=options.main;}}
+var now=new Date();var hash=now.getMilliseconds()*now.getMinutes()+now.getSeconds();$('body').append('<div title="'+title+'" style="display: none;" id="'+hash+'"><div id="graph-'+hash+'" style="width:95%; height: 95%"></div></div>');$('#'+hash).dialog({modal:false,width:475,height:475,resizable:true,resize:function(){$.plot($('#graph-'+hash),[series],flotOpt);},open:function(event,ui){var id='#graph-'+hash;$.plot($('#graph-'+hash),[series],flotOpt);}})}
+jstat.log10=function(arg){return Math.log(arg)/Math.LN10;}
+jstat.toSigFig=function(num,n){if(num==0){return 0;}
+var d=Math.ceil(jstat.log10(num<0?-num:num));var power=n-parseInt(d);var magnitude=Math.pow(10,power);var shifted=Math.round(num*magnitude);return shifted/magnitude;}
+jstat.trunc=function(x){return(x>0)?Math.floor(x):Math.ceil(x);}
+jstat.isFinite=function(x){return(!isNaN(x)&&(x!=Number.POSITIVE_INFINITY)&&(x!=Number.NEGATIVE_INFINITY));}
+jstat.dopois_raw=function(x,lambda,give_log){if(lambda==0){if(x==0){return(give_log)?0.0:1.0;}
+return(give_log)?Number.NEGATIVE_INFINITY:0.0;}
+if(!jstat.isFinite(lambda))return(give_log)?Number.NEGATIVE_INFINITY:0.0;if(x<0)return(give_log)?Number.NEGATIVE_INFINITY:0.0;if(x<=lambda*jstat.DBL_MIN){return(give_log)?-lambda:Math.exp(-lambda);}
+if(lambda<x*jstat.DBL_MIN){var param=-lambda+x*Math.log(lambda)-jstat.lgamma(x+1);return(give_log)?param:Math.exp(param);}
+var param1=jstat.TWO_PI*x;var param2=-jstat.stirlerr(x)-jstat.bd0(x,lambda);return(give_log)?-0.5*Math.log(param1)+param2:Math.exp(param2)/Math.sqrt(param1);}
+jstat.bd0=function(x,np){var ej,s,s1,v,j;if(!jstat.isFinite(x)||!jstat.isFinite(np)||np==0.0)throw"illegal parameter in jstat.bd0";if(Math.abs(x-np)>0.1*(x+np)){v=(x-np)/(x+np);s=(x-np)*v;ej=2*x*v;v=v*v;for(j=1;;j++){ej*=v;s1=s+ej/((j<<1)+1);if(s1==s)
+return(s1);s=s1;}}
+return(x*Math.log(x/np)+np-x);}
+jstat.stirlerr=function(n){var S0=0.083333333333333333333;var S1=0.00277777777777777777778;var S2=0.00079365079365079365079365;var S3=0.000595238095238095238095238;var S4=0.0008417508417508417508417508;var sferr_halves=[0.0,0.1534264097200273452913848,0.0810614667953272582196702,0.0548141210519176538961390,0.0413406959554092940938221,0.03316287351993628748511048,0.02767792568499833914878929,0.02374616365629749597132920,0.02079067210376509311152277,0.01848845053267318523077934,0.01664469118982119216319487,0.01513497322191737887351255,0.01387612882307074799874573,0.01281046524292022692424986,0.01189670994589177009505572,0.01110455975820691732662991,0.010411265261972096497478567,0.009799416126158803298389475,0.009255462182712732917728637,0.008768700134139385462952823,0.008330563433362871256469318,0.007934114564314020547248100,0.007573675487951840794972024,0.007244554301320383179543912,0.006942840107209529865664152,0.006665247032707682442354394,0.006408994188004207068439631,0.006171712263039457647532867,0.005951370112758847735624416,0.005746216513010115682023589,0.005554733551962801371038690];var nn;if(n<=15.0){nn=n+n;if(nn==parseInt(nn))return(sferr_halves[parseInt(nn)]);return(jstat.lgamma(n+1.0)-(n+0.5)*Math.log(n)+n-jstat.LN_SQRT_2PI);}
+nn=n*n;if(n>500)return((S0-S1/nn)/n);if(n>80)return((S0-(S1-S2/nn)/nn)/n);if(n>35)return((S0-(S1-(S2-S3/nn)/nn)/nn)/n);return((S0-(S1-(S2-(S3-S4/nn)/nn)/nn)/nn)/n);}
+jstat.lgamma=function(x){function lgammafn_sign(x,sgn){var ans,y,sinpiy;var xmax=2.5327372760800758e+305;var dxrel=1.490116119384765696e-8;if(sgn!=null)sgn=1;if(isNaN(x))return x;if(x<0&&(Math.floor(-x)%2.0)==0)
+if(sgn!=null)sgn=-1;if(x<=0&&x==jstat.trunc(x)){console.warn("Negative integer argument in lgammafn_sign");return Number.POSITIVE_INFINITY;}
+y=Math.abs(x);if(y<=10)return Math.log(Math.abs(jstat.gamma(x)));if(y>xmax){console.warn("Illegal arguement passed to lgammafn_sign");return Number.POSITIVE_INFINITY;}
+if(x>0){if(x>1e17){return(x*(Math.log(x)-1.0));}else if(x>4934720.0){return(jstat.LN_SQRT_2PI+(x-0.5)*Math.log(x)-x);}else{return jstat.LN_SQRT_2PI+(x-0.5)*Math.log(x)-x+jstat.lgammacor(x);}}
+sinpiy=Math.abs(Math.sin(Math.PI*y));if(sinpiy==0){throw"Should never happen!!";}
+ans=jstat.LN_SQRT_PId2+(x-0.5)*Math.log(y)-x-Math.log(sinpiy)-jstat.lgammacor(y);if(Math.abs((x-jstat.trunc(x-0.5))*ans/x)<dxrel){throw"The answer is less than half the precision argument too close to a negative integer";}
+return ans;}
+return lgammafn_sign(x,null);}
+jstat.gamma=function(x){var xbig=171.624;var p=[-1.71618513886549492533811,24.7656508055759199108314,-379.804256470945635097577,629.331155312818442661052,866.966202790413211295064,-31451.2729688483675254357,-36144.4134186911729807069,66456.1438202405440627855];var q=[-30.8402300119738975254353,315.350626979604161529144,-1015.15636749021914166146,-3107.77167157231109440444,22538.1184209801510330112,4755.84627752788110767815,-134659.959864969306392456,-115132.259675553483497211];var c=[-.001910444077728,8.4171387781295e-4,-5.952379913043012e-4,7.93650793500350248e-4,-.002777777777777681622553,.08333333333333333331554247,.0057083835261];var i,n,parity,fact,xden,xnum,y,z,yi,res,sum,ysq;parity=(0);fact=1.0;n=0;y=x;if(y<=0.0){y=-x;yi=jstat.trunc(y);res=y-yi;if(res!=0.0){if(yi!=jstat.trunc(yi*0.5)*2.0)
+parity=(1);fact=-Math.PI/Math.sin(Math.PI*res);y+=1.0;}else{return(Number.POSITIVE_INFINITY);}}
+if(y<jstat.DBL_EPSILON){if(y>=jstat.DBL_MIN){res=1.0/y;}else{return(Number.POSITIVE_INFINITY);}}else if(y<12.0){yi=y;if(y<1.0){z=y;y+=1.0;}else{n=parseInt(y)-1;y-=parseFloat(n);z=y-1.0;}
+xnum=0.0;xden=1.0;for(i=0;i<8;++i){xnum=(xnum+p[i])*z;xden=xden*z+q[i];}
+res=xnum/xden+1.0;if(yi<y){res/=yi;}else if(yi>y){for(i=0;i<n;++i){res*=y;y+=1.0;}}}else{if(y<=xbig){ysq=y*y;sum=c[6];for(i=0;i<6;++i){sum=sum/ysq+c[i];}
+sum=sum/y-y+jstat.LN_SQRT_2PI;sum+=(y-0.5)*Math.log(y);res=Math.exp(sum);}else{return(Number.POSITIVE_INFINITY);}}
+if(parity)
+res=-res;if(fact!=1.0)
+res=fact/res;return res;}
+jstat.lgammacor=function(x){var algmcs=[+.1666389480451863247205729650822e+0,-.1384948176067563840732986059135e-4,+.9810825646924729426157171547487e-8,-.1809129475572494194263306266719e-10,+.6221098041892605227126015543416e-13,-.3399615005417721944303330599666e-15,+.2683181998482698748957538846666e-17,-.2868042435334643284144622399999e-19,+.3962837061046434803679306666666e-21,-.6831888753985766870111999999999e-23,+.1429227355942498147573333333333e-24,-.3547598158101070547199999999999e-26,+.1025680058010470912000000000000e-27,-.3401102254316748799999999999999e-29,+.1276642195630062933333333333333e-30];var tmp;var nalgm=5;var xbig=94906265.62425156;var xmax=3.745194030963158e306;if(x<10){return Number.NaN;}else if(x>=xmax){throw"Underflow error in lgammacor";}else if(x<xbig){tmp=10/x;return jstat.chebyshev(tmp*tmp*2-1,algmcs,nalgm)/x;}
+return 1/(x*12);}
+jstat.incompleteBeta=function(a,b,x){function betacf(a,b,x){var MAXIT=100;var EPS=3.0e-12;var FPMIN=1.0e-30;var m,m2,aa,c,d,del,h,qab,qam,qap;qab=a+b;qap=a+1.0;qam=a-1.0;c=1.0;d=1.0-qab*x/qap;if(Math.abs(d)<FPMIN){d=FPMIN;}
+d=1.0/d;h=d;for(m=1;m<=MAXIT;m++){m2=2*m;aa=m*(b-m)*x/((qam+m2)*(a+m2));d=1.0+aa*d;if(Math.abs(d)<FPMIN){d=FPMIN;}
+c=1.0+aa/c;if(Math.abs(c)<FPMIN){c=FPMIN;}
+d=1.0/d;h*=d*c;aa=-(a+m)*(qab+m)*x/((a+m2)*(qap+m2));d=1.0+aa*d;if(Math.abs(d)<FPMIN){d=FPMIN;}
+c=1.0+aa/c;if(Math.abs(c)<FPMIN){c=FPMIN;}
+d=1.0/d;del=d*c;h*=del;if(Math.abs(del-1.0)<EPS){break;}}
+if(m>MAXIT){console.warn("a or b too big, or MAXIT too small in betacf: "+a+", "+b+", "+x+", "+h);return h;}
+if(isNaN(h)){console.warn(a+", "+b+", "+x);}
+return h;}
+var bt;if(x<0.0||x>1.0){throw"bad x in routine incompleteBeta";}
+if(x==0.0||x==1.0){bt=0.0;}else{bt=Math.exp(jstat.lgamma(a+b)-jstat.lgamma(a)-jstat.lgamma(b)+a*Math.log(x)+b*Math.log(1.0-x));}
+if(x<(a+1.0)/(a+b+2.0)){return bt*betacf(a,b,x)/a;}else{return 1.0-bt*betacf(b,a,1.0-x)/b;}}
+jstat.chebyshev=function(x,a,n){var b0,b1,b2,twox;var i;if(n<1||n>1000)return Number.NaN;if(x<-1.1||x>1.1)return Number.NaN;twox=x*2;b2=b1=0;b0=0;for(i=1;i<=n;i++){b2=b1;b1=b0;b0=twox*b1-b2+a[n-i];}
+return(b0-b2)*0.5;}
+jstat.fmin2=function(x,y){return(x<y)?x:y;}
+jstat.log1p=function(x){var ret=0,n=50;if(x<=-1){return Number.NEGATIVE_INFINITY;}
+if(x<0||x>1){return Math.log(1+x);}
+for(var i=1;i<n;i++){if((i%2)===0){ret-=Math.pow(x,i)/i;}else{ret+=Math.pow(x,i)/i;}}
+return ret;}
+jstat.expm1=function(x){var y,a=Math.abs(x);if(a<jstat.DBL_EPSILON)return x;if(a>0.697)return Math.exp(x)-1;if(a>1e-8){y=Math.exp(x)-1;}else{y=(x/2+1)*x;}
+y-=(1+y)*(jstat.log1p(y)-x);return y;}
+jstat.logBeta=function(a,b){var corr,p,q;p=q=a;if(b<p)p=b;if(b>q)q=b;if(p<0){console.warn('Both arguements must be >= 0');return Number.NaN;}
+else if(p==0){return Number.POSITIVE_INFINITY;}
+else if(!jstat.isFinite(q)){return Number.NEGATIVE_INFINITY;}
+if(p>=10){corr=jstat.lgammacor(p)+jstat.lgammacor(q)-jstat.lgammacor(p+q);return Math.log(q)*-0.5+jstat.LN_SQRT_2PI+corr
++(p-0.5)*Math.log(p/(p+q))+q*jstat.log1p(-p/(p+q));}
+else if(q>=10){corr=jstat.lgammacor(q)-jstat.lgammacor(p+q);return jstat.lgamma(p)+corr+p-p*Math.log(p+q)
++(q-0.5)*jstat.log1p(-p/(p+q));}
+else
+return Math.log(jstat.gamma(p)*(jstat.gamma(q)/jstat.gamma(p+q)));}
+jstat.dbinom_raw=function(x,n,p,q,give_log){if(give_log==null)give_log=false;var lf,lc;if(p==0){if(x==0){return(give_log)?0.0:1.0;}else{return(give_log)?Number.NEGATIVE_INFINITY:0.0;}}
+if(q==0){if(x==n){return(give_log)?0.0:1.0;}else{return(give_log)?Number.NEGATIVE_INFINITY:0.0;}}
+if(x==0){if(n==0)return(give_log)?0.0:1.0;lc=(p<0.1)?-jstat.bd0(n,n*q)-n*p:n*Math.log(q);return(give_log)?lc:Math.exp(lc);}
+if(x==n){lc=(q<0.1)?-jstat.bd0(n,n*p)-n*q:n*Math.log(p);return(give_log)?lc:Math.exp(lc);}
+if(x<0||x>n)return(give_log)?Number.NEGATIVE_INFINITY:0.0;lc=jstat.stirlerr(n)-jstat.stirlerr(x)-jstat.stirlerr(n-x)-jstat.bd0(x,n*p)-jstat.bd0(n-x,n*q);lf=Math.log(jstat.TWO_PI)+Math.log(x)+jstat.log1p(-x/n);return(give_log)?lc-0.5*lf:Math.exp(lc-0.5*lf);}
+jstat.max=function(values){var max=Number.NEGATIVE_INFINITY;for(var i=0;i<values.length;i++){if(values[i]>max){max=values[i];}}
+return max;}
+var Range=Class.extend({init:function(min,max,numPoints){this._minimum=parseFloat(min);this._maximum=parseFloat(max);this._numPoints=parseFloat(numPoints);},getMinimum:function(){return this._minimum;},getMaximum:function(){return this._maximum;},getNumPoints:function(){return this._numPoints;},getPoints:function(){var results=[];var x=this._minimum;var step=(this._maximum-this._minimum)/(this._numPoints-1);for(var i=0;i<this._numPoints;i++){results[i]=parseFloat(x.toFixed(6));x+=step;}
+return results;}});Range.validate=function(range){if(!range instanceof Range){return false;}
+if(isNaN(range.getMinimum())||isNaN(range.getMaximum())||isNaN(range.getNumPoints())||range.getMaximum()<range.getMinimum()||range.getNumPoints()<=0){return false;}
+return true;}
+var ContinuousDistribution=Class.extend({init:function(name){this._name=name;},toString:function(){return this._string;},getName:function(){return this._name;},getClassName:function(){return this._name+'Distribution';},density:function(valueOrRange){if(!isNaN(valueOrRange)){return parseFloat(this._pdf(valueOrRange).toFixed(15));}else if(Range.validate(valueOrRange)){var points=valueOrRange.getPoints();var result=[];for(var i=0;i<points.length;i++){result[i]=parseFloat(this._pdf(points[i]));}
+return result;}else{throw"Invalid parameter supplied to "+this.getClassName()+".density()";}},cumulativeDensity:function(valueOrRange){if(!isNaN(valueOrRange)){return parseFloat(this._cdf(valueOrRange).toFixed(15));}else if(Range.validate(valueOrRange)){var points=valueOrRange.getPoints();var result=[];for(var i=0;i<points.length;i++){result[i]=parseFloat(this._cdf(points[i]));}
+return result;}else{throw"Invalid parameter supplied to "+this.getClassName()+".cumulativeDensity()";}},getRange:function(standardDeviations,numPoints){if(standardDeviations==null){standardDeviations=5;}
+if(numPoints==null){numPoints=100;}
+var min=this.getMean()-standardDeviations*Math.sqrt(this.getVariance());var max=this.getMean()+standardDeviations*Math.sqrt(this.getVariance());if(this.getClassName()=='GammaDistribution'||this.getClassName()=='LogNormalDistribution'){min=0.0;max=this.getMean()+standardDeviations*Math.sqrt(this.getVariance());}else if(this.getClassName()=='BetaDistribution'){min=0.0;max=1.0;}
+var range=new Range(min,max,numPoints);return range;},getVariance:function(){},getMean:function(){},getQuantile:function(p){var self=this;function findClosestMatch(range,p){var ERR=1.0e-5;var xs=range.getPoints();var closestIndex=0;var closestDistance=999;for(var i=0;i<xs.length;i++){var pp=self.cumulativeDensity(xs[i]);var distance=Math.abs(pp-p);if(distance<closestDistance){closestIndex=i;closestDistance=distance;}}
+if(closestDistance<=ERR){return xs[closestIndex];}else{var newRange=new Range(xs[closestIndex-1],xs[closestIndex+1],20);return findClosestMatch(newRange,p);}}
+var range=this.getRange(5,20);return findClosestMatch(range,p);}});var NormalDistribution=ContinuousDistribution.extend({init:function(mean,sigma){this._super('Normal');this._mean=parseFloat(mean);this._sigma=parseFloat(sigma);this._string="Normal ("+this._mean.toFixed(2)+", "+this._sigma.toFixed(2)+")";},_pdf:function(x,give_log){if(give_log==null){give_log=false;}
+var sigma=this._sigma;var mu=this._mean;if(!jstat.isFinite(sigma)){return(give_log)?Number.NEGATIVE_INFINITY:0.0}
+if(!jstat.isFinite(x)&&mu==x){return Number.NaN;}
+if(sigma<=0){if(sigma<0){throw"invalid sigma in _pdf";}
+return(x==mu)?Number.POSITIVE_INFINITY:(give_log)?Number.NEGATIVE_INFINITY:0.0;}
+x=(x-mu)/sigma;if(!jstat.isFinite(x)){return(give_log)?Number.NEGATIVE_INFINITY:0.0;}
+return(give_log?-(jstat.LN_SQRT_2PI+0.5*x*x+Math.log(sigma)):jstat.ONE_SQRT_2PI*Math.exp(-0.5*x*x)/sigma);},_cdf:function(x,lower_tail,log_p){if(lower_tail==null)lower_tail=true;if(log_p==null)log_p=false;function pnorm_both(x,cum,ccum,i_tail,log_p){var a=[2.2352520354606839287,161.02823106855587881,1067.6894854603709582,18154.981253343561249,0.065682337918207449113];var b=[47.20258190468824187,976.09855173777669322,10260.932208618978205,45507.789335026729956];var c=[0.39894151208813466764,8.8831497943883759412,93.506656132177855979,597.27027639480026226,2494.5375852903726711,6848.1904505362823326,11602.651437647350124,9842.7148383839780218,1.0765576773720192317e-8];var d=[22.266688044328115691,235.38790178262499861,1519.377599407554805,6485.558298266760755,18615.571640885098091,34900.952721145977266,38912.003286093271411,19685.429676859990727];var p=[0.21589853405795699,0.1274011611602473639,0.022235277870649807,0.001421619193227893466,2.9112874951168792e-5,0.02307344176494017303];var q=[1.28426009614491121,0.468238212480865118,0.0659881378689285515,0.00378239633202758244,7.29751555083966205e-5];var xden,xnum,temp,del,eps,xsq,y,i,lower,upper;eps=jstat.DBL_EPSILON*0.5;lower=i_tail!=1;upper=i_tail!=0;y=Math.abs(x);if(y<=0.67448975){if(y>eps){xsq=x*x;xnum=a[4]*xsq;xden=xsq;for(i=0;i<3;++i){xnum=(xnum+a[i])*xsq;xden=(xden+b[i])*xsq;}}else{xnum=xden=0.0;}
+temp=x*(xnum+a[3])/(xden+b[3]);if(lower)cum=0.5+temp;if(upper)ccum=0.5-temp;if(log_p){if(lower)cum=Math.log(cum);if(upper)ccum=Math.log(ccum);}}else if(y<=jstat.SQRT_32){xnum=c[8]*y;xden=y;for(i=0;i<7;++i){xnum=(xnum+c[i])*y;xden=(xden+d[i])*y;}
+temp=(xnum+c[7])/(xden+d[7]);xsq=jstat.trunc(x*16)/16;del=(x-xsq)*(x+xsq);if(log_p){cum=(-xsq*xsq*0.5)+(-del*0.5)+Math.log(temp);if((lower&&x>0.)||(upper&&x<=0.))
+ccum=jstat.log1p(-Math.exp(-xsq*xsq*0.5)*Math.exp(-del*0.5)*temp);}
+else{cum=Math.exp(-xsq*xsq*0.5)*Math.exp(-del*0.5)*temp;ccum=1.0-cum;}
+if(x>0.0){temp=cum;if(lower){cum=ccum;}
+ccum=temp;}}
+else if((log_p&&y<1e170)||(lower&&-37.5193<x&&x<8.2924)||(upper&&-8.2924<x&&x<37.5193)){xsq=1.0/(x*x);xnum=p[5]*xsq;xden=xsq;for(i=0;i<4;++i){xnum=(xnum+p[i])*xsq;xden=(xden+q[i])*xsq;}
+temp=xsq*(xnum+p[4])/(xden+q[4]);temp=(jstat.ONE_SQRT_2PI-temp)/y;xsq=jstat.trunc(x*16)/16;del=(x-xsq)*(x+xsq);if(log_p){cum=(-xsq*xsq*0.5)+(-del*0.5)+Math.log(temp);if((lower&&x>0.)||(upper&&x<=0.))
+ccum=jstat.log1p(-Math.exp(-xsq*xsq*0.5)*Math.exp(-del*0.5)*temp);}
+else{cum=Math.exp(-xsq*xsq*0.5)*Math.exp(-del*0.5)*temp;ccum=1.0-cum;}
+if(x>0.0){temp=cum;if(lower){cum=ccum;}
+ccum=temp;}}else{if(x>0){cum=(log_p)?0.0:1.0;ccum=(log_p)?Number.NEGATIVE_INFINITY:0.0;}else{cum=(log_p)?Number.NEGATIVE_INFINITY:0.0;ccum=(log_p)?0.0:1.0;}}
+return[cum,ccum];}
+var p,cp;var mu=this._mean;var sigma=this._sigma;var R_DT_0,R_DT_1;if(lower_tail){if(log_p){R_DT_0=Number.NEGATIVE_INFINITY;R_DT_1=0.0;}else{R_DT_0=0.0;R_DT_1=1.0;}}else{if(log_p){R_DT_0=0.0;R_DT_1=Number.NEGATIVE_INFINITY;}else{R_DT_0=1.0;R_DT_1=0.0;}}
+if(!jstat.isFinite(x)&&mu==x)return Number.NaN;if(sigma<=0){if(sigma<0){console.warn("Sigma is less than 0");return Number.NaN;}
+return(x<mu)?R_DT_0:R_DT_1;}
+p=(x-mu)/sigma;if(!jstat.isFinite(p)){return(x<mu)?R_DT_0:R_DT_1;}
+x=p;var result=pnorm_both(x,p,cp,(lower_tail?false:true),log_p);return(lower_tail?result[0]:result[1]);},getMean:function(){return this._mean;},getSigma:function(){return this._sigma;},getVariance:function(){return this._sigma*this._sigma;}});var LogNormalDistribution=ContinuousDistribution.extend({init:function(location,scale){this._super('LogNormal')
+this._location=parseFloat(location);this._scale=parseFloat(scale);this._string="LogNormal ("+this._location.toFixed(2)+", "+this._scale.toFixed(2)+")";},_pdf:function(x,give_log){var y;var sdlog=this._scale;var meanlog=this._location;if(give_log==null){give_log=false;}
+if(sdlog<=0)throw"Illegal parameter in _pdf";if(x<=0){return(give_log)?Number.NEGATIVE_INFINITY:0.0;}
+y=(Math.log(x)-meanlog)/sdlog;return(give_log?-(jstat.LN_SQRT_2PI+0.5*y*y+Math.log(x*sdlog)):jstat.ONE_SQRT_2PI*Math.exp(-0.5*y*y)/(x*sdlog));},_cdf:function(x,lower_tail,log_p){var sdlog=this._scale;var meanlog=this._location;if(lower_tail==null){lower_tail=true;}
+if(log_p==null){log_p=false;}
+if(sdlog<=0){throw"illegal std in _cdf";}
+if(x>0){var nd=new NormalDistribution(meanlog,sdlog);return nd._cdf(Math.log(x),lower_tail,log_p);}
+if(lower_tail){return(log_p)?Number.NEGATIVE_INFINITY:0.0;}else{return(log_p)?0.0:1.0;}},getLocation:function(){return this._location;},getScale:function(){return this._scale;},getMean:function(){return Math.exp((this._location+this._scale)/2);},getVariance:function(){var ans=(Math.exp(this._scale)-1)*Math.exp(2*this._location+this._scale);return ans;}});var GammaDistribution=ContinuousDistribution.extend({init:function(shape,scale){this._super('Gamma');this._shape=parseFloat(shape);this._scale=parseFloat(scale);this._string="Gamma ("+this._shape.toFixed(2)+", "+this._scale.toFixed(2)+")";},_pdf:function(x,give_log){var pr;var shape=this._shape;var scale=this._scale;if(give_log==null){give_log=false;}
+if(shape<0||scale<=0){throw"Illegal argument in _pdf";}
+if(x<0){return(give_log)?Number.NEGATIVE_INFINITY:0.0;}
+if(shape==0){return(x==0)?Number.POSITIVE_INFINITY:(give_log)?Number.NEGATIVE_INFINITY:0.0;}
+if(x==0){if(shape<1)return Number.POSITIVE_INFINITY;if(shape>1)return(give_log)?Number.NEGATIVE_INFINITY:0.0;return(give_log)?-Math.log(scale):1/scale;}
+if(shape<1){pr=jstat.dopois_raw(shape,x/scale,give_log);return give_log?pr+Math.log(shape/x):pr*shape/x;}
+pr=jstat.dopois_raw(shape-1,x/scale,give_log);return give_log?pr-Math.log(scale):pr/scale;},_cdf:function(x,lower_tail,log_p){function USE_PNORM(){pn1=Math.sqrt(alph)*3.0*(Math.pow(x/alph,1.0/3.0)+1.0/(9.0*alph)-1.0);var norm_dist=new NormalDistribution(0.0,1.0);return norm_dist._cdf(pn1,lower_tail,log_p);}
+if(lower_tail==null)lower_tail=true;if(log_p==null)log_p=false;var alph=this._shape;var scale=this._scale;var xbig=1.0e+8;var xlarge=1.0e+37;var alphlimit=1e5;var pn1,pn2,pn3,pn4,pn5,pn6,arg,a,b,c,an,osum,sum,n,pearson;if(alph<=0.||scale<=0.){console.warn('Invalid gamma params in _cdf');return Number.NaN;}
+x/=scale;if(isNaN(x))return x;if(x<=0.0){if(lower_tail){return(log_p)?Number.NEGATIVE_INFINITY:0.0;}else{return(log_p)?0.0:1.0;}}
+if(alph>alphlimit){return USE_PNORM();}
+if(x>xbig*alph){if(x>jstat.DBL_MAX*alph){if(lower_tail){return(log_p)?0.0:1.0;}else{return(log_p)?Number.NEGATIVE_INFINITY:0.0;}}else{return USE_PNORM();}}
+if(x<=1.0||x<alph){pearson=1;arg=alph*Math.log(x)-x-jstat.lgamma(alph+1.0);c=1.0;sum=1.0;a=alph;do{a+=1.0;c*=x/a;sum+=c;}while(c>jstat.DBL_EPSILON*sum);}else{pearson=0;arg=alph*Math.log(x)-x-jstat.lgamma(alph);a=1.-alph;b=a+x+1.;pn1=1.;pn2=x;pn3=x+1.;pn4=x*b;sum=pn3/pn4;for(n=1;;n++){a+=1.;b+=2.;an=a*n;pn5=b*pn3-an*pn1;pn6=b*pn4-an*pn2;if(Math.abs(pn6)>0.){osum=sum;sum=pn5/pn6;if(Math.abs(osum-sum)<=jstat.DBL_EPSILON*jstat.fmin2(1.0,sum))
+break;}
+pn1=pn3;pn2=pn4;pn3=pn5;pn4=pn6;if(Math.abs(pn5)>=xlarge){pn1/=xlarge;pn2/=xlarge;pn3/=xlarge;pn4/=xlarge;}}}
+arg+=Math.log(sum);lower_tail=(lower_tail==pearson);if(log_p&&lower_tail)
+return(arg);if(lower_tail){return Math.exp(arg);}else{if(log_p){return(arg>-Math.LN2)?Math.log(-jstat.expm1(arg)):jstat.log1p(-Math.exp(arg));}else{return-jstat.expm1(arg);}}},getShape:function(){return this._shape;},getScale:function(){return this._scale;},getMean:function(){return this._shape*this._scale;},getVariance:function(){return this._shape*Math.pow(this._scale,2);}});var BetaDistribution=ContinuousDistribution.extend({init:function(alpha,beta){this._super('Beta');this._alpha=parseFloat(alpha);this._beta=parseFloat(beta);this._string="Beta ("+this._alpha.toFixed(2)+", "+this._beta.toFixed(2)+")";},_pdf:function(x,give_log){if(give_log==null)give_log=false;var a=this._alpha;var b=this._beta;var lval;if(a<=0||b<=0){console.warn('Illegal arguments in _pdf');return Number.NaN;}
+if(x<0||x>1){return(give_log)?Number.NEGATIVE_INFINITY:0.0;}
+if(x==0){if(a>1){return(give_log)?Number.NEGATIVE_INFINITY:0.0;}
+if(a<1){return Number.POSITIVE_INFINITY;}
+return(give_log)?Math.log(b):b;}
+if(x==1){if(b>1){return(give_log)?Number.NEGATIVE_INFINITY:0.0;}
+if(b<1){return Number.POSITIVE_INFINITY;}
+return(give_log)?Math.log(a):a;}
+if(a<=2||b<=2){lval=(a-1)*Math.log(x)+(b-1)*jstat.log1p(-x)-jstat.logBeta(a,b);}else{lval=Math.log(a+b-1)+jstat.dbinom_raw(a-1,a+b-2,x,1-x,true);}
+return(give_log)?lval:Math.exp(lval);},_cdf:function(x,lower_tail,log_p){if(lower_tail==null)lower_tail=true;if(log_p==null)log_p=false;var pin=this._alpha;var qin=this._beta;if(pin<=0||qin<=0){console.warn('Invalid argument in _cdf');return Number.NaN;}
+if(x<=0){if(lower_tail){return(log_p)?Number.NEGATIVE_INFINITY:0.0;}else{return(log_p)?0.1:1.0;}}
+if(x>=1){if(lower_tail){return(log_p)?0.1:1.0;}else{return(log_p)?Number.NEGATIVE_INFINITY:0.0;}}
+return jstat.incompleteBeta(pin,qin,x);},getAlpha:function(){return this._alpha;},getBeta:function(){return this._beta;},getMean:function(){return this._alpha/(this._alpha+this._beta);},getVariance:function(){var ans=(this._alpha*this._beta)/(Math.pow(this._alpha+this._beta,2)*(this._alpha+this._beta+1));return ans;}});var StudentTDistribution=ContinuousDistribution.extend({init:function(degreesOfFreedom,mu){this._super('StudentT');this._dof=parseFloat(degreesOfFreedom);if(mu!=null){this._mu=parseFloat(mu);this._string="StudentT ("+this._dof.toFixed(2)+", "+this._mu.toFixed(2)+")";}else{this._mu=0.0;this._string="StudentT ("+this._dof.toFixed(2)+")";}},_pdf:function(x,give_log){if(give_log==null)give_log=false;if(this._mu==null){return this._dt(x,give_log);}else{var y=this._dnt(x,give_log);if(y>1){console.warn('x:'+x+', y: '+y);}
+return y;}},_cdf:function(x,lower_tail,give_log){if(lower_tail==null)lower_tail=true;if(give_log==null)give_log=false;if(this._mu==null){return this._pt(x,lower_tail,give_log);}else{return this._pnt(x,lower_tail,give_log);}},_dt:function(x,give_log){var t,u;var n=this._dof;if(n<=0){console.warn('Invalid parameters in _dt');return Number.NaN;}
+if(!jstat.isFinite(x)){return(give_log)?Number.NEGATIVE_INFINITY:0.0;}
+if(!jstat.isFinite(n)){var norm=new NormalDistribution(0.0,1.0);return norm.density(x,give_log);}
+t=-jstat.bd0(n/2.0,(n+1)/2.0)+jstat.stirlerr((n+1)/2.0)-jstat.stirlerr(n/2.0);if(x*x>0.2*n)
+u=Math.log(1+x*x/n)*n/2;else
+u=-jstat.bd0(n/2.0,(n+x*x)/2.0)+x*x/2.0;var p1=jstat.TWO_PI*(1+x*x/n);var p2=t-u;return(give_log)?-0.5*Math.log(p1)+p2:Math.exp(p2)/Math.sqrt(p1);},_dnt:function(x,give_log){if(give_log==null)give_log=false;var df=this._dof;var ncp=this._mu;var u;if(df<=0.0){console.warn("Illegal arguments _dnf");return Number.NaN;}
+if(ncp==0.0){return this._dt(x,give_log);}
+if(!jstat.isFinite(x)){if(give_log){return Number.NEGATIVE_INFINITY;}else{return 0.0;}}
+if(!isFinite(df)||df>1e8){var dist=new NormalDistribution(ncp,1.);return dist.density(x,give_log);}
+if(Math.abs(x)>Math.sqrt(df*jstat.DBL_EPSILON)){var newT=new StudentTDistribution(df+2,ncp);u=Math.log(df)-Math.log(Math.abs(x))+
+Math.log(Math.abs(newT._pnt(x*Math.sqrt((df+2)/df),true,false)-
+this._pnt(x,true,false)));}
+else{u=jstat.lgamma((df+1)/2)-jstat.lgamma(df/2)
+-.5*(Math.log(Math.PI)+Math.log(df)+ncp*ncp);}
+return(give_log?u:Math.exp(u));},_pt:function(x,lower_tail,log_p){if(lower_tail==null)lower_tail=true;if(log_p==null)log_p=false;var val,nx;var n=this._dof;var DT_0,DT_1;if(lower_tail){if(log_p){DT_0=Number.NEGATIVE_INFINITY;DT_1=1.;}else{DT_0=0.;DT_1=1.;}}else{if(log_p){DT_0=0.;DT_1=Number.NEGATIVE_INFINITY;}else{DT_0=1.;DT_1=0.;}}
+if(n<=0.0){console.warn("Invalid T distribution _pt");return Number.NaN;}
+var norm=new NormalDistribution(0,1);if(!jstat.isFinite(x)){return(x<0)?DT_0:DT_1;}
+if(!jstat.isFinite(n)){return norm._cdf(x,lower_tail,log_p);}
+if(n>4e5){val=1./(4.*n);return norm._cdf(x*(1.-val)/sqrt(1.+x*x*2.*val),lower_tail,log_p);}
+nx=1+(x/n)*x;if(nx>1e100){var lval;lval=-0.5*n*(2*Math.log(Math.abs(x))-Math.log(n))
+-jstat.logBeta(0.5*n,0.5)-Math.log(0.5*n);val=log_p?lval:Math.exp(lval);}else{if(n>x*x){var beta=new BetaDistribution(0.5,n/2.);return beta._cdf(x*x/(n+x*x),false,log_p);}else{beta=new BetaDistribution(n/2.,0.5);return beta._cdf(1./nx,true,log_p);}}
+if(x<=0.)
+lower_tail=!lower_tail;if(log_p){if(lower_tail)return jstat.log1p(-0.5*Math.exp(val));else return val-M_LN2;}
+else{val/=2.;if(lower_tail){return(0.5-val+0.5);}else{return val;}}},_pnt:function(t,lower_tail,log_p){var dof=this._dof;var ncp=this._mu;var DT_0,DT_1;if(lower_tail){if(log_p){DT_0=Number.NEGATIVE_INFINITY;DT_1=1.;}else{DT_0=0.;DT_1=1.;}}else{if(log_p){DT_0=0.;DT_1=Number.NEGATIVE_INFINITY;}else{DT_0=1.;DT_1=0.;}}
+var albeta,a,b,del,errbd,lambda,rxb,tt,x;var geven,godd,p,q,s,tnc,xeven,xodd;var it,negdel;var ITRMAX=1000;var ERRMAX=1.e-7;if(dof<=0.0){return Number.NaN;}else if(dof==0.0){return this._pt(t);}
+if(!jstat.isFinite(t)){return(t<0)?DT_0:DT_1;}
+if(t>=0.){negdel=false;tt=t;del=ncp;}else{if(ncp>=40&&(!log_p||!lower_tail)){return DT_0;}
+negdel=true;tt=-t;del=-ncp;}
+if(dof>4e5||del*del>2*Math.LN2*(-(jstat.DBL_MIN_EXP))){s=1./(4.*dof);var norm=new NormalDistribution(del,Math.sqrt(1.+tt*tt*2.*s));var result=norm._cdf(tt*(1.-s),lower_tail!=negdel,log_p);return result;}
+x=t*t;rxb=dof/(x+dof);x=x/(x+dof);if(x>0.){lambda=del*del;p=.5*Math.exp(-.5*lambda);if(p==0.){console.warn("underflow in _pnt");return DT_0;}
+q=jstat.SQRT_2dPI*p*del;s=.5-p;if(s<1e-7){s=-0.5*jstat.expm1(-0.5*lambda);}
+a=.5;b=.5*dof;rxb=Math.pow(rxb,b);albeta=jstat.LN_SQRT_PI+jstat.lgamma(b)-jstat.lgamma(.5+b);xodd=jstat.incompleteBeta(a,b,x);godd=2.*rxb*Math.exp(a*Math.log(x)-albeta);tnc=b*x;xeven=(tnc<jstat.DBL_EPSILON)?tnc:1.-rxb;geven=tnc*rxb;tnc=p*xodd+q*xeven;for(it=1;it<=ITRMAX;it++){a+=1.;xodd-=godd;xeven-=geven;godd*=x*(a+b-1.)/a;geven*=x*(a+b-.5)/(a+.5);p*=lambda/(2*it);q*=lambda/(2*it+1);tnc+=p*xodd+q*xeven;s-=p;if(s<-1.e-10){console.write("precision error _pnt");break;}
+if(s<=0&&it>1)break;errbd=2.*s*(xodd-godd);if(Math.abs(errbd)<ERRMAX)break;}
+if(it==ITRMAX){throw"Non-convergence _pnt";}}else{tnc=0.;}
+norm=new NormalDistribution(0,1);tnc+=norm._cdf(-del,true,false);lower_tail=lower_tail!=negdel;if(tnc>1-1e-10&&lower_tail){console.warn("precision error _pnt");}
+var res=jstat.fmin2(tnc,1.);if(lower_tail){if(log_p){return Math.log(res);}else{return res;}}else{if(log_p){return jstat.log1p(-(res));}else{return(0.5-(res)+0.5);}}},getDegreesOfFreedom:function(){return this._dof;},getNonCentralityParameter:function(){return this._mu;},getMean:function(){if(this._dof>1){var ans=(1/2)*Math.log(this._dof/2)+jstat.lgamma((this._dof-1)/2)-jstat.lgamma(this._dof/2)
+return Math.exp(ans)*this._mu;}else{return Number.NaN;}},getVariance:function(){if(this._dof>2){var ans=this._dof*(1+this._mu*this._mu)/(this._dof-2)-(((this._mu*this._mu*this._dof)/2)*Math.pow(Math.exp(jstat.lgamma((this._dof-1)/2)-jstat.lgamma(this._dof/2)),2));return ans;}else{return Number.NaN;}}});var Plot=Class.extend({init:function(id,options){this._container='#'+String(id);this._plots=[];this._flotObj=null;this._locked=false;if(options!=null){this._options=options;}else{this._options={};}},getContainer:function(){return this._container;},getGraph:function(){return this._flotObj;},setData:function(data){this._plots=data;},clear:function(){this._plots=[];},showLegend:function(){this._options.legend={show:true}
+this.render();},hideLegend:function(){this._options.legend={show:false}
+this.render();},render:function(){this._flotObj=null;this._flotObj=$.plot($(this._container),this._plots,this._options);}});var DistributionPlot=Plot.extend({init:function(id,distribution,range,options){this._super(id,options);this._showPDF=true;this._showCDF=false;this._pdfValues=[];this._cdfValues=[];this._maxY=1;this._plotType='line';this._fill=false;this._distribution=distribution;if(range!=null&&Range.validate(range)){this._range=range;}else{this._range=this._distribution.getRange();}
+if(this._distribution!=null){this._maxY=this._generateValues();}else{this._options.xaxis={min:range.getMinimum(),max:range.getMaximum()}
+this._options.yaxis={max:1}}
+this.render();},setHover:function(bool){if(bool){if(this._options.grid==null){this._options.grid={hoverable:true,mouseActiveRadius:25}}else{this._options.grid.hoverable=true,this._options.grid.mouseActiveRadius=25}
+function showTooltip(x,y,contents,color){$('<div id="jstat_tooltip">'+contents+'</div>').css({position:'absolute',display:'none',top:y+15,'font-size':'small',left:x+5,border:'1px solid '+color[1],color:color[2],padding:'5px','background-color':color[0],opacity:0.80}).appendTo("body").show();}
+var previousPoint=null;$(this._container).bind("plothover",function(event,pos,item){$("#x").text(pos.x.toFixed(2));$("#y").text(pos.y.toFixed(2));if(item){if(previousPoint!=item.datapoint){previousPoint=item.datapoint;$("#jstat_tooltip").remove();var x=jstat.toSigFig(item.datapoint[0],2),y=jstat.toSigFig(item.datapoint[1],2);var text=null;var color=item.series.color;if(item.series.label=='PDF'){text="P("+x+") = "+y;color=["#fee","#fdd","#C05F5F"];}else{text="F("+x+") = "+y;color=["#eef","#ddf","#4A4AC0"];}
+showTooltip(item.pageX,item.pageY,text,color);}}
+else{$("#jstat_tooltip").remove();previousPoint=null;}});$(this._container).bind("mouseleave",function(){if($('#jstat_tooltip').is(':visible')){$('#jstat_tooltip').remove();previousPoint=null;}});}else{if(this._options.grid==null){this._options.grid={hoverable:false}}else{this._options.grid.hoverable=false}
+$(this._container).unbind("plothover");}
+this.render();},setType:function(type){this._plotType=type;var lines={};var points={};if(this._plotType=='line'){lines.show=true;points.show=false;}else if(this._plotType=='points'){lines.show=false;points.show=true;}else if(this._plotType=='both'){lines.show=true;points.show=true;}
+if(this._options.series==null){this._options.series={lines:lines,points:points}}else{if(this._options.series.lines==null){this._options.series.lines=lines;}else{this._options.series.lines.show=lines.show;}
+if(this._options.series.points==null){this._options.series.points=points;}else{this._options.series.points.show=points.show;}}
+this.render();},setFill:function(bool){this._fill=bool;if(this._options.series==null){this._options.series={lines:{fill:bool}}}else{if(this._options.series.lines==null){this._options.series.lines={fill:bool}}else{this._options.series.lines.fill=bool;}}
+this.render();},clear:function(){this._super();this._distribution=null;this._pdfValues=[];this._cdfValues=[];this.render();},_generateValues:function(){this._cdfValues=[];this._pdfValues=[];var xs=this._range.getPoints();this._options.xaxis={min:xs[0],max:xs[xs.length-1]}
+var pdfs=this._distribution.density(this._range);var cdfs=this._distribution.cumulativeDensity(this._range);for(var i=0;i<xs.length;i++){if(pdfs[i]==Number.POSITIVE_INFINITY||pdfs[i]==Number.NEGATIVE_INFINITY){pdfs[i]=null;}
+if(cdfs[i]==Number.POSITIVE_INFINITY||cdfs[i]==Number.NEGATIVE_INFINITY){cdfs[i]=null;}
+this._pdfValues.push([xs[i],pdfs[i]]);this._cdfValues.push([xs[i],cdfs[i]]);}
+return jstat.max(pdfs);},showPDF:function(){this._showPDF=true;this.render();},hidePDF:function(){this._showPDF=false;this.render();},showCDF:function(){this._showCDF=true;this.render();},hideCDF:function(){this._showCDF=false;this.render();},setDistribution:function(distribution,range){this._distribution=distribution;if(range!=null){this._range=range;}else{this._range=distribution.getRange();}
+this._maxY=this._generateValues();this._options.yaxis={max:this._maxY*1.1}
+this.render();},getDistribution:function(){return this._distribution;},getRange:function(){return this._range;},setRange:function(range){this._range=range;this._generateValues();this.render();},render:function(){if(this._distribution!=null){if(this._showPDF&&this._showCDF){this.setData([{yaxis:1,data:this._pdfValues,color:'rgb(237,194,64)',clickable:false,hoverable:true,label:"PDF"},{yaxis:2,data:this._cdfValues,clickable:false,color:'rgb(175,216,248)',hoverable:true,label:"CDF"}]);this._options.yaxis={max:this._maxY*1.1}}else if(this._showPDF){this.setData([{data:this._pdfValues,hoverable:true,color:'rgb(237,194,64)',clickable:false,label:"PDF"}]);this._options.yaxis={max:this._maxY*1.1}}else if(this._showCDF){this.setData([{data:this._cdfValues,hoverable:true,color:'rgb(175,216,248)',clickable:false,label:"CDF"}]);this._options.yaxis={max:1.1}}}else{this.setData([]);}
+this._super();}});var DistributionFactory={};DistributionFactory.build=function(json){if(json.NormalDistribution){if(json.NormalDistribution.mean!=null&&json.NormalDistribution.standardDeviation!=null){return new NormalDistribution(json.NormalDistribution.mean[0],json.NormalDistribution.standardDeviation[0]);}else{throw"Malformed JSON provided to DistributionBuilder "+json;}}else if(json.LogNormalDistribution){if(json.LogNormalDistribution.location!=null&&json.LogNormalDistribution.scale!=null){return new LogNormalDistribution(json.LogNormalDistribution.location[0],json.LogNormalDistribution.scale[0]);}else{throw"Malformed JSON provided to DistributionBuilder "+json;}}else if(json.BetaDistribution){if(json.BetaDistribution.alpha!=null&&json.BetaDistribution.beta!=null){return new BetaDistribution(json.BetaDistribution.alpha[0],json.BetaDistribution.beta[0]);}else{throw"Malformed JSON provided to DistributionBuilder "+json;}}else if(json.GammaDistribution){if(json.GammaDistribution.shape!=null&&json.GammaDistribution.scale!=null){return new GammaDistribution(json.GammaDistribution.shape[0],json.GammaDistribution.scale[0]);}else{throw"Malformed JSON provided to DistributionBuilder "+json;}}else if(json.StudentTDistribution){if(json.StudentTDistribution.degreesOfFreedom!=null&&json.StudentTDistribution.nonCentralityParameter!=null){return new StudentTDistribution(json.StudentTDistribution.degreesOfFreedom[0],json.StudentTDistribution.nonCentralityParameter[0]);}else if(json.StudentTDistribution.degreesOfFreedom!=null){return new StudentTDistribution(json.StudentTDistribution.degreesOfFreedom[0]);}else{throw"Malformed JSON provided to DistributionBuilder "+json;}}else{throw"Malformed JSON provided to DistributionBuilder "+json;}}
\ No newline at end of file

From be418be6d223c3eb2d392c6933c9b34604309e9e Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Wed, 19 Dec 2012 18:29:57 +0200
Subject: [PATCH 063/107] Added default number of points to be width / 5.

---
 .../xmodule/xmodule/js/src/graphical_slider_tool/graph.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 39bc1bd9bf..49e5789025 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -303,10 +303,12 @@ define('Graph', ['logme'], function (logme) {
 
             tempNum = parseInt(config.plot.num_points, 10);
             if (isFinite(tempNum) === false) {
-                logme('ERROR: Expected config.plot.num_points to be a a valid integer. It is not.');
-                logme('config.plot.num_points = ', config.plot.num_points);
+                // logme('ERROR: Expected config.plot.num_points to be a a valid integer. It is not.');
+                // logme('config.plot.num_points = ', config.plot.num_points);
 
-                return false;
+                // return false;
+
+                tempNum = plotDiv.width() / 5.0;
             }
 
             if (

From 426f44e09a4a6607e5314a681da22f3d6f483d67 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Wed, 19 Dec 2012 19:10:55 +0200
Subject: [PATCH 064/107] Refined error messaging.

---
 .../js/src/graphical_slider_tool/el_output.js |  4 ++++
 .../js/src/graphical_slider_tool/graph.js     | 21 +++++++++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
index 98795b5d32..f79a93b822 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
@@ -74,6 +74,10 @@ define('ElOutput', ['logme'], function (logme) {
                         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).html('<div style="color: red;">' + 'Error message: "' + err.message + '".' + '</div>');
 
                 paramNames.pop();
 
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 49e5789025..ccb8411e90 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -279,6 +279,9 @@ define('Graph', ['logme'], function (logme) {
                 logme('ERROR: could not create a function from the string "' + config.plot.xrange.min + '" for xrange.min.');
                 logme('Error message: "' + err.message + '"');
 
+                $('#' + gstId).html('<div style="color: red;">' + 'ERROR IN XML: Could not create a function from the string "' + config.plot.xrange.min + '" for xrange.min.' + '</div>');
+                $('#' + gstId).append('<div style="color: red;">' + 'Error message: "' + err.message + '".' + '</div>');
+
                 return false;
             }
             allParamNames.pop();
@@ -290,6 +293,9 @@ define('Graph', ['logme'], function (logme) {
                 logme('ERROR: could not create a function from the string "' + config.plot.xrange.max + '" for xrange.max.');
                 logme('Error message: "' + err.message + '"');
 
+                $('#' + gstId).html('<div style="color: red;">' + 'ERROR IN XML: Could not create a function from the string "' + config.plot.xrange.max + '" for xrange.max.' + '</div>');
+                $('#' + gstId).append('<div style="color: red;">' + 'Error message: "' + err.message + '".' + '</div>');
+
                 return false;
             }
             allParamNames.pop();
@@ -463,6 +469,9 @@ define('Graph', ['logme'], function (logme) {
                     );
                     logme('Error message: "' + err.message + '"');
 
+                    $('#' + gstId).html('<div style="color: red;">' + 'ERROR IN XML: Could not create a function from the string "' + funcString + '".' + '</div>');
+                    $('#' + gstId).append('<div style="color: red;">' + 'Error message: "' + err.message + '".' + '</div>');
+
                     paramNames.pop();
                     paramNames.pop();
 
@@ -565,6 +574,9 @@ define('Graph', ['logme'], function (logme) {
                     logme('ERROR: Could not determine xrange start.');
                     logme('Error message: "' + err.message + '".');
 
+                    $('#' + gstId).html('<div style="color: red;">' + 'ERROR IN XML: Could not determine xrange start from defined function.' + '</div>');
+                    $('#' + gstId).append('<div style="color: red;">' + 'Error message: "' + err.message + '".' + '</div>');
+
                     return false;
                 }
                 try {
@@ -573,6 +585,9 @@ define('Graph', ['logme'], function (logme) {
                     logme('ERROR: Could not determine xrange end.');
                     logme('Error message: "' + err.message + '".');
 
+                    $('#' + gstId).html('<div style="color: red;">' + 'ERROR IN XML: Could not determine xrange end from defined function.' + '</div>');
+                    $('#' + gstId).append('<div style="color: red;">' + 'Error message: "' + err.message + '".' + '</div>');
+
                     return false;
                 }
                 step = (end - start) / (numPoints - 1);
@@ -592,6 +607,9 @@ define('Graph', ['logme'], function (logme) {
                         logme('ERROR: Could not generate data.');
                         logme('Error message: "' + err.message + '".');
 
+                        $('#' + gstId).html('<div style="color: red;">' + 'ERROR IN XML: Could not generate data from defined function.' + '</div>');
+                        $('#' + gstId).append('<div style="color: red;">' + 'Error message: "' + err.message + '".' + '</div>');
+
                         return false;
                     }
 
@@ -618,6 +636,9 @@ define('Graph', ['logme'], function (logme) {
                         logme('ERROR: Could not generate data.');
                         logme('Error message: "' + err.message + '".');
 
+                        $('#' + gstId).html('<div style="color: red;">' + 'ERROR IN XML: Could not generate data from function.' + '</div>');
+                        $('#' + gstId).append('<div style="color: red;">' + 'Error message: "' + err.message + '".' + '</div>');g
+
                         return false;
                     }
                     paramValues.pop();

From 6b9ace46146249345fa27852b1eb1d4a26bc5170 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Wed, 19 Dec 2012 19:12:10 +0200
Subject: [PATCH 065/107] Refined error messaging.

---
 .../xmodule/xmodule/js/src/graphical_slider_tool/el_output.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
index f79a93b822..901989b2af 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
@@ -77,7 +77,7 @@ define('ElOutput', ['logme'], function (logme) {
                 logme('Error message: "' + err.message + '".');
 
                 $('#' + gstId).html('<div style="color: red;">' + 'ERROR IN XML: Could not create a function from string "' + funcString + '".' + '</div>');
-                $('#' + gstId).html('<div style="color: red;">' + 'Error message: "' + err.message + '".' + '</div>');
+                $('#' + gstId).append('<div style="color: red;">' + 'Error message: "' + err.message + '".' + '</div>');
 
                 paramNames.pop();
 

From ad16c6c6f5f188defae0fc5b02546dc146daf114 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Wed, 19 Dec 2012 19:41:08 +0200
Subject: [PATCH 066/107] Minor fix.

---
 .../lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index ccb8411e90..e69fa0e5bd 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -9,8 +9,6 @@ define('Graph', ['logme'], function (logme) {
     function Graph(gstId, config, state) {
         var plotDiv, dataSeries, functions, xaxis, yaxis, numPoints, xrange;
 
-        logme(config);
-
         // We need plot configuration settings. Without them we can't continue.
         if ($.isPlainObject(config.plot) === false) {
             return;
@@ -431,8 +429,6 @@ define('Graph', ['logme'], function (logme) {
                 // will break.
                 funcString = $('<div>').html(funcString).text();
 
-                logme('graph: funcstr = "' + funcString + '"');
-
                 // Some defaults. If no options are set for the graph, we will
                 // make sure that at least a line is drawn for a function.
                 newFunctionObject = {

From ef1328bc6a1c44ac466318ecf880131e535537bf Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Wed, 19 Dec 2012 20:02:39 +0200
Subject: [PATCH 067/107] fix

---
 .../xmodule/xmodule/js/src/graphical_slider_tool/graph.js   | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index e69fa0e5bd..35c75c8adc 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -299,10 +299,10 @@ define('Graph', ['logme'], function (logme) {
             allParamNames.pop();
 
             if (typeof config.plot.num_points !== 'string') {
-                logme('ERROR: config.plot.num_points is not a string.');
-                logme('config.plot.num_points = ', config.plot.num_points);
+                // logme('ERROR: config.plot.num_points is not a string.');
+                // logme('config.plot.num_points = ', config.plot.num_points);
 
-                return false;
+                tempNum = plotDiv.width() / 5.0;
             }
 
             tempNum = parseInt(config.plot.num_points, 10);

From b0b4a90bd311c4e8dbabf4fc5bd1381be0076aa4 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Thu, 20 Dec 2012 11:12:37 +0200
Subject: [PATCH 068/107] added gst tests for export

---
 .../lib/xmodule/xmodule/tests/test_export.py  |  7 +++-
 .../test/data/graphic_slider_tool/README.md   |  2 +
 .../test/data/graphic_slider_tool/course.xml  |  1 +
 .../graphic_slider_tool/course/2012_Fall.xml  |  5 +++
 .../graphic_slider_tool/gst/sample_gst.xml    | 41 +++++++++++++++++++
 .../policies/2012_Fall.json                   | 14 +++++++
 .../graphic_slider_tool/roots/2012_Fall.xml   |  1 +
 common/test/data/self_assessment/course.xml   |  2 +-
 8 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 common/test/data/graphic_slider_tool/README.md
 create mode 120000 common/test/data/graphic_slider_tool/course.xml
 create mode 100644 common/test/data/graphic_slider_tool/course/2012_Fall.xml
 create mode 100644 common/test/data/graphic_slider_tool/gst/sample_gst.xml
 create mode 100644 common/test/data/graphic_slider_tool/policies/2012_Fall.json
 create mode 100644 common/test/data/graphic_slider_tool/roots/2012_Fall.xml
 mode change 120000 => 100644 common/test/data/self_assessment/course.xml

diff --git a/common/lib/xmodule/xmodule/tests/test_export.py b/common/lib/xmodule/xmodule/tests/test_export.py
index aeebc6da6b..d172409c18 100644
--- a/common/lib/xmodule/xmodule/tests/test_export.py
+++ b/common/lib/xmodule/xmodule/tests/test_export.py
@@ -41,7 +41,7 @@ def strip_filenames(descriptor):
 class RoundTripTestCase(unittest.TestCase):
     '''Check that our test courses roundtrip properly'''
     def check_export_roundtrip(self, data_dir, course_dir):
-
+        # import ipdb; ipdb.set_trace()
         root_dir = path(mkdtemp())
         print "Copying test course to temp dir {0}".format(root_dir)
 
@@ -117,3 +117,8 @@ 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
+        # import ipdb; ipdb.set_trace()
+        self.check_export_roundtrip(DATA_DIR,"graphic_slider_tool")
diff --git a/common/test/data/graphic_slider_tool/README.md b/common/test/data/graphic_slider_tool/README.md
new file mode 100644
index 0000000000..ec4f121ad8
--- /dev/null
+++ b/common/test/data/graphic_slider_tool/README.md
@@ -0,0 +1,2 @@
+This is a very very simple course, useful for debugging graphical slider tool
+code.
diff --git a/common/test/data/graphic_slider_tool/course.xml b/common/test/data/graphic_slider_tool/course.xml
new file mode 120000
index 0000000000..49041310f6
--- /dev/null
+++ b/common/test/data/graphic_slider_tool/course.xml
@@ -0,0 +1 @@
+roots/2012_Fall.xml
\ No newline at end of file
diff --git a/common/test/data/graphic_slider_tool/course/2012_Fall.xml b/common/test/data/graphic_slider_tool/course/2012_Fall.xml
new file mode 100644
index 0000000000..a51e027c2e
--- /dev/null
+++ b/common/test/data/graphic_slider_tool/course/2012_Fall.xml
@@ -0,0 +1,5 @@
+<course>
+  <chapter url_name="Overview">
+    <gst url_name="sample_gst"/>
+  </chapter>
+</course>
diff --git a/common/test/data/graphic_slider_tool/gst/sample_gst.xml b/common/test/data/graphic_slider_tool/gst/sample_gst.xml
new file mode 100644
index 0000000000..21b6483efe
--- /dev/null
+++ b/common/test/data/graphic_slider_tool/gst/sample_gst.xml
@@ -0,0 +1,41 @@
+<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">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>
+</vertical>
diff --git a/common/test/data/graphic_slider_tool/policies/2012_Fall.json b/common/test/data/graphic_slider_tool/policies/2012_Fall.json
new file mode 100644
index 0000000000..640c1a9114
--- /dev/null
+++ b/common/test/data/graphic_slider_tool/policies/2012_Fall.json
@@ -0,0 +1,14 @@
+{
+    "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"
+    },
+    "gst/sample_gst": {
+        "display_name": "Sample GST",
+    },
+}
diff --git a/common/test/data/graphic_slider_tool/roots/2012_Fall.xml b/common/test/data/graphic_slider_tool/roots/2012_Fall.xml
new file mode 100644
index 0000000000..1dc86c4afc
--- /dev/null
+++ b/common/test/data/graphic_slider_tool/roots/2012_Fall.xml
@@ -0,0 +1 @@
+<course org="edX" course="gst_test" url_name="2012_Fall"/>
diff --git a/common/test/data/self_assessment/course.xml b/common/test/data/self_assessment/course.xml
deleted file mode 120000
index 49041310f6..0000000000
--- a/common/test/data/self_assessment/course.xml
+++ /dev/null
@@ -1 +0,0 @@
-roots/2012_Fall.xml
\ No newline at end of file
diff --git a/common/test/data/self_assessment/course.xml b/common/test/data/self_assessment/course.xml
new file mode 100644
index 0000000000..ea7d5c420d
--- /dev/null
+++ b/common/test/data/self_assessment/course.xml
@@ -0,0 +1 @@
+<course org="edX" course="sa_test" url_name="2012_Fall"/>

From 100da2aef99a2f9c465b78b9c8cc72a67ea869ba Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Thu, 20 Dec 2012 11:47:20 +0200
Subject: [PATCH 069/107] added gst tests for import

---
 common/lib/xmodule/xmodule/tests/test_import.py | 17 +++++++++++++++++
 .../graphic_slider_tool/course/2012_Fall.xml    |  2 +-
 .../sample_gst.xml                              | 17 +++--------------
 .../graphic_slider_tool/policies/2012_Fall.json |  2 +-
 4 files changed, 22 insertions(+), 16 deletions(-)
 rename common/test/data/graphic_slider_tool/{gst => graphical_slider_tool}/sample_gst.xml (55%)

diff --git a/common/lib/xmodule/xmodule/tests/test_import.py b/common/lib/xmodule/xmodule/tests/test_import.py
index 77532959d7..3f2c005268 100644
--- a/common/lib/xmodule/xmodule/tests/test_import.py
+++ b/common/lib/xmodule/xmodule/tests/test_import.py
@@ -349,6 +349,23 @@ class ImportTestCase(unittest.TestCase):
 
         sa_id = "edX/sa_test/2012_Fall"
         location = Location(["i4x", "edX", "sa_test", "selfassessment", "SampleQuestion"])
+        # import ipdb; ipdb.set_trace()
         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)
diff --git a/common/test/data/graphic_slider_tool/course/2012_Fall.xml b/common/test/data/graphic_slider_tool/course/2012_Fall.xml
index a51e027c2e..2983c85dd5 100644
--- a/common/test/data/graphic_slider_tool/course/2012_Fall.xml
+++ b/common/test/data/graphic_slider_tool/course/2012_Fall.xml
@@ -1,5 +1,5 @@
 <course>
   <chapter url_name="Overview">
-    <gst url_name="sample_gst"/>
+    <graphical_slider_tool url_name="sample_gst"/>
   </chapter>
 </course>
diff --git a/common/test/data/graphic_slider_tool/gst/sample_gst.xml b/common/test/data/graphic_slider_tool/graphical_slider_tool/sample_gst.xml
similarity index 55%
rename from common/test/data/graphic_slider_tool/gst/sample_gst.xml
rename to common/test/data/graphic_slider_tool/graphical_slider_tool/sample_gst.xml
index 21b6483efe..bd0360fde8 100644
--- a/common/test/data/graphic_slider_tool/gst/sample_gst.xml
+++ b/common/test/data/graphic_slider_tool/graphical_slider_tool/sample_gst.xml
@@ -1,18 +1,7 @@
-<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;"/>
+<slider var='a' style="width:400px;float:left;"/><plot style="margin-top:15px;margin-bottom:15px;"/>
       </render>
       <configuration>
         <parameters>
@@ -38,4 +27,4 @@
         </plot>
       </configuration>
     </graphical_slider_tool>
-</vertical>
+
diff --git a/common/test/data/graphic_slider_tool/policies/2012_Fall.json b/common/test/data/graphic_slider_tool/policies/2012_Fall.json
index 640c1a9114..6958f8432c 100644
--- a/common/test/data/graphic_slider_tool/policies/2012_Fall.json
+++ b/common/test/data/graphic_slider_tool/policies/2012_Fall.json
@@ -8,7 +8,7 @@
     "chapter/Overview": {
         "display_name": "Overview"
     },
-    "gst/sample_gst": {
+    "graphical_slider_tool/sample_gst": {
         "display_name": "Sample GST",
     },
 }

From 9bf1a6e27186381325feb5d138130377f09de164 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Thu, 20 Dec 2012 13:25:10 +0200
Subject: [PATCH 070/107] add docstring and test for gst

---
 common/lib/xmodule/xmodule/tests/test_export.py | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/common/lib/xmodule/xmodule/tests/test_export.py b/common/lib/xmodule/xmodule/tests/test_export.py
index d172409c18..7605155a6c 100644
--- a/common/lib/xmodule/xmodule/tests/test_export.py
+++ b/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):
-        # import ipdb; ipdb.set_trace()
         root_dir = path(mkdtemp())
         print "Copying test course to temp dir {0}".format(root_dir)
 
@@ -120,5 +123,4 @@ class RoundTripTestCase(unittest.TestCase):
 
     def test_graphicslidertool_roundtrip(self):
         #Test graphicslidertool xmodule to see if it exports correctly
-        # import ipdb; ipdb.set_trace()
         self.check_export_roundtrip(DATA_DIR,"graphic_slider_tool")

From d4b8a7bb5466c792d0e42e0deebd3168df5c95ba Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Thu, 20 Dec 2012 13:25:24 +0200
Subject: [PATCH 071/107] added export function

---
 common/lib/xmodule/xmodule/gst_module.py | 73 ++++++++++++------------
 1 file changed, 38 insertions(+), 35 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 7e61264929..34ecd66872 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -25,6 +25,8 @@ class GraphicalSliderToolModule(XModule):
 
     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'),
@@ -44,32 +46,40 @@ class GraphicalSliderToolModule(XModule):
     def __init__(self, system, location, definition, descriptor, instance_state=None,
                  shared_state=None, **kwargs):
         """
-        For XML file format please look at documentation.
-
+        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):
-        self.get_configuration()
+        """ Renders parameters to template. """
+
+        # these both will be used in class methods
         self.html_id = self.location.html_id()
         self.html_class = self.location.category
-        gst_html = self.substitute_controls(self.definition['render'].strip())
-        # import ipdb; ipdb.set_trace()
         params = {
-                  'gst_html': gst_html,
+                  'gst_html': self.substitute_controls(self.definition['render']),
                   'element_id': self.html_id,
                   'element_class': self.html_class,
-                  'configuration_json': self.configuration_json
+                  'configuration_json': self.build_configuration_json()
                   }
         self.content = (self.system.render_template(
                         'graphical_slider_tool.html', params))
-        # import ipdb; ipdb.set_trace()
         return self.content
 
     def substitute_controls(self, html_string):
-        """ Substitue control element via their divs.
-        Simple variant: slider and plot controls are not inside any tag.
+        """ Substitutes control elements via their divs.
+        TODO: change regexps to html parsing via beautiful soup  or something
+        similar (aim : simpler support).
+
+        Args:
+            html_string: rendered html string with controls as xml tags
+            (<slider var="a"/>)
+
+        Returns:
+            html_string with control tags replaced by proper divs
+            (<slider var="a"/> -> <div class="....slider" > </div>)
         """
         #substitute plot
         plot_div = '<div class="{element_class}_plot" id="{element_id}_plot" \
@@ -98,8 +108,7 @@ class GraphicalSliderToolModule(XModule):
             variables = [x['@var'] for x in variables]
         else:
             return html_string
-        # if variables[0] == 'v':
-        #     import ipdb; ipdb.set_trace()
+
         #substitute sliders
         slider_div = '<div class="{element_class}_slider" \
                                    id="{element_id}_slider_{var}" \
@@ -143,11 +152,9 @@ class GraphicalSliderToolModule(XModule):
                 # different id
             instances = re.findall(r'<textbox\s+(?=[^<>]*var\=[\"\']' + var + '[\"\'])' \
                           + r'[^<>]*/>', html_string, flags=re.UNICODE | re.DOTALL)
-            # import ipdb; ipdb.set_trace()
             for input_def in instances:  # for multiple inputs per var
                 input_index += 1
                 # extract var and readonly before style!
-                # import ipdb; ipdb.set_trace()
                 var_substring = re.search(r'(var\=[\"\']' + var + r'[\"\'])',
                                           input_def).group()
                 input_def = input_def.replace(var_substring, '')
@@ -164,28 +171,28 @@ class GraphicalSliderToolModule(XModule):
                     style = style.groups()[0]
                 else:
                     style = ''
-                # import ipdb; ipdb.set_trace()
                 replacement = input_el.format(element_class=self.html_class,
                         element_id=self.html_id,
                         var=var, readonly=readonly, style=style,
                         input_index=input_index)
-                # import ipdb; ipdb.set_trace()
                 html_string = re.sub(r'<textbox\s+(?=[^<>]*var\=[\"\'](' + \
                                      var + ')[\"\'])' + r'[^<>]*/>',
                 replacement, html_string, count=1, flags=re.UNICODE | re.DOTALL)
         return html_string
 
-    def get_configuration(self):
-        """Parse self.definition['configuration'] and transfer it to javascript
-        via json.
+    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
-        # import ipdb; ipdb.set_trace()
-        self.configuration_json = json.dumps(
-                xmltodict.parse('<root class="' + self.location.category + '">' +
-                stringify_children(self.definition['configuration'])
-                             + '</root>'))
-        return self.configuration_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):
@@ -220,25 +227,21 @@ class GraphicalSliderToolDescriptor(MakoModuleDescriptor, XmlDescriptor):
         def parse(k):
             """Assumes that xml_object has child k"""
             return stringify_children(xml_object.xpath(k)[0])
-
         return {
                     'render': parse('render'),
-                    'configuration': xml_object.xpath('configuration')[0]
+                    'configuration': parse('configuration')
                 }
 
     def definition_to_xml(self, resource_fs):
-        '''Return an xml element representing this definition.
-        Not implemented'''
-        # import ipdb; ipdb.set_trace()
-        xml_object = etree.Element('gst')
+        '''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_str = child.export_to_xml(resource_fs)
+            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 self.get_children():
+        for child in ['render', 'configuration']:
             add_child(child)
 
         return xml_object

From efea4f53e0ad08c5b0fe72c4cf500774d7aa1b69 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Thu, 20 Dec 2012 13:30:34 +0200
Subject: [PATCH 072/107] bugfix

---
 common/lib/xmodule/xmodule/gst_module.py | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 34ecd66872..134d2b1ffa 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -55,14 +55,15 @@ class GraphicalSliderToolModule(XModule):
     def get_html(self):
         """ Renders parameters to template. """
 
-        # these both will be used in class methods
+        # 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.build_configuration_json()
+                  'configuration_json': self.configuration_json
                   }
         self.content = (self.system.render_template(
                         'graphical_slider_tool.html', params))

From b56d6374f3d85774be4f0339a3fc1ff2a742a834 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Fri, 21 Dec 2012 16:21:19 +0200
Subject: [PATCH 073/107] Fix. Now when user enters a value for a parameter
 greater than the max, it will be reset to the max. The ame for the min.

---
 .../js/src/graphical_slider_tool/state.js     | 31 +++----------------
 1 file changed, 4 insertions(+), 27 deletions(-)

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 04c0b0a60e..47653a8ae9 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
@@ -199,33 +199,10 @@ define('State', ['logme'], function (logme) {
                 return;
             }
 
-            // If the new parameter's value is valid, but lies outised of
-            // the parameter's allowed range, we will disregard it.
-            //
-            // We will also change the element's value back to the current
-            // parameter's value.
-            if (
-                (paramValueNum < parameters[paramName].min) ||
-                (paramValueNum > parameters[paramName].max)
-            ) {
-                logme('ERROR: New parameter\'s value lies outside of the allowed range.');
-                logme('Range is: min = ' + parameters[paramName].min + ', max = ' + parameters[paramName].max);
-                logme('paramValueNum = ' + paramValueNum);
-
-                // If element is a slider, the value must be set in a special
-                // way.
-                if (slider === true) {
-                    logme('Changing back the slider.');
-                    element.slider('value', parameters[paramName].value);
-                }
-
-                // If element is a text input, standard jQuery val() function
-                // will work.
-                else {
-                    element.val(parameters[paramName].value);
-                }
-
-                return;
+            if (paramValueNum < parameters[paramName].min) {
+                paramValueNum = parameters[paramName].min;
+            } else if (paramValueNum > parameters[paramName].max) {
+                paramValueNum = parameters[paramName].max;
             }
 
             parameters[paramName].value = paramValueNum;

From fd43971602600f1447a1f40af802d7386ff7cac8 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Mon, 24 Dec 2012 15:36:26 +0200
Subject: [PATCH 074/107] __name__ in logger

---
 common/lib/xmodule/xmodule/gst_module.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 134d2b1ffa..d33ecebc7e 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -16,7 +16,7 @@ from xmodule.stringify import stringify_children
 from pkg_resources import resource_string
 
 
-log = logging.getLogger("mitx.common.lib.gst_module")
+log = logging.getLogger(__name__)
 
 
 class GraphicalSliderToolModule(XModule):

From 74be3d0ba99855560025d891915e1fe55da44f6a Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Mon, 24 Dec 2012 15:36:53 +0200
Subject: [PATCH 075/107] removed outer parents

---
 common/lib/xmodule/xmodule/gst_module.py | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index d33ecebc7e..be90e5f33b 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -65,8 +65,8 @@ class GraphicalSliderToolModule(XModule):
                   'element_class': self.html_class,
                   'configuration_json': self.configuration_json
                   }
-        self.content = (self.system.render_template(
-                        'graphical_slider_tool.html', params))
+        self.content = self.system.render_template(
+                        'graphical_slider_tool.html', params)
         return self.content
 
     def substitute_controls(self, html_string):

From ca4b625e6c5e6d35a04acec7b12fdb3d4b768b43 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Mon, 24 Dec 2012 15:38:36 +0200
Subject: [PATCH 076/107] removed forgotten ipdb line

---
 common/lib/xmodule/xmodule/tests/test_import.py | 1 -
 1 file changed, 1 deletion(-)

diff --git a/common/lib/xmodule/xmodule/tests/test_import.py b/common/lib/xmodule/xmodule/tests/test_import.py
index 3f2c005268..90ec112f19 100644
--- a/common/lib/xmodule/xmodule/tests/test_import.py
+++ b/common/lib/xmodule/xmodule/tests/test_import.py
@@ -349,7 +349,6 @@ class ImportTestCase(unittest.TestCase):
 
         sa_id = "edX/sa_test/2012_Fall"
         location = Location(["i4x", "edX", "sa_test", "selfassessment", "SampleQuestion"])
-        # import ipdb; ipdb.set_trace()
         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')

From 48bf9049445cba5038d1e0bf42776cdbe3678899 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Tue, 25 Dec 2012 14:20:33 +0200
Subject: [PATCH 077/107] converted regexp to lxml

---
 common/lib/xmodule/xmodule/gst_module.py | 114 ++++++-----------------
 1 file changed, 30 insertions(+), 84 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index be90e5f33b..02040274c3 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -6,6 +6,7 @@ understand functional dependencies.
 import json
 import logging
 from lxml import etree
+from lxml import html
 import xmltodict
 import re
 
@@ -82,104 +83,49 @@ class GraphicalSliderToolModule(XModule):
             html_string with control tags replaced by proper divs
             (<slider var="a"/> -> <div class="....slider" > </div>)
         """
-        #substitute plot
+
+        xml = html.fromstring(html_string)
+
+        #substitute plot, if presented
         plot_div = '<div class="{element_class}_plot" id="{element_id}_plot" \
                     style="{style}"></div>'
-        # extract css style from plot
-        plot_def = re.search(r'<plot[^<>]*/>', html_string)
-        if plot_def:
-            plot_def = plot_def.group()
-            style = re.search(r'(?=.*style\=[\"\'](.*)[\"\'])', plot_def,
-                flags=re.UNICODE | re.DOTALL)
-            if style:
-                style = style.groups()[0]
-            else:  # no style parameter
-                style = ''
-            replacement = plot_div.format(element_class=self.html_class,
-                                          element_id=self.html_id,
-                                                style=style)
-            html_string = re.sub(r'<plot[^<>]*/>', replacement, html_string,
-                            flags=re.UNICODE)
-
-        # get variables
-        if json.loads(self.configuration_json)['root'].get('parameters'):
-            variables = json.loads(self.configuration_json)['root']['parameters']['param']
-            if type(variables) == dict:
-                variables = [variables]
-            variables = [x['@var'] for x in variables]
-        else:
-            return html_string
+        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>'
-        for var in variables:
-            # find <slider var='var' ... >
-            instances = re.findall(r'<slider\s+(?=[^<>]*var\=[\"\']' + var + '[\"\'])' \
-                          + r'[^<>]*/>', html_string, flags=re.UNICODE | re.DOTALL)
-            if instances:  # if presented, only one slider per var
-                slider_def = instances[0]  # get <slider var='var' ... > string
-                # extract var for proper style extraction further
-                var_substring = re.search(r'(var\=[\"\']' + var + r'[\"\'])',
-                                          slider_def).group()
-                slider_def = slider_def.replace(var_substring, '')
-                # get style
-                style = re.search(r'(?=[^<>]*style\=[\"\'](.*)[\"\'])', slider_def,
-                    flags=re.UNICODE | re.DOTALL)
-                if style:
-                    style = style.groups()[0]
-                else:  # no style parameter
-                    style = ''
-                # substitute parameters to slider div
-                replacement = slider_div.format(element_class=self.html_class,
+        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=var, style=style)
-                # subsitute <slider var='var' ... > in html_srting to proper
-                # html div element
-                html_string = re.sub(r'<slider\s+(?=[^<>]*var\=[\"\'](' + \
-                    var + ')[\"\'])' + r'[^<>]*/>',
-                replacement, html_string, flags=re.UNICODE | re.DOTALL)
+                                            var=slider_el.get('var', ""),
+                                            style=slider_el.get('style', ""))))
 
-        # substitute inputs if we have them
-        input_el = '<input class="{element_class}_input" \
+        # substitute inputs aka textboxes
+        input_div = '<input class="{element_class}_input" \
                                   id="{element_id}_input_{var}_{input_index}" \
                                    data-var="{var}" style="{style}" \
                                    data-el_readonly="{readonly}"/>'
+        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', ""),
+                                        readonly=input_el.get('readonly', ''),
+                                        style=input_el.get('style', ""),
+                                        input_index=input_index)))
 
-        for var in variables:
-            input_index = 0  # make multiple inputs for same variable have
-                # different id
-            instances = re.findall(r'<textbox\s+(?=[^<>]*var\=[\"\']' + var + '[\"\'])' \
-                          + r'[^<>]*/>', html_string, flags=re.UNICODE | re.DOTALL)
-            for input_def in instances:  # for multiple inputs per var
-                input_index += 1
-                # extract var and readonly before style!
-                var_substring = re.search(r'(var\=[\"\']' + var + r'[\"\'])',
-                                          input_def).group()
-                input_def = input_def.replace(var_substring, '')
-                readonly = re.search(r'(?=[^<>]*(readonly\=[\"\'](\w+)[\"\']))', 
-                    input_def, flags=re.UNICODE | re.DOTALL)
-                if readonly:
-                    input_def = input_def.replace(readonly.groups()[0], '')
-                    readonly = readonly.groups()[1]
-                else:
-                    readonly = ''
-                style = re.search(r'(?=[^<>]*style\=[\"\'](.*)[\"\'])', input_def,
-                    flags=re.UNICODE | re.DOTALL)
-                if style:
-                    style = style.groups()[0]
-                else:
-                    style = ''
-                replacement = input_el.format(element_class=self.html_class,
-                        element_id=self.html_id,
-                        var=var, readonly=readonly, style=style,
-                        input_index=input_index)
-                html_string = re.sub(r'<textbox\s+(?=[^<>]*var\=[\"\'](' + \
-                                     var + ')[\"\'])' + r'[^<>]*/>',
-                replacement, html_string, count=1, flags=re.UNICODE | re.DOTALL)
-        return html_string
+        return html.tostring(xml)
 
     def build_configuration_json(self):
         """Creates json element from xml element (with aim to transfer later

From f635d19ba6b030f35a92f10f7e561c83a34ba083 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Tue, 25 Dec 2012 17:49:01 +0200
Subject: [PATCH 078/107] sphinx docs of XML format of GST

---
 docs/source/graphical_slider_tool.rst         | 352 ++++++++++++++++++
 docs/source/gst_example_dynamic_range.xml     |  41 ++
 .../gst_example_html_element_output.xml       |  40 ++
 .../source/gst_example_with_documentation.xml |  88 +++++
 docs/source/index.rst                         |   2 +-
 docs/source/xml_formats.rst                   |   8 +
 6 files changed, 530 insertions(+), 1 deletion(-)
 create mode 100644 docs/source/graphical_slider_tool.rst
 create mode 100644 docs/source/gst_example_dynamic_range.xml
 create mode 100644 docs/source/gst_example_html_element_output.xml
 create mode 100644 docs/source/gst_example_with_documentation.xml
 create mode 100644 docs/source/xml_formats.rst

diff --git a/docs/source/graphical_slider_tool.rst b/docs/source/graphical_slider_tool.rst
new file mode 100644
index 0000000000..07d5f058c1
--- /dev/null
+++ b/docs/source/graphical_slider_tool.rst
@@ -0,0 +1,352 @@
+*********************************************
+Xml format of graphical slider tool [xmodule]
+*********************************************
+
+.. module:: xml_format_gst
+
+Format description
+==================
+
+Graphical slider tool (GST) main tag is::
+
+    <graphical_slider_tool> BODY </graphical_slider_tool>
+
+``graphical_slider_tool`` tag must have two children tags: ``render``
+and ``configuration``.
+
+Render tag
+----------
+
+Render tag can contain usual html tags mixed with some GST specific tags::
+
+    <slider/> - represents jQuery slider
+    <textbox/> - represents input
+    <plot/> - represents Flot plot
+
+Also GST will track all elements inside ``<render></render>`` where ``id``
+attribute is set.
+
+The contents of the <render> section will be shown to the user after
+all occurrences of::
+
+    <slider var="{parameter name}" [style="{CSS statements}"]/>
+    <input var="parameter name" [style="{CSS statements}"] [readonly="true" | readonly="false"]/>
+    <plot [style="{CSS statements}"]/>
+
+have been converted to actual sliders, text inputs, and a plot graph.
+Everything in square brackets is optional.
+
+``{parameter name}`` specifies the parameter to which the slider or text
+input will be attached to.
+
+There is a one-to-one relationship between a slider and a parameter.
+I.e. for one parameter you can put only one ``<slider ...<`` in the
+``<render>`` section. However, you don't have to specify a slider - they
+are optional.
+
+There is a many-to-one relationship between text inputs and a
+parameter. I.e. for one parameter you can put many '<input ...<' in
+the ``<render>`` section. However, you don't have to specify a text
+input - they are optional.
+
+You can put only one ``<plot ...<`` in the ``<render>`` section. It is not
+required.
+
+NOTE: MathJax, independently of this module, will render all TeX code
+within the ``<render>`` section into nice mathematical formulas. Just
+remember to wrap it in one of::
+
+    \(  and  \)  -  for inline formulas (formulas surrounded by
+                  standard text)
+    \[  and  \]  -  if you want the formula to be a separate line
+
+Slider tag
+..........
+
+Slider tag must have ``var`` attribute and optional ``style`` attribute::
+
+    <slider var='a' style="width:400px;float:left;"/>
+
+After processing slider tags will be replaced by jQuery UI sliders with applied
+``style`` attribute.
+
+
+``Var`` attribute must correspond to parameter in one of ``function`` tags in
+``functions`` tag. By moving slider, value of parameter ``a`` will change, and so
+result of function, that depends on parameter ``a``, will change.
+
+
+Textbox tag
+...........
+
+
+Texbox tag must have ``var`` attribute and optional ``style`` and ``readonly``
+attributes::
+
+    <textbox var="b" readonly="true" style="width:50px; float:left; margin-left:10px;"/>
+
+After processing tetbox tags will be replaced by html inputs with applied
+``style`` attribute. If ``readonly`` is set to ``true`` input will be
+not-editable, default is ``false``.
+
+``Var`` attribute must correspond to parameter in one of ``function`` tags in
+``functions`` tag. By entering value in input, value of parameter ``b`` will change, and so
+result of function, that depends on parameter ``b``, will change.
+
+Plot tag
+........
+
+Plot tag may have optional ``style`` attribute::
+
+    <plot style="width:50px; float:left; margin-left:10px;"/>
+
+After processing plot tags will be replaced by Flot plot with applied
+``style`` attribute.
+
+HTML tags with id
+.................
+
+Any html tag with id, i.e. ``<span id="answer_span_1">`` will be counted as
+place where result of function can be rendered. To render function result to
+element, element id must be included in ``function`` tag as ``el_id`` attribute
+and ``output`` value must be ``"element"``::
+
+    <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>
+
+
+
+Configuration tag
+-----------------
+
+The configuration tag contain sparameter settings, graph
+settings, and function definitions which are to be plotted on the
+graph and that use specified parameters.
+
+Configuration tag contains two mandatory tag ``functions`` and ``parameters`` and
+may contain another ``plot`` tag.
+
+Parameters tag
+..............
+
+``Parameters`` tag contains ``parameter`` tags. Each ``parameter`` tag must have
+``var``, ``max``, ``min``, ``step`` and ``initial`` attributes::
+
+        <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>
+
+``Var`` attribute links min, max, step and initial values to parameter name.
+``Min`` attribute is minimal value that parameter can take. Slider and input
+values can not go below it.
+
+``Max`` attribute is maximal value that parameter can take. Slider and input
+values can not go over it.
+
+``Step`` attribute is value of slider step. When a slider increase or decreases
+the specified parameter, it will do so by the amount specified with 'step'
+
+``Initial`` attribute is the initial value that the specified parameter should be
+set to.
+
+The parameter's name is specified by the 'var' property. All occurrences
+of sliders and/or text inputs that specify a 'var' property, will be
+connected to this parameter - i.e. they will reflect the current
+value of the parameter and will be updated when the parameter
+changes.
+
+
+If at lest one of these attributes is not set, then the parameter
+will not be used, slider's and/or text input elements that specify
+this parameter will not be activated, and the specified functions
+which use this parameter will return a non valid value. This means
+that neglecting to specify at least one of the attributes for some
+parameter will have the result of the whole GST instance not working
+properly.
+
+
+Functions tag
+.............
+
+
+For the GST to do something, you must defined at least one
+function, which can use any of the specified parameter values. The
+function expects to take the ``x`` value, do some calculations, and
+return the ``y`` value. I.e. this is a 2D plot in Cartesian
+coordinates.
+
+Each function must be defined inside ``function`` tag in  ``functions`` tag::
+
+    <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>
+
+The parameter names (along with their values, as provided from text
+inputs and/or sliders), will be available inside all defined
+functions. A defined function body string will be parsed internally
+by the browser's JavaScript engine and converted to a true JS
+function.
+
+The function's parameter list will automatically be created and
+populated, and will include the ``x``, and all of the specified
+parameter values (from sliders and text inputs). This means that
+each of the defined functions will have access to all of the
+parameter values. You don't have to use them, but they will be
+there.
+
+Examples::
+
+    <function>
+        return x;
+    </function>
+
+    <function dot="true" label="\(y_2\)">
+        return (x + a) * Math.sin(x * b);
+    </function>
+
+    <function color="green">
+        function helperFunc(c1) {
+            return c1 * c1 - a;
+        }
+        return helperFunc(x + 10 * a * b) + Math.sin(a - x);
+    </function>
+
+Required parameters::
+
+    function body:
+
+    A string composing a normal JavaScript function
+    except that there is no function declaration
+    (along with parameters), and no closing bracket.
+
+    So if you normally would have written your
+    JavaScript function like this:
+
+        function myFunc(x, a, b) {
+            return x * a + b;
+        }
+
+    here you must specify just the function body
+    (everything that goes between '{' and '}'). So,
+    you would specify the above function like so (the
+    bare-bone minimum):
+
+        <function>
+            return x * a + b;
+        </function>
+
+Optional parameters::
+
+
+    color:  Color name (red, green, etc.) or in the form of
+            '#FFFF00'. If not specified, a default color (different
+            one for each function) will be given by Flot;
+    line:   A string - 'true' or 'false'. Should the data points be
+            connected by a line on the graph? Default is 'true'.
+    dot:    A string - 'true' or 'false'. Should points be shown for
+            each data point on the graph? Default is 'false'.
+    label:  A string. If provided, will be shown in the legend, along
+            with the color that was used to plot the function.
+    output: "element" or "plot". If not defined, function will be plotted.
+            If defined, function will not be plotted, but rendered to element
+            with id set in 'el_id' attribute.
+    el_id:  Id of html element, defined in 'render' section. Value of
+            function will be rendered to content of this element.
+
+With ``output`` and ``el_id`` set together you can update html elements with
+function value, also function will not be plotted.
+
+[note on MathJax and labels]:
+
+It is possible to define a label in standard TeX notation. The JS
+library MathJax will work on these labels also because they are
+inserted on top of the plot as standard HTML (text within a DIV).
+
+Plot tag
+........
+
+``Plot`` tag inside ``configuration`` tag defines settings for plot output.
+
+Required parameters::
+
+    xrange: 2 functions that must return value. Value is constant (3.1415)
+            or depend on parameter from parameters section:
+                <xrange>
+                    <min>return 0;</min>
+                    <max>return 30;</max>
+                </xrange>
+                                        or
+                <xrange>
+                    <min>return -a;</min>
+                    <max>return a;</max>
+                </xrange>
+
+            All functions will be calculated over domain between xrange:min
+            and xrange:max. Xrange depending on parameter is extremely
+            useful when domain(s) of your function(s) depends on parameter
+            (like circle, when parameter is radius and you want to allow
+            to change it).
+
+Optional parameters::
+
+    num_points: Number of data points to generated for the plot. If
+                this is not set, the number of points will be
+                calculated as width / 5.
+    xticks,
+    yticks:    3 floating point numbers separated by commas. This
+               specifies how many ticks are created, what number they
+               start at, and what number they end at. This is different
+               from the 'xrange' setting in that it has nothing to do
+               with the data points - it control what area of the
+               Cartesian space you will see. The first number is the
+               first tick's value, the second number is the step
+               between each tick, the third number is the value of the
+               last tick. If these configurations are not specified,
+               Flot will chose them for you based on the data points
+               set that he is currently plotting. Usually, this results
+               in a nice graph, however, sometimes you need to fine
+               grain the controls. For example, when you want to show
+               a fixed area of the Cartesian space, even when the data
+               set changes. On it's own, Flot will recalculate the
+               ticks, which will result in a different graph each time.
+               By specifying the xticks, yticks configurations, only
+               the plotted data will change - the axes (ticks) will
+               remain as you have defined them.
+
+    xunits,
+    yunits:   Units values to be set on axes. Use MathJax. Example:
+                <xunits>\(cm\)</xunits>
+                <yunits>\(m\)</yunits>
+
+Example
+=======
+
+Plotting, sliders and inputs
+----------------------------
+
+.. literalinclude:: gst_example_with_documentation.xml
+
+Update of html elements, no plotting
+------------------------------------
+
+.. literalinclude:: gst_example_html_element_output.xml
+
+
+Circle with dynamic radius
+--------------------------
+
+.. literalinclude:: gst_example_dynamic_range.xml
diff --git a/docs/source/gst_example_dynamic_range.xml b/docs/source/gst_example_dynamic_range.xml
new file mode 100644
index 0000000000..0938e7b60b
--- /dev/null
+++ b/docs/source/gst_example_dynamic_range.xml
@@ -0,0 +1,41 @@
+<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">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>
+</vertical>
diff --git a/docs/source/gst_example_html_element_output.xml b/docs/source/gst_example_html_element_output.xml
new file mode 100644
index 0000000000..340783871a
--- /dev/null
+++ b/docs/source/gst_example_html_element_output.xml
@@ -0,0 +1,40 @@
+<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>
diff --git a/docs/source/gst_example_with_documentation.xml b/docs/source/gst_example_with_documentation.xml
new file mode 100644
index 0000000000..a7a646d307
--- /dev/null
+++ b/docs/source/gst_example_with_documentation.xml
@@ -0,0 +1,88 @@
+<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 b -->
+              <textbox var="a" style="width:50px; float:left; margin-left:10px;" readonly="false"/>
+            </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" readonly="true" 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\)">
+            return 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>
+        </functions>
+
+        <plot>
+
+          <xrange>
+              <min>return 0;</min>
+              <max>return 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>
diff --git a/docs/source/index.rst b/docs/source/index.rst
index 92c535a624..d2082ff3a0 100644
--- a/docs/source/index.rst
+++ b/docs/source/index.rst
@@ -14,7 +14,7 @@ Contents:
    overview.rst
    common-lib.rst
    djangoapps.rst
-
+   xml_formats.rst
 
 Indices and tables
 ==================
diff --git a/docs/source/xml_formats.rst b/docs/source/xml_formats.rst
new file mode 100644
index 0000000000..b76ee11642
--- /dev/null
+++ b/docs/source/xml_formats.rst
@@ -0,0 +1,8 @@
+XML formats of Inputtypes and Xmodule
+=====================================
+Contents:
+
+.. toctree::
+   :maxdepth: 2
+
+   graphical_slider_tool.rst
\ No newline at end of file

From 1fb4c8c720bde483fa44196ff0ff68af925e04c2 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Tue, 25 Dec 2012 18:42:59 +0200
Subject: [PATCH 079/107] grammar fix

---
 docs/source/graphical_slider_tool.rst | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/source/graphical_slider_tool.rst b/docs/source/graphical_slider_tool.rst
index 07d5f058c1..0b42519288 100644
--- a/docs/source/graphical_slider_tool.rst
+++ b/docs/source/graphical_slider_tool.rst
@@ -106,7 +106,7 @@ After processing plot tags will be replaced by Flot plot with applied
 HTML tags with id
 .................
 
-Any html tag with id, i.e. ``<span id="answer_span_1">`` will be counted as
+Any html tag with id, e.g. ``<span id="answer_span_1">`` will be counted as
 place where result of function can be rendered. To render function result to
 element, element id must be included in ``function`` tag as ``el_id`` attribute
 and ``output`` value must be ``"element"``::

From 3f44b3aa2a9ea4af0a64222bcf985a48e655f138 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Tue, 25 Dec 2012 18:47:41 +0200
Subject: [PATCH 080/107] gst module docs

---
 common/lib/xmodule/xmodule/gst_module.py | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index 02040274c3..a6b0fb516b 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -8,7 +8,6 @@ import logging
 from lxml import etree
 from lxml import html
 import xmltodict
-import re
 
 from xmodule.mako_module import MakoModuleDescriptor
 from xmodule.xml_module import XmlDescriptor
@@ -71,17 +70,19 @@ class GraphicalSliderToolModule(XModule):
         return self.content
 
     def substitute_controls(self, html_string):
-        """ Substitutes control elements via their divs.
-        TODO: change regexps to html parsing via beautiful soup  or something
-        similar (aim : simpler support).
+        """ 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: rendered html string with controls as xml tags
-            (<slider var="a"/>)
+            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>)
+                html_string with control tags replaced by proper divs
+                (<slider var="a"/> -> <div class="....slider" > </div>)
         """
 
         xml = html.fromstring(html_string)

From 535bd3f1959beac2338b6e1bbb4521e020af69b2 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Wed, 26 Dec 2012 12:56:34 +0200
Subject: [PATCH 081/107] Added bar support.

---
 .../js/src/graphical_slider_tool/graph.js     | 56 ++++++++++++++++---
 1 file changed, 48 insertions(+), 8 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 35c75c8adc..b4e6146a93 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -9,6 +9,17 @@ define('Graph', ['logme'], function (logme) {
     function Graph(gstId, config, state) {
         var plotDiv, dataSeries, functions, xaxis, yaxis, numPoints, xrange;
 
+        state.barsConfig = {
+            'N': 0,
+            'delta': 0,
+            'diff': 0,
+            'width': 0,
+            'width_perc': 0.8,
+            'margin': 0.1,
+            'total': 0.4,
+            'total_half': 0.2
+        };
+
         // We need plot configuration settings. Without them we can't continue.
         if ($.isPlainObject(config.plot) === false) {
             return;
@@ -410,11 +421,13 @@ define('Graph', ['logme'], function (logme) {
                     obj['@dot'],
                     obj['@label'],
                     obj['@point_size'],
-                    obj['@fill_area']
+                    obj['@fill_area'],
+                    obj['@bar']
                 );
             }
 
-            function addFunction(funcString, color, line, dot, label, pointSize, fillArea) {
+            function addFunction(funcString, color, line, dot, label,
+                                 pointSize, fillArea, bar) {
                 var newFunctionObject, func, paramNames;
 
                 // The main requirement is function string. Without it we can't
@@ -433,7 +446,8 @@ define('Graph', ['logme'], function (logme) {
                 // make sure that at least a line is drawn for a function.
                 newFunctionObject = {
                     'line': true,
-                    'dot': false
+                    'dot': false,
+                    'bars': false
                 };
 
                 // Get all of the parameter names defined by the user in the
@@ -505,9 +519,21 @@ define('Graph', ['logme'], function (logme) {
                     newFunctionObject['pointSize'] = pointSize;
                 }
 
-                // If the preference is conflicting (we must have either line
-                // or dot, none is not an option), we will show line.
-                if (
+                if (typeof bar === 'string') {
+                    if (bar.toLowerCase() === 'true') {
+                        newFunctionObject['bars'] = true;
+                    } else if (bar.toLowerCase() === 'false') {
+                        newFunctionObject['bars'] = false;
+                    }
+                }
+
+                if (newFunctionObject['bars'] === true) {
+                    newFunctionObject['line'] = false;
+                    newFunctionObject['dot'] = false;
+
+                    newFunctionObject.barIndex = state.barsConfig.N;
+                    state.barsConfig.N += 1;
+                } else if (
                     (newFunctionObject['dot'] === false) &&
                     (newFunctionObject['line'] === false)
                 ) {
@@ -547,7 +573,7 @@ define('Graph', ['logme'], function (logme) {
 
         function generateData() {
             var c0, c1, functionObj, seriesObj, dataPoints, paramValues, x, y,
-                start, end, step;
+                start, end, step, tempX;
 
             paramValues = state.getAllParameterValues();
 
@@ -588,6 +614,9 @@ define('Graph', ['logme'], function (logme) {
                 }
                 step = (end - start) / (numPoints - 1);
 
+                state.barsConfig.delta = (step * state.barsConfig.total) / state.barsConfig.N;
+                state.barsConfig.diff = step * state.barsConfig.total_half;
+
                 // Generate the data points.
                 for (x = start; x <= end; x += step) {
 
@@ -609,12 +638,18 @@ define('Graph', ['logme'], function (logme) {
                         return false;
                     }
 
+                    if (functionObj.bars === true) {
+                        tempX = x - state.barsConfig.diff + (functionObj.barIndex + state.barsConfig.margin) * state.barsConfig.delta;
+                    } else {
+                        tempX = x;
+                    }
+
                     // Return the paramValues array to how it was before we
                     // added 'x' variable to the end of it.
                     paramValues.pop();
 
                     // Add the generated point to the data points set.
-                    dataPoints.push([x, y]);
+                    dataPoints.push([tempX, y]);
 
                     c1 += 1;
 
@@ -669,6 +704,11 @@ define('Graph', ['logme'], function (logme) {
                     'show': functionObj.dot
                 };
 
+                seriesObj.bars = {
+                    'show': functionObj.bars,
+                    'barWidth': state.barsConfig.delta * state.barsConfig.width_perc
+                };
+
                 if (functionObj.hasOwnProperty('pointSize')) {
                     seriesObj.points.radius = functionObj.pointSize;
                 }

From 421002808df29e7de555a7aa591fee89b7447b48 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Wed, 26 Dec 2012 13:35:35 +0200
Subject: [PATCH 082/107] Fixed bug. Specified values that are outside the
 allowed range now behave properly. Plot is redrawn after the value has been
 set to max (or min) value.

---
 .../xmodule/js/src/graphical_slider_tool/state.js      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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 47653a8ae9..77423d2a20 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
@@ -207,11 +207,6 @@ define('State', ['logme'], function (logme) {
 
             parameters[paramName].value = paramValueNum;
 
-            // If we have a plot DIV to work with, tell to update.
-            if (plotDiv !== undefined) {
-                plotDiv.trigger('update_plot');
-            }
-
             // Update all text inputs with the new parameter's value.
             for (c1 = 0; c1 < parameters[paramName].inputDivs.length; c1 += 1) {
                 parameters[paramName].inputDivs[c1].val(paramValueNum);
@@ -229,6 +224,11 @@ define('State', ['logme'], function (logme) {
                 dynamicEl[c1].outputEl.html(dynamicEl[c1].func.apply(window, allParameterValues));
             }
 
+            // If we have a plot DIV to work with, tell to update.
+            if (plotDiv !== undefined) {
+                plotDiv.trigger('update_plot');
+            }
+
             return true;
         } // End-of: function setParameterValue
 

From 3fec482f7f0a5dff66e3ea9f5d95c4246405212c Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera.rozuvan@gmail.com>
Date: Mon, 31 Dec 2012 13:25:13 +0200
Subject: [PATCH 083/107] Added support for horizontal and vertical asymptotes.

---
 .../js/src/graphical_slider_tool/graph.js     | 150 +++++++++++++++++-
 1 file changed, 148 insertions(+), 2 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index b4e6146a93..678aacfe52 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -7,7 +7,8 @@ define('Graph', ['logme'], function (logme) {
     return Graph;
 
     function Graph(gstId, config, state) {
-        var plotDiv, dataSeries, functions, xaxis, yaxis, numPoints, xrange;
+        var plotDiv, dataSeries, functions, xaxis, yaxis, numPoints, xrange,
+            asymptotes;
 
         state.barsConfig = {
             'N': 0,
@@ -69,6 +70,8 @@ define('Graph', ['logme'], function (logme) {
             return;
         }
 
+        createMarkingsFunctions();
+
         // Create the initial graph and plot it for the user to see.
         if (generateData() === true) {
             updatePlot();
@@ -80,6 +83,93 @@ define('Graph', ['logme'], function (logme) {
 
         return;
 
+        function createMarkingsFunctions() {
+            var c1, paramNames;
+
+            asymptotes = [];
+            paramNames = state.getAllParameterNames();
+
+            if ($.isPlainObject(config.plot.asymptote)) {
+                processAsymptote(config.plot.asymptote);
+            } else if ($.isArray(config.plot.asymptote)) {
+                for (c1 = 0; c1 < config.plot.asymptote.length; c1 += 1) {
+                    processAsymptote(config.plot.asymptote[c1]);
+                }
+            }
+
+            return;
+
+            // Read configuration options for asymptotes, and store them as
+            // an array of objects. Each object will have 3 properties:
+            //
+            //    - color: the color of the asymptote line
+            //    - type: 'x' (vertical), or 'y' (horizontal)
+            //    - func: the function that will generate the value at which
+            //            the asymptote will be plotted; i.e. x = func(), or
+            //            y = func(); for now only horizontal and vertical
+            //            asymptotes are supported
+            //
+            // Since each asymptote can have a variable function - function
+            // that relies on some parameter specified in the config - we will
+            // generate each asymptote just before we draw the graph. See:
+            //
+            //     function updatePlot()
+            //     function generateMarkings()
+            //
+            // Asymptotes are really thin rectangles implemented via the Flot's
+            // markings option.
+            function processAsymptote(asyObj) {
+                var newAsyObj, funcString, func;
+
+                newAsyObj = {};
+
+                if (typeof asyObj['@type'] === 'string') {
+                    if (asyObj['@type'].toLowerCase() === 'x') {
+                        newAsyObj.type = 'x';
+                    } else if (asyObj['@type'].toLowerCase() === 'y') {
+                        newAsyObj.type = 'y';
+                    } else {
+                        logme('ERROR: Attribute "type" for asymptote can be "x" or "y".');
+
+                        return;
+                    }
+                } else {
+                    logme('ERROR: Attribute "type" for asymptote is not specified.');
+
+                    return;
+                }
+
+                if (typeof asyObj['#text'] === 'string') {
+                    funcString = asyObj['#text'];
+                } else {
+                    logme('ERROR: Function body for asymptote is not specified.');
+
+                    return;
+                }
+
+                newAsyObj.color = '#000';
+                if (typeof asyObj['@color'] === 'string') {
+                    newAsyObj.color = asyObj['@color'];
+                }
+
+                paramNames.push(funcString);
+
+                try {
+                    func = Function.apply(null, paramNames);
+                } catch (err) {
+                    logme('ERROR: Asymptote function body could not be converted to function object.');
+                    logme('Error message: "".' + err.message);
+
+                    return;
+                }
+
+                paramNames.pop();
+
+                newAsyObj.func = func;
+                asymptotes.push(newAsyObj);
+            }
+        }
+
         function setGraphAxes() {
             xaxis = {};
             if (typeof config.plot['xticks'] === 'string') {
@@ -366,7 +456,7 @@ define('Graph', ['logme'], function (logme) {
             } else if ($.isArray(config.functions.function)) {
 
                 // If more than one function is defined.
-                for (c1 = 0; c1 < config.functions.function.length; c1++) {
+                for (c1 = 0; c1 < config.functions.function.length; c1 += 1) {
 
                     // For each definition, we must check if it is a simple
                     // string definition, or a complex one with properties.
@@ -722,6 +812,10 @@ define('Graph', ['logme'], function (logme) {
         } // End-of: function generateData
 
         function updatePlot() {
+            var paramValues;
+
+            paramValues = state.getAllParameterValues();
+
             // Tell Flot to draw the graph to our specification.
 
             $.plot(
@@ -743,6 +837,9 @@ define('Graph', ['logme'], function (logme) {
                         // legend background become.
                         'backgroundOpacity': 0
 
+                    },
+                    'grid': {
+                        'markings': generateMarkings()
                     }
                 }
             );
@@ -759,6 +856,55 @@ define('Graph', ['logme'], function (logme) {
                 MathJax.Hub,
                 plotDiv.attr('id')
             ]);
+
+            return;
+
+            // Generate markings to represent asymptotes defined by the user.
+            // See the following function for more details:
+            //
+            //     function processAsymptote()
+            //
+            function generateMarkings() {
+                var c1, asymptote, markings, val;
+
+                markings = [];
+
+                for (c1 = 0; c1 < asymptotes.length; c1 += 1) {
+                    asymptote = asymptotes[c1];
+
+                    try {
+                        val = asymptote.func.apply(window, paramValues);
+                    } catch (err) {
+                        logme('ERROR: Could not generate value from asymptote function.');
+                        logme('Error message: ', err.message);
+
+                        continue;
+                    }
+
+                    if (asymptote.type === 'x') {
+                        markings.push({
+                            'color': asymptote.color,
+                            'lineWidth': 1,
+                            'xaxis': {
+                                'from': val,
+                                'to': val
+                            }
+                        });
+                    } else {
+                        markings.push({
+                            'color': asymptote.color,
+                            'lineWidth': 1,
+                            'yaxis': {
+                                'from': val,
+                                'to': val
+                            }
+                        });
+
+                    }
+                }
+
+                return markings;
+            }
         }
     }
 });

From 9cabaf1ef356b0e180e20152022e136c6abd622e Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Fri, 4 Jan 2013 17:26:48 +0200
Subject: [PATCH 084/107] Added automatic insertion of missing "return"
 statement into simple function strings. Added an option to turn this feature
 off.

---
 .../js/src/graphical_slider_tool/graph.js     | 29 +++++++++++++++++--
 docs/source/graphical_slider_tool.rst         |  6 ++++
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 678aacfe52..65511e1599 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -512,12 +512,13 @@ define('Graph', ['logme'], function (logme) {
                     obj['@label'],
                     obj['@point_size'],
                     obj['@fill_area'],
-                    obj['@bar']
+                    obj['@bar'],
+                    obj['@disable_auto_return']
                 );
             }
 
             function addFunction(funcString, color, line, dot, label,
-                                 pointSize, fillArea, bar) {
+                                 pointSize, fillArea, bar, disableAutoReturn) {
                 var newFunctionObject, func, paramNames;
 
                 // The main requirement is function string. Without it we can't
@@ -532,6 +533,30 @@ define('Graph', ['logme'], function (logme) {
                 // will break.
                 funcString = $('<div>').html(funcString).text();
 
+                // If the user did not specifically turn off this feature,
+                // check if the function string contains a 'return', and
+                // prepend a 'return ' to the string if one, or more, is not
+                // found.
+                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.'
+                        );
+                    }
+                }
+
                 // Some defaults. If no options are set for the graph, we will
                 // make sure that at least a line is drawn for a function.
                 newFunctionObject = {
diff --git a/docs/source/graphical_slider_tool.rst b/docs/source/graphical_slider_tool.rst
index 0b42519288..6334c6d77e 100644
--- a/docs/source/graphical_slider_tool.rst
+++ b/docs/source/graphical_slider_tool.rst
@@ -266,6 +266,12 @@ Optional parameters::
             with id set in 'el_id' attribute.
     el_id:  Id of html element, defined in 'render' section. Value of
             function will be rendered to content of this element.
+    disable_auto_return: By default, if JavaScript function string is written
+                         without a "return" statement, one will be prepended
+                         to it. Set to "true" to disable this functionality.
+                         This is done so that simple functions can be defined
+                         in an easy fashion (for example, "a", which will be
+                         translated into "return a").
 
 With ``output`` and ``el_id`` set together you can update html elements with
 function value, also function will not be plotted.

From def8eb472c34d6599893832adb1da7f6baf4dd16 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Tue, 8 Jan 2013 17:17:29 +0200
Subject: [PATCH 085/107] Refactoring. Added ability to add dynamic element
 output to graph labels. Updated 2 demos for GST. "Falsified Clinic Data", and
 "Sample Size and Power".

---
 .../js/src/graphical_slider_tool/el_output.js |  39 ++++---
 .../js/src/graphical_slider_tool/graph.js     | 107 +++++++++++++-----
 .../js/src/graphical_slider_tool/gst_main.js  |   6 +-
 .../js/src/graphical_slider_tool/state.js     |  41 +++++--
 4 files changed, 138 insertions(+), 55 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
index 901989b2af..146d8a9f7f 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
@@ -25,15 +25,14 @@ define('ElOutput', ['logme'], function (logme) {
         return;
 
         function processFuncObj(obj) {
-            var outputEl, paramNames, funcString, func;
+            var paramNames, funcString, func, special, el;
 
             // We are only interested in functions that are meant for output to an
             // element.
-            if (typeof obj['@output'] !== 'string') {
-                return;
-            }
-
-            if (obj['@output'].toLowerCase() !== 'element') {
+            if (
+                (typeof obj['@output'] !== 'string') ||
+                (obj['@output'].toLowerCase() !== 'element')
+            ) {
                 return;
             }
 
@@ -55,14 +54,6 @@ define('ElOutput', ['logme'], function (logme) {
             // ASCII text equivalents.
             funcString = $('<div>').html(funcString).text();
 
-            outputEl = $('#' + obj['@el_id']);
-
-            if (outputEl.length !== 1) {
-                logme('ERROR: The element with id "' + obj['@el_id'] + '" was not found.');
-
-                return;
-            }
-
             paramNames = state.getAllParameterNames();
             paramNames.push(funcString);
 
@@ -86,9 +77,25 @@ define('ElOutput', ['logme'], function (logme) {
 
             paramNames.pop();
 
-            outputEl.html(func.apply(window, state.getAllParameterValues()));
+            special = false;
+            if (obj['@el_id'][0] === '_') {
+                special = true;
+            } else {
+                el = $('#' + obj['@el_id']);
 
-            state.addDynamicEl(outputEl, func);
+                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()));
+            }
+
+            state.addDynamicEl(el, func, obj['@el_id'], special);
         }
 
     }
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 65511e1599..8756f03aef 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -8,7 +8,9 @@ define('Graph', ['logme'], function (logme) {
 
     function Graph(gstId, config, state) {
         var plotDiv, dataSeries, functions, xaxis, yaxis, numPoints, xrange,
-            asymptotes;
+            asymptotes, plotObj;
+
+        plotObj = null;
 
         state.barsConfig = {
             'N': 0,
@@ -519,7 +521,7 @@ define('Graph', ['logme'], function (logme) {
 
             function addFunction(funcString, color, line, dot, label,
                                  pointSize, fillArea, bar, disableAutoReturn) {
-                var newFunctionObject, func, paramNames;
+                var newFunctionObject, func, paramNames, matches;
 
                 // The main requirement is function string. Without it we can't
                 // create a function, and the series cannot be calculated.
@@ -671,6 +673,17 @@ define('Graph', ['logme'], function (logme) {
                 }
 
                 if (typeof label === 'string') {
+                    matches = label.match(/%%_[^%]*%%/g);
+
+                    if (
+                        ($.isArray(matches) === true) &&
+                        (matches.length > 0)
+                    ) {
+                        newFunctionObject['specialLabel'] = true;
+                    } else {
+                        newFunctionObject['specialLabel'] = false;
+                    }
+
                     newFunctionObject['label'] = label;
                 }
 
@@ -688,7 +701,7 @@ define('Graph', ['logme'], function (logme) {
 
         function generateData() {
             var c0, c1, functionObj, seriesObj, dataPoints, paramValues, x, y,
-                start, end, step, tempX;
+                start, end, step, tempX, matches;
 
             paramValues = state.getAllParameterValues();
 
@@ -801,7 +814,35 @@ define('Graph', ['logme'], function (logme) {
 
                 // See if a user defined a label for this function.
                 if (functionObj.hasOwnProperty('label') === true) {
-                    seriesObj.label = functionObj.label;
+                    if (functionObj.specialLabel === true) {
+                        matches = functionObj.label.match(/%%_[^%]*%%/g);
+
+                        if ($.isArray(matches) === true) {
+                            (function (c1) {
+                                var el_id, func, tempLabel;
+
+                                tempLabel = functionObj.label;
+
+                                while (c1 < matches.length) {
+                                    el_id = matches[c1].replace(/%/g, '');
+                                    func = state.getFuncForSpecialLabel(el_id);
+
+                                    if (func !== null) {
+                                        tempLabel = tempLabel.replace(
+                                            matches[c1],
+                                            func.apply(window, state.getAllParameterValues())
+                                        );
+                                    }
+
+                                    c1 += 1;
+                                }
+
+                                seriesObj.label = tempLabel;
+                            }(0));
+                        }
+                    } else {
+                        seriesObj.label = functionObj.label;
+                    }
                 }
 
                 // Should the data points be connected by a line?
@@ -841,33 +882,41 @@ define('Graph', ['logme'], function (logme) {
 
             paramValues = state.getAllParameterValues();
 
-            // Tell Flot to draw the graph to our specification.
+            // Tell Flot to draw the graph to our specification. If this is the
+            // first time, then call $.plot.
+            if (plotObj === null) {
+                plotObj = $.plot(
+                    plotDiv,
+                    dataSeries,
+                    {
+                        'xaxis': xaxis,
+                        'yaxis': yaxis,
+                        'legend': {
 
-            $.plot(
-                plotDiv,
-                dataSeries,
-                {
-                    'xaxis': xaxis,
-                    'yaxis': yaxis,
-                    'legend': {
+                            // To show the legend or not. Note, even if 'show' is
+                            // 'true', the legend will only show if labels are
+                            // provided for at least one of the series that are
+                            // going to be plotted.
+                            'show': true,
 
-                        // To show the legend or not. Note, even if 'show' is
-                        // 'true', the legend will only show if labels are
-                        // provided for at least one of the series that are
-                        // going to be plotted.
-                        'show': true,
+                            // A floating point number in the range [0, 1]. The
+                            // smaller the number, the more transparent will the
+                            // legend background become.
+                            'backgroundOpacity': 0
 
-                        // A floating point number in the range [0, 1]. The
-                        // smaller the number, the more transparent will the
-                        // legend background become.
-                        'backgroundOpacity': 0
-
-                    },
-                    'grid': {
-                        'markings': generateMarkings()
+                        },
+                        'grid': {
+                            'markings': generateMarkings()
+                        }
                     }
-                }
-            );
+                );
+            }
+            // Otherwise, use stored plot object.
+            else {
+                plotObj.setData(dataSeries);
+                plotObj.setupGrid();
+                plotObj.draw();
+            }
 
             // The first time that the graph gets added to the page, the legend
             // is created from scratch. When it appears, MathJax works some
@@ -909,7 +958,7 @@ define('Graph', ['logme'], function (logme) {
                     if (asymptote.type === 'x') {
                         markings.push({
                             'color': asymptote.color,
-                            'lineWidth': 1,
+                            'lineWidth': 2,
                             'xaxis': {
                                 'from': val,
                                 'to': val
@@ -918,7 +967,7 @@ define('Graph', ['logme'], function (logme) {
                     } else {
                         markings.push({
                             'color': asymptote.color,
-                            'lineWidth': 1,
+                            'lineWidth': 2,
                             'yaxis': {
                                 'from': val,
                                 'to': val
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 bdbe317f36..71f946e312 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
@@ -64,12 +64,12 @@ define(
         Sliders(gstId, state);
         Inputs(gstId, gstClass, state);
 
+        // Configure functions that output to an element instead of the graph.
+        ElOutput(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);
-
-        // Configure functions that output to an element instead of the graph.
-        ElOutput(config, state);
     }
 });
 
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 77423d2a20..3aea34ceb5 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
@@ -18,9 +18,10 @@ define('State', ['logme'], function (logme) {
 
     function State(gstId, config) {
         var parameters, allParameterNames, allParameterValues,
-            plotDiv, dynamicEl;
+            plotDiv, dynamicEl, dynamicElByElId;
 
         dynamicEl = [];
+        dynamicElByElId = {};
 
         stateInst += 1;
         logme('MESSAGE: Creating state instance # ' + stateInst + '.');
@@ -95,7 +96,9 @@ define('State', ['logme'], function (logme) {
             'getAllParameterValues': getAllParameterValues,
 
             'bindUpdatePlotEvent': bindUpdatePlotEvent,
-            'addDynamicEl': addDynamicEl
+            'addDynamicEl': addDynamicEl,
+
+            'getFuncForSpecialLabel': getFuncForSpecialLabel
         };
 
         function getAllParameterNames() {
@@ -122,11 +125,33 @@ define('State', ['logme'], function (logme) {
             plotDiv.bind('update_plot', callback);
         }
 
-        function addDynamicEl(outputEl, func) {
-            dynamicEl.push({
-                'outputEl': outputEl,
-                'func': func
+        function addDynamicEl(el, func, elId, special) {
+            var newLength;
+
+            newLength = dynamicEl.push({
+                'el': el,
+                'func': func,
+                'elId': elId,
+                'special': special
             });
+
+            if (typeof dynamicElByElId[elId] !== 'undefined') {
+                logme(
+                    'ERROR: Duplicate dynamic element ID "' + elId + '" found.'
+                );
+            } else {
+                dynamicElByElId[elId] = dynamicEl[newLength - 1];
+            }
+        }
+
+        function getFuncForSpecialLabel(elId) {
+            if (typeof dynamicElByElId[elId] === 'undefined') {
+                logme('ERROR: Special label with ID "' + elId + '" does not exist.');
+
+                return null;
+            }
+
+            return dynamicElByElId[elId].func;
         }
 
         function getParameterValue(paramName) {
@@ -221,7 +246,9 @@ define('State', ['logme'], function (logme) {
             allParameterValues[parameters[paramName].helperArrayIndex] = paramValueNum;
 
             for (c1 = 0; c1 < dynamicEl.length; c1++) {
-                dynamicEl[c1].outputEl.html(dynamicEl[c1].func.apply(window, allParameterValues));
+                if (dynamicEl[c1].special !== true) {
+                    dynamicEl[c1].el.html(dynamicEl[c1].func.apply(window, allParameterValues));
+                }
             }
 
             // If we have a plot DIV to work with, tell to update.

From 20227d219e1ac51f3497538d584ff025f16e15ea Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Wed, 9 Jan 2013 10:16:06 +0200
Subject: [PATCH 086/107] Added new feature: ability to add a label for an
 asymptote. Added new demo to GST: "Power and Alpha Demo".

---
 .../js/src/graphical_slider_tool/graph.js     | 68 ++++++++++---------
 1 file changed, 37 insertions(+), 31 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 8756f03aef..f35f92aa98 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -154,6 +154,11 @@ define('Graph', ['logme'], function (logme) {
                     newAsyObj.color = asyObj['@color'];
                 }
 
+                newAsyObj.label = false;
+                if (typeof asyObj['@label'] === 'string') {
+                    newAsyObj.label = asyObj['@label'];
+                }
+
                 paramNames.push(funcString);
 
                 try {
@@ -874,6 +879,16 @@ define('Graph', ['logme'], function (logme) {
                 dataSeries.push(seriesObj);
             }
 
+            for (c0 = 0; c0 < asymptotes.length; c0 += 1) {
+                if (typeof asymptotes[c0].label === 'string') {
+                    dataSeries.push({
+                        'data': [],
+                        'label': asymptotes[c0].label,
+                        'color': asymptotes[c0].color
+                    });
+                }
+            }
+
             return true;
         } // End-of: function generateData
 
@@ -882,41 +897,32 @@ define('Graph', ['logme'], function (logme) {
 
             paramValues = state.getAllParameterValues();
 
-            // Tell Flot to draw the graph to our specification. If this is the
-            // first time, then call $.plot.
-            if (plotObj === null) {
-                plotObj = $.plot(
-                    plotDiv,
-                    dataSeries,
-                    {
-                        'xaxis': xaxis,
-                        'yaxis': yaxis,
-                        'legend': {
+            // Tell Flot to draw the graph to our specification.
+            $.plot(
+                plotDiv,
+                dataSeries,
+                {
+                    'xaxis': xaxis,
+                    'yaxis': yaxis,
+                    'legend': {
 
-                            // To show the legend or not. Note, even if 'show' is
-                            // 'true', the legend will only show if labels are
-                            // provided for at least one of the series that are
-                            // going to be plotted.
-                            'show': true,
+                        // To show the legend or not. Note, even if 'show' is
+                        // 'true', the legend will only show if labels are
+                        // provided for at least one of the series that are
+                        // going to be plotted.
+                        'show': true,
 
-                            // A floating point number in the range [0, 1]. The
-                            // smaller the number, the more transparent will the
-                            // legend background become.
-                            'backgroundOpacity': 0
+                        // A floating point number in the range [0, 1]. The
+                        // smaller the number, the more transparent will the
+                        // legend background become.
+                        'backgroundOpacity': 0
 
-                        },
-                        'grid': {
-                            'markings': generateMarkings()
-                        }
+                    },
+                    'grid': {
+                        'markings': generateMarkings()
                     }
-                );
-            }
-            // Otherwise, use stored plot object.
-            else {
-                plotObj.setData(dataSeries);
-                plotObj.setupGrid();
-                plotObj.draw();
-            }
+                }
+            );
 
             // The first time that the graph gets added to the page, the legend
             // is created from scratch. When it appears, MathJax works some

From 72d500c168bfb429f45ed24a8fbde4923916b90e Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Thu, 10 Jan 2013 11:11:00 +0200
Subject: [PATCH 087/107] Feature "Dynamic Elements in Labels" has been
 refactored to provide the user an easier interface for access. Demo "Sample
 Size and Power" has been updated.

---
 common/lib/xmodule/xmodule/gst_module.py      |   1 +
 .../g_label_el_output.js                      |  91 +++++++++++++++
 .../js/src/graphical_slider_tool/graph.js     | 110 +++++++++++-------
 .../js/src/graphical_slider_tool/gst_main.js  |   8 +-
 .../js/src/graphical_slider_tool/state.js     |   5 +-
 5 files changed, 172 insertions(+), 43 deletions(-)
 create mode 100644 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/g_label_el_output.js

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index a6b0fb516b..c29e4e6a04 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -37,6 +37,7 @@ class GraphicalSliderToolModule(XModule):
         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')
       ]
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/g_label_el_output.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/g_label_el_output.js
new file mode 100644
index 0000000000..feac031aee
--- /dev/null
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/g_label_el_output.js
@@ -0,0 +1,91 @@
+// 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;
+
+            // 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;
+            }
+
+            funcString = obj['#text'];
+
+            // 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)
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index f35f92aa98..50d8d7bcd4 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -155,7 +155,10 @@ define('Graph', ['logme'], function (logme) {
                 }
 
                 newAsyObj.label = false;
-                if (typeof asyObj['@label'] === 'string') {
+                if (
+                    (asyObj.hasOwnProperty('@label') === true) &&
+                    (typeof asyObj['@label'] === 'string')
+                ) {
                     newAsyObj.label = asyObj['@label'];
                 }
 
@@ -492,7 +495,10 @@ define('Graph', ['logme'], function (logme) {
             // properties as parameters. Rather than writing them out every
             // time, we will have a single place where it is done.
             function callAddFunction(obj) {
-                if (typeof obj['@output'] === 'string') {
+                if (
+                    (obj.hasOwnProperty('@output')) &&
+                    (typeof obj['@output'] === 'string')
+                ) {
 
                     // If this function is meant to be calculated for an
                     // element then skip it.
@@ -500,13 +506,24 @@ define('Graph', ['logme'], function (logme) {
                         return;
                     }
 
-                    // It is an error if "output" is not "element" or "graph".
-                    // Though you can ommit the "output" attribute.
+                    // If this function is meant to be calculated for a
+                    // dynamic element in a label then skip it.
+                    else if (obj['@output'].toLowerCase() === 'plot_label') {
+                        return;
+                    }
+
+                    // It is an error if '@output' is not 'element',
+                    // 'plot_label', or 'graph'. However, if the '@output'
+                    // attribute is omitted, we will not have reached this.
                     else if (obj['@output'].toLowerCase() !== 'graph') {
-                        logme('ERROR: Function "output" attribute can be either "div" or "graph".');
+                        logme(
+                            'ERROR: Function "output" attribute can be ' +
+                            'either "element", "plot_label",  or "graph".'
+                        );
 
                         return;
                     }
+
                 }
 
                 // The user did not specify an "output" attribute, or it is
@@ -525,8 +542,9 @@ define('Graph', ['logme'], function (logme) {
             }
 
             function addFunction(funcString, color, line, dot, label,
-                                 pointSize, fillArea, bar, disableAutoReturn) {
-                var newFunctionObject, func, paramNames, matches;
+                pointSize, fillArea, bar, disableAutoReturn) {
+
+                var newFunctionObject, func, paramNames, c1, rgxp;
 
                 // The main requirement is function string. Without it we can't
                 // create a function, and the series cannot be calculated.
@@ -678,18 +696,27 @@ define('Graph', ['logme'], function (logme) {
                 }
 
                 if (typeof label === 'string') {
-                    matches = label.match(/%%_[^%]*%%/g);
 
-                    if (
-                        ($.isArray(matches) === true) &&
-                        (matches.length > 0)
-                    ) {
-                        newFunctionObject['specialLabel'] = true;
-                    } else {
-                        newFunctionObject['specialLabel'] = false;
+                    newFunctionObject.specialLabel = false;
+                    newFunctionObject.pldeHash = [];
+
+                    // Let's check the label against all of the plde objects.
+                    // plde is an abbreviation for Plot Label Dynamic Elements.
+                    for (c1 = 0; c1 < state.plde.length; c1 += 1) {
+                        rgxp = new RegExp(state.plde[c1].elId, 'g');
+
+                        // If we find a dynamic element in the label, we will
+                        // hash the current plde object, and indicate that this
+                        // is a special label.
+                        if (rgxp.test(label) === true) {
+                            newFunctionObject.specialLabel = true;
+                            newFunctionObject.pldeHash.push(state.plde[c1]);
+                        }
                     }
 
-                    newFunctionObject['label'] = label;
+                    newFunctionObject.label = label;
+                } else {
+                    newFunctionObject.label = false;
                 }
 
                 functions.push(newFunctionObject);
@@ -706,7 +733,7 @@ define('Graph', ['logme'], function (logme) {
 
         function generateData() {
             var c0, c1, functionObj, seriesObj, dataPoints, paramValues, x, y,
-                start, end, step, tempX, matches;
+                start, end, step, tempX;
 
             paramValues = state.getAllParameterValues();
 
@@ -818,33 +845,27 @@ define('Graph', ['logme'], function (logme) {
                 }
 
                 // See if a user defined a label for this function.
-                if (functionObj.hasOwnProperty('label') === true) {
+                if (functionObj.label !== false) {
                     if (functionObj.specialLabel === true) {
-                        matches = functionObj.label.match(/%%_[^%]*%%/g);
+                        (function (c1) {
+                            var tempLabel;
 
-                        if ($.isArray(matches) === true) {
-                            (function (c1) {
-                                var el_id, func, tempLabel;
+                            tempLabel = functionObj.label;
 
-                                tempLabel = functionObj.label;
+                            while (c1 < functionObj.pldeHash.length) {
+                                tempLabel = tempLabel.replace(
+                                    functionObj.pldeHash[c1].elId,
+                                    functionObj.pldeHash[c1].func.apply(
+                                        window,
+                                        state.getAllParameterValues()
+                                    )
+                                );
 
-                                while (c1 < matches.length) {
-                                    el_id = matches[c1].replace(/%/g, '');
-                                    func = state.getFuncForSpecialLabel(el_id);
+                                c1 += 1;
+                            }
 
-                                    if (func !== null) {
-                                        tempLabel = tempLabel.replace(
-                                            matches[c1],
-                                            func.apply(window, state.getAllParameterValues())
-                                        );
-                                    }
-
-                                    c1 += 1;
-                                }
-
-                                seriesObj.label = tempLabel;
-                            }(0));
-                        }
+                            seriesObj.label = tempLabel;
+                        }(0));
                     } else {
                         seriesObj.label = functionObj.label;
                     }
@@ -880,13 +901,22 @@ define('Graph', ['logme'], function (logme) {
             }
 
             for (c0 = 0; c0 < asymptotes.length; c0 += 1) {
-                if (typeof asymptotes[c0].label === 'string') {
+
+                // If the user defined a label for this asympote, then the
+                // property 'label' will be a string (in the other case it is
+                // a boolean value 'false'). We will create an empty data set,
+                // and add to it a label. This solution is a bit _wrong_ , but
+                // it will have to do for now. Flot JS does not provide a way
+                // to add labels to markings, and we use markings to generate
+                // asymptotes.
+                if (asymptotes[c0].label !== false) {
                     dataSeries.push({
                         'data': [],
                         'label': asymptotes[c0].label,
                         'color': asymptotes[c0].color
                     });
                 }
+
             }
 
             return true;
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 71f946e312..34b54b4216 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
@@ -8,8 +8,8 @@ define(
     // 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', 'logme'],
-    function (State, GeneralMethods, Sliders, Inputs, Graph, ElOutput, logme) {
+    ['State', 'GeneralMethods', 'Sliders', 'Inputs', 'Graph', 'ElOutput', 'GLabelElOutput', 'logme'],
+    function (State, GeneralMethods, Sliders, Inputs, Graph, ElOutput, GLabelElOutput, logme) {
 
     return GstMain;
 
@@ -67,6 +67,10 @@ define(
         // 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);
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 3aea34ceb5..c1cfcd1b04 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
@@ -98,7 +98,10 @@ define('State', ['logme'], function (logme) {
             'bindUpdatePlotEvent': bindUpdatePlotEvent,
             'addDynamicEl': addDynamicEl,
 
-            'getFuncForSpecialLabel': getFuncForSpecialLabel
+            'getFuncForSpecialLabel': getFuncForSpecialLabel,
+
+            // plde is an abbreviation for Plot Label Dynamic Elements.
+            plde: []
         };
 
         function getAllParameterNames() {

From 1753f983ae7a767ddb86448a713a732cc98fc067 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Thu, 10 Jan 2013 11:46:22 +0200
Subject: [PATCH 088/107] Added ability to insert automatic "return" for
 dynamic element functions, and graph label dynamic element functions.

---
 .../js/src/graphical_slider_tool/el_output.js | 24 ++++++++++++++++++-
 .../g_label_el_output.js                      | 24 ++++++++++++++++++-
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
index 146d8a9f7f..8bad5e06b4 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
@@ -25,7 +25,7 @@ define('ElOutput', ['logme'], function (logme) {
         return;
 
         function processFuncObj(obj) {
-            var paramNames, funcString, func, special, el;
+            var paramNames, funcString, func, special, el, disableAutoReturn;
 
             // We are only interested in functions that are meant for output to an
             // element.
@@ -48,8 +48,30 @@ define('ElOutput', ['logme'], function (logme) {
                 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();
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/g_label_el_output.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/g_label_el_output.js
index feac031aee..13c9dd3389 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/g_label_el_output.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/g_label_el_output.js
@@ -23,7 +23,7 @@ define('GLabelElOutput', ['logme'], function (logme) {
         return;
 
         function processFuncObj(obj) {
-            var paramNames, funcString, func;
+            var paramNames, funcString, func, disableAutoReturn;
 
             // We are only interested in functions that are meant for output to an
             // element.
@@ -46,8 +46,30 @@ define('GLabelElOutput', ['logme'], function (logme) {
                 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();

From bd605150adab096de949bb095522fc03d3ad2d69 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Thu, 10 Jan 2013 14:58:24 +0200
Subject: [PATCH 089/107] New feature: Dynamically moving labels added. "Sample
 size and power" demo updated.

---
 .../js/src/graphical_slider_tool/graph.js     | 141 +++++++++++++++++-
 1 file changed, 136 insertions(+), 5 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 50d8d7bcd4..79148d144e 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -8,9 +8,7 @@ define('Graph', ['logme'], function (logme) {
 
     function Graph(gstId, config, state) {
         var plotDiv, dataSeries, functions, xaxis, yaxis, numPoints, xrange,
-            asymptotes, plotObj;
-
-        plotObj = null;
+            asymptotes, movingLabels;
 
         state.barsConfig = {
             'N': 0,
@@ -49,6 +47,8 @@ define('Graph', ['logme'], function (logme) {
             plotDiv.height(plotDiv.width());
         }
 
+        plotDiv.css('position', 'relative');
+
         // Configure some settings for the graph.
         if (setGraphXRange() === false) {
             logme('ERROR: Could not configure the xrange. Will not continue.');
@@ -73,6 +73,7 @@ define('Graph', ['logme'], function (logme) {
         }
 
         createMarkingsFunctions();
+        createMovingLabelFunctions();
 
         // Create the initial graph and plot it for the user to see.
         if (generateData() === true) {
@@ -85,6 +86,105 @@ define('Graph', ['logme'], function (logme) {
 
         return;
 
+        function createMovingLabelFunctions() {
+            var c1;
+
+            movingLabels = [];
+
+            if (config.plot.hasOwnProperty('moving_label') !== true) {
+                return ;
+            }
+
+            if ($.isPlainObject(config.plot.moving_label) === true) {
+                processMovingLabel(config.plot.moving_label);
+            } else if ($.isArray(config.plot.moving_label) === true) {
+                for (c1 = 0; c1 < config.plot.moving_label.length; c1++) {
+                    processMovingLabel(config.plot.moving_label[c1]);
+                }
+            }
+        }
+
+        function processMovingLabel(obj) {
+            var labelText, funcString, disableAutoReturn, paramNames, func;
+
+            if (obj.hasOwnProperty('@text') === false) {
+                logme('ERROR: You did not define a "text" attribute for the moving_label.');
+
+                return;
+            }
+            if (typeof obj['@text'] !== 'string') {
+                logme('ERROR: "text" attribute is not a string.');
+
+                return;
+            }
+            labelText = obj['@text'];
+
+            if (obj.hasOwnProperty('#text') === false) {
+                logme('ERROR: moving_label is missing function declaration.');
+
+                return;
+            }
+            if (typeof obj['#text'] !== 'string') {
+                logme('ERROR: Function declaration is not a string.');
+
+                return;
+            }
+            funcString = obj['#text'];
+
+            disableAutoReturn = obj['@disable_auto_return'];
+
+            funcString = $('<div>').html(funcString).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.'
+                    );
+                }
+            }
+
+            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 the string "' + funcString + '".' + '</div>');
+                $('#' + gstId).append('<div style="color: red;">' + 'Error message: "' + err.message + '".' + '</div>');
+
+                paramNames.pop();
+
+                return;
+            }
+
+            paramNames.pop();
+
+            movingLabels.push({
+                'labelText': labelText,
+                'func': func,
+                'el': null
+            });
+        }
+
         function createMarkingsFunctions() {
             var c1, paramNames;
 
@@ -923,12 +1023,12 @@ define('Graph', ['logme'], function (logme) {
         } // End-of: function generateData
 
         function updatePlot() {
-            var paramValues;
+            var paramValues, plotObj;
 
             paramValues = state.getAllParameterValues();
 
             // Tell Flot to draw the graph to our specification.
-            $.plot(
+            plotObj = $.plot(
                 plotDiv,
                 dataSeries,
                 {
@@ -954,6 +1054,8 @@ define('Graph', ['logme'], function (logme) {
                 }
             );
 
+            updateMovingLabels();
+
             // The first time that the graph gets added to the page, the legend
             // is created from scratch. When it appears, MathJax works some
             // magic, and all of the specially marked TeX gets rendered nicely.
@@ -969,6 +1071,35 @@ define('Graph', ['logme'], function (logme) {
 
             return;
 
+            function updateMovingLabels() {
+                var c1, labelCoord, pointOffset;
+
+                for (c1 = 0; c1 < movingLabels.length; c1 += 1) {
+                    if (movingLabels[c1].el === null) {
+                        movingLabels[c1].el = $(
+                            '<div>' +
+                                movingLabels[c1].labelText +
+                            '</div>'
+                        );
+                        movingLabels[c1].el.css('position', 'absolute');
+                        movingLabels[c1].el.appendTo(plotDiv);
+
+                        movingLabels[c1].elWidth = movingLabels[c1].el.width();
+                        movingLabels[c1].elHeight = movingLabels[c1].el.height();
+                    } else {
+                        movingLabels[c1].el.detach();
+                        movingLabels[c1].el.appendTo(plotDiv);
+                    }
+
+                    labelCoord = movingLabels[c1].func.apply(window, paramValues);
+
+                    pointOffset = plotObj.pointOffset({'x': labelCoord.x, 'y': labelCoord.y});
+
+                    movingLabels[c1].el.css('left', pointOffset.left - 0.5 * movingLabels[c1].elWidth);
+                    movingLabels[c1].el.css('top', pointOffset.top - 0.5 * movingLabels[c1].elHeight);
+                }
+            }
+
             // Generate markings to represent asymptotes defined by the user.
             // See the following function for more details:
             //

From ad4f4144e8a9df2d847f903e7d45132e7c1e2c8e Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Thu, 10 Jan 2013 15:49:05 +0200
Subject: [PATCH 090/107] New feature: Added ability to set "color" and
 "weight" property of moving label text.

---
 .../js/src/graphical_slider_tool/graph.js     | 32 +++++++++++++++++--
 1 file changed, 30 insertions(+), 2 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 79148d144e..656ff82690 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -105,7 +105,8 @@ define('Graph', ['logme'], function (logme) {
         }
 
         function processMovingLabel(obj) {
-            var labelText, funcString, disableAutoReturn, paramNames, func;
+            var labelText, funcString, disableAutoReturn, paramNames, func,
+                fontWeight, fontColor;
 
             if (obj.hasOwnProperty('@text') === false) {
                 logme('ERROR: You did not define a "text" attribute for the moving_label.');
@@ -131,6 +132,29 @@ define('Graph', ['logme'], function (logme) {
             }
             funcString = obj['#text'];
 
+            fontColor = 'black';
+            if (
+                (obj.hasOwnProperty('@color') === true) &&
+                (typeof obj['@color'] === 'string')
+            ) {
+                fontColor = obj['@color'];
+            }
+
+            fontWeight = 'normal';
+            if (
+                (obj.hasOwnProperty('@weight') === true) &&
+                (typeof obj['@weight'] === 'string')
+            ) {
+                if (
+                    (obj['@weight'].toLowerCase() === 'normal') ||
+                    (obj['@weight'].toLowerCase() === 'bold')
+                ) {
+                    fontWeight = obj['@weight'];
+                } else {
+                    logme('ERROR: Moving label can have a weight property of "normal" or "bold".');
+                }
+            }
+
             disableAutoReturn = obj['@disable_auto_return'];
 
             funcString = $('<div>').html(funcString).text();
@@ -181,7 +205,9 @@ define('Graph', ['logme'], function (logme) {
             movingLabels.push({
                 'labelText': labelText,
                 'func': func,
-                'el': null
+                'el': null,
+                'fontColor': fontColor,
+                'fontWeight': fontWeight
             });
         }
 
@@ -1082,6 +1108,8 @@ define('Graph', ['logme'], function (logme) {
                             '</div>'
                         );
                         movingLabels[c1].el.css('position', 'absolute');
+                        movingLabels[c1].el.css('color', movingLabels[c1].fontColor);
+                        movingLabels[c1].el.css('font-weight', movingLabels[c1].fontWeight);
                         movingLabels[c1].el.appendTo(plotDiv);
 
                         movingLabels[c1].elWidth = movingLabels[c1].el.width();

From efa375114ef04a07a4664f1e030cd1df60df3379 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Thu, 10 Jan 2013 16:52:30 +0200
Subject: [PATCH 091/107] Enabled automatic addition of "return" statement for
 asymptotes, xrange.min, and xrange.max.

---
 .../js/src/graphical_slider_tool/graph.js     | 261 ++++++++++++++----
 1 file changed, 209 insertions(+), 52 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 656ff82690..dc196bfb34 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -72,8 +72,12 @@ define('Graph', ['logme'], function (logme) {
             return;
         }
 
-        createMarkingsFunctions();
-        createMovingLabelFunctions();
+        if (createMarkingsFunctions() === false) {
+            return;
+        }
+        if (createMovingLabelFunctions() === false) {
+            return;
+        }
 
         // Create the initial graph and plot it for the user to see.
         if (generateData() === true) {
@@ -87,21 +91,26 @@ define('Graph', ['logme'], function (logme) {
         return;
 
         function createMovingLabelFunctions() {
-            var c1;
+            var c1, returnStatus;
 
+            returnStatus = true;
             movingLabels = [];
 
             if (config.plot.hasOwnProperty('moving_label') !== true) {
-                return ;
-            }
-
-            if ($.isPlainObject(config.plot.moving_label) === true) {
-                processMovingLabel(config.plot.moving_label);
+                returnStatus = true;
+            } else if ($.isPlainObject(config.plot.moving_label) === true) {
+                if (processMovingLabel(config.plot.moving_label) === false) {
+                    returnStatus = false;
+                }
             } else if ($.isArray(config.plot.moving_label) === true) {
                 for (c1 = 0; c1 < config.plot.moving_label.length; c1++) {
-                    processMovingLabel(config.plot.moving_label[c1]);
+                    if (processMovingLabel(config.plot.moving_label[c1]) === false) {
+                        returnStatus = false;
+                    }
                 }
             }
+
+            return returnStatus;
         }
 
         function processMovingLabel(obj) {
@@ -111,24 +120,24 @@ define('Graph', ['logme'], function (logme) {
             if (obj.hasOwnProperty('@text') === false) {
                 logme('ERROR: You did not define a "text" attribute for the moving_label.');
 
-                return;
+                return false;
             }
             if (typeof obj['@text'] !== 'string') {
                 logme('ERROR: "text" attribute is not a string.');
 
-                return;
+                return false;
             }
             labelText = obj['@text'];
 
             if (obj.hasOwnProperty('#text') === false) {
                 logme('ERROR: moving_label is missing function declaration.');
 
-                return;
+                return false;
             }
             if (typeof obj['#text'] !== 'string') {
                 logme('ERROR: Function declaration is not a string.');
 
-                return;
+                return false;
             }
             funcString = obj['#text'];
 
@@ -197,7 +206,7 @@ define('Graph', ['logme'], function (logme) {
 
                 paramNames.pop();
 
-                return;
+                return false;
             }
 
             paramNames.pop();
@@ -209,23 +218,31 @@ define('Graph', ['logme'], function (logme) {
                 'fontColor': fontColor,
                 'fontWeight': fontWeight
             });
+
+            return true;
         }
 
         function createMarkingsFunctions() {
-            var c1, paramNames;
+            var c1, paramNames, returnStatus;
+
+            returnStatus = true;
 
             asymptotes = [];
             paramNames = state.getAllParameterNames();
 
             if ($.isPlainObject(config.plot.asymptote)) {
-                processAsymptote(config.plot.asymptote);
+                if (processAsymptote(config.plot.asymptote) === false) {
+                    returnStatus = false;
+                }
             } else if ($.isArray(config.plot.asymptote)) {
                 for (c1 = 0; c1 < config.plot.asymptote.length; c1 += 1) {
-                    processAsymptote(config.plot.asymptote[c1]);
+                    if (processAsymptote(config.plot.asymptote[c1]) === false) {
+                        returnStatus = false;
+                    }
                 }
             }
 
-            return;
+            return returnStatus;
 
             // Read configuration options for asymptotes, and store them as
             // an array of objects. Each object will have 3 properties:
@@ -259,12 +276,12 @@ define('Graph', ['logme'], function (logme) {
                     } else {
                         logme('ERROR: Attribute "type" for asymptote can be "x" or "y".');
 
-                        return;
+                        return false;
                     }
                 } else {
                     logme('ERROR: Attribute "type" for asymptote is not specified.');
 
-                    return;
+                    return false;
                 }
 
                 if (typeof asyObj['#text'] === 'string') {
@@ -272,7 +289,7 @@ define('Graph', ['logme'], function (logme) {
                 } else {
                     logme('ERROR: Function body for asymptote is not specified.');
 
-                    return;
+                    return false;
                 }
 
                 newAsyObj.color = '#000';
@@ -288,6 +305,29 @@ define('Graph', ['logme'], function (logme) {
                     newAsyObj.label = asyObj['@label'];
                 }
 
+                funcString = $('<div>').html(funcString).text();
+
+                disableAutoReturn = asyObj['@disable_auto_return'];
+                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.'
+                        );
+                    }
+                }
+
                 paramNames.push(funcString);
 
                 try {
@@ -296,13 +336,15 @@ define('Graph', ['logme'], function (logme) {
                     logme('ERROR: Asymptote function body could not be converted to function object.');
                     logme('Error message: "".' + err.message);
 
-                    return;
+                    return false;
                 }
 
                 paramNames.pop();
 
                 newAsyObj.func = func;
                 asymptotes.push(newAsyObj);
+
+                return true;
             }
         }
 
@@ -480,75 +522,187 @@ define('Graph', ['logme'], function (logme) {
         }
 
         function setGraphXRange() {
-            var xRangeStr, xRangeBlobs, tempNum, allParamNames;
+            var xRangeStr, xRangeBlobs, tempNum, allParamNames, funcString,
+                disableAutoReturn;
 
             xrange = {};
 
             if ($.isPlainObject(config.plot.xrange) === false) {
-                logme('ERROR: Expected config.plot.xrange to be an object. It is not.');
+                logme(
+                    'ERROR: Expected config.plot.xrange to be an object. ' +
+                    'It is not.'
+                );
                 logme('config.plot.xrange = ', config.plot.xrange);
 
                 return false;
             }
 
-            if (typeof config.plot.xrange.min !== 'string') {
-                logme('ERROR: Expected config.plot.xrange.min to be a string. It is not.');
-                logme('config.plot.xrange.min = ', config.plot.xrange.min);
+            if (config.plot.xrange.hasOwnProperty('min') === false) {
+                logme(
+                    'ERROR: Expected config.plot.xrange.min to be ' +
+                    'present. It is not.'
+                );
 
                 return false;
             }
 
-            if (typeof config.plot.xrange.max !== 'string') {
-                logme('ERROR: Expected config.plot.xrange.max to be a string. It is not.');
-                logme('config.plot.xrange.max = ', config.plot.xrange.max);
+            disableAutoReturn = false;
+            if (typeof config.plot.xrange.min === 'string') {
+                funcString = config.plot.xrange.min;
+            } else if (
+                ($.isPlainObject(config.plot.xrange.min) === true) &&
+                (config.plot.xrange.min.hasOwnProperty('#text') === true) &&
+                (typeof config.plot.xrange.min['#text'] === 'string')
+            ) {
+                funcString = config.plot.xrange.min['#text'];
+
+                disableAutoReturn =
+                    config.plot.xrange.min['@disable_auto_return'];
+                if (
+                    (disableAutoReturn === undefined) ||
+                    (
+                        (typeof disableAutoReturn === 'string') &&
+                        (disableAutoReturn.toLowerCase() !== 'true')
+                    )
+                ) {
+                    disableAutoReturn = false;
+                } else {
+                    disableAutoReturn = true;
+                }
+            } else {
+                logme(
+                    'ERROR: Could not get a function definition for ' +
+                    'xrange.min property.'
+                );
 
                 return false;
             }
 
+            funcString = $('<div>').html(funcString).text();
+
+            if (disableAutoReturn === false) {
+                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.'
+                    );
+                }
+            }
+
             allParamNames = state.getAllParameterNames();
 
-            allParamNames.push(config.plot.xrange.min);
+            allParamNames.push(funcString);
             try {
                 xrange.min = Function.apply(null, allParamNames);
             } catch (err) {
-                logme('ERROR: could not create a function from the string "' + config.plot.xrange.min + '" for xrange.min.');
+                logme(
+                    'ERROR: could not create a function from the string "' +
+                    funcString + '" for xrange.min.'
+                );
                 logme('Error message: "' + err.message + '"');
 
-                $('#' + gstId).html('<div style="color: red;">' + 'ERROR IN XML: Could not create a function from the string "' + config.plot.xrange.min + '" for xrange.min.' + '</div>');
-                $('#' + gstId).append('<div style="color: red;">' + 'Error message: "' + err.message + '".' + '</div>');
+                $('#' + gstId).html(
+                    '<div style="color: red;">' + 'ERROR IN ' +
+                    'XML: Could not create a function from the string "' +
+                    funcString + '" for xrange.min.' + '</div>'
+                );
+                $('#' + gstId).append(
+                    '<div style="color: red;">' + 'Error ' +
+                    'message: "' + err.message + '".' + '</div>'
+                );
 
                 return false;
             }
             allParamNames.pop();
 
-            allParamNames.push(config.plot.xrange.max);
+            if (config.plot.xrange.hasOwnProperty('max') === false) {
+                logme(
+                    'ERROR: Expected config.plot.xrange.max to be ' +
+                    'present. It is not.'
+                );
+
+                return false;
+            }
+
+            disableAutoReturn = false;
+            if (typeof config.plot.xrange.max === 'string') {
+                funcString = config.plot.xrange.max;
+            } else if (
+                ($.isPlainObject(config.plot.xrange.max) === true) &&
+                (config.plot.xrange.max.hasOwnProperty('#text') === true) &&
+                (typeof config.plot.xrange.max['#text'] === 'string')
+            ) {
+                funcString = config.plot.xrange.max['#text'];
+
+                disableAutoReturn =
+                    config.plot.xrange.max['@disable_auto_return'];
+                if (
+                    (disableAutoReturn === undefined) ||
+                    (
+                        (typeof disableAutoReturn === 'string') &&
+                        (disableAutoReturn.toLowerCase() !== 'true')
+                    )
+                ) {
+                    disableAutoReturn = false;
+                } else {
+                    disableAutoReturn = true;
+                }
+            } else {
+                logme(
+                    'ERROR: Could not get a function definition for ' +
+                    'xrange.max property.'
+                );
+
+                return false;
+            }
+
+            funcString = $('<div>').html(funcString).text();
+
+            if (disableAutoReturn === false) {
+                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.'
+                    );
+                }
+            }
+
+            allParamNames.push(funcString);
             try {
                 xrange.max = Function.apply(null, allParamNames);
             } catch (err) {
-                logme('ERROR: could not create a function from the string "' + config.plot.xrange.max + '" for xrange.max.');
+                logme(
+                    'ERROR: could not create a function from the string "' +
+                    funcString + '" for xrange.max.'
+                );
                 logme('Error message: "' + err.message + '"');
 
-                $('#' + gstId).html('<div style="color: red;">' + 'ERROR IN XML: Could not create a function from the string "' + config.plot.xrange.max + '" for xrange.max.' + '</div>');
-                $('#' + gstId).append('<div style="color: red;">' + 'Error message: "' + err.message + '".' + '</div>');
+                $('#' + gstId).html(
+                    '<div style="color: red;">' + 'ERROR IN ' +
+                    'XML: Could not create a function from the string "' +
+                    funcString + '" for xrange.max.' + '</div>'
+                );
+                $('#' + gstId).append(
+                    '<div style="color: red;">' + 'Error message: "' +
+                    err.message + '".' + '</div>'
+                );
 
                 return false;
             }
             allParamNames.pop();
 
-            if (typeof config.plot.num_points !== 'string') {
-                // logme('ERROR: config.plot.num_points is not a string.');
-                // logme('config.plot.num_points = ', config.plot.num_points);
-
-                tempNum = plotDiv.width() / 5.0;
-            }
-
             tempNum = parseInt(config.plot.num_points, 10);
             if (isFinite(tempNum) === false) {
-                // logme('ERROR: Expected config.plot.num_points to be a a valid integer. It is not.');
-                // logme('config.plot.num_points = ', config.plot.num_points);
-
-                // return false;
-
                 tempNum = plotDiv.width() / 5.0;
             }
 
@@ -556,7 +710,10 @@ define('Graph', ['logme'], function (logme) {
                 (tempNum < 2) &&
                 (tempNum > 1000)
             ) {
-                logme('ERROR: Number of points is outside the allowed range [2, 1000]');
+                logme(
+                    'ERROR: Number of points is outside the allowed range ' +
+                    '[2, 1000]'
+                );
                 logme('config.plot.num_points = ' + tempNum);
 
                 return false;
@@ -954,7 +1111,7 @@ define('Graph', ['logme'], function (logme) {
                         logme('Error message: "' + err.message + '".');
 
                         $('#' + gstId).html('<div style="color: red;">' + 'ERROR IN XML: Could not generate data from function.' + '</div>');
-                        $('#' + gstId).append('<div style="color: red;">' + 'Error message: "' + err.message + '".' + '</div>');g
+                        $('#' + gstId).append('<div style="color: red;">' + 'Error message: "' + err.message + '".' + '</div>');
 
                         return false;
                     }

From f17e2466b1c4176d77ed19fa07f11a210fb26b08 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Fri, 11 Jan 2013 10:32:21 +0200
Subject: [PATCH 092/107] New feature: Now can specify x-axis and y-axisnames
 for ticks. Updated "Fick s Second Law" demo to demonstrate this.

---
 .../js/src/graphical_slider_tool/graph.js     | 102 ++++++++++++++++--
 1 file changed, 95 insertions(+), 7 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index dc196bfb34..bcc491548a 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -8,7 +8,7 @@ define('Graph', ['logme'], function (logme) {
 
     function Graph(gstId, config, state) {
         var plotDiv, dataSeries, functions, xaxis, yaxis, numPoints, xrange,
-            asymptotes, movingLabels;
+            asymptotes, movingLabels, xTicksNames, yTicksNames;
 
         state.barsConfig = {
             'N': 0,
@@ -349,7 +349,10 @@ define('Graph', ['logme'], function (logme) {
         }
 
         function setGraphAxes() {
-            xaxis = {};
+            xaxis = {
+                'tickFormatter': null
+            };
+
             if (typeof config.plot['xticks'] === 'string') {
                 if (processTicks(config.plot['xticks'], xaxis, 'xunits') === false) {
                     logme('ERROR: Could not process the ticks for x-axis.');
@@ -362,7 +365,9 @@ define('Graph', ['logme'], function (logme) {
                 return false;
             }
 
-            yaxis = {};
+            yaxis = {
+                'tickFormatter': null
+            };
             if (typeof config.plot['yticks'] === 'string') {
                 if (processTicks(config.plot['yticks'], yaxis, 'yunits') === false) {
                     logme('ERROR: Could not process the ticks for y-axis.');
@@ -375,8 +380,69 @@ define('Graph', ['logme'], function (logme) {
                 return false;
             }
 
+            xTicksNames = null;
+            yTicksNames = null;
+
+            if (checkForTicksNames('x') === false) {
+                return false;
+            }
+
+            if (checkForTicksNames('y') === false) {
+                return false;
+            }
+
             return true;
 
+            //
+            // function checkForTicksNames(axisName)
+            //
+            // The parameter "axisName" can be either "x" or "y" (string). Depending on it, the function
+            // will set "xTicksNames" or "yTicksNames" private variable.
+            //
+            // This function does not return anything. It sets the private variable "xTicksNames" ("yTicksNames")
+            // to the object converted by JSON.parse from the XML parameter "plot.xticks_names" ("plot.yticks_names").
+            // If the "plot.xticks_names" ("plot.yticks_names") is missing or it is not a valid JSON string, then
+            // "xTicksNames" ("yTicksNames") will be set to "null".
+            //
+            // Depending on the "xTicksNames" ("yTicksNames") being "null" or an object, the plot will either draw
+            // number ticks, or use the names specified by the opbject.
+            //
+            function checkForTicksNames(axisName) {
+                var tmpObj;
+
+                if ((axisName !== 'x') && (axisName !== 'y')) {
+                    // This is not an error. This funcion should simply stop executing.
+
+                    return true;
+                }
+
+                if (
+                    (config.plot.hasOwnProperty(axisName + 'ticks_names') === true) ||
+                    (typeof config.plot[axisName + 'ticks_names'] === 'string')
+                ) {
+                    try {
+                        tmpObj = JSON.parse(config.plot[axisName + 'ticks_names']);
+                    } catch (err) {
+                        logme(
+                            'ERROR: plot.' + axisName + 'ticks_names is not a valid JSON string.',
+                            'Error message: "' + err.message + '".'
+                        );
+
+                        return false;
+                    }
+
+                    if (axisName === 'x') {
+                        xTicksNames = tmpObj;
+                        xaxis.tickFormatter = xAxisTickFormatter;
+                    }
+                    // At this point, we are certain that axisName = 'y'.
+                    else {
+                        yTicksNames = tmpObj;
+                        yaxis.tickFormatter = yAxisTickFormatter;
+                    }
+                }
+            }
+
             function processTicks(ticksStr, ticksObj, unitsType) {
                 var ticksBlobs, tempFloat, tempTicks, c1, c2;
 
@@ -453,10 +519,6 @@ define('Graph', ['logme'], function (logme) {
                     ticksObj.ticks = tempTicks;
                 }
 
-                // ticksObj.font = {
-                //     'size': '16px'
-                // };
-
                 return true;
 
                 function roundToPrec(num, prec) {
@@ -1210,6 +1272,14 @@ define('Graph', ['logme'], function (logme) {
 
             paramValues = state.getAllParameterValues();
 
+            if (xaxis.tickFormatter !== null) {
+                xaxis.ticks = null;
+            }
+
+            if (yaxis.tickFormatter !== null) {
+                yaxis.ticks = null;
+            }
+
             // Tell Flot to draw the graph to our specification.
             plotObj = $.plot(
                 plotDiv,
@@ -1332,7 +1402,25 @@ define('Graph', ['logme'], function (logme) {
                 return markings;
             }
         }
+
+        function xAxisTickFormatter(val, axis) {
+            if (xTicksNames.hasOwnProperty(val.toFixed(axis.tickDecimals)) === true) {
+                return xTicksNames[val.toFixed(axis.tickDecimals)];
+            }
+
+            return '';
+        }
+
+        function yAxisTickFormatter(val, axis) {
+            if (yTicksNames.hasOwnProperty(val.toFixed(axis.tickDecimals)) === true) {
+                return yTicksNames[val.toFixed(axis.tickDecimals)];
+            }
+
+            return '';
+        }
     }
+
+
 });
 
 // End of wrapper for RequireJS. As you can see, we are passing

From 782fb3b465a9265d977f5712a4f62f37e64c9a36 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Fri, 11 Jan 2013 11:02:58 +0200
Subject: [PATCH 093/107] New feature: Can specify "change" or "slide" event
 type of sliders.

---
 .../xmodule/js/src/graphical_slider_tool/sliders.js | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

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 7c9b5f1c38..8005c97180 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
@@ -6,7 +6,7 @@ define('Sliders', ['logme'], function (logme) {
     return Sliders;
 
     function Sliders(gstId, state) {
-        var c1, paramName, allParamNames, sliderDiv;
+        var c1, paramName, allParamNames, sliderDiv, onEvent;
 
         allParamNames = state.getAllParameterNames();
 
@@ -16,7 +16,11 @@ define('Sliders', ['logme'], function (logme) {
             sliderDiv = $('#' + gstId + '_slider_' + paramName);
 
             if (sliderDiv.length === 1) {
-                createSlider(sliderDiv, paramName);
+                onEvent = 'slide';
+                if (sliderDiv.attr('data-on_event') === 'change') {
+                    onEvent = 'change';
+                }
+                createSlider(sliderDiv, paramName, onEvent);
             } else if (sliderDiv.length > 1) {
                 logme('ERROR: Found more than one slider for the parameter "' + paramName + '".');
                 logme('sliderDiv.length = ', sliderDiv.length);
@@ -25,7 +29,7 @@ define('Sliders', ['logme'], function (logme) {
             }
         }
 
-        function createSlider(sliderDiv, paramName) {
+        function createSlider(sliderDiv, paramName, onEvent) {
             var paramObj;
 
             paramObj = state.getParamObj(paramName);
@@ -46,8 +50,7 @@ define('Sliders', ['logme'], function (logme) {
                 'value': paramObj.value,
                 'step': paramObj.step,
 
-                // 'change': sliderOnChange,
-                'slide': sliderOnSlide
+                onEvent: sliderOnSlide
             });
 
             // Tell the parameter object stored in state that we have a slider

From a75003ef2feb15cd8843340f869f6bc24f820486 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Fri, 11 Jan 2013 11:23:25 +0200
Subject: [PATCH 094/107] added no_slide parameters

---
 common/lib/xmodule/xmodule/gst_module.py | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index c29e4e6a04..c4771f3bcb 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -102,15 +102,18 @@ class GraphicalSliderToolModule(XModule):
         #substitute sliders
         slider_div = '<div class="{element_class}_slider" \
                                    id="{element_id}_slider_{var}" \
-                                   data-var="{var}" style="{style}">\
+                                   data-var="{var}" \
+                                   data-on_event="{on_event}" \
+                                   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', ""))))
+                                    element_id=self.html_id,
+                                    var=slider_el.get('var', ""),
+                                    on_event=slider_el.get('on_event', 'slide'),
+                                    style=slider_el.get('style', ""))))
 
         # substitute inputs aka textboxes
         input_div = '<input class="{element_class}_input" \

From 271c182f4e44b53e375f7ec68319b964a6deba92 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Fri, 11 Jan 2013 11:47:20 +0200
Subject: [PATCH 095/107] Fixed bug: jQuery slider default change event name is
 "slidechange", and it behaves a bit differently than "slide" event.

---
 .../xmodule/js/src/graphical_slider_tool/sliders.js   | 11 ++++++-----
 .../xmodule/js/src/graphical_slider_tool/state.js     |  2 +-
 2 files changed, 7 insertions(+), 6 deletions(-)

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 8005c97180..a12f0099c6 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
@@ -18,8 +18,9 @@ define('Sliders', ['logme'], function (logme) {
             if (sliderDiv.length === 1) {
                 onEvent = 'slide';
                 if (sliderDiv.attr('data-on_event') === 'change') {
-                    onEvent = 'change';
+                    onEvent = 'slidechange';
                 }
+
                 createSlider(sliderDiv, paramName, onEvent);
             } else if (sliderDiv.length > 1) {
                 logme('ERROR: Found more than one slider for the parameter "' + paramName + '".');
@@ -48,9 +49,7 @@ define('Sliders', ['logme'], function (logme) {
                 'min': paramObj.min,
                 'max': paramObj.max,
                 'value': paramObj.value,
-                'step': paramObj.step,
-
-                onEvent: sliderOnSlide
+                'step': paramObj.step
             });
 
             // Tell the parameter object stored in state that we have a slider
@@ -58,6 +57,9 @@ define('Sliders', ['logme'], function (logme) {
             // will also update the value of this slider.
             paramObj.sliderDiv = sliderDiv;
 
+            // Atach a callback to update the slider's parameter.
+            paramObj.sliderDiv.on(onEvent, sliderOnSlide);
+
             return;
 
             // Update the 'state' - i.e. set the value of the parameter this
@@ -66,7 +68,6 @@ define('Sliders', ['logme'], function (logme) {
             // 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
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 c1cfcd1b04..e5cd8634bc 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
@@ -241,7 +241,7 @@ define('State', ['logme'], function (logme) {
             }
 
             // Update the single slider with the new parameter's value.
-            if (parameters[paramName].sliderDiv !== null) {
+            if ((slider === false) && (parameters[paramName].sliderDiv !== null)) {
                 parameters[paramName].sliderDiv.slider('value', paramValueNum);
             }
 

From 052dc3fa228bf17511ad5f8dae6623acd58bb5d4 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Fri, 11 Jan 2013 14:39:50 +0200
Subject: [PATCH 096/107] New feature: For bar graphs, can specify bar width
 and bar alignment.

---
 .../js/src/graphical_slider_tool/graph.js     | 129 +++++++++++++-----
 1 file changed, 94 insertions(+), 35 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index bcc491548a..7099a910a4 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -8,18 +8,7 @@ define('Graph', ['logme'], function (logme) {
 
     function Graph(gstId, config, state) {
         var plotDiv, dataSeries, functions, xaxis, yaxis, numPoints, xrange,
-            asymptotes, movingLabels, xTicksNames, yTicksNames;
-
-        state.barsConfig = {
-            'N': 0,
-            'delta': 0,
-            'diff': 0,
-            'width': 0,
-            'width_perc': 0.8,
-            'margin': 0.1,
-            'total': 0.4,
-            'total_half': 0.2
-        };
+            asymptotes, movingLabels, xTicksNames, yTicksNames, graphBarWidth, graphBarAlign;
 
         // We need plot configuration settings. Without them we can't continue.
         if ($.isPlainObject(config.plot) === false) {
@@ -62,6 +51,15 @@ define('Graph', ['logme'], function (logme) {
             return;
         }
 
+        graphBarWidth = 1;
+        graphBarAlign = null;
+
+        getBarWidth();
+        getBarAlign();
+
+        logme('graphBarWidth = ' + graphBarWidth);
+        logme('graphBarAlign = ' + graphBarAlign);
+
         // Get the user defined functions. If there aren't any, don't do
         // anything else.
         createFunctions();
@@ -90,6 +88,52 @@ define('Graph', ['logme'], function (logme) {
 
         return;
 
+        function getBarWidth() {
+            if (config.plot.hasOwnProperty('bar_width') === false) {
+                return;
+            }
+
+            if (typeof config.plot.bar_width !== 'string') {
+                logme('ERROR: The parameter config.plot.bar_width must be a string.');
+
+                return;
+            }
+
+            if (isFinite(graphBarWidth = parseFloat(config.plot.bar_width)) === false) {
+                logme('ERROR: The parameter config.plot.bar_width is not a valid floating number.');
+                graphBarWidth = 1;
+
+                return;
+            }
+
+            return;
+        }
+
+        function getBarAlign() {
+            if (config.plot.hasOwnProperty('bar_align') === false) {
+                return;
+            }
+
+            if (typeof config.plot.bar_align !== 'string') {
+                logme('ERROR: The parameter config.plot.bar_align must be a string.');
+
+                return;
+            }
+
+            if (
+                (config.plot.bar_align.toLowerCase() !== 'left') &&
+                (config.plot.bar_align.toLowerCase() !== 'center')
+            ) {
+                logme('ERROR: Property config.plot.bar_align can be one of "left", or "center".');
+
+                return;
+            }
+
+            graphBarAlign = config.plot.bar_align.toLowerCase();
+
+            return;
+        }
+
         function createMovingLabelFunctions() {
             var c1, returnStatus;
 
@@ -1015,9 +1059,7 @@ define('Graph', ['logme'], function (logme) {
                 if (newFunctionObject['bars'] === true) {
                     newFunctionObject['line'] = false;
                     newFunctionObject['dot'] = false;
-
-                    newFunctionObject.barIndex = state.barsConfig.N;
-                    state.barsConfig.N += 1;
+                    // To do: See if need to do anything here.
                 } else if (
                     (newFunctionObject['dot'] === false) &&
                     (newFunctionObject['line'] === false)
@@ -1078,7 +1120,7 @@ define('Graph', ['logme'], function (logme) {
 
         function generateData() {
             var c0, c1, functionObj, seriesObj, dataPoints, paramValues, x, y,
-                start, end, step, tempX;
+                start, end, step, numNotUndefined;
 
             paramValues = state.getAllParameterValues();
 
@@ -1087,14 +1129,6 @@ define('Graph', ['logme'], function (logme) {
             for (c0 = 0; c0 < functions.length; c0 += 1) {
                 functionObj = functions[c0];
 
-                seriesObj = {};
-                dataPoints = [];
-
-                // For counting number of points added. In the end we will
-                // compare this number to 'numPoints' specified in the config
-                // JSON.
-                c1 = 0;
-
                 try {
                     start = xrange.min.apply(window, paramValues);
                 } catch (err) {
@@ -1117,10 +1151,16 @@ define('Graph', ['logme'], function (logme) {
 
                     return false;
                 }
-                step = (end - start) / (numPoints - 1);
 
-                state.barsConfig.delta = (step * state.barsConfig.total) / state.barsConfig.N;
-                state.barsConfig.diff = step * state.barsConfig.total_half;
+                seriesObj = {};
+                dataPoints = [];
+
+                // For counting number of points added. In the end we will
+                // compare this number to 'numPoints' specified in the config
+                // JSON.
+                c1 = 0;
+
+                step = (end - start) / (numPoints - 1);
 
                 // Generate the data points.
                 for (x = start; x <= end; x += step) {
@@ -1143,18 +1183,12 @@ define('Graph', ['logme'], function (logme) {
                         return false;
                     }
 
-                    if (functionObj.bars === true) {
-                        tempX = x - state.barsConfig.diff + (functionObj.barIndex + state.barsConfig.margin) * state.barsConfig.delta;
-                    } else {
-                        tempX = x;
-                    }
-
                     // Return the paramValues array to how it was before we
                     // added 'x' variable to the end of it.
                     paramValues.pop();
 
                     // Add the generated point to the data points set.
-                    dataPoints.push([tempX, y]);
+                    dataPoints.push([x, y]);
 
                     c1 += 1;
 
@@ -1233,9 +1267,13 @@ define('Graph', ['logme'], function (logme) {
 
                 seriesObj.bars = {
                     'show': functionObj.bars,
-                    'barWidth': state.barsConfig.delta * state.barsConfig.width_perc
+                    'barWidth': graphBarWidth
                 };
 
+                if (graphBarAlign !== null) {
+                    seriesObj.bars.align = graphBarAlign;
+                }
+
                 if (functionObj.hasOwnProperty('pointSize')) {
                     seriesObj.points.radius = functionObj.pointSize;
                 }
@@ -1245,6 +1283,27 @@ define('Graph', ['logme'], function (logme) {
                 dataSeries.push(seriesObj);
             }
 
+            if (graphBarAlign === null) {
+                for (c0 = 0; c0 < numPoints; c0 += 1) {
+                    // Number of points that have a value other than 'undefined' (undefined).
+                    numNotUndefined = 0;
+
+                    for (c1 = 0; c1 < dataSeries.length; c1 += 1) {
+                        logme('c1 = ' + c1 + ', dataSeries[c1].data[c0][1] = ' + dataSeries[c1].data[c0][1]);
+
+                        if (isFinite(parseInt(dataSeries[c1].data[c0][1])) === true) {
+                            numNotUndefined += 1;
+                        }
+                    }
+
+                    logme('Point number = ' + c0 + ', numNotUndefined = ' + numNotUndefined);
+
+                    for (c1 = 0; c1 < dataSeries.length; c1 += 1) {
+                        dataSeries[c1].data[c0][0] -= graphBarWidth * (0.5 * numNotUndefined - c1);
+                    }
+                }
+            }
+
             for (c0 = 0; c0 < asymptotes.length; c0 += 1) {
 
                 // If the user defined a label for this asympote, then the

From 77962e3cdb6eb443c3ca82325fc4c58e5350e66a Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Fri, 11 Jan 2013 15:35:48 +0200
Subject: [PATCH 097/107] Removed unnecessary comments. Added feature to update
 element either on "change" or on "slide" event.

---
 .../js/src/graphical_slider_tool/el_output.js | 36 ++++++++++---------
 .../js/src/graphical_slider_tool/graph.js     | 16 ++++-----
 .../js/src/graphical_slider_tool/sliders.js   | 23 ++++++------
 .../js/src/graphical_slider_tool/state.js     | 23 ++++--------
 4 files changed, 46 insertions(+), 52 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
index 8bad5e06b4..f98e890af9 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
@@ -25,7 +25,7 @@ define('ElOutput', ['logme'], function (logme) {
         return;
 
         function processFuncObj(obj) {
-            var paramNames, funcString, func, special, el, disableAutoReturn;
+            var paramNames, funcString, func, el, disableAutoReturn, updateOnEvent;
 
             // We are only interested in functions that are meant for output to an
             // element.
@@ -48,6 +48,15 @@ define('ElOutput', ['logme'], function (logme) {
                 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'];
@@ -99,25 +108,20 @@ define('ElOutput', ['logme'], function (logme) {
 
             paramNames.pop();
 
-            special = false;
-            if (obj['@el_id'][0] === '_') {
-                special = true;
-            } else {
-                el = $('#' + obj['@el_id']);
+            el = $('#' + obj['@el_id']);
 
-                if (el.length !== 1) {
-                    logme(
-                        'ERROR: DOM element with ID "' + obj['@el_id'] + '" ' +
-                        'not found. Dynamic element not created.'
-                    );
+            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()));
+                return;
             }
 
-            state.addDynamicEl(el, func, obj['@el_id'], special);
+            el.html(func.apply(window, state.getAllParameterValues()));
+
+            state.addDynamicEl(el, func, obj['@el_id'], updateOnEvent);
         }
 
     }
diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 7099a910a4..ad25c5f27c 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -57,9 +57,6 @@ define('Graph', ['logme'], function (logme) {
         getBarWidth();
         getBarAlign();
 
-        logme('graphBarWidth = ' + graphBarWidth);
-        logme('graphBarAlign = ' + graphBarAlign);
-
         // Get the user defined functions. If there aren't any, don't do
         // anything else.
         createFunctions();
@@ -1119,7 +1116,7 @@ define('Graph', ['logme'], function (logme) {
         }
 
         function generateData() {
-            var c0, c1, functionObj, seriesObj, dataPoints, paramValues, x, y,
+            var c0, c1, c3, functionObj, seriesObj, dataPoints, paramValues, x, y,
                 start, end, step, numNotUndefined;
 
             paramValues = state.getAllParameterValues();
@@ -1289,17 +1286,18 @@ define('Graph', ['logme'], function (logme) {
                     numNotUndefined = 0;
 
                     for (c1 = 0; c1 < dataSeries.length; c1 += 1) {
-                        logme('c1 = ' + c1 + ', dataSeries[c1].data[c0][1] = ' + dataSeries[c1].data[c0][1]);
-
                         if (isFinite(parseInt(dataSeries[c1].data[c0][1])) === true) {
                             numNotUndefined += 1;
                         }
                     }
 
-                    logme('Point number = ' + c0 + ', numNotUndefined = ' + numNotUndefined);
-
+                    c3 = 0;
                     for (c1 = 0; c1 < dataSeries.length; c1 += 1) {
-                        dataSeries[c1].data[c0][0] -= graphBarWidth * (0.5 * numNotUndefined - c1);
+                        dataSeries[c1].data[c0][0] -= graphBarWidth * (0.5 * numNotUndefined - c3);
+
+                        if (isFinite(parseInt(dataSeries[c1].data[c0][1])) === true) {
+                            c3 += 1;
+                        }
                     }
                 }
             }
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 a12f0099c6..6201da8237 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
@@ -6,7 +6,7 @@ define('Sliders', ['logme'], function (logme) {
     return Sliders;
 
     function Sliders(gstId, state) {
-        var c1, paramName, allParamNames, sliderDiv, onEvent;
+        var c1, paramName, allParamNames, sliderDiv;
 
         allParamNames = state.getAllParameterNames();
 
@@ -16,12 +16,7 @@ define('Sliders', ['logme'], function (logme) {
             sliderDiv = $('#' + gstId + '_slider_' + paramName);
 
             if (sliderDiv.length === 1) {
-                onEvent = 'slide';
-                if (sliderDiv.attr('data-on_event') === 'change') {
-                    onEvent = 'slidechange';
-                }
-
-                createSlider(sliderDiv, paramName, onEvent);
+                createSlider(sliderDiv, paramName);
             } else if (sliderDiv.length > 1) {
                 logme('ERROR: Found more than one slider for the parameter "' + paramName + '".');
                 logme('sliderDiv.length = ', sliderDiv.length);
@@ -30,7 +25,7 @@ define('Sliders', ['logme'], function (logme) {
             }
         }
 
-        function createSlider(sliderDiv, paramName, onEvent) {
+        function createSlider(sliderDiv, paramName) {
             var paramObj;
 
             paramObj = state.getParamObj(paramName);
@@ -57,8 +52,9 @@ define('Sliders', ['logme'], function (logme) {
             // will also update the value of this slider.
             paramObj.sliderDiv = sliderDiv;
 
-            // Atach a callback to update the slider's parameter.
-            paramObj.sliderDiv.on(onEvent, sliderOnSlide);
+            // Atach callbacks to update the slider's parameter.
+            paramObj.sliderDiv.on('slide', sliderOnSlide);
+            paramObj.sliderDiv.on('slidechange', sliderOnChange);
 
             return;
 
@@ -72,10 +68,15 @@ define('Sliders', ['logme'], function (logme) {
                 // 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) === undefined) {
+                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 + '".');
+                }
             }
         }
     }
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 e5cd8634bc..c7e54289be 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
@@ -98,8 +98,6 @@ define('State', ['logme'], function (logme) {
             'bindUpdatePlotEvent': bindUpdatePlotEvent,
             'addDynamicEl': addDynamicEl,
 
-            'getFuncForSpecialLabel': getFuncForSpecialLabel,
-
             // plde is an abbreviation for Plot Label Dynamic Elements.
             plde: []
         };
@@ -128,14 +126,14 @@ define('State', ['logme'], function (logme) {
             plotDiv.bind('update_plot', callback);
         }
 
-        function addDynamicEl(el, func, elId, special) {
+        function addDynamicEl(el, func, elId, updateOnEvent) {
             var newLength;
 
             newLength = dynamicEl.push({
                 'el': el,
                 'func': func,
                 'elId': elId,
-                'special': special
+                'updateOnEvent': updateOnEvent
             });
 
             if (typeof dynamicElByElId[elId] !== 'undefined') {
@@ -147,16 +145,6 @@ define('State', ['logme'], function (logme) {
             }
         }
 
-        function getFuncForSpecialLabel(elId) {
-            if (typeof dynamicElByElId[elId] === 'undefined') {
-                logme('ERROR: Special label with ID "' + elId + '" does not exist.');
-
-                return null;
-            }
-
-            return dynamicElByElId[elId].func;
-        }
-
         function getParameterValue(paramName) {
 
             // If the name of the constant is not tracked by state, return an
@@ -203,7 +191,7 @@ define('State', ['logme'], function (logme) {
         // original value.
         //
         // ####################################################################
-        function setParameterValue(paramName, paramValue, element, slider) {
+        function setParameterValue(paramName, paramValue, element, slider, updateOnEvent) {
             var paramValueNum, c1;
 
             // If a parameter with the name specified by the 'paramName'
@@ -249,7 +237,10 @@ define('State', ['logme'], function (logme) {
             allParameterValues[parameters[paramName].helperArrayIndex] = paramValueNum;
 
             for (c1 = 0; c1 < dynamicEl.length; c1++) {
-                if (dynamicEl[c1].special !== true) {
+                if (
+                    ((updateOnEvent !== undefined) && (dynamicEl[c1].updateOnEvent === updateOnEvent)) ||
+                    (updateOnEvent === undefined)
+                ) {
                     dynamicEl[c1].el.html(dynamicEl[c1].func.apply(window, allParameterValues));
                 }
             }

From 1770de73f1d9b9b25c348fc5eea365ebd00c49c5 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Fri, 11 Jan 2013 15:54:19 +0200
Subject: [PATCH 098/107] Bugfixing. Refactoring. Removed readonly check for
 text edits. Styling of text edits with jQuery UI.

---
 .../js/src/graphical_slider_tool/graph.js     |  8 ++++
 .../js/src/graphical_slider_tool/inputs.js    | 44 ++++++-------------
 2 files changed, 22 insertions(+), 30 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index ad25c5f27c..6208f5fc3a 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -1286,6 +1286,10 @@ define('Graph', ['logme'], function (logme) {
                     numNotUndefined = 0;
 
                     for (c1 = 0; c1 < dataSeries.length; c1 += 1) {
+                        if (dataSeries[c1].bars.show === false) {
+                            continue;
+                        }
+
                         if (isFinite(parseInt(dataSeries[c1].data[c0][1])) === true) {
                             numNotUndefined += 1;
                         }
@@ -1293,6 +1297,10 @@ define('Graph', ['logme'], function (logme) {
 
                     c3 = 0;
                     for (c1 = 0; c1 < dataSeries.length; c1 += 1) {
+                        if (dataSeries[c1].bars.show === false) {
+                            continue;
+                        }
+
                         dataSeries[c1].data[c0][0] -= graphBarWidth * (0.5 * numNotUndefined - c3);
 
                         if (isFinite(parseInt(dataSeries[c1].data[c0][1])) === true) {
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
index e48174ddb5..a04ed113ec 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/inputs.js
@@ -26,7 +26,7 @@ define('Inputs', ['logme'], function (logme) {
         return;
 
         function createInput(inputDiv, paramName) {
-            var paramObj, readOnly;
+            var paramObj;
 
             paramObj = state.getParamObj(paramName);
 
@@ -37,41 +37,25 @@ define('Inputs', ['logme'], function (logme) {
                 return;
             }
 
-            readOnly = false;
-            if (inputDiv.attr('data-el_readonly').toLowerCase() === 'true') {
-                readOnly = true;
-            }
-
-            if (readOnly === true) {
-
-                // In the case of a readonly config option, configure the text
-                // inputit as read-only, and NOT bind an event to it.
-                inputDiv.attr('readonly', 'readonly');
-                inputDiv.css('background-color', '#D3D3D3');
-
-            } else { // readonly !== true
-
-                // 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);
-
-            }
+            // 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'
-            // });
+            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

From ec0bdfb445cb2e23eed34f1ef6f8ff93180e89d4 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Fri, 11 Jan 2013 15:59:54 +0200
Subject: [PATCH 099/107] New feature: can specify output of "none" for a
 dynamic element.

---
 .../js/src/graphical_slider_tool/el_output.js | 24 +++++++++++--------
 .../js/src/graphical_slider_tool/state.js     |  4 ++++
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
index f98e890af9..3c64857d99 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
@@ -31,7 +31,7 @@ define('ElOutput', ['logme'], function (logme) {
             // element.
             if (
                 (typeof obj['@output'] !== 'string') ||
-                (obj['@output'].toLowerCase() !== 'element')
+                ((obj['@output'].toLowerCase() !== 'element') && (obj['@output'].toLowerCase() !== 'none'))
             ) {
                 return;
             }
@@ -108,19 +108,23 @@ define('ElOutput', ['logme'], function (logme) {
 
             paramNames.pop();
 
-            el = $('#' + obj['@el_id']);
+            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.'
-                );
+                if (el.length !== 1) {
+                    logme(
+                        'ERROR: DOM element with ID "' + obj['@el_id'] + '" ' +
+                        'not found. Dynamic element not created.'
+                    );
 
-                return;
+                    return;
+                }
+
+                el.html(func.apply(window, state.getAllParameterValues()));
+            } else {
+                el = null;
             }
 
-            el.html(func.apply(window, state.getAllParameterValues()));
-
             state.addDynamicEl(el, func, obj['@el_id'], updateOnEvent);
         }
 
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 c7e54289be..e1da8cc022 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
@@ -237,6 +237,10 @@ define('State', ['logme'], function (logme) {
             allParameterValues[parameters[paramName].helperArrayIndex] = paramValueNum;
 
             for (c1 = 0; c1 < dynamicEl.length; c1++) {
+                if (dynamicEl[c1].el === null) {
+                    continue;
+                }
+
                 if (
                     ((updateOnEvent !== undefined) && (dynamicEl[c1].updateOnEvent === updateOnEvent)) ||
                     (updateOnEvent === undefined)

From b56174c8d4953941727ab2355fc353a8696d9b7d Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Fri, 11 Jan 2013 16:01:29 +0200
Subject: [PATCH 100/107] updated docs

---
 docs/source/gst_example_with_documentation.xml | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/docs/source/gst_example_with_documentation.xml b/docs/source/gst_example_with_documentation.xml
index a7a646d307..addada5b10 100644
--- a/docs/source/gst_example_with_documentation.xml
+++ b/docs/source/gst_example_with_documentation.xml
@@ -14,8 +14,8 @@
             <!-- make text and input or slider at the same line -->
             <div>
               <p style="float:left;"> Currently \(a\) is</p>
-              <!-- readonly input for b -->
-              <textbox var="a" style="width:50px; float:left; margin-left:10px;" readonly="false"/>
+              <!-- 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
@@ -26,7 +26,7 @@
             </p>
             <div>
               <p style="float:left;">Currently \(b\) is </p>
-              <textbox var="b" readonly="true" style="width:50px; float:left; margin-left:10px;"/>
+              <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>
@@ -57,7 +57,8 @@
             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\)">
-            return Math.sin(a * x);
+            <!-- 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) {
@@ -66,13 +67,15 @@
 
             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>
-              <max>return 30;</max>
+              <!-- works w/o return -->
+              <max>30</max>
           </xrange>
 
           <num_points>120</num_points>

From a49f94fe490b84afddbe644f1a53fdfd6c686e5e Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Fri, 11 Jan 2013 16:08:27 +0200
Subject: [PATCH 101/107] added none to allowed parameters in functions

---
 .../xmodule/xmodule/js/src/graphical_slider_tool/graph.js    | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
index 6208f5fc3a..2520f0b12f 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/graph.js
@@ -888,7 +888,8 @@ define('Graph', ['logme'], function (logme) {
 
                     // If this function is meant to be calculated for an
                     // element then skip it.
-                    if (obj['@output'].toLowerCase() === 'element') {
+                    if ((obj['@output'].toLowerCase() === 'element') ||
+                        (obj['@output'].toLowerCase() === 'none')) {
                         return;
                     }
 
@@ -904,7 +905,7 @@ define('Graph', ['logme'], function (logme) {
                     else if (obj['@output'].toLowerCase() !== 'graph') {
                         logme(
                             'ERROR: Function "output" attribute can be ' +
-                            'either "element", "plot_label",  or "graph".'
+                            'either "element", "plot_label", "none" or "graph".'
                         );
 
                         return;

From fc09bbd0b4aa93a6c564db5da92c7af5bc95bef3 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Fri, 11 Jan 2013 16:11:13 +0200
Subject: [PATCH 102/107] added funciton call

---
 .../lib/xmodule/xmodule/js/src/graphical_slider_tool/state.js   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 e1da8cc022..0d39ac6f41 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
@@ -238,7 +238,7 @@ define('State', ['logme'], function (logme) {
 
             for (c1 = 0; c1 < dynamicEl.length; c1++) {
                 if (dynamicEl[c1].el === null) {
-                    continue;
+                    dynamicEl[c1].func.apply(window, allParameterValues);
                 }
 
                 if (

From d3045b36abfb4b0b788426a8959a2a6e1f6f9b8c Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Fri, 11 Jan 2013 16:13:16 +0200
Subject: [PATCH 103/107] initial function call added, fix

---
 .../xmodule/xmodule/js/src/graphical_slider_tool/el_output.js    | 1 +
 common/lib/xmodule/xmodule/js/src/graphical_slider_tool/state.js | 1 +
 2 files changed, 2 insertions(+)

diff --git a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
index 3c64857d99..3175aae3f0 100644
--- a/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
+++ b/common/lib/xmodule/xmodule/js/src/graphical_slider_tool/el_output.js
@@ -123,6 +123,7 @@ define('ElOutput', ['logme'], function (logme) {
                 el.html(func.apply(window, state.getAllParameterValues()));
             } else {
                 el = null;
+                func.apply(window, state.getAllParameterValues());
             }
 
             state.addDynamicEl(el, func, obj['@el_id'], updateOnEvent);
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 0d39ac6f41..44d536e9be 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
@@ -239,6 +239,7 @@ define('State', ['logme'], function (logme) {
             for (c1 = 0; c1 < dynamicEl.length; c1++) {
                 if (dynamicEl[c1].el === null) {
                     dynamicEl[c1].func.apply(window, allParameterValues);
+                    continue;
                 }
 
                 if (

From c9c328cf3961abff553524b7a9d8e93017d52954 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Fri, 11 Jan 2013 16:18:43 +0200
Subject: [PATCH 104/107] Bugfix.

---
 .../js/src/graphical_slider_tool/state.js        | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

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 44d536e9be..8b534fd19d 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
@@ -237,16 +237,20 @@ define('State', ['logme'], function (logme) {
             allParameterValues[parameters[paramName].helperArrayIndex] = paramValueNum;
 
             for (c1 = 0; c1 < dynamicEl.length; c1++) {
-                if (dynamicEl[c1].el === null) {
-                    dynamicEl[c1].func.apply(window, allParameterValues);
-                    continue;
-                }
-
                 if (
                     ((updateOnEvent !== undefined) && (dynamicEl[c1].updateOnEvent === updateOnEvent)) ||
                     (updateOnEvent === undefined)
                 ) {
-                    dynamicEl[c1].el.html(dynamicEl[c1].func.apply(window, allParameterValues));
+                    // If we have a DOM element, call the function "paste" the answer into the DIV.
+                    if (dynamicEl[c1].el !== null) {
+                        dynamicEl[c1].el.html(dynamicEl[c1].func.apply(window, allParameterValues));
+                    }
+                    // If we DO NOT have an element, simply call the function. The function can then
+                    // manipulate all the DOM elements it wants, without the fear of them being overwritten
+                    // by us afterwards.
+                    else {
+                        dynamicEl[c1].func.apply(window, allParameterValues);
+                    }
                 }
             }
 

From 442e112d6faf7f39fb7e01666ea1b79390a416ec Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Tue, 15 Jan 2013 12:45:07 +0200
Subject: [PATCH 105/107] Updated documentation. Try #2.

---
 docs/source/graphical_slider_tool.rst     | 357 +++++++++++++++++-----
 docs/source/gst_example_bars.rst          |  64 ++++
 docs/source/gst_example_dynamic_labels    |  40 +++
 docs/source/gst_example_dynamic_range.xml |  16 +-
 4 files changed, 391 insertions(+), 86 deletions(-)
 create mode 100644 docs/source/gst_example_bars.rst
 create mode 100644 docs/source/gst_example_dynamic_labels

diff --git a/docs/source/graphical_slider_tool.rst b/docs/source/graphical_slider_tool.rst
index 6334c6d77e..37b17136e8 100644
--- a/docs/source/graphical_slider_tool.rst
+++ b/docs/source/graphical_slider_tool.rst
@@ -4,6 +4,7 @@ Xml format of graphical slider tool [xmodule]
 
 .. module:: xml_format_gst
 
+
 Format description
 ==================
 
@@ -14,101 +15,102 @@ Graphical slider tool (GST) main tag is::
 ``graphical_slider_tool`` tag must have two children tags: ``render``
 and ``configuration``.
 
+
 Render tag
 ----------
 
 Render tag can contain usual html tags mixed with some GST specific tags::
 
-    <slider/> - represents jQuery slider
-    <textbox/> - represents input
-    <plot/> - represents Flot plot
+    <slider/> - represents jQuery slider for changing a parameter's value
+    <textbox/> - represents a text input field for changing a parameter's value
+    <plot/> - represents Flot JS plot element
 
 Also GST will track all elements inside ``<render></render>`` where ``id``
-attribute is set.
+attribute is set, and a corresponding parameter referencing that ``id`` is present
+in the configuration section below. These will be referred to as dynamic elements.
 
 The contents of the <render> section will be shown to the user after
 all occurrences of::
 
-    <slider var="{parameter name}" [style="{CSS statements}"]/>
-    <input var="parameter name" [style="{CSS statements}"] [readonly="true" | readonly="false"]/>
-    <plot [style="{CSS statements}"]/>
+    <slider var="{parameter name}" [style="{CSS statements}"] />
+    <textbox var="{parameter name}" [style="{CSS statements}"] />
+    <plot [style="{CSS statements}"] />
 
 have been converted to actual sliders, text inputs, and a plot graph.
-Everything in square brackets is optional.
+Everything in square brackets is optional. After initialization, all
+text input fields, sliders, and dynamic elements will be set to the initial
+values of the parameters that they are assigned to.
 
 ``{parameter name}`` specifies the parameter to which the slider or text
 input will be attached to.
 
+[style="{CSS statements}"] specifies valid CSS styling. It will be passed
+directly to the browser without any parsing.
+
 There is a one-to-one relationship between a slider and a parameter.
-I.e. for one parameter you can put only one ``<slider ...<`` in the
+I.e. for one parameter you can put only one ``<slider>`` in the
 ``<render>`` section. However, you don't have to specify a slider - they
 are optional.
 
 There is a many-to-one relationship between text inputs and a
-parameter. I.e. for one parameter you can put many '<input ...<' in
+parameter. I.e. for one parameter you can put many '<textbox>' elements in
 the ``<render>`` section. However, you don't have to specify a text
 input - they are optional.
 
-You can put only one ``<plot ...<`` in the ``<render>`` section. It is not
+You can put only one ``<plot>`` in the ``<render>`` section. It is not
 required.
 
-NOTE: MathJax, independently of this module, will render all TeX code
-within the ``<render>`` section into nice mathematical formulas. Just
-remember to wrap it in one of::
-
-    \(  and  \)  -  for inline formulas (formulas surrounded by
-                  standard text)
-    \[  and  \]  -  if you want the formula to be a separate line
 
 Slider tag
 ..........
 
 Slider tag must have ``var`` attribute and optional ``style`` attribute::
 
-    <slider var='a' style="width:400px;float:left;"/>
+    <slider var='a' style="width:400px;float:left;" />
 
-After processing slider tags will be replaced by jQuery UI sliders with applied
+After processing, slider tags will be replaced by jQuery UI sliders with applied
 ``style`` attribute.
 
-
-``Var`` attribute must correspond to parameter in one of ``function`` tags in
-``functions`` tag. By moving slider, value of parameter ``a`` will change, and so
-result of function, that depends on parameter ``a``, will change.
+``var`` attribute must correspond to a parameter. Parameters can be used in any
+of the ``function`` tags in ``functions`` tag. By moving slider, value of
+parameter ``a`` will change, and so result of function, that depends on parameter
+``a``, will also change.
 
 
 Textbox tag
 ...........
 
+Texbox tag must have ``var`` attribute and optional ``style`` attribute::
 
-Texbox tag must have ``var`` attribute and optional ``style`` and ``readonly``
-attributes::
+    <textbox var="b" style="width:50px; float:left; margin-left:10px;" />
 
-    <textbox var="b" readonly="true" style="width:50px; float:left; margin-left:10px;"/>
+After processing, textbox tags will be replaced by html text inputs with applied
+``style`` attribute. If you want a readonly text input, then you should use a
+dynamic element instead (see section below "HTML tagsd with ID").
 
-After processing tetbox tags will be replaced by html inputs with applied
-``style`` attribute. If ``readonly`` is set to ``true`` input will be
-not-editable, default is ``false``.
+``var`` attribute must correspond to a parameter. Parameters can be used in any
+of the ``function`` tags in ``functions`` tag. By changing the value on the text input,
+value of parameter ``a`` will change, and so result of function, that depends on
+parameter ``a``, will also change.
 
-``Var`` attribute must correspond to parameter in one of ``function`` tags in
-``functions`` tag. By entering value in input, value of parameter ``b`` will change, and so
-result of function, that depends on parameter ``b``, will change.
 
 Plot tag
 ........
 
 Plot tag may have optional ``style`` attribute::
 
-    <plot style="width:50px; float:left; margin-left:10px;"/>
+    <plot style="width:50px; float:left; margin-left:10px;" />
 
-After processing plot tags will be replaced by Flot plot with applied
+After processing plot tags will be replaced by Flot JS plot with applied
 ``style`` attribute.
 
-HTML tags with id
-.................
 
-Any html tag with id, e.g. ``<span id="answer_span_1">`` will be counted as
-place where result of function can be rendered. To render function result to
-element, element id must be included in ``function`` tag as ``el_id`` attribute
+HTML tags with ID (dynamic elements)
+....................................
+
+Any HTML tag with ID, e.g. ``<span id="answer_span_1">`` can be used as a
+place where result of function can be inserted. To insert function result to
+an element, element ID must be included in ``function`` tag as ``el_id`` attribute
 and ``output`` value must be ``"element"``::
 
     <function output="element" el_id="answer_span_1">
@@ -121,17 +123,17 @@ and ``output`` value must be ``"element"``::
     </function>
 
 
-
 Configuration tag
 -----------------
 
-The configuration tag contain sparameter settings, graph
+The configuration tag contains parameter settings, graph
 settings, and function definitions which are to be plotted on the
 graph and that use specified parameters.
 
 Configuration tag contains two mandatory tag ``functions`` and ``parameters`` and
 may contain another ``plot`` tag.
 
+
 Parameters tag
 ..............
 
@@ -143,30 +145,30 @@ Parameters tag
                 <param var="b" min="-10.0" max="10.0" step="0.1" initial="0" />
         </parameters>
 
-``Var`` attribute links min, max, step and initial values to parameter name.
-``Min`` attribute is minimal value that parameter can take. Slider and input
+``var`` attribute links min, max, step and initial values to parameter name.
+
+``min`` attribute is the minimal value that a parameter can take. Slider and input
 values can not go below it.
 
-``Max`` attribute is maximal value that parameter can take. Slider and input
+``max`` attribute is the maximal value that a parameter can take. Slider and input
 values can not go over it.
 
-``Step`` attribute is value of slider step. When a slider increase or decreases
+``step`` attribute is value of slider step. When a slider increase or decreases
 the specified parameter, it will do so by the amount specified with 'step'
 
-``Initial`` attribute is the initial value that the specified parameter should be
-set to.
+``initial`` attribute is the initial value that the specified parameter should be
+set to. Sliders and inputs will initially show this value.
 
-The parameter's name is specified by the 'var' property. All occurrences
-of sliders and/or text inputs that specify a 'var' property, will be
+The parameter's name is specified by the ``var`` property. All occurrences
+of sliders and/or text inputs that specify a ``var`` property, will be
 connected to this parameter - i.e. they will reflect the current
-value of the parameter and will be updated when the parameter
+value of the parameter, and will be updated when the parameter
 changes.
 
-
 If at lest one of these attributes is not set, then the parameter
 will not be used, slider's and/or text input elements that specify
 this parameter will not be activated, and the specified functions
-which use this parameter will return a non valid value. This means
+which use this parameter will not return a numeric value. This means
 that neglecting to specify at least one of the attributes for some
 parameter will have the result of the whole GST instance not working
 properly.
@@ -175,12 +177,23 @@ properly.
 Functions tag
 .............
 
-
 For the GST to do something, you must defined at least one
 function, which can use any of the specified parameter values. The
 function expects to take the ``x`` value, do some calculations, and
 return the ``y`` value. I.e. this is a 2D plot in Cartesian
-coordinates.
+coordinates. This is how the default function is meant to be used for
+the graph.
+
+There are other special cases of functions. They are used mainly for
+outputting to elements, plot labels, or for custom output. Because
+the return a single value, and that value is meant for a single element,
+these function are invoked only with the set of all of the parameters.
+I.e. no ``x`` value is available inside them. They are useful for
+showing the current value of a parameter, showing complex static
+formulas where some parameter's value must change, and other useful
+things.
+
+The different style of function is specified by the ``output`` attribute.
 
 Each function must be defined inside ``function`` tag in  ``functions`` tag::
 
@@ -202,11 +215,11 @@ by the browser's JavaScript engine and converted to a true JS
 function.
 
 The function's parameter list will automatically be created and
-populated, and will include the ``x``, and all of the specified
-parameter values (from sliders and text inputs). This means that
-each of the defined functions will have access to all of the
-parameter values. You don't have to use them, but they will be
-there.
+populated, and will include the ``x`` (when ``output`` is not specified or
+is set to ``"graph"``), and all of the specified parameter values (from sliders
+and text inputs). This means that each of the defined functions will have
+access to all of the parameter values. You don't have to use them, but
+they will be there.
 
 Examples::
 
@@ -245,43 +258,144 @@ Required parameters::
     you would specify the above function like so (the
     bare-bone minimum):
 
+        <function>return x * a + b;</function>
+
+    VERY IMPORTANT: Because the function will be passed
+    to the browser as a single string, depending on implementation
+    specifics, the end-of-line characters can be stripped. This
+    means that single line JavaScript comments (starting with "//")
+    can lead to the effect that everything after the first such comment
+    will be treated as a comment. Therefore, it is absolutely
+    necessary that such single line comments are not used when
+    defining functions for GST. You can safely use the alternative
+    multiple line JavaScript comments (such comments start with "/*"
+    and end with "*/).
+
+    VERY IMPORTANT: If you have a large function body, and decide to
+    split it into several lines, than you must wrap it in "CDATA" like
+    so:
+
         <function>
-            return x * a + b;
+        <![CDATA[
+            var dNew;
+
+            dNew = 0.3;
+
+            return x * a + b - dNew;
+        ]]>
         </function>
 
 Optional parameters::
 
 
-    color:  Color name (red, green, etc.) or in the form of
+    color:  Color name ('red', 'green', etc.) or in the form of
             '#FFFF00'. If not specified, a default color (different
-            one for each function) will be given by Flot;
+            one for each graphed function) will be given by Flot JS.
     line:   A string - 'true' or 'false'. Should the data points be
             connected by a line on the graph? Default is 'true'.
     dot:    A string - 'true' or 'false'. Should points be shown for
             each data point on the graph? Default is 'false'.
+    bar:    A string - 'true' or 'false'. When set to 'true', points
+            will be plotted as bars.
     label:  A string. If provided, will be shown in the legend, along
             with the color that was used to plot the function.
-    output: "element" or "plot". If not defined, function will be plotted.
-            If defined, function will not be plotted, but rendered to element
-            with id set in 'el_id' attribute.
-    el_id:  Id of html element, defined in 'render' section. Value of
-            function will be rendered to content of this element.
+    output: 'element', 'none', 'plot_label', or 'graph'. If not defined,
+            function will be plotted (same as setting 'output' to 'graph').
+            If defined, and other than 'graph', function will not be
+            plotted, but it's output will be inserted into the element
+            with ID specified by 'el_id' attribute.
+    el_id:  Id of HTML element, defined in '<render>' section. Value of
+            function will be inserted as content of this element.
     disable_auto_return: By default, if JavaScript function string is written
-                         without a "return" statement, one will be prepended
-                         to it. Set to "true" to disable this functionality.
-                         This is done so that simple functions can be defined
-                         in an easy fashion (for example, "a", which will be
-                         translated into "return a").
+                         without a "return" statement, the "return" will be
+                         prepended to it. Set to "true" to disable this
+                         functionality. This is done so that simple functions
+                         can be defined in an easy fashion (for example, "a",
+                         which will be translated into "return a").
+    update_on: A string - 'change', or 'slide'. Default (if not set) is
+               'slide'. This defines the event on which a given function is
+               called, and its result is inserted into an element. This
+               setting is relevant only when "output" is other than "graph".
 
-With ``output`` and ``el_id`` set together you can update html elements with
-function value, also function will not be plotted.
+When specifying ``el_id``, it is essential to set "output" to one of
+    element - GST will invoke the function, and the return of it will be
+              inserted into a HTML element with id specified by ``el_id``.
+    none    - GST will simply inoke the function. It is left to the instructor
+              who writes the JavaScript function body to update all necesary
+              HTML elements inside the function, before it exits. This is done
+              so that extra steps can be preformed after an HTML element has
+              been updated with a value. Note, that because the return value
+              from this function is not actually used, it will be tempting to
+              omit the "return" statement. However, in this case, the attribute
+              "disable_auto_return" must be set to "true" in order to prevent
+              GST from inserting a "return" statement automatically.
+    plot_label - GST will process all plot labels (which are strings), and
+                 will replace the all instances of substrings specified by
+                 ``el_id`` with the returned value of the function. This is
+                 necessary if you want a label in the graph to have some changing
+                 number. Because of the nature of Flot JS, it is impossible to
+                 achieve the same effect by setting the "output" attribute
+                 to "element", and including a HTML element in the label.
 
-[note on MathJax and labels]:
+The above values for "output" will tell GST that the function is meant for an
+HTML element (not for graph), and that it should not get an 'x' parameter (along
+with some value).
+
+
+[Note on MathJax and labels]
+............................
+
+Independently of this module, will render all TeX code
+within the ``<render>`` section into nice mathematical formulas. Just
+remember to wrap it in one of::
+
+    \(  and  \)  -  for inline formulas (formulas surrounded by
+                  standard text)
+    \[  and  \]  -  if you want the formula to be a separate line
 
 It is possible to define a label in standard TeX notation. The JS
 library MathJax will work on these labels also because they are
 inserted on top of the plot as standard HTML (text within a DIV).
 
+If the label is dynamic, i.e. it will contain some text (numeric, or other)
+that has to be updated on a parameter's change, then one can define
+a special function to handle this. The "output" of such a function must be
+set to "none", and the JavaScript code inside this function must update the
+MathJax element by itself. Before exiting, MathJax typeset function should
+be called so that the new text will be re-rendered by MathJax. For example,
+
+    <render>
+        ...
+        <span id="dynamic_mathjax"></span>
+    </render>
+    ...
+    <function output="none" el_id="dynamic_mathjax">
+    <![CDATA[
+        var out_text;
+
+        out_text = "\\[\\mathrm{Percent \\space of \\space treated \\space with \\space YSS=\\frac{"
+          +(treated_men*10)+"\\space men *"
+          +(your_m_tx_yss/100)+"\\space prev. +\\space "
+          +((100-treated_men)*10)+"\\space women *"
+          +(your_f_tx_yss/100)+"\\space prev.}"
+          +"{1000\\space total\\space treated\\space patients}"
+          +"="+drummond_combined[0][1]+"\\%}\\]";
+          mathjax_for_prevalence_calcs+="\\[\\mathrm{Percent \\space of \\space untreated \\space with \\space YSS=\\frac{"
+          +(untreated_men*10)+"\\space men *"
+          +(your_m_utx_yss/100)+"\\space prev. +\\space "
+          +((100-untreated_men)*10)+"\\space women *"
+          +(your_f_utx_yss/100)+"\\space prev.}"
+          +"{1000\\space total\\space untreated\\space patients}"
+          +"="+drummond_combined[1][1]+"\\%}\\]";
+
+        $("#dynamic_mathjax").html(out_text);
+
+        MathJax.Hub.Queue(["Typeset",MathJax.Hub,"dynamic_mathjax"]);
+    ]]>
+    </function>
+    ...
+
+
 Plot tag
 ........
 
@@ -312,6 +426,15 @@ Optional parameters::
     num_points: Number of data points to generated for the plot. If
                 this is not set, the number of points will be
                 calculated as width / 5.
+
+    bar_width: If functions are present which are to be plotted as bars,
+               then this parameter specifies the width of the bars. A
+               numeric value for this parameter is expected.
+
+    bar_align: If functions are present which are to be plotted as bars,
+               then this parameter specifies how to align the bars relative
+               to the tick. Available values are "left" and "center".
+
     xticks,
     yticks:    3 floating point numbers separated by commas. This
                specifies how many ticks are created, what number they
@@ -333,19 +456,89 @@ Optional parameters::
                the plotted data will change - the axes (ticks) will
                remain as you have defined them.
 
+    xticks_names, yticks_names:
+              A JSON string which represents a mapping of xticks, yticks
+              values to some defined strings. If specified, the graph will
+              not have any xticks, yticks except those for which a string
+              value has been defined in the JSON string. Note that the
+              matching will be string-based and not numeric. I.e. if a tick
+              value was "3.70" before, then inside the JSON there should be
+              a mapping like {..., "3.70": "Some string", ...}. Example:
+
+                  <xticks_names>
+                  <![CDATA[
+                  {
+                      "1": "Treated", "2": "Not Treated",
+                      "4": "Treated", "5": "Not Treated",
+                      "7": "Treated", "8": "Not Treated"
+                  }
+                  ]]>
+                  </xticks_names>
+
+                  <yticks_names>
+                  <![CDATA[
+                      {"0": "0%", "10": "10%", "20": "20%", "30": "30%", "40": "40%", "50": "50%"}
+                  ]]>
+                  </yticks_names>
+
     xunits,
     yunits:   Units values to be set on axes. Use MathJax. Example:
                 <xunits>\(cm\)</xunits>
                 <yunits>\(m\)</yunits>
 
+    moving_label:
+              A way to specify a label that should be positioned dynamically,
+              based on the values of some parameters, or some other factors.
+              It is similar to a <function>, but it is only valid for a plot
+              because it is drawn relative to the plot coordinate system.
+
+              Multiple "moving_label" configurations can be provided, each one
+              with a unique text and a unique set of functions that determine
+              it's dynamic positioning.
+
+              Each "moving_label" can have a "color" attribute (CSS color notation),
+              and a "weight" attribute. "weight" can be one of "normal" or "bold",
+              and determines the styling of moving label's text.
+
+              Each "moving_label" function should return an object with a 'x'
+              and 'y properties. Within those functions, all of the parameter
+              names along with their value are available.
+
+              Example (note that "return" statement is missing; it will be automatically
+              inserted by GST):
+
+                  <moving_label text="Co" weight="bold" color="red>
+                  <![CDATA[  {'x': -50, 'y': c0};]]>
+                  </moving_label>
+
+    asymptote:
+              Add a vertical or horizontal asymptote to the graph which will
+              be dynamically repositioned based on the specified function.
+
+              It is similar to the function in that it provides a JavaScript body function
+              string. This function will be used to calculate the position of the asymptote
+              relative to the axis specified by the "type" parameter.
+
+              Required parameters:
+                  type:
+                        Which axis should the asymptote be plotted against. Available values
+                        are "x" and "y".
+
+              Optional parameters:
+                  color:
+                        The color of the line. A valid CSS color string is expected.
+
+
 Example
 =======
 
+
 Plotting, sliders and inputs
 ----------------------------
 
 .. literalinclude:: gst_example_with_documentation.xml
 
+
 Update of html elements, no plotting
 ------------------------------------
 
@@ -356,3 +549,15 @@ Circle with dynamic radius
 --------------------------
 
 .. literalinclude:: gst_example_dynamic_range.xml
+
+
+Example of a bar graph
+----------------------
+
+.. literalinclude:: gst_example_bars.xml
+
+
+Example of moving labels of graph
+---------------------------------
+
+.. literalinclude:: gst_example_dynamic_labels.xml
diff --git a/docs/source/gst_example_bars.rst b/docs/source/gst_example_bars.rst
new file mode 100644
index 0000000000..f0a197bb79
--- /dev/null
+++ b/docs/source/gst_example_bars.rst
@@ -0,0 +1,64 @@
+<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>
diff --git a/docs/source/gst_example_dynamic_labels b/docs/source/gst_example_dynamic_labels
new file mode 100644
index 0000000000..05cbe407fb
--- /dev/null
+++ b/docs/source/gst_example_dynamic_labels
@@ -0,0 +1,40 @@
+<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
diff --git a/docs/source/gst_example_dynamic_range.xml b/docs/source/gst_example_dynamic_range.xml
index 0938e7b60b..0ce4263d62 100644
--- a/docs/source/gst_example_dynamic_range.xml
+++ b/docs/source/gst_example_dynamic_range.xml
@@ -3,10 +3,10 @@
       <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 
+        <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 
+        <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;"/>
@@ -19,18 +19,14 @@
             <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>
+          <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>
-                  return -a;
-              </min>
-              <max>
-                  return a;
-              </max>
+              <min>-a</min>
+              <max>a</max>
           </xrange>
           <num_points>1000</num_points>
           <xticks>-30, 6, 30</xticks>

From 00bf973d4a92e667237424f5dfdad76e7c3e6955 Mon Sep 17 00:00:00 2001
From: Valera Rozuvan <valera@edx.org>
Date: Tue, 15 Jan 2013 12:46:52 +0200
Subject: [PATCH 106/107] Renamed to XML example code.

---
 docs/source/{gst_example_bars.rst => gst_example_bars.xml}        | 0
 ...{gst_example_dynamic_labels => gst_example_dynamic_labels.xml} | 0
 2 files changed, 0 insertions(+), 0 deletions(-)
 rename docs/source/{gst_example_bars.rst => gst_example_bars.xml} (100%)
 rename docs/source/{gst_example_dynamic_labels => gst_example_dynamic_labels.xml} (100%)

diff --git a/docs/source/gst_example_bars.rst b/docs/source/gst_example_bars.xml
similarity index 100%
rename from docs/source/gst_example_bars.rst
rename to docs/source/gst_example_bars.xml
diff --git a/docs/source/gst_example_dynamic_labels b/docs/source/gst_example_dynamic_labels.xml
similarity index 100%
rename from docs/source/gst_example_dynamic_labels
rename to docs/source/gst_example_dynamic_labels.xml

From b53786b688ac3b57401f4658c3b7133d4bc83be7 Mon Sep 17 00:00:00 2001
From: Alexander Kryklia <kryklia@gmail.com>
Date: Tue, 15 Jan 2013 13:34:16 +0200
Subject: [PATCH 107/107] removed on event from slider and readonly from
 textbox

---
 common/lib/xmodule/xmodule/gst_module.py | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/common/lib/xmodule/xmodule/gst_module.py b/common/lib/xmodule/xmodule/gst_module.py
index c4771f3bcb..3b8d96ee81 100644
--- a/common/lib/xmodule/xmodule/gst_module.py
+++ b/common/lib/xmodule/xmodule/gst_module.py
@@ -103,7 +103,6 @@ class GraphicalSliderToolModule(XModule):
         slider_div = '<div class="{element_class}_slider" \
                                    id="{element_id}_slider_{var}" \
                                    data-var="{var}" \
-                                   data-on_event="{on_event}" \
                                    style="{style}">\
                      </div>'
         slider_els = xml.xpath('//slider')
@@ -112,21 +111,18 @@ class GraphicalSliderToolModule(XModule):
                                 slider_div.format(element_class=self.html_class,
                                     element_id=self.html_id,
                                     var=slider_el.get('var', ""),
-                                    on_event=slider_el.get('on_event', 'slide'),
                                     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}" \
-                                   data-el_readonly="{readonly}"/>'
+                                   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', ""),
-                                        readonly=input_el.get('readonly', ''),
                                         style=input_el.get('style', ""),
                                         input_index=input_index)))