Restore CSS for draggable question

assets/css/scss/_exercise.scss

@@ -1,5 +1,9 @@
 // Exercise CSS
 
+.main-question {
+  @apply mb-4;
+}
+
 .question_menu {
   list-style: none;
   margin: 0;
@@ -99,4 +103,55 @@
       }
     }
   }
-}
+
+  /* Question sequence ordering */
+  &.type-18 {
+    .exercise-draggable-answer {
+      @apply border-dashed border-4 p-4 mb-3 flex flex-row flex-wrap gap-4;
+
+      &:empty {
+        min-height: 4rem;
+      }
+    }
+
+    .exercise-draggable-answer-option {
+      @apply border border-gray-400 rounded-sm p-2 cursor-move bg-gray-100;
+    }
+
+    .question-answer__items {
+      &--horizontal,
+      &--vertical {
+        @apply flex gap-4;
+      }
+
+      &--horizontal {
+        @apply flex-row flex-wrap;
+      }
+      &--vertical {
+        @apply flex-col;
+      }
+    }
+
+    .droppable-item {
+      @apply p-2 bg-indigo-200;
+
+      &.list-inline {
+        @apply text-center align-middle;
+      }
+
+      span.number {
+        @apply font-bold;
+      }
+
+      .droppable {
+        @apply p-2;
+
+        &:empty {
+          @apply bg-indigo-300 rounded-sm;
+          min-height: 4rem;
+          min-width: 6rem;
+        }
+      }
+    }
+  }
+}

public/main/inc/lib/exercise.lib.php

@@ -139,14 +139,10 @@ class ExerciseLib
                 case MATCHING_DRAGGABLE:
                     if (DRAGGABLE == $answerType) {
                         $isVertical = 'v' === $objQuestionTmp->extra;
-                        $s .= '
-                            <div class="row">
-                                <div class="col-md-12">
-                                    <p class="small">'.get_lang('DraggableQuestionIntro').'</p>
-                                    <ul class="exercise-draggable-answer list-unstyled '
-                            .($isVertical ? '' : 'list-inline').'" id="question-'.$questionId.'" data-question="'
-                            .$questionId.'">
-                        ';
+                        $s .= '<div><p class="small">'
+                            .get_lang('Sort the following options from the list as you see fit by dragging them to the lower areas. You can put them back in this area to modify your answer.')
+                            .'</p><ul class="exercise-draggable-answer '.($isVertical ? '' : 'list-inline')
+                            .'" id="question-'.$questionId.'" data-question="'.$questionId.'">';
                     } else {
                         $s .= '<div id="drag'.$questionId.'_question" class="drag_question">
                                <table class="table table-hover table-striped data_table">';
@@ -1377,33 +1373,22 @@ HTML;
 
             if (DRAGGABLE == $answerType) {
                 $isVertical = 'v' == $objQuestionTmp->extra;
-                $s .= "
-                           </ul>
-                        </div><!-- .col-md-12 -->
-                    </div><!-- .row -->
-                ";
+                $s .= "</ul></div>";
                 $counterAnswer = 1;
-                $s .= $isVertical ? '' : '<div class="row">';
+                $s .= '<div class="question-answer__items--'.($isVertical ? 'vertical' : 'horizontal').'">';
                 for ($answerId = 1; $answerId <= $nbrAnswers; $answerId++) {
                     $answerCorrect = $objAnswerTmp->isCorrect($answerId);
                     $windowId = $questionId.'_'.$counterAnswer;
                     if ($answerCorrect) {
-                        $s .= $isVertical ? '<div class="row">' : '';
-                        $s .= '
-                            <div class="'.($isVertical ? 'col-md-12' : 'col-xs-12 col-sm-4 col-md-3 col-lg-2').'">
-                                <div class="droppable-item">
-                                    <span class="number">'.$counterAnswer.'.</span>
-                                    <div id="drop_'.$windowId.'" class="droppable">
-                                    </div>
-                                 </div>
-                            </div>
-                        ';
-                        $s .= $isVertical ? '</div>' : '';
+                        $s .= '<div class="droppable-item">
+                            <span class="number">'.$counterAnswer.'</span>
+                            <div id="drop_'.$windowId.'" class="droppable"></div>
+                            </div>';
                         $counterAnswer++;
                     }
                 }
 
-                $s .= $isVertical ? '' : '</div>'; // row
+                $s .= '</div>';
 //                $s .= '</div>';
             }
 

public/main/template/default/exercise/submit.js.html.twig

@@ -41,6 +41,14 @@ var DraggableAnswer = {
             item
                 .appendTo(DraggableAnswer.gallery.filter('[data-question="' + questionId + '"]'))
                 .fadeIn();
+
+            DraggableAnswer.trash.children('.gallery').each(function () {
+                var $el = $(this);
+
+                if ($el.children().length === 0) {
+                    $el.remove();
+                }
+            });
         });
 
         $('#' + originSelectId + ' option').prop('selected', false);