wait #6445

diff --git a/js/quiz.screen.outro.js b/js/quiz.screen.outro.js
index d0cd031d7b7eaf79860e9b8aaf277f9220c960cb..c921114bd6a8feccd75f260a8a79d80a6e209e21 100644 (file)
--- 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 0e3d9da7b228a3e994174933b2f12ba2b911ea34..f10fb866ec892e2d30efbc91acc39655574e9db0 100644 (file)
--- 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 f21a3b712eacb466e38f4deb2ddde567b912c1ea..f78004c1ce4d9759d6abd202728d935b7baaa49f 100644 (file)
--- 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>