Adjust feedback popup styles for mobile

drag_and_drop_v2/public/css/drag_and_drop.css

@@ -112,6 +112,19 @@
     z-index: 10 !important;
 }
 
+@media screen and (max-width: 480px) {
+   /* Horizontal scroll for item bank on mobile */
+    .xblock--drag-and-drop .item-bank {
+        -ms-flex-flow: row nowrap;
+        flex-flow: row nowrap;
+        overflow-x: auto;
+    }
+
+    .xblock--drag-and-drop .drag-container .item-bank .option {
+        flex-shrink: 0;
+    }
+}
+
 .xblock--drag-and-drop .drag-container .option.specified-width img {
     width: 100%;  /* If the image is smaller than the specified width, make it larger */
 }
@@ -405,7 +418,7 @@
     max-width: 100%;
 }
 
-.xblock--drag-and-drop .popup .close-feedback-popup-button {
+.xblock--drag-and-drop .popup .close-feedback-popup-desktop-button {
     cursor: pointer;
     margin-top: 8px;
     color: #ffffff;
@@ -413,22 +426,110 @@
     font-size: 18pt;
 }
 
-.ltr .xblock--drag-and-drop .popup .close-feedback-popup-button {
+.xblock--drag-and-drop .popup .close-feedback-popup-mobile-button {
+    display: none;
+}
+
+.xblock--drag-and-drop .popup .popup-header-icon {
+    display: none;
+}
+
+.xblock--drag-and-drop .popup .popup-header-text {
+    display: none;
+}
+
+.xblock--drag-and-drop .popup .popup-header-icon.popup-header-icon-incorrect {
+    color: #ff143e;
+}
+
+.ltr .xblock--drag-and-drop .popup .close-feedback-popup-desktop-button {
     float: right;
     margin-right: 8px;
     margin-left: 20px;
 }
 
-.rtl .xblock--drag-and-drop .popup .close-feedback-popup-button {
+.rtl .xblock--drag-and-drop .popup .close-feedback-popup-desktop-button {
     float: left;
     margin-right: 20px;
     margin-left: 8px;
 }
 
-.xblock--drag-and-drop .popup .close-feedback-popup-button:focus {
+.xblock--drag-and-drop .popup .close-feedback-popup-desktop-button:focus {
     outline: 2px dotted white;
 }
 
+@media screen and (max-width: 480px) {
+    .xblock--drag-and-drop .popup .popup-content p {
+        text-align: center;
+    }
+
+    .xblock--drag-and-drop .popup {
+        background-color: #fff;
+        border-radius: 10px;
+        text-align: center;
+        box-shadow: 0 0 100px rgba(0,0,0,0.4);
+        border: none;
+        max-height: 90vh;
+    }
+
+    .xblock--drag-and-drop .popup .close-feedback-popup-desktop-button {
+        display: none;
+    }
+
+    .xblock--drag-and-drop .popup.popup-incorrect {
+        background-color: #fff;
+    }
+
+    .xblock--drag-and-drop .popup .popup-header-icon {
+        display: inline-block;
+        margin-top: 10px;
+        color: #629a2c;
+        font-size: 20pt;
+    }
+
+    .xblock--drag-and-drop .popup .popup-header-icon.popup-header-icon-incorrect {
+        color: #ff143e;
+    }
+
+    .xblock--drag-and-drop .popup .popup-header-text {
+        display: block;
+        padding: 2px 0 8px;
+        font-weight: 600;
+    }
+
+    .xblock--drag-and-drop .popup .popup-content {
+        color: #629a2c;
+        margin: 10px 0px 0px 0px;
+        font-size: 14px;
+        background-color: #f4ffe7;
+        padding: 20px;
+        border-color: #eee;
+        border-style: solid;
+        border-width: 1px 0 1px 0;
+    }
+
+    .xblock--drag-and-drop .popup .popup-content ul {
+        list-style-position: inside;
+        padding: 0;
+    }
+
+    .xblock--drag-and-drop .popup .popup-content.popup-content-incorrect {
+        color: #ff143e;
+        background-color: #ffe8ec;
+    }
+
+    .xblock--drag-and-drop .popup .close-feedback-popup-mobile-button {
+        display: inline;
+        cursor: pointer;
+        margin-top: 10px;
+        margin-bottom: 10px;
+        color: #3384ca;
+        font-size: 12pt;
+        padding: 10px;
+    }
+}
+
+
 /*** edX pattern library components ***/
 
 /* reset stock edx-platform button styles */
@@ -586,19 +687,6 @@
     }
 }
 
-@media screen and (max-width: 480px) {
-   /* Horizontal scroll for item bank on mobile */
-    .xblock--drag-and-drop .drag-container .item-bank .option {
-        flex-shrink: 0;
-    }
-
-    .xblock--drag-and-drop .item-bank {
-        -ms-flex-flow: row nowrap;
-        flex-flow: row nowrap;
-        overflow-x: auto;
-    }
-}
-
 .xblock--drag-and-drop .sidebar-buttons .sidebar-button-wrapper {
     border-collapse: collapse;
     padding: 0 5px;

drag_and_drop_v2/public/js/drag_and_drop.js

@@ -427,11 +427,19 @@ function DragAndDropTemplates(configuration) {
                     return h("li", {innerHTML: message.message});
                 }))
             ];
-            popup_content = h("div.popup-content", {}, have_messages ? content_items : []);
+            popup_content = h(
+                ctx.last_action_correct ? "div.popup-content" : "div.popup-content.popup-content-incorrect",
+                {},
+                have_messages ? content_items : []
+            );
         } else {
-            popup_content = h("div.popup-content", {}, msgs.map(function(message) {
-                return h("p", {innerHTML: message.message});
-            }))
+            popup_content = h(
+                ctx.last_action_correct ? "div.popup-content" : "div.popup-content.popup-content-incorrect",
+                {},
+                msgs.map(function(message) {
+                    return h("p", {innerHTML: message.message});
+                })
+            );
         }
 
         return h(
@@ -441,7 +449,7 @@ function DragAndDropTemplates(configuration) {
             },
             [
                 h(
-                    'button.unbutton.close-feedback-popup-button',
+                    'button.unbutton.close-feedback-popup-button.close-feedback-popup-desktop-button',
                     {},
                     [
                         h(
@@ -460,7 +468,37 @@ function DragAndDropTemplates(configuration) {
                         )
                     ]
                 ),
-                popup_content
+                h(
+                    ctx.last_action_correct ? 'div.popup-header-icon' : 'div.popup-header-icon.popup-header-icon-incorrect',
+                    {},
+                    [
+                        h(
+                            ctx.last_action_correct ? 'span.icon.fa.fa-check-circle' : 'span.icon.fa.fa-exclamation-circle',
+                            {
+                                attributes: {
+                                    'aria-hidden': true
+                                }
+                            }
+                        )
+                    ]
+                ),
+                h(
+                    'div.popup-header-text',
+                    {},
+                    ctx.last_action_correct ? gettext("Correct") : gettext("Incorrect")
+                ),
+                popup_content,
+                h(
+                    'button.unbutton.close-feedback-popup-button.close-feedback-popup-mobile-button',
+                    {},
+                    [
+                        h(
+                            'span',
+                            {},
+                            gettext("Close")
+                        )
+                    ]
+                )
             ]
         )
     };
@@ -1092,7 +1130,7 @@ function DragAndDropBlock(runtime, element, configuration) {
     var focusItemFeedbackPopup = function() {
         var popup = $root.find('.item-feedback-popup');
         if (popup.length && popup.is(":visible")) {
-            popup.find('.close-feedback-popup-button').focus();
+            popup.find('.close-feedback-popup-button:visible').focus();
             return true;
         }
         return false;