Merge branch 'main' of ssh://gitlab.fdmci.hva.nl/propedeuse-hbo-ict/onderwijs/2023-2024/out-a-se-ti/blok-3/qaajeeqiinii59
This commit is contained in:
@@ -4,12 +4,12 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<link rel="stylesheet" href="styles/graph-styles.css">
|
<link rel="stylesheet" href="styles/questions-dashboard-styles.css">
|
||||||
<title>Graphs</title>
|
<title>Graphs</title>
|
||||||
<script src="https://cdn.plot.ly/plotly-latest.min.js" charset="utf-8"></script>
|
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<nav class="navbar">
|
<nav class="navbar">
|
||||||
@@ -29,6 +29,20 @@
|
|||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
<div class="chart-container">
|
||||||
|
<h2>Question 1</h2>
|
||||||
|
<canvas id="chart1"></canvas>
|
||||||
|
|
||||||
|
<h2>Question 2</h2>
|
||||||
|
<canvas id="chart2"></canvas>
|
||||||
|
|
||||||
|
<h2>Question 3</h2>
|
||||||
|
<canvas id="chart3"></canvas>
|
||||||
|
|
||||||
|
<!-- Add more questions and canvas elements as needed -->
|
||||||
|
</div>
|
||||||
|
|
||||||
<script src="questions-main.js"></script>
|
<script src="questions-main.js"></script>
|
||||||
|
<script src="questions-main-class.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
27
web/newWebsite/questions-main-class.js
Normal file
27
web/newWebsite/questions-main-class.js
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
// 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
|
||||||
|
// }]
|
||||||
|
// };
|
||||||
|
// }
|
||||||
|
// }
|
@@ -0,0 +1,139 @@
|
|||||||
|
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
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
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 dummydata = [30, 20, 20];
|
||||||
|
let questionOptionsDummy = ['Option A', 'Option B', 'Option C'];
|
||||||
|
|
||||||
|
const question3Data = new QuestionCreationClass(dummydata, questionOptionsDummy);
|
||||||
|
|
||||||
|
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
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
|
||||||
|
// Chart configurations for each question
|
||||||
|
const chartConfig1 = {
|
||||||
|
type: 'pie',
|
||||||
|
data: question1Data,
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
legend: {
|
||||||
|
position: 'top',
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Question 1 Responses'
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
animateScale: true,
|
||||||
|
animateRotate: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const chartConfig2 = {
|
||||||
|
type: 'pie',
|
||||||
|
data: question2Data,
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
legend: {
|
||||||
|
position: 'top',
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Question 2 Responses'
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
animateScale: true,
|
||||||
|
animateRotate: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const chartConfig3 = {
|
||||||
|
type: 'pie',
|
||||||
|
data: question3Data.questionData,
|
||||||
|
options: {
|
||||||
|
responsive: true,
|
||||||
|
legend: {
|
||||||
|
position: 'top',
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
display: true,
|
||||||
|
text: 'Question 3 Responses'
|
||||||
|
},
|
||||||
|
animation: {
|
||||||
|
animateScale: true,
|
||||||
|
animateRotate: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Create the charts
|
||||||
|
const ctx1 = document.getElementById('chart1').getContext('2d');
|
||||||
|
const myChart1 = new Chart(ctx1, chartConfig1);
|
||||||
|
|
||||||
|
const ctx2 = document.getElementById('chart2').getContext('2d');
|
||||||
|
const myChart2 = new Chart(ctx2, chartConfig2);
|
||||||
|
|
||||||
|
const ctx3 = document.getElementById('chart3').getContext('2d');
|
||||||
|
const myChart3 = new Chart(ctx3, chartConfig3);
|
||||||
|
|
||||||
|
@@ -6,15 +6,15 @@
|
|||||||
body {
|
body {
|
||||||
padding-top: 5vw;
|
padding-top: 5vw;
|
||||||
display: flex;
|
display: flex;
|
||||||
background-color: #afafaf;
|
background-color: #dbd7d7;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar {
|
.navbar {
|
||||||
background-color: #333;
|
background-color: #3d898c;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center ;
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
position: fixed; /* Fix the navbar at the top of the page */
|
position: fixed; /* Fix the navbar at the top of the page */
|
||||||
top: 0; /* Position it at the very top */
|
top: 0; /* Position it at the very top */
|
||||||
@@ -39,4 +39,20 @@
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#data-container {
|
||||||
|
width: 80%;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chart-container {
|
||||||
|
width: 80%;
|
||||||
|
margin: 20px auto;
|
||||||
|
}
|
||||||
|
canvas {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
Reference in New Issue
Block a user