Merge pull request #5 from FiloSottile/feedback

Feedback restyle and popup

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,12 +141,39 @@
 }
 
 /*** 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 {
+.xblock--drag-and-drop .popup {
     display: none;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: none repeat scroll 0 0 #66A5B5;
+    opacity: 0.9;
+    padding: 10px;
+    width: 300px;
+    z-index: 100;
+}
+
+.xblock--drag-and-drop .popup .popup-content {
+    color: #fff;
+    font-family: arial;
+    font-size: 14px;
+}
+
+.xblock--drag-and-drop .popup .close {
+    cursor: pointer;
+    position: absolute;
+    top: 5px;
+    right: 3px;
+    width: 18px;
+    height: 21px;
+    font-family: FontAwesome;
+    font-style: normal;
+    text-align: center;
+    color: #fff;
 }

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -6,6 +6,7 @@ function DragAndDropBlock(runtime, element) {
             $ul: $('.xblock--drag-and-drop .items', element),
             $target: $('.xblock--drag-and-drop .target-img', element),
             $feedback: $('.xblock--drag-and-drop .feedback .message', element),
+            $popup: $('.xblock--drag-and-drop .popup', element),
 
             // Cannot set until items added to DOM
             $items: {}, // $('.xblock--drag-and-drop .items .option'),
@@ -82,6 +83,10 @@ function DragAndDropBlock(runtime, element) {
 
                     $dropzone.on('drop', clk.drop.success);
                     $dropzone.on('dropover', clk.drop.hover);
+
+                    $(".close", _fn.$popup).on('click', function() {
+                        _fn.$popup.hide();
+                    });
                 },
                 drag: {
                     start: function(event, ui) {
@@ -207,23 +212,16 @@ 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);
                 },
 
                 // Show a feedback popup
                 popup: function(str, boo) {
                     if (str === undefined || str === '') return;
-                    return $("<div>").attr('title', boo ? 'Correct' : 'Incorrect')
-                        .text(str)
-                        .dialog({
-                            dialogClass: "no-close",
-                            modal: true,
-                            buttons: {
-                                Ok: function() {
-                                    $(this).dialog("close");
-                                }
-                            }
-                    });
+                    _fn.$popup.find(".popup-content").text(str);
+                    return _fn.$popup.show();
                 }
             },
 

drag_and_drop_v2/templates/html/drag_and_drop.html

@@ -8,16 +8,16 @@
     <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">
+        <div class="popup">
+            <div class="close icon-remove-sign fa-times-circle"></div>
+            <p class="popup-content"></p>
+        </div>
+
         <ul class="items"></ul>
 
         <div class="target">
@@ -26,4 +26,9 @@
 
         <div class="clear"></div>
     </section>
+
+    <section class="feedback">
+        <div class="title1">Feedback</div>
+        <p class="message"></p>
+    </section>
 </section>