From: soufiane <soufiane@cubedesigners.com>
Date: Fri, 4 Aug 2023 14:30:13 +0000 (+0200)
Subject: wip #6182 @5:00
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=fc73d59619c3440c7d0fb6b5a421add694059728;p=fluidbook-toolbox.git

wip #6182 @5:00
---

diff --git a/resources/quizv2/js/quiz.animations.js b/resources/quizv2/js/quiz.animations.js
index 28ab9c2e9..d20d95669 100644
--- a/resources/quizv2/js/quiz.animations.js
+++ b/resources/quizv2/js/quiz.animations.js
@@ -1,6 +1,7 @@
 const lottie = require("lottie-web");
 const $ = require("cash-dom");
 
+
 function QuizAnimations(quiz) {
     this.quiz = quiz;
 }
diff --git a/resources/quizv2/js/quiz.js b/resources/quizv2/js/quiz.js
index 48912a7a6..555326932 100644
--- a/resources/quizv2/js/quiz.js
+++ b/resources/quizv2/js/quiz.js
@@ -34,32 +34,23 @@ Quiz.prototype = {
         // Ici seront injectées dans this.data toutes les données du quiz et du thème pour qu'elles soient disponibles
         // dans l'object à tout moment
         this.data = data;
+        this.responses = []
+
         console.log(this.data);
         // ICI tout commence vraiment
         console.log(this.data.theme)
 
         $("#quiz").css("background-image","url("+this.data.theme.backgroundImage+")")
 
-        this.animations.load('OK', $("#anim"), {'\\$text': 'Salut :)'});
-
-        // La fonction resize est appellée à chaque fois qu'un resize de la fenêtre survient (et à l'init de l'app)
+        // La fonction resize est appelée à chaque fois qu'un resize de la fenêtre survient (et à l'init de l'app)
         $(window).on('resize', function () {
             $this.quizResize();
         });
         this.quizResize();
 
-        $(document).on("click", ".next .action", function (){
-            $this.next();
-        })
-
-        key('space', function (e){
-            e.preventDefault()
-            $this.next();
-        })
-
+        //animer le texte d'intro
         let title = new SplitType("#welcome h2", { types: 'words, chars' })
         let text = new SplitType("#welcome p", { types: 'words, chars' })
-
         gsap.from(title.words, {
             opacity: 0,
             y: 20,
@@ -69,7 +60,6 @@ Quiz.prototype = {
                 $(title.elements).removeClass("none")
             }
         })
-
         gsap.to(text.words, {
             opacity: 1,
             y: 0,
@@ -82,6 +72,35 @@ Quiz.prototype = {
                 $(text.elements).removeClass("none")
             }
         })
+
+        // Préparer les réponses du joueur dans l'objet this.responses
+        $(document).on("change", ".active-screen form", function(e) {
+            $this.responses = []
+            $(this).find("input:checked").each(function() {
+                $this.responses.push(parseInt($(this).val()))
+            });
+        })
+
+        // Passer à la page suivante
+        // Valider les réponses
+        $(document).on("click", ".next .action", function () {
+            let responses = $this.responses
+            $this.validateResponse(responses);
+            $this.next();
+        })
+        key('space', function (e){
+            e.preventDefault()
+            $this.next();
+        })
+
+        // Réinitialiser les réponses
+        $(document).on("click", ".btn.reset", function() {
+            $this.resetForm()
+        })
+        key('r', function (e){
+            e.preventDefault()
+            $this.resetForm()
+        })
     },
 
     updateIcons: function () {
@@ -101,7 +120,6 @@ Quiz.prototype = {
                 $(this).append(icon);
             }
         });
-
     },
 
     quizResize: function () {
@@ -110,8 +128,15 @@ Quiz.prototype = {
     },
 
     next: function () {
-        const $el = $(".next .action")
-        $el.parents(".container-screen").addClass("none").removeClass("next").next(".container-screen").removeClass("none").addClass("next")
+        const $el = $(".active-screen .btn.action")
+        const form = $(".active-screen form")
+        // if form exist and responses are validated
+        // dont miss to add this second condition
+        if(form.length > 0) {
+            return false
+        }
+        $el.parents(".container-screen").addClass("none").removeClass("next active-screen").next(".container-screen").removeClass("none").addClass("next active-screen")
+        this.resetForm()
     },
 
     setDisplay: function() {
@@ -123,6 +148,39 @@ Quiz.prototype = {
 
             }
         }
+    },
+
+    resetForm: () => {
+        $("form").find("input").prop("checked", false)
+    },
+
+    validateResponse: function(responses) {
+        const form = $(".active-screen form")
+        const activeScreen = $(".active-screen")
+        const position = activeScreen.data("position")
+
+        if(form) {
+            if(form.length > 0) {
+                let validated = quiz.score.setAnswer(position,responses);
+                if(validated.ok === "ok") {
+                    this.animationValidation("OK")
+                }else {
+                    this.animationValidation("NOK")
+                }
+                return false
+            }
+            return false
+        }
+    },
+
+    animationValidation: function(status) {
+        let selector = $("#anim")
+        this.animations.load(status, selector, {'\\$text': 'Salut :)'});
+        selector.addClass("active")
+        setTimeout(function(){
+            selector.removeClass("active")
+            selector.empty()
+        }, 10000)
     }
 }
 
diff --git a/resources/quizv2/js/quiz.question.js b/resources/quizv2/js/quiz.question.js
index 9c35d2c65..b3a4460b8 100644
--- a/resources/quizv2/js/quiz.question.js
+++ b/resources/quizv2/js/quiz.question.js
@@ -5,7 +5,11 @@ var QuizQuestion = function(quiz) {
 
 QuizQuestion.prototype = {
     init: function(){
-    }
+
+    },
+
+    getFormData: (responses) => {
+    },
 }
 
 module.exports = QuizQuestion;
diff --git a/resources/quizv2/js/quiz.score.js b/resources/quizv2/js/quiz.score.js
index e59ccf2f9..9d8d9dcea 100644
--- a/resources/quizv2/js/quiz.score.js
+++ b/resources/quizv2/js/quiz.score.js
@@ -60,8 +60,9 @@ QuizScore.prototype = {
                 for (let answerIndex in question.answers) {
                     answerIndex = parseInt(answerIndex);
                     const answer = question.answers[answerIndex];
+
                     let checkedByUser = userAnswers.indexOf(answerIndex) >= 0;
-                    if (answer.correct === 1) {
+                    if (parseInt(answer.correct) === 1) {
                         if (checkedByUser) {
                             // C'est une bonne réponse et elle a été cochée par l'utilisateur
                             this_score += answer.score;
@@ -75,7 +76,6 @@ QuizScore.prototype = {
                             // C'est une mauvaise réponse et elle a été cochée par l'utilisateur
                             this_score -= answer.score;
                             answersStatus[answerIndex] = 'nok';
-
                         } else {
                             // C'est une bonne réponse et elle n'a pas été cochée par l'utilisateur
                             answersStatus[answerIndex] = 'neutral';
diff --git a/resources/quizv2/style/004-mixins.sass b/resources/quizv2/style/004-mixins.sass
index 2ec7f9b7d..333b95387 100644
--- a/resources/quizv2/style/004-mixins.sass
+++ b/resources/quizv2/style/004-mixins.sass
@@ -15,8 +15,8 @@
         @content
 
 
-@mixin opacity($opacity, $rule: background-color)
-    #{$rule}: rgba($texts-color,$opacity)
+@mixin opacity($opacity, $rule: background-color, $color: $texts-color)
+    #{$rule}: rgba($color,$opacity)
 
 
 @mixin flex-config($justify-content: false, $flex: false, $flex-direction: false, $align-items: false)
diff --git a/resources/quizv2/style/104-animations.sass b/resources/quizv2/style/104-animations.sass
new file mode 100644
index 000000000..98a8e4b3e
--- /dev/null
+++ b/resources/quizv2/style/104-animations.sass
@@ -0,0 +1,20 @@
+#anim
+    position: absolute
+    top: 50%
+    left: 50%
+    transform: translate(-50%,-50%)
+    z-index: 1
+    width: 100%
+    height: 100%
+    +opacity(.4, background-color, $neutral-color)
+    backdrop-filter: blur(4px)
+    opacity: 0
+    visibility: hidden
+    transition: all 1s
+    svg
+        position: relative
+        z-index: 1
+    &.active
+        visibility: visible
+        opacity: 1
+        transition: all 1s
diff --git a/resources/quizv2/style/style.sass b/resources/quizv2/style/style.sass
index b65a3b214..cd1056578 100644
--- a/resources/quizv2/style/style.sass
+++ b/resources/quizv2/style/style.sass
@@ -7,3 +7,4 @@
 @import 101-header-footer
 @import 102-intro
 @import 103-question-multiple
+@import 104-animations
diff --git a/resources/views/quizv2/footer.blade.php b/resources/views/quizv2/footer.blade.php
index 86fa6c182..24a2f540d 100644
--- a/resources/views/quizv2/footer.blade.php
+++ b/resources/views/quizv2/footer.blade.php
@@ -1,9 +1,9 @@
 <footer id="footer">
     @isset($reset)
-        <a class="btn secondary">
+        <a class="btn secondary reset">
             Reset
             <span class="access">R</span>
-        </a>
+        </>
     @endisset
     <a class="btn primary action">
         {{$text}}
diff --git a/resources/views/quizv2/index.blade.php b/resources/views/quizv2/index.blade.php
index ae666d9e5..fb1fc5066 100644
--- a/resources/views/quizv2/index.blade.php
+++ b/resources/views/quizv2/index.blade.php
@@ -23,9 +23,10 @@
         @foreach($data->questions as $key => $question)
             @include('quizv2.screens.question_'.$question['type'], ['data'=> $question, 'max' => $totalQuestion, 'position' => $key, 'alphabet' => $alphabet])
         @endforeach
+
+        <div id="anim"></div>
     </div>
 </div>
-<div id="anim"></div>
 <script src="js/quiz.js"></script>
 </body>
 </html>
diff --git a/resources/views/quizv2/screens/question_multiple.blade.php b/resources/views/quizv2/screens/question_multiple.blade.php
index 0da7e9828..8b90b32ab 100644
--- a/resources/views/quizv2/screens/question_multiple.blade.php
+++ b/resources/views/quizv2/screens/question_multiple.blade.php
@@ -1,19 +1,20 @@
 <div class="container-screen none" data-position="{{$position}}">
     @include('quizv2.header_question', ['data' => $data, 'max' => $max, 'position' => $position])
-    <form class="screen question-multiple">
-        <ul class="list">
-            @foreach($data['answers'] as $key => $answer)
-                @dump($answer)
-               <li class="list-item">
-                    <input type="checkbox" id="question-{{$key}}" class="none" value="">
-                    <label for="question-{{$key}}">
-                        <span class="relative">{{$answer['answer']}}</span>
-                        <span class="access">{{$alphabet[$key]}}</span>
-                    </label>
-               </li>
-            @endforeach
-        </ul>
-    </form>
+    <div class="screen question-multiple">
+        <form id="form-{{$position}}">
+            <ul class="list">
+                @foreach($data['answers'] as $key => $answer)
+                   <li class="list-item">
+                        <input type="{{ $data['type'] === "multiple" ? 'checkbox' : 'radio' }}" name="{{ $data['type'] === "multiple" ? 'answer-'.$position.$key : 'answer' }}" id="question-{{$position.$key}}" class="none" value="{{$key}}">
+                        <label for="question-{{$position.$key}}">
+                            <span class="relative">{{$answer['answer']}}</span>
+                            <span class="access">{{$alphabet[$key]}}</span>
+                        </label>
+                   </li>
+                @endforeach
+            </ul>
+        </form>
+    </div>
     <div class="screen-image">
     </div>
     @include('quizv2.footer', ['data' => $data, 'reset' => true, 'text' => 'Validate answer', 'info' => true])