Merge pull request #3 from aboudreault/mrq-mistake-mark

Mrq mistake mark

mentoring/mentoring.py

@@ -74,8 +74,6 @@ class MentoringBlock(XBlockWithLightChildren):
         fragment, named_children = self.get_children_fragment(context, view_name='mentoring_view',
                                                               not_instance_of=MentoringMessageBlock)
 
-        correct_icon_url = self.runtime.local_resource_url(self, 'public/img/correct-icon.png')
-
         fragment.add_content(render_template('templates/html/mentoring.html', {
             'self': self,
             'named_children': named_children,
@@ -85,9 +83,7 @@ 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').format(
-                completed=correct_icon_url),
-            "text/html")
+        fragment.add_resource(load_resource('templates/html/mentoring_progress.html'), "text/html")
 
         fragment.initialize_js('MentoringBlock')
 

mentoring/public/css/mentoring.css

@@ -50,5 +50,5 @@
 }
 
 .mentoring .progress .indicator .checkmark {
-    margin-top: 25px;
+    color: #006600;
 }

mentoring/public/css/questionnaire.css

@@ -12,18 +12,21 @@
 }
 
 .mentoring .choices .choice-result {
-    padding-right: 40px;
-    background-position: center;
-    background-repeat: no-repeat;
+    padding-right: 10px;
+    vertical-align: middle;
 }
 
 .mentoring .choices .choice-result.correct {
-    background-image: url({{ correct_icon_url }});
-    cursor: pointer;
+    color: #006600;
+    position: relative;
+    top: -3px;
 }
+
 .mentoring .choices .choice-result.incorrect {
-    background-image: url({{ incorrect_icon_url }});
-    cursor: pointer;
+    margin-right: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    color: #ff0000;
 }
 
 .mentoring .choices .choice-tips,

mentoring/public/js/questionnaire.js

@@ -66,9 +66,9 @@ function MRQBlock(runtime, element) {
                     choiceTipsCloseDOM;
 
                 if (choice.completed) {
-                    choiceResultDOM.removeClass('incorrect').addClass('correct');
+                    choiceResultDOM.removeClass('incorrect icon-exclamation').addClass('correct icon-ok');
                 } else {
-                    choiceResultDOM.removeClass('correct').addClass('incorrect');
+                    choiceResultDOM.removeClass('correct icon-ok').addClass('incorrect icon-exclamation');
                 }
 
                 choiceTipsDOM.html(choice.tips);

mentoring/questionnaire.py

@@ -85,10 +85,6 @@ class QuestionnaireAbstractBlock(LightChild):
         fragment = Fragment(html)
         fragment.add_css(render_template('public/css/questionnaire.css', {
             'self': self,
-            'correct_icon_url': self.runtime.local_resource_url(self.xblock_container,
-                                                                'public/img/correct-icon.png'),
-            'incorrect_icon_url': self.runtime.local_resource_url(self.xblock_container,
-                                                                  'public/img/incorrect-icon.png'),
             'close_icon_url': self.runtime.local_resource_url(self.xblock_container,
                                                               'public/img/close.png'),
         }))

mentoring/templates/html/mentoring.html

@@ -7,10 +7,12 @@
   {{c.body_html|safe}}
   {% endfor %}
   {% if self.display_submit %}
-  <input type="button" value="Submit" class="submit"></input>
+  <div class="submit">
+    <input type="button" value="Submit"></input>
     <span class="progress" data-completed="{{ self.completed }}">
       <span class='indicator'></span>
     </span>
+  </div>
   {% endif %}
   <div class="messages"></div>
 </div>

mentoring/templates/html/mentoring_progress.html

 <script type="text/template" id="xblock-progress-template">
     <% if (completed === "True") {{ %>
-        <img src="{completed}" class="checkmark" alt="Completed">
+    <i class="icon-ok icon-2x checkmark"></i>
     <% }} %>
 </script>

mentoring/templates/html/mrqblock_choices.html

@@ -4,7 +4,7 @@
   <div class="choices-list">
     {% for choice in custom_choices %}
     <div class="choice">
-      <span class="choice-result"></span>
+      <span class="choice-result icon-2x"></span>
       <label class="choice-label">
         <input class="choice-selector" type="checkbox" name="{{ self.name }}" value="{{ choice.value }}"{% if choice.value in self.student_choices %} checked{% endif %}> {{ choice.content }}
       </label>