response frontend completed

Web/Areas/Admin/Controllers/QuestionnaireController.cs

@@ -513,9 +513,7 @@ namespace Web.Areas.Admin.Controllers
                                                 body {{
                                                     font-family: Arial, sans-serif;
                                                 }}
-                                                .text-danger {{
+                                               
-                                                  color:red;  
-                                                 }}
                                                 .container {{
                                                     max-width: 600px;
                                                     margin: 0 auto;
@@ -543,13 +541,13 @@ namespace Web.Areas.Admin.Controllers
                                                 <h5>{subject}</h5>
                                              <p>Thank you for participating in our survey. Your feedback is valuable to us.</p>
                                                <p>Please click the button below to start the survey:</p>
-                                                    <p class=""text-danger"">The survey will be expire in Date:{expiryDateTime.ToLongDateString()} Time: {expiryDateTime.ToShortTimeString()} </p>
+                                                    <p class=""text-danger"">The survey will be expire :{expiryDateTime.ToLongDateString()} Time: {expiryDateTime.ToShortTimeString()} </p>
                                                      <div style='text-align: center;'>
                                                     <a href='{completeUrl}' class='button'>Start Survey</a>
                                                 <br>
                                                
                                                 </div><br>
-                                                <p><strong>Søren Eggert Lundsteen Olsen</strong>
+                                                <p><strong>Søren Eggert Lundsteen Olsen</strong><br>
                                                 Seosoft ApS<br>
                                                 <hr>
                                                 Hovedgaden 3

Web/Controllers/QuestionnaireResponseController.cs

@@ -71,48 +71,6 @@ namespace Web.Controllers
         }
 
 
-        //public IActionResult DisplayQuestionnaire(int id, string token)
-        //{
-        //    // Check if the token is null or empty
-        //    if (string.IsNullOrEmpty(token))
-        //    {
-        //        ViewBag.ErrorMessage = "The URL is invalid. Please provide a valid token.";
-        //        return View("Error");
-        //    }
-
-        //    // Split the token to extract the expiration date and time
-        //    string[] tokenParts = token.Split('|');
-        //    if (tokenParts.Length != 2)
-        //    {
-        //        ViewBag.ErrorMessage = "The URL is invalid. Please provide a valid token.";
-        //        return View("Error");
-        //    }
-
-        //    string expiryDateTimeString = tokenParts[1];
-
-        //    // Parse the expiration datetime in UTC format
-        //    if (!DateTime.TryParseExact(expiryDateTimeString, "yyyy-MM-ddTHH:mm:ssZ", CultureInfo.InvariantCulture, DateTimeStyles.AssumeUniversal, out DateTime expiryDateTimeUtc))
-        //    {
-        //        ViewBag.ErrorMessage = "The URL is invalid. Please provide a valid token.";
-        //        return View("Error");
-        //    }
-
-        //    // Convert the expiration datetime to local time
-        //    DateTime expiryDateTimeLocal = expiryDateTimeUtc.ToLocalTime();
-
-        //    // Check if the token is expired (accounting for time zone offset)
-        //    if (expiryDateTimeLocal >= DateTime.Now.AddHours(1))
-        //    {
-
-        //        return RedirectToAction(nameof(Error));
-        //    }
-
-        //    // Retrieve the questionnaire using the numeric ID
-        //    var questionnaire = _questionnaireRepository.GetQuestionnaireWithQuestionAndAnswer(id);
-
-        //    return View(questionnaire);
-        //}
-
         
     }
 }

Web/Views/QuestionnaireResponse/DisplayQuestionnaire.cshtml

@@ -4,16 +4,43 @@
     Layout = "~/Views/Shared/_QuestionnaireResponse.cshtml";
 }
 <style>
-   body{
+    body {
+        height: 100% !important;
+        background-color:#141c27 !important;
        
-      background-repeat:no-repeat;
+    }
-        background: linear-gradient(119deg, rgba(47,82,131,1) 0%, rgba(29,33,59,1) 34%, rgba(27,54,61,1) 67%, rgba(58,82,116,1) 100%) !important
 
+    #QuestionCard{
+        height:auto;
+        padding:15px;
+
+    }
+    #rowSectionError {
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: space-around;
+        align-items: center;
+        align-content: center;
+        width: 100%;
+        flex-direction: row;
+    }
+
+
+   output{
+       color:white !important;
+         font-weight:bold; 
    }
   
+    #boxBanner {
+        display: block;
+        width: auto;
+        margin: 5px;
+    }
+
     .QuestionContainer{
-        background-color:transparent !important;
+        padding-top:100px;
-        margin-top:100px;
+        padding-bottom:100px;
+       
     }
     .stepper {
         display: flex;
@@ -21,6 +48,7 @@
         align-items: center;
     }
 
+
     .step-indicator {
         width: 150px;
         height: 30px;
@@ -52,19 +80,16 @@
        
     }
 
-    .hero {
+ 
-        background-color:transparent !important;
+  
-    }
-    section {
-        margin-top:30px;
-    }
       .card{
         box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
         -webkit-box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
         -moz-box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
         border-radius:10px;
         background-color:transparent;
-        padding:30px
+        padding:50px;
+
     }
 
    
@@ -73,20 +98,40 @@
         margin: 15px 0px 0px 0px;
     }
 
+  .rating {
+    display: inline-flex;
+    flex-direction: row-reverse; /* Set the direction to row-reverse */
+}
+
+.rating {
+    display: inline-block;
+}
+
+.rating i {
+    font-size: 25px;
+    cursor: pointer;
+  
+}
+.rating i {
+    color: white; /* Set default color to white */
+}
+
+.rating i.selected {
+    color: orange;
+}
+
+
 </style>
 
 
 
 <div class="QuestionContainer">
-        <div class="container card">
+        <section class="hero container card">
-            <div class="container">
-
-            <h3 class="text-danger">@ViewBag.ErrorMessage</h3>
 
                 <h4>@Model.Title</h4>
                 <p>@Html.Raw(Model.Description) </p>
-            </div>
+
-            <div class="container mt-5">
+            <div class="container">
                 <div class="row align-items-center">
                     <!-- Stepper -->
                     <div class="col-md-3">
@@ -110,7 +155,75 @@
                                 var question = Model.Questions[i];
                                 <div class="step @(i == 0 ? "active" : "")">
                                     <p class="font-weight-normal">@(i + 1). @question.Text</p>
+                                    <div id="QuestionCard">
                                     @switch (question.Type)
+                                    {
+                                        case QuestionType.Text:
+                                            <div class="form-group">
+                                                <input type="text" class="form-control" name="question@(i + 1)" placeholder="Enter answer">
+                                            </div>
+                                            break;
+                                        case QuestionType.CheckBox:
+                                        case QuestionType.Multiple_choice:
+                                        case QuestionType.Likert:
+                                        case QuestionType.Matrix:
+                                        case QuestionType.Demographic:
+                                        case QuestionType.Ranking:
+                                            <div class="form-group">
+                                                @foreach (var answer in question.Answers)
+                                                {
+                                                    <div class="form-check">
+                                                        <input class="form-check-input" type="checkbox" id="question@(i + 1)_answer@(answer.Id)" name="question@(i + 1)" value="@answer.Id">
+                                                        <label class="form-check-label" for="question@(i + 1)_answer@(answer.Id)">
+                                                            @answer.Text
+                                                        </label>
+                                                    </div>
+                                                }
+                                            </div>
+                                            break;
+                                        case QuestionType.TrueFalse:
+                                            <div class="form-check">
+                                                <input class="form-check-input" type="radio" id="question@(i + 1)_true" name="question@(i + 1)" value="true">
+                                                <label class="form-check-label" for="question@(i + 1)_true">True</label>
+                                            </div>
+                                            <div class="form-check">
+                                                <input class="form-check-input" type="radio" id="question@(i + 1)_false" name="question@(i + 1)" value="false">
+                                                <label class="form-check-label" for="question@(i + 1)_false">False</label>
+                                            </div>
+                                            break;
+                                        case QuestionType.Open_ended:
+                                            <textarea class="form-control" id="question@(i + 1)" name="question@(i + 1)" rows="3" placeholder="Enter answer"></textarea>
+                                            break;
+                                        case QuestionType.Image:
+                                            <input type="file" class="form-control-file" id="question@(i + 1)" name="question@(i + 1)">
+                                            break;
+                                        case QuestionType.Slider:
+                                            <input type="range" class="form-range" id="question@(i + 1)" name="question@(i + 1)" min="0" max="100" step="1">
+                                            <output id="question@(i + 1)_output">50</output>
+                                            <script>
+                                                document.getElementById('question@(i + 1)').addEventListener('input', function () {
+                                                    document.getElementById('question@(i + 1)_output').value = this.value;
+                                                });
+                                            </script>
+                                            break;
+                                        case QuestionType.Rating:
+                                         <div class="rating" data-question="@i">
+                                            @foreach (var answer in question.Answers)
+                                            {
+                                                @*  <span class="text-white">@answer.Id</span> *@
+                                                 <i class="bi bi-star ml-3" data-value="@answer.Id"></i>
+                                                  
+                                            }
+                                        </div>
+                                       
+                                            break;
+                                        default:
+                                            <div class="alert alert-danger" role="alert">
+                                                Unsupported question type.
+                                            </div>
+                                            break;
+                                    }
+                                 @*    @switch (question.Type)
                                     {
                                         case QuestionType.Text:
                                             <div class="form-group">
@@ -161,12 +274,16 @@
                                                 });
                                             </script>
                                             break;
+
                                         default:
                                             <div class="alert alert-danger" role="alert">
                                                 Unsupported question type.
                                             </div>
                                             break;
-                                    }
+                                    } *@
+                                    </div>
+                                  
+                                   
                                     <div class="mt-3">
                                         @if (i > 0)
                                         {
@@ -186,7 +303,7 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </section>
 
     </div> 
 
@@ -273,64 +390,33 @@
             }
 
             showStep(currentStep);
-            updateStepper();
+                    updateStepper();
-            function toggleCheckbox(labelElement) {
+                 $('.rating i').on('click', function() {
-                var checkbox = labelElement.previousElementSibling; // Find the nearest preceding checkbox
+                var value = $(this).data('value');
-                checkbox.checked = !checkbox.checked;
+                var questionIndex = $(this).closest('.rating').data('question');
-                checkbox.focus(); // Focus the checkbox after clicking on the label
+                var selectedStars = $(this).closest('.rating').find('i.selected').length;
-            }
+        
-        });
+                // Unselect all stars
+                $(this).closest('.rating').find('i').removeClass('selected');
+        
+                // Select the clicked star and all preceding stars
+                $(this).addClass('selected').prevAll().addClass('selected');
+        
+                // Update the hidden input value if needed
+                $('input[name="question' + questionIndex + '_rating"]').val(value);
+        
+                // Update the label with the number of selected stars
+                $(this).closest('.rating').next('.selected-count').text(selectedStars);
+            });
+    
+            // Prevent the default action for the anchor tags within the rating
+            $('.rating a').on('click', function(e) {
+                e.preventDefault();
+            });
+    });
+ 
     </script>
 
-    @* <script>
-        document.addEventListener("DOMContentLoaded", function () {
-            const form = document.getElementById('questionnaireForm');
-            const steps = form.querySelectorAll('.step');
-            const submitButton = form.querySelector('.submit');
-            let currentStep = 0;
   
-            function showStep(index) {
-                steps.forEach((step, i) => {
-                    if (i === index) {
-                        step.style.display = 'block';
-                    } else {
-                        step.style.display = 'none';
-                    }
-                });
-
-                if (index === steps.length - 1) {
-                    submitButton.style.display = 'block';
-                } else {
-                    submitButton.style.display = 'none';
-                }
-            }
-
-            function goToNextStep() {
-                if (currentStep < steps.length - 1) {
-                    currentStep++;
-                    showStep(currentStep);
-                }
-            }
-
-            function goToPrevStep() {
-                if (currentStep > 0) {
-                    currentStep--;
-                    showStep(currentStep);
-                }
-            }
-
-            const nextButtons = form.querySelectorAll('.next');
-            nextButtons.forEach(button => {
-                button.addEventListener('click', goToNextStep);
-            });
-
-            const prevButtons = form.querySelectorAll('.prev');
-            prevButtons.forEach(button => {
-                button.addEventListener('click', goToPrevStep);
-            });
-
-            showStep(currentStep);
-        });
-    </script> *@
 }
 

Web/Views/QuestionnaireResponse/Error.cshtml

@@ -12,13 +12,18 @@
         background: linear-gradient(119deg, rgba(47,82,131,1) 0%, rgba(29,33,59,1) 34%, rgba(27,54,61,1) 67%, rgba(58,82,116,1) 100%) !important
     }
 
-    .containerError {
+    #rowSectionError {
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: space-around;
+        align-items: center;
+        align-content: center;
+        width: 100%;
         
-      margin-top:150px;
+        flex-direction: row;
-      height:600px;
        
     }
-    .card{
+    #Errocard{
         position: relative;
         display: -webkit-box;
         display: -ms-flexbox;
@@ -27,23 +32,142 @@
         -webkit-box-direction: normal;
         -ms-flex-direction: column;
         flex-direction: row;
-        min-width: 0;
+      
         word-wrap: break-word;
         box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
         -webkit-box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
         -moz-box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
         border-radius: 10px;
         background-color: transparent;
-      
+        height:400px;
         flex-wrap: nowrap;
         align-items: center;
-        height: 500px;
+        padding:0 50px 0 50px;
-        padding-left: 50px;
+        margin:150px 30px 0px 30px;
-        padding-right: 50px;
+      
     }
 
+
+    
+
+
+    @@media (max-width: 792px) {
+
+
+        #Errocard {
+        display: flex;
+        flex-direction:column;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        align-content: center;
+        
+        height: 70vh;
+        padding: 0 20px 0 20px;
+        
+    }
+
+        #boxError {
+        width: auto;
+        height: 30%;
+        margin: 5px;
+    }
+}
+
+    @@media (max-width: 800px) {
+
+
+        #Errocard {
+            display: flex;
+            flex-direction: column;
+            flex-wrap: nowrap;
+            justify-content: center;
+            align-items: center;
+            align-content: center;
+            height: 70vh;
+            padding: 0 20px 0 20px;
+        }
+
+        #boxError {
+            width: auto;
+            height: 30%;
+            margin: 5px;
+        }
+    }
+
+
+    @@media (max-width: 1300px) {
+
+
+        #Errocard {
+            position: relative;
+            display: -webkit-box;
+            display: -ms-flexbox;
+            display: flex;
+            -webkit-box-orient: vertical;
+            -webkit-box-direction: normal;
+            -ms-flex-direction: column;
+            flex-direction: row;
+            word-wrap: break-word;
+            box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
+            -webkit-box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
+            -moz-box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
+            border-radius: 10px;
+            background-color: transparent;
+            height: 400px;
+            flex-wrap: nowrap;
+            align-items: center;
+            padding: 0 50px 0 50px;
+            margin: 50px 30px 0px 30px;
+        }
+
+        #boxError {
+            width: auto;
+            
+            margin: 5px;
+        }
+    
+
+    #boxBanner {
+        display: block;
+        width: auto;
+        margin: 5px;
+       
+    }
 </style>
-<div class="containerError">
+
+<div class="d-flex flex-column" id="BannerBackground">
+
+    <!-- FOR DEMO PURPOSE -->
+    <section class=" text-white">
+        <div class="container py-1">
+       
+          
+                <div class="card" id="Errocard">
+                    <div class="col-lg-6" id="boxError">
+                        <h5 class="text-danger">@ViewBag.ErrorMessage</h5>
+
+
+                        @*   <p class="fst-italic text-muted">@Html.Raw(Model.Content) <a class="text-primary" href="@Model.Sitecopyright" target="_blank">SeoSoft</a></p> *@
+
+                        <a href="#" class="btn btn-sm mt-3" id="BannerButon"> Contact <i class="bi bi-ui-checks"></i></a>
+
+                    </div>
+                <div class="col-lg-6" id="boxError">
+                        <script src="https://unpkg.com/@@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>
+                        <dotlottie-player src="https://lottie.host/e3084d59-5df1-44e9-a0fe-0a015257fba7/LVAJX2PbZo.json" class="img-fluid" speed="1" style="width: auto; height: auto;" direction="1" playMode="normal" loop autoplay></dotlottie-player>
+                    </div>
+                </div>
+               
+            
+        </div>
+    </section>
+
+</div>
+
+
+
+@* <div class="containerError">
     <div class="container">
         <div class="row">
                     <div class="card">
@@ -64,7 +188,7 @@
             </div>
 
     
-</div>
+</div> *@
 
 
 

Web/wwwroot/css/site.css

@@ -53,6 +53,7 @@
     background-repeat: no-repeat;
     width: 100%;
   
+   
 }
 
 #MainContent{
@@ -183,7 +184,7 @@
 
 .hero {
     background-color: #141c27;
- /*   background-image: linear-gradient(119deg, rgba(14,12,56,1) 0%, rgba(20,26,35,1) 35%, rgba(24,35,51,1) 66%, rgba(34,49,70,1) 100%);*/
+
 }