From 644893ded8ea1823cd67c5d973e55a0401985f36 Mon Sep 17 00:00:00 2001
From: Qais Yousuf <mr.qais.yousuf@gmail.com>
Date: Tue, 30 Apr 2024 21:27:33 +0200
Subject: [PATCH] survey analyzer completed for all types of questions

---
 .../Views/SurveyAnalysis/Analysis.cshtml      | 170 +++++++++++++-----
 .../Admin/Views/SurveyAnalysis/Index.cshtml   |  11 +-
 .../Admin/Views/UserResponse/Index.cshtml     |   6 +-
 .../Views/UserResponse/ViewResponse.cshtml    |  49 +++--
 4 files changed, 169 insertions(+), 67 deletions(-)

diff --git a/Web/Areas/Admin/Views/SurveyAnalysis/Analysis.cshtml b/Web/Areas/Admin/Views/SurveyAnalysis/Analysis.cshtml
index d3f21d2..2d15fb8 100644
--- a/Web/Areas/Admin/Views/SurveyAnalysis/Analysis.cshtml
+++ b/Web/Areas/Admin/Views/SurveyAnalysis/Analysis.cshtml
@@ -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>
diff --git a/Web/Areas/Admin/Views/SurveyAnalysis/Index.cshtml b/Web/Areas/Admin/Views/SurveyAnalysis/Index.cshtml
index 34cc846..9d8013e 100644
--- a/Web/Areas/Admin/Views/SurveyAnalysis/Index.cshtml
+++ b/Web/Areas/Admin/Views/SurveyAnalysis/Index.cshtml
@@ -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">
@@ -33,9 +32,9 @@
                                 <td><input type="checkbox" name="ids" value="@item.Id" /></td>
                                 <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>
                         }
diff --git a/Web/Areas/Admin/Views/UserResponse/Index.cshtml b/Web/Areas/Admin/Views/UserResponse/Index.cshtml
index 8a3bcef..5637690 100644
--- a/Web/Areas/Admin/Views/UserResponse/Index.cshtml
+++ b/Web/Areas/Admin/Views/UserResponse/Index.cshtml
@@ -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>
                             }
diff --git a/Web/Areas/Admin/Views/UserResponse/ViewResponse.cshtml b/Web/Areas/Admin/Views/UserResponse/ViewResponse.cshtml
index bf3e75d..933ef97 100644
--- a/Web/Areas/Admin/Views/UserResponse/ViewResponse.cshtml
+++ b/Web/Areas/Admin/Views/UserResponse/ViewResponse.cshtml
@@ -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">