From e3b60f79349cc50fb468162791341bb4791972e1 Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Mon, 11 Sep 2023 18:08:34 +0200
Subject: [PATCH] wip #6182 @4:00 question drag and drop

---
 js/quiz.draganddrop.js                       | 59 +++++++++++++++-----
 js/quiz.js                                   |  2 +
 js/quiz.screens.js                           |  1 -
 views/screens/question_draganddrop.blade.php |  4 +-
 4 files changed, 49 insertions(+), 17 deletions(-)

diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js
index 387ecc1..3630101 100644
--- a/js/quiz.draganddrop.js
+++ b/js/quiz.draganddrop.js
@@ -25,6 +25,11 @@ QuizDragAndDrop.prototype = {
         this.offsetLeftItemDragged = 0
         this.offsetRightItemDragged = 0
 
+        this.createDraggable()
+    },
+
+    createDraggable: function() {
+        const $this = this
         Draggable.create(this.item, {
             type: "x,y",
             edgeResistance: 0.2,
@@ -83,23 +88,26 @@ QuizDragAndDrop.prototype = {
                             target.addClass("isValidated")
                         },
                         onComplete: function () {
-                            let html = target.html()
-                            $(zone).find(".slot:not(.active)").eq(0).addClass("active").html(html)
+                            let html = target.html(),
+                                id = "answer-"+target.data("id")
+
+                            $(zone).find(".slot:not(.active)").eq(0).addClass("active").html(html).attr('data-order',target.data("id"))
+                            $this.saveAnswer(zone,id)
                             target.remove()
                         }
                     })
-                    .to(".list .overlay", {
-                        y: -heightTarget,
-                        opacity: 0,
-                        onStart: function () {
-                            $(".list-item.isValidated").next().addClass("isNext")
-                        }
-                    }, "<")
-                    .to(".list .overlay", {
-                        y: 0,
-                        opacity: 1,
-                        duration: 0
-                    }, "+=1")
+                        .to(".list .overlay", {
+                            y: -heightTarget,
+                            opacity: 0,
+                            onStart: function () {
+                                $(".list-item.isValidated").next().addClass("isNext")
+                            }
+                        }, "<")
+                        .to(".list .overlay", {
+                            y: 0,
+                            opacity: 1,
+                            duration: 0
+                        }, "+=1")
                 }
 
             },
@@ -123,7 +131,6 @@ QuizDragAndDrop.prototype = {
                 })
             }
         });
-
     },
 
     rotateItem: function($this, direction) {
@@ -175,7 +182,29 @@ QuizDragAndDrop.prototype = {
         return {"x" : x, "y" : y, "w" : w, "h": h, "el": el}
     },
 
+    reset: function() {
+        //this.activeScreen.find("input").prop("checked", false)
+    },
+
+    retreiveAnswer: function () {
+        let question = this.quiz.quiz.question.current(),
+            answers = question.answers
+
+        const $this = this
+
+        this.list.empty()
+        for(let k in answers) {
+            let content = answers[k].answer
+            $this.list.append("<li class='list-item'>"+content+"</li>")
+        }
+        this.item = this.activeScreen.find(".list-item")
+        this.createDraggable()
+    },
 
+    saveAnswer: function(zone,id) {
+        $(zone).find("input[id="+id+"]").prop("checked", true)
+        this.retreiveAnswer()
+    }
 }
 
 export default QuizDragAndDrop;
diff --git a/js/quiz.js b/js/quiz.js
index 8d8e52c..ceadc3e 100644
--- a/js/quiz.js
+++ b/js/quiz.js
@@ -12,6 +12,7 @@ import QuizUtils from './quiz.utils';
 import QuizScreens from './quiz.screens';
 import QuizProgressbar from "./quiz.progressbar";
 import QuizL10n from "./quiz.l10n";
+import QuizDraganddrop from "./quiz.draganddrop";
 
 window.cubeSCORM = new CubeSCORM();
 window.$ = window.jQuery = $;
@@ -43,6 +44,7 @@ Quiz.prototype = {
         this.screens = new QuizScreens(this);
         this.progressbar = new QuizProgressbar(this);
         this.l10n = new QuizL10n(this);
+        this.draganddrop = new QuizDraganddrop(this);
 
         console.log(this.data);
         // ICI tout commence vraiment
diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index 58a5bd5..848be36 100644
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -194,7 +194,6 @@ QuizScreens.prototype = {
         this.getCurrentForm().find("input").prop("checked", false)
     },
 
-
     getActiveScreen() {
         return this.activeScreen;
     },
diff --git a/views/screens/question_draganddrop.blade.php b/views/screens/question_draganddrop.blade.php
index 10d9bc1..58e27ea 100644
--- a/views/screens/question_draganddrop.blade.php
+++ b/views/screens/question_draganddrop.blade.php
@@ -9,6 +9,8 @@
             <form>
                 @foreach($question['answers'] as $key => $answer)
                     <div class="slot">
+                        <input type="checkbox"
+                               id="answer-{{$key}}" class="none" value="{{$key}}">
                     </div>
                 @endforeach
             </form>
@@ -22,7 +24,7 @@
         </div>
         <ul class="list">
             @foreach($question['answers'] as $key => $answer)
-                <li class="list-item {{ $key === 0 ? 'current' : '' }}">
+                <li class="list-item {{ $key === 0 ? 'current' : '' }}" data-id="{{$key}}">
                     {{$answer['answer']}}
                 </li>
             @endforeach
-- 
2.39.5