wip #6593 @7:00

diff --git a/js/quiz.score.js b/js/quiz.score.js
index b955738ebecca98e85a2a34e09a688d92d6c9d1a..991ab4a6369c064f4baf3d12ddd35b400080e119 100644 (file)
--- 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 cd5a39c36e99ad33391092a4d2305ad2d59bc1ee..45ff762f1ed0100bb600d68b95d433074f856e8e 100644 (file)
--- 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 += '<p class="question title-block">' + review.question + '</p>';
                 html += '<div class="multiple-wrapper">'
-                for (var j in correctAnswers) {
-                    nokClass = ""
-                    if(correctAnswers[j].status === "nok" || correctAnswers[j].status === "missed") {
-                        htmlSpan = `<span class="access nok">${wrongIcon}</span>`
-                        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 = `<span class="access nok">${wrongIcon}</span>`
+                            nokClass = "nok"
+                        }
+                        html += '<div class="card-holder multiple-item">';
+                        html += '<p class="answer slot ' + nokClass + " " + this.returnContentClass(correctAnswers[j].answer)+'">' + correctAnswers[j].answer + htmlSpan + '</p>';
+                        html += '</div>';
                     }
-                    html += '<div class="card-holder">';
-                    html += '<p class="answer slot '+nokClass+'">' + correctAnswers[j].answer+htmlSpan+'</p>';
-                    html += '</div>';
                 }
                 html += '</div>'
             }
@@ -286,15 +300,17 @@ QuizScreenOutro.prototype = {
                     let area = i === 1 ? review.data.area_1 : review.data.area_2
                     html += '<div class="area area"' + i + '>'
                     html += '<ul class="area-list card-holder">'
-                    for (let k in correctAnswers) {
-                        if (correctAnswers[k].drop_area === i) {
-                            htmlSpan = ""
-                            if(correctAnswers[k].status === "nok") {
-                                htmlSpan = `<span class="access nok">${wrongIcon}</span>`
+                    if(correctAnswers.length > 0) {
+                        for (let k in correctAnswers) {
+                            if (correctAnswers[k].drop_area === i) {
+                                htmlSpan = ""
+                                if (correctAnswers[k].status === "nok") {
+                                    htmlSpan = `<span class="access nok">${wrongIcon}</span>`
+                                }
+                                html += '<li class="area-item slot active ' + correctAnswers[k].status + '"><p class="'+this.returnContentClass(correctAnswers[k].answer)+'">' + correctAnswers[k].answer + '</p>'
+                                html += htmlSpan
+                                html += '</li>'
                             }
-                            html += '<li class="area-item slot active '+correctAnswers[k].status+'"><p class="content">' + correctAnswers[k].answer+'</p>'
-                            html += htmlSpan
-                            html += '</li>'
                         }
                     }
                     html += '</ul>'
@@ -308,16 +324,18 @@ QuizScreenOutro.prototype = {
                 html += '<div class="match-title">'
                 html += '<p class="title-block">' + this.quiz.l10n.__('Question') + '</p><p class="title-block">' + this.quiz.l10n.__('Answers') + '</p>'
                 html += '</div>'
-                for (let k in correctAnswers) {
-                    htmlSpan = ""
-                    if(statusByAnswer.answers[k] === "nok") {
-                        htmlSpan = `<span class="access nok">${wrongIcon}</span>`
+                if(correctAnswers.length > 0) {
+                    for (let k in correctAnswers) {
+                        htmlSpan = ""
+                        if (statusByAnswer.answers[k] === "nok") {
+                            htmlSpan = `<span class="access nok">${wrongIcon}</span>`
+                        }
+                        html += '<div class="match-wrapper card-holder">'
+                        html += '<div class="match-item slot active ' + statusByAnswer.answers[k] + '"><p class="'+this.returnContentClass(correctAnswers[k].answer)+'">' + correctAnswers[k].answer + '</p></div>'
+                        html += htmlSpan !== "" ? htmlSpan : '<div class="separate"></div>'
+                        html += '<div class="match-item slot active ' + statusByAnswer.answers[k] + '"><p class="'+this.returnContentClass(correctAnswers[k].proposition)+'">' + correctAnswers[k].proposition + '</p></div>'
+                        html += '</div>'
                     }
-                    html += '<div class="match-wrapper card-holder">'
-                    html += '<div class="match-item slot active '+statusByAnswer.answers[k]+'"><p>' + correctAnswers[k].answer + '</p></div>'
-                    html += htmlSpan !== "" ? htmlSpan : '<div class="separate"></div>'
-                    html += '<div class="match-item slot active '+statusByAnswer.answers[k]+'"><p>' + correctAnswers[k].proposition + '</p></div>'
-                    html += '</div>'
                 }
                 html += '</div>'
             }

diff --git a/style/100-global.sass b/style/100-global.sass
index 7502293c5e614d49ec304925e42d410c217d85d7..49af07488111ebfcb70205b9e488b576167c0f11 100644 (file)
--- 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 ebc1cbcbb9b9ce88e3ea05e27f7bbbbdbf54ec09..f1a4c961fb5daa6549477dcb3689719c9962a9fe 100644 (file)
--- 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 aec0644e362041b6b9f44e174f1027a77a0d0fe7..993f241ae48e4b276ffbb78389f46058563b6483 100644 (file)
--- a/views/header_question.blade.php
+++ b/views/header_question.blade.php
@@ -29,13 +29,11 @@
         <h2 class="subtitle only-desktop">{{$__('Use arrow keys to move the cards to the corresponding zone')}}</h2>
     @elseif($question['type']==='match')
         <h1 id="titleQuestion">
-            {{$__('Answer the question by swiping left or right to select the most appropriate answer')}}
+            {{$question['question']}}
         </h1>
         <h2 class="subtitle"
             class="only-desktop">{{$__('When you feel the answer is appropriate, confirm the match to move on to the next question')}}</h2>
     @else
         <h1 class="{{$h1class}}" id="titleQuestion">{{$question['question']}}</h1>
     @endif
-
-
 </header>

diff --git a/views/screens/outro.blade.php b/views/screens/outro.blade.php
index f6b49666f0136ed1cb986552d7913c4dff8db88e..bf7839e6eb16f1db660f7e974040b17c58ab20bf 100644 (file)
--- a/views/screens/outro.blade.php
+++ b/views/screens/outro.blade.php
@@ -79,7 +79,7 @@
                     <ul id="answers-list"></ul>
                 </div>
             </div>
-            <div id="resume"></div>
         @endif
     </div>
+    <div id="resume"></div>
 </div>