wip #6385 @5:00

diff --git a/js/quiz.screen.outro.js b/js/quiz.screen.outro.js
index f1d7342652725e1e6dd5bb3f51d00818f88c33b8..5e6b2f043aea53085951b1be0c00e264ce5d8c64 100644 (file)
--- a/js/quiz.screen.outro.js
+++ b/js/quiz.screen.outro.js
@@ -154,22 +154,69 @@ QuizScreenOutro.prototype = {
         reviewList = reviewList.map((c, i) => {
             return {
                 'question': c['question'],
-                'answers': c['answers'].filter((c) => {
+                'type': c['type'],
+                'correctAnswers': c['answers'].filter((c) => {
                     return c['correct'] === 1
                 }),
-                'status': status[i].ok
+                'status': status[i].ok,
+                'data': c,
             }
         })
 
         let html = '';
         for (var i in reviewList) {
             let review = reviewList[i];
+
+            let correctAnswers = review.correctAnswers.length > 0 ? review.correctAnswers : review.data.answers
+
+            console.log("review",review)
+            console.log("correctAnswers",correctAnswers)
+
+            let titleType = '';
+            if(review.type === "draganddrop") {
+                titleType = ' - '+this.quiz.l10n.__('Drag and Drop')
+            } else if(review.type === "match") {
+                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}) + '</p>';
-            html += '<p class="question">' + review.question + '</p>';
-            for (var j in review.answers) {
-                html += '<p class="answer">' + review.answers[j].answer + '</p>';
+            html += '<p class="position">' + this.quiz.l10n.__('Question :index', {index: i + 1}) + titleType + '</p>';
+
+            if(review.type === "multiple") {
+                html += '<p class="question">' + review.question + '</p>';
+                for (var j in correctAnswers) {
+                    html += '<p class="answer">' + correctAnswers[j].answer + '</p>';
+                }
             }
+
+            if(review.type === "draganddrop") {
+                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 += '<p class="title">'+area.title+'</p>'
+                    html += '<ul class="area-list">'
+                    for (let k in correctAnswers) {
+                        if(correctAnswers[k].drop_area === i) {
+                            html += '<li class="area-item slot"><p>'+correctAnswers[k].answer+'</p></li>'
+                        }
+                    }
+                    html += '</ul>'
+                    html += '</div>'
+                }
+                html += '</div>'
+            }
+
+            if(review.type === "match") {
+                html += '<div class="match-container">'
+                for (let k in correctAnswers) {
+                    html += '<div class="match-wrapper">'
+                    html += '<div class="match-item slot"><p>'+correctAnswers[k].answer+'</p></div>'
+                    html += '<div class="match-item slot"><p>'+correctAnswers[k].proposition+'</p></div>'
+                    html += '</div>'
+                }
+                html += '</div>'
+            }
+
             html += '</li>';
         }
         $ul.html(html);

diff --git a/style/106-question-draganddrop.sass b/style/106-question-draganddrop.sass
index 0e5d75f304d43bb5498a03ad8887759e0a324c30..4584aff28bd34dd7de50f59d510a0840950fd2d4 100644 (file)
--- a/style/106-question-draganddrop.sass
+++ b/style/106-question-draganddrop.sass
@@ -36,7 +36,6 @@
             left: initial
             right: 0
 
-
             img
                 position: absolute
                 right: 0
@@ -311,3 +310,30 @@
 
                             &:not(:nth-child(-n+4))
                                 top: 86px
+
+
+
+.slot
+    width: 100%
+    height: 51px
+    transition: all .3s
+    +radius(8px)
+    padding: 7px 8px
+    font-size: 12px
+    margin-bottom: 8px
+
+    h4
+        font-size: 1.25em
+        font-weight: 600
+        max-height: 1.1em
+        overflow: hidden
+        text-align: left
+
+    p
+        font-size: 1em
+        font-weight: 400
+        max-height: 1em
+        overflow: hidden
+        text-align: left
+        white-space: pre-line
+        margin-top: 3px