wip #6182 @4:20 question drag and drop + question match

diff --git a/js/quiz.js b/js/quiz.js
index ceadc3ec19a0c82bce97291934a415d17cc01e0d..d36ae0d5c2a1709782401849adc54de679411b8b 100644 (file)
--- a/js/quiz.js
+++ b/js/quiz.js
@@ -1,5 +1,5 @@
 import $ from "cash-dom";
-import gsap from "gsap";
+import 'swiper/css';
 import {CubeSCORM} from '/application/resources/scorm/scorm';
 
 import QuizResize from "./quiz.resize";
@@ -13,6 +13,7 @@ import QuizScreens from './quiz.screens';
 import QuizProgressbar from "./quiz.progressbar";
 import QuizL10n from "./quiz.l10n";
 import QuizDraganddrop from "./quiz.draganddrop";
+import QuizMatch from "./quiz.match";
 
 window.cubeSCORM = new CubeSCORM();
 window.$ = window.jQuery = $;
@@ -45,6 +46,7 @@ Quiz.prototype = {
         this.progressbar = new QuizProgressbar(this);
         this.l10n = new QuizL10n(this);
         this.draganddrop = new QuizDraganddrop(this);
+        this.match = new QuizMatch(this);
 
         console.log(this.data);
         // ICI tout commence vraiment

diff --git a/js/quiz.match.js b/js/quiz.match.js
new file mode 100644 (file)
index 0000000..52787da
--- /dev/null
+++ b/js/quiz.match.js
@@ -0,0 +1,42 @@
+import gsap from "gsap";
+import Swiper from 'swiper';
+
+function QuizMatch(quiz) {
+    this.quiz = quiz;
+    this.start()
+}
+
+QuizMatch.prototype = {
+    start: function() {
+        const swiperTop = new Swiper('.swiper-container.top-slider', {
+            slidesPerView: 1,
+            loop: true,
+            effect: 'fade',
+        })
+        const swiperBottom = new Swiper('.swiper-container.bottom-slider', {
+            slidesPerView: "auto",
+            loop: true,
+            centeredSlides: true,
+            freeMode: true,
+            pagination: {
+                el: '.swiper-pagination',
+                type: 'bullets',
+            },
+        })
+        swiperBottom.on('slideChange', function () {
+
+        });
+        this.applyRotationToSiblings()
+    },
+
+    applyRotationToSiblings: function() {
+        let prevEls = $(".swiper-container.bottom-slider .swiper-slide.swiper-slide-active").prevAll();
+        let rotate = 0;
+        prevEls.each(function (){
+            rotate -= 20
+            $(this).css("transform","rotate("+rotate+"deg)")
+        })
+    }
+}
+
+export default QuizMatch;

diff --git a/style/107-question-match.sass b/style/107-question-match.sass
new file mode 100644 (file)
index 0000000..2ac647b
--- /dev/null
+++ b/style/107-question-match.sass
@@ -0,0 +1,20 @@
+.question-match
+    .top-slider
+        max-width: 596px
+        margin: 0 auto 33px
+        overflow: hidden
+        .swiper-slide
+            padding: 38px 24px 18px
+            +radius(16px)
+            border: 1px solid rgb($texts-color,.24)
+            text-align: center
+
+    .bottom-slider
+        .swiper-slide
+            width: 252px !important
+            height: 158px
+            +radius(16px)
+            padding: 15px
+            &.swiper-slide-active
+                background-color: $neutral-color
+                border: 2px solid $texts-color

diff --git a/style/style.sass b/style/style.sass
index cd6f311a09c65dadcfd33409dd58bbebc2c046e1..5df847d1b6853223edb3f4fabd6fe3fbe9b87f53 100644 (file)
--- a/style/style.sass
+++ b/style/style.sass
@@ -11,3 +11,4 @@
 @import 104-animations
 @import 105-outro
 @import 106-question-draganddrop
+@import 107-question-match

diff --git a/views/footer.blade.php b/views/footer.blade.php
index f0b1106fe9df144e68a7432e6561e04af8de70ae..e02d7f1bd223f35c930e54e691974410b4a1eed2 100644 (file)
--- a/views/footer.blade.php
+++ b/views/footer.blade.php
@@ -5,7 +5,7 @@
             <span class="access">R</span>
         </a>
     @endisset
-    <a class="btn primary action validate {{$question['countdown_enable'] ? 'countdown' : ''}}"
+    <a class="btn primary action validate {{ array_key_exists("countdown_enable",$question) ? ($question['countdown_enable'] ? 'countdown' : '') : ''}}"
        aria-keyshortcuts="Space">
         <span class="text">{{$__('Validate answer')}}</span>
         <span class="access space">{{$__('space')}}</span>

diff --git a/views/index.blade.php b/views/index.blade.php
index a25a03ddc851fc48b2cf973fdb18792e9d1247ab..1b9b80882d889bd67a34d78c8205bfe815c18158 100644 (file)
--- a/views/index.blade.php
+++ b/views/index.blade.php
@@ -21,7 +21,7 @@
             @include('screens.intro', ['data'=> $data])
         @endif
         @foreach($data->questions as $key => $question)
-            @include('screens.question_'.$question['type'], ['theme' => $data->theme,'data'=>$data, 'question'=> $question, 'max' => $totalQuestion, 'position' => $key, 'alphabet' => $alphabet])
+            @include('screens.question_'.$question['type'], ['theme' => $data->theme,'data'=> $data, 'question' => $question, 'max' => $totalQuestion, 'position' => $key, 'alphabet' => $alphabet])
         @endforeach
         @include('screens.outro', ['data'=> $data])
         <div id="instantReviewAnimation"></div>

diff --git a/views/screens/question_draganddrop.blade.php b/views/screens/question_draganddrop.blade.php
index f54adf8245d90130a3bfa34d7715efd839a41224..ab41662b263d1ea5f37654aababf0290a5319a9f 100644 (file)
--- a/views/screens/question_draganddrop.blade.php
+++ b/views/screens/question_draganddrop.blade.php
@@ -51,5 +51,5 @@
             </form>
         </div>
     </div>
-    @include('footer', ['data' => $data, 'reset' => true, 'text' => $__('Validate answer'), 'info' => true])
+    @include('footer', ['question' => $question,'data' => $data, 'reset' => true, 'text' => $__('Validate answer'), 'info' => true])
 </div>

diff --git a/views/screens/question_match.blade.php b/views/screens/question_match.blade.php
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..cf3ccfd70616357cc4d00b5176b3dfdbe889d6db 100644 (file)
--- a/views/screens/question_match.blade.php
+++ b/views/screens/question_match.blade.php
@@ -0,0 +1,45 @@
+@php
+    $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];
+@endphp
+
+<div class="container-screen none question-match" data-screen="q-{{$position}}">
+    @include('header_question', ['data' => $data, 'max' => $max, 'position' => $position])
+    <div class="screen">
+
+        <div class="swiper-container top-slider">
+            <div class="controls left">
+                <p>{{$__('Move left')}}</p>
+                <button class="access move-card" 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>
+            <div class="controls right">
+                <p>{{$__('Move right')}}</p>
+                <button class="access move-card" aria-keyshortcuts="ARROWRIGHT">
+                    <span data-icon="arrow"></span>
+                </button>
+            </div>
+        </div>
+
+        <div class="swiper-container bottom-slider">
+            <div class="swiper-wrapper">
+                @foreach($propositions as $prop)
+                    <div class="swiper-slide">
+                        {{ $prop }}
+                    </div>
+                @endforeach
+            </div>
+            <div class=".swiper-pagination"></div>
+        </div>
+    </div>
+    @include('footer', ['question' => $question, 'data' => $data, 'reset' => true, 'text' => $__('Validate answer'), 'info' => true])
+</div>