wait #6369 @1

diff --git a/js/quiz.countriesList.js b/js/quiz.countriesList.js
index d01edb84519ba3ad1fe89f342e2f8b4e55ce744f..9876233e3a17d3a083c0939167cc3f84ea6c1359 100644 (file)
--- a/js/quiz.countriesList.js
+++ b/js/quiz.countriesList.js
@@ -13,21 +13,22 @@ QuizCountriesList.prototype = {
         this.dropdown = this.quiz.screens.getActiveScreen().find(".dropdown")
 
         //
-        $(document).on("click", "label[for=toggleDropdown]", function() {
+        $(document).on("click", "label[for=toggleDropdown]", function () {
             $this.dropdown.addClass("active")
         })
 
         //
-        $(document).on("click", ".country", function() {
+        $(document).on("click", ".country", function () {
             $this.dropdown.removeClass("active")
             let value = $(this).text()
-            $(".active-screen input").val(value)
+            $(".active-screen input").val(value);
+            $(this).closest('form').trigger('change');
         })
 
         this.setScrollBarDropdown()
     },
 
-    setScrollBarDropdown: function() {
+    setScrollBarDropdown: function () {
         let dp = new SimpleBar(this.dropdown.get(0))
     },
 

diff --git a/js/quiz.screens.js b/js/quiz.screens.js
index f90791bdd27c9176ee4cbb26a5a699bd7734d26d..1f6f41667332119de1ad70f8faab6181ea2a761c 100644 (file)
--- a/js/quiz.screens.js
+++ b/js/quiz.screens.js
@@ -39,15 +39,15 @@ QuizScreens.prototype = {
         // Cliquer sur le bouton suivant
         $(document).on("click", ".active-screen.next .action", function () {
 
-            if($this.getActiveScreenType() === 'email') {
-                if(!$this.validateEmail($this.activeScreen.find("input").val())) {
-                    alert('Please enter a correct format');
+            if ($this.getActiveScreenType() === 'email') {
+                if (!$this.validateEmail($this.activeScreen.find("input").val())) {
+                    $this.activeScreen.find("input").addClass('error');
                     return false;
                 }
             }
 
             if (($this.currentQuestionAnswers.length === 0 && !parseInt($this.quiz.question.current().countdown_enable)) || (parseInt($this.quiz.question.current().countdown_enable) && $this.intervalCountDown !== 0 && $this.currentQuestionAnswers.length === 0)) {
-                alert('Please select at least one answer');
+                $this.activeScreen.find("input[type='email'],input[type='text'],textarea,.dropdown").addClass('error');
                 return false;
             }
 
@@ -55,7 +55,7 @@ QuizScreens.prototype = {
             if ($(this).hasClass('validate')) {
                 let review = $this.sendUserAnswers();
                 // Si la revue instantanée est activée, on affiche les résultats
-                if ($this.quiz.data.instantReview && !['country','email','text'].includes($this.getActiveScreenType()) ) {
+                if ($this.quiz.data.instantReview && !['country', 'email', 'text'].includes($this.getActiveScreenType())) {
                     $this.instantReview(review);
                 } else {
                     // Sinon, on passe directement à la question suivante
@@ -121,7 +121,7 @@ QuizScreens.prototype = {
         const $this = this;
         this.currentQuestionAnswers = []
 
-        if(['country','email','text'].includes(this.getActiveScreenType())) {
+        if (['country', 'email', 'text'].includes(this.getActiveScreenType())) {
             this.currentQuestionAnswers = this.getActiveScreen().find(".answer-text").val()
         } else {
             $(".active-screen form").find("input:checked").each(function () {
@@ -148,11 +148,11 @@ QuizScreens.prototype = {
 
             if ($this.getActiveScreenType() === 'draganddrop') {
                 $this.quiz.draganddrop.start()
-            } else if($this.getActiveScreenType() === 'match') {
+            } else if ($this.getActiveScreenType() === 'match') {
                 $this.quiz.match.start()
-            } else if($this.getActiveScreenType() === 'country') {
+            } else if ($this.getActiveScreenType() === 'country') {
                 $this.quiz.countriesList.start()
-            } else if($this.getActiveScreenType() === 'email') {
+            } else if ($this.getActiveScreenType() === 'email') {
                 $this.email = $this.activeScreen.find("input").val()
             }
 
@@ -224,7 +224,7 @@ QuizScreens.prototype = {
             this.getCurrentForm().find("input").prop("checked", false)
         } else if (type === 'draganddrop') {
             this.quiz.draganddrop.reset();
-        } else if(type === 'match') {
+        } else if (type === 'match') {
             this.quiz.match.reset();
         } else {
             this.getCurrentForm().find(".answer-text").val("")
@@ -306,8 +306,8 @@ QuizScreens.prototype = {
         document.documentElement.style.setProperty("--width-bg-countdown", "100%")
     },
 
-    validateEmail: function(email) {
-        let re = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
+    validateEmail: function (email) {
+        let re = /^(([^<>()[\]\.,;:\s@\"]+(\.[^<>()[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i;
         return re.test(email);
     }
 };

diff --git a/style/108-question-text.sass b/style/108-question-text.sass
index dac93104f104e68d50918011a1ae2f09e0645cdb..88c156dcf5712584053f7d4baecdcf1b31a3bf02 100644 (file)
--- a/style/108-question-text.sass
+++ b/style/108-question-text.sass
@@ -17,7 +17,8 @@
                 top: 50%
                 transform: translateY(-50%)
                 z-index: 3
-            input:focus+svg
+
+            input:focus + svg
                 color: $texts-color
 
     .form-group
@@ -35,6 +36,7 @@
         input,
         textarea,
         .dropdown
+            font-family: $font
             width: 100%
             +radius(16px)
             padding: 20px 16px
@@ -44,6 +46,7 @@
             color: $texts-color
             outline: none
             box-sizing: border-box
+
             &::placeholder
                 +opacity(.48, color, $texts-color)
                 opacity: 1
@@ -51,6 +54,9 @@
             &::-ms-input-placeholder
                 +opacity(.48, color, $texts-color)
 
+            &.error
+                border-color: $nok-color
+
         textarea
             height: 183px
 
@@ -73,6 +79,7 @@
             opacity: 0
             visibility: hidden
             z-index: 2
+
             &.active
                 max-height: 325px
                 opacity: 1
@@ -87,10 +94,10 @@
 
                 &.placeholder
                     padding-top: 0
-                    color: rgba($texts-color,.48)
+                    color: rgba($texts-color, .48)
 
             .country
-                border-top: 1px solid rgba($texts-color,.16)
+                border-top: 1px solid rgba($texts-color, .16)
 
     // SimpleBar personalisation
     .simplebar-track

diff --git a/views/screens/question_country.blade.php b/views/screens/question_country.blade.php
index 99f13aa0f7d19af9dc69daafa3be538b015d6c0e..1378e68ab7e54675b2ce297f34a04f78173e1c19 100644 (file)
--- a/views/screens/question_country.blade.php
+++ b/views/screens/question_country.blade.php
@@ -1,21 +1,25 @@
 <div class="container-screen none" data-screen="q-{{$position}}" data-type="country">
-    @include('components.background',['data'=>$data,'name'=>'standard','fit'=>'fill'])
+    @include('components.background',['data'=>$data, 'name'=>'standard', 'fit'=>'fill'])
     <div class="fill-area"></div>
     @include('header_question', ['question' =>$question, 'max' => $max, 'position' => $position])
     <div class="screen question-text question-country">
         <form id="form-{{$position}}">
             <div class="form-group">
                 <label for="toggleDropdown">
-                    <input class="answer-text" id="toggleDropdown" name="text" placeholder="{{$__('Select an answer')}}" type="text" />
-                    <svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="18.828" height="10.414" viewBox="0 0 18.828 10.414">
+                    <input class="answer-text" id="toggleDropdown" name="answer"
+                           placeholder="{{$question['placeholder']?:$__('Choose a country')}}" type="text"/>
+                    <svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="18.828" height="10.414"
+                         viewBox="0 0 18.828 10.414">
                         <g id="Groupe_87" data-name="Groupe 87" transform="translate(17.414 -14.086) rotate(90)">
-                            <path id="Tracé_50" data-name="Tracé 50" d="M11.5,5l8,8-8,8" transform="translate(4 -5)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
+                            <path id="Tracé_50" data-name="Tracé 50" d="M11.5,5l8,8-8,8" transform="translate(4 -5)"
+                                  fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
+                                  stroke-width="2"/>
                         </g>
                     </svg>
                 </label>
                 <div class="dropdown">
                     <ul class="countrylist">
-                        <li class="placeholder">{{$__("Select an answer")}}</li>
+                        <li class="placeholder">{{$question['placeholder']?:$__('Choose a country')}}</li>
                         @foreach($data["countriesList"] as $key => $name)
                             <li class="country" data-key="{{$key}}">{{$name}}</li>
                         @endforeach

diff --git a/views/screens/question_email.blade.php b/views/screens/question_email.blade.php
index 28661f9a9ee94f91acec4127db24375babbc1274..cc99b6db2502545ed059555b02060c64f232f62c 100644 (file)
--- a/views/screens/question_email.blade.php
+++ b/views/screens/question_email.blade.php
@@ -5,7 +5,7 @@
     <div class="screen question-text question-email">
         <form id="form-{{$position}}">
             <div class="form-group">
-                <input class="answer-text" name="email" type="email" placeholder="{{$__('Enter your email')}}..." />
+                <input class="answer-text" name="answer" type="email" placeholder="{{$question['placeholder']?:$__('Your email')}}" />
                 <svg xmlns="http://www.w3.org/2000/svg" width="17.6" height="15.6" viewBox="0 0 17.6 15.6">
                     <g id="Groupe_487" data-name="Groupe 487" transform="translate(-5299.2 240.8)">
                         <rect id="Rectangle_206" data-name="Rectangle 206" width="16" height="14" rx="3" transform="translate(5300 -240)" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.6"/>

diff --git a/views/screens/question_text.blade.php b/views/screens/question_text.blade.php
index 449b8d635e8dbb94cf2f5116bf89bcae88708bcd..7d321f017cbb0c0a10389df58a1b5aaffc170e20 100644 (file)
--- a/views/screens/question_text.blade.php
+++ b/views/screens/question_text.blade.php
@@ -5,7 +5,7 @@
     <div class="screen question-text">
         <form id="form-{{$position}}">
             <div class="form-group">
-                <input class="answer-text" name="text" type="text" placeholder="{{$__('Enter your answer')}}..."/>
+                <input class="answer-text" name="answer" type="text" placeholder="{{$question['placeholder']?:''}}"/>
             </div>
         </form>
     </div>

diff --git a/views/screens/question_textarea.blade.php b/views/screens/question_textarea.blade.php
index 2556abff41313ccdad67514656695f6b5b56f4a7..972654f76ea61404387a03b75518422045faf786 100644 (file)
--- a/views/screens/question_textarea.blade.php
+++ b/views/screens/question_textarea.blade.php
@@ -5,7 +5,7 @@
     <div class="screen question-text">
         <form id="form-{{$position}}">
             <div class="form-group">
-                <textarea class="answer-text" name="textarea" rows="10" placeholder="{{$__('Enter your answer')}}..."></textarea>
+                <textarea class="answer-text" name="answer" rows="10" placeholder="{{$question['placeholder']?:''}}"></textarea>
             </div>
         </form>
     </div>