Image and Likret forntend question type completed
This commit is contained in:
Qais Yousuf
parent
a29d11fbcd
commit
1a43f8b456
1 changed files with 208 additions and 12 deletions
|
|
@ -151,6 +151,86 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.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);
|
||||||
|
border-radius: 5px;
|
||||||
|
background-color: transparent;
|
||||||
|
padding: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.likert .statement {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.likert .responses {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.likert .likert-option {
|
||||||
|
flex: 1;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.likert label {
|
||||||
|
display: block;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #182c4b;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin: 3px;
|
||||||
|
transition: background-color 0.3s;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.likert input[type="radio"]:checked + label {
|
||||||
|
background-color: transparent;
|
||||||
|
color: white;
|
||||||
|
font-size:1rem;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-deck .card {
|
||||||
|
cursor: pointer;
|
||||||
|
padding:0px;
|
||||||
|
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;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-deck .card:hover {
|
||||||
|
border: 2px solid #007bff;
|
||||||
|
transition: border 0.3s ease; /* Ensure the transition applies to the hover state as well */
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-deck .image-card.selected {
|
||||||
|
border: 4px solid #28a745; /* Green border for selected cards */
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-deck .image-option {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.card-deck .image-option input[type="radio"] {
|
||||||
|
display: none; /* Hide radio button */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -199,7 +279,9 @@
|
||||||
<!-- Add more hidden fields as needed for other properties of the answer -->
|
<!-- Add more hidden fields as needed for other properties of the answer -->
|
||||||
}
|
}
|
||||||
<div class="step @(i == 0 ? "active" : "")">
|
<div class="step @(i == 0 ? "active" : "")">
|
||||||
<p class="font-weight-normal">@(i + 1). @question.Text</p>
|
|
||||||
|
<p class="font-weight-normal">@(i + 1). @question.Text</p>
|
||||||
|
|
||||||
<div id="QuestionCard">
|
<div id="QuestionCard">
|
||||||
|
|
||||||
@switch (question.Type)
|
@switch (question.Type)
|
||||||
|
|
@ -214,8 +296,6 @@
|
||||||
break;
|
break;
|
||||||
case QuestionType.CheckBox:
|
case QuestionType.CheckBox:
|
||||||
case QuestionType.Multiple_choice:
|
case QuestionType.Multiple_choice:
|
||||||
case QuestionType.Likert:
|
|
||||||
case QuestionType.Matrix:
|
|
||||||
case QuestionType.Demographic:
|
case QuestionType.Demographic:
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
|
|
@ -263,9 +343,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
break;
|
break;
|
||||||
case QuestionType.Image:
|
|
||||||
<input type="file" class="form-control-file" id="question@(i + 1)" name="Questions[@i].SelectedAnswerIds">
|
|
||||||
break;
|
|
||||||
case QuestionType.Slider:
|
case QuestionType.Slider:
|
||||||
|
|
||||||
@foreach(var answer in question.Answers)
|
@foreach(var answer in question.Answers)
|
||||||
|
|
@ -313,19 +391,116 @@
|
||||||
}
|
}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<script>
|
|
||||||
|
break;
|
||||||
|
|
||||||
|
case QuestionType.Likert:
|
||||||
|
|
||||||
|
@if (Model.Questions.Any(q => q.Type == QuestionType.Likert))
|
||||||
|
{
|
||||||
|
|
||||||
|
|
||||||
</script>
|
<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>
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case QuestionType.Matrix:
|
||||||
|
|
||||||
|
@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;
|
break;
|
||||||
default:
|
default:
|
||||||
<div class="alert alert-danger" role="alert">
|
<div class="alert alert-danger" role="alert">
|
||||||
Unsupported question type.
|
Unsupported question type.
|
||||||
</div>
|
</div>
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<div class="mt-3">
|
<div class="mt-3">
|
||||||
|
|
@ -384,7 +559,6 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// Ensure we only add listeners once by checking if they've been added already
|
// Ensure we only add listeners once by checking if they've been added already
|
||||||
if (!window.hasEventListenersAdded) {
|
if (!window.hasEventListenersAdded) {
|
||||||
const upButtons = document.querySelectorAll('.up-button');
|
const upButtons = document.querySelectorAll('.up-button');
|
||||||
|
|
@ -500,6 +674,28 @@
|
||||||
// Initialize the form at the first step
|
// Initialize the form at the first step
|
||||||
showStep(currentStep);
|
showStep(currentStep);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
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');
|
||||||
|
|
||||||
|
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>
|
@* <script>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue