qais_seosoft/SurveyVista
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

the questionnaire create and save designe comppleted

Browse source
This commit is contained in:
Qais Yousuf 2024-03-22 19:58:00 +01:00
parent a50d5eb241
commit 3c5f0c7010
4 changed files with 152 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
Web/Areas/Admin/Controllers/QuestionnaireController.cs
View file

@ -250,18 +250,18 @@ namespace Web.Areas.Admin.Controllers
} }
else //else
{ //{
var newQuestion = new Question // var newQuestion = new Question
{ // {
Text = questionViewModel.Text, // Text = questionViewModel.Text,
Type = questionViewModel.Type, // Type = questionViewModel.Type,
Answers = questionViewModel.Answers?.Select(a => new Answer { Text = a.Text }).ToList() ?? new List<Answer>() // 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) //if (existingQuestion != null)
//{ //{

203
Web/Areas/Admin/Views/Questionnaire/Create.cshtml
View file

@ -10,9 +10,7 @@
<div class="card-body"> <div class="card-body">
<h5 class="card-title h5">Create questionnaire</h5> <h5 class="card-title h5">Create questionnaire</h5>
<div class="row "> <div class="row">
<!-- 12 columns for textboxes -->
<form asp-action="Create" asp-controller="Questionnaire"> <form asp-action="Create" asp-controller="Questionnaire">
<div asp-validation-summary="All" class="text-danger"></div> <div asp-validation-summary="All" class="text-danger"></div>
@ -27,21 +25,15 @@
<span asp-validation-for="Description" class="text-danger"></span> <span asp-validation-for="Description" class="text-danger"></span>
</div> </div>
<div class="container p-5 shadow bg-body-tertiary rounded"> <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"> <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> <h3 class="text-primary font-weight-bold">Create Questions</h3>
<div class="form-group"> <div class="form-group">
@for (int i = 0; i < Model.Questions?.Count; i++) @for (int i = 0; i < Model.Questions?.Count; i++)
{ {
<div class="question-group" data-question-index="@i"> <div class="question-group" data-question-index="@i">
<label>Question @(i + 1)</label> <label>Question @(i + 1)</label>
<textarea name="Questions[@i].Text" class="form-control">@Model.Questions[i].Text</textarea> <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... --> <!-- Include options for question types... -->
<div class="container-sm"></div> <div class="container-sm"></div>
@ -52,31 +44,24 @@
{ {
<div class="answer-group"> <div class="answer-group">
<input type="text" name="Questions[@i].Answers[@j].Text" class="form-control" value="@Model.Questions?[i]?.Answers?[j]?.Text" /> <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> </div>
} }
<button type="button" class="btn btn-sm btn-success add-answer"><i class="bi bi-plus-lg"></i> Add Answer</button> <button type="button" class="btn btn-sm btn-success shadow add-answer"><i class="bi bi-plus-square"></i> Create Answer</button>
<!-- Add a hidden field to address the required field validation -->
<input type="hidden" name="Questions[@i].Answers" /> <input type="hidden" name="Questions[@i].Answers" />
</div> </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-danger 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> </div>
</div> </div>
<div class="mt-3 card-footer"> <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="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">Submit</button> <button type="submit" class="btn btn-primary shadow">Submit</button>
| <a asp-action="Index" class="btn btn-info">Back to list</a> | <a asp-action="Index" class="btn btn-info shadow">Back to list</a>
</div> </div>
</form> </form>
</div> </div>
@ -86,8 +71,6 @@
<hr /> <hr />
@section Scripts { @section Scripts {
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.11.4/ckeditor.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.11.4/ckeditor.js"></script>
@ -100,97 +83,107 @@
} }
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function () { <script>
var questionIndex = @Model.Questions?.Count; $(document).ready(function () {
var questionIndex = @Model.Questions?.Count;
$("#add-question-btn").click(function () { $("#add-question-btn").click(function () {
var newQuestionHtml = ` var newQuestionHtml = `
<div class="question-group" data-question-index="${questionIndex}"> <div class="question-group" data-question-index="${questionIndex}">
<label>Question ${questionIndex + 1}</label> <label>Question ${questionIndex + 1}</label>
<textarea name="Questions[${questionIndex}].Text" class="form-control"></textarea> <textarea name="Questions[${questionIndex}].Text" class="form-control"></textarea>
<br> <br>
<label class=h5>Select question type</label> <label class=h5>Select question type</label>
<select name="Questions[${questionIndex}].Type" class="form-control question-type">`; <select name="Questions[${questionIndex}].Type" class="form-control question-type-${questionIndex}">`;
var questionTypes = @Html.Raw(Json.Serialize(Enum.GetNames(typeof(QuestionType)))); var questionTypes = @Html.Raw(Json.Serialize(Enum.GetNames(typeof(QuestionType))));
for (var i = 0; i < questionTypes.length; i++) { for (var i = 0; i < questionTypes.length; i++) {
newQuestionHtml += `<option value="${questionTypes[i]}">${questionTypes[i]}</option>`; newQuestionHtml += `<option value="${questionTypes[i]}">${questionTypes[i]}</option>`;
} }
newQuestionHtml += `</select>`; newQuestionHtml += `</select>`;
// Add answers input fields // Add answers input fields
newQuestionHtml += `<div class="container-ms mx-5 py-2 px-5 ">`; newQuestionHtml += `<div class="container-ms mx-5 py-2 px-5 ">`;
newQuestionHtml += `<div class="answers-container" data-question-index="${questionIndex}"><br>`; newQuestionHtml += `<div class="answers-container" data-question-index="${questionIndex}"><br>`;
newQuestionHtml += `<label class="h3">Create Answers:</label>`; 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 += `<div class="answer-group" data-answer-index="0"><hr class="border border-primary border-1 opacity-35">`;
newQuestionHtml += `<label>Answer 1</label>`; newQuestionHtml += `<label>Answer 1</label>`;
newQuestionHtml += `<input type="text" name="Questions[${questionIndex}].Answers[0].Text" class="form-control" placeholder="new answer"/><br>`; 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"><i class="bi bi-plus-lg"></i> Add 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-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>`;
$("#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 = ` 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"> <div class="answer-group">
<br> <br>
<label class="control-label">Answer ${answerIndex + 1}</label> <label class="control-label">Answer ${answerIndex + 1}</label>
<input type="text" class="form-control" name="Questions[${questionIndex}].Answers[${answerIndex}].Text" placeholder="new answer"/> <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> <button type="button" class="btn btn-danger btn-sm mt-1 shadow remove-answer"><i class="bi bi-trash3-fill"></i></button>
<br> <br>
</div>`; </div>`;
// Append the new answer group before the "Add Answer" button $(this).before(answerGroupHtml);
$(this).before(answerGroupHtml); $(this).prev('.answer-group').find('.remove-answer').show();
// 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();
});
}); });
</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>
} }

14
Web/Areas/Admin/Views/Questionnaire/Edit.cshtml
View file

@ -42,7 +42,7 @@
<textarea asp-for="Description" class="form-control"></textarea> <textarea asp-for="Description" class="form-control"></textarea>
<span asp-validation-for="Description" class="text-danger"></span> <span asp-validation-for="Description" class="text-danger"></span>
</div> </div>
<div class="card shadow rounded p-4"> <div class="card shadow rounded" id="customCard">
<div id="questionsContainer"> <div id="questionsContainer">
@ -56,8 +56,8 @@
<hr class="border border-primary border-4 opacity-75 line-start"> <hr class="border border-primary border-4 opacity-75 line-start">
</div> </div>
<!-- Container for the next question text --> <!-- Container for the next question text -->
<div class="next-question-container"> <div class="next-question-container mt-2">
<p class="next-question">Next Question</p> <p> <span class="badge badge-primary">NEXT QUESTION</span></p>
</div> </div>
<!-- Container for the second half of the line --> <!-- Container for the second half of the line -->
<div class="line-container"> <div class="line-container">
@ -89,14 +89,14 @@
<label asp-for="Questions[i].Answers[j].Text" class="control-label"></label> <label asp-for="Questions[i].Answers[j].Text" class="control-label"></label>
<input asp-for="Questions[i].Answers[j].Text" class="form-control" /> <input asp-for="Questions[i].Answers[j].Text" class="form-control" />
<span asp-validation-for="Questions[i].Answers[j].Text" class="text-danger"></span> <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> </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> </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>
} }
</div> </div>
@ -217,7 +217,7 @@
<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 btn-sm mt-1 removeAnswer"><i class="bi bi-trash3"></i></button>
</div>`; </div>`;
// Append the new answer to the specific question // Append the new answer to the specific question

37
Web/wwwroot/css/site.css
View file

@ -35,11 +35,48 @@
--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --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 { .question-group {
margin-bottom: 20px; /* Adjust the value to control the spacing */ 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, *::before,
*::after { *::after {