Update display when answer is changed.

When the user first submits the answers, the checkmark/cross icons,
tip popups, and a message are shown to the user.

If the user changes some of the answers, the checkmarks, popups, and message
should automatically update. This is done by automatically resubmitting the answer.
Auto submission is only enabled if number of attempts is not limited (max_attempts = 0),

mentoring/mentoring.py

@@ -138,6 +138,13 @@ class MentoringBlock(XBlockWithLightChildren):
                 child.save()
                 completed = completed and child_result['completed']
 
+        if self.max_attempts_reached:
+            message = self.get_message_html('max_attempts_reached')
+        elif completed:
+            message = self.get_message_html('completed')
+        else:
+            message = self.get_message_html('incomplete')
+
         # Once it has been completed once, keep completion even if user changes values
         if self.completed:
             completed = True
@@ -146,13 +153,6 @@ class MentoringBlock(XBlockWithLightChildren):
         if self.max_attempts_reached:
             completed = False
 
-        if completed:
-            message = self.get_message_html('completed')
-        elif self.max_attempts_reached:
-            message = self.get_message_html('max_attempts_reached')
-        else:
-            message = self.get_message_html('incomplete')
-
         if self.has_missing_dependency:
             completed = False
             message = 'You need to complete all previous steps before being able to complete '+\

mentoring/public/js/answer.js

@@ -3,7 +3,7 @@ function AnswerBlock(runtime, element) {
 
         init: function(options) {
             // register the child validator
-            $(':input', element).on('keyup', options.blockValidator);
+            $(':input', element).on('keyup', _.debounce(options.onChange, 1000));
 
             var checkmark = $('.answer-checkmark', element);
             var completed = $('.xblock-answer', element).data('completed');

mentoring/public/js/mentoring.js

 function MentoringBlock(runtime, element) {
     var attemptsTemplate = _.template($('#xblock-attempts-template').html());
     var children; // Keep track of children. A Child need a single object scope for its data.
+    var submitXHR;
 
     function renderAttempts() {
         var data = $('.attempts', element).data();
@@ -83,27 +84,46 @@ function MentoringBlock(runtime, element) {
         }
     }
 
-    function initXBlock() {
-        var submit_dom = $(element).find('.submit .input-main');
-
-        submit_dom.bind('click', function() {
-            var success = true;
-            var data = {};
-            var children = getChildren(element);
-            for (var i = 0; i < children.length; i++) {
-                var child = children[i];
-                if (child.name !== undefined) {
-                    data[child.name] = callIfExists(child, 'submit');
-                }
+    function submit() {
+        var success = true;
+        var data = {};
+        var children = getChildren(element);
+        for (var i = 0; i < children.length; i++) {
+            var child = children[i];
+            if (child.name !== undefined) {
+                data[child.name] = callIfExists(child, 'submit');
             }
-            var handlerUrl = runtime.handlerUrl(element, 'submit');
-            $.post(handlerUrl, JSON.stringify(data)).success(handleSubmitResults);
-        });
+        }
+        var handlerUrl = runtime.handlerUrl(element, 'submit');
+        if (submitXHR) {
+            submitXHR.abort();
+        }
+        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 onChange() {
+        validateXBlock();
+        resubmit();
+    }
+
+
+    function initXBlock() {
+        $(element).find('.submit .input-main').bind('click', submit);
 
         // init children (especially mrq blocks)
         var children = getChildren(element);
         var options = {
-            blockValidator: validateXBlock
+            onChange: onChange
         };
         _.each(children, function(child) {
             callIfExists(child, 'init', options);

mentoring/public/js/questionnaire.js

@@ -46,7 +46,7 @@ function MessageView(element) {
 function MCQBlock(runtime, element) {
     return {
         init: function(options) {
-            $('input[type=radio]', element).on('change', options.blockValidator);
+            $('input[type=radio]', element).on('change', options.onChange);
         },
 
         submit: function() {
@@ -123,7 +123,7 @@ function MCQBlock(runtime, element) {
 function MRQBlock(runtime, element) {
     return {
         init: function(options) {
-            $('input[type=checkbox]', element).on('change', options.blockValidator);
+            $('input[type=checkbox]', element).on('change', options.onChange);
         },
 
         submit: function() {