Allow save exercise answer - refs #7612

main/css/base.css

@@ -5878,3 +5878,27 @@ ul.holder li.bit-box{
     height: auto !important;
     max-width: 100%;
 }
+
+/***    Draggable answer    ***/
+.question_options ul.exercise-draggable-answer{
+    float: left;
+    margin-bottom: 20px;
+}
+ul.exercise-draggable-answer li {
+    float: left;
+    margin: 0 20px 20px 0;
+    padding: 5px;
+    text-align: center;
+    width: 200px;
+}
+
+.question_options .droppable {
+    float: left;
+    margin: 0 20px 20px 0;
+    padding: 20px;
+    text-align: center;
+    width: 240px
+}
+.question_options .droppable .gallery .exercise-draggable-answer-option {
+    margin-bottom: 15px;
+}

main/exercice/exercise.class.php

@@ -2758,6 +2758,8 @@ class Exercise
                         }
                     }
                     break;
+                case DRAGGABLE:
+                    //no break
                 case MATCHING:
                     if ($from_database) {
                         $sql = 'SELECT id, answer, id_auto
@@ -2811,12 +2813,22 @@ class Exercise
                                     $questionScore += $i_answerWeighting;
                                     $totalScore += $i_answerWeighting;
                                     if (isset($real_list[$i_answer_id])) {
+                                        if ($answerType == DRAGGABLE) {
+                                            $user_answer = Display::label(get_lang('Correct'), 'success');
+                                        } else {
                                         $user_answer = '<span>'.$real_list[$i_answer_id].'</span>';
                                         }
+                                    }
+                                } else {
+                                    if ($answerType == DRAGGABLE) {
+                                        $user_answer = Display::label(get_lang('NotCorrect'), 'danger');
                                     } else {
                                     $user_answer = '<span style="color: #FF0000; text-decoration: line-through;">'.$real_list[$s_user_answer].'</span>';
                                     }
                                 }
+                            } elseif ($answerType == DRAGGABLE) {
+                                $user_answer = Display::label(get_lang('Incorrect'), 'danger');
+                            }
 
                             if ($show_result) {
                                 echo '<tr>';
@@ -2937,6 +2949,15 @@ class Exercise
                 if ($from == 'exercise_result') {
                     if ($debug) error_log('Showing questions $from '.$from);
                     //display answers (if not matching type, or if the answer is correct)
+                    if (
+                        !in_array(
+                            $answerType,
+                            [MATCHING, DRAGGABLE]
+                        ) ||
+                        $answerCorrect
+                    ) {
+                        
+                    }
                     if ($answerType != MATCHING || $answerCorrect) {
                         if (
                             in_array(
@@ -3521,6 +3542,8 @@ class Exercise
                                 $answerComment
                             );
                             break;
+                        case DRAGGABLE:
+                            //no break
                         case MATCHING:
                             echo '<tr>';
                             echo '<td>' . $answerMatching[$answerId] . '</td>';
@@ -3828,7 +3851,7 @@ class Exercise
                 } else {
                     Event::saveQuestionAttempt($questionScore, 0, $quesId, $exeId, 0, $this->id);
                 }
-            } elseif ($answerType == MATCHING) {
+            } elseif (in_array($answerType, [MATCHING, DRAGGABLE])) {
                 if (isset($matching)) {
                     foreach ($matching as $j => $val) {
                         Event::saveQuestionAttempt($questionScore, $val, $quesId, $exeId, $j, $this->id);

main/exercice/exercise_show.php

@@ -343,7 +343,7 @@ foreach ($questionList as $questionId) {
 		$question_result = $objExercise->manage_answer($id, $questionId, $choice,'exercise_show', array(), false, true, $show_results, $objExercise->selectPropagateNeg());
 		$questionScore   = $question_result['score'];
 		$totalScore     += $question_result['score'];
-	} elseif ($answerType == MATCHING) {
+        } elseif (in_array($answerType, [MATCHING, DRAGGABLE])) {
         $question_result = $objExercise->manage_answer($id, $questionId, $choice,'exercise_show', array(), false, true, $show_results, $objExercise->selectPropagateNeg());
         $questionScore   = $question_result['score'];
         $totalScore     += $question_result['score'];

main/exercice/exercise_submit.php

@@ -57,6 +57,8 @@ $htmlHeadXtra[] = api_get_js('epiclock/javascript/jquery.dateformat.min.js');
 $htmlHeadXtra[] = api_get_js('epiclock/javascript/jquery.epiclock.min.js');
 $htmlHeadXtra[] = api_get_js('epiclock/renderers/minute/epiclock.minute.js');
 
+$htmlHeadXtra[] = (new Template())->fetch('default/exercise/submit.js.tpl');
+
 // General parameters passed via POST/GET
 
 $learnpath_id = isset($_REQUEST['learnpath_id']) ? intval($_REQUEST['learnpath_id']) : 0;

main/inc/lib/exercise.lib.php

@@ -104,8 +104,14 @@ class ExerciseLib
             // on the right side are called answers
             $num_suggestions = 0;
 
-            if ($answerType == MATCHING) {
+            if (in_array($answerType, [MATCHING, DRAGGABLE])) {
+                if ($answerType == DRAGGABLE) {
+                    $s .= '<div class="ui-widget ui-helper-clearfix">
+                        <div class="clearfix">
+                        <ul class="exercise-draggable-answer ui-helper-reset ui-helper-clearfix">';
+                } else {
                 $s .= '<table class="table table-hover table-striped">';
+                }
                 // Iterate through answers
                 $x = 1;
                 //mark letters for each answer
@@ -908,6 +914,93 @@ class ExerciseLib
                         }  // end if()
                         $matching_correct_answer++;
                     }
+                } elseif ($answerType == DRAGGABLE) {
+                    if ($answerCorrect != 0) {
+                        $parsed_answer = $answer;
+                        $windowId = $questionId . '_' . $lines_count;
+
+                        $s .= '<li class="thumbnail" id="' . $windowId . '">';
+                        $s .= Display::div(
+                            $parsed_answer,
+                            [
+                                'id' => "window_$windowId",
+                                'class' => "window{$questionId}_question_draggable exercise-draggable-answer-option"
+                            ]
+                        );
+                        $selectedValue = 0;
+                        $draggableSelectOptions = [];
+
+                        foreach ($select_items as $key => $val) {
+                            if ($debug_mark_answer) {
+                                if ($val['id'] == $answerCorrect) {
+                                    $selectedValue = $val['id'];
+                                }
+                            }
+
+                            if (
+                                isset($user_choice[$matching_correct_answer]) &&
+                                $val['id'] == $user_choice[$matching_correct_answer]['answer']
+                            ) {
+                                $selectedValue = $val['id'];
+                            }
+
+                            $draggableSelectOptions[$val['id']] = $val['letter'];
+                        }
+
+                        $s .= Display::select(
+                            "choice[$questionId][$numAnswer]",
+                            $draggableSelectOptions,
+                            $selectedValue,
+                            [
+                                'id' => "window_{$windowId}_select",
+                                'class' => 'select_option',
+                                'style' => 'display: none;'
+                            ]
+                        );
+
+                        if (!empty($answerCorrect) && !empty($selectedValue)) {
+                            $s .= <<<JAVASCRIPT
+                                <script>
+                                    $(function() {
+                                        DraggableAnswer.deleteItem(
+                                            $('#{$questionId}_{$selectedValue}'),
+                                            $('#drop_$windowId')
+                                        );
+                                    });
+                                </script>
+JAVASCRIPT;
+                        }
+
+                        if (isset($select_items[$lines_count])) {
+                            $s .= Display::div(
+                                Display::tag(
+                                    'b',
+                                    $select_items[$lines_count]['letter']
+                                ) . $select_items[$lines_count]['answer'],
+                                [
+                                    'id' => "window_{$windowId}_answer",
+                                    'style' => 'display: none;'
+                                ]
+                            );
+                        } else {
+                            $s .= '&nbsp;';
+                        }
+
+                        $lines_count++;
+
+                        if (($lines_count - 1) == $num_suggestions) {
+                            while (isset($select_items[$lines_count])) {
+                                $s .= Display::tag('b', $select_items[$lines_count]['letter']);
+                                $s .= $select_items[$lines_count]['answer'];
+
+                                $lines_count++;
+                            }
+                        }
+
+                        $matching_correct_answer++;
+
+                        $s .= '</li>';
+                    }
                 }
             }    // end for()
 
@@ -921,6 +1014,37 @@ class ExerciseLib
                 }
             }
 
+            if ($answerType == DRAGGABLE) {
+                $s .= "</ul></div>";
+
+                $counterAnswer = 1;
+                
+                $s .= '<div class="col-xs-12"><div class="row">';
+
+                for ($answerId = 1; $answerId <= $nbrAnswers; $answerId++) {
+                    $answerCorrect = $objAnswerTmp->isCorrect($answerId);
+                    $windowId = $questionId . '_' . $counterAnswer;
+
+                    if ($answerCorrect) {
+                        $s .= Display::div(
+                            $counterAnswer,
+                            [
+                                'id' => "drop_$windowId",
+                                'class' => 'droppable col-sm-4 well'
+                            ]
+                        );
+
+                        $counterAnswer++;
+                    }
+                }
+
+                $s .= '</div></div>';
+            }
+
+            if ($answerType == MATCHING) {
+                $s .= '</div>';
+            }
+
             $s .= '</div>';
 
             // destruction of the Answer object

main/template/default/exercise/submit.js.tpl

@@ -0,0 +1,94 @@
+<script>
+    var DraggableAnswer = {
+        gallery: null,
+        trash: null,
+        deleteItem: function (item, insertHere) {
+            if (insertHere.find(".exercise-draggable-answer-option").length > 0) {
+                return false;
+            }
+
+            item.fadeOut(function () {
+                var $list = $('<div class="gallery ui-helper-reset"/>').appendTo(insertHere);
+
+                item.find('a.btn').remove();
+
+                var droppedId = item.attr('id'),
+                    dropedOnId = insertHere.attr('id'),
+                    originSelectId = 'window_' + droppedId + '_select',
+                    value = dropedOnId.split('_')[2];
+
+                $('#' + originSelectId + ' option')
+                    .filter(function () {
+                        return $(this).val() == value;
+                    })
+                    .attr("selected", true);
+
+                var recycleButton = $('<a>')
+                        .attr('href', '#')
+                        .addClass('btn btn-default btn-xs')
+                        .append(
+                            $('<i>').addClass('fa fa-refresh')
+                        )
+                        .on('click', function (e) {
+                            e.preventDefault();
+
+                            var liParent = $(this).parent();
+
+                            DraggableAnswer.recycleItem(liParent);
+                        });
+
+                item.append(recycleButton).appendTo($list).fadeIn();
+            });
+        },
+        recycleItem: function (item) {
+            item.fadeOut(function () {
+                item
+                    .find('a.btn')
+                    .remove()
+                    .end()
+                    .find("img")
+                    .end()
+                    .appendTo(DraggableAnswer.gallery)
+                    .fadeIn();
+            });
+
+            var droppedId = item.attr('id'),
+                originSelectId = 'window_' + droppedId + '_select';
+
+            $('#' + originSelectId + ' option:first').attr('selected', 'selected');
+        },
+        init: function (gallery, trash) {
+            this.gallery = gallery;
+            this.trash = trash;
+
+            $("li", DraggableAnswer.gallery).draggable({
+                cancel: "a.ui-icon",
+                revert: "invalid",
+                containment: "document",
+                helper: "clone",
+                cursor: "move"
+            });
+
+            DraggableAnswer.trash.droppable({
+                accept: ".exercise-draggable-answer > li",
+                hoverClass: "ui-state-active",
+                drop: function (e, ui) {
+                    DraggableAnswer.deleteItem(ui.draggable, $(this));
+                }
+            });
+
+            DraggableAnswer.gallery.droppable({
+                drop: function (e, ui) {
+                    DraggableAnswer.recycleItem(ui.draggable, $(this));
+                }
+            });
+        }
+    };
+
+    $(document).on('ready', function () {
+        DraggableAnswer.init(
+            $(".exercise-draggable-answer"),
+            $(".droppable")
+        );
+    });
+</script>