the questionnaire mode CURD complete
This commit is contained in:
Qais Yousuf
parent
59d86a516e
commit
f83d5c492b
10 changed files with 881 additions and 317 deletions
|
|
@ -1,4 +1,5 @@
|
|||
using Data;
|
||||
using Microsoft.EntityFrameworkCore;
|
||||
using Model;
|
||||
using Services.Interaces;
|
||||
using System;
|
||||
|
|
@ -36,5 +37,10 @@ namespace Services.Implemnetation
|
|||
{
|
||||
throw new NotImplementedException();
|
||||
}
|
||||
|
||||
public List<Question> GetQuestionsWithAnswers()
|
||||
{
|
||||
return _context.Questions.AsNoTracking().Include(x=>x.Answers).ToList();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,7 +47,12 @@ namespace Services.Implemnetation
|
|||
|
||||
public List<Questionnaire> GetQuestionnairesWithQuestion()
|
||||
{
|
||||
return _context.Questionnaires.AsNoTracking().Include(x=>x.Questions).ToList();
|
||||
return _context.Questionnaires.AsNoTracking().Include(x=>x.Questions).ThenInclude(x=>x.Answers).ToList();
|
||||
}
|
||||
|
||||
public Questionnaire GetQuestionnaireWithQuestionAndAnswer(int? id)
|
||||
{
|
||||
return _context.Questionnaires.AsNoTracking().Include(x => x.Questions).ThenInclude(x => x.Answers).FirstOrDefault(x=>x.Id==id);
|
||||
}
|
||||
|
||||
public void Update(Questionnaire questionnaire)
|
||||
|
|
|
|||
|
|
@ -11,6 +11,8 @@ namespace Services.Interaces
|
|||
{
|
||||
List<Question> GetAllQuestions();
|
||||
|
||||
List<Question> GetQuestionsWithAnswers();
|
||||
|
||||
Question GetQuestionById(int id);
|
||||
|
||||
void Add(Question question);
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ namespace Services.Interaces
|
|||
List<Questionnaire> GetAllQuestions();
|
||||
List<Questionnaire> GetQuestionnairesWithQuestion();
|
||||
Questionnaire GetQuesById(int? id);
|
||||
Questionnaire GetQuestionnaireWithQuestionAndAnswer(int? id);
|
||||
|
||||
void Add(Questionnaire questionnaire);
|
||||
void Update(Questionnaire questionnaire);
|
||||
|
|
|
|||
|
|
@ -2,8 +2,10 @@
|
|||
using Microsoft.AspNetCore.Mvc;
|
||||
using Microsoft.AspNetCore.Mvc.Rendering;
|
||||
using Model;
|
||||
using Services.Implemnetation;
|
||||
using Services.Interaces;
|
||||
using Web.ViewModel.QuestionnaireVM;
|
||||
using Web.ViewModel.QuestionVM;
|
||||
|
||||
namespace Web.Areas.Admin.Controllers
|
||||
{
|
||||
|
|
@ -24,6 +26,10 @@ namespace Web.Areas.Admin.Controllers
|
|||
|
||||
var questionnaire = _questionnaire.GetQuestionnairesWithQuestion();
|
||||
|
||||
var question = _question.GetQuestionsWithAnswers();
|
||||
|
||||
|
||||
|
||||
List<QuestionnaireViewModel> viewmodel = new List<QuestionnaireViewModel>();
|
||||
|
||||
|
||||
|
|
@ -34,7 +40,10 @@ namespace Web.Areas.Admin.Controllers
|
|||
Id = item.Id,
|
||||
Description = item.Description,
|
||||
Title = item.Title,
|
||||
Questions = item.Questions
|
||||
Questions = item.Questions,
|
||||
|
||||
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -91,7 +100,7 @@ namespace Web.Areas.Admin.Controllers
|
|||
QuestionnaireId=questionViewModel.QuestionnaireId,
|
||||
Text = questionViewModel.Text,
|
||||
Type = questionViewModel.Type,
|
||||
Answers = new List<Answer>() // Initialize the list of answers for each question
|
||||
Answers = new List<Answer>()
|
||||
};
|
||||
|
||||
foreach (var answerViewModel in questionViewModel.Answers)
|
||||
|
|
@ -103,42 +112,17 @@ namespace Web.Areas.Admin.Controllers
|
|||
|
||||
};
|
||||
|
||||
// Add the answer to the list of answers for the current question
|
||||
|
||||
question.Answers.Add(answer);
|
||||
}
|
||||
|
||||
// Add the question to the list of questions for the questionnaire
|
||||
|
||||
questionnaire.Questions.Add(question);
|
||||
}
|
||||
|
||||
|
||||
//var answers = questions.Where(x => x.Answers == viewmodel.Answers);
|
||||
|
||||
|
||||
//foreach (var question in questions)
|
||||
//{
|
||||
|
||||
// questionnaire.Questions.Add(new Question
|
||||
// {
|
||||
// Id = question.Id,
|
||||
// Text=question.Text,
|
||||
// Type=question.Type,
|
||||
// QuestionnaireId=questionnaire.Id,
|
||||
|
||||
|
||||
// });
|
||||
|
||||
// //foreach(var answer in answers)
|
||||
// //{
|
||||
// // question.Answers.Add(new Answer
|
||||
// // {
|
||||
// // Id=answer
|
||||
// // });
|
||||
// //}
|
||||
|
||||
|
||||
//}
|
||||
|
||||
_questionnaire.Add(questionnaire);
|
||||
await _questionnaire.commitAsync();
|
||||
TempData["Success"] = "Questionnaire created successfully";
|
||||
|
|
@ -150,5 +134,192 @@ namespace Web.Areas.Admin.Controllers
|
|||
return View(viewmodel);
|
||||
}
|
||||
|
||||
[HttpGet]
|
||||
public IActionResult Edit(int id)
|
||||
{
|
||||
var questionTypes = Enum.GetValues(typeof(QuestionType)).Cast<QuestionType>();
|
||||
|
||||
ViewBag.QuestionTypes = new SelectList(questionTypes);
|
||||
var questionnaire = _questionnaire.GetQuestionnaireWithQuestionAndAnswer(id);
|
||||
|
||||
if (questionnaire == null)
|
||||
{
|
||||
return NotFound(); // Or handle not found case appropriately
|
||||
}
|
||||
|
||||
var viewModel = new QuestionnaireViewModel
|
||||
{
|
||||
Id = questionnaire.Id,
|
||||
Title = questionnaire.Title,
|
||||
Description = questionnaire.Description,
|
||||
Questions = questionnaire.Questions
|
||||
.Select(q => new Question
|
||||
{
|
||||
Id = q.Id,
|
||||
Text = q.Text,
|
||||
Type = q.Type,
|
||||
Answers = q.Answers.Select(a => new Answer
|
||||
{
|
||||
Id = a.Id,
|
||||
Text = a.Text
|
||||
}).ToList()
|
||||
}).ToList()
|
||||
};
|
||||
|
||||
return View(viewModel);
|
||||
}
|
||||
|
||||
[HttpPost]
|
||||
public async Task<IActionResult> Edit(QuestionnaireViewModel viewModel)
|
||||
{
|
||||
|
||||
var questionTypes = Enum.GetValues(typeof(QuestionType)).Cast<QuestionType>();
|
||||
|
||||
ViewBag.QuestionTypes = new SelectList(questionTypes);
|
||||
if (ModelState.IsValid)
|
||||
{
|
||||
// Retrieve the existing questionnaire from the database
|
||||
var existingQuestionnaire = _questionnaire.GetQuestionnaireWithQuestionAndAnswer(viewModel.Id);
|
||||
|
||||
if (existingQuestionnaire == null)
|
||||
{
|
||||
return NotFound(); // Or handle not found case appropriately
|
||||
}
|
||||
|
||||
// Update the existing questionnaire with the data from the view model
|
||||
existingQuestionnaire.Title = viewModel.Title;
|
||||
existingQuestionnaire.Description = viewModel.Description;
|
||||
|
||||
var Question = viewModel.Questions.ToList();
|
||||
|
||||
if(Question.Count()!=0)
|
||||
{
|
||||
foreach (var questionViewModel in viewModel.Questions)
|
||||
{
|
||||
|
||||
var existingQuestion = existingQuestionnaire.Questions.FirstOrDefault(q => q.Id == questionViewModel.Id);
|
||||
|
||||
if (existingQuestion != null)
|
||||
{
|
||||
existingQuestion.Text = questionViewModel.Text;
|
||||
existingQuestion.Type = questionViewModel.Type;
|
||||
|
||||
// Update answers
|
||||
foreach (var answerViewModel in questionViewModel.Answers)
|
||||
{
|
||||
var existingAnswer = existingQuestion.Answers.FirstOrDefault(a => a.Id == answerViewModel.Id);
|
||||
|
||||
if (existingAnswer != null)
|
||||
{
|
||||
existingAnswer.Text = answerViewModel.Text;
|
||||
existingAnswer.QuestionId = answerViewModel.QuestionId;
|
||||
}
|
||||
else
|
||||
{
|
||||
// Handle adding new answers if necessary
|
||||
existingQuestion.Answers.Add(new Answer { Text = answerViewModel.Text });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
foreach (var questionViewModel in viewModel.Questions)
|
||||
{
|
||||
|
||||
var existingQuestion = existingQuestionnaire.Questions.FirstOrDefault(q => q.Id == questionViewModel.Id);
|
||||
|
||||
if (existingQuestion != null)
|
||||
{
|
||||
existingQuestion.Text = questionViewModel.Text;
|
||||
existingQuestion.Type = questionViewModel.Type;
|
||||
|
||||
// Update answers
|
||||
foreach (var answerViewModel in questionViewModel.Answers)
|
||||
{
|
||||
var existingAnswer = existingQuestion.Answers.FirstOrDefault(a => a.Id == answerViewModel.Id);
|
||||
|
||||
if (existingAnswer != null)
|
||||
{
|
||||
existingAnswer.Text = answerViewModel.Text;
|
||||
existingAnswer.QuestionId = answerViewModel.QuestionId;
|
||||
}
|
||||
else
|
||||
{
|
||||
// Handle adding new answers if necessary
|
||||
existingQuestion.Answers.Add(new Answer { Text = answerViewModel.Text });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
// Update questions
|
||||
|
||||
|
||||
|
||||
|
||||
// Save changes to the database
|
||||
_questionnaire.Update(existingQuestionnaire);
|
||||
TempData["Success"] = "Questionnaire updated successfully";
|
||||
await _questionnaire.commitAsync();
|
||||
|
||||
return RedirectToAction("Index");
|
||||
}
|
||||
|
||||
// If the model state is not valid, return to the edit view with the existing model
|
||||
return View(viewModel);
|
||||
}
|
||||
|
||||
[HttpGet]
|
||||
public IActionResult Delete(int id)
|
||||
{
|
||||
|
||||
var questionTypes = Enum.GetValues(typeof(QuestionType)).Cast<QuestionType>();
|
||||
|
||||
ViewBag.QuestionTypes = new SelectList(questionTypes);
|
||||
var questionnaire = _questionnaire.GetQuestionnaireWithQuestionAndAnswer(id);
|
||||
|
||||
if (questionnaire == null)
|
||||
{
|
||||
return NotFound(); // Or handle not found case appropriately
|
||||
}
|
||||
|
||||
var viewModel = new QuestionnaireViewModel
|
||||
{
|
||||
Id = questionnaire.Id,
|
||||
Title = questionnaire.Title,
|
||||
Description = questionnaire.Description,
|
||||
Questions = questionnaire.Questions
|
||||
.Select(q => new Question
|
||||
{
|
||||
Id = q.Id,
|
||||
Text = q.Text,
|
||||
Type = q.Type,
|
||||
Answers = q.Answers.Select(a => new Answer
|
||||
{
|
||||
Id = a.Id,
|
||||
Text = a.Text
|
||||
}).ToList()
|
||||
}).ToList()
|
||||
};
|
||||
|
||||
return View(viewModel);
|
||||
}
|
||||
|
||||
[HttpPost]
|
||||
[ActionName("Delete")]
|
||||
public IActionResult DeleteConfirm(int id)
|
||||
{
|
||||
_questionnaire.Delete(id);
|
||||
_questionnaire.commitAsync();
|
||||
|
||||
return Json(new { success = true, message = "Item deleted successfully" });
|
||||
TempData["Success"] = "Questionnaire deleted successfully";
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
}
|
||||
|
||||
<div class="container mt-4">
|
||||
<div class="card justify-content-center">
|
||||
<div class="card justify-content-center p-4 shadow rounded">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Create Survey</h5>
|
||||
<h5 class="card-title h5">Create questionnaire</h5>
|
||||
|
||||
<div class="row ">
|
||||
<!-- 12 columns for textboxes -->
|
||||
|
|
@ -23,81 +23,53 @@
|
|||
</div>
|
||||
<div class="mb-3 col-12">
|
||||
<label asp-for="Description" class="control-label"></label>
|
||||
<input asp-for="Description" class="form-control" />
|
||||
<textarea asp-for="Description" class="form-control"></textarea>
|
||||
<span asp-validation-for="Description" class="text-danger"></span>
|
||||
</div>
|
||||
<div id="questions-container">
|
||||
<h3>Create Questions</h3>
|
||||
<div class="form-group">
|
||||
@for (int i = 0; i < Model.Questions?.Count; i++)
|
||||
{
|
||||
<div class="question-group">
|
||||
<label>Question @(i + 1)</label>
|
||||
<textarea name="Questions[@i].Text" class="form-control">Write a question</textarea>
|
||||
<select name="Questions[@i].Type" asp-items="ViewBag.QuestionTypes" class="form-control question-type">
|
||||
<option value="">Select Question Type</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="answers-container" data-question-index="@i">
|
||||
<label>Answers:</label>
|
||||
@for (int j = 0; j < Model.Answers?.Count; j++)
|
||||
{
|
||||
<div class="answer-group">
|
||||
<input type="text" name="Questions[@i].Answers[@j].Text" class="form-control" value="@Model.Answers?[j]?.Text" />
|
||||
<button type="button" class="btn btn-sm btn-danger remove-answer">Remove Answer</button>
|
||||
<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 <i class="bi bi-trash3-fill"></i></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 -->
|
||||
<input type="hidden" name="Questions[@i].Answers" />
|
||||
</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 <i class="bi bi-trash3-fill"></i></button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="button" id="add-question-btn" class="btn btn-md btn-success mb-3"><i class="bi bi-plus-lg"></i> 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>
|
||||
|
||||
<button type="button" id="add-question-btn" class="btn btn-sm btn-primary">Add Question</button>
|
||||
@* <div class="container">
|
||||
<div id="questions-container">
|
||||
<h3>Create Questions</h3>
|
||||
<div class="form-group">
|
||||
@for (int i = 0; i < Model.Questions?.Count; i++)
|
||||
{
|
||||
<div class="question-group">
|
||||
<label>Question @(i + 1)</label>
|
||||
<textarea name="Questions[@i].Text" class="form-control">Write a question</textarea>
|
||||
<select name="Questions[@i].Type" asp-items="ViewBag.QuestionTypes" class="form-control question-type">
|
||||
<option value="">Select Question Type</option>
|
||||
|
||||
</select>
|
||||
</div>
|
||||
<div class="answers-container">
|
||||
<label>Answers:</label>
|
||||
@for (int j = 1; 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>
|
||||
|
||||
|
||||
|
||||
}
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<button type="button" id="add-question-btn" class="btn btn-success">Add Question</button>
|
||||
|
||||
</div> *@
|
||||
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
| <a asp-action="Index" class="btn btn-info">Back to list</a>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
|
|
@ -111,8 +83,13 @@
|
|||
|
||||
@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" />
|
||||
<partial name="_ValidationScriptsPartial" />
|
||||
}
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
|
||||
|
|
@ -122,30 +99,38 @@
|
|||
|
||||
$("#add-question-btn").click(function () {
|
||||
var newQuestionHtml = `
|
||||
<div class="question-group">
|
||||
<label>Question ${questionIndex + 1}</label>
|
||||
<textarea name="Questions[${questionIndex}].Text" class="form-control"></textarea>
|
||||
<select name="Questions[${questionIndex}].Type" class="form-control question-type">
|
||||
<option value="">Select Question Type</option>`;
|
||||
<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))));
|
||||
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>`;
|
||||
}
|
||||
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="answers-container" data-question-index="${questionIndex}">`;
|
||||
newQuestionHtml += `<label>Answers:</label>`;
|
||||
newQuestionHtml += `<div class="answer-group" data-answer-index="0">`;
|
||||
newQuestionHtml += `<input type="text" name="Questions[${questionIndex}].Answers[0].Text" class="form-control" placeholder="Answer 1" />`;
|
||||
newQuestionHtml += `<button type="button" class="btn btn-sm btn-success add-answer">Add Answer</button>`;
|
||||
newQuestionHtml += `<button type="button" class="btn btn-sm btn-danger remove-answer" style="display:none">Remove Answer</button>`;
|
||||
newQuestionHtml += `</div>`;
|
||||
newQuestionHtml += `</div>`;
|
||||
|
||||
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"><i class="bi bi-plus-lg"></i> Add Answer</button>`;
|
||||
newQuestionHtml += `<button type="button" class="btn btn-md btn-danger remove-answer mt-2" style="display:none"> <i class="bi bi-trash3-fill"></i></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"><i class="bi bi-trash3-fill"></i> Remove Question </button>`;
|
||||
newQuestionHtml += `<hr <hr class="border border-primary border-3 opacity-75">`
|
||||
newQuestionHtml += `</div>`;
|
||||
|
||||
$("#questions-container .form-group").append(newQuestionHtml);
|
||||
|
|
@ -158,9 +143,12 @@
|
|||
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);
|
||||
});
|
||||
|
|
@ -169,63 +157,13 @@
|
|||
$("#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">
|
||||
<label>Question ${questionIndex + 1}</label>
|
||||
<textarea name="Questions[${questionIndex}].Text" class="form-control"></textarea>
|
||||
<select name="Questions[${questionIndex}].Type" class="form-control question-type">
|
||||
<option value="">Select Question Type</option>`;
|
||||
|
||||
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="answers-container" data-question-index="${questionIndex}">`;
|
||||
newQuestionHtml += `<label>Answers:</label>`;
|
||||
newQuestionHtml += `<div class="answer-group" data-answer-index="0">`;
|
||||
newQuestionHtml += `<input type="text" name="Questions[${questionIndex}].Answers[0].Text" class="form-control" placeholder="Answer 1" />`;
|
||||
newQuestionHtml += `<button type="button" class="btn btn-sm btn-success add-answer">Add Answer</button>`;
|
||||
newQuestionHtml += `<button type="button" class="btn btn-sm btn-danger remove-answer" style="display:none">Remove Answer</button>`;
|
||||
newQuestionHtml += `</div>`;
|
||||
newQuestionHtml += `</div>`;
|
||||
|
||||
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('.answer-group').data('answer-index') + 1;
|
||||
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('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();
|
||||
});
|
||||
});
|
||||
</script> *@
|
||||
|
||||
|
||||
|
||||
|
|
@ -234,139 +172,6 @@
|
|||
|
||||
|
||||
|
||||
@* <script>
|
||||
$(document).ready(function () {
|
||||
var questionIndex = @Model.Questions?.Count ?? 0;
|
||||
|
||||
function addQuestion() {
|
||||
var newQuestionHtml = `
|
||||
<div class="question-group">
|
||||
<label>Question ${questionIndex + 1}</label>
|
||||
<textarea name="Questions[${questionIndex}].Text" class="form-control"></textarea>
|
||||
<br>
|
||||
<br>
|
||||
<select name="Questions[${questionIndex}].Type" class="form-control question-type">
|
||||
<option value="">Select Question Type</option>`;
|
||||
|
||||
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="answers-container">`;
|
||||
newQuestionHtml += `<label>Answers:</label>`;
|
||||
newQuestionHtml += `<div class="answer-group">`;
|
||||
newQuestionHtml += `<input type="text" name="Questions[${questionIndex}].Answers[0].Text" class="form-control" placeholder="Answer 1" />`;
|
||||
newQuestionHtml += `<button type="button" class="btn btn-sm btn-success add-answer">Add Answer</button>`;
|
||||
newQuestionHtml += `</div>`;
|
||||
newQuestionHtml += `</div>`;
|
||||
|
||||
newQuestionHtml += `</div>`;
|
||||
|
||||
$("#questions-container .form-group").append(newQuestionHtml);
|
||||
questionIndex++;
|
||||
}
|
||||
|
||||
function addAnswer(answerGroup) {
|
||||
var newAnswerGroup = answerGroup.clone();
|
||||
newAnswerGroup.find('input').val(''); // Clear input values
|
||||
newAnswerGroup.find('.add-answer').remove(); // Remove the "Add Answer" button
|
||||
answerGroup.closest('.answers-container').append(newAnswerGroup);
|
||||
}
|
||||
|
||||
// Add question dynamically
|
||||
$("#add-question-btn").click(function () {
|
||||
addQuestion();
|
||||
});
|
||||
|
||||
// Add answer dynamically
|
||||
$("#questions-container").on("click", ".add-answer", function () {
|
||||
var answerGroup = $(this).closest('.question-group').find('.answer-group:first');
|
||||
addAnswer(answerGroup);
|
||||
});
|
||||
});
|
||||
</script> *@
|
||||
|
||||
@* <script>
|
||||
$(document).ready(function () {
|
||||
var questionIndex = @Model.Questions?.Count ?? 0;
|
||||
|
||||
$("#add-question-btn").click(function () {
|
||||
var newQuestionHtml = `
|
||||
<div class="question-group">
|
||||
<label>Question ${questionIndex + 1}</label>
|
||||
<textarea name="Questions[${questionIndex}].Text" class="form-control"></textarea>
|
||||
<br>
|
||||
<br>
|
||||
<select name="Questions[${questionIndex}].Type" class="form-control question-type">
|
||||
<option value="">Select Question Type</option>`;
|
||||
|
||||
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="answers-container">`;
|
||||
newQuestionHtml += `<label>Answers:</label>`;
|
||||
newQuestionHtml += `<div class="answer-group">`;
|
||||
newQuestionHtml += `<input type="text" name="Questions[${questionIndex}].Answers[0].Text" class="form-control" placeholder="Answer 1" />`;
|
||||
newQuestionHtml += `<button type="button" class="btn btn-sm btn-success add-answer">Add Answer</button>`;
|
||||
newQuestionHtml += `</div>`;
|
||||
newQuestionHtml += `</div>`;
|
||||
|
||||
newQuestionHtml += `</div>`;
|
||||
|
||||
$("#questions-container .form-group").append(newQuestionHtml);
|
||||
questionIndex++;
|
||||
});
|
||||
|
||||
// Add answer dynamically without "Add Answer" button
|
||||
$("#questions-container").on("click", ".add-answer", function () {
|
||||
var answerGroup = $(this).closest('.question-group').find('.answer-group:first').clone();
|
||||
answerGroup.find('input').val(''); // Clear input values
|
||||
$(this).closest('.answers-container').append(answerGroup);
|
||||
});
|
||||
});
|
||||
</script> *@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@* <script>
|
||||
$(document).ready(function () {
|
||||
var questionIndex = @Model.Questions.Count;
|
||||
|
||||
$("#add-question-btn").click(function () {
|
||||
var newQuestionHtml = `
|
||||
<div class="question-group">
|
||||
<label>Question ${questionIndex + 1}</label>
|
||||
<textarea name="Questions[${questionIndex}].Text" class="form-control"></textarea>
|
||||
<select name="Questions[${questionIndex}].Type" class="form-control question-type">
|
||||
<option value="">Select Question Type</option>`;
|
||||
|
||||
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></div>`;
|
||||
|
||||
$("#questions-container .form-group").append(newQuestionHtml);
|
||||
questionIndex++;
|
||||
});
|
||||
});
|
||||
</script> *@
|
||||
|
||||
}
|
||||
270
Web/Areas/Admin/Views/Questionnaire/Delete.cshtml
Normal file
270
Web/Areas/Admin/Views/Questionnaire/Delete.cshtml
Normal file
|
|
@ -0,0 +1,270 @@
|
|||
@model QuestionnaireViewModel
|
||||
|
||||
@{
|
||||
ViewData["Title"] = "Delete";
|
||||
}
|
||||
<div class="container mt-4">
|
||||
<div class="card justify-content-center p-4 shadow rounded">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Delete questionnaire</h5>
|
||||
<h6 class="text-danger">Are you sure you want to delete this questionnaire: <span class="badge bg-danger p-2 shadow rounded">@Model.Title</span></h6>
|
||||
|
||||
<div class="row">
|
||||
<!-- 12 columns for textboxes -->
|
||||
|
||||
<form asp-action="Delete" 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" disabled />
|
||||
<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" disabled></textarea>
|
||||
<span asp-validation-for="Description" class="text-danger"></span>
|
||||
</div>
|
||||
<div class="mb-3 col-12">
|
||||
<span class="h5">Total Number of questions:<span class="badge-info p-2 shadow rounded"> @Model.Questions.Count</span></span><br />
|
||||
@* <span class="h5">Total Number of answer: @Model.Questions.Select(x=>x.Answers.Select(x=>x.Id)).Count()</span> *@
|
||||
</div>
|
||||
|
||||
<!-- Add the delete confirmation modal trigger button -->
|
||||
|
||||
|
||||
<div class="mb-3 container">
|
||||
<hr class="border border-primary border-2 opacity-50">
|
||||
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">Delete</button>
|
||||
|
||||
<button asp-action="Index" class="btn btn-info">Back to list <i class="bi bi-arrow-return-left"></i></button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="deleteModalLabel">Delete Confirmation</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p id="deleteMessage">Are you sure you want to delete this item?</p>
|
||||
<p class="text-danger">If you delete, you can't recover it.</p>
|
||||
<input type="text" class="form-control" id="deleteConfirmation" placeholder="Type the questionnaire name to confirm">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-danger" id="deleteButton" disabled>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@* <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="deleteModalLabel">Delete Confirmation</h5>
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||||
<span aria-hidden="true">×</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<p>Are you sure you want to delete this item?</p>
|
||||
<p class="text-danger">if you delete, you can't recover back</p>
|
||||
<input type="text" class="form-control" id="deleteConfirmation" placeholder="Type the questionnaire name to confirm">
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-danger" id="deleteButton" disabled>Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> *@
|
||||
|
||||
<!-- Delete Confirmation Modal -->
|
||||
|
||||
|
||||
@section Scripts {
|
||||
|
||||
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.11.4/ckeditor.js"></script>
|
||||
<!-- Add these links in the <head> section of your HTML file -->
|
||||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
|
||||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
|
||||
|
||||
<script>
|
||||
CKEDITOR.replace("Description");
|
||||
</script>
|
||||
@{
|
||||
<partial name="_ValidationScriptsPartial" />
|
||||
}
|
||||
<script>
|
||||
// $(document).ready(function () {
|
||||
// var itemId = @Model.Id; // Assuming you can get the item ID from the model
|
||||
|
||||
// // Enable delete button when the input matches the item name
|
||||
// $('#deleteConfirmation').on('input', function () {
|
||||
// var itemName = '@Model.Title'; // Item name from the model
|
||||
// var inputText = $(this).val().trim().toLowerCase();
|
||||
// var isMatch = inputText === itemName.toLowerCase();
|
||||
// $('#deleteButton').prop('disabled', !isMatch);
|
||||
// });
|
||||
|
||||
// // Clear input and disable button when modal is hidden
|
||||
// $('#deleteModal').on('hidden.bs.modal', function () {
|
||||
// $('#deleteConfirmation').val('');
|
||||
// $('#deleteButton').prop('disabled', true);
|
||||
// });
|
||||
|
||||
// // Delete button click event
|
||||
// $('#deleteButton').on('click', function () {
|
||||
// // Make an AJAX request to delete the item
|
||||
// $.ajax({
|
||||
// url: '/admin/Questionnaire/Delete/' + itemId,
|
||||
// type: 'POST', // or 'DELETE' if you have a dedicated delete action
|
||||
// success: function (result) {
|
||||
// // Hide the confirmation details
|
||||
// $('#deleteConfirmation').hide();
|
||||
// $('#deleteButton').hide();
|
||||
// // Show the success message
|
||||
// $('#deleteMessage').text('the questionnaire deleted successfully.').show();
|
||||
// // Show the modal
|
||||
// $('#deleteModal').modal('show');
|
||||
// // Automatically close the modal after 4 seconds
|
||||
// setTimeout(function () {
|
||||
// $('#deleteModal').modal('hide');
|
||||
// // Redirect to the index action method after closing the modal
|
||||
// window.location.href = '/admin/Questionnaire/Index';
|
||||
// }, 3000);
|
||||
// },
|
||||
// error: function (error) {
|
||||
// // Handle error
|
||||
// $('#deleteMessage').text('Failed to delete item.').show();
|
||||
// // Show the modal
|
||||
// $('#deleteModal').modal('show');
|
||||
// // Automatically close the modal after 4 seconds
|
||||
// setTimeout(function () {
|
||||
// $('#deleteModal').modal('hide');
|
||||
// }, 4000);
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
// });
|
||||
$(document).ready(function () {
|
||||
var itemId = @Model.Id; // Assuming you can get the item ID from the model
|
||||
|
||||
// Enable delete button when the input matches the item name
|
||||
$('#deleteConfirmation').on('input', function () {
|
||||
var itemName = '@Model.Title'; // Item name from the model
|
||||
var inputText = $(this).val().trim().toLowerCase();
|
||||
var isMatch = inputText === itemName.toLowerCase();
|
||||
$('#deleteButton').prop('disabled', !isMatch);
|
||||
});
|
||||
|
||||
// Clear input and disable button when modal is hidden
|
||||
$('#deleteModal').on('hidden.bs.modal', function () {
|
||||
$('#deleteConfirmation').val('');
|
||||
$('#deleteButton').prop('disabled', true);
|
||||
});
|
||||
|
||||
// Delete button click event
|
||||
$('#deleteButton').on('click', function () {
|
||||
// Make an AJAX request to delete the item
|
||||
$.ajax({
|
||||
url: '/admin/Questionnaire/Delete/' + itemId,
|
||||
type: 'POST', // or 'DELETE' if you have a dedicated delete action
|
||||
success: function (result) {
|
||||
// Hide the confirmation details
|
||||
$('#deleteConfirmation, .text-danger').hide();
|
||||
$('#deleteButton').hide();
|
||||
// Show the success message
|
||||
$('#deleteMessage').text('Questionnaire deleted successfully.').addClass('text-success h4').show();
|
||||
// Show the modal
|
||||
$('#deleteModal').modal('show');
|
||||
// Automatically close the modal after 4 seconds
|
||||
setTimeout(function () {
|
||||
$('#deleteModal').modal('hide');
|
||||
// Redirect to the index action method after closing the modal
|
||||
window.location.href = '/admin/Questionnaire/Index';
|
||||
}, 3000);
|
||||
},
|
||||
error: function (error) {
|
||||
// Handle error
|
||||
$('#deleteMessage').text('Failed to delete item.').show();
|
||||
// Show the modal
|
||||
$('#deleteModal').modal('show');
|
||||
// Automatically close the modal after 4 seconds
|
||||
setTimeout(function () {
|
||||
$('#deleteModal').modal('hide');
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@* <script>
|
||||
$(document).ready(function () {
|
||||
var itemId = @Model.Id; // Assuming you can get the item ID from the model
|
||||
|
||||
// Enable delete button when the input matches the item name
|
||||
$('#deleteConfirmation').on('input', function () {
|
||||
var itemName = '@Model.Title'; // Item name from the model
|
||||
var inputText = $(this).val().trim().toLowerCase();
|
||||
var isMatch = inputText === itemName.toLowerCase();
|
||||
$('#deleteButton').prop('disabled', !isMatch);
|
||||
});
|
||||
|
||||
// Clear input and disable button when modal is hidden
|
||||
$('#deleteModal').on('hidden.bs.modal', function () {
|
||||
$('#deleteConfirmation').val('');
|
||||
$('#deleteButton').prop('disabled', true);
|
||||
});
|
||||
|
||||
// Delete button click event
|
||||
$('#deleteButton').on('click', function () {
|
||||
// Make an AJAX request to delete the item
|
||||
$.ajax({
|
||||
url: '/admin/Questionnaire/Delete/' + itemId,
|
||||
type: 'POST', // or 'DELETE' if you have a dedicated delete action
|
||||
success: function (result) {
|
||||
// Handle success
|
||||
$('#deleteMessage').text('Item deleted successfully.');
|
||||
$('#deleteModal').modal('show');
|
||||
setTimeout(function () {
|
||||
$('#deleteModal').modal('hide');
|
||||
// Redirect to the index action method after closing the modal
|
||||
window.location.href = '/admin/Questionnaire/Index';
|
||||
}, 3000);
|
||||
},
|
||||
error: function (error) {
|
||||
// Handle error
|
||||
$('#deleteMessage').text('Failed to delete item.');
|
||||
$('#deleteModal').modal('show');
|
||||
setTimeout(function () {
|
||||
$('#deleteModal').modal('hide');
|
||||
}, 3000);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
</script> *@
|
||||
|
||||
|
||||
}
|
||||
294
Web/Areas/Admin/Views/Questionnaire/Edit.cshtml
Normal file
294
Web/Areas/Admin/Views/Questionnaire/Edit.cshtml
Normal file
|
|
@ -0,0 +1,294 @@
|
|||
@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>
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -3,26 +3,26 @@
|
|||
@{
|
||||
ViewData["Title"] = "Questionnaire";
|
||||
}
|
||||
<div class="container-fluid mt-5">
|
||||
<div class="container-fluid ">
|
||||
|
||||
<partial name="_Notification" />
|
||||
|
||||
<div class="card bg-default mb-3 ">
|
||||
<div class="card bg-default mb-3 p-4 shadow ">
|
||||
<div class="card-header">Questionnaire</div>
|
||||
<div class="card-body">
|
||||
<h4 class="card-title">Questionnaire list</h4>
|
||||
<p>
|
||||
<a asp-action="Create" class="btn btn-primary">Create New</a>
|
||||
</p>
|
||||
|
||||
<table class="table table-responsive w-100 d-block d-md-table">
|
||||
<table class="table table-responsive d-block">
|
||||
<thead class="w-auto">
|
||||
<tr>
|
||||
|
||||
<th scope="col">Id</th>
|
||||
<th scope="col">Title</th>
|
||||
<th scope="col">Description</th>
|
||||
<th scope="col">Qaustion & Questions Type</th>
|
||||
<th scope="col">Number of questions</th>
|
||||
<th scope="col">Total Question</th>
|
||||
<th scope="col" class="d-flex justify-content-end">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -35,13 +35,22 @@
|
|||
<td> @item.Title</td>
|
||||
<td>@item.Description</td>
|
||||
|
||||
<td>
|
||||
<span class="badge p-1 m-1 bg-primary shadow-sm"> Total Questions:@item.Questions?.Count()</span>
|
||||
|
||||
</td>
|
||||
<td class="h5">
|
||||
|
||||
@foreach (var question in item.Questions)
|
||||
{
|
||||
|
||||
<span class="badge bg-primary"> Question:@question.Text</span>
|
||||
<span class="badge bg-info">Type: @question.Type</span>
|
||||
<span class="badge p-1 m-1 bg-primary shadow-sm"> Question:@question.Text</span>
|
||||
<span class="badge p-1 m-1 bg-info shadow-sm">Type: @question.Type</span>
|
||||
foreach (var answer in question.Answers)
|
||||
{
|
||||
<span class="badge p-1 m-1 bg-success shadow-sm"> Asnwer:@answer.Text</span>
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
</td>
|
||||
|
|
@ -63,3 +72,4 @@
|
|||
</div>
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
</nav>
|
||||
|
||||
<!-- Page Content -->
|
||||
<div id="content" class="p-4 p-md-5">
|
||||
<div id="content">
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-brimary">
|
||||
<div class="container-fluid">
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
</nav>
|
||||
|
||||
|
||||
<main class="container-fluid mt-5">
|
||||
<main class=" mt-5">
|
||||
@RenderBody()
|
||||
</main>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue