the questionnaire create and save designe comppleted
This commit is contained in:
Qais Yousuf
parent
a50d5eb241
commit
3c5f0c7010
4 changed files with 152 additions and 122 deletions
|
|
@ -250,18 +250,18 @@ namespace Web.Areas.Admin.Controllers
|
|||
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
//else
|
||||
//{
|
||||
|
||||
var newQuestion = new Question
|
||||
{
|
||||
Text = questionViewModel.Text,
|
||||
Type = questionViewModel.Type,
|
||||
Answers = questionViewModel.Answers?.Select(a => new Answer { Text = a.Text }).ToList() ?? new List<Answer>()
|
||||
};
|
||||
// var newQuestion = new Question
|
||||
// {
|
||||
// Text = questionViewModel.Text,
|
||||
// Type = questionViewModel.Type,
|
||||
// Answers = questionViewModel.Answers?.Select(a => new Answer { Text = a.Text }).ToList() ?? new List<Answer>()
|
||||
// };
|
||||
|
||||
existingQuestionnaire.Questions.Add(newQuestion);
|
||||
}
|
||||
// existingQuestionnaire.Questions.Add(newQuestion);
|
||||
//}
|
||||
|
||||
//if (existingQuestion != null)
|
||||
//{
|
||||
|
|
|
|||
|
|
@ -10,9 +10,7 @@
|
|||
<div class="card-body">
|
||||
<h5 class="card-title h5">Create questionnaire</h5>
|
||||
|
||||
<div class="row ">
|
||||
<!-- 12 columns for textboxes -->
|
||||
|
||||
<div class="row">
|
||||
<form asp-action="Create" asp-controller="Questionnaire">
|
||||
<div asp-validation-summary="All" class="text-danger"></div>
|
||||
|
||||
|
|
@ -27,21 +25,15 @@
|
|||
<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">
|
||||
<select name="Questions[@i].Type" asp-items="ViewBag.QuestionTypes" class="form-control question-type">
|
||||
|
||||
<!-- Include options for question types... -->
|
||||
<div class="container-sm"></div>
|
||||
|
|
@ -52,31 +44,24 @@
|
|||
{
|
||||
<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"> </button>
|
||||
<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 add-answer"><i class="bi bi-plus-lg"></i> Add Answer</button>
|
||||
<!-- Add a hidden field to address the required field validation -->
|
||||
<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 btn-danger remove-question">Remove Question <i class="bi bi-trash3-fill"></i></button>
|
||||
|
||||
<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"><i class="bi bi-plus-lg"></i>Add New Question</button>
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
| <a asp-action="Index" class="btn btn-info">Back to list</a>
|
||||
<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>
|
||||
|
|
@ -86,8 +71,6 @@
|
|||
<hr />
|
||||
|
||||
|
||||
|
||||
|
||||
@section Scripts {
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.11.4/ckeditor.js"></script>
|
||||
|
|
@ -100,96 +83,106 @@
|
|||
}
|
||||
|
||||
<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">`;
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
var questionIndex = @Model.Questions?.Count;
|
||||
|
||||
var questionTypes = @Html.Raw(Json.Serialize(Enum.GetNames(typeof(QuestionType))));
|
||||
$("#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}">`;
|
||||
|
||||
for (var i = 0; i < questionTypes.length; i++) {
|
||||
newQuestionHtml += `<option value="${questionTypes[i]}">${questionTypes[i]}</option>`;
|
||||
}
|
||||
var questionTypes = @Html.Raw(Json.Serialize(Enum.GetNames(typeof(QuestionType))));
|
||||
|
||||
newQuestionHtml += `</select>`;
|
||||
for (var i = 0; i < questionTypes.length; i++) {
|
||||
newQuestionHtml += `<option value="${questionTypes[i]}">${questionTypes[i]}</option>`;
|
||||
}
|
||||
|
||||
// Add answers input fields
|
||||
newQuestionHtml += `</select>`;
|
||||
|
||||
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"><hrclass="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>`;
|
||||
// Add answers input fields
|
||||
|
||||
newQuestionHtml += `<button type="button" class="btn btn-sm btn-success add-answer mt-2"><i class="bi bi-plus-lg"></i> Add Answer</button>`;
|
||||
newQuestionHtml += `<hr class="border m-2">`
|
||||
newQuestionHtml += `</div> `;
|
||||
newQuestionHtml += `</div>`;
|
||||
newQuestionHtml += `</div> `;
|
||||
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>`;
|
||||
|
||||
// Add Remove Question button
|
||||
newQuestionHtml += `<button type="button" class="btn btn-md btn-danger remove-question"><i class="bi bi-trash3-fill"></i> Remove Question </button>`;
|
||||
newQuestionHtml += `<hr class="border border-primary border-4 opacity-75 mb-5">`
|
||||
newQuestionHtml += `</div>`;
|
||||
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> `;
|
||||
|
||||
$("#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;
|
||||
// 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>`;
|
||||
|
||||
var answerGroupHtml = `
|
||||
$("#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>
|
||||
<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 remove-answer"><i class="bi bi-trash3-fill"></i></button>
|
||||
<br>
|
||||
|
||||
<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>`;
|
||||
|
||||
// Append the new answer group before the "Add Answer" button
|
||||
$(this).before(answerGroupHtml);
|
||||
|
||||
// Show the "Remove Answer" button only for the newly added answer group
|
||||
$(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
|
||||
$("#questions-container").on("click", ".remove-question", function () {
|
||||
$(this).closest('.question-group').remove();
|
||||
});
|
||||
$(this).before(answerGroupHtml);
|
||||
$(this).prev('.answer-group').find('.remove-answer').show();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
// 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>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
<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">
|
||||
<div class="card shadow rounded" id="customCard">
|
||||
<div id="questionsContainer">
|
||||
|
||||
|
||||
|
|
@ -56,8 +56,8 @@
|
|||
<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 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">
|
||||
|
|
@ -89,14 +89,14 @@
|
|||
<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 removeAnswer">Remove Answer</button>
|
||||
<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-primary btn-sm addAnswer">Add new Answer</button>
|
||||
<button type="button" class="btn btn-primary btn-sm mb-2 addAnswer"><i class="bi bi-plus-square"></i> Add new Answer</button>
|
||||
</div>
|
||||
<button type="button" class="btn btn-success btn-sm m-5 saveQuestion" style="display: none;"><i class="bi bi-floppy"></i> Save question</button>
|
||||
<button type="button" class="btn btn-success btn-md ml-5 mt-2 saveQuestion" style="display: none;"><i class="bi bi-floppy"></i> Save question</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
|
@ -217,7 +217,7 @@
|
|||
<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>
|
||||
<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
|
||||
|
|
|
|||
|
|
@ -35,11 +35,48 @@
|
|||
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
.question {
|
||||
margin:1rem 2rem 0rem 2rem;
|
||||
}
|
||||
.question-details{
|
||||
padding:0 4rem 0 4rem;
|
||||
}
|
||||
.answers {
|
||||
margin: 3rem !important;
|
||||
}
|
||||
|
||||
#customCard {
|
||||
background-color: #f2f2f2 !important;
|
||||
margin: 3rem;
|
||||
padding: 3rem 0 2rem 0;
|
||||
}
|
||||
.question-title {
|
||||
color: #007bff;
|
||||
font-weight: bold;
|
||||
}
|
||||
.question-group {
|
||||
margin-bottom: 20px; /* Adjust the value to control the spacing */
|
||||
}
|
||||
|
||||
|
||||
.question-separator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.line-container {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.next-question-container {
|
||||
margin: 0 10px; /* Adjust margin as needed */
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.next-question {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue