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

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

@@ -4,6 +4,7 @@
} }
body { body {
flex-direction: row;
padding-top: 5vw; padding-top: 5vw;
display: flex; display: flex;
background-color: #dbd7d7; background-color: #dbd7d7;
@@ -42,16 +43,27 @@
} }
#data-container { #data-container {
width: 80%;
margin: 0 auto;
padding: 20px; padding: 20px;
background-color: #f5f5f5; background-color: #f5f5f5;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.chart-container { .chart-container {
width: 400px; justify-content: center;
margin: 50px auto; 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 { canvas {
margin-bottom: 20px; margin-bottom: 20px;