530 lines
No EOL
24 KiB
Text
530 lines
No EOL
24 KiB
Text
@using Newtonsoft.Json
|
|
@model UserResponsesViewModel
|
|
|
|
@{
|
|
ViewData["Title"] = "User Responses";
|
|
}
|
|
|
|
<style>
|
|
.stepper-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
position: relative;
|
|
}
|
|
|
|
.stepper-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
position: relative;
|
|
padding-left: 120px;
|
|
}
|
|
|
|
.stepper-item::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 20px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background-color: #007bff;
|
|
}
|
|
|
|
.step-counter {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: #aed5ff;
|
|
color: white;
|
|
border-radius: 50%;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.step-content {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.step-header {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
#QuestionnairCard {
|
|
padding: 2rem;
|
|
border: 0.5px solid #e7e7e7;
|
|
border-radius: 3px;
|
|
-webkit-box-shadow: 0px 0px 14px -7px rgba(0,0,0,0.75);
|
|
-moz-box-shadow: 0px 0px 14px -7px rgba(0,0,0,0.75);
|
|
box-shadow: 0px 0px 14px -7px rgba(0,0,0,0.75);
|
|
}
|
|
|
|
.status-answered {
|
|
background-color: #d4edda;
|
|
border-color: #c3e6cb;
|
|
color: #155724;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.status-shown {
|
|
background-color: #fff3cd;
|
|
border-color: #ffeaa7;
|
|
color: #856404;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.status-skipped {
|
|
background-color: #d1ecf1;
|
|
border-color: #bee5eb;
|
|
color: #0c5460;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.status-unknown {
|
|
background-color: #f8f9fa;
|
|
border-color: #dee2e6;
|
|
color: #6c757d;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
/* NEW: Styles for "Other" text responses */
|
|
.other-text-response {
|
|
background-color: #fff3cd;
|
|
border: 1px solid #ffeaa7;
|
|
border-radius: 6px;
|
|
padding: 10px 12px;
|
|
margin-top: 8px;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.other-text-label {
|
|
font-weight: bold;
|
|
color: #856404;
|
|
margin-bottom: 5px;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.other-text-content {
|
|
color: #495057;
|
|
font-style: italic;
|
|
line-height: 1.3;
|
|
background-color: #fff;
|
|
padding: 6px 10px;
|
|
border-radius: 4px;
|
|
border-left: 3px solid #ffc107;
|
|
}
|
|
|
|
.other-option-badge {
|
|
background-color: #ffc107;
|
|
color: #212529;
|
|
font-size: 0.7em;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
margin-left: 5px;
|
|
}
|
|
</style>
|
|
|
|
<div class="container-fluid mt-3">
|
|
<p>
|
|
<a asp-action="Index" class="btn btn-primary btn-sm">Back to list</a>
|
|
</p>
|
|
|
|
<div class="card p-5 m-3">
|
|
<div class="bd-callout bd-callout-primary shadow">
|
|
|
|
<div class="row p-4">
|
|
<div class="col-md-3 mt-5">
|
|
<h6 class="text-primary font-weight-bold"><i class="bi bi-person"></i> @Model.UserName (@Model.UserEmail)</h6>
|
|
<p class="text-info font-weight-bold"><i class="bi bi-calculator"></i> Total responses: @Model.Responses.Count()</p>
|
|
|
|
<a asp-action="GenerateReport" asp-route-userEmail="@Model.UserEmail" asp-route-format="pdf" class="btn btn-info btn-sm">
|
|
<i class="bi bi-filetype-pdf"></i> PDF Reports
|
|
</a>
|
|
<a asp-action="GenerateReport" asp-route-userEmail="@Model.UserEmail" asp-route-format="excel" class="btn btn-info btn-sm">
|
|
<i class="bi bi-file-excel"></i> Excel Reports
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-md-9">
|
|
<div id="user_survey_summary_chart_div" style=" width: auto; height: 200px;"></div>
|
|
</div>
|
|
|
|
</div>
|
|
<hr class="border border-info border-1 opacity-50">
|
|
<div class="col-md-12 ">
|
|
<div id="chart_div" style="width: 100%; height: 400px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stepper -->
|
|
<div class="stepper-wrapper">
|
|
@foreach (var response in Model.Responses)
|
|
{
|
|
<div class="stepper-item">
|
|
<div class="step-counter">
|
|
<span class="badge bg-primary p-2 shadow">@response.Questionnaire.Title <i class="bi bi-arrow-right-circle-fill"></i></span>
|
|
</div>
|
|
<div class="step-content">
|
|
|
|
<div id="QuestionnairCard">
|
|
|
|
<div class="row">
|
|
<div class="col-md-7 p-4">
|
|
|
|
<div class="step-header">
|
|
<h6 class="text-primary font-weight-bold"><i class="bi bi-ui-checks"></i> @response.Questionnaire.Title</h6>
|
|
<h6 class="text-success font-weight-bold"><i class="bi bi-calendar2-week"></i> Submitted on: @response.SubmissionDate</h6>
|
|
<p class="text-info font-weight-bold"><i class="bi bi-question-square"></i> Total questions: @response.Questionnaire.Questions.Count()</p>
|
|
</div>
|
|
|
|
<!-- Buttons to generate individual reports -->
|
|
<a asp-action="GenerateQuestionnairePdfReport" asp-route-questionnaireId="@response.Questionnaire.Id" class="btn btn-info btn-sm ">
|
|
<i class="bi bi-filetype-pdf"></i> PDF report
|
|
</a>
|
|
<a asp-action="GenerateQuestionnaireExcelReport" asp-route-questionnaireId="@response.Questionnaire.Id" class="btn btn-info btn-sm">
|
|
<i class="bi bi-file-excel"></i> Excel report
|
|
</a><br />
|
|
<!-- Buttons to generate individual reports -->
|
|
<!-- Collapsible button -->
|
|
<button class="btn btn-primary btn-sm mt-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseResponse-@response.Id" aria-expanded="false" aria-controls="collapseResponse-@response.Id">
|
|
View Responses
|
|
</button>
|
|
</div>
|
|
|
|
<div class="col-md-5">
|
|
<div id="survey_questions_answers_summary_chart_div_@response.Questionnaire.Id" style="width: 100%; height: 200px;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Collapsible content -->
|
|
<div class="collapse mt-3" id="collapseResponse-@response.Id">
|
|
<table class="table table-responsive w-100 d-block d-md-table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th>Question</th>
|
|
<th>Status</th>
|
|
<th>Response</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach (var question in response.Questionnaire.Questions.OrderBy(q => q.Id))
|
|
{
|
|
var responseDetail = response.ResponseDetails.FirstOrDefault(rd => rd.QuestionId == question.Id);
|
|
|
|
<tr>
|
|
<td>
|
|
<strong>@question.Text</strong>
|
|
<br />
|
|
<small class="text-muted">Type: @question.Type</small>
|
|
</td>
|
|
<td>
|
|
@if (responseDetail != null)
|
|
{
|
|
@switch (responseDetail.Status)
|
|
{
|
|
case ResponseStatus.Answered:
|
|
<div class="status-answered">
|
|
<strong>✅ Answered</strong>
|
|
</div>
|
|
break;
|
|
|
|
case ResponseStatus.Shown:
|
|
<div class="status-shown">
|
|
<strong>⚠️ Shown but not answered</strong>
|
|
<br />
|
|
<small>Question was displayed but left blank</small>
|
|
</div>
|
|
break;
|
|
|
|
case ResponseStatus.Skipped:
|
|
<div class="status-skipped">
|
|
<strong>⏭️ Skipped</strong>
|
|
<br />
|
|
<small>@responseDetail.SkipReason</small>
|
|
</div>
|
|
break;
|
|
}
|
|
}
|
|
else
|
|
{
|
|
<div class="status-unknown">
|
|
<strong>❓ No response data</strong>
|
|
<br />
|
|
<small>Status unknown</small>
|
|
</div>
|
|
}
|
|
</td>
|
|
<td>
|
|
@if (responseDetail != null && responseDetail.Status == ResponseStatus.Answered)
|
|
{
|
|
@if (responseDetail.QuestionType == QuestionType.Text || responseDetail.QuestionType == QuestionType.Slider || responseDetail.QuestionType == QuestionType.Open_ended)
|
|
{
|
|
<div class="alert alert-light">
|
|
<strong>Answer:</strong> @responseDetail.TextResponse
|
|
</div>
|
|
}
|
|
else if (responseDetail.ResponseAnswers.Any())
|
|
{
|
|
<div class="d-flex flex-wrap gap-1">
|
|
@foreach (var answer in responseDetail.ResponseAnswers)
|
|
{
|
|
var answerObj = question.Answers.FirstOrDefault(a => a.Id == answer.AnswerId);
|
|
var answerText = answerObj?.Text;
|
|
<span class="badge bg-success">
|
|
@answerText
|
|
@if (answerObj?.IsOtherOption == true)
|
|
{
|
|
<span class="other-option-badge">Other</span>
|
|
}
|
|
</span>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
@* NEW: Display "Other" text if available *@
|
|
@if (!string.IsNullOrEmpty(responseDetail.OtherText))
|
|
{
|
|
<div class="other-text-response">
|
|
<div class="other-text-label">
|
|
<i class="bi bi-pencil-square me-1"></i>
|
|
Custom "Other" Response:
|
|
</div>
|
|
<div class="other-text-content">
|
|
@responseDetail.OtherText
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
else
|
|
{
|
|
<span class="text-muted">No response provided</span>
|
|
}
|
|
</td>
|
|
</tr>
|
|
}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@section Scripts {
|
|
<!-- Include Bootstrap 5 JS for collapse functionality -->
|
|
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
google.charts.load('current', { packages: ['corechart', 'line'] });
|
|
google.charts.setOnLoadCallback(drawChart);
|
|
|
|
function getDescriptiveValue(sliderValue) {
|
|
if (sliderValue >= 0 && sliderValue <= 10) {
|
|
return 1; // Normal
|
|
} else if (sliderValue > 10 && sliderValue <= 20) {
|
|
return 2; // Better
|
|
} else if (sliderValue > 20 && sliderValue <= 30) {
|
|
return 3; // Good
|
|
} else if (sliderValue > 30 && sliderValue <= 40) {
|
|
return 4; // Very Good
|
|
} else if (sliderValue > 40 && sliderValue <= 50) {
|
|
return 5; // Excellent
|
|
} else if (sliderValue > 50 && sliderValue <= 60) {
|
|
return 6; // Outstanding
|
|
} else if (sliderValue > 60 && sliderValue <= 70) {
|
|
return 7; // Remarkable
|
|
} else if (sliderValue > 70 && sliderValue <= 80) {
|
|
return 8; // Exceptional
|
|
} else if (sliderValue > 80 && sliderValue <= 90) {
|
|
return 9; // Superior
|
|
} else if (sliderValue > 90 && sliderValue <= 100) {
|
|
return 10; // Perfect
|
|
} else {
|
|
return 0; // Unknown
|
|
}
|
|
}
|
|
|
|
function drawChart() {
|
|
var data = new google.visualization.DataTable();
|
|
data.addColumn('string', 'Survey and Submission Date');
|
|
data.addColumn('number', 'Status');
|
|
|
|
var responsesData = [
|
|
@foreach (var response in Model.Responses)
|
|
{
|
|
@foreach (var detail in response.ResponseDetails.Where(d => d.QuestionType == QuestionType.Slider))
|
|
{
|
|
@:['@response.Questionnaire.Title - @response.SubmissionDate.ToString("yyyy-MMMM-dd HH:mm")', getDescriptiveValue(@(detail.TextResponse != null ? int.Parse(detail.TextResponse) : 0))],
|
|
}
|
|
}
|
|
];
|
|
|
|
responsesData.forEach(function (row) {
|
|
data.addRow(row);
|
|
});
|
|
|
|
var options = {
|
|
title: 'User Progress',
|
|
hAxis: {
|
|
title: 'Questionnaire and Submission Date'
|
|
},
|
|
vAxis: {
|
|
title: 'Status',
|
|
ticks: [
|
|
{ v: 0, f: 'Unknown' },
|
|
{ v: 1, f: 'Normal' },
|
|
{ v: 2, f: 'Better' },
|
|
{ v: 3, f: 'Good' },
|
|
{ v: 4, f: 'Very Good' },
|
|
{ v: 5, f: 'Excellent' },
|
|
{ v: 6, f: 'Outstanding' },
|
|
{ v: 7, f: 'Remarkable' },
|
|
{ v: 8, f: 'Exceptional' },
|
|
{ v: 9, f: 'Superior' },
|
|
{ v: 10, f: 'Perfect' }
|
|
]
|
|
},
|
|
'titleTextStyle': { color: '#17a2b8', fontSize: 16, bold: true },
|
|
};
|
|
|
|
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
|
|
chart.draw(data, options);
|
|
}
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
google.charts.load('current', { packages: ['corechart', 'bar'] });
|
|
google.charts.setOnLoadCallback(drawUserSurveySummaryChart);
|
|
|
|
function drawUserSurveySummaryChart() {
|
|
var data = new google.visualization.DataTable();
|
|
data.addColumn('string', 'User');
|
|
data.addColumn('number', 'Total Surveys');
|
|
data.addColumn('number', 'Total Questions');
|
|
data.addColumn('number', 'Total Answers');
|
|
|
|
var userSurveySummaryData = @Html.Raw(JsonConvert.SerializeObject(
|
|
Model.Responses
|
|
.GroupBy(response => response.UserEmail)
|
|
.Select(g => new
|
|
{
|
|
UserName = g.First().UserName,
|
|
TotalSurveys = g.Count(),
|
|
TotalQuestions = g.SelectMany(r => r.ResponseDetails).Count(),
|
|
TotalAnswers = g.SelectMany(r => r.ResponseDetails.SelectMany(rd => rd.ResponseAnswers)).Count()
|
|
})
|
|
.ToList()
|
|
));
|
|
|
|
userSurveySummaryData.forEach(function (row) {
|
|
data.addRow([row.UserName, row.TotalSurveys, row.TotalQuestions, row.TotalAnswers]);
|
|
});
|
|
|
|
var options = {
|
|
title: 'User Survey Summary',
|
|
hAxis: {
|
|
title: 'Count'
|
|
},
|
|
vAxis: {
|
|
title: 'User'
|
|
},
|
|
'titleTextStyle': { color: '#17a2b8', fontSize: 16, bold: true },
|
|
};
|
|
|
|
var chart = new google.visualization.BarChart(document.getElementById('user_survey_summary_chart_div'));
|
|
chart.draw(data, options);
|
|
}
|
|
</script>
|
|
<script type="text/javascript">
|
|
google.charts.load('current', { packages: ['corechart'] });
|
|
google.charts.setOnLoadCallback(drawSurveyQuestionsAnswersSummaryCharts);
|
|
|
|
function drawSurveyQuestionsAnswersSummaryCharts() {
|
|
var surveyQuestionsSummaryData = @Html.Raw(JsonConvert.SerializeObject(
|
|
Model.Responses
|
|
.GroupBy(response => response.Questionnaire.Title)
|
|
.Select(g => new
|
|
{
|
|
SurveyTitle = g.Key,
|
|
SurveyId = g.First().Questionnaire.Id,
|
|
TotalQuestions = g.SelectMany(r => r.ResponseDetails).Count(),
|
|
TotalAnswers = g.SelectMany(r => r.ResponseDetails.SelectMany(rd => rd.ResponseAnswers)).Count()
|
|
})
|
|
.ToList()
|
|
));
|
|
|
|
surveyQuestionsSummaryData.forEach(function (row) {
|
|
drawSingleSurveyChart(row.SurveyTitle, row.SurveyId, row.TotalQuestions, row.TotalAnswers);
|
|
});
|
|
}
|
|
|
|
function drawSingleSurveyChart(surveyTitle, surveyId, totalQuestions, totalAnswers) {
|
|
var data = new google.visualization.DataTable();
|
|
data.addColumn('string', 'Category');
|
|
data.addColumn('number', 'Count');
|
|
|
|
data.addRow(['Questions', totalQuestions]);
|
|
data.addRow(['Answers', totalAnswers]);
|
|
|
|
var options = {
|
|
|
|
is3D: true,
|
|
titleTextStyle: { color: '#17a2b8', fontSize: 16, bold: true },
|
|
};
|
|
|
|
var chart = new google.visualization.PieChart(document.getElementById('survey_questions_answers_summary_chart_div_' + surveyId));
|
|
chart.draw(data, options);
|
|
}
|
|
</script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var collapseElements = document.querySelectorAll('[data-bs-toggle="collapse"]');
|
|
|
|
collapseElements.forEach(function (element) {
|
|
var targetId = element.getAttribute('data-bs-target');
|
|
var targetElement = document.querySelector(targetId);
|
|
|
|
// Initialize button text and color based on current state
|
|
if (targetElement.classList.contains('show')) {
|
|
element.textContent = 'Hide Responses';
|
|
element.classList.remove('btn-primary');
|
|
element.classList.add('btn-info');
|
|
} else {
|
|
element.textContent = 'View Responses';
|
|
element.classList.remove('btn-info');
|
|
element.classList.add('btn-primary');
|
|
}
|
|
|
|
targetElement.addEventListener('shown.bs.collapse', function () {
|
|
element.textContent = 'Hide Responses';
|
|
element.classList.remove('btn-primary');
|
|
element.classList.add('btn-info');
|
|
});
|
|
|
|
targetElement.addEventListener('hidden.bs.collapse', function () {
|
|
element.textContent = 'View Responses';
|
|
element.classList.remove('btn-info');
|
|
element.classList.add('btn-primary');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
} |