From bec06f0643f90d6a7ad27648b1b0de65927e8e17 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Wed, 20 Sep 2023 14:16:41 +0200
Subject: [PATCH] wait #6295 @1

---
 js/quiz.draganddrop.js                        | 32 +++++++++++--------
 js/quiz.score.js                              | 12 ++++++-
 style/106-question-draganddrop.sass           |  3 +-
 .../question_draganddrop_area.blade.php       | 16 ++++------
 4 files changed, 37 insertions(+), 26 deletions(-)

diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js
index b951025..2e5a2bf 100644
--- a/js/quiz.draganddrop.js
+++ b/js/quiz.draganddrop.js
@@ -19,9 +19,9 @@ QuizDragAndDrop.prototype = {
             let move = $(this).attr("aria-keyshortcuts"), zone = false;
 
             if (move === "ARROWLEFT") {
-                zone = $this.zone1
+                zone = 'zone-1';
             } else {
-                zone = $this.zone2
+                zone = 'zone-2';
             }
 
             $this.sendCurrentAnswerToArea(zone);
@@ -38,6 +38,7 @@ QuizDragAndDrop.prototype = {
         this.zone2 = this.activeScreen.find(".zone-2 .zone-content")
         this.htmlZone1 = this.zone1.html()
         this.htmlZone2 = this.zone2.html()
+        this.quiz.screens.currentQuestionAnswers = [];
         this.offsetLeftItemDragged = 0
         this.offsetRightItemDragged = 0
 
@@ -48,6 +49,8 @@ QuizDragAndDrop.prototype = {
         if (this.animating === true) {
             return;
         }
+        this.quiz.screens.currentQuestionAnswers.push(area === 'zone-1' ? 1 : 2);
+
         this.animating = true;
         const $this = this;
         const current = this.activeScreen.find(".list-item:first-child");
@@ -206,10 +209,8 @@ QuizDragAndDrop.prototype = {
         let id = "answer-" + target.data("id");
 
         if (!this.quiz.resize.isMobile()) {
-            $(zone).find(".slot:not(.active)").eq(0).addClass("active").append("<h4>" + title + "</h4><p>" + text + "</p>").attr('data-order', target.data("id"))
+            this.getAreaElement(zone).find(".slot:not(.active)").eq(0).addClass("active").append("<h4>" + title + "</h4><p>" + text + "</p>").attr('data-order', target.data("id"))
         }
-
-        $this.saveAnswer(zone, id)
         target.remove()
     },
 
@@ -229,20 +230,28 @@ QuizDragAndDrop.prototype = {
         });
 
         if ($(".zone-content.active").length > 0) {
-            zone = "." + $(".zone-content.active").parent().data("zone")
+            zone = $(".zone-content.active").parent().data("zone")
         }
 
         return zone
     },
 
     getSlotInformations: function (zone) {
-        let x = ($(zone).find(".slot:not(.active)").offset().left - this.list.offset().left),
-            y = ($(zone).find(".slot:not(.active)").offset().top - this.list.offset().top),
-            w = $(zone).find(".slot").innerWidth(), h = $(zone).find(".slot").innerHeight(), el = $(zone).find(".slot")
+
+        let a = this.getAreaElement(zone);
+        let freeSlot = $(a).find('.slot:not(.active)').eq(0);
+        let freeSlotOffset = $(freeSlot).offset();
+
+        let x = (freeSlotOffset.left - this.list.offset().left), y = (freeSlotOffset.top - this.list.offset().top),
+            w = $(a).find(".slot").innerWidth(), h = $(a).find(".slot").innerHeight(), el = $(a).find(".slot")
 
         return {"x": x, "y": y, "w": w, "h": h, "el": el}
     },
 
+    getAreaElement: function (area) {
+        return this.quiz.screens.getActiveScreen().find('[data-zone="' + area + '"]')
+    },
+
     initQuestion: function () {
         //
         const htmlList = this.quiz.draganddrop.listHtml
@@ -259,11 +268,6 @@ QuizDragAndDrop.prototype = {
         let tl = gsap.timeline()
         this.quiz.animations.animateDragAndDropCarrousel(tl)
     },
-
-    saveAnswer: function (zone, id) {
-        $(zone).find("input[id=" + id + "]").prop("checked", true)
-        this.quiz.screens.updateUserAnswers();
-    }
 }
 
 export default QuizDragAndDrop;
diff --git a/js/quiz.score.js b/js/quiz.score.js
index b205d1c..64f912f 100644
--- a/js/quiz.score.js
+++ b/js/quiz.score.js
@@ -85,6 +85,16 @@ QuizScore.prototype = {
                 }
                 ok = this_score >= min_score ? 'ok' : 'nok';
 
+                log.answer = a;
+            } else if (question.type === 'draganddrop') {
+                min_score = this.getMinScore(question);
+                this_score = 0;
+                for (let answerIndex in question.answers) {
+                    const answer = question.answers[answerIndex];
+                    this_score += ((answer.drop_area === userAnswers[answerIndex]) ? 1 : 0);
+                }
+                ok = this_score >= min_score ? 'ok' : 'nok';
+
                 log.answer = a;
             } else {
                 log.answer = $(this).find('input,textarea,select').val();
@@ -121,7 +131,7 @@ QuizScore.prototype = {
             min_score = 0;
             for (const answerIndex in question.answers) {
                 const answer = question.answers[answerIndex];
-                if (answer.correct === 1) {
+                if (answer.correct === 1 || question.type === 'draganddrop' || question.type === 'match') {
                     min_score += answer.score;
                 }
             }
diff --git a/style/106-question-draganddrop.sass b/style/106-question-draganddrop.sass
index 793390c..5dff609 100644
--- a/style/106-question-draganddrop.sass
+++ b/style/106-question-draganddrop.sass
@@ -214,7 +214,7 @@
                 left: 0
 
             .zone-content
-                max-width: 95%
+                width: 95%
                 height: auto
                 left: 50%
                 transform: translateX(-50%)
@@ -231,6 +231,7 @@
 
                 p
                     font-size: 14px
+                    white-space: pre-line
                     +opacity(.8, color, $texts-color)
 
             .slot
diff --git a/views/screens/question_draganddrop_area.blade.php b/views/screens/question_draganddrop_area.blade.php
index f76cd72..bd3104e 100644
--- a/views/screens/question_draganddrop_area.blade.php
+++ b/views/screens/question_draganddrop_area.blade.php
@@ -11,16 +11,12 @@
             <p>{{ $question['area_'.$area]['text'] }}</p>
         </div>
         <div class="card-holder">
-            <form>
-                @foreach($question['answers'] as $key => $answer)
-                    <div class="slot">
-                        <input type="checkbox"
-                               id="answer-{{$key}}" class="none" value="{{$key}}">
-                        <h4></h4>
-                        <p></p>
-                    </div>
-                @endforeach
-            </form>
+            @foreach($question['answers'] as $key => $answer)
+                <div class="slot">
+                    <h4></h4>
+                    <p></p>
+                </div>
+            @endforeach
         </div>
     </div>
 </div>
-- 
2.39.5