Smikkelbakje/J1B3-Sensor-boxes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

questions awnsers page updated with variables and dummydata, class now on sepperate file.

Browse Source
This commit is contained in:
Bram Barbieri
2024-04-01 12:46:08 +02:00
parent 76532c538b
commit 81b81683c9
4 changed files with 97 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/brainstorm/Questions Enquete.md
View File

@@ -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

15
web/newWebsite/questions-dashboard.html
View File

@@ -30,19 +30,24 @@
<body>
<div class="chart-container">
<h2>Question 1</h2>
<h2>Question 1: How clean are the toilets?</h2>
<canvas id="chart1"></canvas>
<h2>Question 2</h2>
<h2>Question 2: How clean is the study area?</h2>
<canvas id="chart2"></canvas>
<h2>Question 3</h2>
<h2>Question 3: What do you think of the temperature in the study area?</h2>
<canvas id="chart3"></canvas>
<h2>Question 4: How crowded would you say the study area is?</h2>
<canvas id="chart4"></canvas>
<h2>Question 5: Is there enough help available on the 5th floor?</h2>
<canvas id="chart5"></canvas>
<!-- Add more questions and canvas elements as needed -->
</div>
<script src="questions-main.js"></script>
<script src="questions-main-class.js"></script>
<script src="questions-main.js"></script>
</body>
</html>

52
web/newWebsite/questions-main-class.js
View File

@@ -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
// }]
// };
// }
// }
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
}]
};
}
}

128
web/newWebsite/questions-main.js
View File

@@ -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);