Edit question and Save question functionality added to the edit questionnaire
This commit is contained in:
Qais Yousuf
parent
729ffc869b
commit
a50d5eb241
1 changed files with 202 additions and 31 deletions
|
|
@ -3,6 +3,7 @@
|
||||||
@{
|
@{
|
||||||
ViewData["Title"] = "Edit";
|
ViewData["Title"] = "Edit";
|
||||||
}
|
}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.question-separator {
|
.question-separator {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -22,7 +23,6 @@
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<div class="container mt-4">
|
<div class="container mt-4">
|
||||||
<div class="card justify-content-center p-4 shadow rounded">
|
<div class="card justify-content-center p-4 shadow rounded">
|
||||||
|
|
@ -44,14 +44,30 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="card shadow rounded p-4">
|
<div class="card shadow rounded p-4">
|
||||||
<div id="questionsContainer">
|
<div id="questionsContainer">
|
||||||
|
|
||||||
|
|
||||||
@for (int i = 0; i < Model.Questions.Count; i++)
|
@for (int i = 0; i < Model.Questions.Count; i++)
|
||||||
{
|
{
|
||||||
<hr />
|
|
||||||
<div class="question">
|
<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">
|
||||||
|
<p class="next-question">Next Question</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" />
|
<input type="hidden" asp-for="Questions[i].Id" />
|
||||||
<div class="question-title">
|
<div class="question-title">
|
||||||
@Model.Questions[i].Text
|
@Model.Questions[i].Text
|
||||||
<button type="button" class="btn btn-primary editQuestion">Edit</button>
|
<button type="button" class="btn btn-primary m-4 btn-sm editQuestion"><i class="bi bi-pencil-square"></i> Edit question</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="question-details" style="display: none;">
|
<div class="question-details" style="display: none;">
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
|
|
@ -78,16 +94,18 @@
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn btn-primary addAnswer">Add Answer</button>
|
<button type="button" class="btn btn-primary btn-sm addAnswer">Add new Answer</button>
|
||||||
</div>
|
</div>
|
||||||
<button type="button" class="btn btn-success saveQuestion" style="display: none;">Save</button>
|
<button type="button" class="btn btn-success btn-sm m-5 saveQuestion" style="display: none;"><i class="bi bi-floppy"></i> Save question</button>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="m-4">
|
||||||
<button type="submit" class="btn btn-primary">Update</button>
|
<button type="submit" class="btn btn-primary">Update questionnaire</button>
|
||||||
| <a asp-action="Index" class="btn btn-info">Back to list</a>
|
| <a asp-action="Index" class="btn btn-info">Back to list</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -97,6 +115,80 @@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@* <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 p-4 m-4">
|
||||||
|
<div id="questionsContainer" class="m-4">
|
||||||
|
@for (int i = 0; i < Model.Questions.Count; i++)
|
||||||
|
{
|
||||||
|
<div class="question">
|
||||||
|
<input type="hidden" asp-for="Questions[i].Id" />
|
||||||
|
<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 m-4">
|
||||||
|
@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 mt-1 removeAnswer"><i class="bi bi-trash3"></i></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<button type="button" class="btn btn-primary btn-sm addAnswer"><i class="bi bi-floppy"></i> Add new Answer</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<button type="submit" class="btn btn-primary">Update</button>
|
||||||
|
| <a asp-action="Index" class="btn btn-info">Back to list</a>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> *@
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -110,7 +202,8 @@
|
||||||
<partial name="_ValidationScriptsPartial" />
|
<partial name="_ValidationScriptsPartial" />
|
||||||
}
|
}
|
||||||
|
|
||||||
<script>
|
|
||||||
|
<script>
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
// Function to add a new answer
|
// Function to add a new answer
|
||||||
$(document).on('click', '.addAnswer', function () {
|
$(document).on('click', '.addAnswer', function () {
|
||||||
|
|
@ -121,11 +214,11 @@
|
||||||
var newAnswerIndex = questionContainer.find('.answers .form-group').length;
|
var newAnswerIndex = questionContainer.find('.answers .form-group').length;
|
||||||
|
|
||||||
var answerHtml = `
|
var answerHtml = `
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="control-label">Answer</label>
|
<label class="control-label">Answer</label>
|
||||||
<input type="text" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" />
|
<input type="text" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" />
|
||||||
<button type="button" class="btn btn-danger removeAnswer">Remove Answer</button>
|
<button type="button" class="btn btn-danger removeAnswer">Remove Answer</button>
|
||||||
</div>`;
|
</div>`;
|
||||||
|
|
||||||
// Append the new answer to the specific question
|
// Append the new answer to the specific question
|
||||||
questionContainer.find('.answers').append(answerHtml);
|
questionContainer.find('.answers').append(answerHtml);
|
||||||
|
|
@ -143,52 +236,130 @@
|
||||||
questionContainer.find('.question-details').show();
|
questionContainer.find('.question-details').show();
|
||||||
questionContainer.find('.editQuestion').hide();
|
questionContainer.find('.editQuestion').hide();
|
||||||
questionContainer.find('.saveQuestion').show();
|
questionContainer.find('.saveQuestion').show();
|
||||||
|
|
||||||
|
// Add a line below the editQuestion button
|
||||||
|
// var lineHtml = '<hr class="border border-primary border-4 opacity-75 mt-3 mb-3">';
|
||||||
|
// questionContainer.find('.editQuestion').before(lineHtml);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Function to save question details
|
// Function to save question details
|
||||||
$(document).on('click', '.saveQuestion', function () {
|
$(document).on('click', '.saveQuestion', function () {
|
||||||
var questionContainer = $(this).closest('.question');
|
var questionContainer = $(this).closest('.question');
|
||||||
questionContainer.find('.question-title').show();
|
var titleTextElement = questionContainer.find('.question-title');
|
||||||
|
|
||||||
|
// 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();
|
questionContainer.find('.question-details').hide();
|
||||||
|
|
||||||
|
// Show the edit button and hide the save button
|
||||||
questionContainer.find('.editQuestion').show();
|
questionContainer.find('.editQuestion').show();
|
||||||
questionContainer.find('.saveQuestion').hide();
|
questionContainer.find('.saveQuestion').hide();
|
||||||
});
|
});
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// $(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" />
|
||||||
|
// <button type="button" class="btn btn-danger removeAnswer">Remove Answer</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();
|
||||||
|
// });
|
||||||
|
|
||||||
|
// // Function to save question details
|
||||||
|
// $(document).on('click', '.saveQuestion', function () {
|
||||||
|
// var questionContainer = $(this).closest('.question');
|
||||||
|
// var titleTextElement = questionContainer.find('.question-title');
|
||||||
|
|
||||||
|
// // 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();
|
||||||
|
// });
|
||||||
|
|
||||||
|
// });
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@* <script>
|
||||||
|
|
||||||
@* this script is working for adding mutiple answers for a question *@
|
|
||||||
|
|
||||||
|
|
||||||
@* <script>
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
// Function to add a new answer
|
// Function to add a new answer
|
||||||
$(document).on('click', '.addAnswer', function () {
|
$(document).on('click', '.addAnswer', function () {
|
||||||
var questionContainer = $(this).closest('.question');
|
var questionContainer = $(this).closest('.question');
|
||||||
var newQuestionIndex = questionContainer.index();
|
var newQuestionIndex = questionContainer.index();
|
||||||
var newAnswerIndex = questionContainer.find('.answers .form-group').length; // Correct way to find the length
|
|
||||||
|
// Correctly find the length of answers for the specific question
|
||||||
|
var newAnswerIndex = questionContainer.find('.answers .form-group').length;
|
||||||
|
|
||||||
var answerHtml = `
|
var answerHtml = `
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label class="control-label">Answer Text</label>
|
<label class="control-label">Answer</label>
|
||||||
<input type="text" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" />
|
<input type="text" name="Questions[${newQuestionIndex}].Answers[${newAnswerIndex}].Text" class="form-control" />
|
||||||
</div>`;
|
<button type="button" class="btn btn-danger mt-1 removeAnswer"><i class="bi bi-trash3"></i></button>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
$(this).siblings('.answers').append(answerHtml);
|
// Append the new answer to the specific question
|
||||||
|
questionContainer.find('.answers').append(answerHtml);
|
||||||
});
|
});
|
||||||
|
|
||||||
// Function to remove an answer
|
// Function to remove an answer (including dynamically added answers)
|
||||||
$(document).on('click', '.removeAnswer', function () {
|
$(document).on('click', '.removeAnswer', function () {
|
||||||
$(this).closest('.form-group').remove();
|
$(this).closest('.form-group').remove();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
</script>
|
</script> *@
|
||||||
|
|
||||||
} *@
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue