From: soufiane Date: Mon, 22 Jan 2024 16:33:39 +0000 (+0100) Subject: wip #6593 @7:00 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=8910aa557b587f86f4bd92545394d571e8f6c34d;p=fluidbook-toolbox-quiz.git wip #6593 @7:00 --- diff --git a/js/quiz.score.js b/js/quiz.score.js index b955738..991ab4a 100644 --- a/js/quiz.score.js +++ b/js/quiz.score.js @@ -70,6 +70,7 @@ QuizScore.prototype = { } let checkedByUser = userAnswers.indexOf(answerIndex) >= 0; + console.log("checkedByUser",checkedByUser) if (parseInt(answer.correct) === 1) { if (checkedByUser) { // C'est une bonne réponse et elle a été cochée par l'utilisateur diff --git a/js/quiz.screen.outro.js b/js/quiz.screen.outro.js index cd5a39c..45ff762 100644 --- a/js/quiz.screen.outro.js +++ b/js/quiz.screen.outro.js @@ -15,6 +15,7 @@ QuizScreenOutro.prototype = { initEvents: function () { const $this = this; let popup = $("#resume") + let quiz = $("#quiz").get(0) $(document).on("click", ".toggle-answers-review", function () { $(".score-answers-review_container").toggleClass("active") @@ -22,17 +23,24 @@ QuizScreenOutro.prototype = { $(document).on('click', '.btn.restart', function () { $this.quiz.restart(); }); - $(document).on("mouseover", ".area-item", function () { - let quiz = $("#quiz").get(0) - let x = (($(this).offset().left + $(this).width()) - quiz.getBoundingClientRect().x), - y = (($(this).offset().top - $(this).height()) - quiz.getBoundingClientRect().y) - $(this).height() - let content = $(this).find(".content").html() - popup.html(content).css({ + $(document).on("mousemove", function(e) { + let x = e.clientX - quiz.getBoundingClientRect().left + let y = e.clientY - quiz.getBoundingClientRect().top + + popup.css({ left: x, top: y, }) - gsap.to(popup, {autoAlpha: 1}) + }); + + $(document).on("mouseover", ".area-item, .match-item, .multiple-item", function (e) { + let content = $(this).find(".content").html() + + if(content) { + popup.html(content) + gsap.to(popup, {autoAlpha: 1}) + } }).on("mouseout", function () { gsap.to(popup, {autoAlpha: 0}) }) @@ -193,6 +201,10 @@ QuizScreenOutro.prototype = { } }, + returnContentClass: function(str = "") { + return str.length >= 83 ? "content" : "" + }, + displayReviewList: function () { let $ul = $("#answers-list"); if ($ul.length === 0 || this.quiz.data.review === 'never' || (this.quiz.data.review === 'passed' && !this.quiz.score.isPassed())) { @@ -201,18 +213,17 @@ QuizScreenOutro.prototype = { } $(".score-answers-review_container").show(); let reviewList = this.quiz.question.getAll(); + let reviewList_2 = this.quiz.question.getAll(); let status = this.quiz.score.questionStatus let answersUser = this.quiz.score.answers; let wrongIcon = getSpriteIcon("quiz-wrong"); - console.log("score",this.quiz.score) - reviewList = reviewList.map((c, i) => { return { 'question': c['question'], 'type': c['type'], - 'correctAnswers': c['answers'].filter((c__,k) => { - let status_ = c['answers'] + 'correctAnswers': c['answers'].filter((c__,k) => { //on filtre les réponses + let status_ = answersUser[i] if(c['type'] === "multiple") { status_ = parseInt(c['answers'][k].correct) === 1; } @@ -220,17 +231,15 @@ QuizScreenOutro.prototype = { status_ = status[i].answers[k] !== "missed" && status[i].answers[k] !== "neutral" } return status_ - }).map((c_,k_) => { + }).map((c_,k_) => { //on modifie les valeurs + c_ = { ...c_ }; //shallow copy if(c['type'] === "draganddrop" && !quiz.score.isPassed()) { - c_ = { ...c_ }; //shallow copy c_['drop_area'] = answersUser[i][k_] } - if(c['type'] === "match" && !quiz.score.isPassed()) { - c_ = { ...c_ }; //shallow copy + if(c['type'] === "match" && !quiz.score.isPassed() && c['answers'][answersUser[i][k_]] > 0) { c_['proposition'] = c['answers'][answersUser[i][k_]]['proposition'] } - console.log(status[i].answers[k_]) - c_['status'] = status[i].answers[k_] + c_['status'] = status[i].answers[[answersUser[i][k_]]] return c_ }), 'status': status[i].ok, @@ -238,6 +247,9 @@ QuizScreenOutro.prototype = { } }) + console.log("score",this.quiz.score) + console.log("reviewList",reviewList) + let html = ''; for (var i in reviewList) { i = parseInt(i); @@ -246,8 +258,6 @@ QuizScreenOutro.prototype = { let statusByAnswer = status[i] let nokClass = "" - console.log(review) - let correctAnswers = review.correctAnswers.length > 0 ? review.correctAnswers : review.data.answers let titleType = ''; @@ -262,15 +272,19 @@ QuizScreenOutro.prototype = { if (review.type === "multiple") { html += '

' + review.question + '

'; html += '
' - for (var j in correctAnswers) { - nokClass = "" - if(correctAnswers[j].status === "nok" || correctAnswers[j].status === "missed") { - htmlSpan = `${wrongIcon}` - nokClass = "nok" + console.log("review",review) + console.log("correctAnswers",correctAnswers) + if(correctAnswers.length > 0) { + for (var j in correctAnswers) { + nokClass = "" + if (correctAnswers[j].status === "nok" || correctAnswers[j].status === "missed") { + htmlSpan = `${wrongIcon}` + nokClass = "nok" + } + html += '
'; + html += '

' + correctAnswers[j].answer + htmlSpan + '

'; + html += '
'; } - html += '
'; - html += '

' + correctAnswers[j].answer+htmlSpan+'

'; - html += '
'; } html += '
' } @@ -286,15 +300,17 @@ QuizScreenOutro.prototype = { let area = i === 1 ? review.data.area_1 : review.data.area_2 html += '
' html += '' @@ -308,16 +324,18 @@ QuizScreenOutro.prototype = { html += '
' html += '

' + this.quiz.l10n.__('Question') + '

' + this.quiz.l10n.__('Answers') + '

' html += '
' - for (let k in correctAnswers) { - htmlSpan = "" - if(statusByAnswer.answers[k] === "nok") { - htmlSpan = `${wrongIcon}` + if(correctAnswers.length > 0) { + for (let k in correctAnswers) { + htmlSpan = "" + if (statusByAnswer.answers[k] === "nok") { + htmlSpan = `${wrongIcon}` + } + html += '
' + html += '

' + correctAnswers[k].answer + '

' + html += htmlSpan !== "" ? htmlSpan : '
' + html += '

' + correctAnswers[k].proposition + '

' + html += '
' } - html += '
' - html += '

' + correctAnswers[k].answer + '

' - html += htmlSpan !== "" ? htmlSpan : '
' - html += '

' + correctAnswers[k].proposition + '

' - html += '
' } html += '
' } diff --git a/style/100-global.sass b/style/100-global.sass index 7502293..49af074 100644 --- a/style/100-global.sass +++ b/style/100-global.sass @@ -265,7 +265,7 @@ body &.simplebar-vertical .simplebar-scrollbar::before - background-color: +opacity(.32, background-color, $texts-color) + +opacity(.32, background-color, $texts-color) opacity: 1 !important width: 3px top: 1px diff --git a/style/105-outro.sass b/style/105-outro.sass index ebc1cbc..f1a4c96 100644 --- a/style/105-outro.sass +++ b/style/105-outro.sass @@ -221,8 +221,19 @@ .answer +opacity(.8, color, $texts-color) + .content + cursor: pointer + .slot border-color: transparent + p + overflow: hidden + text-overflow: ellipsis + display: -webkit-box + -webkit-line-clamp: 2 + -webkit-box-orient: vertical + max-height: 50px !important + margin-top: 0 .nok border-color: $nok-color @@ -305,7 +316,6 @@ .area-title display: grid grid-template-columns: 2fr 2fr - p width: 50% @@ -321,10 +331,6 @@ .area-item +flex-config(space-between) - &:hover - transition: all .3s - background-color: $neutral-color !important - cursor: pointer .match-item flex: 1 @@ -340,16 +346,16 @@ border-radius: 5px +opacity(.24, background-color, $texts-color) - #resume - width: 100% - max-width: 300px - position: absolute - opacity: 0 - background-color: $neutral-color - padding: 16px - +radius(8px) - transform: translate(calc(-100% + -8px), calc(-100% + -14px)) - z-index: 99 +#resume + width: 100% + max-width: 300px + position: absolute + opacity: 0 + background-color: $neutral-color + padding: 16px + +radius(8px) + transform: translate(calc(-100% + -8px), calc(-100% + -14px)) + z-index: 99 .m .score diff --git a/views/header_question.blade.php b/views/header_question.blade.php index aec0644..993f241 100644 --- a/views/header_question.blade.php +++ b/views/header_question.blade.php @@ -29,13 +29,11 @@

{{$__('Use arrow keys to move the cards to the corresponding zone')}}

@elseif($question['type']==='match')

- {{$__('Answer the question by swiping left or right to select the most appropriate answer')}} + {{$question['question']}}

{{$__('When you feel the answer is appropriate, confirm the match to move on to the next question')}}

@else

{{$question['question']}}

@endif - - diff --git a/views/screens/outro.blade.php b/views/screens/outro.blade.php index f6b4966..bf7839e 100644 --- a/views/screens/outro.blade.php +++ b/views/screens/outro.blade.php @@ -79,7 +79,7 @@ -
@endif +