Refactor questions-dashboard.html and questions-dashboard-styles.css
This commit is contained in:
@@ -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>
|
||||||
|
@@ -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;
|
||||||
|
Reference in New Issue
Block a user