From: soufiane Date: Fri, 29 Sep 2023 14:44:34 +0000 (+0200) Subject: wait #6323 @2:30 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=971b2d8fe423076aa1dd0b610dfb7223ba7c0ed8;p=fluidbook-toolbox-quiz.git wait #6323 @2:30 --- diff --git a/js/quiz.l10n.js b/js/quiz.l10n.js index 19d4be6..1180af3 100644 --- a/js/quiz.l10n.js +++ b/js/quiz.l10n.js @@ -5,10 +5,15 @@ function QuizL10n(quiz) { } QuizL10n.prototype = { - __: function (str) { + __: function (str, replace = {}) { if (this.quiz.data.l10n[str] !== undefined && this.quiz.data.l10n[str] != null) { - return this.quiz.data.l10n[str]; + str = this.quiz.data.l10n[str]; } + + for(const k in replace) { + str = str.replace(':'+k,replace[k]) + } + return str; }, } diff --git a/js/quiz.screen.outro.js b/js/quiz.screen.outro.js index ef09af8..e84f12e 100644 --- a/js/quiz.screen.outro.js +++ b/js/quiz.screen.outro.js @@ -25,8 +25,9 @@ QuizScreenOutro.prototype = { 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", { + let tl = gsap.timeline({delay: .4}) + + tl.to(".active-screen .title-header", { y: 0 }) .to(".active-screen footer", { @@ -35,14 +36,14 @@ QuizScreenOutro.prototype = { .to("#progress-counter", { scale: 1, }) - .to(".active-screen #progress-circle", { - drawSVG: percent+"%", + tl.to(".active-screen #progress-circle", { + drawSVG: percent + "%", duration: 1.5, ease: "power4.easeOut" }, ">-0.5") - .to(".score-text", { - scale: 1, - },1.3) + tl.to(".score-text", { + scale: 1, + }, 1.3) .from("#score-counter", { innerText: 0, duration: 1.85, @@ -74,34 +75,56 @@ QuizScreenOutro.prototype = { show: function () { const $this = this + let maxScore = this.quiz.score.maxScore,score = this.quiz.score.score + let nok = {title: this.quiz.l10n.__("Ooops!"),text: this.quiz.l10n.__("Unfortunately, you did not get enough correct answers (:score out of :maxScore).", {'score':score,'maxScore':maxScore})+" "+this.quiz.l10n.__("Please go back and review the content before retaking the quiz.")} + let ok = {title: this.quiz.l10n.__("Congratulation!"),text: this.quiz.l10n.__("You have completed the quiz with :score correct answers out of :maxScore", {'score':score,'maxScore':maxScore})} + let counter = $("#container-score") + let percent = (score/maxScore) * 100 + + if (quiz.score.isPassed()===false) { + this.displayResultContent(nok,"nok",counter) + } else { + this.displayResultContent(ok,"ok",counter) + } - let maxScore = this.quiz.score.maxScore, - score = this.quiz.score.score - - let status = this.quiz.score.questionStatus - let reviewList = this.quiz.question.getAll(); - - let absPath = window.location.href + // + setTimeout(function() { + return $this.animeConfetti() + }, 2500) - const counter = $("#progress-counter") + $("[id^=score-]").text(score) + $("[id^=maxScore-]").text(maxScore) - // + this.animate(score,percent) + this.displayReviewList() this.checkScorm() + }, - if (score < (maxScore / 2)) { - counter.addClass("nok") - } else if (score >= (maxScore / 2)) { - counter.addClass("ok") + animeConfetti: function() { + this.quiz.animations.load("CONFETTI", "#anime-result", '', false); + }, - setTimeout(function() { - return $this.animationOk() - }, 2700) + checkScorm: function() { + const $this = this + if (this.quiz.scorm.enabled === true) { + $(document).on("click", "#leave-quiz", function () { + $this.quiz.scorm.quit() + }) + } else { + $("#leave-quiz").hide() } + }, - const percent = (score/maxScore) * 100 + displayResultContent: function(result,status,counter) { + $(".score-text h1").text(result.title) + $(".score-text p").text(result.text) + counter.addClass(status) + }, - $("[id^=score-]").text(score) - this.animate(score,percent) + displayReviewList: function() { + let $ul = $("#answers-list") + let reviewList = this.quiz.question.getAll(); + let status = this.quiz.score.questionStatus reviewList = reviewList.map((c, i) => { return { @@ -112,10 +135,6 @@ QuizScreenOutro.prototype = { 'status': status[i].ok } }) - let $ul = $("#answers-list") - - //$("[id^=score-]").text(score) - $("[id^=maxScore-]").text(maxScore) // // HANDLEBARS TEMPLATING @@ -135,21 +154,6 @@ QuizScreenOutro.prototype = { // mise en place de la scrollbar personnalisé // https://github.com/Grsmto/simplebar/tree/master/packages/simplebar const simpleBar = new SimpleBar($ul.get(0)) - }, - - animationOk: function() { - this.quiz.animations.load("CONFETTI", "#anime-ok", '', false); - }, - - checkScorm: function() { - const $this = this - if (this.quiz.scorm.enabled === true) { - $(document).on("click", "#leave-quiz", function () { - $this.quiz.scorm.quit() - }) - } else { - $("#leave-quiz").hide() - } } }; diff --git a/js/quiz.screens.js b/js/quiz.screens.js index cec26c5..4964490 100644 --- a/js/quiz.screens.js +++ b/js/quiz.screens.js @@ -32,7 +32,7 @@ QuizScreens.prototype = { }); // Cliquer sur le bouton suivant - $(document).on("click", ".next .action", function () { + $(document).on("click", ".active-screen.next .action", function () { if (($this.currentQuestionAnswers.length === 0 && !parseInt($this.quiz.question.current().countdown_enable)) || (parseInt($this.quiz.question.current().countdown_enable) && $this.intervalCountDown !== 0 && $this.currentQuestionAnswers.length === 0)) { alert('Please select at least one answer'); return false; diff --git a/style/105-outro.sass b/style/105-outro.sass index 9a0079a..d0b518c 100644 --- a/style/105-outro.sass +++ b/style/105-outro.sass @@ -39,6 +39,20 @@ position: relative +font-size(80) margin-right: 60px + flex-shrink: 0 + &.nok + #progress-counter * + color: $nok-color + #anime-result svg * + fill: $nok-color + stroke: $nok-color + &.ok + #progress-counter * + color: $ok-color + #anime-result svg * + fill: $ok-color + stroke: $ok-color + #progress-counter width: 100% height: 100% @@ -48,10 +62,6 @@ border-radius: 100px background: transparent +flex-config(center,false,false,center) - &.nok * - color: $nok-color - &.ok * - color: $ok-color svg overflow: visible @@ -188,7 +198,7 @@ left: 1px right: 1px - #anime-ok + #anime-result transform: scale(1.7) .m @@ -286,5 +296,5 @@ &-mobile +flex-config(center) - #anime-ok + #anime-result transform: scale(2) diff --git a/views/screens/outro.blade.php b/views/screens/outro.blade.php index 4101bde..225bab2 100644 --- a/views/screens/outro.blade.php +++ b/views/screens/outro.blade.php @@ -3,7 +3,7 @@
-
+
0 / @@ -30,13 +30,13 @@
-
+
-

{{$__('Congratulation!')}}

+

-

{!! $__('You have completed the quiz with :score correct answers out of :total',['score'=>"",'total'=>'']) !!}

+

@if($data->restart_button)
{{$__('Want to improve your score?')}}
diff --git a/views/screens/question_match.blade.php b/views/screens/question_match.blade.php index c90f074..b04a69e 100644 --- a/views/screens/question_match.blade.php +++ b/views/screens/question_match.blade.php @@ -32,7 +32,7 @@
- @foreach($propositions as $prop) + @foreach($propositions as $key => $prop)
{{ $prop['p'] }}