Merge branch 'main' of ssh://gitlab.fdmci.hva.nl/propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-3/qaajeeqiinii59

web/newWebsite/questions-chart-class.js

@@ -0,0 +1,27 @@
+class ChartConfigClass{
+    constructor(data, text){
+        this.data = data
+        this.text = text
+    }
+
+    get chartConfig() {
+        return{
+            type: 'pie',
+            data: this.data,
+            options: {
+                responsive: true,
+                legend: {
+                    position: 'top',
+                },
+                title: {
+                    display: true,
+                    text: this.text
+                },
+                animation: {
+                    animateScale: true,
+                    animateRotate: true
+                }
+            }
+        }
+    }
+}

web/newWebsite/questions-dashboard.html

@@ -47,7 +47,8 @@
 
         <!-- Add more questions and canvas elements as needed -->
     </div>
-    <script src="questions-main-class.js"></script>
+    <script src="questions-chart-class.js"></script>
+    <script src="questions-creation-class.js"></script>
     <script src="questions-main.js"></script>
 </body>
 </html>

web/newWebsite/questions-main.js

@@ -13,6 +13,8 @@ let questionOptionsDummy4 = ['really crowded','not at all', 'its fine', ];
 let dummydata5 = [30, 20, 20];
 let questionOptionsDummy5 = ['no','yes', 'decently'];
 
+let chartConfigArray = [];
+let textArray = [];
 
 let questionArray = [];
 let questionOptionsDummy = [];
@@ -26,113 +28,24 @@ for (let i = 0; i < 5; i++) {
 }
 
 
-const chartConfig1 = {
-    type: 'pie',
-    data: questionArray[0].questionData,
-    options: {
-        responsive: true,
-        legend: {
-            position: 'top',
-        },
-        title: {
-            display: true,
-            text: 'Question 1 Responses'
-        },
-        animation: {
-            animateScale: true,
-            animateRotate: true
-        }
-    }
-};
+for (let i = 0; i < 5; i++){
+    textArray.push('Question 1 Responses', 'Question 2 Responses', 'Question 3 Responses', 'Question 4 Responses', 'Question 5 Responses');
 
-const chartConfig2 = {
-    type: 'pie',
-    data: questionArray[1].questionData,
-    options: {
-        responsive: true,
-        legend: {
-            position: 'top',
-        },
-        title: {
-            display: true,
-            text: 'Question 2 Responses'
-        },
-        animation: {
-            animateScale: true,
-            animateRotate: true
-        }
-    }
-};
-
-const chartConfig3 = {
-    type: 'pie',
-    data: questionArray[2].questionData,
-    options: {
-        responsive: true,
-        legend: {
-            position: 'top',
-        },
-        title: {
-            display: true,
-            text: 'Question 3 Responses'
-        },
-        animation: {
-            animateScale: true,
-            animateRotate: true
-        }
-    }
-};
-
-const chartConfig4 = {
-    type: 'pie',
-    data: questionArray[3].questionData,
-    options: {
-        responsive: true,
-        legend: {
-            position: 'top',
-        },
-        title: {
-            display: true,
-            text: 'Question 4 Responses'
-        },
-        animation: {
-            animateScale: true,
-            animateRotate: true
-        }
-    }
-};
-
-const chartConfig5 = {
-    type: 'pie',
-    data: questionArray[4].questionData,
-    options: {
-        responsive: true,
-        legend: {
-            position: 'top',
-        },
-        title: {
-            display: true,
-            text: 'Question 5 Responses'
-        },
-        animation: {
-            animateScale: true,
-            animateRotate: true
-        }
-    }
-};
+    chartConfigArray.push(new ChartConfigClass(questionArray[i].questionData, textArray[i]));
+}
 
 // Create the charts
 const ctx1 = document.getElementById('chart1').getContext('2d');
-const myChart1 = new Chart(ctx1, chartConfig1);
+const myChart1 = new Chart(ctx1, chartConfigArray[0].chartConfig);
 
 const ctx2 = document.getElementById('chart2').getContext('2d');
-const myChart2 = new Chart(ctx2, chartConfig2);
+const myChart2 = new Chart(ctx2, chartConfigArray[1].chartConfig);
 
 const ctx3 = document.getElementById('chart3').getContext('2d');
-const myChart3 = new Chart(ctx3, chartConfig3);
+const myChart3 = new Chart(ctx3, chartConfigArray[2].chartConfig);
 
 const ctx4 = document.getElementById('chart4').getContext('2d');
-const myChart4 = new Chart(ctx4, chartConfig4);
+const myChart4 = new Chart(ctx4, chartConfigArray[3].chartConfig);
 
 const ctx5 = document.getElementById('chart5').getContext('2d');
-const myChart5 = new Chart(ctx5, chartConfig5);
+const myChart5 = new Chart(ctx5, chartConfigArray[4].chartConfig);