wait #6384 @2:30

diff --git a/js/quiz.animations.js b/js/quiz.animations.js
index d9a22a24a4656ea4cc65fad7bc97483f5cf15494..d4aa93c6d04d396bd688a1d5cd81e6a3643d8b57 100644 (file)
--- 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 f90791bdd27c9176ee4cbb26a5a699bd7734d26d..b0b285c54700b20de4985e3942d64fa588ef29b1 100644 (file)
--- 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 (file)
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 b9bf8e362ec6990ba38badb7341055f7b8ea8bfb..e6a1fa526261d53488de91520a182e35387913b6 100644 (file)
--- 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 (file)
index 0000000..d07f416
--- /dev/null
+++ b/views/components/modal_more_info.blade.php
@@ -0,0 +1,7 @@
+<div class="explaination">
+    <div class="explaination-wrapper">
+        <h2>{{ $__('Explications') }}</h2>
+        <p class="explaination-text"></p>
+        <span class="close-explaination" data-icon="wrong"></span>
+    </div>
+</div>

diff --git a/views/footer.blade.php b/views/footer.blade.php
index a5bed57049fceabc79c7135b681590a564e719ab..d9a38e47061334dc4bd69616bb681da3f07fe785 100644 (file)
--- a/views/footer.blade.php
+++ b/views/footer.blade.php
@@ -5,6 +5,14 @@
             <span class="access">R</span>
         </a>
     @endisset
+
+    @isset($info)
+        <a class="btn secondary none moreinfo" aria-keyshortcuts="M">
+            {{$__('More infos')}}
+            <span class="access infos">M</span>
+        </a>
+    @endisset
+
     <a class="btn primary {{ isset($matchMaking) ? "confirmMatch" : "action validate" }} {{ $countdown ? ' countdown' : ''  }}"
        aria-keyshortcuts="Space">
         <span class="text">
@@ -28,10 +36,10 @@
             <span class="access space">{{$__('space')}}</span>
         </a>
     @endif
-    @isset($info)
-        <a class="btn secondary none" aria-keyshortcuts="F1">
-            {{$__('More infos')}}
-            <span class="access infos">F1</span>
-        </a>
-    @endisset
+
 </footer>
+@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 cb5f5acbd091f4f7b7dc15d436318aabb2141739..828367bf7a1a86496a4ceac5868cfc4bb0ac8eb9 100644 (file)
--- 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])
         <div id="instantReviewAnimation"></div>

diff --git a/views/screens/question_country.blade.php b/views/screens/question_country.blade.php
index 99f13aa0f7d19af9dc69daafa3be538b015d6c0e..22d76c38bcb2239a33d5d3710afc26b529f18feb 100644 (file)
--- a/views/screens/question_country.blade.php
+++ b/views/screens/question_country.blade.php
@@ -24,5 +24,5 @@
             </div>
         </form>
     </div>
-    @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true])
+    @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true])
 </div>

diff --git a/views/screens/question_draganddrop.blade.php b/views/screens/question_draganddrop.blade.php
index dd857a7b0e48395874ddb9b5b2e458a0d55ee61c..52de808fd03ee72cc6a6d5dd58e376aab5f064cd 100644 (file)
--- a/views/screens/question_draganddrop.blade.php
+++ b/views/screens/question_draganddrop.blade.php
@@ -19,5 +19,5 @@
         </div>
     </div>
     @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])
 </div>

diff --git a/views/screens/question_email.blade.php b/views/screens/question_email.blade.php
index 28661f9a9ee94f91acec4127db24375babbc1274..988714526e707e5ec3622117aca3fa9c411a7726 100644 (file)
--- a/views/screens/question_email.blade.php
+++ b/views/screens/question_email.blade.php
@@ -15,5 +15,5 @@
             </div>
         </form>
     </div>
-    @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true])
+    @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true])
 </div>

diff --git a/views/screens/question_match.blade.php b/views/screens/question_match.blade.php
index 5a5e124e45c529b206e33762593c8a393e883604..dcad0dfd1bdec6803d7454abc7470b70484b4375 100644 (file)
--- a/views/screens/question_match.blade.php
+++ b/views/screens/question_match.blade.php
@@ -42,5 +42,5 @@
             <div class="swiper-pagination-bottom"></div>
         </div>
     </div>
-    @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])
 </div>

diff --git a/views/screens/question_multiple.blade.php b/views/screens/question_multiple.blade.php
index 9e62d903617dcc3d33c310e8edb89797305697fb..388536d751ba984ca6af73baf5e691d5344929c4 100644 (file)
--- a/views/screens/question_multiple.blade.php
+++ b/views/screens/question_multiple.blade.php
@@ -21,5 +21,5 @@
             </ul>
         </form>
     </div>
-    @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true])
+    @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => $info])
 </div>

diff --git a/views/screens/question_text.blade.php b/views/screens/question_text.blade.php
index 449b8d635e8dbb94cf2f5116bf89bcae88708bcd..83c81e37946c0e00854280bc2ad3c40655223cd0 100644 (file)
--- a/views/screens/question_text.blade.php
+++ b/views/screens/question_text.blade.php
@@ -9,5 +9,5 @@
             </div>
         </form>
     </div>
-    @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true])
+    @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true])
 </div>

diff --git a/views/screens/question_textarea.blade.php b/views/screens/question_textarea.blade.php
index 2556abff41313ccdad67514656695f6b5b56f4a7..bf8c3b9ed3eec065b34b4e0a8849e2d90c4cc3d2 100644 (file)
--- a/views/screens/question_textarea.blade.php
+++ b/views/screens/question_textarea.blade.php
@@ -9,5 +9,5 @@
             </div>
         </form>
     </div>
-    @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true, 'info' => true])
+    @include('footer', ['countdown' => $countdown,'question' => $question, 'data' => $data, 'reset' => true])
 </div>