trying to work with classes, but script works for time being.

web/newWebsite/questions-dashboard.html

@@ -83,9 +83,13 @@
         <h2>Question 2</h2>
         <canvas id="chart2"></canvas>
 
+        <!-- <h2>Question 3</h2>
+        <canvas id="chart3"></canvas> -->
+
         <!-- Add more questions and canvas elements as needed -->
     </div>
 
     <script src="questions-main.js"></script>
+    <!-- <script src="questions-main-class.js"></script> -->
 </body>
 </html>

web/newWebsite/questions-main-class.js

@@ -0,0 +1,27 @@
+class QuestionCreationClass {
+    constructor(data, label) {
+        this.data = data;
+        this.label = label;
+    }
+
+    get questionData() {
+        return {
+            labels: this.label,
+            datasets: [{
+                label: 'Responses',
+                data: this.data,
+                backgroundColor: [
+                    'rgba(255, 99, 132, 0.2)',
+                    'rgba(54, 162, 235, 0.2)',
+                    'rgba(255, 206, 86, 0.2)'
+                ],
+                borderColor: [
+                    'rgba(255, 99, 132, 1)',
+                    'rgba(54, 162, 235, 1)',
+                    'rgba(255, 206, 86, 1)'
+                ],
+                borderWidth: 1
+            }]
+        };
+    }
+}

web/newWebsite/questions-main.js

@@ -1,76 +1,3 @@
-
-// // Sample data
-// const dataItems = [
-//     { id: 1, name: "Question 1", description: "Description for Item 1" },
-//     { id: 2, name: "Question 2", description: "Description for Item 2" },
-// ];
-
-// // Function to display data items on the webpage
-// function displayDataItems() {
-//     const container = document.getElementById("data-container");
-
-//     // Clear previous content
-//     container.innerHTML = "";
-
-//     // Loop through data items and create HTML elements
-//     dataItems.forEach(item => {
-//         const itemElement = document.createElement("div");
-//         itemElement.classList.add("data-item");
-//         itemElement.innerHTML = `
-//             <h2>${item.name}</h2>
-//             <p>${item.description}</p>
-//         `;
-//         container.appendChild(itemElement);
-//     });
-// }
-
-// // Call the function to display data items when the page loads
-// window.onload = displayDataItems;
-
-// // Sample data for the questionnaire results
-// const questionnaireData = {
-//     labels: ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'],
-//     datasets: [{
-//         label: 'Responses',
-//         data: [20, 35, 15, 10, 20], // Sample response counts for each option
-//         backgroundColor: [
-//             'rgba(255, 99, 132, 0.2)',
-//             'rgba(54, 162, 235, 0.2)',
-//             'rgba(255, 206, 86, 0.2)',
-//             'rgba(75, 192, 192, 0.2)',
-//             'rgba(153, 102, 255, 0.2)'
-//         ],
-//         borderColor: [
-//             'rgba(255, 99, 132, 1)',
-//             'rgba(54, 162, 235, 1)',
-//             'rgba(255, 206, 86, 1)',
-//             'rgba(75, 192, 192, 1)',
-//             'rgba(153, 102, 255, 1)'
-//         ],
-//         borderWidth: 1
-//     }]
-// };
-
-// // Chart configuration
-// const chartConfig = {
-//     type: 'bar',
-//     data: questionnaireData,
-//     options: {
-//         scales: {
-//             yAxes: [{
-//                 ticks: {
-//                     beginAtZero: true
-//                 }
-//             }]
-//         }
-//     }
-// };
-
-// // Create the chart
-// const ctx = document.getElementById('chart').getContext('2d');
-// const myChart = new Chart(ctx, chartConfig);
-
-// Sample data for the questionnaire results
 const question1Data = {
     labels: ['Option A', 'Option B', 'Option C'],
     datasets: [{
@@ -90,6 +17,11 @@ const question1Data = {
     }]
 };
 
+// let dummydata = [40, 30, 20];
+// let questionOptionsDummy = ['Option A', 'Option B', 'Option C'];
+
+// const question3Data = new QuestionCreationClass(dummydata, questionOptionsDummy);
+
 const question2Data = {
     labels: ['Option A', 'Option B', 'Option C'],
     datasets: [{
@@ -147,6 +79,24 @@ const chartConfig2 = {
         }
     }
 };
+// const chartConfig3 = {
+//     type: 'pie',
+//     data: question3Data.questionData(),
+//     options: {
+//         responsive: true,
+//         legend: {
+//             position: 'top',
+//         },
+//         title: {
+//             display: true,
+//             text: 'Question 3 Responses'
+//         },
+//         animation: {
+//             animateScale: true,
+//             animateRotate: true
+//         }
+//     }
+// };
 
 // Create the charts
 const ctx1 = document.getElementById('chart1').getContext('2d');
@@ -154,3 +104,7 @@ const myChart1 = new Chart(ctx1, chartConfig1);
 
 const ctx2 = document.getElementById('chart2').getContext('2d');
 const myChart2 = new Chart(ctx2, chartConfig2);
+
+// const ctx3 = document.getElementById('chart3').getContext('2d');
+// const myChart3 = new Chart(ctx3, chartConfig3);
+