From 967f89fe1d412e4c7b6afaa73afea095033c90f1 Mon Sep 17 00:00:00 2001 From: soufiane Date: Mon, 18 Sep 2023 18:10:42 +0200 Subject: [PATCH] wip #6182 @4:20 question drag and drop + question match --- js/quiz.js | 4 +- js/quiz.match.js | 42 ++++++++++++++++++ style/107-question-match.sass | 20 +++++++++ style/style.sass | 1 + views/footer.blade.php | 2 +- views/index.blade.php | 2 +- views/screens/question_draganddrop.blade.php | 2 +- views/screens/question_match.blade.php | 45 ++++++++++++++++++++ 8 files changed, 114 insertions(+), 4 deletions(-) create mode 100644 js/quiz.match.js create mode 100644 style/107-question-match.sass diff --git a/js/quiz.js b/js/quiz.js index ceadc3e..d36ae0d 100644 --- 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 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 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 cd6f311..5df847d 100644 --- 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 f0b1106..e02d7f1 100644 --- a/views/footer.blade.php +++ b/views/footer.blade.php @@ -5,7 +5,7 @@ R @endisset - {{$__('Validate answer')}} {{$__('space')}} diff --git a/views/index.blade.php b/views/index.blade.php index a25a03d..1b9b808 100644 --- 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])
diff --git a/views/screens/question_draganddrop.blade.php b/views/screens/question_draganddrop.blade.php index f54adf8..ab41662 100644 --- a/views/screens/question_draganddrop.blade.php +++ b/views/screens/question_draganddrop.blade.php @@ -51,5 +51,5 @@ - @include('footer', ['data' => $data, 'reset' => true, 'text' => $__('Validate answer'), 'info' => true]) + @include('footer', ['question' => $question,'data' => $data, 'reset' => true, 'text' => $__('Validate answer'), 'info' => true]) diff --git a/views/screens/question_match.blade.php b/views/screens/question_match.blade.php index e69de29..cf3ccfd 100644 --- 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 + +
+ @include('header_question', ['data' => $data, 'max' => $max, 'position' => $position]) +
+ +
+
+

{{$__('Move left')}}

+ +
+
+ @foreach($question['answers'] as $question) +
+ {{ $question['answer'] }} +
+ @endforeach +
+
+

{{$__('Move right')}}

+ +
+
+ +
+
+ @foreach($propositions as $prop) +
+ {{ $prop }} +
+ @endforeach +
+
+
+
+ @include('footer', ['question' => $question, 'data' => $data, 'reset' => true, 'text' => $__('Validate answer'), 'info' => true]) +
-- 2.39.5