Merge pull request #42 from mtyaka/clear-results

Clear results when answer is changed.

mentoring/public/js/answer.js

@@ -3,7 +3,7 @@ function AnswerBlock(runtime, element) {
 
         init: function(options) {
             // register the child validator
-            $(':input', element).on('keyup', _.debounce(options.onChange, 1000));
+            $(':input', element).on('keyup', options.onChange);
 
             var checkmark = $('.answer-checkmark', element);
             var completed = $('.xblock-answer', element).data('completed');
@@ -20,9 +20,8 @@ function AnswerBlock(runtime, element) {
             var checkmark = $('.answer-checkmark', element);
             $(element).find('.message').text((result || {}).error || '');
 
-            checkmark.removeClass(
-                'checkmark-incorrect icon-exclamation fa-exclamation checkmark-correct icon-ok fa-check'
-            );
+            this.clearResult();
+
             if (result.completed) {
                 checkmark.addClass('checkmark-correct icon-ok fa-check');
             }
@@ -31,6 +30,13 @@ function AnswerBlock(runtime, element) {
             }
         },
 
+        clearResult: function() {
+            var checkmark = $('.answer-checkmark', element);
+            checkmark.removeClass(
+                'checkmark-incorrect icon-exclamation fa-exclamation checkmark-correct icon-ok fa-check'
+            );
+        },
+
         // Returns `true` if the child is valid, else `false`
         validate: function() {
 

mentoring/public/js/mentoring.js

@@ -26,8 +26,7 @@ function MentoringBlock(runtime, element) {
     }
 
     function handleSubmitResults(results) {
-        var messages_dom = $('.messages', element);
-        messages_dom.empty().hide();
+        messagesDOM.empty().hide();
 
         $.each(results.submitResults || [], function(index, submitResult) {
             var input = submitResult[0],
@@ -45,13 +44,13 @@ function MentoringBlock(runtime, element) {
         renderAttempts();
 
         // Messages should only be displayed upon hitting 'submit', not on page reload
-        messages_dom.append(results.message);
-        if (messages_dom.html().trim()) {
-            messages_dom.prepend('<div class="title1">Feedback</div>');
-            messages_dom.show();
+        messagesDOM.append(results.message);
+        if (messagesDOM.html().trim()) {
+            messagesDOM.prepend('<div class="title1">Feedback</div>');
+            messagesDOM.show();
         }
 
-        validateXBlock();
+        submitDOM.attr('disabled', 'disabled');
     }
 
     function getChildren(element) {
@@ -101,24 +100,24 @@ function MentoringBlock(runtime, element) {
         submitXHR = $.post(handlerUrl, JSON.stringify(data)).success(handleSubmitResults);
     }
 
-    function resubmit() {
-        // Don't autosubmit if number of attempts is limited.
-        var max_attempts = $('.attempts', element).data('max_attempts');
-        // Only autosubmit if messages are already shown.
-        var messages_dom = $('.messages', element);
-        if (messages_dom.html().trim() && !max_attempts) {
-            submit();
+    function clearResults() {
+        messagesDOM.empty().hide();
+
+        var children = getChildren(element);
+        for (var i = 0; i < children.length; i++) {
+            callIfExists(children[i], 'clearResult');
         }
     }
 
     function onChange() {
+        clearResults();
         validateXBlock();
-        resubmit();
     }
 
-
     function initXBlock() {
-        $(element).find('.submit .input-main').bind('click', submit);
+        messagesDOM = $(element).find('.messages');
+        submitDOM = $(element).find('.submit .input-main');
+        submitDOM.bind('click', submit);
 
         // init children (especially mrq blocks)
         var children = getChildren(element);
@@ -148,7 +147,6 @@ function MentoringBlock(runtime, element) {
 
     // validate all children
     function validateXBlock() {
-        var submit_dom = $(element).find('.submit .input-main');
         var is_valid = true;
         var data = $('.attempts', element).data();
         var children = getChildren(element);
@@ -169,10 +167,10 @@ function MentoringBlock(runtime, element) {
         }
 
         if (!is_valid) {
-            submit_dom.attr('disabled','disabled');
+            submitDOM.attr('disabled','disabled');
         }
         else {
-            submit_dom.removeAttr("disabled");
+            submitDOM.removeAttr("disabled");
         }
     }
 

mentoring/public/js/questionnaire.js

@@ -3,6 +3,7 @@ function MessageView(element) {
     return {
         messageDOM: $('.feedback', element),
         allPopupsDOM: $('.choice-tips, .feedback', element),
+        allResultsDOM: $('.choice-result', element),
         clearPopupEvents: function() {
             this.allPopupsDOM.hide();
             $('.close', this.allPopupsDOM).off('click');
@@ -39,6 +40,12 @@ function MessageView(element) {
             else {
                 this.showPopup(message); // already a DOM
             }
+        },
+        clearResult: function() {
+            this.allPopupsDOM.hide();
+            this.allResultsDOM.removeClass(
+                'checkmark-incorrect icon-exclamation fa-exclamation checkmark-correct icon-ok fa-check'
+            );
         }
     }
 }
@@ -61,6 +68,8 @@ function MCQBlock(runtime, element) {
 
         handleSubmit: function(result) {
             var messageView = MessageView(element);
+            messageView.clearResult();
+
             var choiceInputs = $('.choice input', element);
             $.each(choiceInputs, function(index, choiceInput) {
                 var choiceInputDOM = $(choiceInput),
@@ -69,9 +78,6 @@ function MCQBlock(runtime, element) {
                     choiceTipsDOM = $('.choice-tips', choiceDOM),
                     choiceTipsCloseDOM;
 
-                choiceResultDOM.removeClass(
-                    'checkmark-incorrect icon-exclamation fa-exclamation checkmark-correct icon-ok fa-check'
-                );
                 if (result.completed && choiceInputDOM.val() === result.submission) {
                     choiceResultDOM.addClass('checkmark-correct icon-ok fa-check');
                 }
@@ -110,6 +116,10 @@ function MCQBlock(runtime, element) {
             }
         },
 
+        clearResult: function() {
+            MessageView(element).clearResult();
+        },
+
         validate: function(){
             var checked = $('input[type=radio]:checked', element);
             if (checked.length) {
@@ -155,10 +165,6 @@ function MRQBlock(runtime, element) {
                     choiceTipsDOM = $('.choice-tips', choiceDOM),
                     choiceTipsCloseDOM;
 
-                choiceResultDOM.removeClass(
-                    'checkmark-incorrect icon-exclamation fa-exclamation checkmark-correct icon-ok fa-check'
-                );
-
                 /* show hint if checked or max_attempts is disabled */
                 if (!hide_results &&
                     (result.completed || choiceInputDOM.prop('checked') || options.max_attempts <= 0)) {
@@ -179,6 +185,10 @@ function MRQBlock(runtime, element) {
             });
         },
 
+        clearResult: function() {
+            MessageView(element).clearResult();
+        },
+
         validate: function(){
             var checked = $('input[type=checkbox]:checked', element);
             if (checked.length) {