wip #6182 @7:00 intégration question drag and drop

diff --git a/resources/quizv2/js/quiz.js b/resources/quizv2/js/quiz.js
index 90957606e5adcd540e671a75df7742a1d1df4d4f..b99daff2ede37752eed76fee9943c3963c195d4e 100644 (file)
--- a/resources/quizv2/js/quiz.js
+++ b/resources/quizv2/js/quiz.js
@@ -47,8 +47,10 @@ Quiz.prototype = {
 
         this.timeoutAnimation = false
 
-        //
-        //this.animations.triggeredBtn()
+        // commencer
+        $(document).on("click", "#start", function() {
+            $this.start()
+        })
 
         //
         $("#quiz").css("background-image","url("+this.data.theme.backgroundImage+")")
@@ -128,6 +130,18 @@ Quiz.prototype = {
         this.activeNav()
     },
 
+    start: function() {
+        const $this = this
+        gsap.timeline().to("#welcome-screen", {
+            opacity: 0,
+            onComplete: function() {
+                let responses = $this.responses
+                $this.next(responses);
+                $("#welcome-screen").removeClass("next active-screen").addClass("none").next(".container-screen").removeClass("none").addClass("next active-screen")
+            }
+        })
+    },
+
     updateIcons: function () {
         $("[data-icon]").each(function () {
             var iconId = 'quiz-' + $(this).data('icon');
@@ -156,10 +170,11 @@ Quiz.prototype = {
         // on arrête l'animation si le joueur passe à la question suivante
         this.stopAnimationValidation()
 
-        const $el = $(".active-screen .btn.action")
         let status = quiz.score.questionStatus
         let currentPosition = quiz.score.lastAnsweredQuestion + 1
 
+        const $el = $(".active-screen .btn.action")
+
         quiz.score.updateScore()
         // if form exist and responses are validated
         // dont miss to add this second condition
@@ -203,7 +218,7 @@ Quiz.prototype = {
     },
 
     updateBtnValidation: function(status) {
-        let $btnAction = $("#footer .action"),
+        let $btnAction = $(".footer-question .action"),
             validationText = $btnAction.data("validation-text"),
             continueText = $btnAction.data("continue-text")
 

diff --git a/resources/quizv2/style/005-utilities.sass b/resources/quizv2/style/005-utilities.sass
index 41ac547e602b9e916093469a042e77f59eaf1928..adc845c6b77509b733ff36788534274f23134ffd 100644 (file)
--- a/resources/quizv2/style/005-utilities.sass
+++ b/resources/quizv2/style/005-utilities.sass
@@ -5,7 +5,7 @@
     position: relative
 
 .none
-    display: none
+    display: none !important
 
 \:root
     --space-21-66: clamp(1.31rem, calc(0.29rem + 5.11vw), 4.13rem)

diff --git a/resources/quizv2/style/101-header-footer.sass b/resources/quizv2/style/101-header-footer.sass
index e4e046d67625e1f9d649862970a9592e45d21751..d4a269eb07104a2c7b25633cc07ead94f31537c2 100644 (file)
--- a/resources/quizv2/style/101-header-footer.sass
+++ b/resources/quizv2/style/101-header-footer.sass
@@ -1,5 +1,5 @@
 header,
-#footer
+footer
     position: relative
 
 header
@@ -27,6 +27,7 @@ header
         border-radius: 100px
         +opacity(.16)
         display: inline-flex
+        transition: background-color .3s
         &:not(:last-of-type)
             margin-right: 7px
         &.active
@@ -38,7 +39,7 @@ header
     h1
         +font-size(24)
 
-#footer
+.footer
     position: absolute
     bottom: 0
     left: 0

diff --git a/resources/quizv2/style/103-question-multiple.sass b/resources/quizv2/style/103-question-multiple.sass
index e865c83897dc2445eb159a3886201ce1df756b86..fed8e2e90815a5da11077a8ada24b05c60e89047 100644 (file)
--- a/resources/quizv2/style/103-question-multiple.sass
+++ b/resources/quizv2/style/103-question-multiple.sass
@@ -1,4 +1,4 @@
-.question-multiple
+.screen.question-multiple
     top: 93px
     .list
         display: grid

diff --git a/resources/quizv2/style/104-animations.sass b/resources/quizv2/style/104-animations.sass
index 98a8e4b3ed3e019af059db832203c1819a54f2c1..4ef9ee3bd53aacb98eb6e2a3f0547d27c81f0af0 100644 (file)
--- a/resources/quizv2/style/104-animations.sass
+++ b/resources/quizv2/style/104-animations.sass
@@ -8,6 +8,8 @@
     height: 100%
     +opacity(.4, background-color, $neutral-color)
     backdrop-filter: blur(4px)
+    // règle ie > 9 à tester
+    // filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3')
     opacity: 0
     visibility: hidden
     transition: all 1s

diff --git a/resources/views/quizv2/footer.blade.php b/resources/views/quizv2/footer.blade.php
index 460f52e0f6d5be9c46b84af75be242d7f4e7af91..a4de04a21e2ddbea50fb418c478264d208d077e0 100644 (file)
--- a/resources/views/quizv2/footer.blade.php
+++ b/resources/views/quizv2/footer.blade.php
@@ -1,4 +1,4 @@
-<footer id="footer">
+<footer class="footer-question footer">
     @isset($reset)
         <a class="btn secondary reset">
             Reset
@@ -13,7 +13,7 @@
         @endisset
     </a>
     @isset($info)
-        <a class="btn secondary">
+        <a class="btn secondary none">
             More infos
             <span class="access infos">F1</span>
         </a>

diff --git a/resources/views/quizv2/header_question.blade.php b/resources/views/quizv2/header_question.blade.php
index 0c446552ff14a831d103d2e6b2aec59ccc5f8bf5..dda7f1fa03380a083bf3fc9b5f0deb03ac61173f 100644 (file)
--- a/resources/views/quizv2/header_question.blade.php
+++ b/resources/views/quizv2/header_question.blade.php
@@ -6,4 +6,7 @@
         @endfor
     </div>
     <h1 id="titleQuestion">{{$data['question']}}</h1>
+    @if($data['type'] === "draganddrop")
+        <h2 class="subtitle">Use arrow keys to move the cards to the corresponding zone</h2>
+    @endif
 </header>

diff --git a/resources/views/quizv2/screens/intro.blade.php b/resources/views/quizv2/screens/intro.blade.php
index bed0379da774d5c12a1e81ec60d826cafb712a1d..291f435efa1bd4e257d007b724ca7237ded5fce1 100644 (file)
--- a/resources/views/quizv2/screens/intro.blade.php
+++ b/resources/views/quizv2/screens/intro.blade.php
@@ -1,14 +1,16 @@
 @php
     $absPath = \App\Models\Quiz::find($data->id)->getPreviewURL();
 @endphp
-<div class="container-screen active-screen next">
+<div class="container-screen active-screen next" id="welcome-screen">
     @include('quizv2.header_title', ['data', $data])
     <div class="screen" id="welcome">
         <h2 class="none">{{$data->intro_title}}</h2>
         <p class="none">{{$data->intro_text}}</p>
     </div>
     <div class="screen-image">
-        <img src="{{$data->theme->introImage}}">
+        <img src="{{$data->theme->introImage}}" />
     </div>
-    @include('quizv2.footer', ['data' => $data, 'text' => $data->intro_button])
+    <footer class="footer">
+        <a id="start" class="btn primary">{{$data->intro_button}}</a>
+    </footer>
 </div>

diff --git a/resources/views/quizv2/screens/outro.blade.php b/resources/views/quizv2/screens/outro.blade.php
index 24d05e7d8f7edb4719f318c6eb4e56aae490159f..f2d6868f9cebad08a37fd51f06f45b66f2c65db5 100644 (file)
--- a/resources/views/quizv2/screens/outro.blade.php
+++ b/resources/views/quizv2/screens/outro.blade.php
@@ -19,7 +19,9 @@
                 </div>
             </div>
             <footer>
-                <div class="restart-sentence">Want to improve your score?</div>
+                @if($data->restart_button)
+                    <div class="restart-sentence">Want to improve your score?</div>
+                @endif
                 <div class="controls">
                     @if($data->restart_button)
                         <a class="btn secondary reset">

diff --git a/resources/views/quizv2/screens/question_draganddrop.blade.php b/resources/views/quizv2/screens/question_draganddrop.blade.php
new file mode 100644 (file)
index 0000000..2052723
--- /dev/null
+++ b/resources/views/quizv2/screens/question_draganddrop.blade.php
@@ -0,0 +1,50 @@
+<div class="container-screen none question-draganddrop" data-position="{{$position}}">
+    <div class="screen-image zone-1">
+        <img src="{{$theme->draganddropArea1Image}}" />
+        <div class="zone-content">
+            <div class="text">
+                <h2>Zone 1</h2>
+                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p>
+            </div>
+            <form>
+                @foreach($data['answers'] as $key => $answer)
+                    <div class="slot">
+                    </div>
+                @endforeach
+            </form>
+        </div>
+    </div>
+    @include('quizv2.header_question', ['data' => $data, 'max' => $max, 'position' => $position])
+    <div class="screen question-draganddrop">
+        <div class="controls left">
+            <p>Move left</p>
+            <button class="access"><span data-icon="arrow"></span></button>
+        </div>
+        <ul class="list">
+            @foreach($data['answers'] as $key => $answer)
+                <li class="list-item">
+                    {{$answer['answer']}}
+                </li>
+            @endforeach
+        </ul>
+        <div class="controls right">
+            <p>Move right</p>
+            <button class="access"><span data-icon="arrow"></span></button>
+        </div>
+    </div>
+    <div class="screen-image zone-2">
+        <img src="{{$theme->draganddropArea2Image}}" />
+        <div class="zone-content">
+            <div class="text">
+                <h2>Zone 1</h2>
+                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p>
+            </div>
+            <form>
+                @foreach($data['answers'] as $key => $answer)
+                    <div class="slot"></div>
+                @endforeach
+            </form>
+        </div>
+    </div>
+    @include('quizv2.footer', ['data' => $data, 'reset' => true, 'text' => 'Validate answer', 'info' => true])
+</div>