From bbe060a30ae6e77ce50a8571f7eb34502090e933 Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Mon, 15 Jan 2024 18:36:24 +0100
Subject: [PATCH] wip #6593 @7:00

---
 js/quiz.screen.outro.js | 37 +++++++++++++++++++++++++++++++++----
 style/105-outro.sass    | 39 +++++++++++++++++++++++++++++++++------
 2 files changed, 66 insertions(+), 10 deletions(-)

diff --git a/js/quiz.screen.outro.js b/js/quiz.screen.outro.js
index eb48c8e..2935785 100644
--- a/js/quiz.screen.outro.js
+++ b/js/quiz.screen.outro.js
@@ -199,14 +199,35 @@ 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) => {
-                    return c['correct'] === 1
+                '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)
+                    }
+                    return answers
+                }).map((c_,k_) => {
+                    if(c['type'] === "draganddrop") {
+                        c_['drop_area'] = answersUser[i][k_]
+                    }
+                    if(c['type'] === "match") {
+                        c_ = { ...c_ }; //shallow copy
+                        c_['proposition'] = c['answers'][answersUser[i][k_]]['proposition']
+                    }
+                    return c_
                 }),
                 'status': status[i].ok,
                 'data': c,
@@ -217,9 +238,11 @@ QuizScreenOutro.prototype = {
         for (var i in reviewList) {
             i = parseInt(i);
             let review = reviewList[i];
+            let htmlSpan = null
 
-            let correctAnswers = review.correctAnswers.length > 0 ? review.correctAnswers : review.data.answers
+            console.log("result",review)
 
+            let correctAnswers = review.correctAnswers.length > 0 ? review.correctAnswers : review.data.answers
 
             let titleType = '';
             if (review.type === "draganddrop") {
@@ -232,11 +255,16 @@ QuizScreenOutro.prototype = {
 
             if (review.type === "multiple") {
                 html += '<p class="question">' + review.question + '</p>';
+                html += '<div class="multiple-wrapper">'
                 for (var j in correctAnswers) {
+                    if(!parseInt(correctAnswers[j].correct)) {
+                        htmlSpan = `<span class="access nok">${wrongIcon}</span>`
+                    }
                     html += '<div class="card-holder">';
-                    html += '<p class="answer slot active">' + correctAnswers[j].answer + '</p>';
+                    html += '<p class="answer slot active">' + correctAnswers[j].answer + htmlSpan +'</p>';
                     html += '</div>';
                 }
+                html += '</div>'
             }
 
             if (review.type === "draganddrop") {
@@ -267,6 +295,7 @@ QuizScreenOutro.prototype = {
                 for (let k in correctAnswers) {
                     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>'
                 }
diff --git a/style/105-outro.sass b/style/105-outro.sass
index 5691e79..c6ffadd 100644
--- a/style/105-outro.sass
+++ b/style/105-outro.sass
@@ -44,6 +44,10 @@
         top: var(--space-21-66)
         //margin-left: 75px
 
+        & > .score-text
+            text-align: center
+            margin-top: 22px
+
         &.neutral
             .score-text
                 width: 100%
@@ -112,10 +116,6 @@
         .score-text
             transform: scale(0)
 
-    &-text
-        text-align: center
-        margin-top: 22px
-
     &-answers-review_container
         width: 61.11111%
 
@@ -240,16 +240,33 @@
     #anime-result
         transform: scale(1.7)
 
-    .area-container,
-    .match-wrapper
+    .area-container
         display: grid
         grid-template-columns: 2fr 2fr
+
+    .area-container,
+    .match-wrapper
         gap: 8px
 
     .match-container
         display: grid
         gap: 8px
 
+    .match-wrapper
+        display: flex
+        align-items: center
+        flex-wrap: wrap
+        flex-direction: row
+
+    .multiple-wrapper
+        +flex-config(false,false,column)
+        .card-holder
+            padding: 0
+            background: transparent
+        .slot
+            +flex-config(space-between)
+            background-color: rgba($texts-color,.08) !important
+
     .match-title,
     .area-title
         display: grid
@@ -273,6 +290,16 @@
         background-color: $neutral-color !important
         cursor: pointer
 
+    .match-item
+        flex: 1
+        border: 0
+
+    .separate
+        width: 32px
+        height: 2px
+        border-radius: 5px
+        +opacity(.24, background-color, $texts-color)
+
     #resume
         width: 100%
         max-width: 300px
-- 
2.39.5