Exercise: Fix draggable question type layout for vertical mode - refs BT#21770

assets/css/app.scss

@@ -653,6 +653,56 @@ form .field {
   .question-result {
     padding-top: 30px;
   }
+
+  .exercise-draggable-answer.full-width {
+    width: 100%;
+  }
+
+  .exercise-draggable-answer.list-inline {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+
+  .exercise-draggable-answer.vertical {
+    @apply flex flex-col w-full;
+  }
+
+  .exercise-draggable-answer.horizontal {
+    @apply flex flex-wrap;
+  }
+
+  .droppable-item {
+    @apply flex items-center justify-between p-4 mb-4 rounded-md;
+  }
+
+  .number {
+    @apply text-lg font-bold;
+  }
+
+  .droppable, .ui-droppable {
+    @apply border-2 border-dashed p-4 bg-white rounded-md min-h-[50px];
+  }
+
+  .question_options .question-answer__items--vertical .droppable {
+    width: 98%;
+  }
+
+  .ui-dragging {
+    @apply w-full flex items-center justify-center p-4 border-2 border-dashed;
+  }
+
+  .vertical .ui-draggable-dragging {
+    width: 80%;
+  }
+
+  .question-answer__items--vertical {
+    @apply flex flex-col w-full;
+  }
+
+  .question-answer__items--horizontal {
+    @apply flex flex-row flex-wrap;
+  }
 }
 //@import 'primevue-md-light-indigo/theme.css';
 //@import '~primevue/resources/primevue.min.css';

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

@@ -132,10 +132,14 @@ class ExerciseLib
                 case MATCHING_DRAGGABLE:
                     if (DRAGGABLE == $answerType) {
                         $isVertical = 'v' === $objQuestionTmp->extra;
-                        $s .= '<div><p class="small">'
+                        $s .= '<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.'">';
+                            .'</p>
+                            <div class="w-full ui-widget ui-helper-clearfix">
+                                <div class="clearfix">
+                                    <ul class="exercise-draggable-answer '.($isVertical ? 'vertical' : 'list-inline w-full').'"
+                                        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">';
@@ -1379,10 +1383,10 @@ HTML;
                     $answerCorrect = $objAnswerTmp->isCorrect($answerId);
                     $windowId = $questionId.'_'.$counterAnswer;
                     if ($answerCorrect) {
-                        $s .= '<div class="droppable-item">
-                            <span class="number">'.$counterAnswer.'</span>
-                            <div id="drop_'.$windowId.'" class="droppable"></div>
-                            </div>';
+                        $s .= '<div class="droppable-item '.($isVertical ? 'w-full' : '').' flex items-center justify-between p-4 mb-4 bg-gray-200 rounded-md">';
+                        $s .= '<span class="number text-lg font-bold">'.$counterAnswer.'</span>';
+                        $s .= '<div id="drop_'.$windowId.'" class="droppable border-2 border-dashed border-gray-400 p-4 bg-white rounded-md"></div>';
+                        $s .= '</div>';
                         $counterAnswer++;
                     }
                 }