From: soufiane Date: Mon, 28 Aug 2023 14:26:39 +0000 (+0200) Subject: wip #6194 @4:00 animations footer, outro, corrections responsive X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=b1cef06ba8306b560fd171e2cb0ce6e9977e903d;p=fluidbook-toolbox-quiz.git wip #6194 @4:00 animations footer, outro, corrections responsive --- diff --git a/js/quiz.animations.js b/js/quiz.animations.js index ee4915e..88c6d04 100644 --- 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 2e3e89a..b27f0c2 100644 --- 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 a6677ee..b38c03e 100644 --- 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 6cd50e5..6db62bf 100644 --- 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 ed8fdca..cac7809 100644 --- 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 3a6468c..55a8431 100644 --- 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 aff91b1..7f05bc8 100644 --- a/views/screens/outro.blade.php +++ b/views/screens/outro.blade.php @@ -5,24 +5,27 @@
- 0/0 - + 0 + / + 8 + - - - + +

Congratulation!

-

You have completed the quiz
with - correct answers out of -

+
+

You have completed the quiz


+

with + correct answers out of +

+
@if($data->restart_button)
Want to improve your score?