344 lines
19 KiB
Text
344 lines
19 KiB
Text
@model EditQuestionnaireViewModel
|
|
|
|
@{
|
|
ViewData["Title"] = "Edit";
|
|
}
|
|
|
|
|
|
|
|
<div class="container mt-4">
|
|
<div class="card justify-content-center p-4 shadow rounded">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Edit Survey</h5>
|
|
|
|
<div class="row">
|
|
<form asp-action="Edit">
|
|
<input type="hidden" asp-for="Id" />
|
|
<div class="form-group">
|
|
<label asp-for="Title" class="control-label"></label>
|
|
<input asp-for="Title" class="form-control" />
|
|
<span asp-validation-for="Title" class="text-danger"></span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label asp-for="Description" class="control-label"></label>
|
|
<textarea asp-for="Description" class="form-control"></textarea>
|
|
<span asp-validation-for="Description" class="text-danger"></span>
|
|
</div>
|
|
|
|
<div class="card shadow rounded" id="customCard">
|
|
<div class="text-center">
|
|
<h4 class="text-primary font-weight-bold">Edit existing questions or add new question</h4>
|
|
</div>
|
|
|
|
|
|
<div id="questionsContainer">
|
|
@for (int i = 0; i < Model.Questions.Count; i++)
|
|
{
|
|
<div class="question">
|
|
<div class="question-separator">
|
|
<!-- Container for the first half of the line -->
|
|
<div class="line-container">
|
|
<hr class="border border-primary border-4 opacity-75 line-start">
|
|
</div>
|
|
<!-- Container for the next question text -->
|
|
<div class="next-question-container mt-2">
|
|
<p><span class="badge badge-primary">NEXT QUESTION</span></p>
|
|
</div>
|
|
<!-- Container for the second half of the line -->
|
|
<div class="line-container">
|
|
<hr class="border border-primary border-4 opacity-75 line-end">
|
|
</div>
|
|
</div>
|
|
<input type="hidden" asp-for="Questions[i].Id" />
|
|
@* <div class="question-title">
|
|
@Model.Questions[i].Text
|
|
<button type="button" class="btn btn-primary m-4 btn-sm shadow editQuestion"><i class="bi bi-pencil-square"></i> Edit question</button>|
|
|
</div> *@
|
|
<div class="question-title mt-2">
|
|
<span class="item-question">@Html.Raw(Model.Questions[i].Text.Length >= 30 ? Model.Questions[i].Text.Substring(0, 30) : Model.Questions[i].Text)</span>
|
|
<span class="more-question" style="display:none;">@Html.Raw(Model.Questions[i].Text.Length >= 30 ? Model.Questions[i].Text.Substring(30) : "")</span>
|
|
<button type="button" class="btn btn-primary btn-sm shadow read-more-btn"> Read More</button> | <button type="button" class="btn btn-primary btn-sm shadow editQuestion"><i class="bi bi-pencil-square"></i> Edit </button> | <button type="button" class="btn btn-danger btn-sm shadow removeQuestion"><i class="bi bi-trash"></i> Remove </button>
|
|
|
|
</div>
|
|
<div class="question-details" style="display: none;">
|
|
<div class="form-group">
|
|
<label asp-for="Questions[i].Text" class="control-label"></label>
|
|
<input asp-for="Questions[i].Text" class="form-control" />
|
|
<span asp-validation-for="Questions[i].Text" class="text-danger"></span>
|
|
</div>
|
|
<div class="form-group">
|
|
<label asp-for="Questions[i].Type" class="control-label"></label>
|
|
<select asp-for="Questions[i].Type" asp-items="@ViewBag.QuestionTypes" class="form-control"></select>
|
|
<span asp-validation-for="Questions[i].Type" class="text-danger"></span>
|
|
</div>
|
|
<div class="answers">
|
|
@for (int j = 0; j < Model.Questions[i].Answers.Count; j++)
|
|
{
|
|
<div class="answer">
|
|
<input type="hidden" asp-for="Questions[i].Answers[j].Id" />
|
|
<div class="form-group">
|
|
<label asp-for="Questions[i].Answers[j].Text" class="control-label"></label>
|
|
<input asp-for="Questions[i].Answers[j].Text" class="form-control" />
|
|
<span asp-validation-for="Questions[i].Answers[j].Text" class="text-danger"></span>
|
|
<button type="button" class="btn btn-danger btn-sm mt-1 removeAnswer"><i class="bi bi-trash3"></i></button>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
<button type="button" class="btn btn-success ml-4 btn-sm mb-1 shadow addAnswer" id="AddnewAnswerForEdit"><i class="bi bi-plus-square"></i> Add new Answer</button>
|
|
</div>
|
|
<button type="button" class="btn btn-primary btn-sm shadow saveQuestion" id="SaveQuestionForEdit" style="display: none;"><i class="bi bi-floppy"></i> Save question</button>
|
|
<!-- Remove Question Button -->
|
|
<div class="d-block">
|
|
|
|
<button type="button" class="btn btn-danger btn-sm mt-3 shadow removeQuestion1" id="RemoveQuestion1ForEdit" style="display:none;"><i class="bi bi-trash"></i> Remove question</button>
|
|
<button type="button" class="btn btn-danger btn-sm mt-2 shadow removeQuestion3" style="display:none;"><i class="bi bi-trash"></i> Remove question</button>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
}
|
|
</div>
|
|
|
|
</div>
|
|
<button type="button" class="btn btn-success btn-sm ml-4 mt-3 shadow" id="addNewQuestion"><i class="bi bi-plus"></i> Add New Question</button>
|
|
<div class="m-4">
|
|
<button type="submit" class="btn btn-primary btn-sm shadow">Update questionnaire</button>
|
|
| <a asp-action="Index" class="btn btn-info btn-sm shadow">Back to list</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="confirmDeleteModalLabel">Confirm Deletion</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
Are you sure you want to delete this question?
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
|
<button type="button" class="btn btn-danger confirm-delete">Delete</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@section Scripts {
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.11.4/ckeditor.js"></script>
|
|
<script>
|
|
CKEDITOR.replace("Description");
|
|
</script>
|
|
@{
|
|
<partial name="_ValidationScriptsPartial" />
|
|
}
|
|
|
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
|
|
<script>
|
|
$(document).ready(function () {
|
|
// Function to add a new answer
|
|
$(document).on('click', '.addAnswer', function () {
|
|
var questionContainer = $(this).closest('.question');
|
|
var newQuestionIndex = questionContainer.index();
|
|
|
|
// Correctly find the length of answers for the specific question
|
|
var newAnswerIndex = questionContainer.find('.answers .form-group').length;
|
|
|
|
var answerHtml = `
|
|
<div class="form-group">
|
|
<label class="control-label">Answer</label>
|
|
<input type="text" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" placeholder="Enter answer" />
|
|
<button type="button" class="btn btn-danger btn-sm mt-1 removeAnswer"><i class="bi bi-trash3"></i></button>
|
|
</div>`;
|
|
|
|
// Append the new answer to the specific question
|
|
questionContainer.find('.answers').append(answerHtml);
|
|
});
|
|
|
|
// Function to remove an answer (including dynamically added answers)
|
|
$(document).on('click', '.removeAnswer', function () {
|
|
$(this).closest('.form-group').remove();
|
|
});
|
|
|
|
// Function to toggle question edit mode
|
|
$(document).on('click', '.editQuestion', function () {
|
|
var questionContainer = $(this).closest('.question');
|
|
questionContainer.find('.question-title').hide();
|
|
questionContainer.find('.question-details').show();
|
|
questionContainer.find('.editQuestion').hide();
|
|
questionContainer.find('.saveQuestion').show();
|
|
questionContainer.find('.removeQuestion').show();
|
|
questionContainer.find('.removeQuestion1').show();
|
|
});
|
|
|
|
// Function to save question details
|
|
$(document).on('click', '.saveQuestion', function () {
|
|
var questionContainer = $(this).closest('.question');
|
|
var titleTextElement = questionContainer.find('.question-title');
|
|
|
|
var questionText = questionContainer.find('.question-details input[name^="Questions"]').val();
|
|
|
|
// Apply styles for success (green text color)
|
|
// titleTextElement.css('color', '#28a745'); // Set the success text color
|
|
|
|
// // Add checkmark icon before the text
|
|
// titleTextElement.prepend('<span class="check-icon">✔ </span>');
|
|
|
|
// Show the original question title
|
|
titleTextElement.show();
|
|
|
|
// Hide the question details
|
|
questionContainer.find('.question-details').hide();
|
|
|
|
// Show the edit button and hide the save button
|
|
questionContainer.find('.editQuestion').show();
|
|
questionContainer.find('.saveQuestion').hide();
|
|
questionContainer.find('.removeQuestion1').hide();
|
|
// questionContainer.find('.removeQuestion3').show();
|
|
var successMessage = $('<div class="alert alert-success" role="alert">Question updated successfully!</div>');
|
|
$(this).closest('.question').find('.question-title').prepend(successMessage);
|
|
successMessage.fadeIn();
|
|
|
|
|
|
});
|
|
|
|
// Function to remove a question
|
|
$(document).on('click', '.removeQuestion, .removeQuestion1, .removeQuestion3', function () {
|
|
// Store a reference to the question being removed
|
|
var questionToRemove = $(this).closest('.question');
|
|
|
|
// Show the confirmation modal
|
|
$('#confirmDeleteModal').modal('show');
|
|
|
|
// Handle deletion confirmation
|
|
$('.confirm-delete').click(function () {
|
|
// Remove the question
|
|
questionToRemove.remove();
|
|
|
|
// Hide the modal after deletion
|
|
$('#confirmDeleteModal').modal('hide');
|
|
});
|
|
});
|
|
// $(document).on('click', '.removeQuestion1', function () {
|
|
// $(this).closest('.question').remove();
|
|
// });
|
|
// $(document).on('click', '.removeQuestion3', function () {
|
|
// $(this).closest('.question').remove();
|
|
// });
|
|
|
|
// Function to add a new question
|
|
// Function to add a new question
|
|
// Function to add a new question
|
|
|
|
|
|
$('.read-more-btn').click(function () {
|
|
var $questionTitle = $(this).closest('.question-title');
|
|
var $moreQuestion = $questionTitle.find('.more-question');
|
|
var $readMoreBtn = $(this);
|
|
|
|
if ($moreQuestion.is(':visible')) {
|
|
$moreQuestion.hide(); // Hide the "Read More" text
|
|
$readMoreBtn.text('Read More'); // Change button text to "Read More"
|
|
} else {
|
|
$moreQuestion.show(); // Show the "Read More" text
|
|
$readMoreBtn.text('Read Less'); // Change button text to "Read Less"
|
|
}
|
|
});
|
|
// Function to add a new question
|
|
$('#addNewQuestion').click(function () {
|
|
var newQuestionIndex = $('.question').length;
|
|
|
|
var questionHtml = `
|
|
<div class="question">
|
|
<!-- Question separator -->
|
|
<div class="question-separator">
|
|
<div class="line-container">
|
|
<hr class="border border-primary border-4 opacity-75 line-start">
|
|
</div>
|
|
<div class="next-question-container mt-2">
|
|
<p><span class="badge badge-primary">NEXT QUESTION</span></p>
|
|
</div>
|
|
<div class="line-container">
|
|
<hr class="border border-primary border-4 opacity-75 line-end">
|
|
</div>
|
|
</div>
|
|
<!-- Question title with success message -->
|
|
<div class="question-title" style="display:none;">
|
|
|
|
<button type="button" class="btn btn-primary btn-sm ml-5 mt-2 editQuestion"><i class="bi bi-floppy"></i> Edit question</button>|
|
|
<button type="button" class="btn btn-danger btn-sm mt-2 shadow removeQuestion3"><i class="bi bi-trash"></i> Remove question</button>
|
|
</div>
|
|
<!-- Question details -->
|
|
<div class="question-details">
|
|
<div class="form-group">
|
|
<label class="control-label">Question</label>
|
|
<input type="text" class="form-control" name="Questions[${newQuestionIndex}].Text" placeholder="Enter question text"/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="control-label">Question Type</label>
|
|
<select class="form-control" name="Questions[${newQuestionIndex}].Type">
|
|
<option value="0">Text</option>
|
|
<option value="1">CheckBox</option>
|
|
<option value="2">TrueFalse</option>
|
|
<option value="3">Multiple_choice</option>
|
|
<option value="4">Rating</option>
|
|
<option value="5">Likert</option>
|
|
<option value="6">Matrix</option>
|
|
<option value="7">Open_ended</option>
|
|
<option value="8">Demographic</option>
|
|
<option value="9">Ranking</option>
|
|
<option value="10">Image</option>
|
|
<option value="11">Slider</option>
|
|
</select>
|
|
</div>
|
|
<div class="answers">
|
|
<div class="form-group">
|
|
<label class="control-label">Answer</label>
|
|
<input type="text" class="form-control" name="Questions[${newQuestionIndex}].Answers[0].Text" placeholder="Enter answer"/>
|
|
<button type="button" class="btn btn-danger btn-sm mt-1 removeAnswer"><i class="bi bi-trash3"></i></button>
|
|
</div>
|
|
</div>
|
|
<button type="button" class="btn btn-success btn-sm ml-5 shadow addAnswer" id="AddnewAsnwerForCreatr"><i class="bi bi-plus-square"></i> Add new Answer</button>
|
|
</div>
|
|
<!-- Save and remove buttons -->
|
|
|
|
<button type="button" class="btn btn-primary btn-sm ml-5 mt-2 shadow saveQuestion"><i class="bi bi-floppy"></i> Save question</button>
|
|
<div class="d-block">
|
|
<button type="button" class="btn btn-danger ml-5 btn-sm mt-3 shadow removeQuestion1"><i class="bi bi-trash"></i> Remove question</button>
|
|
</div>
|
|
|
|
</div>`;
|
|
|
|
// Append the new question HTML to the container
|
|
$('#questionsContainer').append(questionHtml);
|
|
|
|
// Show success message
|
|
// var successMessage = $('<div class="alert alert-success" role="alert">Question created successfully!</div>');
|
|
// $('.question-title').prepend(successMessage);
|
|
// successMessage.fadeIn().delay(2000).fadeOut();
|
|
});
|
|
|
|
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|