From: soufiane <soufiane@cubedesigners.com>
Date: Mon, 25 Sep 2023 09:28:15 +0000 (+0200)
Subject: wip #6182 @0:10 question match
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=e5af0d7c9daa1792039cc32dbc7d87ae19b0ae16;p=fluidbook-toolbox-quiz.git

wip #6182 @0:10 question match
---

diff --git a/js/quiz.match.js b/js/quiz.match.js
index 265a93f..5509bca 100644
--- a/js/quiz.match.js
+++ b/js/quiz.match.js
@@ -12,9 +12,7 @@ function QuizMatch(quiz) {
 QuizMatch.prototype = {
     start: function() {
         const $this = this
-        let posInit = 0
-        this.positionsX = [{top: "10", opacity: ".48"},{top: "39", opacity: ".24"}]
-        this.counter = 0
+        this.rules = [{top: "10", opacity: ".48"},{top: "39", opacity: ".24"}]
         this.quiz.screens.currentQuestionAnswers = [];
 
         $(document).on("click", ".move-slide", function () {
@@ -61,7 +59,7 @@ QuizMatch.prototype = {
                 slideChange: function(swiper) {
                     $this.setRotation(swiper)
                 },
-                progress: function(swiper, progress) {
+                progress: function(swiper) {
                     $this.setRotation(swiper)
                 }
             }
@@ -70,46 +68,29 @@ QuizMatch.prototype = {
     },
 
     setRotation: function(swiper) {
-        const $this = this
-        const slides = swiper.slides
         let activeIndex = swiper.activeIndex
         let nextAllArray = swiper.slides.slice(activeIndex+1)
-        let prevAllArray = swiper.slides.slice(0,activeIndex)
-
-
-        console.log(nextAllArray)
-        //console.log(prevAllArray)
-        let angle = 4
-
-        if(swiper.swipeDirection === "next") {
-            angle -= 4
-        }
+        let prevAllArray = swiper.slides.slice(0,activeIndex).reverse()
 
-        if(prevAllArray.length > 0) {
-            let angle = -4
-            prevAllArray.reverse().forEach(function(el,index) {
-
-                $(el).css({
-                    'transform':'rotate('+(angle)+'deg)',
-                    'top': $this.positionsX[index] ? $this.positionsX[index].top+'px' : 0,
-                    'opacity': $this.positionsX[index] ? $this.positionsX[index].opacity : 0
-                })
-                angle -= 4
-
-            })
-        }
-
-        if(nextAllArray.length > 0) {
-            let angle = 4
-            nextAllArray.forEach(function(el,index) {
+        this.setStyleCard(prevAllArray,"prev")
+        this.setStyleCard(nextAllArray,"next")
+    },
 
+    setStyleCard: function(array,direction) {
+        const $this = this
+        let angle = direction === "next" ? 4 : -4
+        if(array.length > 0) {
+            array.forEach(function(el,index) {
                 $(el).css({
                     'transform':'rotate('+(angle)+'deg)',
-                    'top': $this.positionsX[index] ? $this.positionsX[index].top+'px' : 0,
-                    'opacity': $this.positionsX[index] ? $this.positionsX[index].opacity : 0
+                    'top': $this.rules[index] ? $this.rules[index].top+'px' : 0,
+                    'opacity': $this.rules[index] ? $this.rules[index].opacity : 0
                 })
-                angle += 4
-
+                if(direction === "next") {
+                    angle += 4
+                } else {
+                    angle -= 4
+                }
             })
         }
     },