summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/codeq/prolog.js26
-rw-r--r--js/codeq/python.js82
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'