From: soufiane <soufiane@cubedesigners.com>
Date: Tue, 19 Sep 2023 13:09:20 +0000 (+0200)
Subject: wip #6182 @4:00 question match
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=8cc3198ab214e3bf130b97b99287b995e3c8ce40;p=fluidbook-toolbox-quiz.git

wip #6182 @4:00 question match
---

diff --git a/js/quiz.match.js b/js/quiz.match.js
index 52787da..a203d8c 100644
--- a/js/quiz.match.js
+++ b/js/quiz.match.js
@@ -1,5 +1,8 @@
 import gsap from "gsap";
 import Swiper from 'swiper';
+import { Navigation, Pagination } from 'swiper/modules';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
 
 function QuizMatch(quiz) {
     this.quiz = quiz;
@@ -8,25 +11,44 @@ function QuizMatch(quiz) {
 
 QuizMatch.prototype = {
     start: function() {
+        const $this = this
+
+        $(document).on("click", ".move-slide", function () {
+            let move = $(this).attr("aria-keyshortcuts")
+
+            if(move === "ARROWLEFT") {
+                swiperTop.slidePrev()
+            }else {
+                swiperTop.slideNext()
+            }
+        })
+
         const swiperTop = new Swiper('.swiper-container.top-slider', {
+            modules: [Navigation, Pagination],
             slidesPerView: 1,
             loop: true,
             effect: 'fade',
+            pagination: {
+                el: '.swiper-pagination-top',
+                type: 'fraction',
+            },
         })
+
         const swiperBottom = new Swiper('.swiper-container.bottom-slider', {
+            modules: [Navigation, Pagination],
             slidesPerView: "auto",
-            loop: true,
+            //loop: true,
             centeredSlides: true,
             freeMode: true,
+            spaceBetween: 20,
             pagination: {
-                el: '.swiper-pagination',
+                el: '.swiper-pagination-bottom',
                 type: 'bullets',
             },
         })
         swiperBottom.on('slideChange', function () {
-
+            //$this.applyRotationToSiblings()
         });
-        this.applyRotationToSiblings()
     },
 
     applyRotationToSiblings: function() {
diff --git a/style/100-global.sass b/style/100-global.sass
index 65d76d1..c8df531 100644
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -141,3 +141,28 @@ body
 
     .access:not(.missed):not(.ok):not(.nok)
         display: none
+
+
+.controls
+    width: 124px
+    padding: 12px 0
+    +font-size(20)
+    +opacity(.16,background-color,$texts-color)
+    border-radius: 16px
+    text-align: center
+    &.left .access
+        transform: rotate(-90deg)
+    &.right .access
+        transform: rotate(90deg)
+    p
+        margin-bottom: 5px
+    .access
+        margin: 0 auto
+        span
+            display: flex
+    svg
+        color: $texts-color
+
+.m
+    .controls
+        display: none
diff --git a/style/106-question-draganddrop.sass b/style/106-question-draganddrop.sass
index f868220..60681e1 100644
--- a/style/106-question-draganddrop.sass
+++ b/style/106-question-draganddrop.sass
@@ -137,26 +137,6 @@
             border: 1px dashed rgba($texts-color,.24)
             z-index: 3
 
-    .controls
-        width: 124px
-        padding: 12px 0
-        +font-size(20)
-        +opacity(.16,background-color,$texts-color)
-        border-radius: 16px
-        text-align: center
-        &.left .access
-            transform: rotate(-90deg)
-        &.right .access
-            transform: rotate(90deg)
-        p
-            margin-bottom: 5px
-        .access
-            margin: 0 auto
-            span
-                display: flex
-        svg
-            color: $texts-color
-
 .m
     .container-screen.question-draganddrop
         .controls
diff --git a/style/107-question-match.sass b/style/107-question-match.sass
index 2ac647b..aadd983 100644
--- a/style/107-question-match.sass
+++ b/style/107-question-match.sass
@@ -1,9 +1,16 @@
 .question-match
+
+    .top-slider-container
+        margin: 75px 0 40px
+        +flex-config(center, '','', flex-end)
+        .controls
+            margin: 0 24px
+
     .top-slider
         max-width: 596px
-        margin: 0 auto 33px
         overflow: hidden
         .swiper-slide
+            min-height: 137px
             padding: 38px 24px 18px
             +radius(16px)
             border: 1px solid rgb($texts-color,.24)
@@ -18,3 +25,18 @@
             &.swiper-slide-active
                 background-color: $neutral-color
                 border: 2px solid $texts-color
+
+    .swiper-pagination-top
+        text-align: center
+        position: relative
+        top: 30px
+
+    .swiper-pagination-bottom
+        text-align: center
+        margin-top: 10px
+        .swiper-pagination-bullet
+            width: 4px
+            height: 4px
+            +opacity(.16,background-color,$texts-color)
+        .swiper-pagination-bullet-active
+            background-color: $texts-color
diff --git a/views/screens/question_match.blade.php b/views/screens/question_match.blade.php
index cf3ccfd..6c18c93 100644
--- a/views/screens/question_match.blade.php
+++ b/views/screens/question_match.blade.php
@@ -8,23 +8,26 @@
     @include('header_question', ['data' => $data, 'max' => $max, 'position' => $position])
     <div class="screen">
 
-        <div class="swiper-container top-slider">
+        <div class="top-slider-container">
             <div class="controls left">
                 <p>{{$__('Move left')}}</p>
-                <button class="access move-card" aria-keyshortcuts="ARROWLEFT">
+                <button class="access move-slide" aria-keyshortcuts="ARROWLEFT">
                     <span data-icon="arrow"></span>
                 </button>
             </div>
-            <div class="swiper-wrapper">
-                @foreach($question['answers'] as $question)
-                    <div class="swiper-slide">
-                        {{ $question['answer'] }}
-                    </div>
-                @endforeach
+            <div class="swiper-container top-slider">
+                <div class="swiper-pagination-top"></div>
+                <div class="swiper-wrapper">
+                    @foreach($question['answers'] as $question)
+                        <div class="swiper-slide">
+                            {{ $question['answer'] }}
+                        </div>
+                    @endforeach
+                </div>
             </div>
             <div class="controls right">
                 <p>{{$__('Move right')}}</p>
-                <button class="access move-card" aria-keyshortcuts="ARROWRIGHT">
+                <button class="access move-slide" aria-keyshortcuts="ARROWRIGHT">
                     <span data-icon="arrow"></span>
                 </button>
             </div>
@@ -38,7 +41,7 @@
                     </div>
                 @endforeach
             </div>
-            <div class=".swiper-pagination"></div>
+            <div class="swiper-pagination-bottom"></div>
         </div>
     </div>
     @include('footer', ['question' => $question, 'data' => $data, 'reset' => true, 'text' => $__('Validate answer'), 'info' => true])