All question type frontend completed
This commit is contained in:
Qais Yousuf
parent
1a43f8b456
commit
98ec7a6561
1 changed files with 439 additions and 316 deletions
|
|
@ -6,15 +6,10 @@
|
|||
<style>
|
||||
body {
|
||||
height: 100% !important;
|
||||
background-color:#141c27 !important;
|
||||
|
||||
background-color: #141c27 !important;
|
||||
}
|
||||
|
||||
#QuestionCard{
|
||||
height:auto;
|
||||
padding:15px;
|
||||
|
||||
}
|
||||
#rowSectionError {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
|
|
@ -26,10 +21,10 @@
|
|||
}
|
||||
|
||||
|
||||
output{
|
||||
color:white !important;
|
||||
font-weight:bold;
|
||||
}
|
||||
output {
|
||||
color: white !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#boxBanner {
|
||||
display: block;
|
||||
|
|
@ -37,11 +32,11 @@
|
|||
margin: 5px;
|
||||
}
|
||||
|
||||
.QuestionContainer{
|
||||
padding-top:100px;
|
||||
padding-bottom:100px;
|
||||
|
||||
.QuestionContainer {
|
||||
padding-top: 100px;
|
||||
padding-bottom: 100px;
|
||||
}
|
||||
|
||||
.stepper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -53,18 +48,17 @@
|
|||
width: 150px;
|
||||
height: 30px;
|
||||
border-radius: 3px;
|
||||
background-color:transparent;
|
||||
margin-bottom:10px;
|
||||
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;
|
||||
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 {
|
||||
|
|
@ -75,21 +69,19 @@
|
|||
}
|
||||
|
||||
|
||||
h4, h5,h6, p, label {
|
||||
color:aliceblue;
|
||||
|
||||
h4, h5, h6, p, label {
|
||||
color: aliceblue;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.card{
|
||||
.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:50px;
|
||||
|
||||
border-radius: 10px;
|
||||
background-color: transparent;
|
||||
padding: 50px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -146,19 +138,17 @@
|
|||
.rank-list li {
|
||||
padding: 5px;
|
||||
margin-bottom: 2px;
|
||||
color:white
|
||||
|
||||
color: white
|
||||
}
|
||||
|
||||
|
||||
.likert {
|
||||
box-shadow: 0px 0px 7px 0px rgba(20,101,230,1);
|
||||
-moz-box-shadow: 0px 0px 36px -12px rgba(20, 101, 230, 1);
|
||||
-webkit-box-shadow:0px 0px 7px 0px rgba(20,101,230,1);
|
||||
-webkit-box-shadow: 0px 0px 7px 0px rgba(20,101,230,1);
|
||||
border-radius: 5px;
|
||||
background-color: transparent;
|
||||
padding: 20px;
|
||||
|
||||
}
|
||||
|
||||
.likert .statement {
|
||||
|
|
@ -179,7 +169,7 @@
|
|||
display: block;
|
||||
cursor: pointer;
|
||||
padding: 20px;
|
||||
background-color: #182c4b;
|
||||
background-color: #33b3ae;
|
||||
border-radius: 2px;
|
||||
margin: 3px;
|
||||
transition: background-color 0.3s;
|
||||
|
|
@ -189,28 +179,26 @@
|
|||
.likert input[type="radio"]:checked + label {
|
||||
background-color: transparent;
|
||||
color: white;
|
||||
font-size:1rem;
|
||||
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-deck .card {
|
||||
cursor: pointer;
|
||||
padding:0px;
|
||||
padding: 10px;
|
||||
border: 2px solid transparent;
|
||||
box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
|
||||
-webkit-box-shadow: 0px 0px 5px 0px rgba(20,101,230,1);
|
||||
-moz-box-shadow: 0px 0px 36px -12px rgba(20, 101, 230, 1);
|
||||
|
||||
background-color:transparent;
|
||||
background-color: transparent;
|
||||
transition: border 0.3s ease; /* Add transition for a smooth effect */
|
||||
}
|
||||
img{
|
||||
border-radius:3px;
|
||||
box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
|
||||
-webkit-box-shadow: 0px 0px 5px 0px rgba(20,101,230,1);
|
||||
-moz-box-shadow: 0px 0px 36px -12px rgba(20, 101, 230, 1);
|
||||
}
|
||||
|
||||
/* img{
|
||||
border-radius:3px;
|
||||
box-shadow: 0px 0px 36px -12px rgba(20,101,230,1);
|
||||
-webkit-box-shadow: 0px 0px 5px 0px rgba(20,101,230,1);
|
||||
-moz-box-shadow: 0px 0px 36px -12px rgba(20, 101, 230, 1);
|
||||
}
|
||||
*/
|
||||
.card-deck .card:hover {
|
||||
border: 2px solid #007bff;
|
||||
transition: border 0.3s ease; /* Ensure the transition applies to the hover state as well */
|
||||
|
|
@ -230,6 +218,95 @@
|
|||
display: none; /* Hide radio button */
|
||||
}
|
||||
|
||||
.matrix-question .table {
|
||||
box-shadow: 0px 0px 7px 0px rgba(20,101,230,1);
|
||||
-moz-box-shadow: 0px 0px 36px -12px rgba(20, 101, 230, 1);
|
||||
-webkit-box-shadow: 0px 0px 7px 0px rgba(20,101,230,1);
|
||||
border-radius: 5px;
|
||||
background-color: transparent;
|
||||
padding: 20px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.matrix-question th, .matrix-question td {
|
||||
text-align: left; /* Aligns text to the left */
|
||||
border: 2px solid white;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.matrix-question th {
|
||||
background-color: #33b3ae; /* Semi-transparent background for headers */
|
||||
color: white; /* White text color for headers */
|
||||
}
|
||||
|
||||
.matrix-question td {
|
||||
background-color: #33b3ae; /* Semi-transparent background for headers */
|
||||
color: white;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
input[type="radio"] {
|
||||
border: 1px solid #007bff !important;
|
||||
}
|
||||
|
||||
.matrix-question input[type="radio"] {
|
||||
border: 1px solid #007bff !important;
|
||||
}
|
||||
|
||||
|
||||
.sortable-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.draggable-item:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.draggable-item {
|
||||
padding: 10px;
|
||||
margin-bottom: 5px;
|
||||
background-color: #f8f9fa; /* Light gray background for default state */
|
||||
border: 1px solid #ccc;
|
||||
cursor: grab; /* Cursor indicates that this item is draggable */
|
||||
transition: background-color 0.3s ease; /* Smooth transition for background color */
|
||||
border-radius: 5px;
|
||||
margin: 10px;
|
||||
display: flex; /* Enable flexbox */
|
||||
align-items: center; /* Center items vertically */
|
||||
justify-content: space-between; /* Spread out content */
|
||||
}
|
||||
|
||||
.draggable-item.selected {
|
||||
background-color: #33b3ae;
|
||||
; /* Blue background for selected state */
|
||||
color: white; /* White text color for better visibility */
|
||||
}
|
||||
|
||||
.up-button, .down-button {
|
||||
margin: 0 5px; /* Spacing between buttons */
|
||||
}
|
||||
|
||||
.answer-index {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.draggable-item .bi-grip-vertical {
|
||||
margin-right: auto; /* Pushes all elements to the right of it to the far right */
|
||||
}
|
||||
|
||||
.draggable-item button {
|
||||
margin-left: 5px; /* Space between buttons */
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
@ -280,229 +357,275 @@
|
|||
}
|
||||
<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:
|
||||
@foreach (var answer in question.Answers)
|
||||
{
|
||||
|
||||
<input type="Text" class="form-control" id="question@(i + 1)" name="Questions[@i].SelectedText" rows="3" placeholder="Enter answer"></input>
|
||||
<input class="form-control hidden-textarea" id="question@(i + 1)" name="Questions[@i].SelectedAnswerIds" value="@answer.Id" rows="3" placeholder="Enter answer"></input>
|
||||
}
|
||||
break;
|
||||
case QuestionType.CheckBox:
|
||||
case QuestionType.Multiple_choice:
|
||||
case QuestionType.Demographic:
|
||||
|
||||
<div class="form-group">
|
||||
|
||||
@foreach (var answer in question.Answers)
|
||||
{
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" id="question@(i)_answer@(answer.Id)" type="checkbox" name="Questions[@i].SelectedAnswerIds" value="@answer.Id">
|
||||
<label class="form-check-label" for="question@(i)_answer@(answer.Id)">
|
||||
@answer.Text
|
||||
</label>
|
||||
</div>
|
||||
|
||||
}
|
||||
|
||||
</div>
|
||||
break;
|
||||
case QuestionType.TrueFalse:
|
||||
<div class="form-check">
|
||||
|
||||
@foreach (var answer in question.Answers)
|
||||
{
|
||||
<div class="form-check">
|
||||
<input class="form-check-input answer-input" type="radio" id="question@(i)_answer@(answer.Id)" name="Questions[@i].SelectedAnswerIds" value="@answer.Id">
|
||||
|
||||
<label class="form-check-label" for="question@(i)_answer@(answer.Id)">
|
||||
@answer.Text
|
||||
</label>
|
||||
</div>
|
||||
<p class="font-weight-normal">@(i + 1). @question.Text</p>
|
||||
|
||||
|
||||
}
|
||||
|
||||
@switch (question.Type)
|
||||
{
|
||||
case QuestionType.Text:
|
||||
@foreach (var answer in question.Answers)
|
||||
{
|
||||
|
||||
</div>
|
||||
<input type="Text" class="form-control" id="question@(i + 1)" name="Questions[@i].SelectedText" rows="3" placeholder="Enter answer"></input>
|
||||
<input class="form-control hidden-textarea" id="question@(i + 1)" name="Questions[@i].SelectedAnswerIds" value="@answer.Id" rows="3" placeholder="Enter answer"></input>
|
||||
}
|
||||
break;
|
||||
case QuestionType.CheckBox:
|
||||
case QuestionType.Multiple_choice:
|
||||
case QuestionType.Demographic:
|
||||
|
||||
break;
|
||||
case QuestionType.Open_ended:
|
||||
<div class="form-group">
|
||||
|
||||
@foreach (var answer in question.Answers)
|
||||
{
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" id="question@(i)_answer@(answer.Id)" type="checkbox" name="Questions[@i].SelectedAnswerIds" value="@answer.Id">
|
||||
<label class="form-check-label" for="question@(i)_answer@(answer.Id)">
|
||||
@answer.Text
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<textarea type="Text" class="form-control" id="question@(i + 1)" name="Questions[@i].SelectedText" value="@answer.Text" rows="3" placeholder="Enter answer"></textarea>
|
||||
<input type="hidden" class="form-control" id="question@(i + 1)" name="Questions[@i].SelectedAnswerIds" value="@answer.Id" rows="3" placeholder="Enter answer"></input>
|
||||
}
|
||||
|
||||
break;
|
||||
</div>
|
||||
break;
|
||||
case QuestionType.TrueFalse:
|
||||
<div class="form-check">
|
||||
|
||||
case QuestionType.Slider:
|
||||
|
||||
@foreach(var answer in question.Answers)
|
||||
@foreach (var answer in question.Answers)
|
||||
{
|
||||
<input type="range" class="form-range " id="question@(i + 1)" name="Questions[@i].SelectedText" min="0" max="100" step="1">
|
||||
<input type="hidden" class="form-range " id="question@(i + 1)" name="Questions[@i].SelectedAnswerIds" value="@answer.Id" min="0" max="100" step="1">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input answer-input" type="radio" id="question@(i)_answer@(answer.Id)" name="Questions[@i].SelectedAnswerIds" value="@answer.Id">
|
||||
|
||||
<label class="form-check-label" for="question@(i)_answer@(answer.Id)">
|
||||
@answer.Text
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<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" >
|
||||
</div>
|
||||
|
||||
@foreach (var answer in question.Answers)
|
||||
{
|
||||
<div class="rating-item">
|
||||
<div class="rating-label">@answer.Text</div>
|
||||
<input type="radio" id="question@(i)_rating@(answer.Id)"
|
||||
name="Questions[@i].SelectedAnswerIds"
|
||||
value="@answer.Id" class="rating-input" hidden>
|
||||
<label for="question@(i)_rating@(answer.Id)" class="bi bi-star-fill rating-star"></label>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
break;
|
||||
case QuestionType.Open_ended:
|
||||
|
||||
break;
|
||||
case QuestionType.Ranking:
|
||||
<div class="ranking" data-question="@i">
|
||||
@foreach (var answer in question.Answers)
|
||||
{
|
||||
|
||||
<ul class="rank-list">
|
||||
@foreach (var answer in question.Answers)
|
||||
{
|
||||
<li data-answer-id="@answer.Id">
|
||||
@answer.Text
|
||||
<button type="button" class="up-button btn btn-primary btn-sm" onclick="moveUp(this)"><i class="bi bi-arrow-up"></i> Up</button>
|
||||
<button type="button" class="down-button btn btn-info btn-sm" onclick="moveDown(this)"><i class="bi bi-arrow-down"></i> Down</button>
|
||||
<input type="hidden" name="Questions[@i].SelectedAnswerIds" value="@answer.Id">
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
<textarea type="Text" class="form-control" id="question@(i + 1)" name="Questions[@i].SelectedText" value="@answer.Text" rows="3" placeholder="Enter answer"></textarea>
|
||||
<input type="hidden" class="form-control" id="question@(i + 1)" name="Questions[@i].SelectedAnswerIds" value="@answer.Id" rows="3" placeholder="Enter answer"></input>
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
case QuestionType.Likert:
|
||||
case QuestionType.Slider:
|
||||
|
||||
@if (Model.Questions.Any(q => q.Type == QuestionType.Likert))
|
||||
@foreach (var answer in question.Answers)
|
||||
{
|
||||
<input type="range" class="form-range " id="question@(i + 1)" name="Questions[@i].SelectedText" min="0" max="100" step="1">
|
||||
<input type="hidden" class="form-range " id="question@(i + 1)" name="Questions[@i].SelectedAnswerIds" value="@answer.Id" 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)
|
||||
{
|
||||
|
||||
|
||||
<div class="likert">
|
||||
|
||||
|
||||
@foreach (var questions in Model.Questions.Where(q => q.Type == QuestionType.Likert))
|
||||
{
|
||||
<div class="statement">
|
||||
<label>Please indicate your level of agreement with the following statements:</label>
|
||||
<div class="responses">
|
||||
@foreach (var answer in questions.Answers)
|
||||
{
|
||||
<label class="likert-option">
|
||||
<input class="form-check-input" type="radio" name="Questions[@i].SelectedAnswerIds" value="@answer.Id">
|
||||
@answer.Text
|
||||
</label>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
}
|
||||
<div class="rating-item">
|
||||
<div class="rating-label">@answer.Text</div>
|
||||
<input type="radio" id="question@(i)_rating@(answer.Id)"
|
||||
name="Questions[@i].SelectedAnswerIds"
|
||||
value="@answer.Id" class="rating-input" hidden>
|
||||
<label for="question@(i)_rating@(answer.Id)" class="bi bi-star-fill rating-star"></label>
|
||||
</div>
|
||||
}
|
||||
break;
|
||||
case QuestionType.Matrix:
|
||||
</div>
|
||||
|
||||
@if (Model.Questions.Any(q => q.Type == QuestionType.Matrix)) // Check for Matrix type questions
|
||||
{
|
||||
@foreach (var matrixQuestion in Model.Questions.Where(q => q.Type == QuestionType.Matrix)) // Iterate through Matrix questions
|
||||
{
|
||||
<div class="matrix-question">
|
||||
|
||||
<table class="table table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Question</th>
|
||||
@foreach (var option in matrixQuestion.Answers) // Assuming these are the consistent answer options across all sub-questions
|
||||
{
|
||||
<th>@option.Text</th>
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>@matrixQuestion.Text</td>
|
||||
@foreach (var option in matrixQuestion.Answers) // Use consistent options for each sub-question
|
||||
{
|
||||
<td>
|
||||
<input type="radio" name="Questions[@i].SelectedAnswerIds" value="@option.Id">
|
||||
</td>
|
||||
}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
break;
|
||||
case QuestionType.Image:
|
||||
@if (Model.Questions.Any(q => q.Type == QuestionType.Image))
|
||||
{
|
||||
<script>
|
||||
|
||||
function selectImageCard(answerId, questionId) {
|
||||
// Clear previously selected
|
||||
var cards = document.querySelectorAll('.image-question[data-question-id="' + questionId + '"] .card');
|
||||
cards.forEach(function (card) {
|
||||
card.classList.remove('selected');
|
||||
});
|
||||
|
||||
// Set new selected
|
||||
var selectedCard = document.getElementById('card_' + answerId);
|
||||
selectedCard.classList.add('selected');
|
||||
|
||||
// Set the radio button as checked
|
||||
var radioButton = document.getElementById('image_answer_' + answerId);
|
||||
radioButton.checked = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
@foreach (var imageQuestion in Model.Questions.Where(q => q.Type == QuestionType.Image))
|
||||
{
|
||||
<div class="image-question" data-question-id="@imageQuestion.Id">
|
||||
<div class="card-deck">
|
||||
@foreach (var answer in imageQuestion.Answers)
|
||||
{
|
||||
<div class="card image-card" id="card_@answer.Id" onclick="selectImageCard('@answer.Id', '@imageQuestion.Id')">
|
||||
<img src="@answer.Text" alt="Image option" class="img-fluid" />
|
||||
<input type="radio" id="image_answer_@answer.Id" name="Questions[@i].SelectedAnswerIds" value="@answer.Id" hidden />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
break;
|
||||
default:
|
||||
<div class="alert alert-danger" role="alert">
|
||||
Unsupported question type.
|
||||
</div>
|
||||
break;
|
||||
}
|
||||
</div>
|
||||
case QuestionType.Ranking:
|
||||
|
||||
<div class="ranking-question">
|
||||
<p class="ml-3">drag and drop to move the answers</p>
|
||||
<ul class="sortable-list" id="ranking_@question.Id">
|
||||
@{
|
||||
int index = 1; // Initialize the index to start numbering from 1
|
||||
}
|
||||
@foreach (var answer in question.Answers)
|
||||
{
|
||||
<li class="draggable-item" draggable="true" id="@answer.Id" ondragstart="dragStart(event);" ondragover="allowDrop(event);" ondrop="drop(event);">
|
||||
<span class="answer-index">@index. </span> @answer.Text
|
||||
<i class="bi bi-grip-vertical mr-auto"></i>
|
||||
<input type="hidden" name="Questions[@i].SelectedAnswerIds" value="@answer.Id">
|
||||
<button type="button" class="up-button btn btn-primary btn-sm " onclick="moveUp(this.parentElement)">
|
||||
<i class="bi bi-arrow-up"></i> Up
|
||||
</button>
|
||||
<button type="button" class="down-button btn btn-info btn-sm" onclick="moveDown(this.parentElement)">
|
||||
<i class="bi bi-arrow-down"></i> Down
|
||||
</button>
|
||||
|
||||
</li>
|
||||
index++; // Increment the index for the next item
|
||||
}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<script>
|
||||
function allowDrop(ev) {
|
||||
ev.preventDefault(); // Necessary to allow a drop event
|
||||
}
|
||||
|
||||
function dragStart(ev) {
|
||||
ev.dataTransfer.setData("text", ev.target.id); // Stores the id of the draggable item
|
||||
}
|
||||
|
||||
function drop(ev) {
|
||||
ev.preventDefault();
|
||||
var data = ev.dataTransfer.getData("text");
|
||||
var draggedElement = document.getElementById(data);
|
||||
var dropTarget = ev.target.closest('.draggable-item');
|
||||
if (dropTarget) {
|
||||
var targetRect = dropTarget.getBoundingClientRect();
|
||||
var midPoint = targetRect.top + (targetRect.height / 2); // Calculate the midpoint of the drop target
|
||||
|
||||
var list = dropTarget.parentNode;
|
||||
if (ev.clientY < midPoint) {
|
||||
// Drop above the target
|
||||
list.insertBefore(draggedElement, dropTarget);
|
||||
} else {
|
||||
// Drop below the target
|
||||
if (dropTarget.nextSibling) {
|
||||
list.insertBefore(draggedElement, dropTarget.nextSibling);
|
||||
} else {
|
||||
list.appendChild(draggedElement); // In case the target is the last child
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Click to select item
|
||||
document.querySelectorAll('.draggable-item').forEach(item => {
|
||||
item.addEventListener('click', function () {
|
||||
// Remove previous selections
|
||||
removeSelected(this.parentNode);
|
||||
// Mark this as selected
|
||||
this.classList.add('selected');
|
||||
});
|
||||
});
|
||||
|
||||
// Function to remove selected class from siblings
|
||||
function removeSelected(parent) {
|
||||
parent.querySelectorAll('.draggable-item').forEach(sibling => {
|
||||
sibling.classList.remove('selected');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
break;
|
||||
|
||||
case QuestionType.Likert:
|
||||
|
||||
<div class="likert">
|
||||
|
||||
<div class="statement">
|
||||
<label>Please indicate your level of agreement with the following statements:</label>
|
||||
<div class="responses">
|
||||
@foreach (var answer in question.Answers)
|
||||
{
|
||||
<label class="likert-option">
|
||||
<input class="form-check-input" type="radio" id="question@(i)_answer@(answer.Id)" name="Questions[@i].SelectedAnswerIds" value="@answer.Id">
|
||||
@answer.Text
|
||||
</label>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
break;
|
||||
case QuestionType.Matrix:
|
||||
|
||||
<div class="matrix-question">
|
||||
<table class="table table-responsive">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Question</th>
|
||||
@foreach (var option in question.Answers) // Assuming these are the consistent answer options across all sub-questions
|
||||
{
|
||||
<th>@option.Text</th>
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>@question.Text</td>
|
||||
@foreach (var option in question.Answers) // Use consistent options for each sub-question
|
||||
{
|
||||
<td>
|
||||
<input type="radio" name="Questions[@i].SelectedAnswerIds" value="@option.Id">
|
||||
</td>
|
||||
}
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
break;
|
||||
case QuestionType.Image:
|
||||
|
||||
<script>
|
||||
|
||||
function selectImageCard(answerId, questionId) {
|
||||
// Clear previously selected
|
||||
var cards = document.querySelectorAll('.image-question[data-question-id="' + questionId + '"] .card');
|
||||
cards.forEach(function (card) {
|
||||
card.classList.remove('selected');
|
||||
});
|
||||
|
||||
// Set new selected
|
||||
var selectedCard = document.getElementById('card_' + answerId);
|
||||
selectedCard.classList.add('selected');
|
||||
|
||||
// Set the radio button as checked
|
||||
var radioButton = document.getElementById('image_answer_' + answerId);
|
||||
radioButton.checked = true;
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="image-question" data-question-id="@question.Id">
|
||||
<div class="card-deck">
|
||||
@foreach (var answer in question.Answers)
|
||||
{
|
||||
<div class="card image-card" id="card_@answer.Id" onclick="selectImageCard('@answer.Id', '@question.Id')">
|
||||
<img src="@answer.Text" alt="Image option" class="img-fluid" />
|
||||
<input type="radio" id="image_answer_@answer.Id" name="Questions[@i].SelectedAnswerIds" value="@answer.Id" hidden />
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
break;
|
||||
default:
|
||||
<div class="alert alert-danger" role="alert">
|
||||
Unsupported question type.
|
||||
</div>
|
||||
break;
|
||||
}
|
||||
|
||||
<div class="mt-3">
|
||||
@if (i > 0)
|
||||
{
|
||||
|
|
@ -531,8 +654,9 @@
|
|||
|
||||
|
||||
@{
|
||||
<partial name="_ValidationScriptsPartial" />
|
||||
<partial name="_ValidationScriptsPartial" />
|
||||
}
|
||||
|
||||
<script>
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const form = document.getElementById('questionnaireForm');
|
||||
|
|
@ -559,38 +683,38 @@
|
|||
|
||||
|
||||
|
||||
// Ensure we only add listeners once by checking if they've been added already
|
||||
if (!window.hasEventListenersAdded) {
|
||||
const upButtons = document.querySelectorAll('.up-button');
|
||||
const downButtons = document.querySelectorAll('.down-button');
|
||||
// Ensure we only add listeners once by checking if they've been added already
|
||||
if (!window.hasEventListenersAdded) {
|
||||
const upButtons = document.querySelectorAll('.up-button');
|
||||
const downButtons = document.querySelectorAll('.down-button');
|
||||
|
||||
upButtons.forEach(button => {
|
||||
button.addEventListener('click', function () {
|
||||
moveUp(this);
|
||||
});
|
||||
upButtons.forEach(button => {
|
||||
button.addEventListener('click', function () {
|
||||
moveUp(this);
|
||||
});
|
||||
});
|
||||
|
||||
downButtons.forEach(button => {
|
||||
button.addEventListener('click', function () {
|
||||
moveDown(this);
|
||||
});
|
||||
downButtons.forEach(button => {
|
||||
button.addEventListener('click', function () {
|
||||
moveDown(this);
|
||||
});
|
||||
});
|
||||
|
||||
window.hasEventListenersAdded = true; // Set a flag to indicate listeners are added
|
||||
}
|
||||
function moveUp(button) {
|
||||
var li = button.parentNode;
|
||||
if (li.previousElementSibling) {
|
||||
li.parentNode.insertBefore(li, li.previousElementSibling);
|
||||
}
|
||||
window.hasEventListenersAdded = true; // Set a flag to indicate listeners are added
|
||||
}
|
||||
function moveUp(button) {
|
||||
var li = button.parentNode;
|
||||
if (li.previousElementSibling) {
|
||||
li.parentNode.insertBefore(li, li.previousElementSibling);
|
||||
}
|
||||
}
|
||||
|
||||
function moveDown(button) {
|
||||
var li = button.parentNode;
|
||||
if (li.nextElementSibling) {
|
||||
li.parentNode.insertBefore(li.nextElementSibling, li);
|
||||
}
|
||||
function moveDown(button) {
|
||||
var li = button.parentNode;
|
||||
if (li.nextElementSibling) {
|
||||
li.parentNode.insertBefore(li.nextElementSibling, li);
|
||||
}
|
||||
}
|
||||
function updateOrder() {
|
||||
document.querySelectorAll('.rank-list').forEach((list, index) => {
|
||||
list.querySelectorAll('li').forEach((li, idx) => {
|
||||
|
|
@ -675,30 +799,30 @@
|
|||
showStep(currentStep);
|
||||
});
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const stepper = document.querySelector('.stepper');
|
||||
if (!stepper) {
|
||||
console.error('Stepper not found!');
|
||||
return;
|
||||
}
|
||||
// document.addEventListener("DOMContentLoaded", function () {
|
||||
// const stepper = document.querySelector('.stepper');
|
||||
// if (!stepper) {
|
||||
// console.error('Stepper not found!');
|
||||
// return;
|
||||
// }
|
||||
|
||||
let shownTypes = new Set(); // Set to track shown question types
|
||||
const stepIndicators = stepper.querySelectorAll('.step-indicator');
|
||||
// let shownTypes = new Set(); // Set to track shown question types
|
||||
// const stepIndicators = stepper.querySelectorAll('.step-indicator');
|
||||
|
||||
stepIndicators.forEach(indicator => {
|
||||
const type = indicator.querySelector('.step-label').textContent.trim(); // Get the text content of the step-label
|
||||
if (shownTypes.has(type)) {
|
||||
// If this type has already been shown, hide this indicator
|
||||
indicator.style.display = 'none';
|
||||
} else {
|
||||
// Otherwise, mark this type as shown
|
||||
shownTypes.add(type);
|
||||
}
|
||||
});
|
||||
});
|
||||
// stepIndicators.forEach(indicator => {
|
||||
// const type = indicator.querySelector('.step-label').textContent.trim(); // Get the text content of the step-label
|
||||
// if (shownTypes.has(type)) {
|
||||
// // If this type has already been shown, hide this indicator
|
||||
// indicator.style.display = 'none';
|
||||
// } else {
|
||||
// // Otherwise, mark this type as shown
|
||||
// shownTypes.add(type);
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
</script>
|
||||
|
||||
@* <script>
|
||||
@* <script>
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
const form = document.getElementById('questionnaireForm');
|
||||
|
|
@ -845,7 +969,6 @@
|
|||
});
|
||||
}
|
||||
|
||||
// Add submit event listener to the form
|
||||
|
||||
showStep(currentStep);
|
||||
updateStepper();
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue