Restyle question feedback

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -32,6 +32,14 @@
     clear: both;
 }
 
+.xblock--drag-and-drop .title1 {
+    color: rgb(85, 85, 85);
+    text-transform: uppercase;
+    font-weight: bold;
+    font-style: normal;
+    margin: 10px 0;
+}
+
 
 /** Draggable Items **/
 .xblock--drag-and-drop .drag-container .items {
@@ -133,10 +141,10 @@
 }
 
 /*** FEEDBACK ***/
-.xblock--drag-and-drop .feedback p {
-    line-height: 1.5em;
-    font-weight: bold;
-    margin-bottom: 1.41575em;
+.xblock--drag-and-drop .feedback {
+    margin-top: 20px;
+    border-top: solid 1px rgb(189, 189, 189);
+    padding-top: 20px;
 }
 
 .no-close .ui-dialog-titlebar-close {

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -207,6 +207,8 @@ function DragAndDropBlock(runtime, element) {
             feedback: {
                 // Update DOM with feedback
                 set: function(str) {
+                    if ($.trim(str) === '') _fn.$feedback.parent().hide();
+                    else _fn.$feedback.parent().show();
                     return _fn.$feedback.html(str);
                 },
 

drag_and_drop_v2/templates/html/drag_and_drop.html

@@ -8,13 +8,8 @@
     <div class="problem-progress">{{ max_score_string }}</div>
 
     <section class="problem" role="application">
-        <p>
-            {{ question_text }}
-        </p>
-    </section>
-
-    <section class="feedback">
-        <p class="message"></p>
+        <div class="title1">Question</div>
+        <p>{{ question_text }}</p>
     </section>
 
     <section class="drag-container">
@@ -26,4 +21,9 @@
 
         <div class="clear"></div>
     </section>
+
+    <section class="feedback">
+        <div class="title1">Feedback</div>
+        <p class="message"></p>
+    </section>
 </section>