wip #6182 @5:30 outro

diff --git a/resources/quizv2/js/quiz.js b/resources/quizv2/js/quiz.js
index 6f20504f8b199cf03b5aa60e661d0d7f4f3adb95..ea363b85f7ba5290907bd5dc6735e92238d80500 100644 (file)
--- a/resources/quizv2/js/quiz.js
+++ b/resources/quizv2/js/quiz.js
@@ -131,6 +131,9 @@ Quiz.prototype = {
     },
 
     next: function (responses) {
+        // on arrête l'animation si le joueur passe à la question suivante
+        this.stopAnimationValidation()
+
         const $el = $(".active-screen .btn.action")
         let status = quiz.score.questionStatus
 
@@ -192,7 +195,7 @@ Quiz.prototype = {
                 }else {
                     this.animationValidation("NOK")
                 }
-                this.displayResult(validated.status[position].answers)
+                this.resultAfterValidation(validated.status[position].answers)
             }
             return false
         }
@@ -213,7 +216,6 @@ Quiz.prototype = {
             if (questionStatus[lastAnsweredQuestion].ok === 'ok') {
                 $_el.addClass("ok")
             }
-
             if (questionStatus[lastAnsweredQuestion].ok === 'nok') {
                 $_el.addClass("nok")
             }
@@ -223,15 +225,19 @@ Quiz.prototype = {
     animationValidation: function(status) {
         let selector = $("#anim")
         let text = status === "NOK" ? "Not quite" : "Perfect"
+        let $this = this
         this.animations.load(status, selector, {'\\$text': text});
         selector.addClass("active")
-        setTimeout(function(){
-            selector.removeClass("active")
-            selector.empty()
+        setTimeout(function(e){
+            $this.stopAnimationValidation()
         }, 10000)
     },
 
-    displayResult: function(datas) {
+    stopAnimationValidation: () => {
+        $("#anim").removeClass("active").empty()
+    },
+
+    resultAfterValidation: function(datas) {
         for(let k in datas) {
             let n = (parseInt(k) + 1)
             let icon = getSpriteIcon("quiz-ok")
@@ -244,6 +250,13 @@ Quiz.prototype = {
                 $el.find(".access").addClass(datas[k]).html(icon)
             }
         }
+    },
+
+    result: function() {
+        let maxScore = quiz.score.maxScore,
+            score = quiz.score.score
+
+
     }
 }
 

diff --git a/resources/views/quizv2/index.blade.php b/resources/views/quizv2/index.blade.php
index 320473fb1233ff5460cf3eba1cf94f906edbcf09..a01d88afd7ff63b803e055b088861876befa40ec 100644 (file)
--- a/resources/views/quizv2/index.blade.php
+++ b/resources/views/quizv2/index.blade.php
@@ -23,6 +23,7 @@
         @foreach($data->questions as $key => $question)
             @include('quizv2.screens.question_'.$question['type'], ['theme' => $data->theme, 'data'=> $question, 'max' => $totalQuestion, 'position' => $key, 'alphabet' => $alphabet])
         @endforeach
+        @include('quizv2.screens.outro', ['data'=> $data])
         <div id="anim"></div>
     </div>
 </div>

diff --git a/resources/views/quizv2/screens/outro.blade.php b/resources/views/quizv2/screens/outro.blade.php
new file mode 100644 (file)
index 0000000..6d8dc98
--- /dev/null
+++ b/resources/views/quizv2/screens/outro.blade.php
@@ -0,0 +1,35 @@
+<div class="container-screen none">
+    @include('quizv2.header_title', ['data', $data])
+    <div class="screen" id="result">
+        <div class="result-content">
+            <div class="result-content-wrapper">
+                <div class="result-counter">
+                    <span id="score-counter"></span>/<span id="maxScore-counter"></span>
+                    <div id="progress-counter"></div>
+                </div>
+                <div class="result-text">
+                    <h1>Congratulation!</h1>
+                    <p class="above-title">You have completed the quiz with <span id="score-text"></span>
+                        correct answers out of <span id="maxScore-text"></span></p>
+                </div>
+            </div>
+            <div class="restart-sentence">Want to improve your score?</div>
+            <footer>
+                <a class="btn secondary reset">
+                    Restart
+                    <span class="access">R</span>
+                </a>
+                <a class="btn primary action">
+                    Leave
+                    <span class="access space">space</span>
+                </a>
+            </footer>
+        </div>
+        <div class="result-answers-review">
+            <h2>Answers review</h2>
+            <p class="above-title"></p>
+            <ul id="answers-list">
+            </ul>
+        </div>
+    </div>
+</div>