From 3ae5bf0f391dc17999889a0604bd9f6e6f2d0b4a Mon Sep 17 00:00:00 2001 From: soufiane Date: Wed, 11 Oct 2023 11:51:44 +0200 Subject: [PATCH] wait #6384 @2:30 --- js/quiz.animations.js | 2 +- js/quiz.screens.js | 13 +++++ style/109-modal-more-info.sass | 51 ++++++++++++++++++++ style/style.sass | 1 + views/components/modal_more_info.blade.php | 7 +++ views/footer.blade.php | 20 +++++--- views/index.blade.php | 4 +- views/screens/question_country.blade.php | 2 +- views/screens/question_draganddrop.blade.php | 2 +- views/screens/question_email.blade.php | 2 +- views/screens/question_match.blade.php | 2 +- views/screens/question_multiple.blade.php | 2 +- views/screens/question_text.blade.php | 2 +- views/screens/question_textarea.blade.php | 2 +- 14 files changed, 96 insertions(+), 16 deletions(-) create mode 100644 style/109-modal-more-info.sass create mode 100644 views/components/modal_more_info.blade.php diff --git a/js/quiz.animations.js b/js/quiz.animations.js index d9a22a2..d4aa93c 100644 --- a/js/quiz.animations.js +++ b/js/quiz.animations.js @@ -89,7 +89,7 @@ QuizAnimations.prototype = { }).to(".active-screen .footer-question", { y: "100%", duration: 0, onComplete: function () { $(activeScreen).find('.btn.confirmMatch')?.remove() - $(activeScreen).find('.btn.continue').removeClass('none') + $(activeScreen).find('.btn.continue, .btn.moreinfo').removeClass('none') $(activeScreen).find('.btn.validate').addClass('none') // Hide reset button $this.quiz.animations.fadeOut($(activeScreen).find('.btn.reset'), true, false); diff --git a/js/quiz.screens.js b/js/quiz.screens.js index f90791b..b0b285c 100644 --- a/js/quiz.screens.js +++ b/js/quiz.screens.js @@ -30,6 +30,11 @@ QuizScreens.prototype = { $this.resetForm(); }); + // + $(document).on("click", ".btn.moreinfo, .close-explaination", function () { + $this.showExplaination(); + }); + // Préparer les réponses du joueur dans l'objet this.responses // à chaque fois que le formulaire change de valeur $(document).on("change", ".active-screen form:not(.disabled)", function (e) { @@ -138,6 +143,7 @@ QuizScreens.prototype = { showScreen: function (screen, callback) { const $this = this; let screenToShow = $('[data-screen="' + screen + '"]'); + this.hideCurrentScreen(function () { $this.resetCountdownBackground(); screenToShow.removeClass("none").addClass("next active-screen"); @@ -231,6 +237,13 @@ QuizScreens.prototype = { } }, + showExplaination: function() { + const el = this.getActiveScreen().find(".explaination") + let explaination = this.quiz.question.current().explaination + el.toggleClass("active") + el.find(".explaination-text").text(explaination) + }, + getActiveScreen() { return this.activeScreen; }, diff --git a/style/109-modal-more-info.sass b/style/109-modal-more-info.sass new file mode 100644 index 0000000..c02a224 --- /dev/null +++ b/style/109-modal-more-info.sass @@ -0,0 +1,51 @@ +.explaination + width: 100% + height: 100% + position: absolute + top: 0 + left: 0 + display: flex + padding: 0 16px + align-items: flex-end + visibility: hidden + transition: opacity .8s + z-index: 1 + opacity: 0 + &.active + visibility: visible + backdrop-filter: blur(4px) + opacity: 1 + .explaination-wrapper + top: 160px + opacity: 1 + +.explaination-wrapper + width: 100% + max-width: 600px + max-height: 400px + padding: 40px + background-color: $neutral-color + +radius(16px) + position: absolute + top: 175px + left: 50% + transform: translateX(-50%) + z-index: 3 + opacity: 0 + transition: all .6s + h2 + +font-size(24) + margin-bottom: 12px + p + +font-size(16) + + .close-explaination + position: absolute + top: 16px + right: 16px + cursor: pointer + +.m + .explaination-wrapper + width: calc(100% - 32px) + margin: 0 auto diff --git a/style/style.sass b/style/style.sass index b9bf8e3..e6a1fa5 100644 --- a/style/style.sass +++ b/style/style.sass @@ -13,3 +13,4 @@ @import 106-question-draganddrop @import 107-question-match @import 108-question-text +@import 109-modal-more-info diff --git a/views/components/modal_more_info.blade.php b/views/components/modal_more_info.blade.php new file mode 100644 index 0000000..d07f416 --- /dev/null +++ b/views/components/modal_more_info.blade.php @@ -0,0 +1,7 @@ +
+
+

{{ $__('Explications') }}

+

+ +
+
diff --git a/views/footer.blade.php b/views/footer.blade.php index a5bed57..d9a38e4 100644 --- a/views/footer.blade.php +++ b/views/footer.blade.php @@ -5,6 +5,14 @@ R @endisset + + @isset($info) + + {{$__('More infos')}} + M + + @endisset + @@ -28,10 +36,10 @@ {{$__('space')}} @endif - @isset($info) - - {{$__('More infos')}} - F1 - - @endisset + +@isset($info) + @if($info) + @include('components.modal_more_info', ['explaination' => $info]) + @endif +@endisset diff --git a/views/index.blade.php b/views/index.blade.php index cb5f5ac..828367b 100644 --- a/views/index.blade.php +++ b/views/index.blade.php @@ -20,8 +20,8 @@ @include('components.background',['data'=>$data,'name'=>'background','fit'=>'cover']) @include('screens.intro', ['data'=> $data]) @foreach($data->questions as $key => $question) - - @include('screens.question_'.$question['type'], ['theme' => $data->theme,'data'=> $data, 'question' => $question, 'max' => $totalQuestion, 'position' => $key, 'alphabet' => $alphabet, 'countdown' => isset($question['countdown_enable']) && $question["countdown_enable"]]) + @php($info = $question['explaination']) + @include('screens.question_'.$question['type'], ['info' => $info,'theme' => $data->theme,'data'=> $data, 'question' => $question, 'max' => $totalQuestion, 'position' => $key, 'alphabet' => $alphabet, 'countdown' => isset($question['countdown_enable']) && $question["countdown_enable"]]) @endforeach @include('screens.outro', ['data'=> $data])
diff --git a/views/screens/question_country.blade.php b/views/screens/question_country.blade.php index 99f13aa..22d76c3 100644 --- a/views/screens/question_country.blade.php +++ b/views/screens/question_country.blade.php @@ -24,5 +24,5 @@ - @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true]) + @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true]) diff --git a/views/screens/question_draganddrop.blade.php b/views/screens/question_draganddrop.blade.php index dd857a7..52de808 100644 --- a/views/screens/question_draganddrop.blade.php +++ b/views/screens/question_draganddrop.blade.php @@ -19,5 +19,5 @@ @include('screens.question_draganddrop_area',['data'=>$data,'area'=>2,'question'=>$question,'theme'=>$theme]) - @include('footer', ['countdown' => $countdown,'question' => $question,'data' => $data, 'reset' => true, 'text' => $__('Validate answer'), 'info' => true]) + @include('footer', ['countdown' => $countdown,'question' => $question,'data' => $data, 'reset' => true, 'text' => $__('Validate answer'), 'info' => $info]) diff --git a/views/screens/question_email.blade.php b/views/screens/question_email.blade.php index 28661f9..9887145 100644 --- a/views/screens/question_email.blade.php +++ b/views/screens/question_email.blade.php @@ -15,5 +15,5 @@ - @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true]) + @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true]) diff --git a/views/screens/question_match.blade.php b/views/screens/question_match.blade.php index 5a5e124..dcad0df 100644 --- a/views/screens/question_match.blade.php +++ b/views/screens/question_match.blade.php @@ -42,5 +42,5 @@
- @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'text' => $__('Validate answer'), 'info' => true, 'matchMaking' => true]) + @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'text' => $__('Validate answer'), 'info' => $info, 'matchMaking' => true]) diff --git a/views/screens/question_multiple.blade.php b/views/screens/question_multiple.blade.php index 9e62d90..388536d 100644 --- a/views/screens/question_multiple.blade.php +++ b/views/screens/question_multiple.blade.php @@ -21,5 +21,5 @@ - @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true]) + @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => $info]) diff --git a/views/screens/question_text.blade.php b/views/screens/question_text.blade.php index 449b8d6..83c81e3 100644 --- a/views/screens/question_text.blade.php +++ b/views/screens/question_text.blade.php @@ -9,5 +9,5 @@ - @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true]) + @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true]) diff --git a/views/screens/question_textarea.blade.php b/views/screens/question_textarea.blade.php index 2556abf..bf8c3b9 100644 --- a/views/screens/question_textarea.blade.php +++ b/views/screens/question_textarea.blade.php @@ -9,5 +9,5 @@ - @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true]) + @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true]) -- 2.39.5