446 lines
17 KiB
Text
446 lines
17 KiB
Text
@using Newtonsoft.Json
|
|
@model ResponseQuestionnaireWithUsersViewModel
|
|
|
|
@{
|
|
ViewData["Title"] = "Detailed Survey Analysis";
|
|
}
|
|
|
|
<style>
|
|
.progress {
|
|
position: relative;
|
|
height: 30px; /* Increased height for better visibility */
|
|
}
|
|
|
|
.progress-text {
|
|
position: absolute;
|
|
width: 100%;
|
|
text-align: center;
|
|
color: black; /* Ensures text is visible on light backgrounds */
|
|
font-weight: bold;
|
|
line-height: 30px; /* Align text vertically */
|
|
}
|
|
|
|
#Errocard{
|
|
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;
|
|
background-color: 0px 0px 8px -1px rgba(20,101,230,1);
|
|
height: auto;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
.Errocard {
|
|
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;
|
|
|
|
}
|
|
|
|
/* rect{
|
|
|
|
border-radius:5px !important;
|
|
background-color:transparent !important;
|
|
} */
|
|
|
|
body {
|
|
font-family: "Poppins", Arial, sans-serif;
|
|
font-size: 14px;
|
|
line-height: 1.8;
|
|
font-weight: normal;
|
|
background: #ffffff;
|
|
color: gray;
|
|
}
|
|
|
|
img{
|
|
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;
|
|
background-color: 0px 0px 8px -1px rgba(20,101,230,1);
|
|
height: auto;
|
|
}
|
|
</style>
|
|
|
|
<div class="container mt-5 p-5">
|
|
|
|
|
|
<div class="card" id="Errocard">
|
|
<div class="card-header">
|
|
Survey Analyzer
|
|
</div>
|
|
<div class="card-body">
|
|
<h5 class="card-title font-weight-bolder ">@Model.Title</h5>
|
|
<p class="card-text">@Html.Raw(Model.Description)</p>
|
|
|
|
</div>
|
|
<div class="card-footer">
|
|
<div class="font-weight-bolder">
|
|
|
|
Total user respond <span class="badge text-bg-primary">@Model.ParticipantCount</span><br />
|
|
|
|
Participated users
|
|
@foreach (var item in Model.Users)
|
|
{
|
|
<span class="badge text-bg-primary">@item.UserName</span>
|
|
|
|
}
|
|
</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>
|
|
|
|
<!-- Image container only for image questions -->
|
|
@if (question.Type == QuestionType.Image)
|
|
{
|
|
<div id="img_div_@question.Id" class="Errocard m-5 p-3" style="width:auto; height: auto;"></div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
@* @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', 'bar','line','table'] }); // Ensure 'bar' package is loaded if using BarChart
|
|
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()';
|
|
console.log('Type:', type); // Debug output to check type
|
|
var chartContainer = document.getElementById('chart_div_@question.Value.Id');
|
|
var chart; // Declare chart variable here for scope
|
|
|
|
var data = new google.visualization.DataTable();
|
|
data.addColumn('string', 'Option');
|
|
data.addColumn('number', 'Count');
|
|
|
|
</text>
|
|
if (question.Value.Type == QuestionType.Text || question.Value.Type == QuestionType.Slider || question.Value.Type == QuestionType.Open_ended)
|
|
{
|
|
<text>
|
|
console.log('Initializing Bar Chart'); // Debug output
|
|
</text>
|
|
@foreach (var item in question.Value.SelectedText)
|
|
{
|
|
<text>
|
|
data.addRow(['@Html.Raw(item)', @question.Value.Answers]);
|
|
</text>
|
|
}
|
|
<text>
|
|
chart = new google.visualization.Table(chartContainer);
|
|
</text>
|
|
} else {
|
|
<text>
|
|
console.log('Initializing Pie Chart'); // Debug output
|
|
</text>
|
|
@foreach (var answer in question.Value.Answers)
|
|
{
|
|
<text>
|
|
data.addRow(['@Html.Raw(answer.Text)', @answer.Count]);
|
|
</text>
|
|
}
|
|
<text>
|
|
chart = new google.visualization.PieChart(chartContainer);
|
|
</text>
|
|
}
|
|
<text>
|
|
var options = {
|
|
'title': 'Question @(question.Index + 1): @Html.Raw(question.Value.Text)',
|
|
is3D: type !== "Text" && type !== "Slider" && type !== "Open_ended", // Only use 3D for Pie Charts
|
|
'titleTextStyle': { color: '#17a2b8', fontSize: 12, bold: true },
|
|
'colors': ['#cc0000', '#00cc00', '#0000cc', '#cccc00', '#00cccc', '#cc00cc', '#008080', '#808000', '#800080', '#800000', '#808080', '#404040']
|
|
};
|
|
|
|
chart.draw(data, options); // Draw chart outside conditional blocks
|
|
</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');
|
|
var colorIndex = 0;
|
|
</text>
|
|
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>
|
|
}
|
|
<text>
|
|
// Initialize Bar Chart for Text, Slider, or Open-ended questions
|
|
var chart = new google.visualization.BarChart(chartContainer);
|
|
</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: '#17a2b8', fontSize: 12, bold: true },
|
|
'colors': colors,
|
|
'pieSliceText': 'percentage', // Display percentages on the chart slices
|
|
'tooltip': { text: 'percentage' } // Configure tooltip to show percentage
|
|
};
|
|
|
|
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];
|
|
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;
|
|
}
|
|
</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>
|
|
<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 data = new google.visualization.DataTable();
|
|
data.addColumn('string', 'Option');
|
|
data.addColumn('number', 'Count');
|
|
data.addRows([
|
|
</text>
|
|
@foreach (var answer in question.Value.Answers)
|
|
{
|
|
<text>['@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 }
|
|
};
|
|
|
|
if (chartContainer) {
|
|
var chart = new google.visualization.PieChart(chartContainer);
|
|
chart.draw(data, options);
|
|
}
|
|
|
|
if (imgContainer) {
|
|
var imagesHtml = '';
|
|
@foreach (var answer in question.Value.Answers.Where(a => !string.IsNullOrEmpty(a.Text)))
|
|
{
|
|
<text>imagesHtml += '<img src="@answer.Text" style="max-width:20%; height:auto; display: block; margin: 20px auto;">'; </text>
|
|
}
|
|
imgContainer.innerHTML = imagesHtml;
|
|
}
|
|
</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)
|
|
{
|
|
<text>
|
|
var data = new google.visualization.DataTable();
|
|
data.addColumn('string', 'Option');
|
|
data.addColumn('number', 'Count');
|
|
data.addRows([
|
|
@foreach (var answer in question.Answers)
|
|
{
|
|
<text>['@Html.Raw(answer.Text)', @answer.Count], </text>
|
|
}
|
|
]);
|
|
|
|
// Set chart options
|
|
var options = {
|
|
'title': 'Question: @Html.Raw(question.Text)',
|
|
is3D: true,
|
|
|
|
};
|
|
|
|
// Select the right container for the chart
|
|
var container = document.getElementById('chart_div_@question.Id');
|
|
if (container) {
|
|
var chart = new google.visualization.PieChart(container);
|
|
chart.draw(data, options);
|
|
}
|
|
</text>
|
|
}
|
|
}
|
|
</script>
|
|
} *@
|