wait #6323 @2:30

diff --git a/js/quiz.l10n.js b/js/quiz.l10n.js
index 19d4be65581eb399526093f5e9be86f19ae581d6..1180af3760c18492ae7e58d25e698061c324c09b 100644 (file)
--- a/js/quiz.l10n.js
+++ b/js/quiz.l10n.js
@@ -5,10 +5,15 @@ function QuizL10n(quiz) {
 }
 
 QuizL10n.prototype = {
-    __: function (str) {
+    __: function (str, replace = {}) {
         if (this.quiz.data.l10n[str] !== undefined && this.quiz.data.l10n[str] != null) {
-            return this.quiz.data.l10n[str];
+            str = this.quiz.data.l10n[str];
         }
+
+        for(const k in replace) {
+            str = str.replace(':'+k,replace[k])
+        }
+
         return str;
     },
 }

diff --git a/js/quiz.screen.outro.js b/js/quiz.screen.outro.js
index ef09af81ff173cd4fb621c9881bc6e0d4bf8ccd9..e84f12ee58f196ce4a1f39b59ec82a8077c548fd 100644 (file)
--- a/js/quiz.screen.outro.js
+++ b/js/quiz.screen.outro.js
@@ -25,8 +25,9 @@ QuizScreenOutro.prototype = {
         let subtitle = new SplitType(".score-text .subtitle", {types: 'words, chars'})
 
         gsap.to(".active-screen #progress-circle", {drawSVG: 0, duration: 0})
-        gsap.timeline({delay: .4})
-            .to(".active-screen .title-header", {
+        let tl = gsap.timeline({delay: .4})
+
+            tl.to(".active-screen .title-header", {
                 y: 0
             })
             .to(".active-screen footer", {
@@ -35,14 +36,14 @@ QuizScreenOutro.prototype = {
             .to("#progress-counter", {
                 scale: 1,
             })
-            .to(".active-screen #progress-circle", {
-                drawSVG: percent+"%",
+            tl.to(".active-screen #progress-circle", {
+                drawSVG: percent + "%",
                 duration: 1.5,
                 ease: "power4.easeOut"
             }, ">-0.5")
-            .to(".score-text", {
-                scale: 1,
-            },1.3)
+            tl.to(".score-text", {
+                    scale: 1,
+                }, 1.3)
             .from("#score-counter", {
                 innerText: 0,
                 duration: 1.85,
@@ -74,34 +75,56 @@ QuizScreenOutro.prototype = {
 
     show: function () {
         const $this = this
+        let maxScore = this.quiz.score.maxScore,score = this.quiz.score.score
+        let nok = {title: this.quiz.l10n.__("Ooops!"),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.")}
+        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})}
+        let counter = $("#container-score")
+        let percent = (score/maxScore) * 100
+
+        if (quiz.score.isPassed()===false) {
+            this.displayResultContent(nok,"nok",counter)
+        } else {
+            this.displayResultContent(ok,"ok",counter)
+        }
 
-        let maxScore = this.quiz.score.maxScore,
-            score = this.quiz.score.score
-
-        let status = this.quiz.score.questionStatus
-        let reviewList = this.quiz.question.getAll();
-
-        let absPath = window.location.href
+        //
+        setTimeout(function() {
+            return $this.animeConfetti()
+        }, 2500)
 
-        const counter = $("#progress-counter")
+        $("[id^=score-]").text(score)
+        $("[id^=maxScore-]").text(maxScore)
 
-        //
+        this.animate(score,percent)
+        this.displayReviewList()
         this.checkScorm()
+    },
 
-        if (score < (maxScore / 2)) {
-            counter.addClass("nok")
-        } else if (score >= (maxScore / 2)) {
-            counter.addClass("ok")
+    animeConfetti: function() {
+        this.quiz.animations.load("CONFETTI", "#anime-result", '', false);
+    },
 
-            setTimeout(function() {
-                return $this.animationOk()
-            }, 2700)
+    checkScorm: function() {
+        const $this = this
+        if (this.quiz.scorm.enabled === true) {
+            $(document).on("click", "#leave-quiz", function () {
+                $this.quiz.scorm.quit()
+            })
+        } else {
+            $("#leave-quiz").hide()
         }
+    },
 
-        const percent = (score/maxScore) * 100
+    displayResultContent: function(result,status,counter) {
+        $(".score-text h1").text(result.title)
+        $(".score-text p").text(result.text)
+        counter.addClass(status)
+    },
 
-        $("[id^=score-]").text(score)
-        this.animate(score,percent)
+    displayReviewList: function() {
+        let $ul = $("#answers-list")
+        let reviewList = this.quiz.question.getAll();
+        let status = this.quiz.score.questionStatus
 
         reviewList = reviewList.map((c, i) => {
             return {
@@ -112,10 +135,6 @@ QuizScreenOutro.prototype = {
                 'status': status[i].ok
             }
         })
-        let $ul = $("#answers-list")
-
-        //$("[id^=score-]").text(score)
-        $("[id^=maxScore-]").text(maxScore)
 
         //
         // HANDLEBARS TEMPLATING
@@ -135,21 +154,6 @@ QuizScreenOutro.prototype = {
         // mise en place de la scrollbar personnalisé
         // https://github.com/Grsmto/simplebar/tree/master/packages/simplebar
         const simpleBar = new SimpleBar($ul.get(0))
-    },
-
-    animationOk: function() {
-        this.quiz.animations.load("CONFETTI", "#anime-ok", '', false);
-    },
-
-    checkScorm: function() {
-        const $this = this
-        if (this.quiz.scorm.enabled === true) {
-            $(document).on("click", "#leave-quiz", function () {
-                $this.quiz.scorm.quit()
-            })
-        } else {
-            $("#leave-quiz").hide()
-        }
     }
 };
 

diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index cec26c513e31ca11f4d878f49025eec6368fac75..496449001896b7ce75ccd4cb2e873e6d210e28e1 100644 (file)
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -32,7 +32,7 @@ QuizScreens.prototype = {
         });
 
         // Cliquer sur le bouton suivant
-        $(document).on("click", ".next .action", function () {
+        $(document).on("click", ".active-screen.next .action", function () {
             if (($this.currentQuestionAnswers.length === 0 && !parseInt($this.quiz.question.current().countdown_enable)) || (parseInt($this.quiz.question.current().countdown_enable) && $this.intervalCountDown !== 0 && $this.currentQuestionAnswers.length === 0)) {
                 alert('Please select at least one answer');
                 return false;

diff --git a/style/105-outro.sass b/style/105-outro.sass
index 9a0079ab8ef8598edd30d78f4eee14b814b689dc..d0b518cbdd9bc33d8312a294026814c8d816084e 100644 (file)
--- a/style/105-outro.sass
+++ b/style/105-outro.sass
@@ -39,6 +39,20 @@
         position: relative
         +font-size(80)
         margin-right: 60px
+        flex-shrink: 0
+        &.nok
+            #progress-counter *
+                color: $nok-color
+            #anime-result svg *
+                fill: $nok-color
+                stroke: $nok-color
+        &.ok
+            #progress-counter *
+                color: $ok-color
+            #anime-result svg *
+                fill: $ok-color
+                stroke: $ok-color
+
         #progress-counter
             width: 100%
             height: 100%
@@ -48,10 +62,6 @@
             border-radius: 100px
             background: transparent
             +flex-config(center,false,false,center)
-            &.nok *
-                color: $nok-color
-            &.ok *
-                color: $ok-color
 
             svg
                 overflow: visible
@@ -188,7 +198,7 @@
                 left: 1px
                 right: 1px
 
-    #anime-ok
+    #anime-result
         transform: scale(1.7)
 
 .m
@@ -286,5 +296,5 @@
             &-mobile
                 +flex-config(center)
 
-        #anime-ok
+        #anime-result
             transform: scale(2)

diff --git a/views/screens/outro.blade.php b/views/screens/outro.blade.php
index 4101bde8cae3056deb19b1b6982d706be21421bd..225bab290a48632fa08e1eb96eb0a2df460e5da3 100644 (file)
--- a/views/screens/outro.blade.php
+++ b/views/screens/outro.blade.php
@@ -3,7 +3,7 @@
     <div class="screen score" id="score">
         <div class="score-content">
             <div class="score-content-wrapper">
-                <div class="score-counter">
+                <div id="container-score" class="score-counter">
                     <div id="progress-counter">
                         <span class="score-text" id="score-counter">0</span>
                         <span class="score-text">/</span>
@@ -30,13 +30,13 @@
                             <circle id="progress-circle" class="progress-circle" cx="74" cy="74" r="70" stroke="currentColor"/>
                         </svg>
                     </div>
-                    <div id="anime-ok">
+                    <div id="anime-result">
                     </div>
                 </div>
                 <div class="score-text">
-                    <h1>{{$__('Congratulation!')}}</h1>
+                    <h1></h1>
                     <div class="subtitle">
-                        <p class="word">{!! $__('You have completed the quiz with :score correct answers out of :total',['score'=>"<span id='score-text'></span>",'total'=>'<span id="maxScore-text"></span>']) !!}</p>
+                        <p class="word"></p>
                     </div>
                     @if($data->restart_button)
                         <div class="restart-sentence-mobile">{{$__('Want to improve your score?')}}</div>

diff --git a/views/screens/question_match.blade.php b/views/screens/question_match.blade.php
index c90f07498a4b9514b8d023834ff7e56e7f26e17d..b04a69efdbd5f041862c83f39e0db1dd47125de0 100644 (file)
--- a/views/screens/question_match.blade.php
+++ b/views/screens/question_match.blade.php
@@ -32,7 +32,7 @@
 
         <div class="swiper-container bottom-slider">
             <div class="swiper-wrapper">
-                @foreach($propositions as $prop)
+                @foreach($propositions as $key => $prop)
                     <div class="swiper-slide not-visible" data-prop="{{$prop['n']}}">
                         {{ $prop['p'] }}
                     </div>