From: soufiane <soufiane@cubedesigners.com>
Date: Mon, 28 Aug 2023 16:18:29 +0000 (+0200)
Subject: wip #6182 @2:30 question drag and drop
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=c762697b08005cbb3a67e9b4a50d321264b61439;p=fluidbook-toolbox-quiz.git

wip #6182 @2:30 question drag and drop
---

diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index 2747d67..39c15e6 100644
--- 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 9d599e9..d97ab6a 100644
--- 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 7d1645f..a960197 100644
--- 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>