wip #6193 @7:00

diff --git a/js/quiz.animations.js b/js/quiz.animations.js
index d43a719cc7e745b018ba332792042f5b76a62dd3..e71b64a18d140b3a3d1616750136b545cf6927d9 100644 (file)
--- a/js/quiz.animations.js
+++ b/js/quiz.animations.js
@@ -23,14 +23,6 @@ QuizAnimations.prototype = {
             });
         }
     },
-
-    triggeredBtn: function() {
-        /*$(document).on("mousedown", ".btn", function() {
-            gsap.to($(this), { scale: .9, duration: 0.3 });
-        }).on("mouseup", ".btn", function() {
-            gsap.to($(this), { scale: 1, duration: 0.3 });
-        })*/
-    }
 }
 
 

diff --git a/js/quiz.js b/js/quiz.js
index b99daff2ede37752eed76fee9943c3963c195d4e..10dafa22b9f6d113c21f5a598c20ff1aad0dac33 100644 (file)
--- a/js/quiz.js
+++ b/js/quiz.js
@@ -126,6 +126,11 @@ Quiz.prototype = {
             gsap.to($(this), { scale: 1, duration: .2 });
         })
 
+        //
+        $(document).on("click", ".toggle-answers-review", function() {
+            $(".score-answers-review_container").toggleClass("active")
+        })
+
         //
         this.activeNav()
     },
@@ -138,6 +143,7 @@ Quiz.prototype = {
                 let responses = $this.responses
                 $this.next(responses);
                 $("#welcome-screen").removeClass("next active-screen").addClass("none").next(".container-screen").removeClass("none").addClass("next active-screen")
+                $this.activeNav(1)
             }
         })
     },
@@ -204,7 +210,7 @@ Quiz.prototype = {
     // si le joueur recharge la page, le rediriger là où il en était
     setDisplay: function() {
         const   currentQuestion = quiz.score.lastAnsweredQuestion + 1,
-                questions = this.quiz.questions
+            questions = this.quiz.questions
 
         if(questions.length > 0) {
             if (quiz.score.lastAnsweredQuestion > -1 && questions.length <= currentQuestion) {

diff --git a/js/quiz.resize.js b/js/quiz.resize.js
index d2e3f0a5b26612e452ee22204cb44e383c6fa1d6..45113b9267dff1fed015578bca5cd22b2ff9f3cc 100644 (file)
--- a/js/quiz.resize.js
+++ b/js/quiz.resize.js
@@ -8,13 +8,23 @@ QuizResize.prototype = {
         this.hh = $(window).height();
         let intro_text_mobile = this.quiz.data.intro_text_mobile
         let intro_text = this.quiz.data.intro_text
+        const iconReset = getSpriteIcon("quiz-reset")
+        const textReset = "Reset"
 
         // Exécuter ici toutes opérations qui doivent intervenir lorsque la fenêtre est redimensionnée par le système ou l'utilisateur
+        //
         if(this.ww <= 390) {
             $("#welcome p").html(this.nl2br(intro_text_mobile))
         }else {
             $("#welcome p").html(this.nl2br(intro_text))
         }
+
+        //
+        if(this.ww <= 992) {
+            $(".btn.reset .text").html(iconReset)
+        } else {
+            $(".btn.reset .text").html(textReset)
+        }
     },
 
     nl2br: function(str) {

diff --git a/style/001-global-variables.sass b/style/001-global-variables.sass
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..45905490392f50039053f2699c1a8efbe6ef821a 100644 (file)
--- a/style/001-global-variables.sass
+++ b/style/001-global-variables.sass
@@ -0,0 +1 @@
+$screenSizeMobile: 391px
\ No newline at end of file

diff --git a/style/100-global.sass b/style/100-global.sass
index 401aeac5e2d6f6cd00cd9dc2fcb7bf7fe34721bb..8707185a0ebdc4eac6ed297882e8c6c716a3ef42 100644 (file)
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -31,14 +31,28 @@ body
     +flex-config(center,false,false,center)
     @extend .radius
     +font-size(20)
+    +below(992px)
+        height: 56px
     &.primary
         background: radial-gradient(at 16% 6px, rgb(255, 102, 186) -7%, #D0167C 74%)
         box-shadow: 0 4px 6px rgba(0,0,0,.2)
+        +below(993px)
+            flex: 1
+            margin-left: 16px
     &.secondary
         +opacity(.16)
         padding-left: 22px
     &.reset
         max-width: 144px
+        +below(992px)
+            width: 56px
+            flex-shrink: 0
+            padding: 0
+        .text
+            +below(992px)
+                +flex-config(center,false,false,center)
+            svg
+                width: 50%
     &.info
         max-width: 177px
 
@@ -52,6 +66,9 @@ body
     margin-left: 16px
     +flex-config(center,false,false,center)
     border: 0
+    +below(993px)
+        &:not(.missed):not(.ok):not(.nok)
+            display: none
     &.space
         width: 70px
     &.infos
@@ -89,9 +106,12 @@ body
             height: 100%
             width: 100%
             object-fit: cover
-            +above(391px)
+            &.question-multiple
+                object-position: top
+
+            +above($screenSizeMobile)
                 display: none
         img:not(.mobile)
             display: none
-            +above(391px)
+            +above($screenSizeMobile)
                 display: inline

diff --git a/style/101-header-footer.sass b/style/101-header-footer.sass
index c3c63845bf7d7976e1c06446030dad18dd000991..4775a07a9afc940becbbd87d25bbf87c2aa48a10 100644 (file)
--- a/style/101-header-footer.sass
+++ b/style/101-header-footer.sass
@@ -17,10 +17,14 @@ header
 .header-question
     text-align: center
     .abovetitle
-        +font-size(16)
+        +font-size(14)
+        +above($screenSizeMobile)
+            +font-size(16)
     .progress-container
-        margin: 6px 0 16px
+        margin: 4px 0 16px
         +flex-config(center,false,false,center)
+        +above($screenSizeMobile)
+            margin: 6px 0 16px
     .progress-item
         width: 16px
         height: 4px
@@ -37,7 +41,11 @@ header
         &.nok
             background-color: $nok-color
     h1
-        +font-size(24)
+        +font-size(20)
+        height: 84px
+        +above(991px)
+            height: auto
+            +font-size(24)
 
 .footer
     position: absolute
@@ -53,8 +61,8 @@ header
 
     .btn.primary
         width: 100%
-        max-width: 400px
-        +breakpoint(md)
+        +above(992px)
+            max-width: 400px
             position: absolute
             left: 50%
             bottom: 24px

diff --git a/style/103-question-multiple.sass b/style/103-question-multiple.sass
index fed8e2e90815a5da11077a8ada24b05c60e89047..7dc8c3a26baa63c8968271c00a7d570a059222a0 100644 (file)
--- a/style/103-question-multiple.sass
+++ b/style/103-question-multiple.sass
@@ -1,9 +1,14 @@
 .screen.question-multiple
-    top: 93px
+    top: 45px
+    +above(992px)
+        top: 93px
     .list
         display: grid
-        grid-template-columns: repeat(2, 1fr)
         grid-gap: 16px
+        +below($screenSizeMobile)
+            grid-gap: 8px
+        +breakpoint(md)
+            grid-template-columns: repeat(2, 1fr)
         &-item
             label
                 width: 100%
@@ -16,6 +21,9 @@
                 border: 2px solid rgba($texts-color, .24)
                 position: relative
                 overflow: hidden
+                +below($screenSizeMobile)
+                    height: 56px
+                    +font-size(14)
                 &:after
                     content: ""
                     width: 100%

diff --git a/style/105-outro.sass b/style/105-outro.sass
index 0438c0ee8f9cf6101efeb6bb5dfaeb1831dd4496..1ffae953c40087095a431859698807052ceea8b3 100644 (file)
--- a/style/105-outro.sass
+++ b/style/105-outro.sass
@@ -4,6 +4,8 @@
     border-radius: 40px
     overflow: hidden
     +flex-config(false,false,row,stretch)
+    +below(993px)
+        position: static
 
     .subtitle
         +opacity(.8,color,$texts-color)
@@ -12,6 +14,8 @@
         flex: 1
         padding: 24px
         position: relative
+        +below(993px)
+            padding: 16px
         h1
             +font-size(40)
             margin-bottom: 9px
@@ -23,6 +27,11 @@
         position: relative
         top: var(--space-21-66)
         left: var(--space-21-66)
+        +below(993px)
+            +flex-config(center,false,column,center)
+            top: 74px
+            left: 0
+            text-align: center
 
     &-counter
         height: 0
@@ -32,7 +41,8 @@
         position: relative
         +font-size(80)
         margin-right: 60px
-
+        +below(993px)
+            margin: 0 0 24px
         #progress-counter
             width: 100%
             height: 100%
@@ -51,26 +61,58 @@
                 overflow: visible
                 width: calc(100% - 12px)
                 height: calc(100% - 12px)
-                transform: rotate(-90deg)
                 position: absolute
                 circle
-                    stroke-width: 12px
+                    stroke-width: 6px
                 circle:not(#progress-circle)
                     +opacity(.16,color,$texts-color)
-                circle#progress-circle
-                    transition: stroke-dashoffset 0.5s ease-in-out
 
-    &-answers-review
+    &-answers-review_container
         width: 36.11111%
+        +below(993px)
+            width: 100%
+            height: 100%
+            position: absolute
+            top: 0
+            left: 0
+            z-index: 99
+            display: flex
+            padding: 16px 16px 0
+            align-items: flex-end
+            visibility: hidden
+            +opacity(0,background-color,$ok-color)
+            &.active
+                +opacity(1,background-color,$ok-color)
+
+    &-answers-review
+        height: 100%
         background-color: $neutral-color
         padding: 24px 24px 0
         position: relative
+        +below(993px)
+            width: 100%
+            height: calc(100% - 78px)
+            padding: 8px 16px 0
+            border-top-left-radius: 20px
+            border-top-right-radius: 20px
         h2
             +font-size(24)
             margin-bottom: 5px
+            +below(993px)
+                margin-bottom: 12px
+                text-align: center
+                position: relative
+            #close-answers
+                position: absolute
+                right: 0
+                top: 50%
+                transform: translateY(-50%)
+
         .subtitle
             +font-size(16)
             margin-bottom: 22px
+            +below(993px)
+                display: none
 
         &:after
             content: ""
@@ -84,6 +126,9 @@
     #answers-list
         height: 85%
         padding-right: 24px
+        +below(993px)
+            height: 90%
+            padding-right: 5px
         .item
             padding-left: 20px
             margin-bottom: 22px
@@ -117,11 +162,17 @@
             .answer
                 +opacity(.8,color,$texts-color)
 
+    .toggle-answers-review
+        +above(992px)
+            display: none
+
 
     footer
         position: absolute
         width: calc(100% - 48px)
         bottom: 24px
+        +below(993px)
+            width: calc(100% - 32px)
         .restart-sentence
             margin-bottom: 14px
         .controls

diff --git a/views/footer.blade.php b/views/footer.blade.php
index a4de04a21e2ddbea50fb418c478264d208d077e0..bcadcbaa49674b1cd73db1ee5125dfc3c780bd28 100644 (file)
--- a/views/footer.blade.php
+++ b/views/footer.blade.php
@@ -1,7 +1,7 @@
 <footer class="footer-question footer">
     @isset($reset)
         <a class="btn secondary reset">
-            Reset
+            <span class="text">Reset</span>
             <span class="access">R</span>
         </a>
     @endisset

diff --git a/views/screens/intro.blade.php b/views/screens/intro.blade.php
index 639213bbb11ef8bb916f4b11e2fa5197f64e0125..0a3d8c602d3ad3c87003a1ac0ba0b918d6fe8dd7 100644 (file)
--- a/views/screens/intro.blade.php
+++ b/views/screens/intro.blade.php
@@ -12,6 +12,8 @@
         <img class="mobile" src="{{$data->theme->introImageMobile}}" />
     </div>
     <footer class="footer">
-        <a id="start" class="btn primary">{{$data->intro_button}}</a>
+        <a id="start" class="btn primary">{{$data->intro_button}}
+            <span class="access space">space</span>
+        </a>
     </footer>
 </div>

diff --git a/views/screens/outro.blade.php b/views/screens/outro.blade.php
index e522665c33979509e9a80fc8ecd0499f464cabb8..437750f8cff63e8949de4dfcc94d89807a4e994c 100644 (file)
--- a/views/screens/outro.blade.php
+++ b/views/screens/outro.blade.php
@@ -6,16 +6,19 @@
                 <div class="score-counter">
                     <div id="progress-counter">
                         <span id="score-counter">0</span><span>/</span><span id="maxScore-counter">0</span>
-                        <svg width="100%" height="100%" id="svg">
-                            <circle cx="50%" cy="50%" r="50%" fill="transparent" stroke="currentColor" />
-                            <circle id="progress-circle" cx="50%" cy="50%" r="50%" fill="none" stroke="currentColor" />
+                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" xml:space="preserve">
+                            <circle cx="50" cy="50" r="48" fill="transparent" stroke="currentColor" />
+                            <circle id="progress-circle" fill="none" stroke="currentColor" stroke-width="1.2" stroke-mitterlimit="0" cx="50" cy="50" r="48" stroke-dasharray="360" stroke-linecap="round" transform="rotate(-90 ) translate(-100 0)" >
+                                <animate attributeName="stroke-dashoffset" values="360;0" dur="2s" repeatCount="indefinite"></animate>
+                            </circle>
                         </svg>
                     </div>
                 </div>
                 <div class="score-text">
                     <h1>Congratulation!</h1>
                     <p class="subtitle">You have completed the quiz<br/> with <span id="score-text"></span>
-                        correct answers out of <span id="maxScore-text"></span></p>
+                        correct answers out of <span id="maxScore-text"></span>
+                    </p>
                 </div>
             </div>
             <footer>
@@ -29,6 +32,10 @@
                             <span class="access">R</span>
                         </a>
                     @endif
+                    <a class="btn secondary toggle-answers-review">
+                        <span data-icon=""></span>
+                        Review answers
+                    </a>
                     <a class="btn primary action">
                         Leave
                         <span class="access space">space</span>
@@ -36,24 +43,26 @@
                 </div>
             </footer>
         </div>
-        <div class="score-answers-review">
-            <h2>Answers review</h2>
-            <p class="subtitle">Review your answers before you go</p>
-            <ul id="answers-list">
-                @verbatim
-                <script id="template-answers-review" type="text/x-handlebars-template">
-                    {{#each reviewList}}
-                        <li class="item {{this.status}}">
-                            <p class="position">Question {{inc @index}}</p>
-                            <p class="question">{{this.question}}</p>
-                            {{#each this.answers}}
+        <div class="score-answers-review_container">
+            <div class="score-answers-review">
+                <h2>Answers review<span class="toggle-answers-review" id="close-answers" data-icon="wrong"></span></h2>
+                <p class="subtitle">Review your answers before you go</p>
+                <ul id="answers-list">
+                    @verbatim
+                        <script id="template-answers-review" type="text/x-handlebars-template">
+                            {{#each reviewList}}
+                            <li class="item {{this.status}}">
+                                <p class="position">Question {{inc @index}}</p>
+                                <p class="question">{{this.question}}</p>
+                                {{#each this.answers}}
                                 <p class="answer">{{this.answer}}</p>
+                                {{/each}}
+                            </li>
                             {{/each}}
-                        </li>
-                    {{/each}}
-                </script>
-                @endverbatim
-            </ul>
+                        </script>
+                    @endverbatim
+                </ul>
+            </div>
         </div>
     </div>
 </div>

diff --git a/views/screens/question_multiple.blade.php b/views/screens/question_multiple.blade.php
index 8606917900eab010dcb0041c25864516f77d4bfd..34f66ccaa540eb999d1743cb8ef34e60a829c602 100644 (file)
--- a/views/screens/question_multiple.blade.php
+++ b/views/screens/question_multiple.blade.php
@@ -4,19 +4,22 @@
         <form id="form-{{$position}}">
             <ul class="list">
                 @foreach($data['answers'] as $key => $answer)
-                   <li class="list-item">
-                        <input type="{{ $data['type'] === "multiple" ? 'checkbox' : 'radio' }}" name="{{ $data['type'] === "multiple" ? 'answer-'.$position.$key : 'answer' }}" id="question-{{$position.$key}}" class="none" value="{{$key}}">
-                        <label for="question-{{$position.$key}}">
+                    <li class="list-item">
+                        <input type="{{ $data['type'] === "multiple" ? 'checkbox' : 'radio' }}"
+                               name="{{ $data['type'] === "multiple" ? 'answer-'.$position.$key : 'answer' }}"
+                               id="question-{{$position.$key}}" class="none" value="{{$key}}">
+                        <label for="question-{{$position.$key}}" aria-keyshortcuts="{{$alphabet[$key]}}">
                             <span class="relative">{{$answer['answer']}}</span>
                             <span class="access">{{$alphabet[$key]}}</span>
                         </label>
-                   </li>
+                    </li>
                 @endforeach
             </ul>
         </form>
     </div>
     <div class="screen-image">
-        <img src="{{$theme->standardImage}}">
+        <img src="{{$theme->standardImage}}"/>
+        <img class="mobile question-multiple" src="{{$theme->standardImageMobile}}"/>
     </div>
     @include('footer', ['data' => $data, 'reset' => true, 'text' => 'Validate answer', 'info' => true])
 </div>