Merge pull request #14 from aboudreault/submit-progress-icon

Submit progress icon

mentoring/mentoring.py

@@ -89,7 +89,6 @@ class MentoringBlock(XBlockWithLightChildren):
         fragment.add_javascript_url(
                     self.runtime.local_resource_url(self, 'public/js/vendor/underscore-min.js'))
         fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/mentoring.js'))
-        fragment.add_resource(load_resource('templates/html/mentoring_progress.html'), "text/html")
         fragment.add_resource(load_resource('templates/html/mentoring_attempts.html'), "text/html")
 
         fragment.initialize_js('MentoringBlock')

mentoring/public/css/answer.css

 .mentoring .answer.editable {
     height: 250px;
     width: 100%;
+    margin-bottom: 10px;
+}
+
+.mentoring .answer-checkmark {
+    display: inline-block;
     margin-bottom: 20px;
 }
 

mentoring/public/css/mentoring.css

@@ -49,19 +49,6 @@
     margin-top: 20px;
 }
 
-.mentoring .progress .indicator {
-    display: inline-block;
-    vertical-align: middle;
-}
-
-.mentoring .progress .indicator .checkmark-correct {
-    color: #006600;
-}
-
-.mentoring .progress .indicator .checkmark-incorrect {
-    color: #ff0000;
-}
-
 .mentoring .attempts {
     margin-top: 20px;
     display: inline-block;
@@ -70,3 +57,11 @@
     font-style: italic;
     webkit-font-smoothing: antialiased;
 }
+
+.mentoring .checkmark-correct {
+    color: #006600;
+}
+
+.mentoring .checkmark-incorrect {
+    color: #ff0000;
+}

mentoring/public/css/questionnaire.css

@@ -21,17 +21,14 @@
     cursor: pointer;
 }
 
-.mentoring .questionnaire .choice-result.correct,
-.mentoring .questionnaire .choice-answer.correct {
-    cursor: pointer;
-    color: #006600;
+.mentoring .questionnaire .choice-result.checkmark-correct,
+.mentoring .questionnaire .choice-answer.checkmark-correct {
     position: relative;
     top: -3px;
 }
 
-.mentoring .questionnaire .choice-result.incorrect {
+.mentoring .questionnaire .choice-result.checkmark-incorrect {
     text-align:center;
-    color: #ff0000;
 }
 
 .mentoring .questionnaire .choice-tips,

mentoring/public/js/answer.js

@@ -11,7 +11,16 @@ function AnswerBlock(runtime, element) {
         },
 
         handleSubmit: function(result) {
+            var checkmark = $('.answer-checkmark', element);
             $(element).find('.message').text((result || {}).error || '');
+
+            checkmark.removeClass('checkmark-incorrect icon-exclamation checkmark-correct icon-ok');
+            if (result.completed) {
+                checkmark.addClass('checkmark-correct icon-ok');
+            }
+            else {
+                checkmark.addClass('checkmark-incorrect icon-exclamation');
+            }
         },
 
         // Returns `true` if the child is valid, else `false`

mentoring/public/js/mentoring.js

 function MentoringBlock(runtime, element) {
-    var progressTemplate = _.template($('#xblock-progress-template').html());
     var attemptsTemplate = _.template($('#xblock-attempts-template').html());
     var children; // Keep track of children. A Child need a single object scope for its data.
 
-    function renderProgress() {
-        var data = $('.progress', element).data();
-        $('.indicator', element).html(progressTemplate(data));
-    }
-
     function renderAttempts() {
         var data = $('.attempts', element).data();
         $('.attempts', element).html(attemptsTemplate(data));
@@ -45,10 +39,6 @@ function MentoringBlock(runtime, element) {
             callIfExists(child, 'handleSubmit', result, options);
         });
 
-        $('.progress', element).data('completed', results.completed ? 'True' : 'False');
-        $('.progress', element).data('attempted', results.attempted ? 'True' : 'False');
-        renderProgress();
-
         $('.attempts', element).data('max_attempts', results.max_attempts);
         $('.attempts', element).data('num_attempts', results.num_attempts);
         renderAttempts();
@@ -120,10 +110,6 @@ function MentoringBlock(runtime, element) {
         });
 
 
-        if (submit_dom.length) {
-            renderProgress();
-        }
-
         renderAttempts();
         renderDependency();
 

mentoring/public/js/questionnaire.js

@@ -49,12 +49,12 @@ function MCQBlock(runtime, element) {
                     choiceTipsDOM = $('.choice-tips', choiceDOM),
                     choiceTipsCloseDOM;
 
-                choiceResultDOM.removeClass('incorrect icon-exclamation correct icon-ok');
+                choiceResultDOM.removeClass('checkmark-incorrect icon-exclamation checkmark-correct icon-ok');
                 if (result.completed && choiceInputDOM.val() === result.submission) {
-                    choiceResultDOM.addClass('correct icon-ok');
+                    choiceResultDOM.addClass('checkmark-correct icon-ok');
                 }
                 else if (choiceInputDOM.val() === result.submission || _.isNull(result.submission)) {
-                    choiceResultDOM.addClass('incorrect icon-exclamation');
+                    choiceResultDOM.addClass('checkmark-incorrect icon-exclamation');
                 }
 
               var tips = _.find(result.tips, function(obj) {
@@ -102,7 +102,7 @@ function MRQBlock(runtime, element) {
             // hide answers
             var choiceInputDOM = $('.choice input', element),
                 choiceResultDOM = $('.choice-answer', choiceInputDOM.closest('.choice'));
-            choiceResultDOM.removeClass('incorrect icon-exclamation correct icon-ok');
+            choiceResultDOM.removeClass('checkmark-incorrect icon-exclamation checkmark-correct icon-ok');
 
             var checkedCheckboxes = $('input[type=checkbox]:checked', element),
                 checkedValues = [];
@@ -136,13 +136,13 @@ function MRQBlock(runtime, element) {
                   answer: choice.completed ? choiceInputDOM.attr('checked') : !choiceInputDOM.attr('checked')
                 });
 
-                choiceResultDOM.removeClass('incorrect icon-exclamation correct icon-ok');
+                choiceResultDOM.removeClass('checkmark-incorrect icon-exclamation checkmark-correct icon-ok');
                 /* show hint if checked or max_attempts is disabled */
                 if (result.completed || choiceInputDOM.prop('checked') || options.max_attempts <= 0) {
                   if (choice.completed) {
-                    choiceResultDOM.addClass('correct icon-ok');
+                    choiceResultDOM.addClass('checkmark-correct icon-ok');
                   } else if (!choice.completed) {
-                    choiceResultDOM.addClass('incorrect icon-exclamation');
+                    choiceResultDOM.addClass('checkmark-incorrect icon-exclamation');
                   }
                 }
 
@@ -181,10 +181,10 @@ function MRQBlock(runtime, element) {
 
         _.each(this.answers, function(answer) {
           var choiceResultDOM = $('.choice-answer', answer.input.closest('.choice'));
-          choiceResultDOM.removeClass('correct icon-ok');
+          choiceResultDOM.removeClass('checkmark-correct icon-ok');
           if (answers_displayed) {
             if (answer.answer)
-              choiceResultDOM.addClass('correct icon-ok');
+              choiceResultDOM.addClass('checkmark-correct icon-ok');
             showAnswerButton.text('Hide Answer(s)');
           }
           else {

mentoring/templates/html/answer_editable.html

@@ -2,3 +2,4 @@
    class="answer editable" cols="50" rows="10" name="input"
    data-min_characters="{{ self.min_characters }}"
    >{{ self.student_input }}</textarea>
+<span class="answer-checkmark icon-2x"></span>

mentoring/templates/html/mentoring.html

@@ -10,9 +10,6 @@
   <div class="attempts" data-max_attempts="{{ self.max_attempts }}" data-num_attempts="{{ self.num_attempts }}"></div>
   <div class="submit">
     <input type="button" class="input-main" value="Submit"></input>
-    <span class="progress" data-completed="{{ self.completed }}" data-attempted="{{ self.attempted }}">
-      <span class='indicator'></span>
-    </span>
   </div>
   {% endif %}
   <div class="messages"></div>

mentoring/templates/html/mentoring_progress.html

-<script type="text/template" id="xblock-progress-template">
-    <% if (completed === "True") {{ %>
-      <i class="icon-ok icon-2x checkmark-correct"></i>
-    <% }} else if (attempted === "True") {{ %>
-       <i class="icon-exclamation icon-2x checkmark-incorrect"></i>
-    <% }} %>
-</script>