wip #6194 @2:30 correctif timeline, animation runningman

diff --git a/animations/RUNNINGMAN_BTN.json b/animations/RUNNINGMAN_BTN.json
new file mode 100644 (file)
index 0000000..a47adc5
--- /dev/null
+++ b/animations/RUNNINGMAN_BTN.json
@@ -0,0 +1 @@
+{"v":"5.9.0","fr":60,"ip":0,"op":32,"w":300,"h":300,"nm":"RUNNINGMAN_BTN","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"HEAD","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8,"s":[0]},{"i":{"x":[0],"y":[1.372]},"o":{"x":[0.333],"y":[0]},"t":18,"s":[3]},{"t":30,"s":[0]}],"ix":10},"p":{"a":0,"k":[11.475,7.9,0],"ix":2,"l":2},"a":{"a":0,"k":[11.825,7.9,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,-0.68],[0.632,0],[0,0.68],[-0.631,0]],"o":[[0,0.68],[-0.631,0],[0,-0.68],[0.632,0]],"v":[[4.001,-10.769],[2.857,-9.538],[1.715,-10.769],[2.857,-12]],"c":true},"ix":2},"nm":"Tracé 9","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Fusionner les tracés 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2.45,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Contour 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[10.45,14.45],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":32,"st":-10,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"RIGHT_A","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":5,"s":[-19]},{"t":25,"s":[100]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":5,"s":[12.736,8.604,0],"to":[-0.381,-0.103,0],"ti":[0.381,0.103,0]},{"t":25,"s":[10.45,7.988,0]}],"ix":2,"l":2},"a":{"a":0,"k":[12.736,8.604,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.867,"y":1},"o":{"x":0.133,"y":0},"t":0,"s":[{"i":[[0,0],[-0.842,-0.849],[0,0]],"o":[[0,0],[0.842,0.848],[0,0]],"v":[[2.286,-5.846],[4.068,-2.754],[6.522,-7.532]],"c":false}]},{"t":30,"s":[{"i":[[0,0],[-1.024,-0.596],[0,0]],"o":[[0,0],[0.943,0.549],[0,0]],"v":[[2.286,-5.846],[4.391,-2.998],[9.227,-3.598]],"c":false}]}],"ix":2},"nm":"Tracé 5","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Fusionner les tracés 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2.45,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Contour 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[10.45,14.45],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":32,"st":-10,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"LEFT_A","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":5,"s":[0]},{"t":25,"s":[-120]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":5,"s":[10.45,7.988,0],"to":[0.381,0.103,0],"ti":[-0.381,-0.103,0]},{"t":25,"s":[12.736,8.604,0]}],"ix":2,"l":2},"a":{"a":0,"k":[10.45,7.988,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.867,"y":1},"o":{"x":0.133,"y":0},"t":0,"s":[{"i":[[0,0],[0.567,-0.955],[0,0]],"o":[[0,0],[-0.567,0.955],[0,0]],"v":[[0,-6.462],[-3.308,-4.68],[-3.396,-0.007]],"c":false}]},{"t":30,"s":[{"i":[[0,0],[0.904,-0.725],[0,0]],"o":[[0,0],[-0.924,0.74],[0,0]],"v":[[0,-6.462],[-3.306,-5.305],[0.8,-2.011]],"c":false}]}],"ix":2},"nm":"Tracé 8","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"mm","mm":1,"nm":"Fusionner les tracés 1","mn":"ADBE Vector Filter - Merge","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2.45,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Contour 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[10.45,14.45],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":32,"st":-10,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"BODY","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":8,"s":[0]},{"i":{"x":[0],"y":[1.557]},"o":{"x":[0.333],"y":[0]},"t":18,"s":[2]},{"t":30,"s":[0]}],"ix":10},"p":{"s":true,"x":{"a":0,"k":149.25,"ix":3},"y":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[151.75]},{"i":{"x":[0],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":18,"s":[158.75]},{"t":30,"s":[151.75]}],"ix":4}},"a":{"a":0,"k":[10.225,15.575,0],"ix":1,"l":2},"s":{"a":1,"k":[{"i":{"x":[0.667,0.667,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":8,"s":[1000,1000,100]},{"i":{"x":[0,0,0.667],"y":[1,1,1]},"o":{"x":[0.333,0.333,0.333],"y":[0,0,0]},"t":18,"s":[1000,980,100]},{"t":30,"s":[1000,1000,100]}],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":5,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.572,2.154],[2.286,-5.846]],"c":false}]},{"t":30,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1.075,0.845],[0.03,-6.405]],"c":false}]}],"ix":2},"nm":"Tracé 2","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":5,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.572,2.154],[-1.143,0.923]],"c":false}]},{"t":30,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1.075,0.845],[0.457,2.123]],"c":false}]}],"ix":2},"nm":"Tracé 3","mn":"ADBE Vector Shape - Group","hd":false},{"ind":2,"ty":"sh","ix":3,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":5,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[2.286,-5.846],[0,-6.462]],"c":false}]},{"t":30,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.03,-6.418],[2.334,-5.815]],"c":false}]}],"ix":2},"nm":"Tracé 4","mn":"ADBE Vector Shape - Group","hd":false},{"ind":3,"ty":"sh","ix":4,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":5,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-1.143,0.923],[0,-6.462]],"c":false}]},{"t":30,"s":[{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[0.457,2.123],[2.322,-5.828]],"c":false}]}],"ix":2},"nm":"Tracé 6","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2.45,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Contour 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[10.45,14.45],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":5,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":32,"st":-10,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"LEFT_H","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"t":30,"s":[-60]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[9.307,15.373,0],"to":[0.286,0.205,0],"ti":[-0.286,-0.205,0]},{"t":30,"s":[11.022,16.604,0]}],"ix":2,"l":2},"a":{"a":0,"k":[9.307,15.373,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[{"i":[[0,0],[1.368,-0.853],[0,0]],"o":[[0,0],[-1.368,0.853],[0,0]],"v":[[-1.143,0.923],[-2.557,6.872],[-8.55,7.971]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":8,"s":[{"i":[[0,0],[1.152,-0.754],[0,0]],"o":[[0,0],[-1.152,0.754],[0,0]],"v":[[-1.333,0.989],[-0.328,8.015],[-5.065,4.81]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":18,"s":[{"i":[[0,0],[0.112,-1.567],[0,0]],"o":[[0,0],[-0.098,1.373],[0,0]],"v":[[-1.143,0.923],[1.84,6.328],[-3.592,6.805]],"c":false}]},{"t":30,"s":[{"i":[[0,0],[0.165,-1.293],[0,0]],"o":[[0,0],[-0.137,1.076],[0,0]],"v":[[-1.431,0.425],[1.442,6.622],[-3.304,11.174]],"c":false}]}],"ix":2},"nm":"Tracé 7","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2.45,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Contour 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[10.45,14.45],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":32,"st":-10,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"RIGHT_H","parent":4,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"t":30,"s":[60]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0},"t":0,"s":[11.022,16.604,0],"to":[-0.286,-0.205,0],"ti":[0.286,0.205,0]},{"t":30,"s":[9.307,15.373,0]}],"ix":2,"l":2},"a":{"a":0,"k":[11.022,16.604,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.667,"y":0.552},"o":{"x":0.333,"y":0},"t":0,"s":[{"i":[[0,0],[0.821,0.814],[0,0]],"o":[[0,0],[-0.789,-0.781],[0,0]],"v":[[8.367,9.175],[6.867,2.787],[-0.228,2.254]],"c":false}]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.333,"y":0.333},"t":10,"s":[{"i":[[0,0],[0.8,1.125],[0,0]],"o":[[0,0],[-0.784,-1.102],[0,0]],"v":[[8.665,12.141],[5.634,6.441],[0.572,2.154]],"c":false}]},{"i":{"x":0.667,"y":0.667},"o":{"x":0.162,"y":0.162},"t":14,"s":[{"i":[[0,0],[0.768,1.26],[0,0]],"o":[[0,0],[-0.856,-1.405],[0,0]],"v":[[7.326,12.403],[5.698,6.354],[0.206,2.265]],"c":false}]},{"i":{"x":0.667,"y":0.666},"o":{"x":0.333,"y":0.333},"t":18,"s":[{"i":[[0,0],[0.837,1.293],[0,0]],"o":[[0,0],[-0.735,-1.135],[0,0]],"v":[[6.73,13.128],[5.424,6.586],[0.88,2.09]],"c":false}]},{"i":{"x":0.667,"y":1},"o":{"x":0.333,"y":0.401},"t":26,"s":[{"i":[[0,0],[0.837,1.293],[0,0]],"o":[[0,0],[-0.735,-1.135],[0,0]],"v":[[5.458,12.627],[4.749,6.819],[0.572,2.154]],"c":false}]},{"t":30,"s":[{"i":[[0,0],[0.849,1.47],[0,0]],"o":[[0,0],[-0.696,-1.205],[0,0]],"v":[[2.978,12.094],[4.813,5.623],[0.572,2.154]],"c":false}]}],"ix":2},"nm":"Tracé 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[1,1,1,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":2.45,"ix":5},"lc":2,"lj":2,"bm":0,"nm":"Contour 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[10.45,14.45],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformer "}],"nm":"Groupe 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":32,"st":-10,"bm":0}],"markers":[]}
\ No newline at end of file

diff --git a/js/quiz.animations.js b/js/quiz.animations.js
index 6d92b177a646f1ec754f90695e89d4a04342e5c9..3453e30c610b4e83ad58827851338671e3b99831 100644 (file)
--- a/js/quiz.animations.js
+++ b/js/quiz.animations.js
@@ -22,7 +22,7 @@ QuizAnimations.prototype = {
 
 
     // Load the animation "name" in container
-    load: function (name, container, replace) {
+    load: function (name, container, replace, loop = false) {
         let json = this.quiz.data.animations[name];
         if (json) {
             for (const k in replace) {
@@ -31,7 +31,7 @@ QuizAnimations.prototype = {
             lottie.loadAnimation({
                 container: $(container).get(0),
                 renderer: 'svg',
-                loop: false,
+                loop: loop,
                 autoplay: true,
                 animationData: JSON.parse(json),
             });
@@ -62,6 +62,11 @@ QuizAnimations.prototype = {
             }, 500);
         }
     },
+
+    runningMan: function () {
+        $(".runningman").empty()
+        this.quiz.animations.load("RUNNINGMAN_BTN", ".active-screen .runningman", '', true);
+    }
 }
 
 

diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index c6806927153572d19eb09e1dec282055ed44cd5e..217cbf75ecd810c733d27ec1f3c90db3ae38b440 100644 (file)
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -163,18 +163,20 @@ QuizScreens.prototype = {
                     if($this.quiz.question.current() !== undefined) {
                         if (parseInt($this.quiz.question.current().countdown_enable)) {
                             $this.countdown()
+                            setTimeout(() => {
+                                $this.quiz.animations.runningMan()
+                                $(".runningman").css("opacity", 1)
+                            }, 350)
                         }
                     }
                 }
-            }, 1.2)
+            }, 1.4)
 
             // Reset form to prevent browser letting a option selected after a refresh
             $this.resetForm();
             $this.currentQuestionAnswers = [];
             $this.quiz.progressbar.update();
 
-
-
             if (screen === 'outro') {
                 $this.outro.show();
             }

diff --git a/style/100-global.sass b/style/100-global.sass
index 3eafac5829f66059935208676727b9d20049f166..4fe992ef6deccae9b87c838b69ce20cc12fcba2a 100644 (file)
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -89,6 +89,14 @@ body
             width: 15px
             height: 15px
 
+.runningman
+    height: 34px
+    display: flex
+    position: absolute
+    right: 20px
+    opacity: 0
+    transition: opacity .2s
+
 .screen
     position: relative
     z-index: 1

diff --git a/views/footer.blade.php b/views/footer.blade.php
index f630c6a90798e058ef9ebdf3edc902bc53ed367b..0133295215bf8de2cc58da64bfeac4087628fe0f 100644 (file)
--- a/views/footer.blade.php
+++ b/views/footer.blade.php
@@ -8,6 +8,8 @@
     <a class="btn primary action validate {{$question['countdown_enable'] ? 'countdown' : ''}}" aria-keyshortcuts="Space">
         <span class="text">Validate answer</span>
         <span class="access space">space</span>
+        <span class="runningman"></span>
+        
         @isset($time)
             <span data-icon="running-man"></span>
         @endisset

diff --git a/views/screens/intro.blade.php b/views/screens/intro.blade.php
index a75421c057ed26bf37197fdb778c9fad3dd56780..89d88898bf61b05b3868b23727bf2df20e2eaa44 100644 (file)
--- a/views/screens/intro.blade.php
+++ b/views/screens/intro.blade.php
@@ -12,6 +12,8 @@
         <img class="mobile" src="{{$data->theme->introImageMobile}}" />
     </div>
     <footer class="footer">
-        <a id="start" aria-keyshortcuts="Space" class="btn primary">{{$data->intro_button}}<span class="access space">space</span></a>
+        <a id="start" aria-keyshortcuts="Space" class="btn primary">
+            {{$data->intro_button}}<span class="access space">space</span>
+        </a>
     </footer>
 </div>