From: soufiane <soufiane@cubedesigners.com>
Date: Fri, 25 Aug 2023 15:38:23 +0000 (+0200)
Subject: wip #6194 @3:00 animation outro, score
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=5f24d0b9ce88334d292da0d000ad5d1fe6a50b98;p=fluidbook-toolbox-quiz.git

wip #6194 @3:00 animation outro, score
---

diff --git a/js/quiz.screen.intro.js b/js/quiz.screen.intro.js
index 5aab706..623b42c 100644
--- a/js/quiz.screen.intro.js
+++ b/js/quiz.screen.intro.js
@@ -1,5 +1,6 @@
 import gsap from "gsap";
 import SplitType from 'split-type';
+import { DrawSVGPlugin } from "gsap/DrawSVGPlugin.js";
 
 function QuizScreenIntro(screens) {
     this.quiz = screens.quiz;
@@ -9,7 +10,6 @@ function QuizScreenIntro(screens) {
 QuizScreenIntro.prototype = {
     show: function () {
         let $this = this;
-
         this.screens.showScreen('welcome', function () {
             $this.animate();
             $("#start").on("click", function () {
@@ -20,15 +20,19 @@ 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'})
         gsap.timeline({delay: .4})
-        .to("#title", {
+        .to(".active-screen .title-header", {
             y: 0
         })
+        .from("#Ellipse_33_00000130640493289073085310000003655705460857783465_", {
+            drawSVG: 0
+        })
         .to("#start", {
-            y: 0
+            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 cffde79..79eb432 100644
--- a/js/quiz.screen.outro.js
+++ b/js/quiz.screen.outro.js
@@ -1,3 +1,4 @@
+import gsap from "gsap";
 import SimpleBar from 'simplebar'
 import 'simplebar/dist/simplebar.css'
 import Handlebars from "handlebars";
@@ -16,6 +17,23 @@ QuizScreenOutro.prototype = {
         })
     },
 
+    animate: function (percent) {
+        console.log("percent",percent)
+        gsap.to(".active-screen #progress-circle", {drawSVG: 0, duration: 0})
+        gsap.timeline({delay: .4})
+            .to(".active-screen .title-header", {
+                y: 0
+            })
+            .to(".active-screen footer", {
+                y: 0
+            })
+            .to(".active-screen #progress-circle", {
+                drawSVG: percent+"%",
+                duration: 2,
+                ease: "power4.easeIn"
+            })
+    },
+
     show: function () {
         let maxScore = this.quiz.score.maxScore,
             score = this.quiz.score.score
@@ -30,6 +48,10 @@ QuizScreenOutro.prototype = {
             counter.addClass("ok")
         }
 
+        const percent = (score/maxScore) * 100
+
+        this.animate(percent)
+
         reviewList = reviewList.map((c, i) => {
             return {
                 'question': c['question'],
diff --git a/style/101-header-footer.sass b/style/101-header-footer.sass
index 5e69417..af64c6e 100644
--- a/style/101-header-footer.sass
+++ b/style/101-header-footer.sass
@@ -5,7 +5,7 @@ footer
 header
     z-index: 1
 
-#title
+.title-header
     height: 80px
     +flex-config(space-between,false,row,center)
     margin-top: -24px
@@ -51,7 +51,6 @@ header
     z-index: 2
     +padding-container()
     +flex-config(space-between,false,row,center)
-
     .btn.primary
         width: 100%
         max-width: 400px
diff --git a/style/105-outro.sass b/style/105-outro.sass
index 7ba4360..3a6468c 100644
--- a/style/105-outro.sass
+++ b/style/105-outro.sass
@@ -48,13 +48,15 @@
 
             svg
                 overflow: visible
-                width: calc(100% - 12px)
-                height: calc(100% - 12px)
+                width: 100%
                 position: absolute
+                transform: rotate(270deg)
                 circle
-                    stroke-width: 6px
+                    stroke-width: 8px
                 circle:not(#progress-circle)
                     +opacity(.16,color,$texts-color)
+                #overlay-circle
+                    display: none
 
     &-answers-review_container
         width: 36.11111%
@@ -122,11 +124,15 @@
             .answer
                 +opacity(.8,color,$texts-color)
 
+    .toggle-answers-review
+        display: none
+
     footer
         position: absolute
         width: calc(100% - 48px)
         bottom: 24px
         z-index: 1
+        transform: translateY(calc(100% + 24px))
         .restart-sentence
             margin-bottom: 14px
         .controls
@@ -171,6 +177,7 @@
                 left: 1px
                 right: 1px
 
+
 .m
     .score
         height: 600px //680(hauteur de base) - 80(hauteur du header)
@@ -200,6 +207,8 @@
         &-counter
             margin: 0 0 24px
             font-size: 56px
+            #overlay-circle
+                display: initial
         &-answers-review_container
             width: 100%
             height: 100%
diff --git a/views/header_title.blade.php b/views/header_title.blade.php
index 38bd053..ca59938 100644
--- a/views/header_title.blade.php
+++ b/views/header_title.blade.php
@@ -1,4 +1,4 @@
-<header id="title">
-    <h1 id="quizTitle">{{$data->title}}</h1>
+<header class="title-header">
+    <h1>{{$data->title}}</h1>
     <img src="{{$data->theme->logo}}" id="logo"/>
 </header>
diff --git a/views/screens/outro.blade.php b/views/screens/outro.blade.php
index 4262159..aff91b1 100644
--- a/views/screens/outro.blade.php
+++ b/views/screens/outro.blade.php
@@ -6,11 +6,15 @@
                 <div class="score-counter">
                     <div id="progress-counter">
                         <span id="score-counter">0</span><span>/</span><span id="maxScore-counter">0</span>
-                        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" xml:space="preserve">
-                            <circle cx="50" cy="50" r="48" fill="transparent" stroke="currentColor" />
-                            <circle id="progress-circle" fill="none" stroke="currentColor" stroke-width="1.2" stroke-mitterlimit="0" cx="50" cy="50" r="48" stroke-dasharray="360" stroke-linecap="round" transform="rotate(-90 ) translate(-100 0)" >
-                                <!--<animate attributeName="stroke-dashoffset" values="360;0" dur="2s" repeatCount="indefinite"></animate>-->
-                            </circle>
+                        <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">
+                            <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;}
+                            </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"/>
                         </svg>
                     </div>
                 </div>