wip #6295 @2

diff --git a/js/quiz.draganddrop.js b/js/quiz.draganddrop.js
index b22e4f3f2eabf5e84483d86882ff4a812c9a247a..da9135400c6a43b9d7bbed6eec1b6ab313716755 100644 (file)
--- a/js/quiz.draganddrop.js
+++ b/js/quiz.draganddrop.js
@@ -16,12 +16,12 @@ function QuizDragAndDrop(quiz) {
 
 QuizDragAndDrop.prototype = {
 
-    init: function() {
+    init: function () {
         gsap.registerPlugin(InertiaPlugin);
         gsap.registerPlugin(Draggable);
     },
 
-    start: function() {
+    start: function () {
         const $this = this
         this.isMobile = this.quiz.resize.isMobile()
         this.activeScreen = this.quiz.screens.getActiveScreen()
@@ -40,31 +40,31 @@ QuizDragAndDrop.prototype = {
                 target = $this.activeScreen.find(".list-item:first-child"),
                 zone = false;
 
-            if(move === "ARROWLEFT") {
+            if (move === "ARROWLEFT") {
                 zone = $this.zone1
-            }else {
+            } else {
                 zone = $this.zone2
             }
 
             target.addClass("isValidated").next().addClass("isNext")
-            $this.slapping(zone,target)
+            $this.slapping(zone, target)
 
-            if($this.activeScreen.find(".list-item").length === 0) {
-                $this.toggleScreen(0,"none")
+            if ($this.activeScreen.find(".list-item").length === 0) {
+                $this.toggleScreen(0, "none")
             }
         })
 
         this.retreiveAnswer()
     },
 
-    createDraggable: function($this) {
+    createDraggable: function ($this) {
         Draggable.create($this.item, {
             type: $this.isMobile ? "y" : "x,y",
             edgeResistance: 0.2,
             inertia: false,
             bounds: "#quiz",
             onDragParams: [{}],
-            onDrag: function() {
+            onDrag: function () {
                 $(".zone-1,.zone-2").removeClass("notDrag")
                 $(this.target).addClass("isDragging").removeClass("isNext")
 
@@ -83,7 +83,7 @@ QuizDragAndDrop.prototype = {
                 })
 
                 //set rotation on desktop
-                if(!$this.isMobile) {
+                if (!$this.isMobile) {
                     $this.rotateItem(this, direction)
                 }
 
@@ -91,15 +91,15 @@ QuizDragAndDrop.prototype = {
                 $this.enterZone(zone)
 
                 // actions when leave zone
-                if(!zone) {
+                if (!zone) {
                     $this.leaveZone()
                 }
             },
-            onDragEnd: function() {
+            onDragEnd: function () {
                 //
                 let zone = $this.getZoneOverlap(this.target)
                 let slot = false
-                if(zone) {
+                if (zone) {
                     slot = $this.getSlotInformations(zone)
                 }
 
@@ -107,7 +107,7 @@ QuizDragAndDrop.prototype = {
                     heightTarget = $(this.target).height()
 
                 //
-                if(slot) {
+                if (slot) {
                     let rules = {
                         width: slot.w,
                         height: slot.h,
@@ -117,7 +117,7 @@ QuizDragAndDrop.prototype = {
                         padding: "7px 8px",
                         borderRadius: "8px",
                     }
-                    if($this.isMobile) {
+                    if ($this.isMobile) {
                         rules = {
                             scale: 0.8,
                             duration: .3,
@@ -126,31 +126,31 @@ QuizDragAndDrop.prototype = {
                     }
 
                     gsap.timeline()
-                    .to(this.target, {
-                        ...rules,
-                        onStart: function () {
-                            target.addClass("isValidated")
-                            gsap.set(target.next(), {opacity: 1})
-                        },
-                        onComplete: function () {
-                            $this.slapping(zone,target)
-                        }
-                    })
-                    .to(".list .overlay", {
-                        y: -heightTarget,
-                        opacity: 0,
-                        onStart: function () {
-                            $(".list-item.isValidated").next().addClass("isNext")
-                        }
-                    }, "<")
-                    .to(".list .overlay", {
-                        y: 0,
-                        opacity: 1,
-                        duration: 0
-                    }, "+=0.3")
+                        .to(this.target, {
+                            ...rules,
+                            onStart: function () {
+                                target.addClass("isValidated")
+                                gsap.set(target.next(), {opacity: 1})
+                            },
+                            onComplete: function () {
+                                $this.slapping(zone, target)
+                            }
+                        })
+                        .to(".list .overlay", {
+                            y: -heightTarget,
+                            opacity: 0,
+                            onStart: function () {
+                                $(".list-item.isValidated").next().addClass("isNext")
+                            }
+                        }, "<")
+                        .to(".list .overlay", {
+                            y: 0,
+                            opacity: 1,
+                            duration: 0
+                        }, "+=0.3")
                 }
             },
-            onRelease: function() {
+            onRelease: function () {
                 //
                 $(".zone-1,.zone-2").addClass("notDrag")
 
@@ -158,7 +158,7 @@ QuizDragAndDrop.prototype = {
                 $this.leaveZone()
 
                 //
-                if(!$this.getZoneOverlap(this.target)) {
+                if (!$this.getZoneOverlap(this.target)) {
                     gsap.to(this.target, {
                         x: 0,
                         y: 0,
@@ -166,8 +166,8 @@ QuizDragAndDrop.prototype = {
                 }
 
                 //
-                if($this.activeScreen.find(".list-item:not(.isDragging)").length === 0) {
-                    $this.toggleScreen(0,"none")
+                if ($this.activeScreen.find(".list-item:not(.isDragging)").length === 0) {
+                    $this.toggleScreen(0, "none")
                 }
 
                 $(this.target).removeClass("isDragging")
@@ -180,15 +180,15 @@ QuizDragAndDrop.prototype = {
         });
     },
 
-    rotateItem: function($this, direction) {
+    rotateItem: function ($this, direction) {
         let rotation = 0;
-        if(direction.includes("right")) {
+        if (direction.includes("right")) {
             rotation = 5
         } else {
             rotation = -5
         }
 
-        if($this.endX === 0) {
+        if ($this.endX === 0) {
             rotation = 0
         }
 
@@ -197,71 +197,72 @@ QuizDragAndDrop.prototype = {
         })
     },
 
-    enterZone: function(zone) {
+    enterZone: function (zone) {
         $(zone).addClass("active")
     },
 
-    leaveZone: function() {
+    leaveZone: function () {
         $(".zone-1,.zone-2").removeClass("active").removeClass("isDragging")
     },
 
-    slapping: function(zone,target) {
+    slapping: function (zone, target) {
         const $this = this
 
-        let text = target.text(),
-            id = "answer-"+target.data("id")
+        let title = target.find('h4').text();
+        let text = target.find('p').text();
+        let id = "answer-" + target.data("id");
 
-        if(!this.isMobile) {
-            $(zone).find(".slot:not(.active)").eq(0).addClass("active").append("<span>"+text+"</span>").attr('data-order',target.data("id"))
+        if (!this.isMobile) {
+            $(zone).find(".slot:not(.active)").eq(0).addClass("active").append("<h4>" + title + "</h4><p>"+text+"</p>").attr('data-order', target.data("id"))
         }
 
-        $this.saveAnswer(zone,id)
+        $this.saveAnswer(zone, id)
         target.remove()
     },
 
-    toggleScreen: function(opacity,pointer) {
+    toggleScreen: function (opacity, pointer) {
         gsap.to(".active-screen .screen", {
             opacity: opacity,
             pointerEvents: pointer
         })
     },
 
-    getZoneOverlap: function(target) {
+    getZoneOverlap: function (target) {
         let zone = false
         var rectSelection = target.getBoundingClientRect();
 
         // Iterate over all LI elements.
-        [].forEach.call(document.querySelectorAll(".zone-content"), function(div) {
+        [].forEach.call(document.querySelectorAll(".zone-content"), function (div) {
             var rect = div.getBoundingClientRect();
 
-            if(rect.bottom > rectSelection.top
+            if (rect.bottom > rectSelection.top
                 && rect.right > rectSelection.left
                 && rect.top < rectSelection.bottom
                 && rect.left < rectSelection.right) {
                 div.classList.add("active")
-            }else {
+            } else {
                 div.classList.remove("active")
             }
         });
 
-        if($(".zone-content.active").length > 0) {
-            zone = "."+$(".zone-content.active").parent().data("zone")
+        if ($(".zone-content.active").length > 0) {
+            zone = "." + $(".zone-content.active").parent().data("zone")
         }
 
         return zone
     },
 
-    getSlotInformations: function(zone) {
+    getSlotInformations: function (zone) {
         let x = ($(zone).find(".slot:not(.active)").offset().left - this.list.offset().left),
             y = ($(zone).find(".slot:not(.active)").offset().top - this.list.offset().top),
             w = $(zone).find(".slot").innerWidth(),
             h = $(zone).find(".slot").innerHeight(),
             el = $(zone).find(".slot")
 
-        return {"x" : x, "y" : y, "w" : w, "h": h, "el": el}
+        return {"x": x, "y": y, "w": w, "h": h, "el": el}
     },
 
-    retreiveAnswer: function() {
+    retreiveAnswer: function () {
         //
         const htmlList = this.quiz.draganddrop.listHtml
         const htmlZone1 = this.quiz.draganddrop.htmlZone1
@@ -278,8 +279,8 @@ QuizDragAndDrop.prototype = {
         this.quiz.animations.setAnimItemDragAndDrop(tl)
     },
 
-    saveAnswer: function(zone,id) {
-        $(zone).find("input[id="+id+"]").prop("checked", true)
+    saveAnswer: function (zone, id) {
+        $(zone).find("input[id=" + id + "]").prop("checked", true)
         this.quiz.screens.updateUserAnswers();
     }
 }

diff --git a/js/quiz.resize.js b/js/quiz.resize.js
index 7a42146c32d2a1839e85c36fc4c5acd3fad1ad04..04b1fdbfb87310f9580c96c44e98a453b858063d 100644 (file)
--- a/js/quiz.resize.js
+++ b/js/quiz.resize.js
@@ -20,12 +20,21 @@ QuizResize.prototype = {
         //
         this.quiz.screens.intro.resize(this.ww, this.hh);
         //
-        if (this.ww <= 992) {
+        if (this.isMobile()) {
             $(".btn.reset .text").html(iconReset)
         } else {
             $(".btn.reset .text").html(textReset)
         }
 
+
+    },
+
+    updateViewport: function () {
+        if (this.isMobile()) {
+            $('meta[name="viewport"]').attr('content', 'width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no');
+        } else {
+            $('meta[name="viewport"]').attr('content', 'width=390, user-scalable=no, initial-scale=1.0, shrink-to-fit=no');
+        }
     },
 
     isMobile: function () {

diff --git a/style/100-global.sass b/style/100-global.sass
index c8df53144942345466d9aa7cbcbe114801b6ed41..e51fc234a1cd3d079ac43cc0b9e620be3590dc91 100644 (file)
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -9,7 +9,7 @@ body
     height: 20px
 
 .container
-    +flex-config(center,false,false,center)
+    +flex-config(center, false, false, center)
     min-height: 100vh
 
 #quiz
@@ -20,6 +20,13 @@ body
     +padding-container()
     position: relative
     overflow: hidden
+    border-radius: 20px
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.2)
+
+    .m &
+        border-radius: 0
+        box-shadow: 0
+
 
 .btn
     padding: 0 12px
@@ -29,13 +36,15 @@ body
     cursor: pointer
     display: inline-block
     height: 58px
-    +flex-config(center,false,false,center)
+    +flex-config(center, false, false, center)
     @extend .radius
     +font-size(20)
+
     &.primary
         background: radial-gradient(at 16% 6px, rgb(255, 102, 186) -7%, #D0167C 74%)
-        box-shadow: 0 4px 6px rgba(0,0,0,.2)
+        box-shadow: 0 4px 6px rgba(0, 0, 0, .2)
         overflow: hidden
+
         &.countdown
             &:after
                 content: ""
@@ -44,16 +53,20 @@ body
                 position: absolute
                 right: 0
                 top: 0
-                +opacity(.32,background-color,$texts-color)
+                +opacity(.32, background-color, $texts-color)
+
         span
             z-index: 1
+
     &.secondary
         +opacity(.16)
         padding-left: 22px
+
     &.reset
         //max-width: 144px
         .text svg
             width: 50%
+
     &.info
         max-width: 177px
 
@@ -65,12 +78,15 @@ body
     +opacity(.16)
     text-transform: uppercase
     margin-left: 16px
-    +flex-config(center,false,false,center)
+    +flex-config(center, false, false, center)
     border: 0
+
     &.space
         width: 70px
+
     &.infos
         width: 40px
+
     &.ok
         +opacity(.24, background-color, $ok-color)
 
@@ -78,10 +94,13 @@ body
     &.missed
         svg
             color: $ok-color
+
     &.nok
         +opacity(.24, background-color, $nok-color)
+
         svg
             color: $nok-color
+
     &.ok,
     &.nok,
     &.missed
@@ -100,6 +119,7 @@ body
 .screen
     position: relative
     z-index: 1
+
     &-image
         position: absolute
         top: 0
@@ -107,11 +127,13 @@ body
         height: 100%
         width: 100%
         z-index: 0
+
         img.mobile
             display: none
             height: 100%
             width: 100%
             object-fit: cover
+
             &.question-multiple
                 object-position: top
 
@@ -122,22 +144,27 @@ body
     .screen-image
         img.mobile
             display: inline
+
         img:not(.mobile)
             display: none
 
     .btn
         height: 56px
+
         &:first-of-type:not(:last-of-type),
         &.toggle-answers-review
             margin-right: 16px
+
         &.primary
             flex: 1
+
         &.reset
             width: 56px
             flex-shrink: 0
             padding: 0
+
             .text
-                +flex-config(center,false,false,center)
+                +flex-config(center, false, false, center)
 
     .access:not(.missed):not(.ok):not(.nok)
         display: none
@@ -147,22 +174,41 @@ body
     width: 124px
     padding: 12px 0
     +font-size(20)
-    +opacity(.16,background-color,$texts-color)
+    +opacity(.16, background-color, $texts-color)
     border-radius: 16px
     text-align: center
+    cursor: pointer
+
     &.left .access
         transform: rotate(-90deg)
+
     &.right .access
         transform: rotate(90deg)
+
     p
         margin-bottom: 5px
+
     .access
         margin: 0 auto
+
         span
             display: flex
+
     svg
         color: $texts-color
 
+.only-mobile
+    display: none
+
+.only-desktop
+    display: inherit
+
 .m
     .controls
         display: none
+
+    .only-desktop
+        display: none
+
+    .only-mobile
+        display: inherit

diff --git a/style/106-question-draganddrop.sass b/style/106-question-draganddrop.sass
index 60681e19e475210a87fe49f81ef7b40a103f94fb..c744a64c23839b15608a0e43dd5f040c0fdbb746 100644 (file)
--- a/style/106-question-draganddrop.sass
+++ b/style/106-question-draganddrop.sass
@@ -1,51 +1,69 @@
 .container-screen.question-draganddrop
     .screen-image
         width: auto
+
         img
             height: 100%
+
         &.zone-1
             .zone-content
                 left: 24px
+
         &.zone-2
+            text-align: right
             left: initial
             right: 0
+
+            img
+                position: absolute
+                right: 0
+
             .zone-content
                 right: 24px
 
         &.zone-1,
         &.zone-2
             &.active
-                .zone-content
-                    +opacity(.2,background-color,$texts-color)
+                .card-holder
+                    +opacity(.2, background-color, $texts-color)
 
         .zone-content
             position: absolute
             top: 50%
             transform: translateY(-50%)
-            width: 100%
-            max-width: 180px
-            height: 70%
-            padding: 8px
-            border: 1px dashed rgba($texts-color,.4)
-            +radius(16px)
+            width: 180px
+            height: 50%
+            padding: 0 8px
+
             transition: background-color .2s ease
 
+            .card-holder
+                +opacity(.08, background-color, $texts-color)
+                +radius(16px)
+                min-height: 196px
+                padding: 8px
+
             .text
                 margin-bottom: 21px
+
                 h2
                     font-size: 20px
                     margin-bottom: 8px
+
         .slot
             width: 100%
             height: 51px
-            //border: 1px solid rgba($texts-color,.24)
             transition: all .3s
             +radius(8px)
             padding: 7px 8px
             font-size: 14px
             margin-bottom: 8px
+
+
             &.active
-                border: 1px solid rgba($texts-color,.24)
+                background-color: rgba(0, 0, 0, 0.25)
+                border: 1px solid rgba($texts-color, .24)
+
             span
                 display: -webkit-box
                 display: -moz-box
@@ -58,12 +76,14 @@
     .screen
         +flex-config(center, false, false, center)
         margin-top: 92px
+
         .list
             position: relative
             width: 100%
             max-width: 368px
             height: 225px
             margin: 0 16px
+
             &-item
                 position: absolute
                 width: 100%
@@ -71,6 +91,17 @@
                 +radius(16px)
                 padding: 20px
                 border: 2px solid transparent
+
+                h4
+                    font-size: 20px
+                    font-weight: 600
+
+                p
+                    font-size: 16px
+                    font-weight: 400
+                    margin-top: 5px
+                    white-space: pre-line
+
                 &:not(.overlay)
                     transition: top .3s
                     opacity: 0
@@ -80,61 +111,71 @@
                         z-index: 4
                         border: 2px solid $texts-color
                         top: 0
+
                         &.isNext
                             transform: scale(1) !important
                             transition: all .3s
+
                         &.complete
                             opacity: 1
 
                     &:not(.isDragging)
                         &:nth-child(2)
-                            +opacity(.8,background-color,$neutral-color)
+                            +opacity(.8, background-color, $neutral-color)
                             transform: scale(.92) !important
                             z-index: 3
                             top: 30px
+
                             &.complete
                                 opacity: .64 !important
 
                         &:nth-child(3)
-                            +opacity(.8,background-color,$neutral-color)
+                            +opacity(.8, background-color, $neutral-color)
                             transform: scale(.83) !important
                             z-index: 2
                             top: 60px
+
                             &.complete
                                 opacity: .4 !important
 
                         &:nth-child(4)
-                            +opacity(.8,background-color,$neutral-color)
+                            +opacity(.8, background-color, $neutral-color)
                             transform: scale(0.75) !important
                             z-index: 1
                             top: 87px
+
                             &.complete
                                 opacity: .16 !important
 
-                        &:not(:nth-child(-n+4)) // on cache les items à partir du 5ème
-                            opacity: 0 !important
-                            visibility: hidden
+                        &:not(:nth-child(-n+4))
+                        // on cache les items à partir du 5ème
+                                                   opacity: 0 !important
+                                                   visibility: hidden
+
                         &.isValidated
                             font-size: 14px
-                            border: 1px solid rgba($texts-color,.24)
+                            border: 1px solid rgba($texts-color, .24)
                             transition: border .3s, font-size .3s
+
                         &:not(:nth-child(1))
                             clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0 100%)
                             transition: all .3s
                             pointer-events: none
+
                             &.isNext
                                 clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%)
                                 transition: all .3s
 
                 &[data-direction=right]
                     transform: rotate(25deg)
+
                 &[data-direction=left]
                     transform: rotate(-25deg)
 
         .overlay
             @extend .list-item
-            +opacity(.16,background-color,$neutral-color)
-            border: 1px dashed rgba($texts-color,.24)
+            +opacity(.16, background-color, $neutral-color)
+            border: 1px dashed rgba($texts-color, .24)
             z-index: 3
 
 .m
@@ -147,6 +188,7 @@
                 width: 100%
                 height: auto
                 left: 0
+
             .zone-content
                 max-width: 95%
                 height: auto
@@ -155,14 +197,18 @@
                 padding: 18px 40px
                 border-radius: 8px
                 border-width: 2px
+
                 .text
                     text-align: center
                     margin: 0
+
                 h2
                     margin-bottom: 5px
+
                 p
                     font-size: 14px
-                    +opacity(.8,color,$texts-color)
+                    +opacity(.8, color, $texts-color)
+
             .slot
                 display: none
 
@@ -173,6 +219,7 @@
             &.zone-1
                 width: 100%
                 height: auto
+
                 .zone-content
                     top: 29px
 
@@ -181,12 +228,14 @@
                 top: initial
                 bottom: -3px
                 left: 0
+
                 .zone-content
                     top: initial
                     bottom: 78px
 
         .header-question
             top: 130px
+
             .progress-container
                 margin: 4px 0
 
@@ -203,7 +252,9 @@
                         &:not(.isDragging)
                             &:nth-child(2)
                                 top: 24px
+
                             &:nth-child(3)
                                 top: 47px
+
                             &:nth-child(4)
                                 top: 67px

diff --git a/views/header_question.blade.php b/views/header_question.blade.php
index 3dd54d6c56233775af1a55efdbe4886df7b07ed8..a9f2cb9a86286b3cacda7eba8e9bbf5cbb4316e1 100644 (file)
--- a/views/header_question.blade.php
+++ b/views/header_question.blade.php
@@ -7,14 +7,14 @@
         @endfor
     </div>
 
-    @if($data['type'] === "draganddrop")
+    @if($question['type'] === "draganddrop")
         <h1 id="titleQuestion">
             <span class="only-desktop">{{$__('Drag and drop each card in the right container')}}</span>
-            <span class="only-mobile">{{$__('Swipe up or down each card in the right container')}}></span>
+            <span class="only-mobile">{{$__('Swipe up or down each card in the right container')}}</span>
         </h1>
         <h2 class="subtitle"
             class="only-desktop">{{$__('Use arrow keys to move the cards to the corresponding zone')}}</h2>
-    @elseif($data['type']==='match')
+    @elseif($question['type']==='match')
         <h1 id="titleQuestion">
             {{$__('Answer the question by swiping left or right to select the most appropriate answer')}}
         </h1>

diff --git a/views/index.blade.php b/views/index.blade.php
index 1b9b80882d889bd67a34d78c8205bfe815c18158..78b55ffb0e7d21651cf86f76437af7a5690dc68a 100644 (file)
--- a/views/index.blade.php
+++ b/views/index.blade.php
@@ -28,17 +28,5 @@
     </div>
 </div>
 <script src="js/quiz.js"></script>
-<script>
-    function changeViewportSize () {
-        const mvp = document.getElementById('myViewport');
-        if (screen.width > 390) {
-            mvp.setAttribute('content','width=device-width, user-scalable=no, initial-scale=1.0, shrink-to-fit=no');
-        }else {
-            mvp.setAttribute('content','width=390, user-scalable=no, initial-scale=1.0, shrink-to-fit=no');
-        }
-    }
-    window.addEventListener("onload", changeViewportSize)
-    window.addEventListener("resize", changeViewportSize)
-</script>
 </body>
 </html>

diff --git a/views/screens/arrow.blade.php b/views/screens/arrow.blade.php
new file mode 100644 (file)
index 0000000..a4ba78c
--- /dev/null
+++ b/views/screens/arrow.blade.php
@@ -0,0 +1,16 @@
+@php
+    if($side==='left'){
+        $text=$__('Move left');
+        $key='ARROWLEFT';
+    }else{
+        $text=$__('Move right');
+        $key='ARROWRIGHT';
+    }
+@endphp
+
+<div class="controls {{$side}} move-card" aria-keyshortcuts="{{$key}}">
+    <p>{{$text}}</p>
+    <div class="access">
+        <span data-icon="arrow"></span>
+    </div>
+</div>

diff --git a/views/screens/question_draganddrop.blade.php b/views/screens/question_draganddrop.blade.php
index ab41662b263d1ea5f37654aababf0290a5319a9f..8803739c2f3c1ca680c1de169e4a389ed6f10b9a 100644 (file)
--- a/views/screens/question_draganddrop.blade.php
+++ b/views/screens/question_draganddrop.blade.php
@@ -1,55 +1,19 @@
 <div class="container-screen none question-draganddrop" data-screen="q-{{$position}}">
-    <div class="screen-image zone-1 notDrag" data-zone="zone-1">
-        <img src="{{$theme->draganddropArea1Image}}" />
-        <img class="mobile" src="{{$theme->draganddropArea1ImageMobile}}"/>
-        <div class="zone-content">
-            <div class="text">
-                <h2>{{ $question['area_1']['title'] }}</h2>
-                <p>{{ $question['area_1']['text'] }}</p>
-            </div>
-            <form>
-                @foreach($question['answers'] as $key => $answer)
-                    <div class="slot">
-                        <input type="checkbox"
-                               id="answer-{{$key}}" class="none" value="{{$key}}">
-                    </div>
-                @endforeach
-            </form>
-        </div>
-    </div>
-    @include('header_question', ['data' => $data, 'max' => $max, 'position' => $position])
+    @include('screens.question_draganddrop_area',['area'=>1,'question'=>$question,'theme'=>$theme])
+    @include('header_question', ['question' => $question, 'data' => $data, 'max' => $max, 'position' => $position])
     <div class="screen question-draganddrop">
-        <div class="controls left">
-            <p>{{$__('Move left')}}</p>
-            <button class="access move-card" aria-keyshortcuts="ARROWLEFT"><span data-icon="arrow"></span></button>
-        </div>
+        @include('screens.arrow',['side'=>'left'])
         <ul class="list">
             @foreach($question['answers'] as $key => $answer)
                 <li class="list-item {{ $key === 0 ? 'current' : '' }}" data-id="{{$key}}">
-                    {{$answer['answer']}}
+                    <h4>{{$answer['answer']}}</h4>
+                    <p>{{$answer['answer_text']}}</p>
                 </li>
             @endforeach
             <li class="overlay"></li>
         </ul>
-        <div class="controls right">
-            <p>{{$__('Move right')}}</p>
-            <button class="access move-card" aria-keyshortcuts="ARROWRIGHT"><span data-icon="arrow"></span></button>
-        </div>
-    </div>
-    <div class="screen-image zone-2 notDrag" data-zone="zone-2">
-        <img src="{{$theme->draganddropArea2Image}}" />
-        <img class="mobile" src="{{$theme->draganddropArea2ImageMobile}}"/>
-        <div class="zone-content">
-            <div class="text">
-                <h2>{{ $question['area_2']['title'] }}</h2>
-                <p>{{ $question['area_2']['text'] }}</p>
-            </div>
-            <form>
-                @foreach($question['answers'] as $key => $answer)
-                    <div class="slot"></div>
-                @endforeach
-            </form>
-        </div>
+        @include('screens.arrow',['side'=>'right'])
     </div>
+    @include('screens.question_draganddrop_area',['area'=>2,'question'=>$question,'theme'=>$theme])
     @include('footer', ['question' => $question,'data' => $data, 'reset' => true, 'text' => $__('Validate answer'), 'info' => true])
 </div>

diff --git a/views/screens/question_draganddrop_area.blade.php b/views/screens/question_draganddrop_area.blade.php
new file mode 100644 (file)
index 0000000..f76cd72
--- /dev/null
+++ b/views/screens/question_draganddrop_area.blade.php
@@ -0,0 +1,26 @@
+@php
+    $desktopImageKey='draganddropArea'.$area.'Image';
+    $mobileImageKey='draganddropArea'.$area.'ImageMobile';
+@endphp
+<div class="screen-image zone-{{$area}} notDrag" data-zone="zone-{{$area}}">
+    <img src="{{$theme->$desktopImageKey}}"/>
+    <img class="mobile" src="{{$theme->$mobileImageKey}}"/>
+    <div class="zone-content">
+        <div class="text">
+            <h2>{{ $question['area_'.$area]['title'] }}</h2>
+            <p>{{ $question['area_'.$area]['text'] }}</p>
+        </div>
+        <div class="card-holder">
+            <form>
+                @foreach($question['answers'] as $key => $answer)
+                    <div class="slot">
+                        <input type="checkbox"
+                               id="answer-{{$key}}" class="none" value="{{$key}}">
+                        <h4></h4>
+                        <p></p>
+                    </div>
+                @endforeach
+            </form>
+        </div>
+    </div>
+</div>

diff --git a/views/screens/question_match.blade.php b/views/screens/question_match.blade.php
index 6c18c9336b839c95585995967b68184556f48eef..781aa09a06b987c9510df02d92cd90ff8c154fec 100644 (file)
--- a/views/screens/question_match.blade.php
+++ b/views/screens/question_match.blade.php
@@ -9,12 +9,7 @@
     <div class="screen">
 
         <div class="top-slider-container">
-            <div class="controls left">
-                <p>{{$__('Move left')}}</p>
-                <button class="access move-slide" aria-keyshortcuts="ARROWLEFT">
-                    <span data-icon="arrow"></span>
-                </button>
-            </div>
+            @include('screens.arrow',['side'=>'left'])
             <div class="swiper-container top-slider">
                 <div class="swiper-pagination-top"></div>
                 <div class="swiper-wrapper">
@@ -25,12 +20,7 @@
                     @endforeach
                 </div>
             </div>
-            <div class="controls right">
-                <p>{{$__('Move right')}}</p>
-                <button class="access move-slide" aria-keyshortcuts="ARROWRIGHT">
-                    <span data-icon="arrow"></span>
-                </button>
-            </div>
+            @include('screens.arrow',['side'=>'right'])
         </div>
 
         <div class="swiper-container bottom-slider">