From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Fri, 18 Aug 2023 08:00:24 +0000 (+0200)
Subject: wip #6182 @1
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=a19c5d13c892e96b97d6ea50db2218b1d12fc530;p=fluidbook-toolbox-quiz.git

wip #6182 @1
---

diff --git a/js/quiz.screen.intro.js b/js/quiz.screen.intro.js
index e52ce3c..195be85 100644
--- 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 4e9a507..6daca92 100644
--- 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 d1e2a5d..bb4e451 100644
--- 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 f1fef2f..c779ea1 100644
--- 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 469b4bc..a0e6549 100644
--- 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 5b034f1..f133911 100644
--- 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}}">