diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index 9cd18e8..6e267a1 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -4,12 +4,12 @@ - + Graphs - + +
+

Question 1

+ + +

Question 2

+ + +

Question 3

+ + + +
+ + \ No newline at end of file diff --git a/web/newWebsite/questions-main-class.js b/web/newWebsite/questions-main-class.js new file mode 100644 index 0000000..a1e301b --- /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 e69de29..747707a 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -0,0 +1,139 @@ +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 + }] + }; + } +} + +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 + }] +}; + +let dummydata = [30, 20, 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: [{ + 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 + } + } +}; + +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'); +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); + diff --git a/web/newWebsite/styles/questions-dashboard-styles.css b/web/newWebsite/styles/questions-dashboard-styles.css index 966d901..eba538a 100644 --- a/web/newWebsite/styles/questions-dashboard-styles.css +++ b/web/newWebsite/styles/questions-dashboard-styles.css @@ -6,15 +6,15 @@ body { padding-top: 5vw; display: flex; - background-color: #afafaf; + background-color: #dbd7d7; margin: 0; } .navbar { - background-color: #333; + background-color: #3d898c; height: 60px; display: flex; - align-items: center; + align-items: center ; padding: 0 20px; position: fixed; /* Fix the navbar at the top of the page */ top: 0; /* Position it at the very top */ @@ -39,4 +39,20 @@ color: #fff; text-decoration: none; font-size: 18px; - } \ No newline at end of file + } + + #data-container { + width: 80%; + margin: 0 auto; + 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