From: soufiane <soufiane@cubedesigners.com>
Date: Thu, 12 Oct 2023 15:45:51 +0000 (+0200)
Subject: wait #6385 @4:00
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=4b215ea67029010d8243d6ebdbf0ecb418cfa4e7;p=fluidbook-toolbox-quiz.git

wait #6385 @4:00
---

diff --git a/js/quiz.screen.outro.js b/js/quiz.screen.outro.js
index 06b269d..77edd60 100644
--- a/js/quiz.screen.outro.js
+++ b/js/quiz.screen.outro.js
@@ -191,14 +191,16 @@ QuizScreenOutro.prototype = {
 
             if(review.type === "draganddrop") {
                 html += '<div class="area-container">'
+                html += '<div class="area-title">'
+                html += '<p>'+review.data.area_1.title+'</p><p>'+review.data.area_2.title+'</p>'
+                html += '</div>'
                 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">'
+                    html += '<ul class="area-list card-holder">'
                     for (let k in correctAnswers) {
                         if(correctAnswers[k].drop_area === i) {
-                            html += '<li class="area-item slot"><p>'+correctAnswers[k].answer+'</p></li>'
+                            html += '<li class="area-item slot active"><p>'+correctAnswers[k].answer+'</p></li>'
                         }
                     }
                     html += '</ul>'
@@ -209,10 +211,13 @@ 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 += '</div>'
                 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 class="match-wrapper card-holder">'
+                    html += '<div class="match-item slot active"><p>'+correctAnswers[k].answer+'</p></div>'
+                    html += '<div class="match-item slot active"><p>'+correctAnswers[k].proposition+'</p></div>'
                     html += '</div>'
                 }
                 html += '</div>'
diff --git a/style/105-outro.sass b/style/105-outro.sass
index 52d0e7e..bdc21fe 100644
--- a/style/105-outro.sass
+++ b/style/105-outro.sass
@@ -215,6 +215,29 @@
     #anime-result
         transform: scale(1.7)
 
+    .area-container,
+    .match-wrapper
+        display: grid
+        grid-template-columns: 2fr 2fr
+        gap: 8px
+
+    .match-container
+        display: grid
+        gap: 8px
+
+    .match-title
+        display: grid
+        grid-template-columns: 2fr 2fr
+        p
+            width: 50%
+
+    .area .title
+        margin-bottom: 4px
+
+    .area-list
+        display: grid
+        gap: 8px
+
 .m
     .score
         height: 600px
diff --git a/style/106-question-draganddrop.sass b/style/106-question-draganddrop.sass
index 8e7bffd..059fa12 100644
--- a/style/106-question-draganddrop.sass
+++ b/style/106-question-draganddrop.sass
@@ -60,11 +60,7 @@
 
 
             .card-holder
-                transition: background-color .2s ease
-                +opacity(.08, background-color, $texts-color)
-                +radius(16px)
                 min-height: 196px
-                padding: 8px
 
                 .m &
                     display: none
@@ -77,35 +73,6 @@
                     margin-bottom: 8px
 
         .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
-
-
-            &.active
-                background-color: rgba($opposite-texts-color, 0.24)
-                border: 1px solid rgba($texts-color, .24)
-
             span
                 display: -webkit-box
                 display: -moz-box
@@ -311,29 +278,38 @@
                             &: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
+.card-holder
+    transition: background-color .2s ease
+    +opacity(.08, background-color, $texts-color)
+    +radius(16px)
+    padding: 8px
+    display: grid
+    gap: 8px
+
+    .slot
+        width: 100%
+        height: 51px
+        transition: all .3s
+        +radius(8px)
+        padding: 7px 8px
+        font-size: 12px
+
+        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
+
+        &.active
+            background-color: rgba($opposite-texts-color, 0.24)
+            border: 1px solid rgba($texts-color, .24)