wip #6182 @2:30 question drag and drop

diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index 2747d676e438b6f41002eee8b191092bb5731fea..39c15e67ad326b7215c3e65829b5045d3933430c 100644 (file)
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -1,4 +1,6 @@
 import gsap from "gsap";
+import InertiaPlugin from "gsap/InertiaPlugin.js";
+import Draggable from "gsap/Draggable.js";
 
 import QuizScreenIntro from './quiz.screen.intro';
 import QuizScreenOutro from "./quiz.screen.outro";
@@ -58,6 +60,21 @@ QuizScreens.prototype = {
                 $this.nextQuestion();
             }
         });
+
+        gsap.registerPlugin(InertiaPlugin);
+        gsap.registerPlugin(Draggable);
+
+        let x = $(".list-item").offset().left
+
+        Draggable.create(".list-item", {
+            type: "x,y",
+            edgeResistance: 0.2,
+            inertia: true,
+            bounds: ".list",
+            onMove: function() {
+                console.log('ok')
+            }
+        });
     },
 
     instantReview: function (review) {

diff --git a/style/106-question-draganddrop.sass b/style/106-question-draganddrop.sass
index 9d599e9f7d45f8667491d4c85584c1a833aa71de..d97ab6a1fcdcff6c72283e3041a4970dd6a7f701 100644 (file)
--- a/style/106-question-draganddrop.sass
+++ b/style/106-question-draganddrop.sass
@@ -51,25 +51,25 @@
                     border: 2px solid $texts-color
                     padding: 20px
                 &:nth-child(2)
-                    opacity: .64
+                    opacity: .64 !important
                     +opacity(.8,background-color,$neutral-color)
                     transform: scale(.9)
                     z-index: 3
                     top: 32px
                 &:nth-child(3)
-                    opacity: .4
+                    opacity: .4 !important
                     +opacity(.8,background-color,$neutral-color)
                     transform: scale(.81)
                     z-index: 2
                     top: 61px
                 &:nth-child(4)
-                    opacity: .16
+                    opacity: .16 !important
                     +opacity(.8,background-color,$neutral-color)
                     transform: scale(0.72)
                     z-index: 1
                     top: 91px
                 &:not(:nth-child(-n+4)) // on cache les items à partir du 5ème
-                    opacity: 0
+                    opacity: 0 !important
                     visibility: hidden
 
 

diff --git a/views/screens/question_draganddrop.blade.php b/views/screens/question_draganddrop.blade.php
index 7d1645f0c9a00554fa80d27ce7ad1ee5706010fd..a96019753341a233ddc51f1092f36de9e5cc66eb 100644 (file)
--- a/views/screens/question_draganddrop.blade.php
+++ b/views/screens/question_draganddrop.blade.php
@@ -7,7 +7,7 @@
                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p>
             </div>
             <form>
-                @foreach($data['answers'] as $key => $answer)
+                @foreach($question['answers'] as $key => $answer)
                     <div class="slot">
                     </div>
                 @endforeach
@@ -21,7 +21,7 @@
             <button class="access"><span data-icon="arrow"></span></button>
         </div>
         <ul class="list">
-            @foreach($data['answers'] as $key => $answer)
+            @foreach($question['answers'] as $key => $answer)
                 <li class="list-item">
                     {{$answer['answer']}}
                 </li>
@@ -40,7 +40,7 @@
                 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p>
             </div>
             <form>
-                @foreach($data['answers'] as $key => $answer)
+                @foreach($question['answers'] as $key => $answer)
                     <div class="slot"></div>
                 @endforeach
             </form>