added some comments and improved the selection of the divs which are beeing changed when transitioning

2 files changed, 66 insertions, 15 deletions

diff --git a/js/codeq/prolog.js b/js/codeq/prolog.js
index 682b81e..a663e06 100644
--- a/js/codeq/prolog.js
+++ b/js/codeq/prolog.js
@@ -6,41 +6,69 @@
     var problems,//this will the actual (sub)state machine
         stateNameTag = 'stateName';
 
+    //get the divs which are the main elements being change on transitions between states in the sub-state machine
     var divs = {};
-    divs['description'] = $('div.col-lg-3.col-md-6.col-sm-12:has(#description)');//lets actually find the needed divs for later use
-    divs['code'] = $('div.col-lg-3.col-md-6.col-sm-12:has(#code_editor)');
-    divs['console'] = $('div.col-lg-3.col-md-6.col-sm-12:has(#console)');//named 'consoleDiv', because 'console' is already in use
-    divs['info'] = $('div.col-lg-3.col-md-6.col-sm-12:has(#info)');
+    divs['description'] = $('#description_outer_div');//$('div.col-lg-3.col-md-6.col-sm-12:has(#description)');
+    divs['code'] = $('#code_editor_outer_div');//$('div.col-lg-3.col-md-6.col-sm-12:has(#code_editor)');
+    divs['console'] = $('#console_outer_div');//$('div.col-lg-3.col-md-6.col-sm-12:has(#console)');
+    divs['info'] = $('#info_outer_div');//$('div.col-lg-3.col-md-6.col-sm-12:has(#info)');
 
+    //these tags connect the div to their respective state in the sub-state machine
     divs['description'].data(stateNameTag, 'description');
     divs['code'].data(stateNameTag, 'code');
     divs['console'].data(stateNameTag, 'console');
     divs['info'].data(stateNameTag, 'info');
 
     var eventName = 'mousedown',//event name of the event which will trigger the transition between these substates
+        /**
+         * the general function which should be called on the mousedown event to trigger the transition between states
+         */
         mouseDownEventFunction = function () {
             problems.transition($(this).data(stateNameTag));
         },
+        /**
+         * removes the above function from the divs
+         */
         removeListenersFromDivs = function () {
             $.each(divs, function (i, value) {
                 value.off(eventName, mouseDownEventFunction);
             });
         },
+        /**
+         * removes the 'block' class from all divs we need to change when we change the current state
+         */
         removeBlockClassesFromDivs = function () {
             $.each(divs, function (i, value) {
                 value.removeClass('block');
             });
         },
+        /**
+         * removes all those special classes from the divs, which are set when a new state is entered and it also adds the 'block' class back
+         */
         removeChangedClassesFromDivs = function () {
             $.each(divs, function (i, value) {
                 value.removeClass('block-focus block-less-width block-less-height block-less-everything').addClass('block');//these class names were chosen for the view where the screen is partitioned in 4 quarters (2 by 2)
             });
         },
+        /**
+         *
+         * @param current the key of the state ('description','code','hint','console'), which is currently active, because it must not have a transition set
+         */
         setTransitionsBetweenDivs = function (current) {
             $.each(divs, function (key, value) {
                 if (current !== key) value.on(eventName, mouseDownEventFunction);
             });
         },
+        /**
+         *
+         * @param divsWithClasses a object where we have the keys of the divs object paired with the class name we want to assign to them e.g. :
+         *          {
+                        'description': 'block-focus',
+                        'code': 'block-less-width',
+                        'console': 'block-less-height',
+                        'info': 'block-less-everything'
+                    }
+         */
         addClassesToDivs = function (divsWithClasses) {
             $.each(divsWithClasses, function (divName, className) {
                 divs[divName].addClass(className);
@@ -112,7 +140,7 @@
                 }
             }
         };
-    var prologHandler;
+    var prologHandler;//created when we enter the prolog state and destroyed once we leave it
     codeq.globalStateMachine.register('prolog', {
         'enter': function (data) {
             $('#disabled').css('display', '');
@@ -121,7 +149,7 @@
             problems = codeq.makeStateMachine(substates);
             problems.transition(divs['description'].data(stateNameTag));
             Q.delay(100).then(function(){
-                $('div.col-lg-3.col-md-6.col-sm-12').addClass('transition');
+                $('div.col-lg-3.col-md-6.col-sm-12').addClass('transition');//for smooth animations - need to be delayed, because otherwise we get some weird "animations" while the page is loading
             }).done();
 
             $('#disabled').css('display', 'none');
@@ -137,7 +165,6 @@
     // a constant
     var firstCharacterPos = {'line': 0, 'ch': 0};
 
-    //codeq.makePrologTerminalHandler = function (jqConsole, editor, problem_id, activityHandler) {
     var makePrologTerminalHandler = function (jqConsole, editor, problem_id, activityHandler) {
         var promptMode = true, // default: query composition; alternative: query result browsing
             terminal = codeq.makeConsole(jqConsole, {
diff --git a/js/codeq/python.js b/js/codeq/python.js
index 3121f1e..3445db5 100644
--- a/js/codeq/python.js
+++ b/js/codeq/python.js
@@ -2,49 +2,73 @@
  * Created by robert on 9/17/15.
  */
 
-/**
- * Created by robert on 9/17/15.
- */
-
 (function() {
     var problems,//this will the actual (sub)state machine
         stateNameTag = 'stateName';
 
+    //get the divs which are the main elements being change on transitions between states in the sub-state machine
     var divs = {};
-    divs['description'] = $('div.col-lg-3.col-md-6.col-sm-12:has(#description)');//lets actually find the needed divs for later use
-    divs['code'] = $('div.col-lg-3.col-md-6.col-sm-12:has(#code_editor)');
-    divs['console'] = $('div.col-lg-3.col-md-6.col-sm-12:has(#console)');//named 'consoleDiv', because 'console' is already in use
-    divs['info'] = $('div.col-lg-3.col-md-6.col-sm-12:has(#info)');
+    divs['description'] = $('#description_outer_div');//$('div.col-lg-3.col-md-6.col-sm-12:has(#description)');
+    divs['code'] = $('#code_editor_outer_div');//$('div.col-lg-3.col-md-6.col-sm-12:has(#code_editor)');
+    divs['console'] = $('#console_outer_div');//$('div.col-lg-3.col-md-6.col-sm-12:has(#console)');
+    divs['info'] = $('#info_outer_div');//$('div.col-lg-3.col-md-6.col-sm-12:has(#info)');
 
+    //these tags connect the div to their respective state in the sub-state machine
     divs['description'].data(stateNameTag, 'description');
     divs['code'].data(stateNameTag, 'code');
     divs['console'].data(stateNameTag, 'console');
     divs['info'].data(stateNameTag, 'info');
 
     var eventName = 'mousedown',//event name of the event which will trigger the transition between these substates
+        /**
+         * the general function which should be called on the mousedown event to trigger the transition between states
+         */
         mouseDownEventFunction = function () {
             problems.transition($(this).data(stateNameTag));
         },
+        /**
+         * removes the above function from the divs
+         */
         removeListenersFromDivs = function () {
             $.each(divs, function (i, value) {
                 value.off(eventName, mouseDownEventFunction);
             });
         },
+        /**
+         * removes the 'block' class from all divs we need to change when we change the current state
+         */
         removeBlockClassesFromDivs = function () {
             $.each(divs, function (i, value) {
                 value.removeClass('block');
             });
         },
+        /**
+         * removes all those special classes from the divs, which are set when a new state is entered and it also adds the 'block' class back
+         */
         removeChangedClassesFromDivs = function () {
             $.each(divs, function (i, value) {
                 value.removeClass('block-focus block-less-width block-less-height block-less-everything').addClass('block');//these class names were chosen for the view where the screen is partitioned in 4 quarters (2 by 2)
             });
         },
+        /**
+         *
+         * @param current the key of the state ('description','code','hint','console'), which is currently active, because it must not have a transition set
+         */
         setTransitionsBetweenDivs = function (current) {
             $.each(divs, function (key, value) {
                 if (current !== key) value.on(eventName, mouseDownEventFunction);
             });
         },
+        /**
+         *
+         * @param divsWithClasses a object where we have the keys of the divs object paired with the class name we want to assign to them e.g. :
+         *          {
+                        'description': 'block-focus',
+                        'code': 'block-less-width',
+                        'console': 'block-less-height',
+                        'info': 'block-less-everything'
+                    }
+         */
         addClassesToDivs = function (divsWithClasses) {
             $.each(divsWithClasses, function (divName, className) {
                 divs[divName].addClass(className);