diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index f2df4fc..fa2a045 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -83,9 +83,13 @@

Question 2

+ + + diff --git a/web/newWebsite/questions-main-class.js b/web/newWebsite/questions-main-class.js new file mode 100644 index 0000000..356d3e0 --- /dev/null +++ b/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 + }] + }; + } +} \ No newline at end of file diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index c4baf7f..0b19d5b 100644 --- a/web/newWebsite/questions-main.js +++ b/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 = ` -//

${item.name}

-//

${item.description}

-// `; -// 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); +