Add option to display draggable question like with vertical orientation - refs BT#12625

app/Resources/public/css/base.css

@@ -4191,9 +4191,11 @@ ul.holder li.bit-box{
   min-height: 2em;
   min-width: 100%;
 }
+ul.exercise-draggable-answer.list-inline li {
+    float: left;
+}
 ul.exercise-draggable-answer li {
   cursor: move;
-  float: left;
   margin: 0 20px 20px 0;
   padding: 5px 20px;
   text-align: center;

main/exercise/Draggable.php

@@ -52,6 +52,8 @@ class Draggable extends Question
                 $nb_options++;
             }
         } else if (!empty($this->id)) {
+            $defaults['orientation'] = in_array($this->extra, ['h', 'v']) ? $this->extra : 'h';
+
             $answer = new Answer($this->id);
             $answer->read();
 
@@ -76,6 +78,7 @@ class Draggable extends Question
             $defaults['matches[2]'] = '2';
             $defaults['option[1]'] = get_lang('DefaultMatchingOptA');
             $defaults['option[2]'] = get_lang('DefaultMatchingOptB');
+            $defaults['orientation'] = 'h';
         }
 
         for ($i = 1; $i <= $nb_matches; ++$i) {
@@ -85,6 +88,12 @@ class Draggable extends Question
         $form->addElement('hidden', 'nb_matches', $nb_matches);
         $form->addElement('hidden', 'nb_options', $nb_options);
 
+        $form->addRadio(
+            'orientation',
+            get_lang('Orientation'),
+            ['h' => get_lang('Horizontal'), 'v' => get_lang('Vertical')]
+        );
+
         // DISPLAY MATCHES
         $html = '<table class="table table-striped table-hover">
             <thead>
@@ -168,6 +177,7 @@ class Draggable extends Question
      */
     public function processAnswersCreation($form)
     {
+        $this->extra = $form->exportValue('orientation');
         $nb_matches = $form->getSubmitValue('nb_matches');
         $this->weighting = 0;
         $position = 0;

main/exercise/exercise.class.php

@@ -3199,7 +3199,7 @@ class Exercise
         $totalScore = 0;
 
         // Extra information of the question
-        if (!empty($extra)) {
+        if ($answerType == MULTIPLE_ANSWER_TRUE_FALSE && !empty($extra)) {
             $extra = explode(':', $extra);
             if ($debug) {
                 error_log(print_r($extra, 1));

main/inc/lib/exercise.lib.php

@@ -113,9 +113,11 @@ class ExerciseLib
             $num_suggestions = 0;
             if (in_array($answerType, [MATCHING, DRAGGABLE, MATCHING_DRAGGABLE])) {
                 if ($answerType == DRAGGABLE) {
+                    $isVertical = $objQuestionTmp->extra == 'v';
+
                     $s .= '<div class="col-md-12 ui-widget ui-helper-clearfix">
                         <div class="clearfix">
-                        <ul class="exercise-draggable-answer ui-helper-reset ui-helper-clearfix list-inline">';
+                        <ul class="exercise-draggable-answer ui-helper-reset ui-helper-clearfix '.($isVertical ? '' : 'list-inline').'">';
                 } else {
                     $s .= '<div id="drag' . $questionId . '_question" class="drag_question">
                            <table class="data_table">';
@@ -1097,31 +1099,32 @@ HTML;
             }
 
             if ($answerType == DRAGGABLE) {
+                $isVertical = $objQuestionTmp->extra == 'v';
+
                 $s .= "</ul>";
                 $s .= "</div>"; //clearfix
                 $counterAnswer = 1;
-                $s .= '<div class="col-md-12"><div class="row">';
+
+                $s .= $isVertical ? '' : '<div class="row">';
+
                 for ($answerId = 1; $answerId <= $nbrAnswers; $answerId++) {
                     $answerCorrect = $objAnswerTmp->isCorrect($answerId);
                     $windowId = $questionId . '_' . $counterAnswer;
                     if ($answerCorrect) {
-                        $s .= Display::div(
-                            Display::div(
-                                '&nbsp;',
-                                [
-                                    'id' => "drop_$windowId",
-                                    'class' => 'droppable',
-                                ]
-                            ),
-                            [
-                                'class' => 'col-md-3',
-                            ]
-                        );
+                        $s .= $isVertical ? '<div class="row">' : '';
+                        $s .= '
+                            <div class="'.($isVertical ? 'col-md-12' : 'col-md-3').'">
+                                <div id="drop_'.$windowId.'" class="droppable">&nbsp;</div>
+                            </div>
+                        ';
+                        $s .= $isVertical ? '</div>' : '';
+
                         $counterAnswer++;
                     }
                 }
-                $s .= '</div>'; // row
-                $s .= '</div>'; // col-md-12
+
+                $s .= $isVertical ? '' : '</div>'; // row
+//                $s .= '</div>'; // col-md-12
                 $s .= '</div>'; // col-md-12 ui-widget ui-helper-clearfix
             }