From c8ca9a975935b23771e9970aeb17a267d6ff1745 Mon Sep 17 00:00:00 2001 From: soufiane Date: Mon, 7 Aug 2023 17:33:07 +0200 Subject: [PATCH] wip #6182 @4:30 --- resources/quizv2/js/quiz.js | 52 ++++++++++++++++--- resources/quizv2/js/quiz.question.js | 6 ++- resources/quizv2/style/101-header-footer.sass | 6 ++- .../quizv2/style/103-question-multiple.sass | 29 +++++------ resources/views/quizv2/footer.blade.php | 4 +- .../views/quizv2/header_question.blade.php | 2 +- 6 files changed, 70 insertions(+), 29 deletions(-) diff --git a/resources/quizv2/js/quiz.js b/resources/quizv2/js/quiz.js index 65731ed7d..52f94808f 100644 --- a/resources/quizv2/js/quiz.js +++ b/resources/quizv2/js/quiz.js @@ -86,8 +86,7 @@ Quiz.prototype = { // Valider les réponses $(document).on("click", ".next .action", function () { let responses = $this.responses - $this.validateResponse(responses); - $this.next(); + $this.next(responses); }) key('space', function (e){ e.preventDefault() @@ -102,6 +101,9 @@ Quiz.prototype = { e.preventDefault() $this.resetForm() }) + + // + this.activeNav() }, updateIcons: function () { @@ -128,16 +130,28 @@ Quiz.prototype = { this.resize.resize(); }, - next: function () { + next: function (responses) { const $el = $(".active-screen .btn.action") - const form = $(".active-screen form") + let status = quiz.score.questionStatus + let currentPosition = this.question.currentPosition() + + quiz.score.updateScore() // if form exist and responses are validated // dont miss to add this second condition - if(form.length > 0) { - return false + if($(".active-screen form").length > 0) { + if(status.length > 0) { + if(status[currentPosition].ok === "not answered") { + this.validateResponse(responses); + this.updateBtnValidation("validated") + return false + } + } } + $el.parents(".container-screen").addClass("none").removeClass("next active-screen").next(".container-screen").removeClass("none").addClass("next active-screen") this.resetForm() + this.activeNav(currentPosition) + this.updateBtnValidation() }, setDisplay: function() { @@ -155,6 +169,14 @@ Quiz.prototype = { $("form").find("input").prop("checked", false) }, + updateBtnValidation: function(status) { + let $btnAction = $("#footer .action"), + validationText = $btnAction.data("validation-text"), + continueText = $btnAction.data("continue-text") + + $btnAction.find('.text').text(status === "validated" ? continueText : validationText) + }, + validateResponse: function(responses) { const form = $(".active-screen form") const activeScreen = $(".active-screen") @@ -174,9 +196,25 @@ Quiz.prototype = { } }, + activeNav: function(position = 1) { + const questionStatus = quiz.score.questionStatus + let $el = $(".progress-container .progress-item:nth-child("+position+")") + $el.addClass("active") + + for(let k in questionStatus) { + let $el = $(".progress-container .progress-item:nth-child("+k+")") + if(questionStatus[k].ok === 'ok') { + $el.addClass("ok") + }else if(questionStatus[k].ok === 'nok'){ + $el.addClass("nok") + } + } + }, + animationValidation: function(status) { let selector = $("#anim") - this.animations.load(status, selector, {'\\$text': 'Salut :)'}); + let text = status === "NOK" ? "Not quite" : "Perfect" + this.animations.load(status, selector, {'\\$text': text}); selector.addClass("active") setTimeout(function(){ selector.removeClass("active") diff --git a/resources/quizv2/js/quiz.question.js b/resources/quizv2/js/quiz.question.js index ecc3cd1a0..0f2afe813 100644 --- a/resources/quizv2/js/quiz.question.js +++ b/resources/quizv2/js/quiz.question.js @@ -16,8 +16,12 @@ QuizQuestion.prototype = { return this.quiz.data.questions[parseInt(pos)] }, + currentPosition: function() { + return $(".active-screen").data("position"); + }, + current: function() { - let currentPosition = $(".active-screen").data("position"); + let currentPosition = this.currentPosition() return this.byPosition(currentPosition) }, diff --git a/resources/quizv2/style/101-header-footer.sass b/resources/quizv2/style/101-header-footer.sass index 29955063f..04114ccde 100644 --- a/resources/quizv2/style/101-header-footer.sass +++ b/resources/quizv2/style/101-header-footer.sass @@ -1,17 +1,20 @@ header, #footer position: relative + +header z-index: 1 #title height: 80px +flex-config(space-between,false,row,center) margin-top: -24px + #logo height: 40px filter: brightness(10) -#question +.header-question text-align: center .abovetitle +font-size(16) @@ -40,6 +43,7 @@ header, bottom: 0 left: 0 width: 100% + z-index: 2 +flex-config(space-between,false,row,center) +padding-container() diff --git a/resources/quizv2/style/103-question-multiple.sass b/resources/quizv2/style/103-question-multiple.sass index 8ef46dc6b..4ace2d814 100644 --- a/resources/quizv2/style/103-question-multiple.sass +++ b/resources/quizv2/style/103-question-multiple.sass @@ -9,36 +9,31 @@ width: 100% height: 58px @extend .radius - background-color: $neutral-color + +opacity(.80,background-color,$neutral-color) +flex-config(space-between,false,false,center) padding: 0 16px cursor: pointer border: 2px solid rgba($texts-color, .24) position: relative overflow: hidden - &.ok - // - &.nok - // - &.neutral - // - &.missed + &:after + content: "" + width: 100% + height: 100% + position: absolute + top: 0 + left: 0 + &.ok:after, + &.missed:after // - +opacity(.80,background-color,$neutral-color) + +opacity(.24,background-color,$ok-color) + * z-index: 1 input:checked+label border-color: $texts-color &:after - content: "" - width: 100% - height: 100% +opacity(.16) - position: absolute - top: 0 - left: 0 &.nok:after background: transparent - &.missed:after - +opacity(.24,background-color,$ok-color) diff --git a/resources/views/quizv2/footer.blade.php b/resources/views/quizv2/footer.blade.php index 5f8ab494c..460f52e0f 100644 --- a/resources/views/quizv2/footer.blade.php +++ b/resources/views/quizv2/footer.blade.php @@ -5,8 +5,8 @@ R @endisset - - {{$text}} + + {{$text}} space @isset($time) diff --git a/resources/views/quizv2/header_question.blade.php b/resources/views/quizv2/header_question.blade.php index ecca76e79..0c446552f 100644 --- a/resources/views/quizv2/header_question.blade.php +++ b/resources/views/quizv2/header_question.blade.php @@ -1,4 +1,4 @@ -
+

{{ __('Question').' '.($position+1).'/'.$max }}

@for($i = 0; $i < $max; $i++) -- 2.39.5