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>
|
||||
|
||||
|
||||
|
|
@ -199,7 +279,9 @@
|
|||
<!-- Add more hidden fields as needed for other properties of the answer -->
|
||||
}
|
||||
<div class="step @(i == 0 ? "active" : "")">
|
||||
|
||||
<p class="font-weight-normal">@(i + 1). @question.Text</p>
|
||||
|
||||
<div id="QuestionCard">
|
||||
|
||||
@switch (question.Type)
|
||||
|
|
@ -214,8 +296,6 @@
|
|||
break;
|
||||
case QuestionType.CheckBox:
|
||||
case QuestionType.Multiple_choice:
|
||||
case QuestionType.Likert:
|
||||
case QuestionType.Matrix:
|
||||
case QuestionType.Demographic:
|
||||
|
||||
<div class="form-group">
|
||||
|
|
@ -263,9 +343,7 @@
|
|||
}
|
||||
|
||||
break;
|
||||
case QuestionType.Image:
|
||||
<input type="file" class="form-control-file" id="question@(i + 1)" name="Questions[@i].SelectedAnswerIds">
|
||||
break;
|
||||
|
||||
case QuestionType.Slider:
|
||||
|
||||
@foreach(var answer in question.Answers)
|
||||
|
|
@ -313,13 +391,110 @@
|
|||
}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
break;
|
||||
|
||||
case QuestionType.Likert:
|
||||
|
||||
@if (Model.Questions.Any(q => q.Type == QuestionType.Likert))
|
||||
{
|
||||
|
||||
|
||||
<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;
|
||||
default:
|
||||
<div class="alert alert-danger" role="alert">
|
||||
|
|
@ -384,7 +559,6 @@
|
|||
|
||||
|
||||
|
||||
|
||||
// Ensure we only add listeners once by checking if they've been added already
|
||||
if (!window.hasEventListenersAdded) {
|
||||
const upButtons = document.querySelectorAll('.up-button');
|
||||
|
|
@ -500,6 +674,28 @@
|
|||
// Initialize the form at the first step
|
||||
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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue