diff --git a/docs/brainstorm/Questions Enquete.md b/docs/brainstorm/Questions Enquete.md index 5fc8bc8..e32bd27 100644 --- a/docs/brainstorm/Questions Enquete.md +++ b/docs/brainstorm/Questions Enquete.md @@ -9,7 +9,7 @@ Questions shouldn't be able to measure using sensors. 3 possible answers. - How clean is the study area? (clean, normal, disgusting). - What do you think of the temperature in the study area? (hot, perfect, cold). - How crowded would you say the study area is?(not at all, its fine, really crowded). -- Is there enough help available? (no, decently, yes). +- Is there enough help available on the 5th floor? (no, decently, yes). ### Feedback questions diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index 6e267a1..46dad55 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -30,19 +30,24 @@
-

Question 1

+

Question 1: How clean are the toilets?

-

Question 2

+

Question 2: How clean is the study area?

-

Question 3

+

Question 3: What do you think of the temperature in the study area?

+

Question 4: How crowded would you say the study area is?

+ + +

Question 5: Is there enough help available on the 5th floor?

+ +
- - + \ No newline at end of file diff --git a/web/newWebsite/questions-main-class.js b/web/newWebsite/questions-main-class.js index a1e301b..356d3e0 100644 --- a/web/newWebsite/questions-main-class.js +++ b/web/newWebsite/questions-main-class.js @@ -1,27 +1,27 @@ -// class QuestionCreationClass { -// constructor(data, label) { -// this.data = data; -// this.label = label; -// } +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 + 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 747707a..145523f 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -1,78 +1,27 @@ -class QuestionCreationClass { - constructor(data, label) { - this.data = data; - this.label = label; - } +let dummydata1 = [40, 30, 20]; +let questionOptionsDummy1 = ['disgusting','clean', 'fine' ]; - 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 - }] - }; - } -} +let dummydata2 = [25, 35, 40]; +let questionOptionsDummy2 = ['Option A', 'Option B', 'Option C']; -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 dummydata3 = [30, 20, 20]; +let questionOptionsDummy3 = ['Option A', 'Option B', 'Option C']; -let dummydata = [30, 20, 20]; -let questionOptionsDummy = ['Option A', 'Option B', 'Option C']; +let dummydata4 = [30, 20, 20]; +let questionOptionsDummy4 = ['Option A', 'Option B', 'Option C']; -const question3Data = new QuestionCreationClass(dummydata, questionOptionsDummy); +let dummydata5 = [30, 20, 20]; +let questionOptionsDummy5 = ['Option A', 'Option B', 'Option C']; -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 - }] -}; +const question1Data = new QuestionCreationClass(dummydata1,questionOptionsDummy1) +const question2Data = new QuestionCreationClass(dummydata2,questionOptionsDummy2) +const question3Data = new QuestionCreationClass(dummydata3, questionOptionsDummy3); +const question4Data = new QuestionCreationClass(dummydata4, questionOptionsDummy4); +const question5Data = new QuestionCreationClass(dummydata5, questionOptionsDummy5); -// Chart configurations for each question const chartConfig1 = { type: 'pie', - data: question1Data, + data: question1Data.questionData, options: { responsive: true, legend: { @@ -91,7 +40,7 @@ const chartConfig1 = { const chartConfig2 = { type: 'pie', - data: question2Data, + data: question2Data.questionData, options: { responsive: true, legend: { @@ -127,6 +76,44 @@ const chartConfig3 = { } }; +const chartConfig4 = { + type: 'pie', + data: question4Data.questionData, + options: { + responsive: true, + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Question 4 Responses' + }, + animation: { + animateScale: true, + animateRotate: true + } + } +}; + +const chartConfig5 = { + type: 'pie', + data: question5Data.questionData, + options: { + responsive: true, + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Question 5 Responses' + }, + animation: { + animateScale: true, + animateRotate: true + } + } +}; + // Create the charts const ctx1 = document.getElementById('chart1').getContext('2d'); const myChart1 = new Chart(ctx1, chartConfig1); @@ -137,3 +124,8 @@ const myChart2 = new Chart(ctx2, chartConfig2); const ctx3 = document.getElementById('chart3').getContext('2d'); const myChart3 = new Chart(ctx3, chartConfig3); +const ctx4 = document.getElementById('chart4').getContext('2d'); +const myChart4 = new Chart(ctx4, chartConfig4); + +const ctx5 = document.getElementById('chart5').getContext('2d'); +const myChart5 = new Chart(ctx5, chartConfig5);