From f3536b58263b80aa9fa627b7e1f869f391ec275a Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Mon, 25 Sep 2023 16:04:53 +0200
Subject: [PATCH] wip #6182 @2:00 question match

---
 js/quiz.match.js                       | 48 +++++++++++++++++++-------
 js/quiz.screens.js                     |  4 +++
 style/107-question-match.sass          |  3 +-
 views/screens/question_match.blade.php |  1 +
 4 files changed, 43 insertions(+), 13 deletions(-)

diff --git a/js/quiz.match.js b/js/quiz.match.js
index 5509bca..93b8679 100644
--- a/js/quiz.match.js
+++ b/js/quiz.match.js
@@ -1,20 +1,17 @@
 import gsap from "gsap";
 import Swiper from 'swiper';
-import { Navigation, Pagination } from 'swiper/modules';
+import { Navigation, Pagination, Manipulation } from 'swiper/modules';
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
 
 function QuizMatch(quiz) {
     this.quiz = quiz;
-    this.start()
+    this.init()
 }
 
 QuizMatch.prototype = {
-    start: function() {
+    init: function() {
         const $this = this
-        this.rules = [{top: "10", opacity: ".48"},{top: "39", opacity: ".24"}]
-        this.quiz.screens.currentQuestionAnswers = [];
-
         $(document).on("click", ".move-slide", function () {
             let move = $(this).attr("aria-keyshortcuts")
 
@@ -28,6 +25,17 @@ QuizMatch.prototype = {
         $(document).on("click", ".confirmMatch", function() {
             $this.confirmTheMatch()
         })
+    },
+
+    start: function() {
+        const $this = this
+        this.swiperBottom = false
+        this.rules = [{top: "10", opacity: ".48"},{top: "39", opacity: ".24"}]
+        this.quiz.screens.currentQuestionAnswers = [];
+        this.swiperBottomEl = this.quiz.screens.getActiveScreen().find(".bottom-slider")
+        this.sliderBottomHtml = this.swiperBottomEl.html()
+
+        console.log("screen",)
 
         this.swiperTop = new Swiper('.swiper-container.top-slider', {
             modules: [Navigation, Pagination],
@@ -43,13 +51,20 @@ QuizMatch.prototype = {
             },
         })
 
+        this.initSwiperBottom()
+
+    },
+
+    initSwiperBottom: function() {
+        const $this = this
+        if(this.swiperBottom)
+            this.swiperBottom.destroy()
+
         this.swiperBottom = new Swiper('.swiper-container.bottom-slider', {
-            modules: [Navigation, Pagination],
+            modules: [Navigation, Pagination, Manipulation],
             slidesPerView: "auto",
             //loop: true,
-            watchSlidesProgress: true,
             centeredSlides: true,
-            freeMode: true,
             spaceBetween: 20,
             pagination: {
                 el: '.swiper-pagination-bottom',
@@ -64,7 +79,6 @@ QuizMatch.prototype = {
                 }
             }
         })
-
     },
 
     setRotation: function(swiper) {
@@ -97,8 +111,10 @@ QuizMatch.prototype = {
 
     confirmTheMatch: function() {
         let lastIndex = this.swiperTop.slides.length - 1
-        let answer = this.swiperBottom.activeIndex
-        this.quiz.screens.currentQuestionAnswers.push(answer)
+        let index = this.swiperBottom.activeIndex
+        this.quiz.screens.currentQuestionAnswers.push(index)
+        this.swiperBottom.removeSlide(index)
+        this.swiperBottom.update()
 
         if(this.swiperTop.activeIndex === lastIndex) {
             this.switchMatchValidateButton()
@@ -113,6 +129,14 @@ QuizMatch.prototype = {
             text = this.quiz.l10n.__('Validate answer');
 
         btn.removeClass("confirmMatch").addClass("action validate").find('.text').text(text)
+    },
+
+    reset: function () {
+        this.quiz.screens.currentQuestionAnswers = []
+        this.swiperTop.slideTo(0)
+        this.swiperBottomEl.html(this.sliderBottomHtml)
+        this.initSwiperBottom()
+        this.quiz.screens.toggleScreen(1, 'all');
     }
 }
 
diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index b3a7374..9050652 100644
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -133,6 +133,8 @@ QuizScreens.prototype = {
 
             if ($this.getActiveScreenType() === 'draganddrop') {
                 $this.quiz.draganddrop.start()
+            } else if($this.getActiveScreenType() === 'match') {
+                $this.quiz.match.start()
             }
 
             //
@@ -204,6 +206,8 @@ QuizScreens.prototype = {
             this.getCurrentForm().find("input").prop("checked", false)
         } else if (type === 'draganddrop') {
             this.quiz.draganddrop.reset();
+        } else if(type === 'match') {
+            this.quiz.match.reset();
         }
     },
 
diff --git a/style/107-question-match.sass b/style/107-question-match.sass
index d1415e3..be84b8a 100644
--- a/style/107-question-match.sass
+++ b/style/107-question-match.sass
@@ -9,6 +9,7 @@
     .top-slider
         max-width: 596px
         overflow: hidden
+        pointer-events: none
         .swiper-slide
             min-height: 137px
             padding: 38px 24px 18px
@@ -23,6 +24,7 @@
             +radius(16px)
             padding: 15px
             transition: all .3s
+            border: 2px solid transparent
             &-active
                 background-color: $neutral-color
                 border: 2px solid $texts-color
@@ -37,7 +39,6 @@
                 +opacity(.24,background-color,$neutral-color)
 
 
-
     .swiper-pagination-top
         text-align: center
         position: relative
diff --git a/views/screens/question_match.blade.php b/views/screens/question_match.blade.php
index 09455aa..8e7a180 100644
--- a/views/screens/question_match.blade.php
+++ b/views/screens/question_match.blade.php
@@ -2,6 +2,7 @@
     $propositions = array_map(function($n) { return $n['proposition']; }, $question['answers']);
     $additional_prop = array_map(function($n) { return $n['content']; }, $question['additional_proposition']);
     $propositions = [...$additional_prop,...$propositions];
+    shuffle($propositions);
 @endphp
 
 <div class="container-screen none question-match" data-type="match" data-screen="q-{{$position}}">
-- 
2.39.5