Add border to assessment mode

mentoring/public/css/mentoring.css

@@ -95,6 +95,11 @@
     height:33.33px;
 }
 
+.mentoring .assessment-question-block {
+    border: 5px solid #e5ebee;
+    padding: 20px;
+}
+
 .mentoring .assessment-checkmark {
     margin-right: 10px;
 }

mentoring/templates/html/mentoring.html

@@ -3,15 +3,19 @@
     You need to complete <a href="{{ missing_dependency_url }}">the previous step</a> before
     attempting this step.
   </div>
+
   {% if self.title or self.header %}
   <div class="title">
-    <h2 class="main">{{ self.title.content }}</h2>
-    <div class="header">{{ self.header.content|safe }}</div>
+    {% if self.title %} <h2 class="main">{{ self.title.content }}</h2> {% endif %}
+    {% if self.header %} <div class="header">{{ self.header.content|safe }}</div> {% endif %}
   </div>
   {% endif %}
+
+  <div class="{{self.mode}}-question-block">
     {% for name, c in named_children %}
     {{c.body_html|safe}}
     {% endfor %}
+
     {% if self.display_submit %}
 
     <div class="grade" data-score="{{ self.score.1 }}"
@@ -38,4 +42,5 @@
     </div>
     {% endif %}
     <div class="messages"></div>
+  </div>
 </div>