From d0b499e934902b2a6e8f0e48361253ace48fbdc7 Mon Sep 17 00:00:00 2001 From: Vincent Vanwaelscappel Date: Wed, 6 Sep 2023 15:21:42 +0200 Subject: [PATCH] wip #6248 @1 --- js/quiz.animations.js | 27 ++++++++------------ js/quiz.js | 5 +++- js/quiz.l10n.js | 17 ++++++++++++ js/quiz.resize.js | 4 +-- views/footer.blade.php | 12 ++++----- views/header_question.blade.php | 4 +-- views/screens/intro.blade.php | 8 +++--- views/screens/outro.blade.php | 20 +++++++-------- views/screens/question_draganddrop.blade.php | 6 ++--- 9 files changed, 59 insertions(+), 44 deletions(-) create mode 100644 js/quiz.l10n.js diff --git a/js/quiz.animations.js b/js/quiz.animations.js index 88c6d04..0276729 100644 --- a/js/quiz.animations.js +++ b/js/quiz.animations.js @@ -39,8 +39,11 @@ QuizAnimations.prototype = { }, instantReviewAnimation: function (status) { + let ok = [this.quiz.l10n.__('Fantastic'), this.quiz.l10n.__('Impressive'), this.quiz.l10n.__('Perfect'), this.quiz.l10n.__('Well done'), this.quiz.l10n.__('Bravo'), this.quiz.l10n.__('Good job'), this.quiz.l10n.__('Excellent'), this.quiz.l10n.__('Impressive'), this.quiz.l10n.__('Great job'), this.quiz.l10n.__('Superb'), this.quiz.l10n.__('Terrific')]; + let nok = [this.quiz.l10n.__('Almost'), this.quiz.l10n.__('Not quite'), this.quiz.l10n.__('Keep trying'), this.quiz.l10n.__('Nearly there'), this.quiz.l10n.__('Nice try')]; + let selector = $("#instantReviewAnimation") - let text = status === "NOK" ? "Not quite" : "Perfect" + let text = status === "NOK" ? nok[Math.floor(Math.random() * nok.length)] : ok[Math.floor(Math.random() * ok.length)]; let $this = this this.quiz.animations.load(status, selector, {'\\$text': text}); selector.addClass("active") @@ -57,11 +60,11 @@ QuizAnimations.prototype = { fadeOut: function (el, remove, timeout = true) { $(el).addClass('animateOpacity disabled').css('opacity', 0); if (remove === true) { - if(timeout) { + if (timeout) { setTimeout(function () { $(el).remove(); }, 500); - }else { + } else { $(el).remove(); } } @@ -72,29 +75,21 @@ QuizAnimations.prototype = { this.quiz.animations.load("RUNNINGMAN_BTN", ".active-screen .runningman", '', true); }, - switchValidateContinueButton: function(activeScreen) { + switchValidateContinueButton: function (activeScreen) { const $this = this gsap.timeline().to(".active-screen .footer-question", { - opacity: 0, - duration: 1, - delay: .5, - ease: 'power4.easeIn', - onComplete: function() { - $(".active-screen .footer-question").css("z-index",3) + opacity: 0, duration: 1, delay: .5, ease: 'power4.easeIn', onComplete: function () { + $(".active-screen .footer-question").css("z-index", 3) } }).to(".active-screen .footer-question", { - y: "100%", - duration: 0, - onComplete: function() { + y: "100%", duration: 0, onComplete: function () { $(activeScreen).find('.btn.continue').removeClass('none') $(activeScreen).find('.btn.validate').addClass('none') // Hide reset button $this.quiz.animations.fadeOut($(activeScreen).find('.btn.reset'), true, false); } }).to(".active-screen .footer-question", { - y: 0, - duration: .5, - opacity: 1 + y: 0, duration: .5, opacity: 1 }) } diff --git a/js/quiz.js b/js/quiz.js index b27f0c2..8d8e52c 100644 --- a/js/quiz.js +++ b/js/quiz.js @@ -11,12 +11,14 @@ import QuizAccessibility from './quiz.accessibility'; import QuizUtils from './quiz.utils'; import QuizScreens from './quiz.screens'; import QuizProgressbar from "./quiz.progressbar"; +import QuizL10n from "./quiz.l10n"; window.cubeSCORM = new CubeSCORM(); window.$ = window.jQuery = $; import ResizeObserver from 'resize-observer-polyfill'; + window.ResizeObserver = ResizeObserver; function Quiz() { @@ -39,7 +41,8 @@ Quiz.prototype = { this.utils = new QuizUtils(this); this.accessibility = new QuizAccessibility(this); this.screens = new QuizScreens(this); - this.progressbar=new QuizProgressbar(this); + this.progressbar = new QuizProgressbar(this); + this.l10n = new QuizL10n(this); console.log(this.data); // ICI tout commence vraiment diff --git a/js/quiz.l10n.js b/js/quiz.l10n.js new file mode 100644 index 0000000..c56b7b4 --- /dev/null +++ b/js/quiz.l10n.js @@ -0,0 +1,17 @@ +import QuizAccessibility from "./quiz.accessibility"; + +function QuizL10n(quiz) { + this.quiz = quiz; +} + +QuizL10n.prototype = { + __: function (str) { + if (this.quiz.data.l10n[str] !== undefined) { + return this.quiz.data.l10n[str]; + } + return str; + }, +} + +export default QuizL10n; + diff --git a/js/quiz.resize.js b/js/quiz.resize.js index 6d5c755..7a42146 100644 --- a/js/quiz.resize.js +++ b/js/quiz.resize.js @@ -13,8 +13,8 @@ QuizResize.prototype = { $('html').removeClass('m'); } - const iconReset = getSpriteIcon("quiz-reset") - const textReset = "Reset" + const iconReset = getSpriteIcon("quiz-reset"); + const textReset = this.quiz.l10n.__("Reset"); // Exécuter ici toutes opérations qui doivent intervenir lorsque la fenêtre est redimensionnée par le système ou l'utilisateur // diff --git a/views/footer.blade.php b/views/footer.blade.php index 8be8fc4..f0b1106 100644 --- a/views/footer.blade.php +++ b/views/footer.blade.php @@ -1,14 +1,14 @@