From 3c8b4e53865fc1f1dcd7da7c6ff2b81b19629f62 Mon Sep 17 00:00:00 2001
From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 16 Oct 2023 10:12:10 +0200
Subject: [PATCH] wait #6370 @0.75

---
 js/quiz.score.js        |  4 +++
 js/quiz.screen.outro.js | 56 ++++++++++++++++++++++++++++-------------
 style/105-outro.sass    | 16 ++++++++++++
 3 files changed, 59 insertions(+), 17 deletions(-)

diff --git a/js/quiz.score.js b/js/quiz.score.js
index 650ad69..05b45de 100644
--- a/js/quiz.score.js
+++ b/js/quiz.score.js
@@ -195,6 +195,10 @@ QuizScore.prototype = {
         this.quiz.data.questions.length;
     },
 
+    hasScore: function () {
+        return this.getQuestionsCount(true) > 0;
+    },
+
     getCurrentState: function () {
         return {
             q: this.lastAnsweredQuestion, a: this.answers
diff --git a/js/quiz.screen.outro.js b/js/quiz.screen.outro.js
index 936d1d8..d0cd031 100644
--- a/js/quiz.screen.outro.js
+++ b/js/quiz.screen.outro.js
@@ -86,33 +86,42 @@ QuizScreenOutro.prototype = {
             text: this.quiz.l10n.__("Unfortunately, you did not get enough correct answers (:score out of :maxScore).", {
                 'score': score,
                 'maxScore': maxScore
-            }) + " " + this.quiz.l10n.__("Please go back and review the content before retaking the quiz.")
-        }
+            }) + " " + this.quiz.l10n.__("Please go back and review the content before retaking the quiz."),
+            showCircle: true,
+            confetti: 'CONFETTI_LOSE',
+            status: 'nok',
+        };
         let ok = {
             title: this.quiz.l10n.__("Congratulation!"),
             text: this.quiz.l10n.__("You have completed the quiz with :score correct answers out of :maxScore", {
                 'score': score,
                 'maxScore': maxScore
-            })
+            }),
+            showCircle: true,
+            confetti: 'CONFETTI_WIN',
+            status: 'ok',
+        };
+        let neutral = {
+            title: this.quiz.l10n.__('Thank you for your answers!'),
+            text: '',
+            showCircle: false,
+            confetti: false,
+            status: 'neutral',
         }
-        let counter = $("#container-score")
         let percent = (score / maxScore) * 100
-        let animConfetti = '';
 
-        if (quiz.score.isPassed() === false) {
-            animConfetti = 'CONFETTI_LOSE';
-            this.displayResultContent(nok, "nok", counter)
+        let content;
+        if (!quiz.score.hasScore()) {
+            content = neutral;
+        } else if (quiz.score.isPassed() === false) {
+            content = nok;
         } else {
-            animConfetti = 'CONFETTI_WIN';
-            this.displayResultContent(ok, "ok", counter)
+            content = ok;
         }
 
-        //
-        setTimeout(function () {
-            return $this.animeConfetti(animConfetti);
-        }, 2500);
+        this.displayResultContent(content);
 
-        $("[id^=score-]").text(score)
+        $("[id^=score-]").text(score);
         $("[id^=maxScore-]").text(maxScore);
 
         this.quiz.score.runEndAction();
@@ -142,10 +151,23 @@ QuizScreenOutro.prototype = {
         }
     },
 
-    displayResultContent: function (result, status, counter) {
+    displayResultContent: function (result) {
+        const $this = this;
         $(".score-text h1").text(result.title)
         $(".score-text p").text(result.text)
-        counter.addClass(status)
+        $("#container-score").addClass(result.status);
+        $("#container-score").parent().addClass(result.status);
+        $("#container-score").parent().parent().addClass(result.status);
+
+        if (result.confetti) {
+            setTimeout(function () {
+                return $this.animeConfetti(result.confetti);
+            }, 2500);
+        }
+
+        if (!result.showCircle) {
+
+        }
     },
 
     displayReviewList: function () {
diff --git a/style/105-outro.sass b/style/105-outro.sass
index 414d769..0e3d9da 100644
--- a/style/105-outro.sass
+++ b/style/105-outro.sass
@@ -8,6 +8,7 @@
     .subtitle
         +opacity(.8, color, $texts-color)
 
+
     h1,
     .score-text .subtitle .word,
     .restart-sentence-mobile,
@@ -21,6 +22,10 @@
         position: relative
         z-index: 1
 
+        &.neutral
+            .restart, .toggle-answers-review, .restart-sentence, .restart-sentence-mobile
+                display: none !important
+
         &.full
             .score-content-wrapper
                 max-width: 60%
@@ -39,6 +44,13 @@
         top: var(--space-21-66)
         margin-left: 75px
 
+        &.neutral
+            .score-text
+                width: 100%
+
+                h1
+                    text-align: center
+
     &-counter
         height: 0
         padding-bottom: 31%
@@ -65,6 +77,9 @@
                 fill: $ok-color
                 stroke: $ok-color
 
+        &.neutral
+            display: none
+
         #progress-counter
             width: 100%
             height: 100%
@@ -229,6 +244,7 @@
     .area-title
         display: grid
         grid-template-columns: 2fr 2fr
+
         p
             width: 50%
 
-- 
2.39.5