wip #6182 @1:00 question drag and drop

diff --git a/js/quiz.animations.js b/js/quiz.animations.js
index 027672975754ef1de7b0fb5face98ebf536b4306..22bfb527b30d54413ad4df116f69566c5fd83152 100644 (file)
--- a/js/quiz.animations.js
+++ b/js/quiz.animations.js
@@ -91,9 +91,42 @@ QuizAnimations.prototype = {
         }).to(".active-screen .footer-question", {
             y: 0, duration: .5, opacity: 1
         })
-    }
+    },
 
+    setAnimItemMultiple: function(tl) {
+        tl.to(".active-screen .list-item", {
+            opacity: 1,
+            ease: "power1.inOut",
+            stagger: .15
+        }, .7)
+        .to(".active-screen .list-item .content", {
+            autoAlpha: 1,
+            stagger: .1
+        }, "<+=.3")
+    },
 
+    setAnimItemDragAndDrop: function(tl) {
+        $(".active-screen .list-item").removeClass("complete")
+        tl.to(".active-screen .list-item", {
+            opacity: function(index) {
+                let opacity = 1
+                if(index === 1) {
+                    opacity = 0.64
+                }else if(index === 2) {
+                    opacity = 0.4
+                }else if(index === 3) {
+                    opacity = 0.16
+                }
+
+                return opacity
+            },
+            ease: "power1.inOut",
+            stagger: .15,
+            onComplete: function(index, target) {
+                $(".active-screen .list-item").addClass("complete")
+            }
+        }, .7)
+    }
 }
 
 

diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js
index bd0b175e5dfeeebbc8aec0c2da315b7549815feb..1235a68ec25ea91ca1acc9dc2ee79f7107da32f1 100644 (file)
--- a/js/quiz.draganddrop.js
+++ b/js/quiz.draganddrop.js
@@ -143,15 +143,6 @@ 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")) {
@@ -213,12 +204,15 @@ QuizDragAndDrop.prototype = {
 
         //
         this.item = this.quiz.screens.getActiveScreen().find(".list-item")
-        this.animation()
         this.createDraggable(this)
+        let tl = gsap.timeline()
+        this.quiz.animations.setAnimItemDragAndDrop(tl)
     },
 
     saveAnswer: function(zone,id) {
         $(zone).find("input[id="+id+"]").prop("checked", true)
+
+        console.log($("input:checked"))
     }
 }
 

diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index c44436ac6486f3cdf26de898cec2936c6da7a308..6fb9bee67583b1d5dd8adf6ecd80ddda4b768c24 100644 (file)
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -9,6 +9,7 @@ function QuizScreens(quiz) {
     this.currentQuestionAnswers = [];
     this.intervalCountDown = 0;
     this.runningManTimeout = 0;
+    this.timeline = null;
 
     this.intro = new QuizScreenIntro(this);
     this.outro = new QuizScreenOutro(this);
@@ -21,7 +22,7 @@ QuizScreens.prototype = {
         const $this = this;
         // Réinitialiser les réponses
         $(document).on("click", ".btn.reset", function () {
-            $this.resetForm();
+            $this.resetForm(false);
         });
 
         // Préparer les réponses du joueur dans l'objet this.responses
@@ -130,42 +131,8 @@ QuizScreens.prototype = {
             }
             $this.activeScreen = screenToShow;
 
-            if($(".active-screen").find(".header-question").length > 0) {
-                gsap.timeline().to(screenToShow, {
-                    autoAlpha: 1
-                })
-                .to(".active-screen .header-question *", {
-                    opacity: 1,
-                    duration: .5
-                })
-                .to(".active-screen .list-item", {
-                    opacity: 1,
-                    ease: "power1.inOut",
-                    stagger: .15
-                }, .7)
-                .to(".active-screen .list-item .content", {
-                    autoAlpha: 1,
-                    stagger: .1
-                }, "<+=.3")
-                .to(".active-screen .footer-question", {
-                    y: 0,
-                    duration: 1,
-                    opacity: 1,
-                    ease: "circ.out",
-                    onComplete: function () {
-                        // if countdown enable we launch it
-                        if ($this.quiz.question.current() !== undefined) {
-                            if (parseInt($this.quiz.question.current().countdown_enable)) {
-                                $this.countdown()
-                            }
-                        }
-                    }
-                }, 1.4)
-            }else {
-                gsap.to(screenToShow, {
-                    autoAlpha: 1
-                })
-            }
+            //
+            $this.animateContent(screenToShow);
 
             // Reset form to prevent browser letting a option selected after a refresh
             $this.resetForm();
@@ -183,16 +150,57 @@ QuizScreens.prototype = {
         });
     },
 
+    animateContent: function(screenToShow) {
+        const $this = this
+        $this.timeline = gsap.timeline();
+        if(screenToShow.find(".header-question").length > 0) {
+            //
+            $this.timeline.to(screenToShow, {
+                autoAlpha: 1
+            }).to(".active-screen .header-question *", {
+                opacity: 1,
+                duration: .5
+            })
+
+            //
+            if($this.quiz.question.isDragAndDrop()) {
+                $this.quiz.animations.setAnimItemDragAndDrop($this.timeline)
+            }else {
+                $this.quiz.animations.setAnimItemMultiple($this.timeline)
+            }
+
+            //
+            $this.timeline.to(".active-screen .footer-question", {
+                y: 0,
+                duration: 1,
+                opacity: 1,
+                ease: "circ.out",
+                onComplete: function () {
+                    // if countdown enable we launch it
+                    if ($this.quiz.question.current() !== undefined) {
+                        if (parseInt($this.quiz.question.current().countdown_enable)) {
+                            $this.countdown()
+                        }
+                    }
+                }
+            }, 1.4)
+        }else {
+            gsap.to(screenToShow, {
+                autoAlpha: 1
+            })
+        }
+    },
 
     getCurrentForm: function () {
         return this.getActiveScreen().find('form');
     },
 
-
-    resetForm: function () {
+    resetForm: function (only = true) {
         this.getCurrentForm().find("input").prop("checked", false)
-        if(this.quiz.question.isDragAndDrop()) {
-            this.quiz.draganddrop.retreiveAnswer()
+        if(!only) {
+            if(this.quiz.question.isDragAndDrop()) {
+                this.quiz.draganddrop.retreiveAnswer()
+            }
         }
     },
 

diff --git a/style/106-question-draganddrop.sass b/style/106-question-draganddrop.sass
index 42fe4ea3f313585bc5740c59025c7c4cfa52c233..3ea6fbcc931af7e70cf078eb6958d61c9a2a99ef 100644 (file)
--- a/style/106-question-draganddrop.sass
+++ b/style/106-question-draganddrop.sass
@@ -62,6 +62,8 @@
                 border: 2px solid transparent
                 &:not(.overlay)
                     transition: top .3s
+                    opacity: 0
+
                     &:nth-child(1)
                         background-color: $neutral-color
                         z-index: 4
@@ -70,25 +72,34 @@
                         &.isNext
                             transform: scale(1) !important
                             transition: all .3s
+                        &.complete
+                            opacity: 1 !important
+
                     &:not(.isDragging)
                         &:nth-child(2)
-                            opacity: .64 !important
                             +opacity(.8,background-color,$neutral-color)
                             transform: scale(.92) !important
                             z-index: 3
                             top: 30px
+                            &.complete
+                                opacity: .64 !important
+
                         &:nth-child(3)
-                            opacity: .4 !important
                             +opacity(.8,background-color,$neutral-color)
                             transform: scale(.83) !important
                             z-index: 2
                             top: 60px
+                            &.complete
+                                opacity: .4 !important
+
                         &:nth-child(4)
-                            opacity: .16 !important
                             +opacity(.8,background-color,$neutral-color)
                             transform: scale(0.75) !important
                             z-index: 1
                             top: 87px
+                            &.complete
+                                opacity: .16 !important
+
                         &:not(:nth-child(-n+4)) // on cache les items à partir du 5ème
                             opacity: 0 !important
                             visibility: hidden