wip #6182 @1:00 question drag and drop

diff --git a/js/quiz.accessibility.js b/js/quiz.accessibility.js
index bf3459686c758a1788c34c36aa81fc75449fee73..852ac5723dc86aee8067d9adee992d6afb7942d0 100644 (file)
--- a/js/quiz.accessibility.js
+++ b/js/quiz.accessibility.js
@@ -8,11 +8,11 @@ QuizAccessibility.prototype = {
     initShortcuts: function () {
         let $this = this;
         $(document).on('keyup', function (e) {
-
             let key = e.key.toLocaleUpperCase();
             if (key === ' ') {
                 key = 'Space';
             }
+
             $('[aria-keyshortcuts="' + key + '"]').each(function () {
                 if ($this.quiz.utils.isEnabled($(this))) {
                     console.log('click ', $(this));

diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js
index 22c49d283585a4c5a8f5455bd6560ff2044a151f..ad313e81f06051602567437967a71280dd2e443a 100644 (file)
--- a/js/quiz.draganddrop.js
+++ b/js/quiz.draganddrop.js
@@ -22,6 +22,7 @@ QuizDragAndDrop.prototype = {
     },
 
     start: function() {
+        const $this = this
         this.activeScreen = this.quiz.screens.getActiveScreen()
         this.list = this.activeScreen.find(".list")
         this.listHtml = this.list.html()
@@ -33,6 +34,25 @@ QuizDragAndDrop.prototype = {
         this.offsetLeftItemDragged = 0
         this.offsetRightItemDragged = 0
 
+        $(document).on("click", ".move-card", function () {
+            let move = $(this).attr("aria-keyshortcuts"),
+                target = $this.activeScreen.find(".list-item:first-child"),
+                zone = false;
+
+            if(move === "ARROWLEFT") {
+                zone = $this.zone1
+            }else {
+                zone = $this.zone2
+            }
+
+            target.addClass("isValidated").next().addClass("isNext")
+            $this.slapping(zone,target)
+
+            if($this.activeScreen.find(".list-item").length === 0) {
+                $this.toggleScreen(0,"none")
+            }
+        })
+
         this.retreiveAnswer()
         //let x = $(".list-item").offset().left
     },
@@ -96,12 +116,7 @@ QuizDragAndDrop.prototype = {
                             target.addClass("isValidated")
                         },
                         onComplete: function () {
-                            let text = target.text(),
-                                id = "answer-"+target.data("id")
-
-                            $(zone).find(".slot:not(.active)").eq(0).addClass("active").append("<span>"+text+"</span>").attr('data-order',target.data("id"))
-                            $this.saveAnswer(zone,id)
-                            target.remove()
+                            $this.slapping(zone,target)
                         }
                     })
                     .to(".list .overlay", {
@@ -170,6 +185,17 @@ QuizDragAndDrop.prototype = {
         $(".zone-1,.zone-2").removeClass("active")
     },
 
+    slapping: function(zone,target) {
+        const $this = this
+
+        let text = target.text(),
+            id = "answer-"+target.data("id")
+
+        $(zone).find(".slot:not(.active)").eq(0).addClass("active").append("<span>"+text+"</span>").attr('data-order',target.data("id"))
+        $this.saveAnswer(zone,id)
+        target.remove()
+    },
+
     toggleScreen: function(opacity,pointer) {
         gsap.to(".active-screen .screen", {
             opacity: opacity,

diff --git a/views/screens/question_draganddrop.blade.php b/views/screens/question_draganddrop.blade.php
index 58e27ea360b3aade9ccbb08f33e393728ddab594..4c6aaee67cc239fa791c780cf2206d30247119b1 100644 (file)
--- a/views/screens/question_draganddrop.blade.php
+++ b/views/screens/question_draganddrop.blade.php
@@ -20,7 +20,7 @@
     <div class="screen question-draganddrop">
         <div class="controls left">
             <p>{{$__('Move left')}}</p>
-            <button class="access"><span data-icon="arrow"></span></button>
+            <button class="access move-card" aria-keyshortcuts="ARROWLEFT"><span data-icon="arrow"></span></button>
         </div>
         <ul class="list">
             @foreach($question['answers'] as $key => $answer)
@@ -32,7 +32,7 @@
         </ul>
         <div class="controls right">
             <p>{{$__('Move right')}}</p>
-            <button class="access"><span data-icon="arrow"></span></button>
+            <button class="access move-card" aria-keyshortcuts="ARROWRIGHT"><span data-icon="arrow"></span></button>
         </div>
     </div>
     <div class="screen-image zone-2">