ranking question type completed
This commit is contained in:
Qais Yousuf
parent
89182ca469
commit
a29d11fbcd
1 changed files with 148 additions and 27 deletions
|
|
@ -98,32 +98,59 @@
|
||||||
margin: 15px 0px 0px 0px;
|
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hidden-textarea {
|
.hidden-textarea {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rating .rating-item {
|
||||||
|
display: inline-block; /* Align items horizontally */
|
||||||
|
text-align: center; /* Center-align the label and star */
|
||||||
|
margin: 5px; /* Spacing between rating items */
|
||||||
|
}
|
||||||
|
|
||||||
|
.rating .rating-label {
|
||||||
|
display: block; /* Ensure the label is on a new line */
|
||||||
|
margin-bottom: 2px; /* Space between label and star */
|
||||||
|
font-size: 14px; /* Smaller font size for the label */
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the stars */
|
||||||
|
.rating .rating-star {
|
||||||
|
font-size: 24px; /* Adjust size as needed */
|
||||||
|
color: #ccc; /* Default color of stars */
|
||||||
|
cursor: pointer; /* Change cursor to pointer on hover */
|
||||||
|
transition: color 0.3s ease; /* Smooth transition for color change */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the stars when they are hovered over */
|
||||||
|
.rating .rating-star:hover,
|
||||||
|
.rating .rating-star:hover ~ .rating-star {
|
||||||
|
color: #ffe350; /* Color when hovered */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style the stars when they are selected */
|
||||||
|
.rating .rating-star.selected {
|
||||||
|
color: #df9d01; /* Color of selected stars */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.rank-list {
|
||||||
|
list-style-type: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-list li {
|
||||||
|
padding: 5px;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
color:white
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -190,7 +217,7 @@
|
||||||
case QuestionType.Likert:
|
case QuestionType.Likert:
|
||||||
case QuestionType.Matrix:
|
case QuestionType.Matrix:
|
||||||
case QuestionType.Demographic:
|
case QuestionType.Demographic:
|
||||||
case QuestionType.Ranking:
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
|
|
||||||
@foreach (var answer in question.Answers)
|
@foreach (var answer in question.Answers)
|
||||||
|
|
@ -257,11 +284,42 @@
|
||||||
break;
|
break;
|
||||||
case QuestionType.Rating:
|
case QuestionType.Rating:
|
||||||
<div class="rating" data-question="@i" >
|
<div class="rating" data-question="@i" >
|
||||||
|
|
||||||
@foreach (var answer in question.Answers)
|
@foreach (var answer in question.Answers)
|
||||||
{
|
{
|
||||||
<i class="bi bi-star ml-3"></i>
|
<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>
|
</div>
|
||||||
|
|
||||||
|
break;
|
||||||
|
case QuestionType.Ranking:
|
||||||
|
<div class="ranking" data-question="@i">
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
<div class="alert alert-danger" role="alert">
|
<div class="alert alert-danger" role="alert">
|
||||||
|
|
@ -307,6 +365,69 @@
|
||||||
console.error('Form not found!');
|
console.error('Form not found!');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
$(document).ready(function () {
|
||||||
|
$('.rating-item').on('click', function () {
|
||||||
|
// Remove 'selected' class from all stars within the same rating
|
||||||
|
$(this).siblings().find('.rating-star').removeClass('selected');
|
||||||
|
|
||||||
|
// Add 'selected' class to the clicked star and all stars before it within the same rating
|
||||||
|
$(this).find('.rating-star').addClass('selected');
|
||||||
|
$(this).prevAll().find('.rating-star').addClass('selected');
|
||||||
|
|
||||||
|
// Toggle 'fill' class on the clicked star
|
||||||
|
$(this).find('.rating-star').toggleClass('bi-star-fill bi-star');
|
||||||
|
|
||||||
|
// Check the corresponding radio input
|
||||||
|
$(this).find('.rating-input').prop('checked', true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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) => {
|
||||||
|
// Assuming each li has a hidden input as the last child
|
||||||
|
li.querySelector('input[type="hidden"]').value = li.getAttribute('data-answer-id');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const steps = form.querySelectorAll('.step');
|
const steps = form.querySelectorAll('.step');
|
||||||
const stepIndicators = document.querySelectorAll('.step-indicator');
|
const stepIndicators = document.querySelectorAll('.step-indicator');
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue