From: soufiane <soufiane@cubedesigners.com>
Date: Mon, 21 Aug 2023 14:47:22 +0000 (+0200)
Subject: wip #6194 @3:00 compte à rebours
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=5f60159827608b1d40610d5cfb7770685a7df366;p=fluidbook-toolbox-quiz.git

wip #6194 @3:00 compte à rebours
---

diff --git a/js/quiz.js b/js/quiz.js
index 10dafa2..1ba8e34 100644
--- a/js/quiz.js
+++ b/js/quiz.js
@@ -46,6 +46,8 @@ Quiz.prototype = {
         console.log(this.data.theme)
 
         this.timeoutAnimation = false
+        this.intervalCountDown = false
+        this.timeoutCountdown = false
 
         // commencer
         $(document).on("click", "#start", function() {
@@ -186,7 +188,9 @@ Quiz.prototype = {
         // dont miss to add this second condition
         if($(".active-screen form").length > 0) {
             if(status.length > 0) {
-                if(status[this.question.currentPosition()].ok === "not answered") {
+                if(status[$(".active-screen").data("position")].ok === "not answered") {
+                    clearInterval(this.intervalCountDown)
+                    clearTimeout(this.timeoutCountdown)
                     this.validateResponse(responses);
                     this.updateBtnValidation("validated")
                     return false
@@ -200,9 +204,12 @@ Quiz.prototype = {
         // pour récupérer le premier enfant de la nav
         this.activeNav(  (parseInt(this.question.currentPosition())+1)  )
         this.updateBtnValidation()
+        //
         // si c'est la dernière question a été validée alors on affiche le résultat au prochain screen
         if(this.question.last(currentPosition)) {
             this.result()
+        }else {
+            this.countdown(responses)
         }
     },
 
@@ -351,6 +358,25 @@ Quiz.prototype = {
         const simpleBar = new SimpleBar($ul.get(0))
     },
 
+    countdown: function(res) {
+        const time = this.question.current().countdown_time*1000
+        if(this.question.current().countdown_enable) {
+            let value = 100
+            let this_ = this
+            this.intervalCountDown = setInterval(function () {
+                value -= (10 / time) * 100
+                document.documentElement.style.setProperty("--width-bg-countdown", value + "%")
+            }, 10)
+
+            this.timeoutCountdown = setTimeout(function () {
+                clearInterval(this_.intervalCountDown)
+                this_.validateResponse(res);
+                this_.updateBtnValidation("validated")
+                return false
+            }, time)
+        }
+    },
+
     restart: function() {
 
     }
diff --git a/js/quiz.question.js b/js/quiz.question.js
index f659d07..f60aff9 100644
--- a/js/quiz.question.js
+++ b/js/quiz.question.js
@@ -17,7 +17,7 @@ QuizQuestion.prototype = {
     },
 
     currentPosition: function() {
-        return $(document).find(".active-screen").data("position");
+        return quiz.score.lastAnsweredQuestion + 1;
     },
 
     current: function() {
diff --git a/style/005-utilities.sass b/style/005-utilities.sass
index adc845c..6cb18aa 100644
--- a/style/005-utilities.sass
+++ b/style/005-utilities.sass
@@ -9,4 +9,5 @@
 
 \:root
     --space-21-66: clamp(1.31rem, calc(0.29rem + 5.11vw), 4.13rem)
+    --width-bg-countdown: 100%
 
diff --git a/style/100-global.sass b/style/100-global.sass
index 8707185..41401db 100644
--- a/style/100-global.sass
+++ b/style/100-global.sass
@@ -36,9 +36,21 @@ body
     &.primary
         background: radial-gradient(at 16% 6px, rgb(255, 102, 186) -7%, #D0167C 74%)
         box-shadow: 0 4px 6px rgba(0,0,0,.2)
+        overflow: hidden
+        &.countdown
+            &:after
+                content: ""
+                width: var(--width-bg-countdown)
+                height: 100%
+                position: absolute
+                right: 0
+                top: 0
+                background-color: #E062A8
         +below(993px)
             flex: 1
             margin-left: 16px
+        span
+            z-index: 1
     &.secondary
         +opacity(.16)
         padding-left: 22px
diff --git a/views/footer.blade.php b/views/footer.blade.php
index bcadcba..32d90e3 100644
--- a/views/footer.blade.php
+++ b/views/footer.blade.php
@@ -5,7 +5,7 @@
             <span class="access">R</span>
         </a>
     @endisset
-    <a class="btn primary action" data-validation-text="Validate answer" data-continue-text="Continue">
+    <a class="btn primary action {{$data['countdown_enable'] ? 'countdown' : ''  }}" data-validation-text="Validate answer" data-continue-text="Continue">
         <span class="text">{{$text}}</span>
         <span class="access space">space</span>
         @isset($time)