From 48d15e413afcd35c189eb600f196c7e8b5e4b791 Mon Sep 17 00:00:00 2001
From: soufiane <soufiane@cubedesigners.com>
Date: Fri, 12 Jan 2024 14:09:45 +0100
Subject: [PATCH] =?utf8?q?wait=20#6590=20correctif=20d=C3=A9grad=C3=A9=20p?=
 =?utf8?q?rogressif?=
MIME-Version: 1.0
Content-Type: text/plain; charset=utf8
Content-Transfer-Encoding: 8bit

---
 js/quiz.draganddrop.js              | 13 ++++++++++---
 style/105-outro.sass                | 16 ++++++++++------
 style/106-question-draganddrop.sass |  6 ++++--
 views/screens/outro.blade.php       |  5 ++++-
 4 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js
index 025a6a4..8af9ddd 100644
--- a/js/quiz.draganddrop.js
+++ b/js/quiz.draganddrop.js
@@ -140,7 +140,7 @@ QuizDragAndDrop.prototype = {
                 })
 
                 //
-                $this.setOpacityZone(this.target,direction)
+                //$this.setOpacityZone(this.target,direction)
 
                 //set rotation on desktop
                 if (!$this.quiz.resize.isMobile()) {
@@ -161,11 +161,15 @@ QuizDragAndDrop.prototype = {
                 if (zone) {
                     $this.sendCurrentAnswerToArea(zone, $(this.target).data("id"));
                 }
+
+                //
+                $(".zone-content").removeClass("active")
             },
             onRelease: function () {
                 //
                 $(".zone-1,.zone-2").addClass("notDrag")
 
+
                 //
                 document.documentElement.style.setProperty('--opacity-zone-1', '0');
                 document.documentElement.style.setProperty('--opacity-zone-2', '0');
@@ -262,18 +266,21 @@ QuizDragAndDrop.prototype = {
         let value = 0;
         let zone = '';
 
-        if (direction.includes("left") || direction.includes("up")) {
+        if (direction.includes("left")) {
             var rect = $this.zone1.get(0).getBoundingClientRect()
             value = direction === "up" ? 100 - ( (rectSelection.top - rect.bottom) / (listRect.top - rect.bottom) ) * 100 :
                 100 - ( (rectSelection.left - rect.right) / (listRect.left - rect.right) ) * 100
             zone = "--opacity-zone-1"
-        } else {
+        } else if (direction.includes("right")) {
             var rect = $this.zone2.get(0).getBoundingClientRect()
             value = direction === "down" ? 100 - ( (rectSelection.bottom - rect.top) / (listRect.bottom - rect.top) ) * 100 :
                 100 - ( (rectSelection.right - rect.left) / (listRect.right - rect.left) ) * 100
             zone = "--opacity-zone-2"
         }
+        console.log("direction",direction)
+        console.log("zone",zone)
         value = Math.max(0, Math.min(value, 100)) / 100;
+        console.log("value",value)
         document.documentElement.style.setProperty(zone, value);
     },
 
diff --git a/style/105-outro.sass b/style/105-outro.sass
index ce881c9..5691e79 100644
--- a/style/105-outro.sass
+++ b/style/105-outro.sass
@@ -39,10 +39,10 @@
             +font-size(16)
 
     &-content-wrapper
-        +flex-config(false, false, false, center)
+        +flex-config(false, false, column, center)
         position: relative
         top: var(--space-21-66)
-        margin-left: 75px
+        //margin-left: 75px
 
         &.neutral
             .score-text
@@ -53,12 +53,12 @@
 
     &-counter
         height: 0
-        padding-bottom: 31%
-        width: 31%
+        padding-bottom: 43%
+        width: 43%
         max-width: 210px
         position: relative
         +font-size(80)
-        margin-right: 60px
+        //margin-right: 60px
         flex-shrink: 0
 
         &.large-nbr
@@ -112,8 +112,12 @@
         .score-text
             transform: scale(0)
 
+    &-text
+        text-align: center
+        margin-top: 22px
+
     &-answers-review_container
-        width: 36.11111%
+        width: 61.11111%
 
     &-answers-review
         height: 100%
diff --git a/style/106-question-draganddrop.sass b/style/106-question-draganddrop.sass
index 9d45066..123a743 100644
--- a/style/106-question-draganddrop.sass
+++ b/style/106-question-draganddrop.sass
@@ -76,16 +76,18 @@
                 content: ""
                 left: 0
                 width: 200%
-                height: 200%
+                height: 150%
                 position: absolute
                 top: 50%
-                background: radial-gradient($accent-color 10%, transparent 72%, transparent)
+                background: radial-gradient($accent-color -30%, transparent 72%, transparent)
                 transform: translate(-50%,-50%)
                 transition: opacity .3s
 
             &.active
                 .card-holder
                     +opacity(.2, background-color, $texts-color)
+                &:before
+                    opacity: 1
 
             .card-holder
                 overflow: hidden
diff --git a/views/screens/outro.blade.php b/views/screens/outro.blade.php
index b8b8962..ab3240b 100644
--- a/views/screens/outro.blade.php
+++ b/views/screens/outro.blade.php
@@ -75,7 +75,10 @@
                     <h2>{{$__('Answers review')}}
                         <span class="toggle-answers-review" id="close-answers" data-icon="wrong"></span>
                     </h2>
-                    <p class="subtitle">{{$__('Review the correct answers before you go')}}</p>
+                    <div class="">
+                        <p class="subtitle">{{$__('Review the correct answers before you go')}}</p>
+                        <button>{{$__('Show correct answers')}}</button>
+                    </div>
                     <ul id="answers-list"></ul>
                 </div>
             </div>
-- 
2.39.5