Merge branch 'printResponsesOfCandidates'

Source/BusinessClass/CheckBoxQuestion.php

@@ -25,18 +25,18 @@ class CheckBoxQuestion extends BoxQuestion
         $possibleResponses = $this->getPossibleResponses();
         $categories = $this->getCategories();
 
-        $html = "\t\t\t<div id='$id' class='question'>
+        $html = "<div class='tab'>
-                <label><strong>$content</strong></label>\n";
+                    <h6>$content</h6>";
 
         for ($i = 0; $i < count($possibleResponses); $i++) {
             $categoriesSplit = $id."||".$possibleResponses[$i]."||";
             foreach ($categories[$i] as $category) {
                 $categoriesSplit.= $category."_";
             }
-            $html.= "\t\t\t\t<br><li><input type='checkbox' name='answers[]' value='$categoriesSplit' />
+            $html.= "<p><input style='-webkit-appearance: checkbox;' type='checkbox' name='answers[]' value='$categoriesSplit' />
-                <label>$possibleResponses[$i]</label>\n";
+                <label>$possibleResponses[$i]</label></p>";
         }
-        $html.= "\t\t\t</div><br>\n";
+        $html.= "\t\t\t</div>\n";
 
         return $html;
     }

Source/BusinessClass/ListBoxQuestion.php

@@ -25,19 +25,21 @@ class ListBoxQuestion extends BoxQuestion
         $possibleResponses = $this->getPossibleResponses();
         $categories = $this->getCategories();
 
-        $html = "\t\t\t<div id='$id' class='question'>
+
-                <label><strong>$content</strong></label>
+
-                <br><select name='answers[]'>\n";
+        $html = "<div class='tab'>
+                    <h6>$content</h6>
+                    <select name='answers[]'>";
 
         for ($i = 0; $i < count($possibleResponses); $i++) {
             $categoriesSplit = $id."||".$possibleResponses[$i]."||";
             foreach ($categories[$i] as $category) {
                 $categoriesSplit.= $category."_";
             }
-            $html.= "\t\t\t\t\t<option value='$categoriesSplit'>$possibleResponses[$i]</option>\n";
+            $html.= "<p> <option value='$categoriesSplit'>$possibleResponses[$i]</option> </p>";
         }
         $html.= "\t\t\t\t</select>
-            </div><br>\n";
+            </div>\n";
 
         return $html;
     }

Source/BusinessClass/TextQuestion.php

@@ -17,9 +17,11 @@ class TextQuestion extends Question
         $content = $this->getContent();
         $id = $this->getId();
 
-        return "\t\t\t<div class='question'>
+        return "<div class='tab'>
-                <label><strong>$content</strong></label>
+                    <h6>$content</h6>
-                <br><input data-id='$id' type='text' name='answers[]' />
+                    <p>
-            </div><br>\n";
+                        <input data-id='$id' placeholder='...' oninput='this.className = ''''  type='text' name='answers[]'>
+                    </p>
+                </div>\n";
     }
 }

Source/Model/ModelCandidate.php

@@ -36,7 +36,6 @@ class ModelCandidate
         $answer = [];
         $category = [];
         $questionsId = [];
-        var_dump($answersAndCategories);
         foreach ($answersAndCategories as $answerAndCategory) {
             $exploded = explode("||",$answerAndCategory);
             if( count($exploded) == 3 ){
@@ -82,25 +81,38 @@ class ModelCandidate
         $nbQuestions = count($questions);
         $time = round(($nbQuestions * 20)/60);
 
-        $html = "
+        $html = "<div class='container mt-5'>
-    <h1>$title</h1>\n
+    <div class='row d-flex justify-content-center align-items-center'>
-    <br>
+        <div class='col-md-8'>
-    <h3>$description</h3>\n
+            <form id='regForm' method='post'>
-    <br>
+                <h1 id='register'>$title</h1>
-    <h4><i>Temps estimé</i> : $time minutes</h4>
+                <div class='all-steps' id='all-steps'>";
-    <div id='container_form'>\n
+
-        <form method='post'>\n";
+        for ($i = 0; $i < sizeof($questions); $i++) {
+            $html.= "<span class='step'><i class='fa'></i></span>";
+        }
+        $html.= "</div>";
 
         foreach ($questions as $question) {
             $html.= $question->printStrategy()."\n";
         }
 
         if (count($questions) > 0) {
-            $html.= "\t\t\t<input type='submit' value='Envoyer' id='button' style='margin-left: 45%'>\n
+            $html.= "<div class='thanks-message text-center' id='text-message'> <img src='https://i.imgur.com/O18mJ1K.png' width='100' class='mb-4'>
-\t\t\t<input type='hidden' name='data_ids' value=''>
+                    <h3>Souhaitez-vous envoyer vos réponses ?</span>
-\t\t\t<input type='hidden' name='action' value='submitForm'>
+                    <input type='hidden' name='data_ids' value=''>
-\t\t</form>\n
+                    <input type='submit' value='Envoyer' id='button'>\n
-\t</div><br><br><br>\n";
+                    <input type='hidden' name='action' value='submitForm'>
+                </div>
+                <div style='overflow:auto;' id='nextprevious'>
+                    <div style='float:right;'>
+                        <button type='button' id='prevBtn' onclick='nextPrev(-1)'><i class='fa fa-angle-double-left'></i></button>
+                        <button type='button' id='nextBtn' onclick='nextPrev(1)'><i class='fa fa-angle-double-right'></i></button> </div>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>";
         } else {
             $html.= "\t\t</form>\n
 \t</div>\n";

Source/Views/CSS/styles.css

@@ -0,0 +1,119 @@
+body {
+    background: #eee
+}
+
+#regForm {
+    background-color: #ffffff;
+    margin: 0px auto;
+    font-family: Raleway;
+    padding: 40px;
+    border-radius: 30px;
+    background-color: rgba(23,143,150,0.7);
+}
+
+#register{
+    color: white;
+}
+
+h1 {
+    text-align: center
+}
+
+input {
+    padding: 10px;
+    width: 100%;
+    font-size: 17px;
+    font-family: Raleway;
+    border: 1px solid #aaaaaa;
+    border-radius: 10px;
+    -webkit-appearance: none;
+}
+
+
+
+.tab input:focus{
+
+    border:1px solid #6a1b9a !important;
+    outline: none;
+}
+
+input.invalid {
+
+    border:1px solid #e03a0666;
+}
+
+.tab {
+    display: none
+}
+
+button {
+    background-color: #6A1B9A;
+    color: #ffffff;
+    border: none;
+    border-radius: 50%;
+    padding: 10px 20px;
+    font-size: 17px;
+    font-family: Raleway;
+    cursor: pointer
+}
+
+button:hover {
+    opacity: 0.8
+}
+
+button:focus{
+
+    outline: none !important;
+}
+
+#prevBtn {
+    background-color: #bbbbbb
+}
+
+
+.all-steps{
+    text-align: center;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    width: 100%;
+    display: inline-flex;
+    justify-content: center;
+}
+
+.step {
+    height: 10px;
+    width: 10px;
+    margin: 0 2px;
+    background-color: #bbbbbb;
+    border: none;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 15px;
+    color: #6a1b9a;
+    opacity: 0.5;
+}
+
+.step.active {
+    opacity: 1
+}
+
+
+.step.finish {
+    color: #fff;
+    background: green;
+    opacity: 1;
+}
+
+
+
+.all-steps {
+    text-align: center;
+    margin-top: 30px;
+    margin-bottom: 30px
+}
+
+.thanks-message {
+    display: none
+}

Source/Views/HTML/form.php

@@ -5,24 +5,41 @@
     global $googleApis, $googleStatic, $poppins, $icon, $logoUCA;
     ?>
     <meta charset="UTF-8">
-    <link rel="stylesheet" href="Views/CSS/form.css" />
+    <link rel="stylesheet" href="Views/CSS/styles.css" />
-    <link rel="stylesheet" href="Views/CSS/base.css" />
+    <link rel="stylesheet" href="Views/CSS/stylesForm.css" />
     <link rel="preconnect" href="<?php echo $googleApis; ?>">
     <link rel="preconnect" href="<?php echo $googleStatic; ?>" crossorigin>
     <link href="<?php echo $poppins; ?>" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css" rel="stylesheet" />
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
     <title>Formulaire de témoignage</title>
     <link rel="shortcut icon" href="<?php echo $icon; ?>" type="image/x-icon">
     <link rel="icon" href="<?php echo $icon; ?>" type="image/x-icon">
 </head>
 
 <body>
-
+    <header class="py-1">
-    <img id="logoUCA" src="<?php echo $logoUCA; ?>" height="35px" width="auto" alt="logo UCA">
+        <div class="container px-4 px-lg-5 my-5">
+            <div class="text-center text-white">
+                <h1 class="display-4 fw-bolder">Les Témoignages</h1>
+                <p class="lead fw-normal text-white-50 mb-0">IUT Informatique de Clermont-Ferrand</p>
+            </div>
+        </div>
+    </header>
 
     <?php //echo $html; ?>
 
-</body>
+    <br><br>
+    <footer class="py-5 bg-white">
+    </footer>
 
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="Views/JS/scripts.js"></script>
     <script src="Views/JS/getData-Ids.js"></script>
 
+</body>
+
 </html>

Source/Views/JS/scripts.js

@@ -0,0 +1,68 @@
+var currentTab = 0;
+document.addEventListener("DOMContentLoaded", function(event) {
+
+
+    showTab(currentTab);
+
+});
+
+function showTab(n) {
+    var x = document.getElementsByClassName("tab");
+    x[n].style.display = "block";
+    if (n == 0) {
+        document.getElementById("prevBtn").style.display = "none";
+    } else {
+        document.getElementById("prevBtn").style.display = "inline";
+    }
+    if (n == (x.length - 1)) {
+        document.getElementById("nextBtn").innerHTML = '<i class="fa fa-angle-double-right"></i>';
+    } else {
+        document.getElementById("nextBtn").innerHTML = '<i class="fa fa-angle-double-right"></i>';
+    }
+    fixStepIndicator(n)
+}
+
+function nextPrev(n) {
+    var x = document.getElementsByClassName("tab");
+    if (n == 1 && !validateForm()) return false;
+    x[currentTab].style.display = "none";
+    currentTab = currentTab + n;
+    if (currentTab >= x.length) {
+
+        document.getElementById("nextprevious").style.display = "none";
+        document.getElementById("all-steps").style.display = "none";
+        document.getElementById("register").style.display = "none";
+        document.getElementById("text-message").style.display = "block";
+
+
+
+
+    }
+    showTab(currentTab);
+}
+
+function validateForm() {
+    var x, y, i, valid = true;
+    x = document.getElementsByClassName("tab");
+    y = x[currentTab].getElementsByTagName("input");
+    for (i = 0; i < y.length; i++) {
+        if (y[i].value == "") {
+            y[i].className += " invalid";
+            valid = false;
+        }
+
+
+    }
+    if (valid) {
+        document.getElementsByClassName("step")[currentTab].className += " finish";
+    }
+    return valid;
+}
+
+function fixStepIndicator(n) {
+    var i, x = document.getElementsByClassName("step");
+    for (i = 0; i < x.length; i++) {
+        x[i].className = x[i].className.replace(" active", "");
+    }
+    x[n].className += " active";
+}