From 9605af9b6c4522b9fb3c10f6292dae8d36e9fc8a Mon Sep 17 00:00:00 2001 From: soufiane Date: Thu, 21 Sep 2023 18:22:45 +0200 Subject: [PATCH] wip #6182 @7:00 question match --- js/quiz.match.js | 76 +++++++++++++++++--------- js/quiz.screens.js | 2 - style/107-question-match.sass | 7 +-- views/footer.blade.php | 11 +++- views/screens/question_match.blade.php | 2 +- 5 files changed, 63 insertions(+), 35 deletions(-) diff --git a/js/quiz.match.js b/js/quiz.match.js index bd1327a..dc63906 100644 --- a/js/quiz.match.js +++ b/js/quiz.match.js @@ -13,18 +13,24 @@ QuizMatch.prototype = { start: function() { const $this = this let posInit = 0 + this.positionsX = [{top: "10"},{top: "39"}] + this.counter = 0 $(document).on("click", ".move-slide", function () { let move = $(this).attr("aria-keyshortcuts") if(move === "ARROWLEFT") { - swiperBottom.slidePrev() + $this.swiperBottom.slidePrev() }else { - swiperBottom.slideNext() + $this.swiperBottom.slideNext() } }) - const swiperTop = new Swiper('.swiper-container.top-slider', { + $(document).on("click", ".confirmMatch", function() { + $this.confirmTheMatch() + }) + + this.swiperTop = new Swiper('.swiper-container.top-slider', { modules: [Navigation, Pagination], slidesPerView: 1, loop: true, @@ -35,10 +41,11 @@ QuizMatch.prototype = { }, }) - const swiperBottom = new Swiper('.swiper-container.bottom-slider', { + this.swiperBottom = new Swiper('.swiper-container.bottom-slider', { modules: [Navigation, Pagination], slidesPerView: "auto", //loop: true, + watchSlidesProgress: true, centeredSlides: true, freeMode: true, spaceBetween: 20, @@ -47,40 +54,59 @@ QuizMatch.prototype = { type: 'bullets', }, on: { - afterInit: function(swiper) { + slideChange: function(swiper) { //$this.setClass() }, - slideChange: function(swiper) { - console.log(swiper) + progress: function(swiper, progress) { + //console.log(swiper,progress,(progress*100)+"%") + const slides = swiper.slides let activeIndex = swiper.activeIndex - let nextAllArray = swiper.slides.slice(activeIndex) + let nextAllArray = swiper.slides.slice(activeIndex+1) let prevAllArray = swiper.slides.slice(0,activeIndex) - if(nextAllArray.length > 0) { - nextAllArray.forEach(function() { + /*if(nextAllArray.length > 0) { + nextAllArray.forEach(function(el,index) { + console.log("progress",el.progress) + let angle = 4 * el.progress + $(el).css({ + 'transform':'rotate('+(angle)+'deg)', + 'top': $this.positionsX[index] ? $this.positionsX[index].top+'px' : 0, + }) }) - } - - /*$(".bottom-slider .swiper-slide").removeClass("prevSibling nextSibling") - if($(".swiper-slide-prev").length > 0) { - const firstPrev = $(".swiper-slide-prev") - firstPrev.prevAll().addClass("prevSibling") - } - if($(".swiper-slide-next").length > 0) { - const firstNext = $(".swiper-slide-next").next() - firstNext.nextAll().addClass("nextSibling") }*/ + } } }) - swiperBottom.on('sliderMove', function (swiper,ev) { - const direction = swiper.swipeDirection - let currentSlide = $(swiper.slides[swiper.activeIndex]) - //$this.applyRotationToSiblings() - }); + }, + + /*setRotation: function(swiper) { + let activeIndex = swiper.activeIndex + let nextAllArray = swiper.slides.slice(activeIndex+1) + let angle = 4 + if(nextAllArray.length > 0) { + nextAllArray.forEach(function(el,index) { + $(el).css({ + 'transform':'rotate('+(angle)+'deg)', + 'top': $this.positionsX[index] ? $this.positionsX[index].top+'px' : 0, + }) + angle += 4 + }) + } + },*/ + + confirmTheMatch: function() { + let lastIndex = this.swiperBottom.slides.length - 1 + if(this.swiperTop.activeIndex === lastIndex) { + let response = "validate" + } else { + let response = this.swiperBottom.activeIndex + this.swiperTop.slideNext() + } + } } export default QuizMatch; diff --git a/js/quiz.screens.js b/js/quiz.screens.js index 513e927..b3a7374 100644 --- a/js/quiz.screens.js +++ b/js/quiz.screens.js @@ -33,8 +33,6 @@ QuizScreens.prototype = { // Cliquer sur le bouton suivant $(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)) { alert('Please select at least one answer'); return false; diff --git a/style/107-question-match.sass b/style/107-question-match.sass index d2b5a6c..155b7a0 100644 --- a/style/107-question-match.sass +++ b/style/107-question-match.sass @@ -26,14 +26,11 @@ &-active background-color: $neutral-color border: 2px solid $texts-color - &-prev - transform: rotate(-5deg) - &-next - transform: rotate(5deg) + transform: rotate(0) !important + top: 0 !important &-prev, &-next +opacity(.24,background-color,$neutral-color) - top: 13px &:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) +opacity(.24,background-color,$neutral-color) diff --git a/views/footer.blade.php b/views/footer.blade.php index e02d7f1..b416d07 100644 --- a/views/footer.blade.php +++ b/views/footer.blade.php @@ -5,9 +5,15 @@ R @endisset - - {{$__('Validate answer')}} + + @if(isset($matchMaking)) + {{ $__('Confirm the match') }} + @else + {{ $__('Validate answer') }} + @endif + {{$__('space')}} @@ -15,6 +21,7 @@ @endisset + @if($data['instantReview']) {{$__('Continue')}} diff --git a/views/screens/question_match.blade.php b/views/screens/question_match.blade.php index 049d36c..34bf620 100644 --- a/views/screens/question_match.blade.php +++ b/views/screens/question_match.blade.php @@ -34,5 +34,5 @@
- @include('footer', ['question' => $question, 'data' => $data, 'reset' => true, 'text' => $__('Validate answer'), 'info' => true]) + @include('footer', ['question' => $question, 'data' => $data, 'reset' => true, 'text' => $__('Validate answer'), 'info' => true, 'matchMaking' => true]) -- 2.39.5