336 lines
14 KiB
Text
336 lines
14 KiB
Text
@model Questionnaire
|
|
@{
|
|
ViewData["Title"] = "DisplayQuestionnaire";
|
|
Layout = "~/Views/Shared/_QuestionnaireResponse.cshtml";
|
|
}
|
|
<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
|
|
|
|
}
|
|
|
|
.QuestionContainer{
|
|
background-color:transparent !important;
|
|
margin-top:100px;
|
|
}
|
|
.stepper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.step-indicator {
|
|
width: 150px;
|
|
height: 30px;
|
|
border-radius: 3px;
|
|
background-color:transparent;
|
|
margin-bottom:10px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: white; /* Text color */
|
|
font-weight: bold;
|
|
border: 0.05px solid #294255;
|
|
box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.18);
|
|
-webkit-box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.18);
|
|
-moz-box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.18);
|
|
|
|
}
|
|
|
|
.step-indicator.active {
|
|
background-color: #33b3ae; /* Primary color for active step */
|
|
box-shadow: 0px 0px 21px -4px rgba(0,0,0,0.45);
|
|
-webkit-box-shadow: 0px 0px 21px -4px rgba(0,0,0,0.45);
|
|
-moz-box-shadow: 0px 0px 21px -4px rgba(0,0,0,0.45);
|
|
}
|
|
|
|
|
|
h4, h5,h6, p, label {
|
|
color:aliceblue;
|
|
|
|
}
|
|
|
|
.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
|
|
}
|
|
|
|
|
|
.form-control {
|
|
width: 80%;
|
|
margin: 15px 0px 0px 0px;
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
|
|
<div class="QuestionContainer">
|
|
<div class="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="row align-items-center">
|
|
<!-- Stepper -->
|
|
<div class="col-md-3">
|
|
<div class="stepper">
|
|
@for (int i = 0; i < Model.Questions.Count; i++)
|
|
{
|
|
var question = Model.Questions[i];
|
|
string stepClass = i == 0 ? "active" : ""; // Adjusted the index to start from the first question
|
|
<div class="step-indicator @(stepClass)" data-step-index="@i">
|
|
<span class="step-number">@((i + 1)). </span> <!-- Adjusted to start from 1 -->
|
|
<span class="step-label">@question.Type</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
<!-- Form Content -->
|
|
<div class="col-md-9">
|
|
<form id="questionnaireForm">
|
|
@for (int i = 0; i < Model.Questions.Count; i++)
|
|
{
|
|
var question = Model.Questions[i];
|
|
<div class="step @(i == 0 ? "active" : "")">
|
|
<p class="font-weight-normal">@(i + 1). @question.Text</p>
|
|
@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.Rating:
|
|
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;
|
|
default:
|
|
<div class="alert alert-danger" role="alert">
|
|
Unsupported question type.
|
|
</div>
|
|
break;
|
|
}
|
|
<div class="mt-3">
|
|
@if (i > 0)
|
|
{
|
|
<button type="button" class="btn btn-secondary btn-sm mr-3 prev" id="BannerButon"><i class="bi bi-arrow-left"></i> Previous </button>
|
|
}
|
|
@if (i < Model.Questions.Count - 1)
|
|
{
|
|
<button type="button" class="btn btn-primary btn-sm next" id="BannerButon">Next <i class="bi bi-arrow-right"></i></button>
|
|
}
|
|
</div>
|
|
|
|
</div>
|
|
}
|
|
|
|
<button type="submit" class="btn btn-primary submit btn-sm mt-4" id="BannerButon" style="display: none;">Submit</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
@section Scripts {
|
|
|
|
|
|
@{
|
|
<partial name="_ValidationScriptsPartial" />
|
|
}
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const form = document.getElementById('questionnaireForm');
|
|
const steps = form.querySelectorAll('.step');
|
|
const stepIndicators = document.querySelectorAll('.step-indicator');
|
|
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';
|
|
}
|
|
});
|
|
|
|
stepIndicators.forEach((indicator, i) => {
|
|
if (i === index) {
|
|
indicator.classList.add('active');
|
|
} else {
|
|
indicator.classList.remove('active');
|
|
}
|
|
});
|
|
|
|
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();
|
|
updateStepper();
|
|
});
|
|
});
|
|
|
|
const prevButtons = form.querySelectorAll('.prev');
|
|
prevButtons.forEach(button => {
|
|
button.addEventListener('click', () => {
|
|
goToPrevStep();
|
|
updateStepper();
|
|
});
|
|
});
|
|
|
|
function updateStepper() {
|
|
const currentStepIndex = currentStep;
|
|
stepIndicators.forEach((indicator, i) => {
|
|
if (i === currentStepIndex) {
|
|
indicator.style.backgroundColor = '#33b3ae'; // Change to your primary color
|
|
} else {
|
|
indicator.style.backgroundColor = ''; // Reset to default color for non-active steps
|
|
}
|
|
});
|
|
}
|
|
|
|
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
|
|
}
|
|
});
|
|
</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> *@
|
|
}
|
|
|