survey analyzer completed for all types of questions
This commit is contained in:
Qais Yousuf
parent
5b49528a33
commit
644893ded8
4 changed files with 169 additions and 67 deletions
|
|
@ -91,22 +91,11 @@
|
|||
</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">
|
||||
@foreach (var question in Model.Questions)
|
||||
{
|
||||
<div class="text-center">
|
||||
|
||||
<!-- Chart container for all questions -->
|
||||
<div id="chart_div_@question.Id" class="Errocard m-5 p-3" style="width:auto; height: 300px;"></div>
|
||||
|
||||
|
|
@ -119,8 +108,8 @@
|
|||
}
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
||||
<script type="text/javascript">
|
||||
|
|
@ -128,10 +117,10 @@
|
|||
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()';
|
||||
@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;
|
||||
|
||||
|
|
@ -150,25 +139,35 @@
|
|||
'#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]);
|
||||
var colorIndex = 0;
|
||||
</text>
|
||||
}
|
||||
<text>
|
||||
var options = {
|
||||
if (question.Value.Type ==QuestionType.Text || question.Value.Type ==QuestionType.Slider || question.Value.Type ==QuestionType.Open_ended)
|
||||
{
|
||||
@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)',
|
||||
is3D: true,
|
||||
'titleTextStyle': { color: 'blue', fontSize: 15, bold: true },
|
||||
// 'colors': colors
|
||||
'titleTextStyle': { color: '#17a2b8', fontSize: 12, bold: true },
|
||||
'colors': colors
|
||||
};
|
||||
|
||||
if (chartContainer) {
|
||||
|
|
@ -178,28 +177,107 @@
|
|||
|
||||
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>
|
||||
@foreach (var answer in question.Value.Answers.Where(a => !string.IsNullOrEmpty(a.Text)))
|
||||
{
|
||||
<text>
|
||||
var color = colors[colorIndex % colors.length];
|
||||
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++;
|
||||
</text>
|
||||
}
|
||||
imgContainer.innerHTML = imagesHtml;
|
||||
}
|
||||
imgContainer.innerHTML = imagesHtml;
|
||||
}
|
||||
</text>
|
||||
</text>
|
||||
}
|
||||
}
|
||||
}
|
||||
</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 {
|
||||
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
|
||||
|
|
|
|||
|
|
@ -16,14 +16,13 @@
|
|||
|
||||
<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">
|
||||
<tr>
|
||||
<th><input type="checkbox" onclick="selectAll(this)" /></th> <!-- Master checkbox -->
|
||||
<th>Id</th>
|
||||
<th>Questionnaire</th>
|
||||
|
||||
<th>Action</th>
|
||||
<th class="text-end">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="w-100">
|
||||
|
|
@ -34,8 +33,8 @@
|
|||
<td>@item.Id</td>
|
||||
<td>@item.Title</td>
|
||||
|
||||
<td class="">
|
||||
<a asp-action="Analysis" asp-route-id="@item.Id" class="btn btn-warning btn-sm">Details</a>
|
||||
<td class="text-end">
|
||||
<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>
|
||||
</tr>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<th>UserName</th>
|
||||
<th>UserEmail</th>
|
||||
<th>Submission Date</th>
|
||||
<th>Action</th>
|
||||
<th class="text-end">Action</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="w-100">
|
||||
|
|
@ -40,8 +40,8 @@
|
|||
<td>@item.UserName</td>
|
||||
<td>@item.UserEmail</td>
|
||||
<td>@item.SubmissionDate</td>
|
||||
<td>
|
||||
<a asp-action="ViewResponse" asp-route-id="@item.Id" class="btn btn-warning btn-sm">Details</a>
|
||||
<td class="text-end">
|
||||
<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>
|
||||
</tr>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -106,8 +106,8 @@
|
|||
background: #d3d3d3; /* Background of the slider */
|
||||
outline: none; /* Removes the outline */
|
||||
opacity: 0.7; /* Slider opacity */
|
||||
-webkit-transition: .2s; /* Smooth transitions */
|
||||
transition: opacity .2s;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.slider:disabled {
|
||||
|
|
@ -141,8 +141,10 @@
|
|||
-ms-flex-direction: column;
|
||||
flex-direction: row;
|
||||
word-wrap: break-word;
|
||||
box-shadow: 0px 0px 8px -1px rgba(20,101,230,1);
|
||||
-webkit-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 13px 0px rgb(20 101 230 / 35%);
|
||||
border-radius: 5px;
|
||||
|
||||
border-radius: 10px;
|
||||
background-color: transparent;
|
||||
height: auto;
|
||||
|
|
@ -150,24 +152,37 @@
|
|||
align-items: center;
|
||||
padding: 0 50px 0 50px;
|
||||
|
||||
color:white;
|
||||
|
||||
}
|
||||
.card{
|
||||
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-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;
|
||||
}
|
||||
|
||||
*/
|
||||
.card-header {
|
||||
padding: 0.75rem 1.25rem;
|
||||
margin-bottom: 0;
|
||||
background-color: rgb(66 122 207 / 44%);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
|
||||
background: #16283f;
|
||||
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 {
|
||||
|
|
@ -191,8 +206,18 @@
|
|||
|
||||
<div class="container pt-5">
|
||||
@* <h2>Questionnaire: @Model.Questionnaire.Title</h2> *@
|
||||
<h5 class="text-white">Response Details for @Model.UserName (@Model.UserEmail)</h5>
|
||||
<h5 class="text-success">Submitted on: <span id="localTime">@Model.SubmissionDate.ToString("yyyy-MM-ddTHH:mm:ss")</span></h5>
|
||||
<div class="card shadow-1">
|
||||
<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>
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var utcDate = document.getElementById('localTime').innerText;
|
||||
|
|
@ -204,7 +229,7 @@
|
|||
@foreach (var detail in Model.ResponseDetails)
|
||||
{
|
||||
<div class="card mb-3" id="Errocard">
|
||||
<div class="card-header">
|
||||
<div class="card-header" id="HeaderForQuestionType">
|
||||
Question Type:@detail.QuestionType.ToString()
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue