Some more work for a better styling

mentoring/public/css/mentoring.css

+.mentoring .title {
+    display: inline-block;
+}
+
 .mentoring .messages {
     display: none;
     margin-top: 10px;

mentoring/public/css/questionnaire.css

@@ -52,11 +52,10 @@
 
 .mentoring .questionnaire .choice-tips .close,
 .mentoring .questionnaire .feedback .close {
-    background-image: url({{ close_icon_url }});
     cursor: pointer;
     position: absolute;
-    top: -10px;
-    right: -10px;
+    top: 5px;
+    right: 0px;
     width: 18px;
     height: 21px;
 }

mentoring/public/js/questionnaire.js

@@ -95,8 +95,8 @@ function MCQBlock(runtime, element) {
             });
 
             if (_.isNull(result.submission)) {
-                messageView.showMessage('<div class="message-content"><div class="close"></div>' +
-                                        'You have not provided an answer.' + '</div>');
+                messageView.showMessage('<div class="message-content">You have not provided an answer.</div>' +
+                                        '<i class="close icon-remove-sign fa-times-circle"></i>');
             }
             else if (result.tips) {
                 var tips = _.find(result.tips, function(obj) {
@@ -109,7 +109,7 @@ function MCQBlock(runtime, element) {
                 }
             }
         },
-        
+
         validate: function(){
             var checked = $('input[type=radio]:checked', element);
             if (checked.length) {
@@ -140,8 +140,8 @@ function MRQBlock(runtime, element) {
             var messageView = MessageView(element);
 
             if (result.message) {
-                messageView.showMessage('<div class="message-content"><div class="close"></div>' +
-                                        result.message + '</div>');
+                messageView.showMessage('<div class="message-content">' + result.message + '</div>'+
+                                        '<i class="close icon-remove-sign fa-times-circle"></i>');
             }
 
             var questionnaireDOM = $('fieldset.questionnaire', element),

mentoring/questionnaire.py

@@ -84,9 +84,7 @@ class QuestionnaireAbstractBlock(LightChild):
 
         fragment = Fragment(html)
         fragment.add_css(render_template('public/css/questionnaire.css', {
-            'self': self,
-            'close_icon_url': self.runtime.local_resource_url(self.xblock_container,
-                                                              'public/img/close.png'),
+            'self': self
         }))
         fragment.add_javascript_url(self.runtime.local_resource_url(self.xblock_container,
                                                                     'public/js/questionnaire.js'))

mentoring/templates/html/mentoring.html

@@ -4,7 +4,10 @@
     attempting this step.
   </div>
   {% if self.title %}
-  <h2>{{ self.title.content }} {% if self.weight %} ({{ self.weight }} Points Possible) {% endif %}</h2>
+  <div class="title">
+    <h2 class="title main">{{ self.title.content }}</h2>
+    <span class="title weight">{% if self.weight %} ({{ self.weight }} Points Possible) {% endif %}</span>
+  </div>
   {% endif %}
   {% for name, c in named_children %}
   {{c.body_html|safe}}