From: soufiane <soufiane@cubedesigners.com>
Date: Tue, 12 Sep 2023 16:25:45 +0000 (+0200)
Subject: wip #6182 @7:00 question drag and drop
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=4f251f02f00ef4f1d733e34fd59188be8002f02a;p=fluidbook-toolbox-quiz.git

wip #6182 @7:00 question drag and drop
---

diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js
index 3630101..bd0b175 100644
--- a/js/quiz.draganddrop.js
+++ b/js/quiz.draganddrop.js
@@ -4,33 +4,43 @@ import Draggable from "gsap/Draggable.js";
 
 function QuizDragAndDrop(quiz) {
     this.quiz = quiz;
+    this.activeScreen = $(".active-screen")
+    this.list = this.activeScreen.find(".list")
+    this.listHtml = this.list.html()
+    this.zone1 = this.activeScreen.find(".zone-1 .zone-content")
+    this.zone2 = this.activeScreen.find(".zone-2 .zone-content")
+    this.htmlZone1 = this.zone1.html()
+    this.htmlZone2 = this.zone2.html()
+    this.init()
 }
 
 QuizDragAndDrop.prototype = {
 
-    start: function() {
-        const $this = this;
-
+    init: function() {
         gsap.registerPlugin(InertiaPlugin);
         gsap.registerPlugin(Draggable);
+    },
 
-        //let x = $(".list-item").offset().left
-
-        this.activeScreen = $(".active-screen")
+    start: function() {
+        const $this = this;
 
-        this.zone1 = this.activeScreen.find(".zone-1 .zone-content")
-        this.zone2 = this.activeScreen.find(".zone-2 .zone-content")
+        this.activeScreen = this.quiz.screens.getActiveScreen()
         this.list = this.activeScreen.find(".list")
+        this.listHtml = this.list.html()
         this.item = this.activeScreen.find(".list-item")
+        this.zone1 = this.activeScreen.find(".zone-1 .zone-content")
+        this.zone2 = this.activeScreen.find(".zone-2 .zone-content")
+        this.htmlZone1 = this.zone1.html()
+        this.htmlZone2 = this.zone2.html()
         this.offsetLeftItemDragged = 0
         this.offsetRightItemDragged = 0
 
-        this.createDraggable()
+        this.retreiveAnswer()
+        //let x = $(".list-item").offset().left
     },
 
-    createDraggable: function() {
-        const $this = this
-        Draggable.create(this.item, {
+    createDraggable: function($this) {
+        Draggable.create($this.item, {
             type: "x,y",
             edgeResistance: 0.2,
             inertia: false,
@@ -96,18 +106,18 @@ QuizDragAndDrop.prototype = {
                             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
+                    }, "+=0.3")
                 }
 
             },
@@ -133,6 +143,15 @@ QuizDragAndDrop.prototype = {
         });
     },
 
+    animation: function() {
+        const $this = this
+        gsap.to(".list-item", {
+            opacity: 1,
+            ease: "power1.inOut",
+            stagger: .15
+        }, .7)
+    },
+
     rotateItem: function($this, direction) {
         let rotation = 0;
         if(direction.includes("right")) {
@@ -182,28 +201,24 @@ 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
+    retreiveAnswer: function() {
+        //
+        const htmlList = this.quiz.draganddrop.listHtml
+        const htmlZone1 = this.quiz.draganddrop.htmlZone1
+        const htmlZone2 = this.quiz.draganddrop.htmlZone2
 
-        const $this = this
+        this.list.html(htmlList)
+        this.quiz.draganddrop.zone1.html(htmlZone1)
+        this.quiz.draganddrop.zone2.html(htmlZone2)
 
-        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()
+        //
+        this.item = this.quiz.screens.getActiveScreen().find(".list-item")
+        this.animation()
+        this.createDraggable(this)
     },
 
     saveAnswer: function(zone,id) {
         $(zone).find("input[id="+id+"]").prop("checked", true)
-        this.retreiveAnswer()
     }
 }
 
diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index 848be36..c44436a 100644
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -2,11 +2,9 @@ import gsap from "gsap";
 
 import QuizScreenIntro from './quiz.screen.intro';
 import QuizScreenOutro from "./quiz.screen.outro";
-import QuizDragAndDrop from "./quiz.draganddrop";
 
 function QuizScreens(quiz) {
     this.quiz = quiz;
-
     this.activeScreen = null;
     this.currentQuestionAnswers = [];
     this.intervalCountDown = 0;
@@ -14,7 +12,6 @@ function QuizScreens(quiz) {
 
     this.intro = new QuizScreenIntro(this);
     this.outro = new QuizScreenOutro(this);
-    this.draganddrop = new QuizDragAndDrop(this);
     this.initEvents();
 }
 
@@ -176,12 +173,13 @@ QuizScreens.prototype = {
             $this.quiz.progressbar.update();
 
             if($this.quiz.question.isDragAndDrop()) {
-                $this.draganddrop.start()
+                $this.quiz.draganddrop.start()
             }
 
             if (screen === 'outro') {
                 $this.outro.show();
             }
+
         });
     },
 
@@ -190,15 +188,18 @@ QuizScreens.prototype = {
         return this.getActiveScreen().find('form');
     },
 
+
     resetForm: function () {
         this.getCurrentForm().find("input").prop("checked", false)
+        if(this.quiz.question.isDragAndDrop()) {
+            this.quiz.draganddrop.retreiveAnswer()
+        }
     },
 
     getActiveScreen() {
         return this.activeScreen;
     },
 
-
     /**
      * Si un écran est affiché, on le masque puis on exécute le callback. Sinon, on exécute immédiatement le callback
      * @param callback
@@ -265,8 +266,6 @@ QuizScreens.prototype = {
     resetCountdownBackground: function() {
         document.documentElement.style.setProperty("--width-bg-countdown", "100%")
     },
-
-
 };
 
 export default QuizScreens;