From: soufiane <soufiane@cubedesigners.com>
Date: Tue, 23 Jan 2024 15:38:04 +0000 (+0100)
Subject: wait #6658 @1:00 j'ai tenté de faire fonctionner tippy en vain; j'ai donc gardé mon... 
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=c0744bdce59957a0614617718e47c20653b3341b;p=fluidbook-toolbox-quiz.git

wait #6658 @1:00 j'ai tenté de faire fonctionner tippy en vain; j'ai donc gardé mon code en apportant les corrections demandées.
---

diff --git a/js/quiz.js b/js/quiz.js
index abc41e8..4967884 100644
--- a/js/quiz.js
+++ b/js/quiz.js
@@ -1,5 +1,7 @@
 import $ from "cash-dom";
 import 'swiper/css';
+import tippy from 'tippy.js';
+import 'tippy.js/dist/tippy.css';
 
 import QuizResize from "./quiz.resize";
 import QuizAnimations from "./quiz.animations";
@@ -17,6 +19,7 @@ import QuizAttemptsLog from "./quiz.attemptslog";
 import QuizCountriesList from "./quiz.countriesList";
 
 window.$ = window.jQuery = $;
+window.tippy = tippy;
 
 function Quiz() {
 }
@@ -83,6 +86,18 @@ Quiz.prototype = {
         this.progressbar.update();
     },
 
+    initTooltips: function () {
+        $('[data-tooltip]:not(.init-tooltip)').each(function () {
+            console.log($(this).get(0))
+            let i = tippy($(this).get(0), {
+                content: $(this).data('tooltip'),
+                followCursor: true,
+            });
+            $(this).addClass('init-tooltip');
+            $(this).data('tippyinstance', i)
+        });
+    },
+
     updateIcons: function () {
         $("[data-icon]").each(function () {
             var iconId = 'quiz-' + $(this).data('icon');
diff --git a/js/quiz.screen.outro.js b/js/quiz.screen.outro.js
index 2cfea24..59d48e9 100644
--- a/js/quiz.screen.outro.js
+++ b/js/quiz.screen.outro.js
@@ -4,6 +4,9 @@ import 'simplebar/dist/simplebar.css'
 import SplitType from 'split-type';
 import {DrawSVGPlugin} from "gsap/DrawSVGPlugin.js";
 
+import tippy from 'tippy.js';
+import 'tippy.js/dist/tippy.css';
+
 function QuizScreenOutro(screens) {
     this.quiz = screens.quiz;
     this.screens = screens;
@@ -46,6 +49,17 @@ QuizScreenOutro.prototype = {
         })
     },
 
+    initTooltips: function () {
+        $('[data-tooltip]:not(.init-tooltip)').each(function () {
+            let i = tippy($(this).get(0), {
+                content: $(this).data('tooltip'),
+                followCursor: true,
+            });
+            $(this).addClass('init-tooltip');
+            $(this).data('tippyinstance', i)
+        });
+    },
+
     animate: function (score, percent) {
         //animer le texte d'intro
         gsap.registerPlugin(DrawSVGPlugin);
@@ -218,9 +232,6 @@ QuizScreenOutro.prototype = {
         let answersUser = this.quiz.score.answers;
         let wrongIcon = getSpriteIcon("quiz-wrong");
 
-        console.log(status)
-        console.log(this.quiz.score)
-
         reviewList = reviewList.map((c, i) => {
             return {
                 'question': c['question'],
@@ -254,8 +265,6 @@ QuizScreenOutro.prototype = {
             }
         })
 
-        console.log('reviewList',reviewList)
-
         let html = '';
         for (var i in reviewList) {
             i = parseInt(i);
@@ -286,8 +295,8 @@ QuizScreenOutro.prototype = {
                             htmlSpan = `<span class="access nok">${wrongIcon}</span>`
                             nokClass = "nok"
                         }
-                        html += '<div class="card-holder multiple-item slot ' + nokClass +'">';
-                        html += '<p class="answer "' + this.returnContentClass(correctAnswers[j].answer)+'">' + correctAnswers[j].answer +'</p>';
+                        html += '<div class="card-holder multiple-item slot ' + nokClass +'" data-tooltip="'+correctAnswers[j].answer+'">';
+                        html += '<p class="answer ' + this.returnContentClass(correctAnswers[j].answer)+'">' + correctAnswers[j].answer +'</p>';
                         html += htmlSpan;
                         html += '</div>';
                     }
@@ -306,7 +315,7 @@ QuizScreenOutro.prototype = {
 
                 for (let i = 1; i < 3; i++) {
                     let area = i === 1 ? review.data.area_1 : review.data.area_2
-                    html += '<div class="area area"' + i + '>'
+                    html += '<div class="area area ' + i + '">'
                     html += '<ul class="area-list card-holder">'
                     if(correctAnswers.length > 0) {
                         for (let k in correctAnswers) {
@@ -315,7 +324,7 @@ QuizScreenOutro.prototype = {
                                 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 += '<li class="area-item slot active ' + correctAnswers[k].status + '" data-tooltip="'+correctAnswers[k].answer+'"><p class="'+this.returnContentClass(correctAnswers[k].answer)+'">' + correctAnswers[k].answer + '</p>'
                                 html += htmlSpan
                                 html += '</li>'
                             }
@@ -339,9 +348,9 @@ QuizScreenOutro.prototype = {
                             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 += '<div class="match-item slot active ' + statusByAnswer.answers[k] + '" data-tooltip="'+correctAnswers[k].answer+'"><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 class="match-item slot active ' + statusByAnswer.answers[k] + '" data-tooltip="'+correctAnswers[k].proposition+'"><p class="'+this.returnContentClass(correctAnswers[k].proposition)+'">' + correctAnswers[k].proposition + '</p></div>'
                         html += '</div>'
                     }
                 }
diff --git a/style/105-outro.sass b/style/105-outro.sass
index d9ed714..42fb671 100644
--- a/style/105-outro.sass
+++ b/style/105-outro.sass
@@ -359,8 +359,20 @@
     background-color: $neutral-color
     padding: 16px
     +radius(8px)
-    transform: translate(calc(-100% + -8px), calc(-100% + -14px))
+    transform: translate(calc(-50%), calc(-100% + -14px))
     z-index: 99
+    &:after
+        height: 0
+        width: 0
+        border-top: 16px solid $neutral-color
+        border-right: 21px solid transparent
+        border-left: 21px solid transparent
+        content: ""
+        position: absolute
+        z-index: 99
+        bottom: -8px
+        left: 50%
+        transform: translateX(-50%)
 
 .m
     .score