From: soufiane <soufiane@cubedesigners.com>
Date: Fri, 3 Nov 2023 12:08:16 +0000 (+0100)
Subject: wait #6445
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=c1149ea99384320a3fe19086b123aa2c279aee2c;p=fluidbook-toolbox-quiz.git

wait #6445
---

diff --git a/js/quiz.screen.outro.js b/js/quiz.screen.outro.js
index d0cd031..c921114 100644
--- a/js/quiz.screen.outro.js
+++ b/js/quiz.screen.outro.js
@@ -14,12 +14,28 @@ function QuizScreenOutro(screens) {
 QuizScreenOutro.prototype = {
     initEvents: function () {
         const $this = this;
+        let popup = $("#resume")
+
         $(document).on("click", ".toggle-answers-review", function () {
             $(".score-answers-review_container").toggleClass("active")
         });
         $(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).html()
+
+            popup.html(content).css({
+                left: x,
+                top: y,
+            })
+            gsap.to(popup, { autoAlpha: 1 })
+        }).on("mouseout", function() {
+            gsap.to(popup, { autoAlpha: 0 })
+        })
     },
 
     animate: function (score, percent) {
diff --git a/style/105-outro.sass b/style/105-outro.sass
index 0e3d9da..f10fb86 100644
--- a/style/105-outro.sass
+++ b/style/105-outro.sass
@@ -147,7 +147,7 @@
 
         .item
             padding-left: 20px
-            margin-bottom: 22px
+            margin-bottom: 71px
             position: relative
 
             *
@@ -256,6 +256,22 @@
         gap: 8px
         height: 100%
 
+    .area-item:hover
+        transition: all .3s
+        background-color: $neutral-color !important
+        cursor: pointer
+
+    #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
         height: calc(100vh - 125px)
@@ -379,3 +395,6 @@
         .simplebar-track
             &.simplebar-vertical
                 right: -8px
+
+        #resume
+            display: none
diff --git a/views/screens/outro.blade.php b/views/screens/outro.blade.php
index f21a3b7..f78004c 100644
--- a/views/screens/outro.blade.php
+++ b/views/screens/outro.blade.php
@@ -79,6 +79,7 @@
                     <ul id="answers-list"></ul>
                 </div>
             </div>
+            <div id="resume"></div>
         @endif
     </div>
 </div>