From: soufiane <soufiane@cubedesigners.com>
Date: Wed, 23 Aug 2023 15:08:10 +0000 (+0200)
Subject: wip #6194 @4:00 animation module 1, apparition des modules
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=875e790e0c05cd68e522a969f022847079c23d6d;p=fluidbook-toolbox-quiz.git

wip #6194 @4:00 animation module 1, apparition des modules
---

diff --git a/js/quiz.animations.js b/js/quiz.animations.js
index 339de78..1b10168 100644
--- a/js/quiz.animations.js
+++ b/js/quiz.animations.js
@@ -62,14 +62,6 @@ QuizAnimations.prototype = {
             }, 500);
         }
     },
-
-    triggeredBtn: function () {
-        /*$(document).on("mousedown", ".btn", function() {
-            gsap.to($(this), { scale: .9, duration: 0.3 });
-        }).on("mouseup", ".btn", function() {
-            gsap.to($(this), { scale: 1, duration: 0.3 });
-        })*/
-    }
 }
 
 
diff --git a/js/quiz.countdown.js b/js/quiz.countdown.js
deleted file mode 100644
index d5864f0..0000000
--- a/js/quiz.countdown.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import QuizQuestion from "./quiz.question";
-
-function QuizCountdown(quiz) {
-    this.quiz = quiz;
-    this.question = new QuizQuestion()
-    this.intervalCountDown = false
-}
-
-QuizCountdown.prototype = {
-
-}
-
-export default QuizCountdown;
diff --git a/js/quiz.js b/js/quiz.js
index 5ed1d1e..2e3e89a 100644
--- a/js/quiz.js
+++ b/js/quiz.js
@@ -17,7 +17,6 @@ window.cubeSCORM = new CubeSCORM();
 window.$ = window.jQuery = $;
 
 import ResizeObserver from 'resize-observer-polyfill';
-import QuizCountdown from "./quiz.countdown";
 
 window.ResizeObserver = ResizeObserver;
 
diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index 570068b..83d5055 100644
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -136,17 +136,40 @@ QuizScreens.prototype = {
                 callback();
             }
             $this.activeScreen = screenToShow;
+
+            gsap.timeline().to(screenToShow, {
+                autoAlpha: 1
+            })
+            .to(".active-screen .header-question *", {
+                opacity: 1,
+                duration: .5
+            })
+            .to(".active-screen .list-item", {
+                opacity: 1,
+                ease: "power1.inOut",
+                stagger: .15
+            }, .7)
+            .to(".active-screen .footer-question", {
+                y: 0,
+                duration: 1,
+                opacity: 1,
+                ease: "circ.out",
+                onComplete: function () {
+                    // if countdown enable
+                    if($this.quiz.question.current() !== undefined) {
+                        if (parseInt($this.quiz.question.current().countdown_enable)) {
+                            $this.countdown()
+                        }
+                    }
+                }
+            }, 1.2)
+
             // Reset form to prevent browser letting a option selected after a refresh
             $this.resetForm();
             $this.currentQuestionAnswers = [];
             $this.quiz.progressbar.update();
 
-            // if countdown enable
-            if($this.quiz.question.current() !== undefined) {
-                if (parseInt($this.quiz.question.current().countdown_enable)) {
-                    $this.countdown()
-                }
-            }
+
 
             if (screen === 'outro') {
                 $this.outro.show();
diff --git a/style/100-global.sass b/style/100-global.sass
index 5df6b53..3eafac5 100644
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -19,6 +19,7 @@ body
     margin: 0 auto
     +padding-container()
     position: relative
+    overflow: hidden
 
 .btn
     padding: 0 12px
@@ -43,7 +44,7 @@ body
                 position: absolute
                 right: 0
                 top: 0
-                background-color: #E062A8
+                +opacity(.32,background-color,$texts-color)
         span
             z-index: 1
     &.secondary
@@ -106,6 +107,9 @@ body
             &.question-multiple
                 object-position: top
 
+.active-screen
+    opacity: 0
+
 .m
     .screen-image
         img.mobile
diff --git a/style/101-header-footer.sass b/style/101-header-footer.sass
index fc50228..6b3952c 100644
--- a/style/101-header-footer.sass
+++ b/style/101-header-footer.sass
@@ -16,6 +16,8 @@ header
 
 .header-question
     text-align: center
+    *
+        opacity: 0
     .abovetitle
         +font-size(16)
     .progress-container
@@ -57,6 +59,9 @@ header
         bottom: 24px
         transform: translateX(-50%)
 
+.footer-question
+    transform: translateY(100%)
+
 .m
     .header-question
         .abovetitle
diff --git a/style/103-question-multiple.sass b/style/103-question-multiple.sass
index a7bed40..d0a2d32 100644
--- a/style/103-question-multiple.sass
+++ b/style/103-question-multiple.sass
@@ -8,6 +8,7 @@
         +breakpoint(md)
             grid-template-columns: repeat(2, 1fr)
         &-item
+            opacity: 0
             label
                 width: 100%
                 height: 58px