updated the python state with the last changes done to the prolog state

2 files changed, 82 insertions, 26 deletions

diff --git a/js/codeq/prolog.js b/js/codeq/prolog.js
index 6c53777..1978ba4 100644
--- a/js/codeq/prolog.js
+++ b/js/codeq/prolog.js
@@ -1,17 +1,19 @@
 /**
  * Created by robert on 9/17/15.
+ *
+ * The prolog state of the state machine. When it is entered it'll prepare the console and code editor and load a sub-state machine which represents the 4 different parts fo the screen.
  */
 
 (function() {
-    var problems,//this will the actual (sub)state machine
-        stateNameTag = 'stateName';
+    var subScreens,//this will the actual (sub)state machine
+        stateNameTag = 'stateName';//a tag for data which is added to some html elements
 
     //get the divs which are the main elements being change on transitions between states in the sub-state machine
     var divs = {};
-    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)');
+    divs['description'] = $('#description_outer_div');
+    divs['code'] = $('#code_editor_outer_div');
+    divs['console'] = $('#console_outer_div');
+    divs['info'] = $('#info_outer_div');
 
     //these tags connect the div to their respective state in the sub-state machine
     divs['description'].data(stateNameTag, 'description');
@@ -24,7 +26,7 @@
          * the general function which should be called on the mousedown event to trigger the transition between states
          */
         mouseDownEventFunction = function () {
-            problems.transition($(this).data(stateNameTag));
+            subScreens.transition($(this).data(stateNameTag));
         },
         /**
          * removes the above function from the divs
@@ -82,12 +84,12 @@
          */
         mouseDownEventIgnoreFun = function(event){
             event.stopPropagation();
-        }
+        },
         /**
          * The transition from the buttons to the hints screen will be triggered with this function
          */
         clickListenerTransitionFun = function(){
-            problems.transition(divs['info'].data(stateNameTag));
+            subScreens.transition(divs['info'].data(stateNameTag));
         },
         /**
          * add the above function to the buttons
@@ -197,8 +199,8 @@
             $('#disabled').css('display', '');
             $('#screen_prolog').css('display', '');//we have to show the screen now so the code editor shopws its initial values correctly
             prologHandler = createPrologHandler(data.data)//codeq.createProgrammingLanguageHandler('prolog',data.data,codeq.makePrologTerminalHandler);
-            problems = codeq.makeStateMachine(substates);
-            problems.transition(divs['description'].data(stateNameTag));
+            subScreens = codeq.makeStateMachine(substates);
+            subScreens.transition(divs['description'].data(stateNameTag));
             Q.delay(100).then(function(){
                 $('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();
@@ -209,7 +211,7 @@
             $('#screen_prolog').css('display', 'none');
             $('div.col-lg-3.col-md-6.col-sm-12').removeClass('transition');
             prologHandler.destroy();
-            problems.destroy();
+            subScreens.destroy();
         }
     });
 
diff --git a/js/codeq/python.js b/js/codeq/python.js
index 3445db5..a975cc7 100644
--- a/js/codeq/python.js
+++ b/js/codeq/python.js
@@ -1,17 +1,21 @@
 /**
  * Created by robert on 9/17/15.
+ *
+ * The python state of the state machine. When it is entered it'll prepare the console and code editor and load a sub-state machine which represents the 4 different parts fo the screen.
+ *
+ * Currentyl it is mostly a copy of the prolog state (the exception is of course the makePythonTerminalHandler instead of makePrologTerminalHandler)
  */
 
 (function() {
-    var problems,//this will the actual (sub)state machine
-        stateNameTag = 'stateName';
+    var subScreens,//this will the actual (sub)state machine
+        stateNameTag = 'stateName';//a tag for data which is added to some html elements
 
     //get the divs which are the main elements being change on transitions between states in the sub-state machine
     var divs = {};
-    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)');
+    divs['description'] = $('#description_outer_div');
+    divs['code'] = $('#code_editor_outer_div');
+    divs['console'] = $('#console_outer_div');
+    divs['info'] = $('#info_outer_div');
 
     //these tags connect the div to their respective state in the sub-state machine
     divs['description'].data(stateNameTag, 'description');
@@ -19,19 +23,19 @@
     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
+    var transitionEventName = '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));
+            subScreens.transition($(this).data(stateNameTag));
         },
         /**
          * removes the above function from the divs
          */
         removeListenersFromDivs = function () {
             $.each(divs, function (i, value) {
-                value.off(eventName, mouseDownEventFunction);
+                value.off(transitionEventName, mouseDownEventFunction);
             });
         },
         /**
@@ -56,7 +60,7 @@
          */
         setTransitionsBetweenDivs = function (current) {
             $.each(divs, function (key, value) {
-                if (current !== key) value.on(eventName, mouseDownEventFunction);
+                if (current !== key) value.on(transitionEventName, mouseDownEventFunction);
             });
         },
         /**
@@ -74,6 +78,41 @@
                 divs[divName].addClass(className);
             });
         },
+        /**
+         * the buttons (hint and test) will have to 'eat' the mousedown event to prevent some weird transitions.
+         * Because a click on them won't trigger the transition to the code part, but will transition to the hints part.
+         *
+         * @param event
+         */
+        mouseDownEventIgnoreFun = function(event){
+            event.stopPropagation();
+        },
+        /**
+         * The transition from the buttons to the hints screen will be triggered with this function
+         */
+        clickListenerTransitionFun = function(){
+            subScreens.transition(divs['info'].data(stateNameTag));
+        },
+        /**
+         * add the above function to the buttons
+         */
+        addClickListenerTranstions  = function(){
+            $('#btn_code_hint').on('click',clickListenerTransitionFun);
+            $('#btn_code_test').on('click',clickListenerTransitionFun);
+
+            $('#btn_code_hint').on(transitionEventName,mouseDownEventIgnoreFun);
+            $('#btn_code_test').on(transitionEventName,mouseDownEventIgnoreFun);
+        },
+        /**
+         * and a function to remove it
+         */
+        removeClickListenerTransition = function(){
+            $('#btn_code_hint').off('click',clickListenerTransitionFun);
+            $('#btn_code_test').off('click',clickListenerTransitionFun);
+
+            $('#btn_code_hint').off(transitionEventName,mouseDownEventIgnoreFun);
+            $('#btn_code_test').off(transitionEventName,mouseDownEventIgnoreFun);
+        },
         substates = {
             'description': {
                 'enter': function () {
@@ -85,10 +124,14 @@
                         'info': 'block-less-everything'
                     });
                     setTransitionsBetweenDivs('description');
+
+                    //and set up the buttons
+                    addClickListenerTranstions();
                 },
                 'exit': function () {
                     removeChangedClassesFromDivs();
                     removeListenersFromDivs();
+                    removeClickListenerTransition();
                 }
             },
             'code': {
@@ -101,10 +144,14 @@
                         'info': 'block-less-height'
                     });
                     setTransitionsBetweenDivs('code');
+
+                    //and set up the buttons
+                    addClickListenerTranstions();
                 },
                 'exit': function () {
                     removeChangedClassesFromDivs();
                     removeListenersFromDivs();
+                    removeClickListenerTransition();
                 }
             },
             'info': {
@@ -117,10 +164,14 @@
                         'info': 'block-focus'
                     });
                     setTransitionsBetweenDivs('info');
+
+                    //and set up the buttons
+                    addClickListenerTranstions();
                 },
                 'exit': function () {
                     removeChangedClassesFromDivs();
                     removeListenersFromDivs();
+                    removeClickListenerTransition();
                 }
             },
             'console': {
@@ -133,10 +184,14 @@
                         'info': 'block-less-width'
                     });
                     setTransitionsBetweenDivs('console');
+
+                    //and set up the buttons
+                    addClickListenerTranstions();
                 },
                 'exit': function () {
                     removeChangedClassesFromDivs();
                     removeListenersFromDivs();
+                    removeClickListenerTransition();
                 }
             }
         };
@@ -146,8 +201,8 @@
             $('#disabled').css('display', '');
             $('#screen_prolog').css('display', '');//we have to show the screen now so the code editor shopws its initial values correctly
             pythonHandler = createPythonHandler(data.data);//codeq.createProgrammingLanguageHandler('prolog',data.data,codeq.makePythonTerminalHandler);
-            problems = codeq.makeStateMachine(substates);
-            problems.transition(divs['description'].data(stateNameTag));
+            subScreens = codeq.makeStateMachine(substates);
+            subScreens.transition(divs['description'].data(stateNameTag));
             Q.delay(100).then(function(){
                 $('div.col-lg-3.col-md-6.col-sm-12').addClass('transition');
             }).done();
@@ -157,14 +212,13 @@
             $('#screen_prolog').css('display', 'none');
             $('div.col-lg-3.col-md-6.col-sm-12').removeClass('transition');
             pythonHandler.destroy();
-            problems.destroy();
+            subScreens.destroy();
         }
     });
 
     // a constant
     var firstCharacterPos = {'line': 0, 'ch': 0};
 
-    //codeq.makePythonTerminalHandler = function (jqConsole, editor, problem_id, activityHandler) {
     var makePythonTerminalHandler = function (jqConsole, editor, problem_id, activityHandler) {
         var terminal = codeq.makeConsole(jqConsole, {
                 'greeting': 'CodeQ Python terminal proxy'