From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 21 Aug 2023 12:52:16 +0000 (+0200)
Subject: wip #6182 @3
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=bb85774e3c24ec08e44a1dc8e70a1c8e09ce3d75;p=fluidbook-toolbox-quiz.git

wip #6182 @3
---

diff --git a/js/quiz.animations.js b/js/quiz.animations.js
index 8c45b75..339de78 100644
--- a/js/quiz.animations.js
+++ b/js/quiz.animations.js
@@ -54,6 +54,15 @@ QuizAnimations.prototype = {
         clearTimeout(this.instantReviewAnimationTimeout);
     },
 
+    fadeOut: function (el, remove) {
+        $(el).addClass('animateOpacity disabled').css('opacity', 0);
+        if (remove === true) {
+            setTimeout(function () {
+                $(el).remove();
+            }, 500);
+        }
+    },
+
     triggeredBtn: function () {
         /*$(document).on("mousedown", ".btn", function() {
             gsap.to($(this), { scale: .9, duration: 0.3 });
diff --git a/js/quiz.screen.outro.js b/js/quiz.screen.outro.js
index 7728524..cffde79 100644
--- a/js/quiz.screen.outro.js
+++ b/js/quiz.screen.outro.js
@@ -2,13 +2,21 @@ import SimpleBar from 'simplebar'
 import 'simplebar/dist/simplebar.css'
 import Handlebars from "handlebars";
 
-function QuizScreenOutro(quiz) {
-    this.quiz = quiz;
+function QuizScreenOutro(screens) {
+    this.quiz = screens.quiz;
+    this.screens = screens;
+
+    this.initEvents();
 }
 
 QuizScreenOutro.prototype = {
-    show: function () {
+    initEvents: function () {
+        $(document).on("click", ".toggle-answers-review", function () {
+            $(".score-answers-review_container").toggleClass("active")
+        })
+    },
 
+    show: function () {
         let maxScore = this.quiz.score.maxScore,
             score = this.quiz.score.score
 
@@ -55,8 +63,7 @@ QuizScreenOutro.prototype = {
         // https://github.com/Grsmto/simplebar/tree/master/packages/simplebar
         const simpleBar = new SimpleBar($ul.get(0))
     }
-
 };
 
 
-export default QuizScreenOutro;
\ No newline at end of file
+export default QuizScreenOutro;
diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index a578f8d..300af60 100644
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -35,6 +35,9 @@ QuizScreens.prototype = {
                 alert('Please select at least one answer');
                 return false;
             }
+
+            //
+
             if ($(this).hasClass('validate')) {
                 let review = $this.sendUserAnswers();
                 // Si la revue instantanée est activée, on affiche les résultats
@@ -62,8 +65,14 @@ QuizScreens.prototype = {
         $(form).addClass('disabled');
 
         // Remove validate button and show continue button
-        $(activeScreen).find('.btn.validate').addClass('none');
-        $(activeScreen).find('.btn.continue').removeClass('none');
+        setTimeout(function () {
+            $(activeScreen).find('.btn.continue').removeClass('none')
+            $(activeScreen).find('.btn.validate').addClass('none');
+        }, 10);
+
+
+        // Hide reset button
+        this.quiz.animations.fadeOut($(activeScreen).find('.btn.reset'), true);
 
         let results = review.answersStatus;
 
@@ -80,7 +89,7 @@ QuizScreens.prototype = {
             if (answerResult !== "neutral") {
                 $el.find(".access").addClass(answerResult).html(icon);
             } else {
-                $el.find(".access").remove();
+                this.quiz.animations.fadeOut($el.find(".access"));
             }
         }
     },
@@ -89,7 +98,7 @@ QuizScreens.prototype = {
         let nextQuestionIndex = this.quiz.question.currentPosition() + 1;
         let nextScreen;
         if (nextQuestionIndex >= this.quiz.question.count()) {
-            nextScreen = 'review';
+            nextScreen = 'outro';
         } else {
             nextScreen = 'q-' + nextQuestionIndex;
         }
@@ -122,8 +131,13 @@ QuizScreens.prototype = {
                 callback();
             }
             $this.activeScreen = screenToShow;
+            // Reset form to prevent browser letting a option selected after a refresh
+            $this.resetForm();
             $this.currentQuestionAnswers = [];
             $this.quiz.progressbar.update();
+            if (screen === 'outro') {
+                $this.outro.show();
+            }
         });
     },
 
@@ -132,7 +146,7 @@ QuizScreens.prototype = {
         return this.getActiveScreen().find('form');
     },
 
-    resetForm: () => {
+    resetForm: function () {
         this.getCurrentForm().find("input").prop("checked", false)
     },
 
diff --git a/js/quiz.utils.js b/js/quiz.utils.js
index 3e7aa66..473512e 100644
--- a/js/quiz.utils.js
+++ b/js/quiz.utils.js
@@ -4,10 +4,14 @@ function QuizUtils() {
 
 QuizUtils.prototype = {
     isVisible(e) {
-        if ($(e).length == 0) {
+        if ($(e).length === 0) {
+            return false;
+        }
+        if ($(e).css('display') === 'none' || $(e).css('visibility') === 'hidden' || $(e).css('opacity') == 0) {
             return false;
         }
         let elt = $(e).get(0);
+
         return elt.offsetWidth || elt.offsetHeight || elt.getClientRects().length;
     },
     isEnabled: function (e) {
@@ -20,6 +24,7 @@ QuizUtils.prototype = {
         if ($(e).hasClass('disabled') || $(e).closest('.disabled').length > 0) {
             return false;
         }
+        console.log('is enabled', e);
         return true;
     },
 
diff --git a/style/006-animations.sass b/style/006-animations.sass
new file mode 100644
index 0000000..ef94da6
--- /dev/null
+++ b/style/006-animations.sass
@@ -0,0 +1,2 @@
+.animateOpacity
+    transition: opacity 350ms
diff --git a/style/style.sass b/style/style.sass
index b3a649c..cd6f311 100644
--- a/style/style.sass
+++ b/style/style.sass
@@ -2,6 +2,7 @@
 @import 002-item-variables
 @import 003-reset
 @import 004-mixins
+@import 006-animations
 
 @import 100-global
 @import 101-header-footer
diff --git a/views/screens/outro.blade.php b/views/screens/outro.blade.php
index af8918d..4262159 100644
--- a/views/screens/outro.blade.php
+++ b/views/screens/outro.blade.php
@@ -1,4 +1,4 @@
-<div class="container-screen none" data-screen="review">
+<div class="container-screen none" data-screen="outro">
     @include('header_title', ['data', $data])
     <div class="screen score" id="score">
         <div class="score-content">