189 lines
No EOL
10 KiB
Text
189 lines
No EOL
10 KiB
Text
|
|
@model QuestionnaireViewModel
|
|
|
|
@{
|
|
ViewData["Title"] = "Create";
|
|
}
|
|
|
|
<div class="container mt-4">
|
|
<div class="card justify-content-center p-4 shadow rounded">
|
|
<div class="card-body">
|
|
<h5 class="card-title h5">Create questionnaire</h5>
|
|
|
|
<div class="row">
|
|
<form asp-action="Create" 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 shadow bg-body-tertiary rounded">
|
|
<div id="questions-container" class="mx-md-3 mx-lg-3 px-md-3 px-lg-3 mx-sm-0 px-sm-0">
|
|
<h3 class="text-primary font-weight-bold">Create Questions</h3>
|
|
<div class="form-group">
|
|
@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 shadow remove-answer">Remove Answer</button>
|
|
</div>
|
|
}
|
|
<button type="button" class="btn btn-sm btn-success shadow add-answer"><i class="bi bi-plus-square"></i> Create Answer</button>
|
|
<input type="hidden" name="Questions[@i].Answers" />
|
|
</div>
|
|
<button type="button" class="btn btn-sm p-3 btn-danger shadow remove-question">Remove Question <i class="bi bi-trash3-fill"></i></button> |
|
|
<button type="button" class="btn btn-sm btn-primary shadow m-3 save-question">Save Question</button>
|
|
<button type="button" class="btn btn-sm btn-secondary shadow edit-question" style="display: none;">Edit Question</button>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mt-3 card-footer">
|
|
<button type="button" id="add-question-btn" class="btn btn-md btn-success shadow"><i class="bi bi-plus-square"></i> Create New Question</button> |
|
|
<button type="submit" class="btn btn-primary shadow">Submit</button>
|
|
| <a asp-action="Index" class="btn btn-info shadow">Back to list</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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-${questionIndex}">`;
|
|
|
|
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 mx-5 py-2 px-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-1 opacity-35">`;
|
|
newQuestionHtml += `<label>Answer 1</label>`;
|
|
newQuestionHtml += `<input type="text" name="Questions[${questionIndex}].Answers[0].Text" class="form-control" placeholder="new answer"/><br>`;
|
|
|
|
newQuestionHtml += `<button type="button" class="btn btn-sm btn-success add-answer mt-2 shadow"><i class="bi bi-plus-lg"></i> create Answer</button>`;
|
|
newQuestionHtml += `<hr class="border m-2">`
|
|
newQuestionHtml += `</div> `;
|
|
newQuestionHtml += `</div>`;
|
|
newQuestionHtml += `</div> `;
|
|
|
|
// Add Remove Question button
|
|
newQuestionHtml += `<button type="button" class="btn btn-sm btn-danger m-4 shadow remove-question"><i class="bi bi-trash3-fill"></i> Remove Question </button>`;
|
|
newQuestionHtml += `<button type="button" class="btn btn-sm btn-primary shadow save-question">Save Question</button>`;
|
|
newQuestionHtml += `<button type="button" class="btn btn-sm btn-secondary shadow edit-question" style="display: none;">Edit Question</button>`;
|
|
newQuestionHtml += `<hr class="border border-primary border-4 opacity-75 mb-5">`
|
|
newQuestionHtml += `</div>`;
|
|
|
|
$("#questions-container .form-group").append(newQuestionHtml);
|
|
questionIndex++;
|
|
});
|
|
|
|
$("#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 answerGroupHtml = `
|
|
<div class="answer-group">
|
|
<br>
|
|
<label class="control-label">Answer ${answerIndex + 1}</label>
|
|
<input type="text" class="form-control" name="Questions[${questionIndex}].Answers[${answerIndex}].Text" placeholder="new answer"/>
|
|
<button type="button" class="btn btn-danger btn-sm mt-1 shadow remove-answer"><i class="bi bi-trash3-fill"></i></button>
|
|
<br>
|
|
</div>`;
|
|
|
|
$(this).before(answerGroupHtml);
|
|
$(this).prev('.answer-group').find('.remove-answer').show();
|
|
});
|
|
|
|
// Remove answer dynamically
|
|
$("#questions-container").on("click", ".remove-answer", function () {
|
|
$(this).closest('.answer-group').remove();
|
|
});
|
|
|
|
// Remove question dynamically
|
|
$(document).on("click", ".remove-question", function () {
|
|
$(this).closest('.question-group').remove();
|
|
});
|
|
|
|
// Save question
|
|
$("#questions-container").on("click", ".save-question", function () {
|
|
var questionGroup = $(this).closest('.question-group');
|
|
questionGroup.find('.edit-question').show();
|
|
questionGroup.find('.remove-question').hide();
|
|
questionGroup.find('.save-question').hide();
|
|
questionGroup.find('.question-type').prop('disabled', true).hide(); // Hide question type
|
|
questionGroup.find('textarea').prop('disabled', true);
|
|
questionGroup.find('.answers-container').slideUp();
|
|
questionGroup.addClass('collapsed');
|
|
});
|
|
|
|
// Edit question
|
|
$("#questions-container").on("click", ".edit-question", function () {
|
|
var questionGroup = $(this).closest('.question-group');
|
|
questionGroup.find('.save-question').show();
|
|
questionGroup.find('.remove-question').show();
|
|
questionGroup.find('.edit-question').hide();
|
|
questionGroup.find('.question-type').prop('disabled', false).show(); // Show question type
|
|
questionGroup.find('textarea').prop('disabled', false);
|
|
questionGroup.find('.answers-container').slideDown();
|
|
questionGroup.removeClass('collapsed');
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
|
|
} |