wip #6182 @4:30

diff --git a/resources/quizv2/js/quiz.js b/resources/quizv2/js/quiz.js
index 65731ed7d2a3c66c357dc3199148058cc59bbe3a..52f94808fd85182e7d21354e696c872026304a8b 100644 (file)
--- a/resources/quizv2/js/quiz.js
+++ b/resources/quizv2/js/quiz.js
@@ -86,8 +86,7 @@ Quiz.prototype = {
         // Valider les réponses
         $(document).on("click", ".next .action", function () {
             let responses = $this.responses
-            $this.validateResponse(responses);
-            $this.next();
+            $this.next(responses);
         })
         key('space', function (e){
             e.preventDefault()
@@ -102,6 +101,9 @@ Quiz.prototype = {
             e.preventDefault()
             $this.resetForm()
         })
+
+        //
+        this.activeNav()
     },
 
     updateIcons: function () {
@@ -128,16 +130,28 @@ Quiz.prototype = {
         this.resize.resize();
     },
 
-    next: function () {
+    next: function (responses) {
         const $el = $(".active-screen .btn.action")
-        const form = $(".active-screen form")
+        let status = quiz.score.questionStatus
+        let currentPosition = this.question.currentPosition()
+
+        quiz.score.updateScore()
         // if form exist and responses are validated
         // dont miss to add this second condition
-        if(form.length > 0) {
-            return false
+        if($(".active-screen form").length > 0) {
+            if(status.length > 0) {
+                if(status[currentPosition].ok === "not answered") {
+                    this.validateResponse(responses);
+                    this.updateBtnValidation("validated")
+                    return false
+                }
+            }
         }
+
         $el.parents(".container-screen").addClass("none").removeClass("next active-screen").next(".container-screen").removeClass("none").addClass("next active-screen")
         this.resetForm()
+        this.activeNav(currentPosition)
+        this.updateBtnValidation()
     },
 
     setDisplay: function() {
@@ -155,6 +169,14 @@ Quiz.prototype = {
         $("form").find("input").prop("checked", false)
     },
 
+    updateBtnValidation: function(status) {
+        let $btnAction = $("#footer .action"),
+            validationText = $btnAction.data("validation-text"),
+            continueText = $btnAction.data("continue-text")
+
+        $btnAction.find('.text').text(status === "validated" ? continueText : validationText)
+    },
+
     validateResponse: function(responses) {
         const form = $(".active-screen form")
         const activeScreen = $(".active-screen")
@@ -174,9 +196,25 @@ Quiz.prototype = {
         }
     },
 
+    activeNav: function(position = 1) {
+        const questionStatus = quiz.score.questionStatus
+        let $el = $(".progress-container .progress-item:nth-child("+position+")")
+        $el.addClass("active")
+
+        for(let k in questionStatus) {
+            let $el = $(".progress-container .progress-item:nth-child("+k+")")
+            if(questionStatus[k].ok === 'ok') {
+                $el.addClass("ok")
+            }else if(questionStatus[k].ok === 'nok'){
+                $el.addClass("nok")
+            }
+        }
+    },
+
     animationValidation: function(status) {
         let selector = $("#anim")
-        this.animations.load(status, selector, {'\\$text': 'Salut :)'});
+        let text = status === "NOK" ? "Not quite" : "Perfect"
+        this.animations.load(status, selector, {'\\$text': text});
         selector.addClass("active")
         setTimeout(function(){
             selector.removeClass("active")

diff --git a/resources/quizv2/js/quiz.question.js b/resources/quizv2/js/quiz.question.js
index ecc3cd1a05a00e3d9161bca3140a83e84a69b0ea..0f2afe8137715229756b69068d0ded9105518ac2 100644 (file)
--- a/resources/quizv2/js/quiz.question.js
+++ b/resources/quizv2/js/quiz.question.js
@@ -16,8 +16,12 @@ QuizQuestion.prototype = {
         return this.quiz.data.questions[parseInt(pos)]
     },
 
+    currentPosition: function() {
+        return $(".active-screen").data("position");
+    },
+
     current: function() {
-        let currentPosition = $(".active-screen").data("position");
+        let currentPosition = this.currentPosition()
         return this.byPosition(currentPosition)
     },
 

diff --git a/resources/quizv2/style/101-header-footer.sass b/resources/quizv2/style/101-header-footer.sass
index 29955063fe21c9f00e2b2c28c2a3f47ead606b97..04114ccde5bc97d52eac198f16d99a8174b24806 100644 (file)
--- a/resources/quizv2/style/101-header-footer.sass
+++ b/resources/quizv2/style/101-header-footer.sass
@@ -1,17 +1,20 @@
 header,
 #footer
     position: relative
+
+header
     z-index: 1
 
 #title
     height: 80px
     +flex-config(space-between,false,row,center)
     margin-top: -24px
+
 #logo
     height: 40px
     filter: brightness(10)
 
-#question
+.header-question
     text-align: center
     .abovetitle
         +font-size(16)
@@ -40,6 +43,7 @@ header,
     bottom: 0
     left: 0
     width: 100%
+    z-index: 2
     +flex-config(space-between,false,row,center)
     +padding-container()
 

diff --git a/resources/quizv2/style/103-question-multiple.sass b/resources/quizv2/style/103-question-multiple.sass
index 8ef46dc6b7d57117a6b8ef20f36857eae59ce6b7..4ace2d8148f50ede2d817569e0ab1036312f654e 100644 (file)
--- a/resources/quizv2/style/103-question-multiple.sass
+++ b/resources/quizv2/style/103-question-multiple.sass
@@ -9,36 +9,31 @@
                 width: 100%
                 height: 58px
                 @extend .radius
-                background-color: $neutral-color
+                +opacity(.80,background-color,$neutral-color)
                 +flex-config(space-between,false,false,center)
                 padding: 0 16px
                 cursor: pointer
                 border: 2px solid rgba($texts-color, .24)
                 position: relative
                 overflow: hidden
-                &.ok
-                    //
-                &.nok
-                    //
-                &.neutral
-                    //
-                &.missed
+                &:after
+                    content: ""
+                    width: 100%
+                    height: 100%
+                    position: absolute
+                    top: 0
+                    left: 0
+                &.ok:after,
+                &.missed:after
                     //
-                    +opacity(.80,background-color,$neutral-color)
+                    +opacity(.24,background-color,$ok-color)
+
                 *
                     z-index: 1
 
             input:checked+label
                 border-color: $texts-color
                 &:after
-                    content: ""
-                    width: 100%
-                    height: 100%
                     +opacity(.16)
-                    position: absolute
-                    top: 0
-                    left: 0
                 &.nok:after
                     background: transparent
-                &.missed:after
-                    +opacity(.24,background-color,$ok-color)

diff --git a/resources/views/quizv2/footer.blade.php b/resources/views/quizv2/footer.blade.php
index 5f8ab494c6c18d189cf2f50e3620a15533aa5ed2..460f52e0f6d5be9c46b84af75be242d7f4e7af91 100644 (file)
--- a/resources/views/quizv2/footer.blade.php
+++ b/resources/views/quizv2/footer.blade.php
@@ -5,8 +5,8 @@
             <span class="access">R</span>
         </a>
     @endisset
-    <a class="btn primary action">
-        {{$text}}
+    <a class="btn primary action" data-validation-text="Validate answer" data-continue-text="Continue">
+        <span class="text">{{$text}}</span>
         <span class="access space">space</span>
         @isset($time)
             <span data-icon="running-man"></span>

diff --git a/resources/views/quizv2/header_question.blade.php b/resources/views/quizv2/header_question.blade.php
index ecca76e7980905b5ee523d38f544dcff195ef5ed..0c446552ff14a831d103d2e6b2aec59ccc5f8bf5 100644 (file)
--- a/resources/views/quizv2/header_question.blade.php
+++ b/resources/views/quizv2/header_question.blade.php
@@ -1,4 +1,4 @@
-<header id="question">
+<header class="header-question">
     <p class="abovetitle">{{ __('Question').' '.($position+1).'/'.$max }} </p>
     <div class="progress-container">
         @for($i = 0; $i < $max; $i++)