added another possible transition in the main app screen - the hint and test buttons will always transition to the 'hints' quarter

1 files changed, 54 insertions, 3 deletions

diff --git a/js/codeq/prolog.js b/js/codeq/prolog.js
index a663e06..6c53777 100644
--- a/js/codeq/prolog.js
+++ b/js/codeq/prolog.js
@@ -19,7 +19,7 @@
     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 most common transition at least (there are some corner cases on the hint and test buttons -> see the code below)
         /**
          * the general function which should be called on the mousedown event to trigger the transition between states
          */
@@ -31,7 +31,7 @@
          */
         removeListenersFromDivs = function () {
             $.each(divs, function (i, value) {
-                value.off(eventName, mouseDownEventFunction);
+                value.off(transitionEventName, mouseDownEventFunction);
             });
         },
         /**
@@ -56,7 +56,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 +74,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(){
+            problems.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 +120,14 @@
                         'info': 'block-less-everything'
                     });
                     setTransitionsBetweenDivs('description');
+
+                    //and set up the buttons
+                    addClickListenerTranstions();
                 },
                 'exit': function () {
                     removeChangedClassesFromDivs();
                     removeListenersFromDivs();
+                    removeClickListenerTransition();
                 }
             },
             'code': {
@@ -101,10 +140,14 @@
                         'info': 'block-less-height'
                     });
                     setTransitionsBetweenDivs('code');
+
+                    //and set up the buttons
+                    addClickListenerTranstions();
                 },
                 'exit': function () {
                     removeChangedClassesFromDivs();
                     removeListenersFromDivs();
+                    removeClickListenerTransition();
                 }
             },
             'info': {
@@ -117,10 +160,14 @@
                         'info': 'block-focus'
                     });
                     setTransitionsBetweenDivs('info');
+
+                    //and set up the buttons
+                    addClickListenerTranstions();
                 },
                 'exit': function () {
                     removeChangedClassesFromDivs();
                     removeListenersFromDivs();
+                    removeClickListenerTransition();
                 }
             },
             'console': {
@@ -133,10 +180,14 @@
                         'info': 'block-less-width'
                     });
                     setTransitionsBetweenDivs('console');
+
+                    //and set up the buttons
+                    addClickListenerTranstions();
                 },
                 'exit': function () {
                     removeChangedClassesFromDivs();
                     removeListenersFromDivs();
+                    removeClickListenerTransition();
                 }
             }
         };