wait #6590 correctif dégradé progressif

diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js
index 025a6a4ba66540eeedf88fcdf1db7b2589ef0966..8af9ddd5a2ddd433dae48f5f225f920f208e3bc5 100644 (file)
--- 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 ce881c95bfddb7ab8123eb329265637ca93d02fe..5691e79d9892a8827f3e431ebdaa423e051fe0d5 100644 (file)
--- 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 9d45066ef84c087c32424a1978b066b74fc7adb4..123a7438261692f7def8ca4ee5dca560937fc593 100644 (file)
--- 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 b8b896277375910ba478e1efa9bf7fc96c19e7cd..ab3240b885a65644bab59678cabeed5972f70715 100644 (file)
--- 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>