From e6755a4c777ab4b22be994e59f5e615e14d14414 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Tue, 19 Sep 2023 20:45:53 +0200 Subject: [PATCH] wip #6295 @0.5 --- js/quiz.draganddrop.js | 109 ++++++++----------- js/quiz.question.js | 4 - js/quiz.screens.js | 65 ++++++----- views/screens/intro.blade.php | 2 +- views/screens/outro.blade.php | 24 +++- views/screens/question_draganddrop.blade.php | 2 +- views/screens/question_match.blade.php | 2 +- views/screens/question_multiple.blade.php | 2 +- 8 files changed, 103 insertions(+), 107 deletions(-) diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js index 30fd113..b951025 100644 --- a/js/quiz.draganddrop.js +++ b/js/quiz.draganddrop.js @@ -4,26 +4,32 @@ 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() + this.animating = false; + this.init(); } QuizDragAndDrop.prototype = { init: function () { + const $this = this; gsap.registerPlugin(InertiaPlugin); gsap.registerPlugin(Draggable); + + $(document).on("click", ".move-card", function () { + let move = $(this).attr("aria-keyshortcuts"), zone = false; + + if (move === "ARROWLEFT") { + zone = $this.zone1 + } else { + zone = $this.zone2 + } + + $this.sendCurrentAnswerToArea(zone); + }); }, start: function () { - const $this = this - this.isMobile = this.quiz.resize.isMobile() + this.activeScreen = this.quiz.screens.getActiveScreen() this.list = this.activeScreen.find(".list") this.listHtml = this.list.html() @@ -35,23 +41,14 @@ QuizDragAndDrop.prototype = { this.offsetLeftItemDragged = 0 this.offsetRightItemDragged = 0 - $(document).on("click", ".move-card", function () { - let move = $(this).attr("aria-keyshortcuts"), - zone = false; - - if (move === "ARROWLEFT") { - zone = $this.zone1 - } else { - zone = $this.zone2 - } - - $this.sendCurrentAnswerToArea(zone); - }); - - this.retreiveAnswer() + this.initQuestion(); }, sendCurrentAnswerToArea: function (area) { + if (this.animating === true) { + return; + } + this.animating = true; const $this = this; const current = this.activeScreen.find(".list-item:first-child"); $(current).addClass('isDragging').removeClass('isNext').css('transform', 'scale(1)'); @@ -73,46 +70,45 @@ QuizDragAndDrop.prototype = { } if (this.quiz.resize.isMobile()) { rules = { - scale: 0.8, - duration: .3, - autoAlpha: 0, + scale: 0.8, duration: .3, autoAlpha: 0, } } gsap.timeline() .to(current, { - ...rules, - onStart: function () { + ...rules, onStart: function () { current.addClass("isValidated") gsap.set(current.next(), {opacity: 1}) - }, - onComplete: function () { + }, onComplete: function () { $this.slapping(area, current) } }) .to(".list .overlay", { - y: -heightTarget, - opacity: 0, - onStart: function () { - if(current.next('.list-item').length===0){ - console.log(':)'); - $this.toggleScreen(0, "none"); - }else { + y: -heightTarget, opacity: 0, onStart: function () { + if (current.next('.list-item').length === 0) { + $this.quiz.screens.toggleScreen(0, "none"); + } else { current.next('.list-item').addClass("isNext") } } }, "<") .to(".list .overlay", { - y: 0, - opacity: 1, - duration: 0 + y: 0, opacity: 1, duration: 0 }, "+=0.3") + .then(function () { + $this.animating = false; + }); } }, + reset: function () { + this.initQuestion(); + this.quiz.screens.toggleScreen(1, 'all'); + }, + createDraggable: function ($this) { Draggable.create($this.item, { - type: $this.isMobile ? "y" : "x,y", + type: $this.quiz.resize.isMobile() ? "y" : "x,y", edgeResistance: 0.2, inertia: false, bounds: "#quiz", @@ -130,13 +126,11 @@ QuizDragAndDrop.prototype = { // fix bug scale !important from css gsap.to(this.target, { - scale: 1, - duration: 0, - immediateRender: true + scale: 1, duration: 0, immediateRender: true }) //set rotation on desktop - if (!$this.isMobile) { + if (!$this.quiz.resize.isMobile()) { $this.rotateItem(this, direction) } @@ -165,8 +159,7 @@ QuizDragAndDrop.prototype = { // if (!$this.getZoneOverlap(this.target)) { gsap.to(this.target, { - x: 0, - y: 0, + x: 0, y: 0, }) } @@ -212,7 +205,7 @@ QuizDragAndDrop.prototype = { let text = target.find('p').text(); let id = "answer-" + target.data("id"); - if (!this.isMobile) { + if (!this.quiz.resize.isMobile()) { $(zone).find(".slot:not(.active)").eq(0).addClass("active").append("

" + title + "

" + text + "

").attr('data-order', target.data("id")) } @@ -220,13 +213,6 @@ QuizDragAndDrop.prototype = { target.remove() }, - toggleScreen: function (opacity, pointer) { - gsap.to(".active-screen .screen", { - opacity: opacity, - pointerEvents: pointer - }) - }, - getZoneOverlap: function (target) { let zone = false var rectSelection = target.getBoundingClientRect(); @@ -235,10 +221,7 @@ QuizDragAndDrop.prototype = { [].forEach.call(document.querySelectorAll(".zone-content"), function (div) { var rect = div.getBoundingClientRect(); - if (rect.bottom > rectSelection.top - && rect.right > rectSelection.left - && rect.top < rectSelection.bottom - && rect.left < rectSelection.right) { + if (rect.bottom > rectSelection.top && rect.right > rectSelection.left && rect.top < rectSelection.bottom && rect.left < rectSelection.right) { div.classList.add("active") } else { div.classList.remove("active") @@ -255,14 +238,12 @@ QuizDragAndDrop.prototype = { 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") + w = $(zone).find(".slot").innerWidth(), h = $(zone).find(".slot").innerHeight(), el = $(zone).find(".slot") return {"x": x, "y": y, "w": w, "h": h, "el": el} }, - retreiveAnswer: function () { + initQuestion: function () { // const htmlList = this.quiz.draganddrop.listHtml const htmlZone1 = this.quiz.draganddrop.htmlZone1 diff --git a/js/quiz.question.js b/js/quiz.question.js index fc21bf6..97c7c0d 100644 --- a/js/quiz.question.js +++ b/js/quiz.question.js @@ -44,10 +44,6 @@ QuizQuestion.prototype = { getFormData: function (responses) { // }, - - isDragAndDrop: function() { - return $(".active-screen").find(".question-draganddrop").length - } } export default QuizQuestion; diff --git a/js/quiz.screens.js b/js/quiz.screens.js index 8d1d571..d5372a1 100644 --- a/js/quiz.screens.js +++ b/js/quiz.screens.js @@ -22,7 +22,7 @@ QuizScreens.prototype = { const $this = this; // Réinitialiser les réponses $(document).on("click", ".btn.reset", function () { - $this.resetForm(false); + $this.resetForm(); }); // Préparer les réponses du joueur dans l'objet this.responses @@ -35,8 +35,7 @@ QuizScreens.prototype = { $(document).on("click", ".next .action", function () { console.log("countdown_enable", parseInt($this.quiz.question.current().countdown_enable)) console.log("intervalCountDown", $this.intervalCountDown) - if (($this.currentQuestionAnswers.length === 0 && !parseInt($this.quiz.question.current().countdown_enable)) - || (parseInt($this.quiz.question.current().countdown_enable) && $this.intervalCountDown !== 0 && $this.currentQuestionAnswers.length === 0)) { + if (($this.currentQuestionAnswers.length === 0 && !parseInt($this.quiz.question.current().countdown_enable)) || (parseInt($this.quiz.question.current().countdown_enable) && $this.intervalCountDown !== 0 && $this.currentQuestionAnswers.length === 0)) { alert('Please select at least one answer'); return false; } @@ -58,8 +57,7 @@ QuizScreens.prototype = { $this.nextQuestion(); } }); - }, - instantReview: function (review) { + }, instantReview: function (review) { this.quiz.progressbar.update(); this.quiz.animations.instantReviewAnimation(review.ok === 'ok' ? 'OK' : 'NOK'); @@ -131,17 +129,20 @@ QuizScreens.prototype = { } $this.activeScreen = screenToShow; + if ($this.getActiveScreenType() === 'draganddrop') { + $this.quiz.draganddrop.start() + } + // $this.animateContent(screenToShow); + + // Reset form to prevent browser letting a option selected after a refresh $this.resetForm(); $this.currentQuestionAnswers = []; $this.quiz.progressbar.update(); - if($this.quiz.question.isDragAndDrop()) { - $this.quiz.draganddrop.start() - } if (screen === 'outro') { $this.outro.show(); @@ -150,32 +151,27 @@ QuizScreens.prototype = { }); }, - animateContent: function(screenToShow) { + animateContent: function (screenToShow) { const $this = this $this.timeline = gsap.timeline(); - if(screenToShow.find(".header-question").length > 0) { + if (screenToShow.find(".header-question").length > 0) { // $this.timeline.to(screenToShow, { autoAlpha: 1 }).to(".active-screen .header-question *", { - opacity: 1, - duration: .5 + opacity: 1, duration: .5 }) // - if($this.quiz.question.isDragAndDrop()) { + if ($this.getActiveScreenType() === 'draganddrop') { $this.quiz.animations.animateDragAndDropCarrousel($this.timeline) - }else { + } 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 () { + 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)) { @@ -184,24 +180,29 @@ QuizScreens.prototype = { } } }, 1.4) - }else { + } else { gsap.to(screenToShow, { autoAlpha: 1 }) } }, + toggleScreen: function (opacity, pointer) { + gsap.to(".active-screen .screen", { + opacity: opacity, pointerEvents: pointer + }) + }, + getCurrentForm: function () { return this.getActiveScreen().find('form'); }, resetForm: function (only = true) { - this.getCurrentForm().find("input").prop("checked", false) - if(!only) { - if(this.quiz.question.isDragAndDrop()) { - this.quiz.draganddrop.toggleScreen(1,"initial") - this.quiz.draganddrop.retreiveAnswer() - } + let type = this.getActiveScreenType(); + if (type === 'multiple') { + this.getCurrentForm().find("input").prop("checked", false) + } else if (type === 'draganddrop') { + this.quiz.draganddrop.reset(); } }, @@ -209,6 +210,10 @@ QuizScreens.prototype = { return this.activeScreen; }, + getActiveScreenType: function () { + return this.getActiveScreen().attr('data-type'); + }, + /** * Si un écran est affiché, on le masque puis on exécute le callback. Sinon, on exécute immédiatement le callback * @param callback @@ -236,9 +241,9 @@ QuizScreens.prototype = { } }, - countdown: function() { + countdown: function () { const $this = this; - const time = this.quiz.question.current().countdown_time*1000 + const time = this.quiz.question.current().countdown_time * 1000 let value = 100 clearTimeout($this.runningManTimeout) @@ -251,7 +256,7 @@ QuizScreens.prototype = { this.intervalCountDown = setInterval(function () { value -= (10 / time) * 100 document.documentElement.style.setProperty("--width-bg-countdown", value + "%") - if(value <= 0) { + if (value <= 0) { clearInterval($this.intervalCountDown) $this.intervalCountDown = 0; $this.currentQuestionAnswers = [] @@ -272,7 +277,7 @@ QuizScreens.prototype = { }, 10) }, - resetCountdownBackground: function() { + resetCountdownBackground: function () { document.documentElement.style.setProperty("--width-bg-countdown", "100%") }, }; diff --git a/views/screens/intro.blade.php b/views/screens/intro.blade.php index dd06ab4..383037a 100644 --- a/views/screens/intro.blade.php +++ b/views/screens/intro.blade.php @@ -1,7 +1,7 @@ @php $absPath = \App\Models\Quiz::find($data->id)->getPreviewURL(); @endphp -
+
@include('header_title', ['data', $data])

{{$data->intro_title?:$__('Welcome')}}

diff --git a/views/screens/outro.blade.php b/views/screens/outro.blade.php index 7166436..b0ca24d 100644 --- a/views/screens/outro.blade.php +++ b/views/screens/outro.blade.php @@ -1,4 +1,4 @@ -
+
@include('header_title', ['data', $data])
@@ -8,10 +8,23 @@ 0 / 8 - + @@ -59,7 +72,8 @@
-

{{$__('Answers review')}}

+

{{$__('Answers review')}}

{{$__('Review your answers before you go')}}

    @verbatim diff --git a/views/screens/question_draganddrop.blade.php b/views/screens/question_draganddrop.blade.php index 8803739..2dfa621 100644 --- a/views/screens/question_draganddrop.blade.php +++ b/views/screens/question_draganddrop.blade.php @@ -1,4 +1,4 @@ -
    +
    @include('screens.question_draganddrop_area',['area'=>1,'question'=>$question,'theme'=>$theme]) @include('header_question', ['question' => $question, 'data' => $data, 'max' => $max, 'position' => $position])
    diff --git a/views/screens/question_match.blade.php b/views/screens/question_match.blade.php index 781aa09..049d36c 100644 --- a/views/screens/question_match.blade.php +++ b/views/screens/question_match.blade.php @@ -4,7 +4,7 @@ $propositions = [...$additional_prop,...$propositions]; @endphp -
    +
    @include('header_question', ['data' => $data, 'max' => $max, 'position' => $position])
    diff --git a/views/screens/question_multiple.blade.php b/views/screens/question_multiple.blade.php index fe38b09..fbdcd6d 100644 --- a/views/screens/question_multiple.blade.php +++ b/views/screens/question_multiple.blade.php @@ -1,4 +1,4 @@ -
    +
    @include('header_question', ['question' =>$question, 'max' => $max, 'position' => $position])
    -- 2.39.5