wip #6182 @1

diff --git a/js/quiz.screen.intro.js b/js/quiz.screen.intro.js
index e52ce3c94e5cf2b503fc634be11d7599a1b5b133..195be8504078b7cf309d7ecf0cb4fb6faa70bc8a 100644 (file)
--- a/js/quiz.screen.intro.js
+++ b/js/quiz.screen.intro.js
@@ -10,29 +10,26 @@ QuizScreenIntro.prototype = {
     show: function () {
         let $this = this;
 
-        $("#welcome-screen").addClass('active-screen next').removeClass('none');
-        this.animate();
-
-        $(document).on("click", "#start", function () {
-            $this.screens.gotoQuestion(1);
-            return false;
+        this.screens.showScreen('welcome', function () {
+            $this.animate();
+            $("#start").on("click", function () {
+                $this.screens.showScreen('q0');
+                return false;
+            });
         });
     },
 
     animate: function () {
+        console.log('animate');
         //animer le texte d'intro
         let title = new SplitType("#welcome h2", {types: 'words, chars'})
         let text = new SplitType("#welcome p", {types: 'words, chars'})
         gsap.from(title.words, {
-            opacity: 0, y: 20, duration: 1, stagger: 0.05, onStart: () => {
-                $(title.elements).removeClass("none")
-            }
+            opacity: 0, y: 20, duration: 1, stagger: 0.05
         })
         gsap.to(text.words, {
             opacity: 1, y: 0, duration: 1, ease: "power1.inOut", stagger: {
                 amount: 0.2
-            }, onStart: () => {
-                $(text.elements).removeClass("none")
             }
         })
     },

diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index 4e9a507301f528636aa335d08308e81f7ab38ad8..6daca92be9aeefb970a0f7b2fbbdafae7581d2d1 100644 (file)
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -10,19 +10,17 @@ function QuizScreens(quiz) {
 }
 
 QuizScreens.prototype = {
-    gotoQuestion: function (question) {
+    /**
+     *
+     * @param screen
+     */
+    showScreen: function (screen, callback) {
         const $this = this;
-        let callback = function () {
-            let responses = $this.quiz.responses
-            $this.next(responses);
-        }
-
-        let screen;
-        if (question == 1) {
-            screen = $("#welcome-screen");
-        }
-
-        this.hideScreen(screen, callback);
+        let screenToShow = $('[data-screen="' + screen + '"]');
+        this.hideCurrentScreen(function () {
+            screenToShow.removeClass("none").addClass("next active-screen");
+            callback();
+        });
     },
 
     next: function (responses) {
@@ -110,7 +108,6 @@ QuizScreens.prototype = {
     },
 
 
-
     resultAfterValidation: function (datas) {
         for (let k in datas) {
             let n = (parseInt(k) + 1)
@@ -127,21 +124,27 @@ QuizScreens.prototype = {
     },
 
 
-    hideScreen: function (screen, callback) {
-        let cb = function () {
-            $(screen).removeClass("next active-screen").addClass("none");
-            //next(".container-screen").removeClass("none").addClass("next active-screen");
+    /**
+     * Si un écran est affiché, on le masque puis on exécute le callback. Sinon, on exécute immédiatement le callback
+     * @param callback
+     */
+    hideCurrentScreen: function (callback) {
+        let cb = function (screen) {
+            if (screen.length > 0) {
+                $(screen).removeClass("next active-screen").addClass("none");
+            }
             callback();
         };
 
-        if (this.quiz.utils.isVisible(screen)) {
-            gsap.timeline().to("#welcome-screen", {
+        let currentScreen = $('.container-screen:not(.none)');
+        if (currentScreen.length > 0) {
+            gsap.timeline().to(currentScreen, {
                 autoAlpha: 0, onComplete: function () {
-                    cb();
+                    cb(currentScreen);
                 }
             })
         } else {
-            cb();
+            cb(currentScreen);
         }
     },
 };

diff --git a/views/screens/intro.blade.php b/views/screens/intro.blade.php
index d1e2a5d0bab1feb2d225012d263cdf4c49c5191f..bb4e45112c8ada5463fc25f82f476c64e3819a72 100644 (file)
--- a/views/screens/intro.blade.php
+++ b/views/screens/intro.blade.php
@@ -1,11 +1,11 @@
 @php
     $absPath = \App\Models\Quiz::find($data->id)->getPreviewURL();
 @endphp
-<div class="container-screen none" id="welcome-screen">
+<div class="container-screen none" data-screen="welcome">
     @include('header_title', ['data', $data])
     <div class="screen" id="welcome">
-        <h2 class="none">{{$data->intro_title}}</h2>
-        <p class="none">{{$data->intro_text}}</p>
+        <h2>{{$data->intro_title}}</h2>
+        <p>{{$data->intro_text}}</p>
     </div>
     <div class="screen-image">
         <img src="{{$data->theme->introImage}}" />

diff --git a/views/screens/outro.blade.php b/views/screens/outro.blade.php
index f1fef2f9e4f32f529bbbc3835bc34f9e07825767..c779ea1c4c28f97474925e10a742b590c6f184af 100644 (file)
--- a/views/screens/outro.blade.php
+++ b/views/screens/outro.blade.php
@@ -1,4 +1,4 @@
-<div class="container-screen none">
+<div class="container-screen none" data-screen="review">
     @include('header_title', ['data', $data])
     <div class="screen score" id="score">
         <div class="score-content">

diff --git a/views/screens/question_draganddrop.blade.php b/views/screens/question_draganddrop.blade.php
index 469b4bc7cd23c7744690c29ce657eb26f828ec1a..a0e65496ed07669862e18791247a3a6653f1b9ce 100644 (file)
--- a/views/screens/question_draganddrop.blade.php
+++ b/views/screens/question_draganddrop.blade.php
@@ -1,4 +1,4 @@
-<div class="container-screen none question-draganddrop" data-position="{{$position}}">
+<div class="container-screen none question-draganddrop" data-screen="q{{$position}}">
     <div class="screen-image zone-1">
         <img src="{{$theme->draganddropArea1Image}}" />
         <div class="zone-content">

diff --git a/views/screens/question_multiple.blade.php b/views/screens/question_multiple.blade.php
index 5b034f1de37f9b7be3afccf24946a27630fec38c..f1339119c8fccdb0c7f36e56f666e3b809e21bb9 100644 (file)
--- a/views/screens/question_multiple.blade.php
+++ b/views/screens/question_multiple.blade.php
@@ -1,4 +1,4 @@
-<div class="container-screen none" data-position="{{$position}}">
+<div class="container-screen none" data-screen="q{{$position}}">
     @include('header_question', ['data' => $data, 'max' => $max, 'position' => $position])
     <div class="screen question-multiple">
         <form id="form-{{$position}}">