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

survey analyzer completed for all types of questions

Browse source
This commit is contained in:
Qais Yousuf 2024-04-30 21:27:33 +02:00
parent 5b49528a33
commit 644893ded8
4 changed files with 169 additions and 67 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

170
Web/Areas/Admin/Views/SurveyAnalysis/Analysis.cshtml
View file

@ -91,22 +91,11 @@
</div> </div>
</div> </div>
@* <div class="mt-5" >
@foreach (var question in Model.Questions)
{
<div class="text-center">
<div id="chart_div_@question.Id" class="Errocard m-5 p-3" style="width:auto; height: 300px;"></div>
</div>
}
</div> *@
<div class="container mt-5 p-5"> <div class="container mt-5 p-5">
@foreach (var question in Model.Questions) @foreach (var question in Model.Questions)
{ {
<div class="text-center"> <div class="text-center">
<!-- Chart container for all questions --> <!-- Chart container for all questions -->
<div id="chart_div_@question.Id" class="Errocard m-5 p-3" style="width:auto; height: 300px;"></div> <div id="chart_div_@question.Id" class="Errocard m-5 p-3" style="width:auto; height: 300px;"></div>
@ -119,8 +108,8 @@
} }
</div> </div>
</div> </div>
@section Scripts { @section Scripts {
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript"> <script type="text/javascript">
@ -128,10 +117,10 @@
google.charts.setOnLoadCallback(drawCharts); google.charts.setOnLoadCallback(drawCharts);
function drawCharts() { function drawCharts() {
@foreach (var question in Model.Questions.Select((value, index) => new { Value = value, Index = index })) @foreach (var question in Model.Questions.Select((value, index) => new { Value = value, Index = index }))
{ {
<text> <text>
var type = '@question.Value.Type.ToString()'; var type = '@question.Value.Type.ToString()';
var chartContainer = document.getElementById('chart_div_@question.Value.Id'); var chartContainer = document.getElementById('chart_div_@question.Value.Id');
var imgContainer = (type === "Image") ? document.getElementById('img_div_@question.Value.Id') : null; var imgContainer = (type === "Image") ? document.getElementById('img_div_@question.Value.Id') : null;
@ -150,25 +139,35 @@
'#404040' // darker gray '#404040' // darker gray
]; ];
var data = new google.visualization.DataTable(); var data = new google.visualization.DataTable();
data.addColumn('string', 'Option'); data.addColumn('string', 'Option');
data.addColumn('number', 'Count'); data.addColumn('number', 'Count');
data.addRows([]); var colorIndex = 0;
var colorIndex = 0; // Initialize colorIndex here
</text>
@foreach (var answer in question.Value.Answers)
{
<text>
data.addRow(['@Html.Raw(answer.Text)', @answer.Count]);
</text> </text>
} if (question.Value.Type ==QuestionType.Text || question.Value.Type ==QuestionType.Slider || question.Value.Type ==QuestionType.Open_ended)
<text> {
var options = { @foreach (var item in question.Value.SelectedText)
{
<text>
data.addRow(['@Html.Raw(item)', 1]);
</text>
}
}
else
{
@foreach (var answer in question.Value.Answers)
{
<text>
data.addRow(['@Html.Raw(answer.Text)', @answer.Count]);
</text>
}
}
<text>
var options = {
'title': 'Question @(question.Index + 1): @Html.Raw(question.Value.Text)', 'title': 'Question @(question.Index + 1): @Html.Raw(question.Value.Text)',
is3D: true, is3D: true,
'titleTextStyle': { color: 'blue', fontSize: 15, bold: true }, 'titleTextStyle': { color: '#17a2b8', fontSize: 12, bold: true },
// 'colors': colors 'colors': colors
}; };
if (chartContainer) { if (chartContainer) {
@ -178,28 +177,107 @@
if (imgContainer && type === "Image") { if (imgContainer && type === "Image") {
var imagesHtml = ''; var imagesHtml = '';
@foreach (var answer in question.Value.Answers.Where(a => !string.IsNullOrEmpty(a.Text))) @foreach (var answer in question.Value.Answers.Where(a => !string.IsNullOrEmpty(a.Text)))
{ {
<text> <text>
var color = colors[colorIndex % colors.length]; // Correct usage of colorIndex var color = colors[colorIndex % colors.length];
imagesHtml += '<div style="display: inline-block; text-align: center; margin: 10px;">' + imagesHtml += '<div style="display: inline-block; text-align: center; margin: 10px;">' +
'<img src="@answer.Text" style="max-width:50%; height:auto; display: block; margin: auto;">' + '<img src="@answer.Text" style="max-width:50%; height:auto; display: block; margin: auto;">' +
'<div style="display: flex; align-items: center; gap: 10px;">' + '<div style="display: flex; align-items: center; gap: 10px;">' +
'<span style="width: 12px; height: 12px; border-radius: 50%; background-color: ' + color + ';"></span>' + '<span style="width: 12px; height: 12px; border-radius: 50%; background-color: ' + color + ';"></span>' +
'<span style="color: ' + color + ';">@Html.Raw(answer.Text)</span>' + '<span style="color: ' + color + ';">@Html.Raw(answer.Text)</span>' +
'</div></div>'; '</div></div>';
colorIndex++; // Increment colorIndex within the loop colorIndex++;
</text> </text>
}
imgContainer.innerHTML = imagesHtml;
} }
imgContainer.innerHTML = imagesHtml; </text>
} }
</text>
} }
}
</script> </script>
} }
@* @section Scripts {
// <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
// <script type="text/javascript">
// google.charts.load('current', { 'packages': ['corechart'] });
// google.charts.setOnLoadCallback(drawCharts);
// function drawCharts() {
// @foreach (var question in Model.Questions.Select((value, index) => new { Value = value, Index = index }))
// {
// <text>
// var type = '@question.Value.Type.ToString()';
// var chartContainer = document.getElementById('chart_div_@question.Value.Id');
// var imgContainer = (type === "Image") ? document.getElementById('img_div_@question.Value.Id') : null;
// var colors = [
// '#cc0000', // dark red
// '#00cc00', // dark green
// '#0000cc', // dark blue
// '#cccc00', // dark yellow
// '#00cccc', // dark cyan
// '#cc00cc', // dark magenta
// '#008080', // dark teal
// '#808000', // olive
// '#800080', // purple
// '#800000', // maroon
// '#808080', // gray
// '#404040' // darker gray
// ];
// var data = new google.visualization.DataTable();
// data.addColumn('string', 'Option');
// data.addColumn('number', 'Count');
// data.addRows([]);
// var colorIndex = 0; // Initialize colorIndex here
// </text>
// @foreach (var answer in question.Value.Answers)
// {
// <text>
// data.addRow(['@Html.Raw(answer.Text)', @answer.Count]);
// </text>
// }
// <text>
// var options = {
// 'title': 'Question @(question.Index + 1): @Html.Raw(question.Value.Text)',
// is3D: true,
// 'titleTextStyle': { color: '#17a2b8', fontSize: 12, bold: true },
// 'colors': colors
// };
// if (chartContainer) {
// var chart = new google.visualization.PieChart(chartContainer);
// chart.draw(data, options);
// }
// if (imgContainer && type === "Image") {
// var imagesHtml = '';
// @foreach (var answer in question.Value.Answers.Where(a => !string.IsNullOrEmpty(a.Text)))
// {
// <text>
// var color = colors[colorIndex % colors.length]; // Correct usage of colorIndex
// imagesHtml += '<div style="display: inline-block; text-align: center; margin: 10px;">' +
// '<img src="@answer.Text" style="max-width:50%; height:auto; display: block; margin: auto;">' +
// '<div style="display: flex; align-items: center; gap: 10px;">' +
// '<span style="width: 12px; height: 12px; border-radius: 50%; background-color: ' + color + ';"></span>' +
// '<span style="color: ' + color + ';">@Html.Raw(answer.Text)</span>' +
// '</div></div>';
// colorIndex++; // Increment colorIndex within the loop
// </text>
// }
// imgContainer.innerHTML = imagesHtml;
// }
// </text>
// }
// }
// </script>
// }
@* @section Scripts { @* @section Scripts {
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

11
Web/Areas/Admin/Views/SurveyAnalysis/Index.cshtml
View file

@ -16,14 +16,13 @@
<form asp-action="DeleteMultiple" method="post"> <form asp-action="DeleteMultiple" method="post">
<table class="table table-responsive w-100 d-block d-md-table "> <table class="table table-responsive w-100 d-block d-md-table table-hover ">
<thead class="w-100"> <thead class="w-100">
<tr> <tr>
<th><input type="checkbox" onclick="selectAll(this)" /></th> <!-- Master checkbox --> <th><input type="checkbox" onclick="selectAll(this)" /></th> <!-- Master checkbox -->
<th>Id</th> <th>Id</th>
<th>Questionnaire</th> <th>Questionnaire</th>
<th class="text-end">Action</th>
<th>Action</th>
</tr> </tr>
</thead> </thead>
<tbody class="w-100"> <tbody class="w-100">
@ -33,9 +32,9 @@
<td><input type="checkbox" name="ids" value="@item.Id" /></td> <td><input type="checkbox" name="ids" value="@item.Id" /></td>
<td>@item.Id</td> <td>@item.Id</td>
<td>@item.Title</td> <td>@item.Title</td>
<td class=""> <td class="text-end">
<a asp-action="Analysis" asp-route-id="@item.Id" class="btn btn-warning btn-sm">Details</a> <a asp-action="Analysis" asp-route-id="@item.Id" class="btn btn-info btn-sm"><i class="bi bi-graph-up-arrow"></i> Analyzer</a>
</td> </td>
</tr> </tr>
} }

6
Web/Areas/Admin/Views/UserResponse/Index.cshtml
View file

@ -27,7 +27,7 @@
<th>UserName</th> <th>UserName</th>
<th>UserEmail</th> <th>UserEmail</th>
<th>Submission Date</th> <th>Submission Date</th>
<th>Action</th> <th class="text-end">Action</th>
</tr> </tr>
</thead> </thead>
<tbody class="w-100"> <tbody class="w-100">
@ -40,8 +40,8 @@
<td>@item.UserName</td> <td>@item.UserName</td>
<td>@item.UserEmail</td> <td>@item.UserEmail</td>
<td>@item.SubmissionDate</td> <td>@item.SubmissionDate</td>
<td> <td class="text-end">
<a asp-action="ViewResponse" asp-route-id="@item.Id" class="btn btn-warning btn-sm">Details</a> <a asp-action="ViewResponse" asp-route-id="@item.Id" class="btn btn-info btn-sm"><i class="bi bi-graph-up-arrow"></i> Details</a>
</td> </td>
</tr> </tr>
} }

49
Web/Areas/Admin/Views/UserResponse/ViewResponse.cshtml
View file

@ -106,8 +106,8 @@
background: #d3d3d3; /* Background of the slider */ background: #d3d3d3; /* Background of the slider */
outline: none; /* Removes the outline */ outline: none; /* Removes the outline */
opacity: 0.7; /* Slider opacity */ opacity: 0.7; /* Slider opacity */
-webkit-transition: .2s; /* Smooth transitions */
transition: opacity .2s;
} }
.slider:disabled { .slider:disabled {
@ -141,8 +141,10 @@
-ms-flex-direction: column; -ms-flex-direction: column;
flex-direction: row; flex-direction: row;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 0px 8px -1px rgba(20,101,230,1); box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%);
-webkit-box-shadow: 0px 0px 8px -1px rgba(20,101,230,1); -webkit-box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%);
border-radius: 5px;
border-radius: 10px; border-radius: 10px;
background-color: transparent; background-color: transparent;
height: auto; height: auto;
@ -150,24 +152,37 @@
align-items: center; align-items: center;
padding: 0 50px 0 50px; padding: 0 50px 0 50px;
color:white;
} }
.card{ .card{
margin-top:40px !important; margin-top:40px !important;
box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%) !important;
-webkit-box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%) !important;
border-radius: 5px;
} }
main{ /* main{
background-attachment:fixed; background-attachment:fixed;
background-repeat: no-repeat; background-repeat: no-repeat;
background: linear-gradient(119deg, rgba(47, 82, 131, 1) 0%, rgba(29, 33, 59, 1) 34%, rgba(27, 54, 61, 1) 67%, rgba(58, 82, 116, 1) 100%) !important; background: linear-gradient(119deg, rgba(47, 82, 131, 1) 0%, rgba(29, 33, 59, 1) 34%, rgba(27, 54, 61, 1) 67%, rgba(58, 82, 116, 1) 100%) !important;
} }
*/
.card-header { .card-header {
padding: 0.75rem 1.25rem; padding: 0.75rem 1.25rem;
margin-bottom: 0; margin-bottom: 0;
background-color: rgb(66 122 207 / 44%); background: #16283f;
border-bottom: 1px solid rgba(0, 0, 0, 0.125); color:white;
}
#HeaderForQuestionType{
padding: 0.75rem 1.25rem;
background: #16283f;
color: white;
border-radius:5px;
box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%) !important;
-webkit-box-shadow: 0px 0px 13px 0px rgb(20 101 230 / 35%) !important;
} }
.badge { .badge {
@ -191,8 +206,18 @@
<div class="container pt-5"> <div class="container pt-5">
@* <h2>Questionnaire: @Model.Questionnaire.Title</h2> *@ @* <h2>Questionnaire: @Model.Questionnaire.Title</h2> *@
<h5 class="text-white">Response Details for @Model.UserName (@Model.UserEmail)</h5> <div class="card shadow-1">
<h5 class="text-success">Submitted on: <span id="localTime">@Model.SubmissionDate.ToString("yyyy-MM-ddTHH:mm:ss")</span></h5> <div class="card-header">
Respond from user
</div>
<div class="card-body">
<h6 class="font-weight-bold">Response Details for <span class="badge badge-dark"> @Model.UserName (@Model.UserEmail)</span></h6>
</div>
<div class="card-header">
<strong class="">Submitted on: <span id="localTime">@Model.SubmissionDate.ToString("yyyy-MM-ddTHH:mm:ss")</span></strong>
</div>
</div>
<script> <script>
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
var utcDate = document.getElementById('localTime').innerText; var utcDate = document.getElementById('localTime').innerText;
@ -204,7 +229,7 @@
@foreach (var detail in Model.ResponseDetails) @foreach (var detail in Model.ResponseDetails)
{ {
<div class="card mb-3" id="Errocard"> <div class="card mb-3" id="Errocard">
<div class="card-header"> <div class="card-header" id="HeaderForQuestionType">
Question Type:@detail.QuestionType.ToString() Question Type:@detail.QuestionType.ToString()
</div> </div>
<div class="card-body"> <div class="card-body">