294 lines
15 KiB
Text
294 lines
15 KiB
Text
@model QuestionnaireViewModel
|
|
|
|
@{
|
|
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">Create Survey</h5>
|
|
|
|
<div class="row ">
|
|
<!-- 12 columns for textboxes -->
|
|
|
|
<form asp-action="Edit" asp-controller="Questionnaire">
|
|
<div asp-validation-summary="All" class="text-danger"></div>
|
|
|
|
<div class="mb-3 col-12">
|
|
<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="mb-3 col-12">
|
|
<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="container p-5 px-4 gy-5 shadow bg-body-tertiary rounded">
|
|
|
|
<div id="questions-container">
|
|
|
|
<h3>Create Questions</h3>
|
|
<div class="form-group px-4 gy-5 ">
|
|
@for (int i = 0; i < Model.Questions?.Count; i++)
|
|
{
|
|
<div class="question-group" data-question-index="@i">
|
|
<label>Question @(i + 1)</label>
|
|
<textarea name="Questions[@i].Text" class="form-control">@Model.Questions[i].Text</textarea>
|
|
<select name="Questions[@i].Type" asp-items="ViewBag.QuestionTypes" class="form-control question-type">
|
|
|
|
<!-- Include options for question types... -->
|
|
<div class="container-sm"></div>
|
|
</select>
|
|
|
|
<div class="answers-container">
|
|
<label>Answers:</label>
|
|
@for (int j = 0; j < Model.Questions?[i].Answers?.Count; j++)
|
|
{
|
|
<div class="answer-group">
|
|
<input type="text" name="Questions[@i].Answers[@j].Text" class="form-control" value="@Model.Questions?[i]?.Answers?[j]?.Text" />
|
|
<button type="button" class="btn btn-sm btn-danger remove-answer">Remove Answer</button>
|
|
</div>
|
|
}
|
|
<button type="button" class="btn btn-sm btn-success add-answer">Add Answer</button>
|
|
<!-- Add a hidden field to address the required field validation -->
|
|
<input type="hidden" name="Questions[@i].Answers" />
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-danger remove-question">Remove Question</button>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
|
|
<button type="button" id="add-question-btn" class="btn btn-md btn-primary mb-3">Add New Question</button>
|
|
|
|
<div class="mt-3">
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
| <a asp-action="Index" class="btn btn-info">Back to list</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<hr />
|
|
|
|
@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://code.jquery.com/jquery-3.6.4.min.js"></script>
|
|
|
|
@* <script>
|
|
$(document).ready(function () {
|
|
var questionIndex = @Model.Questions?.Count;
|
|
|
|
$("#add-question-btn").click(function () {
|
|
var newQuestionHtml = `
|
|
<div class="question-group" data-question-index="${questionIndex}">
|
|
<label>Question ${questionIndex + 1}</label>
|
|
<textarea name="Questions[${questionIndex}].Text" class="form-control"></textarea>
|
|
<br>
|
|
<label class=h5>Select question type</label>
|
|
<select name="Questions[${questionIndex}].Type" class="form-control question-type">`;
|
|
|
|
var questionTypes = @Html.Raw(Json.Serialize(Enum.GetNames(typeof(QuestionType))));
|
|
|
|
for (var i = 0; i < questionTypes.length; i++) {
|
|
newQuestionHtml += `<option value="${questionTypes[i]}">${questionTypes[i]}</option>`;
|
|
}
|
|
|
|
newQuestionHtml += `</select>`;
|
|
|
|
// Add answers input fields
|
|
|
|
newQuestionHtml += `<div class="container-ms ml-5 mr-5 p-4 px-4 gy-5 ">`;
|
|
newQuestionHtml += `<div class="answers-container" data-question-index="${questionIndex}"><br>`;
|
|
newQuestionHtml += `<label class="h3">Create Answers:</label>`;
|
|
newQuestionHtml += `<div class="answer-group" data-answer-index="0"><hr class="border border-primary border-3 opacity-75">`;
|
|
newQuestionHtml += `<label>Answer 1</label>`;
|
|
newQuestionHtml += `<input type="text" name="Questions[${questionIndex}].Answers[0].Text" class="form-control" placeholder="new answer"/>`;
|
|
newQuestionHtml += `<button type="button" class="btn btn-sm btn-success add-answer mt-2">Add Answer</button>`;
|
|
newQuestionHtml += `<button type="button" class="btn btn-sm btn-danger remove-answer mt-2" style="display:none">Remove Answer</button><br><hr>`;
|
|
newQuestionHtml += `</div> `;
|
|
newQuestionHtml += `</div>`;
|
|
newQuestionHtml += `</div> `;
|
|
|
|
// Add Remove Question button
|
|
newQuestionHtml += `<button type="button" class="btn btn-md btn-danger remove-question">Remove Question</button>`;
|
|
newQuestionHtml += `<hr <hr class="border border-primary border-3 opacity-75">`
|
|
newQuestionHtml += `</div>`;
|
|
|
|
$("#questions-container .form-group").append(newQuestionHtml);
|
|
questionIndex++;
|
|
});
|
|
|
|
// Add answer dynamically without "Add Answer" button
|
|
$("#questions-container").on("click", ".add-answer", function () {
|
|
var questionIndex = $(this).closest('.answers-container').data('question-index');
|
|
var answerIndex = $(this).closest('.answers-container').find('.answer-group').length;
|
|
var answerGroup = $(this).closest('.answers-container').find('.answer-group:first').clone();
|
|
answerGroup.find('input').val(''); // Clear input values
|
|
|
|
answerGroup.find('.add-answer').hide(); // Hide the "Add Answer" button
|
|
answerGroup.find('.remove-answer').show(); // Show the "Remove Answer" button
|
|
|
|
answerGroup.data('answer-index', answerIndex);
|
|
answerGroup.find('label').text(`Answer ${answerIndex + 1}`);
|
|
answerGroup.find('input').attr('name', `Questions[${questionIndex}].Answers[${answerIndex}].Text`);
|
|
$(this).closest('.answers-container').append(answerGroup);
|
|
});
|
|
|
|
// Remove answer dynamically
|
|
$("#questions-container").on("click", ".remove-answer", function () {
|
|
$(this).closest('.answer-group').remove();
|
|
});
|
|
|
|
// Remove question dynamically
|
|
$("#questions-container").on("click", ".remove-question", function () {
|
|
$(this).closest('.question-group').remove();
|
|
});
|
|
});
|
|
</script> *@
|
|
@* <script>
|
|
$(document).ready(function () {
|
|
var questionIndex = @Model.Questions?.Count;
|
|
|
|
$("#add-question-btn").click(function () {
|
|
var newQuestionHtml = `
|
|
<div class="question-group" data-question-index="${questionIndex}">
|
|
<label>Question ${questionIndex + 1}</label>
|
|
<textarea name="Questions[${questionIndex}].Text" class="form-control"></textarea>
|
|
<label class=h5>Select question type</label>
|
|
<select name="Questions[${questionIndex}].Type" class="form-control question-type">`;
|
|
|
|
var questionTypes = @Html.Raw(Json.Serialize(Enum.GetNames(typeof(QuestionType))));
|
|
|
|
for (var i = 0; i < questionTypes.length; i++) {
|
|
newQuestionHtml += `<option value="${questionTypes[i]}">${questionTypes[i]}</option>`;
|
|
}
|
|
|
|
newQuestionHtml += `</select>`;
|
|
|
|
// Add answers input fields
|
|
newQuestionHtml += `<div class="container-ms ml-5 mr-5 p-4 px-4 gy-5 ">`;
|
|
newQuestionHtml += `<div class="answers-container" data-question-index="${questionIndex}"><br>`;
|
|
newQuestionHtml += `<label class="h3">Create Answers:</label>`;
|
|
newQuestionHtml += `<div class="answer-group" data-answer-index="0"><hr class="border border-primary border-3 opacity-75">`;
|
|
newQuestionHtml += `<label>Answer 1</label>`;
|
|
newQuestionHtml += `<input type="text" name="Questions[${questionIndex}].Answers[0].Text" class="form-control" placeholder="new answer"/>`;
|
|
newQuestionHtml += `<button type="button" class="btn btn-sm btn-success add-answer mt-2">Add Answer</button>`;
|
|
newQuestionHtml += `<button type="button" class="btn btn-sm btn-danger remove-answer mt-2" style="display:none">Remove Answer</button><br><hr>`;
|
|
newQuestionHtml += `</div> `;
|
|
newQuestionHtml += `</div>`;
|
|
newQuestionHtml += `</div> `;
|
|
|
|
// Add Remove Question button
|
|
newQuestionHtml += `<button type="button" class="btn btn-md btn-danger remove-question">Remove Question</button>`;
|
|
newQuestionHtml += `<hr class="border border-primary border-3 opacity-75">`
|
|
newQuestionHtml += `</div>`;
|
|
|
|
$("#questions-container .form-group").append(newQuestionHtml);
|
|
questionIndex++;
|
|
});
|
|
|
|
// Add answer dynamically without "Add Answer" button
|
|
$("#questions-container").on("click", ".add-answer", function () {
|
|
var questionIndex = $(this).closest('.answers-container').data('question-index');
|
|
var answerIndex = $(this).closest('.answers-container').find('.answer-group').length;
|
|
var answerGroup = $(this).closest('.answers-container').find('.answer-group:first').clone();
|
|
answerGroup.find('input').val(''); // Clear input values
|
|
|
|
answerGroup.find('.add-answer').hide(); // Hide the "Add Answer" button
|
|
answerGroup.find('.remove-answer').show(); // Show the "Remove Answer" button
|
|
|
|
answerGroup.data('answer-index', answerIndex);
|
|
answerGroup.find('label').text(`Answer ${answerIndex + 1}`);
|
|
answerGroup.find('input').attr('name', `Questions[${questionIndex}].Answers[${answerIndex}].Text`);
|
|
$(this).closest('.answers-container').append(answerGroup);
|
|
});
|
|
|
|
// Remove answer dynamically
|
|
$("#questions-container").on("click", ".remove-answer", function () {
|
|
$(this).closest('.answer-group').remove();
|
|
});
|
|
|
|
// Remove question dynamically
|
|
$("#questions-container").on("click", ".remove-question", function () {
|
|
$(this).closest('.question-group').remove();
|
|
});
|
|
});
|
|
|
|
|
|
|
|
</script> *@
|
|
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
// Handle the "Add Question" button
|
|
$("#add-question-btn").click(function () {
|
|
var questionIndex = $("#questions-container .question-group").length;
|
|
|
|
var newQuestionHtml = `
|
|
<div class="question-group">
|
|
<label>Question ${questionIndex + 1}</label>
|
|
<textarea name="Questions[${questionIndex}].Text" class="form-control"></textarea>
|
|
<br>
|
|
<select name="Questions[${questionIndex}].Type" class="form-control question-type">
|
|
<option value="">Select Question Type</option>
|
|
<!-- Add options based on your question type enum -->
|
|
</select>
|
|
|
|
<div class="answers-container">
|
|
<label>Answers:</label>
|
|
<div class="answer-group">
|
|
<input type="text" name="Questions[${questionIndex}].Answers[0].Text" class="form-control" placeholder="Answer 1" />
|
|
<button type="button" class="btn btn-sm btn-success add-answer">Add Answer</button>
|
|
<button type="button" class="btn btn-sm btn-danger remove-answer" style="display:none">Remove Answer</button>
|
|
</div>
|
|
<input type="hidden" name="Questions[${questionIndex}].Answers" />
|
|
</div>
|
|
</div>`;
|
|
|
|
$("#questions-container").append(newQuestionHtml);
|
|
});
|
|
|
|
// Handle the "Add Answer" button
|
|
$("#questions-container").on("click", ".add-answer", function () {
|
|
var answerGroup = $(this).closest('.answers-container').find('.answer-group:first').clone();
|
|
answerGroup.find('input').val(''); // Clear input values
|
|
answerGroup.find('.add-answer').hide(); // Hide the "Add Answer" button
|
|
answerGroup.find('.remove-answer').show(); // Show the "Remove Answer" button
|
|
$(this).closest('.answers-container').append(answerGroup);
|
|
});
|
|
|
|
// Handle the "Remove Answer" button
|
|
$("#questions-container").on("click", ".remove-answer", function () {
|
|
$(this).closest('.answer-group').remove();
|
|
});
|
|
|
|
// Handle the "Remove Question" button
|
|
$("#questions-container").on("click", ".remove-question", function () {
|
|
$(this).closest('.question-group').remove();
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
}
|
|
|
|
|