wip #6194 @4:00 animations footer, outro, corrections responsive

diff --git a/js/quiz.animations.js b/js/quiz.animations.js
index ee4915ef148cd4c187d398aea27ea1063bc425e2..88c6d04973195345959a7e8ff133c1d0248ca875 100644 (file)
--- a/js/quiz.animations.js
+++ b/js/quiz.animations.js
@@ -54,12 +54,16 @@ QuizAnimations.prototype = {
         clearTimeout(this.instantReviewAnimationTimeout);
     },
 
-    fadeOut: function (el, remove) {
+    fadeOut: function (el, remove, timeout = true) {
         $(el).addClass('animateOpacity disabled').css('opacity', 0);
         if (remove === true) {
-            setTimeout(function () {
+            if(timeout) {
+                setTimeout(function () {
+                    $(el).remove();
+                }, 500);
+            }else {
                 $(el).remove();
-            }, 500);
+            }
         }
     },
 
@@ -85,7 +89,7 @@ QuizAnimations.prototype = {
                 $(activeScreen).find('.btn.continue').removeClass('none')
                 $(activeScreen).find('.btn.validate').addClass('none')
                 // Hide reset button
-                $this.quiz.animations.fadeOut($(activeScreen).find('.btn.reset'), true);
+                $this.quiz.animations.fadeOut($(activeScreen).find('.btn.reset'), true, false);
             }
         }).to(".active-screen .footer-question", {
             y: 0,

diff --git a/js/quiz.js b/js/quiz.js
index 2e3e89a018daba98837c456bc58c97e5125669f7..b27f0c2e9f2df9ca0e56ec6491f233b630e2e6f7 100644 (file)
--- a/js/quiz.js
+++ b/js/quiz.js
@@ -1,6 +1,5 @@
 import $ from "cash-dom";
 import gsap from "gsap";
-import {MotionPathPlugin} from "gsap/MotionPathPlugin.js";
 import {CubeSCORM} from '/application/resources/scorm/scorm';
 
 import QuizResize from "./quiz.resize";

diff --git a/js/quiz.screen.intro.js b/js/quiz.screen.intro.js
index a6677ee3bf2c7a8f4d5044205053130d207205b8..b38c03e219717759abcc35c3c15a715f610e1e6b 100644 (file)
--- a/js/quiz.screen.intro.js
+++ b/js/quiz.screen.intro.js
@@ -1,6 +1,5 @@
 import gsap from "gsap";
 import SplitType from 'split-type';
-import { DrawSVGPlugin } from "gsap/DrawSVGPlugin.js";
 
 function QuizScreenIntro(screens) {
     this.quiz = screens.quiz;
@@ -20,7 +19,6 @@ QuizScreenIntro.prototype = {
     },
 
     animate: function () {
-        gsap.registerPlugin(DrawSVGPlugin);
         //animer le texte d'intro
         let title = new SplitType("#welcome h2", {types: 'words, chars'})
         let text = new SplitType("#welcome p", {types: 'words, chars'})
@@ -30,6 +28,7 @@ QuizScreenIntro.prototype = {
         })
         .to("#start", {
             y: 0,
+
         },.2)
         .from(title.words, {
             opacity: 0, y: 20, duration: .2, stagger: 0.05

diff --git a/js/quiz.screen.outro.js b/js/quiz.screen.outro.js
index 6cd50e5c406a8cd883c926ccc6c05617896559c0..6db62bf9aa9beab7529daa6e44e9e040080253e5 100644 (file)
--- a/js/quiz.screen.outro.js
+++ b/js/quiz.screen.outro.js
@@ -2,6 +2,8 @@ import gsap from "gsap";
 import SimpleBar from 'simplebar'
 import 'simplebar/dist/simplebar.css'
 import Handlebars from "handlebars";
+import SplitType from 'split-type';
+import { DrawSVGPlugin } from "gsap/DrawSVGPlugin.js";
 
 function QuizScreenOutro(screens) {
     this.quiz = screens.quiz;
@@ -18,7 +20,10 @@ QuizScreenOutro.prototype = {
     },
 
     animate: function (score, percent) {
-        console.log("percent",percent)
+        //animer le texte d'intro
+        gsap.registerPlugin(DrawSVGPlugin);
+        let subtitle = new SplitType(".score-text .subtitle", {types: 'words, chars'})
+
         gsap.to(".active-screen #progress-circle", {drawSVG: 0, duration: 0})
         gsap.timeline({delay: .4})
             .to(".active-screen .title-header", {
@@ -27,19 +32,44 @@ QuizScreenOutro.prototype = {
             .to(".active-screen footer", {
                 y: 0
             })
+            .to("#progress-counter", {
+                scale: 1,
+            })
             .to(".active-screen #progress-circle", {
                 drawSVG: percent+"%",
-                duration: 2,
-                ease: "power4.easeIn"
-            })
+                duration: 1.5,
+                ease: "power4.easeOut"
+            }, ">-0.5")
+            .to(".score-text", {
+                scale: 1,
+            },1.3)
             .from("#score-counter", {
                 innerText: 0,
-                duration: 2,
-                ease: "power4.easeIn",
+                duration: 1.85,
+                ease: "power4.easeOut",
                 snap : {
                     innerText: 1
                 }
-            }, "<")
+            }, ">-.8")
+            .to("#score h1", {
+                opacity: 1,
+                y: 0
+            },">-1")
+            .to(".score-text .subtitle .word", {
+                opacity: 1,
+                y: 0,
+                stagger: {
+                    amount: 0.1
+                }
+            })
+            .to("#score .restart-sentence-mobile", {
+                opacity: 1,
+                y: 0
+            })
+            .to("#score .restart-mobile", {
+                opacity: 1,
+                y: 0
+            })
     },
 
     show: function () {

diff --git a/style/102-intro.sass b/style/102-intro.sass
index ed8fdca6be32b33c3cc13d5f32951381f5fee8fd..cac7809b854a81d1da84e9912a7e255c1dbf9dff 100644 (file)
--- a/style/102-intro.sass
+++ b/style/102-intro.sass
@@ -22,3 +22,5 @@
 .m
     #welcome
         top: 138px
+    #start
+        left: 50%

diff --git a/style/105-outro.sass b/style/105-outro.sass
index 3a6468cd4ae2339fd04a4cf4151fcc487a5f182c..55a84316182a8d63a5720a495c2beed5e4c4c396 100644 (file)
--- a/style/105-outro.sass
+++ b/style/105-outro.sass
@@ -7,6 +7,13 @@
     .subtitle
         +opacity(.8,color,$texts-color)
 
+    h1,
+    .score-text .subtitle .word,
+    .restart-sentence-mobile,
+    .btn.restart-mobile
+        transform: translateY(35px)
+        opacity: 0
+
     &-content
         flex: 1
         padding: 24px
@@ -58,6 +65,10 @@
                 #overlay-circle
                     display: none
 
+        #progress-counter,
+        .score-text
+            transform: scale(0)
+
     &-answers-review_container
         width: 36.11111%
 
@@ -183,6 +194,7 @@
         height: 600px //680(hauteur de base) - 80(hauteur du header)
         position: static
         border-radius: 0
+        background: none
         &:after
             content: ""
             width: 100%
@@ -207,6 +219,9 @@
         &-counter
             margin: 0 0 24px
             font-size: 56px
+            padding-bottom: 41%
+            width: 100%
+            max-width: 140px
             #overlay-circle
                 display: initial
         &-answers-review_container
@@ -221,16 +236,22 @@
             align-items: flex-end
             visibility: hidden
             //+opacity(0,background-color,$ok-color)
-            backdrop-filter: blur(4px)
+            transition: all .8s
             &.active
                 //+opacity(1,background-color,$ok-color)
+                backdrop-filter: blur(4px)
                 visibility: visible
+                .score-answers-review
+                    transform: none
+
         &-answers-review
             width: 100%
             height: calc(100% - 78px)
             padding: 8px 16px 0
             border-top-left-radius: 20px
             border-top-right-radius: 20px
+            transform: translateY(100%)
+            transition: all .8s ease-out
             h2
                 margin-bottom: 12px
                 text-align: center
@@ -241,7 +262,7 @@
             height: 90%
             padding-right: 5px
         .toggle-answers-review
-            display: none
+            display: flex
         footer
             width: 100%
             bottom: 0

diff --git a/views/screens/outro.blade.php b/views/screens/outro.blade.php
index aff91b1dc454e7adccdf9df9c217c200b654b64f..7f05bc87ed475c2966cf21caad12ba1f2e928eac 100644 (file)
--- a/views/screens/outro.blade.php
+++ b/views/screens/outro.blade.php
@@ -5,24 +5,27 @@
             <div class="score-content-wrapper">
                 <div class="score-counter">
                     <div id="progress-counter">
-                        <span id="score-counter">0</span><span>/</span><span id="maxScore-counter">0</span>
-                        <svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="SCORE" x="0px" y="0px" viewBox="0 0 194 194" style="enable-background:new 0 0 194 194;" xml:space="preserve">
+                        <span class="score-text" id="score-counter">0</span>
+                        <span class="score-text">/</span>
+                        <span class="score-text" id="maxScore-counter">8</span>
+                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="SCORE" x="0px" y="0px" viewBox="0 0 148 148" style="enable-background:new 0 0 148 148;" xml:space="preserve">
                             <style type="text/css">
-                                .st0{opacity:8.000000e-02;fill:#250C66;enable-background:new    ;}
-                                .st1{opacity:0.16;fill:none;stroke:#FFFFFF;stroke-miterlimit:10;enable-background:new    ;}
-                                .st2{fill:none;stroke-linecap:round;stroke-miterlimit:10;}
+                                .st0{opacity:0.16;fill:none;stroke:#FFFFFF;stroke-miterlimit:10;enable-background:new    ;}
+                                .st1{fill:none;stroke-linecap:round;stroke-miterlimit:10;}
                             </style>
-                            <circle id="overlay-circle" class="st0" cx="97" cy="97" r="97"/>
-                            <circle id="circle" class="st1" cx="97" cy="97" r="70"/>
-                            <circle id="progress-circle" class="st2" cx="97" cy="97" r="70" stroke="currentColor"/>
+                            <circle id="circle" class="st0" cx="74" cy="74" r="70"/>
+                            <circle id="progress-circle" class="st1" cx="74" cy="74" r="70" stroke="currentColor"/>
                         </svg>
                     </div>
                 </div>
                 <div class="score-text">
                     <h1>Congratulation!</h1>
-                    <p class="subtitle">You have completed the quiz<br/> with <span id="score-text"></span>
-                        correct answers out of <span id="maxScore-text"></span>
-                    </p>
+                    <div class="subtitle">
+                        <p class="word">You have completed the quiz</p><br/>
+                        <p class="word">with <span id="score-text"></span>
+                            correct answers out of <span id="maxScore-text"></span>
+                        </p>
+                    </div>
                     @if($data->restart_button)
                         <div class="restart-sentence-mobile">Want to improve your score?</div>
                         <a class="btn secondary restart restart-mobile">