From 074406aec57a4ead2b28d93d78cdfea8b46adcf1 Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Sun, 31 Mar 2024 14:11:33 +0200 Subject: [PATCH 1/5] kleine update, pagina voor questions beginning template --- web/newWebsite/questions-dashboard.html | 5 +++- web/newWebsite/questions-main.js | 28 +++++++++++++++++++ .../styles/questions-dashboard-styles.css | 14 ++++++++-- 3 files changed, 43 insertions(+), 4 deletions(-) diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index 9cd18e8..53d6b9c 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -4,7 +4,7 @@ - + Graphs @@ -30,5 +30,8 @@ +
+
+ \ No newline at end of file diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index e69de29..5ed0c35 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -0,0 +1,28 @@ +// Sample data +const dataItems = [ + { id: 1, name: "Item 1", description: "Description for Item 1" }, + { id: 2, name: "Item 2", description: "Description for Item 2" }, + { id: 3, name: "Item 3", description: "Description for Item 3" } +]; + +// Function to display data items on the webpage +function displayDataItems() { + const container = document.getElementById("data-container"); + + // Clear previous content + container.innerHTML = ""; + + // Loop through data items and create HTML elements + dataItems.forEach(item => { + const itemElement = document.createElement("div"); + itemElement.classList.add("data-item"); + itemElement.innerHTML = ` +

${item.name}

+

${item.description}

+ `; + container.appendChild(itemElement); + }); +} + +// Call the function to display data items when the page loads +window.onload = displayDataItems; diff --git a/web/newWebsite/styles/questions-dashboard-styles.css b/web/newWebsite/styles/questions-dashboard-styles.css index 966d901..29fd8ce 100644 --- a/web/newWebsite/styles/questions-dashboard-styles.css +++ b/web/newWebsite/styles/questions-dashboard-styles.css @@ -11,10 +11,10 @@ } .navbar { - background-color: #333; + background-color: #3d898c; height: 60px; display: flex; - align-items: center; + align-items: center ; padding: 0 20px; position: fixed; /* Fix the navbar at the top of the page */ top: 0; /* Position it at the very top */ @@ -39,4 +39,12 @@ color: #fff; text-decoration: none; font-size: 18px; - } \ No newline at end of file + } + + #data-container { + width: 80%; + margin: 0 auto; + padding: 20px; + background-color: #f5f5f5; + border: 1px solid #ccc; +} \ No newline at end of file From 64ba63e9ad82e39b9527f6adbaaa345e0cbc2bcf Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Sun, 31 Mar 2024 15:58:34 +0200 Subject: [PATCH 2/5] piegraphs added --- web/newWebsite/questions-dashboard.html | 60 +++++- web/newWebsite/questions-main.js | 176 +++++++++++++++--- .../styles/questions-dashboard-styles.css | 10 +- 3 files changed, 218 insertions(+), 28 deletions(-) diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index 53d6b9c..f2df4fc 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -1,4 +1,4 @@ - + + + + + + + + + + + Graphs + + + + + + + + + +
+

Question 1

+ + +

Question 2

+ + + +
+ + + + diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index 5ed0c35..c4baf7f 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -1,28 +1,156 @@ -// Sample data -const dataItems = [ - { id: 1, name: "Item 1", description: "Description for Item 1" }, - { id: 2, name: "Item 2", description: "Description for Item 2" }, - { id: 3, name: "Item 3", description: "Description for Item 3" } -]; -// Function to display data items on the webpage -function displayDataItems() { - const container = document.getElementById("data-container"); +// // Sample data +// const dataItems = [ +// { id: 1, name: "Question 1", description: "Description for Item 1" }, +// { id: 2, name: "Question 2", description: "Description for Item 2" }, +// ]; - // Clear previous content - container.innerHTML = ""; +// // Function to display data items on the webpage +// function displayDataItems() { +// const container = document.getElementById("data-container"); - // Loop through data items and create HTML elements - dataItems.forEach(item => { - const itemElement = document.createElement("div"); - itemElement.classList.add("data-item"); - itemElement.innerHTML = ` -

${item.name}

-

${item.description}

- `; - container.appendChild(itemElement); - }); -} +// // Clear previous content +// container.innerHTML = ""; -// Call the function to display data items when the page loads -window.onload = displayDataItems; +// // Loop through data items and create HTML elements +// dataItems.forEach(item => { +// const itemElement = document.createElement("div"); +// itemElement.classList.add("data-item"); +// itemElement.innerHTML = ` +//

${item.name}

+//

${item.description}

+// `; +// container.appendChild(itemElement); +// }); +// } + +// // Call the function to display data items when the page loads +// window.onload = displayDataItems; + +// // Sample data for the questionnaire results +// const questionnaireData = { +// labels: ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'], +// datasets: [{ +// label: 'Responses', +// data: [20, 35, 15, 10, 20], // Sample response counts for each option +// backgroundColor: [ +// 'rgba(255, 99, 132, 0.2)', +// 'rgba(54, 162, 235, 0.2)', +// 'rgba(255, 206, 86, 0.2)', +// 'rgba(75, 192, 192, 0.2)', +// 'rgba(153, 102, 255, 0.2)' +// ], +// borderColor: [ +// 'rgba(255, 99, 132, 1)', +// 'rgba(54, 162, 235, 1)', +// 'rgba(255, 206, 86, 1)', +// 'rgba(75, 192, 192, 1)', +// 'rgba(153, 102, 255, 1)' +// ], +// borderWidth: 1 +// }] +// }; + +// // Chart configuration +// const chartConfig = { +// type: 'bar', +// data: questionnaireData, +// options: { +// scales: { +// yAxes: [{ +// ticks: { +// beginAtZero: true +// } +// }] +// } +// } +// }; + +// // Create the chart +// const ctx = document.getElementById('chart').getContext('2d'); +// const myChart = new Chart(ctx, chartConfig); + +// Sample data for the questionnaire results +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 + }] +}; + +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 + } + } +}; + +// 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); diff --git a/web/newWebsite/styles/questions-dashboard-styles.css b/web/newWebsite/styles/questions-dashboard-styles.css index 29fd8ce..eba538a 100644 --- a/web/newWebsite/styles/questions-dashboard-styles.css +++ b/web/newWebsite/styles/questions-dashboard-styles.css @@ -6,7 +6,7 @@ body { padding-top: 5vw; display: flex; - background-color: #afafaf; + background-color: #dbd7d7; margin: 0; } @@ -47,4 +47,12 @@ padding: 20px; background-color: #f5f5f5; border: 1px solid #ccc; +} + +.chart-container { + width: 80%; + margin: 20px auto; +} +canvas { + margin-bottom: 20px; } \ No newline at end of file From cf0a6c6565ee65595b03ad713b00913bcb6a2556 Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Sun, 31 Mar 2024 20:22:50 +0200 Subject: [PATCH 3/5] trying to work with classes, but script works for time being. --- web/newWebsite/questions-dashboard.html | 4 + web/newWebsite/questions-main-class.js | 27 +++++++ web/newWebsite/questions-main.js | 100 +++++++----------------- 3 files changed, 58 insertions(+), 73 deletions(-) create mode 100644 web/newWebsite/questions-main-class.js diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index f2df4fc..fa2a045 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -83,9 +83,13 @@

Question 2

+ + + diff --git a/web/newWebsite/questions-main-class.js b/web/newWebsite/questions-main-class.js new file mode 100644 index 0000000..356d3e0 --- /dev/null +++ b/web/newWebsite/questions-main-class.js @@ -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 + }] + }; + } +} \ No newline at end of file diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index c4baf7f..0b19d5b 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -1,76 +1,3 @@ - -// // Sample data -// const dataItems = [ -// { id: 1, name: "Question 1", description: "Description for Item 1" }, -// { id: 2, name: "Question 2", description: "Description for Item 2" }, -// ]; - -// // Function to display data items on the webpage -// function displayDataItems() { -// const container = document.getElementById("data-container"); - -// // Clear previous content -// container.innerHTML = ""; - -// // Loop through data items and create HTML elements -// dataItems.forEach(item => { -// const itemElement = document.createElement("div"); -// itemElement.classList.add("data-item"); -// itemElement.innerHTML = ` -//

${item.name}

-//

${item.description}

-// `; -// container.appendChild(itemElement); -// }); -// } - -// // Call the function to display data items when the page loads -// window.onload = displayDataItems; - -// // Sample data for the questionnaire results -// const questionnaireData = { -// labels: ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'], -// datasets: [{ -// label: 'Responses', -// data: [20, 35, 15, 10, 20], // Sample response counts for each option -// backgroundColor: [ -// 'rgba(255, 99, 132, 0.2)', -// 'rgba(54, 162, 235, 0.2)', -// 'rgba(255, 206, 86, 0.2)', -// 'rgba(75, 192, 192, 0.2)', -// 'rgba(153, 102, 255, 0.2)' -// ], -// borderColor: [ -// 'rgba(255, 99, 132, 1)', -// 'rgba(54, 162, 235, 1)', -// 'rgba(255, 206, 86, 1)', -// 'rgba(75, 192, 192, 1)', -// 'rgba(153, 102, 255, 1)' -// ], -// borderWidth: 1 -// }] -// }; - -// // Chart configuration -// const chartConfig = { -// type: 'bar', -// data: questionnaireData, -// options: { -// scales: { -// yAxes: [{ -// ticks: { -// beginAtZero: true -// } -// }] -// } -// } -// }; - -// // Create the chart -// const ctx = document.getElementById('chart').getContext('2d'); -// const myChart = new Chart(ctx, chartConfig); - -// Sample data for the questionnaire results const question1Data = { labels: ['Option A', 'Option B', 'Option C'], datasets: [{ @@ -90,6 +17,11 @@ const question1Data = { }] }; +// let dummydata = [40, 30, 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: [{ @@ -147,6 +79,24 @@ const chartConfig2 = { } } }; +// 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'); @@ -154,3 +104,7 @@ 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); + From 3435bdaaabec4091880201d57cf6de9a10317bdd Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Sun, 31 Mar 2024 20:27:33 +0200 Subject: [PATCH 4/5] extra dummy question added. --- web/newWebsite/questions-dashboard.html | 4 +-- web/newWebsite/questions-main.js | 40 +++++++++++++++++++++++++ 2 files changed, 42 insertions(+), 2 deletions(-) diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index fa2a045..f3cb2f2 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -83,8 +83,8 @@

Question 2

- +

Question 3

+ diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index 0b19d5b..581545d 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -41,6 +41,25 @@ const question2Data = { }] }; +const question3Data = { + labels: ['Option A', 'Option B', 'Option C'], + datasets: [{ + label: 'Responses', + data: [30, 30, 30], + 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', @@ -79,6 +98,25 @@ const chartConfig2 = { } } }; + +const chartConfig3 = { + type: 'pie', + data: question3Data, + options: { + responsive: true, + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Question 3 Responses' + }, + animation: { + animateScale: true, + animateRotate: true + } + } +}; // const chartConfig3 = { // type: 'pie', // data: question3Data.questionData(), @@ -105,6 +143,8 @@ 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); // const ctx3 = document.getElementById('chart3').getContext('2d'); // const myChart3 = new Chart(ctx3, chartConfig3); From f2050a54a443296f58f7c94b1c4d266b89f2066f Mon Sep 17 00:00:00 2001 From: Bram Barbieri Date: Sun, 31 Mar 2024 20:48:50 +0200 Subject: [PATCH 5/5] class working kindof, kan nog niet gelezen worden vanaf andere js file. --- web/newWebsite/questions-dashboard.html | 51 +---------------- web/newWebsite/questions-main-class.js | 52 ++++++++--------- web/newWebsite/questions-main.js | 75 +++++++++++-------------- 3 files changed, 60 insertions(+), 118 deletions(-) diff --git a/web/newWebsite/questions-dashboard.html b/web/newWebsite/questions-dashboard.html index f3cb2f2..6e267a1 100644 --- a/web/newWebsite/questions-dashboard.html +++ b/web/newWebsite/questions-dashboard.html @@ -1,50 +1,3 @@ - - - @@ -90,6 +43,6 @@ - + - + \ No newline at end of file diff --git a/web/newWebsite/questions-main-class.js b/web/newWebsite/questions-main-class.js index 356d3e0..a1e301b 100644 --- a/web/newWebsite/questions-main-class.js +++ b/web/newWebsite/questions-main-class.js @@ -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 - }] - }; - } -} \ No newline at end of file +// 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 +// }] +// }; +// } +// } \ No newline at end of file diff --git a/web/newWebsite/questions-main.js b/web/newWebsite/questions-main.js index 581545d..747707a 100644 --- a/web/newWebsite/questions-main.js +++ b/web/newWebsite/questions-main.js @@ -1,3 +1,31 @@ +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: [{ @@ -17,10 +45,10 @@ const question1Data = { }] }; -// let dummydata = [40, 30, 20]; -// let questionOptionsDummy = ['Option A', 'Option B', 'Option C']; +let dummydata = [30, 20, 20]; +let questionOptionsDummy = ['Option A', 'Option B', 'Option C']; -// const question3Data = new QuestionCreationClass(dummydata, questionOptionsDummy); +const question3Data = new QuestionCreationClass(dummydata, questionOptionsDummy); const question2Data = { labels: ['Option A', 'Option B', 'Option C'], @@ -41,25 +69,6 @@ const question2Data = { }] }; -const question3Data = { - labels: ['Option A', 'Option B', 'Option C'], - datasets: [{ - label: 'Responses', - data: [30, 30, 30], - 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', @@ -101,7 +110,7 @@ const chartConfig2 = { const chartConfig3 = { type: 'pie', - data: question3Data, + data: question3Data.questionData, options: { responsive: true, legend: { @@ -117,24 +126,6 @@ const chartConfig3 = { } } }; -// 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'); @@ -145,6 +136,4 @@ const myChart2 = new Chart(ctx2, chartConfig2); const ctx3 = document.getElementById('chart3').getContext('2d'); const myChart3 = new Chart(ctx3, chartConfig3); -// const ctx3 = document.getElementById('chart3').getContext('2d'); -// const myChart3 = new Chart(ctx3, chartConfig3);