wip #6182 @7:00 question match

diff --git a/js/quiz.match.js b/js/quiz.match.js
index bd1327a7e2a74956233c7985bf63e7f585925ce5..dc63906cda3440b26eab81ca78c63ada4d9613f4 100644 (file)
--- 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 513e927c7d38feaa69a5930538e6913f47035de3..b3a7374da2f50f6302c9edc52acb2874158cf102 100644 (file)
--- 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 d2b5a6ccbdb60c657f7e5c0e045e3478b5b5a800..155b7a0e5a4a68ae58bb15dc8d4b3379b18f0e36 100644 (file)
--- 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 e02d7f1bd223f35c930e54e691974410b4a1eed2..b416d074e90bd65b141ab08d87bcf7e066daed92 100644 (file)
--- a/views/footer.blade.php
+++ b/views/footer.blade.php
@@ -5,9 +5,15 @@
             <span class="access">R</span>
         </a>
     @endisset
-    <a class="btn primary action validate {{ array_key_exists("countdown_enable",$question) ? ($question['countdown_enable'] ? 'countdown' : '') : ''}}"
+    <a class="btn primary {{ isset($matchMaking) ? "confirmMatch" : "action validate" }} {{ array_key_exists("countdown_enable",$question) ? ($question['countdown_enable'] ? 'countdown' : '') : ''}}"
        aria-keyshortcuts="Space">
-        <span class="text">{{$__('Validate answer')}}</span>
+        <span class="text">
+            @if(isset($matchMaking))
+                {{ $__('Confirm the match') }}
+            @else
+                {{ $__('Validate answer') }}
+            @endif
+        </span>
         <span class="access space">{{$__('space')}}</span>
         <span class="runningman"></span>
 
@@ -15,6 +21,7 @@
             <span data-icon="running-man"></span>
         @endisset
     </a>
+
     @if($data['instantReview'])
         <a class="btn primary action none continue" aria-keyshortcuts="Space">
             <span class="text">{{$__('Continue')}}</span>

diff --git a/views/screens/question_match.blade.php b/views/screens/question_match.blade.php
index 049d36c8d6b6edaa8d132dabeb83ce3213f042c1..34bf620c152406f1d33a060f8d5fdab6d796cdad 100644 (file)
--- a/views/screens/question_match.blade.php
+++ b/views/screens/question_match.blade.php
@@ -34,5 +34,5 @@
             <div class="swiper-pagination-bottom"></div>
         </div>
     </div>
-    @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])
 </div>