diff options
| -rw-r--r-- | js/codeq/prolog.js | 26 | ||||
| -rw-r--r-- | js/codeq/python.js | 82 |
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' |