From 8e5225f4413dfc24b4bf33f70d048f7cd6da0060 Mon Sep 17 00:00:00 2001 From: soufiane Date: Thu, 14 Sep 2023 11:46:34 +0200 Subject: [PATCH] wip #6182 @1:00 question drag and drop --- js/quiz.animations.js | 35 ++++++++++- js/quiz.draganddrop.js | 14 ++--- js/quiz.screens.js | 90 ++++++++++++++++------------- style/106-question-draganddrop.sass | 17 +++++- 4 files changed, 101 insertions(+), 55 deletions(-) diff --git a/js/quiz.animations.js b/js/quiz.animations.js index 0276729..22bfb52 100644 --- 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 bd0b175..1235a68 100644 --- 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 c44436a..6fb9bee 100644 --- 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 42fe4ea..3ea6fbc 100644 --- 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 -- 2.39.5