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

Refactor questions-dashboard.html and questions-dashboard-styles.css

Browse Source
This commit is contained in:
sietse jonker
2024-04-01 14:35:30 +02:00
parent 52c615eba3
commit 650032fced
2 changed files with 26 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

20
web/newWebsite/styles/questions-dashboard-styles.css
View File

@@ -4,6 +4,7 @@
}
body {
flex-direction: row;
padding-top: 5vw;
display: flex;
background-color: #dbd7d7;
@@ -42,16 +43,27 @@
}
#data-container {
width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
border: 1px solid #ccc;
}
.chart-container {
width: 400px;
margin: 50px auto;
justify-content: center;
align-self: start;
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
}
.chart {
width: 30%;
margin: 20px;
padding: 20px;
background-color: #dbd7d7;
border: 3px solid #000;
border-radius: 30px;
}
canvas {
margin-bottom: 20px;