From: soufiane Date: Mon, 14 Aug 2023 16:20:50 +0000 (+0200) Subject: wip #6182 @7:00 intégration question drag and drop X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=bfaaa14e5e37c98e7f50f155a3c71515f6a1bd24;p=fluidbook-toolbox.git wip #6182 @7:00 intégration question drag and drop --- diff --git a/resources/quizv2/js/quiz.js b/resources/quizv2/js/quiz.js index 90957606e..b99daff2e 100644 --- a/resources/quizv2/js/quiz.js +++ b/resources/quizv2/js/quiz.js @@ -47,8 +47,10 @@ Quiz.prototype = { this.timeoutAnimation = false - // - //this.animations.triggeredBtn() + // commencer + $(document).on("click", "#start", function() { + $this.start() + }) // $("#quiz").css("background-image","url("+this.data.theme.backgroundImage+")") @@ -128,6 +130,18 @@ Quiz.prototype = { this.activeNav() }, + start: function() { + const $this = this + gsap.timeline().to("#welcome-screen", { + opacity: 0, + onComplete: function() { + let responses = $this.responses + $this.next(responses); + $("#welcome-screen").removeClass("next active-screen").addClass("none").next(".container-screen").removeClass("none").addClass("next active-screen") + } + }) + }, + updateIcons: function () { $("[data-icon]").each(function () { var iconId = 'quiz-' + $(this).data('icon'); @@ -156,10 +170,11 @@ Quiz.prototype = { // on arrête l'animation si le joueur passe à la question suivante this.stopAnimationValidation() - const $el = $(".active-screen .btn.action") let status = quiz.score.questionStatus let currentPosition = quiz.score.lastAnsweredQuestion + 1 + const $el = $(".active-screen .btn.action") + quiz.score.updateScore() // if form exist and responses are validated // dont miss to add this second condition @@ -203,7 +218,7 @@ Quiz.prototype = { }, updateBtnValidation: function(status) { - let $btnAction = $("#footer .action"), + let $btnAction = $(".footer-question .action"), validationText = $btnAction.data("validation-text"), continueText = $btnAction.data("continue-text") diff --git a/resources/quizv2/style/005-utilities.sass b/resources/quizv2/style/005-utilities.sass index 41ac547e6..adc845c6b 100644 --- a/resources/quizv2/style/005-utilities.sass +++ b/resources/quizv2/style/005-utilities.sass @@ -5,7 +5,7 @@ position: relative .none - display: none + display: none !important \:root --space-21-66: clamp(1.31rem, calc(0.29rem + 5.11vw), 4.13rem) diff --git a/resources/quizv2/style/101-header-footer.sass b/resources/quizv2/style/101-header-footer.sass index e4e046d67..d4a269eb0 100644 --- a/resources/quizv2/style/101-header-footer.sass +++ b/resources/quizv2/style/101-header-footer.sass @@ -1,5 +1,5 @@ header, -#footer +footer position: relative header @@ -27,6 +27,7 @@ header border-radius: 100px +opacity(.16) display: inline-flex + transition: background-color .3s &:not(:last-of-type) margin-right: 7px &.active @@ -38,7 +39,7 @@ header h1 +font-size(24) -#footer +.footer position: absolute bottom: 0 left: 0 diff --git a/resources/quizv2/style/103-question-multiple.sass b/resources/quizv2/style/103-question-multiple.sass index e865c8389..fed8e2e90 100644 --- a/resources/quizv2/style/103-question-multiple.sass +++ b/resources/quizv2/style/103-question-multiple.sass @@ -1,4 +1,4 @@ -.question-multiple +.screen.question-multiple top: 93px .list display: grid diff --git a/resources/quizv2/style/104-animations.sass b/resources/quizv2/style/104-animations.sass index 98a8e4b3e..4ef9ee3bd 100644 --- a/resources/quizv2/style/104-animations.sass +++ b/resources/quizv2/style/104-animations.sass @@ -8,6 +8,8 @@ height: 100% +opacity(.4, background-color, $neutral-color) backdrop-filter: blur(4px) + // règle ie > 9 à tester + // filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3') opacity: 0 visibility: hidden transition: all 1s diff --git a/resources/views/quizv2/footer.blade.php b/resources/views/quizv2/footer.blade.php index 460f52e0f..a4de04a21 100644 --- a/resources/views/quizv2/footer.blade.php +++ b/resources/views/quizv2/footer.blade.php @@ -1,4 +1,4 @@ -