From c796dd9a6ea6cbcf61e7b0793a54e4b03cb8c7a1 Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Tue, 16 Jan 2024 17:04:33 +0100
Subject: [PATCH] wait #6593 @6:00

---
 js/quiz.score.js              | 10 ++++++
 js/quiz.screen.outro.js       | 65 +++++++++++++++++++++--------------
 style/105-outro.sass          | 33 ++++++++++++++----
 views/screens/outro.blade.php |  5 +--
 4 files changed, 76 insertions(+), 37 deletions(-)

diff --git a/js/quiz.score.js b/js/quiz.score.js
index e115c88..b955738 100644
--- a/js/quiz.score.js
+++ b/js/quiz.score.js
@@ -55,6 +55,7 @@ QuizScore.prototype = {
             ok = 'not answered';
         } else {
             let $this = this;
+
             if (question.type === 'multiple') {
                 // Le score de la question
                 min_score = this.getMinScore(question);
@@ -99,6 +100,12 @@ QuizScore.prototype = {
                     const answer = question.answers[answerIndex];
                     console.log("answer.drop_area", answer.drop_area, "userAnswers[answerIndex]", userAnswers[answerIndex])
                     this_score += ((answer.drop_area === userAnswers[answerIndex]) ? answer.score : 0);
+
+                    if(answer.drop_area !== userAnswers[answerIndex]) {
+                        answersStatus[answerIndex] = 'nok';
+                    }else {
+                        answersStatus[answerIndex] = 'ok'
+                    }
                 }
                 ok = this_score >= min_score ? 'ok' : 'nok';
 
@@ -108,7 +115,10 @@ QuizScore.prototype = {
                 this_score = 0;
                 for (let k in userAnswers) {
                     if (parseInt(k) === parseInt(userAnswers[k])) {
+                        answersStatus[k] = 'ok'
                         this_score = userAnswers[k].score
+                    } else {
+                        answersStatus[k] = 'nok'
                     }
                 }
                 ok = this_score >= min_score ? 'ok' : 'nok';
diff --git a/js/quiz.screen.outro.js b/js/quiz.screen.outro.js
index 2935785..cf671be 100644
--- a/js/quiz.screen.outro.js
+++ b/js/quiz.screen.outro.js
@@ -26,7 +26,7 @@ QuizScreenOutro.prototype = {
             let quiz = $("#quiz").get(0)
             let x = (($(this).offset().left + $(this).width()) - quiz.getBoundingClientRect().x),
                 y = (($(this).offset().top - $(this).height()) - quiz.getBoundingClientRect().y) - $(this).height()
-            let content = $(this).html()
+            let content = $(this).find(".content").html()
 
             popup.html(content).css({
                 left: x,
@@ -131,8 +131,10 @@ QuizScreenOutro.prototype = {
             content = neutral;
         } else if (quiz.score.isPassed() === false) {
             content = nok;
+            $(".score-answers-review .subtitle").text(this.quiz.l10n.__('Below are all your answers, the red crosses mark the questions to revisit, try again, and gain a digital badge'))
         } else {
             content = ok;
+            $(".score-answers-review .subtitle").text(this.quiz.l10n.__('Below are the correct answers. Red crosses mark the questions to revisit for improvement.'))
         }
 
         this.displayResultContent(content);
@@ -199,34 +201,32 @@ QuizScreenOutro.prototype = {
         }
         $(".score-answers-review_container").show();
         let reviewList = this.quiz.question.getAll();
-        let reviewList2 = this.quiz.question.getAll();
         let status = this.quiz.score.questionStatus
         let answersUser = this.quiz.score.answers;
         let wrongIcon = getSpriteIcon("quiz-wrong");
 
-        console.log("reviewList2",reviewList2)
-
         reviewList = reviewList.map((c, i) => {
             return {
                 'question': c['question'],
                 'type': c['type'],
                 'correctAnswers': c['answers'].filter((c__,k) => {
-                    let answers = answersUser[i][k]
-                    if(c['type'] === "match") {
-                        answers = c['answers'][answersUser[i][k]]
-                    }else if(c['type'] === "multiple") {
-                        console.log("index k",k,"index answersUser",answersUser[i][k])
-                        answers = answersUser[i].includes(k)
+                    let status_ = c['answers']
+                    if(c['type'] === "multiple") {
+                        status_ = c['answers'][k].correct === 1;
                     }
-                    return answers
+                    if(!quiz.score.isPassed()) {
+                        status_ = status[i].answers[k] !== "missed" && status[i].answers[k] !== "neutral"
+                    }
+                    return status_
                 }).map((c_,k_) => {
-                    if(c['type'] === "draganddrop") {
+                    c_ = { ...c_ }; //shallow copy
+                    if(c['type'] === "draganddrop" && !quiz.score.isPassed()) {
                         c_['drop_area'] = answersUser[i][k_]
                     }
                     if(c['type'] === "match") {
-                        c_ = { ...c_ }; //shallow copy
                         c_['proposition'] = c['answers'][answersUser[i][k_]]['proposition']
                     }
+                    c_['status'] = status[i].answers[k_]
                     return c_
                 }),
                 'status': status[i].ok,
@@ -238,9 +238,9 @@ QuizScreenOutro.prototype = {
         for (var i in reviewList) {
             i = parseInt(i);
             let review = reviewList[i];
-            let htmlSpan = null
-
-            console.log("result",review)
+            let htmlSpan = ""
+            let statusByAnswer = status[i]
+            let nokClass = ""
 
             let correctAnswers = review.correctAnswers.length > 0 ? review.correctAnswers : review.data.answers
 
@@ -251,34 +251,43 @@ QuizScreenOutro.prototype = {
                 titleType = ' - ' + this.quiz.l10n.__('Match the answers')
             }
             html += '<li class="item ' + review.status + '">';
-            html += '<p class="position">' + this.quiz.l10n.__('Question :index', {index: i + 1}) + titleType + '</p>';
+            html += '<p class="position title-section">' + this.quiz.l10n.__('Question :index', {index: i + 1}) + titleType + '</p>';
 
             if (review.type === "multiple") {
-                html += '<p class="question">' + review.question + '</p>';
+                html += '<p class="question title-block">' + review.question + '</p>';
                 html += '<div class="multiple-wrapper">'
                 for (var j in correctAnswers) {
-                    if(!parseInt(correctAnswers[j].correct)) {
+                    if(correctAnswers[j].status === "nok" || correctAnswers[j].status === "missed") {
                         htmlSpan = `<span class="access nok">${wrongIcon}</span>`
+                        nokClass = "nok"
                     }
                     html += '<div class="card-holder">';
-                    html += '<p class="answer slot active">' + correctAnswers[j].answer + htmlSpan +'</p>';
+                    html += '<p class="answer slot active '+nokClass+'">' + correctAnswers[j].answer+htmlSpan+'</p>';
                     html += '</div>';
                 }
                 html += '</div>'
             }
 
             if (review.type === "draganddrop") {
+                nokClass = ""
                 html += '<div class="area-title">'
-                html += '<p>' + review.data.area_1.title + '</p><p>' + review.data.area_2.title + '</p>'
+                html += '<p class="title-block">' + review.data.area_1.title + '</p><p class="title-block">' + review.data.area_2.title + '</p>'
                 html += '</div>'
                 html += '<div class="area-container">'
+
                 for (let i = 1; i < 3; i++) {
                     let area = i === 1 ? review.data.area_1 : review.data.area_2
                     html += '<div class="area area"' + i + '>'
                     html += '<ul class="area-list card-holder">'
                     for (let k in correctAnswers) {
                         if (correctAnswers[k].drop_area === i) {
-                            html += '<li class="area-item slot active"><p>' + correctAnswers[k].answer + '</p></li>'
+                            htmlSpan = ""
+                            if(correctAnswers[k].status === "nok") {
+                                htmlSpan = `<span class="access nok">${wrongIcon}</span>`
+                            }
+                            html += '<li class="area-item slot active '+correctAnswers[k].status+'"><p class="content">' + correctAnswers[k].answer+'</p>'
+                            html += htmlSpan
+                            html += '</li>'
                         }
                     }
                     html += '</ul>'
@@ -290,13 +299,17 @@ QuizScreenOutro.prototype = {
             if (review.type === "match") {
                 html += '<div class="match-container">'
                 html += '<div class="match-title">'
-                html += '<p>' + this.quiz.l10n.__('Question') + '</p><p>' + this.quiz.l10n.__('Answers') + '</p>'
+                html += '<p class="title-block">' + this.quiz.l10n.__('Question') + '</p><p class="title-block">' + this.quiz.l10n.__('Answers') + '</p>'
                 html += '</div>'
                 for (let k in correctAnswers) {
+                    htmlSpan = ""
+                    if(statusByAnswer.answers[k] === "nok") {
+                        htmlSpan = `<span class="access nok">${wrongIcon}</span>`
+                    }
                     html += '<div class="match-wrapper card-holder">'
-                    html += '<div class="match-item slot active"><p>' + correctAnswers[k].answer + '</p></div>'
-                    html += '<div class="separate"></div>'
-                    html += '<div class="match-item slot active"><p>' + correctAnswers[k].proposition + '</p></div>'
+                    html += '<div class="match-item slot active '+statusByAnswer.answers[k]+'"><p>' + correctAnswers[k].answer + '</p></div>'
+                    html += htmlSpan !== "" ? htmlSpan : '<div class="separate"></div>'
+                    html += '<div class="match-item slot active '+statusByAnswer.answers[k]+'"><p>' + correctAnswers[k].proposition + '</p></div>'
                     html += '</div>'
                 }
                 html += '</div>'
diff --git a/style/105-outro.sass b/style/105-outro.sass
index c6ffadd..5c7c8b6 100644
--- a/style/105-outro.sass
+++ b/style/105-outro.sass
@@ -163,6 +163,12 @@
             *
                 +font-size(14)
 
+            .title-section
+                +font-size(16)
+
+            .title-block
+                +font-size(20)
+
             &:after
                 content: ""
                 width: 12px
@@ -194,6 +200,12 @@
             .answer
                 +opacity(.8, color, $texts-color)
 
+        .slot
+            border-color: transparent
+
+        .nok
+            border-color: $nok-color
+
     .toggle-answers-review
         display: none
 
@@ -253,13 +265,14 @@
         gap: 8px
 
     .match-wrapper
-        display: flex
-        align-items: center
+        +flex-config(false,false,row,center)
         flex-wrap: wrap
-        flex-direction: row
+        .access
+            margin: 0
 
     .multiple-wrapper
         +flex-config(false,false,column)
+        gap: 8px
         .card-holder
             padding: 0
             background: transparent
@@ -285,15 +298,21 @@
         gap: 8px
         height: 100%
 
-    .area-item:hover
-        transition: all .3s
-        background-color: $neutral-color !important
-        cursor: pointer
+    .area-item
+        +flex-config(space-between)
+        &:hover
+            transition: all .3s
+            background-color: $neutral-color !important
+            cursor: pointer
 
     .match-item
         flex: 1
         border: 0
 
+    .match-title
+        .title-block:last-child
+            margin-left: 23px
+
     .separate
         width: 32px
         height: 2px
diff --git a/views/screens/outro.blade.php b/views/screens/outro.blade.php
index ab3240b..f6b4966 100644
--- a/views/screens/outro.blade.php
+++ b/views/screens/outro.blade.php
@@ -75,10 +75,7 @@
                     <h2>{{$__('Answers review')}}
                         <span class="toggle-answers-review" id="close-answers" data-icon="wrong"></span>
                     </h2>
-                    <div class="">
-                        <p class="subtitle">{{$__('Review the correct answers before you go')}}</p>
-                        <button>{{$__('Show correct answers')}}</button>
-                    </div>
+                    <p class="subtitle"></p>
                     <ul id="answers-list"></ul>
                 </div>
             </div>
-- 
2.39.5