diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index 53d6b9c..f2df4fc 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -1,4 +1,4 @@ - + + + + + + + + + + + Graphs + + + + + + + + + +
+

Question 1

+ + +

Question 2

+ + + +
+ + + + diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index 5ed0c35..c4baf7f 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -1,28 +1,156 @@ -// Sample data -const dataItems = [ - { id: 1, name: "Item 1", description: "Description for Item 1" }, - { id: 2, name: "Item 2", description: "Description for Item 2" }, - { id: 3, name: "Item 3", description: "Description for Item 3" } -]; -// Function to display data items on the webpage -function displayDataItems() { - const container = document.getElementById("data-container"); +// // Sample data +// const dataItems = [ +// { id: 1, name: "Question 1", description: "Description for Item 1" }, +// { id: 2, name: "Question 2", description: "Description for Item 2" }, +// ]; - // Clear previous content - container.innerHTML = ""; +// // Function to display data items on the webpage +// function displayDataItems() { +// const container = document.getElementById("data-container"); - // 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); - }); -} +// // Clear previous content +// container.innerHTML = ""; -// Call the function to display data items when the page loads -window.onload = displayDataItems; +// // 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: [{ + label: 'Responses', + data: [40, 30, 20], + 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 + }] +}; + +const question2Data = { + labels: ['Option A', 'Option B', 'Option C'], + datasets: [{ + label: 'Responses', + data: [25, 35, 40], + 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 + }] +}; + +// Chart configurations for each question +const chartConfig1 = { + type: 'pie', + data: question1Data, + options: { + responsive: true, + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Question 1 Responses' + }, + animation: { + animateScale: true, + animateRotate: true + } + } +}; + +const chartConfig2 = { + type: 'pie', + data: question2Data, + options: { + responsive: true, + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Question 2 Responses' + }, + animation: { + animateScale: true, + animateRotate: true + } + } +}; + +// Create the charts +const ctx1 = document.getElementById('chart1').getContext('2d'); +const myChart1 = new Chart(ctx1, chartConfig1); + +const ctx2 = document.getElementById('chart2').getContext('2d'); +const myChart2 = new Chart(ctx2, chartConfig2); diff --git a/web/newWebsite/styles/questions-dashboard-styles.css b/web/newWebsite/styles/questions-dashboard-styles.css index 29fd8ce..eba538a 100644 --- a/web/newWebsite/styles/questions-dashboard-styles.css +++ b/web/newWebsite/styles/questions-dashboard-styles.css @@ -6,7 +6,7 @@ body { padding-top: 5vw; display: flex; - background-color: #afafaf; + background-color: #dbd7d7; margin: 0; } @@ -47,4 +47,12 @@ padding: 20px; background-color: #f5f5f5; border: 1px solid #ccc; +} + +.chart-container { + width: 80%; + margin: 20px auto; +} +canvas { + margin-bottom: 20px; } \ No newline at end of file