response frontend completed
This commit is contained in:
Qais Yousuf
parent
a399126e3b
commit
31faec4f73
5 changed files with 308 additions and 141 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
//}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,15 +5,42 @@
|
|||
}
|
||||
<style>
|
||||
body {
|
||||
|
||||
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
|
||||
height: 100% !important;
|
||||
background-color:#141c27 !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;
|
||||
margin-top:100px;
|
||||
padding-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">
|
||||
<div class="container">
|
||||
|
||||
<h3 class="text-danger">@ViewBag.ErrorMessage</h3>
|
||||
<section class="hero container card">
|
||||
|
||||
<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>
|
||||
|
||||
|
|
@ -274,63 +391,32 @@
|
|||
|
||||
showStep(currentStep);
|
||||
updateStepper();
|
||||
function toggleCheckbox(labelElement) {
|
||||
var checkbox = labelElement.previousElementSibling; // Find the nearest preceding checkbox
|
||||
checkbox.checked = !checkbox.checked;
|
||||
checkbox.focus(); // Focus the checkbox after clicking on the label
|
||||
}
|
||||
$('.rating i').on('click', function() {
|
||||
var value = $(this).data('value');
|
||||
var questionIndex = $(this).closest('.rating').data('question');
|
||||
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> *@
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
height:600px;
|
||||
flex-direction: row;
|
||||
|
||||
}
|
||||
.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-left: 50px;
|
||||
padding-right: 50px;
|
||||
padding:0 50px 0 50px;
|
||||
margin:150px 30px 0px 30px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@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> *@
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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%);*/
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue