diff --git a/main.js b/main.js
new file mode 100644
index 0000000000000000000000000000000000000000..d34694b4b3c32c0630b8330f1977042f3695c281
--- /dev/null
+++ b/main.js
@@ -0,0 +1,385 @@
+// When selecting main criteria, select all criteria
+function toggleCriteria() {
+ var h1 = document.getElementById("h1");
+ var checkBoxes = document.getElementsByClassName("h1");
+ if (h1.checked == false) {
+ for (let i = 0; i < checkBoxes.length; i++) {
+ checkBoxes[i].checked = false;
+ }
+ } else {
+ for (let i = 0; i < checkBoxes.length; i++) {
+ checkBoxes[i].checked = true;
+ }
+ }
+
+ var h2 = document.getElementById("h2");
+ var checkBoxes = document.getElementsByClassName("h2");
+ if (h2.checked == false) {
+ for (let i = 0; i < checkBoxes.length; i++) {
+ checkBoxes[i].checked = false;
+ }
+ } else {
+ for (let i = 0; i < checkBoxes.length; i++) {
+ checkBoxes[i].checked = true;
+ }
+ }
+
+ var h3 = document.getElementById("h3");
+ var checkBoxes = document.getElementsByClassName("h3");
+ if (h3.checked == false) {
+ for (let i = 0; i < checkBoxes.length; i++) {
+ checkBoxes[i].checked = false;
+ }
+ } else {
+ for (let i = 0; i < checkBoxes.length; i++) {
+ checkBoxes[i].checked = true;
+ }
+ }
+
+ var h4 = document.getElementById("h4");
+ var checkBoxes = document.getElementsByClassName("h4");
+ if (h4.checked == false) {
+ for (let i = 0; i < checkBoxes.length; i++) {
+ checkBoxes[i].checked = false;
+ }
+ } else {
+ for (let i = 0; i < checkBoxes.length; i++) {
+ checkBoxes[i].checked = true;
+ }
+ }
+
+ getResults();
+}
+
+// Set maincriteria to true/false if all criterias are selected/one or more deselected
+function criteriaOnChange1() {
+ var checkBoxes = document.getElementsByClassName("h1");
+ var checked = 0;
+
+ for (let i = 0; i < checkBoxes.length; i++) {
+ if (checkBoxes[i].checked) {
+ checked++;
+ }
+ }
+
+ if (checked == 2) {
+ var h1 = document.getElementById("h1");
+ h1.checked = true;
+ } else {
+ var h1 = document.getElementById("h1");
+ h1.checked = false;
+ }
+
+ getResults();
+}
+
+function criteriaOnChange2() {
+ var checkBoxes = document.getElementsByClassName("h2");
+ var checked = 0;
+
+ for (let i = 0; i < checkBoxes.length; i++) {
+ if (checkBoxes[i].checked) {
+ checked++;
+ }
+ }
+
+ if (checked == 5) {
+ var h2 = document.getElementById("h2");
+ h2.checked = true;
+ } else {
+ var h2 = document.getElementById("h2");
+ h2.checked = false;
+ }
+ getResults();
+}
+
+function criteriaOnChange3() {
+ var checkBoxes = document.getElementsByClassName("h3");
+ var checked = 0;
+
+ for (let i = 0; i < checkBoxes.length; i++) {
+ if (checkBoxes[i].checked) {
+ checked++;
+ }
+ }
+
+ if (checked == 3) {
+ var h3 = document.getElementById("h3");
+ h3.checked = true;
+ } else {
+ var h3 = document.getElementById("h3");
+ h3.checked = false;
+ }
+ getResults();
+}
+
+function criteriaOnChange4() {
+ var checkBoxes = document.getElementsByClassName("h4");
+ var checked = 0;
+
+ for (let i = 0; i < checkBoxes.length; i++) {
+ if (checkBoxes[i].checked) {
+ checked++;
+ }
+ }
+
+ if (checked == 3) {
+ var h4 = document.getElementById("h4");
+ h4.checked = true;
+ } else {
+ var h4 = document.getElementById("h4");
+ h4.checked = false;
+ }
+ getResults();
+}
+
+const numberCounter = {
+ element1: 0,
+ element2: 0,
+ element3: 0,
+ element4: 0,
+ element5: 0,
+ element6: 0,
+ element7: 0,
+ element8: 0
+};
+
+// Was macht das hier???
+function getResults() {
+ const criteria = {
+ criteria11: ["element3"],
+ criteria12: ["element3"],
+ criteria21: ["element4"],
+ criteria22: ["element1", "element2", "element5"],
+ criteria23: ["element1"],
+ criteria24: ["element1", "element2"],
+ criteria25: ["element1", "element2"],
+ criteria31: ["element2", "element3", "element4"],
+ criteria32: ["element2", "element3", "element4"],
+ criteria33: ["element6", "element7", "element8"],
+ criteria41: ["element1", "element4", "element6"],
+ criteria42: ["element1", "element2", "element4", "element6"],
+ criteria43: ["element1", "element2", "element4", "element6"]
+ };
+
+ const elementsResult = {
+ element1: 0,
+ element2: 0,
+ element3: 0,
+ element4: 0,
+ element5: 0,
+ element6: 0,
+ element7: 0,
+ element8: 0
+ };
+
+ const elements = {
+ element1: "Punkte",
+ element2: "Abzeichen",
+ element3: "Fortschrittsanzeige",
+ element4: "Bestenlisten",
+ element5: "Level",
+ element6: "Avatar",
+ element7: "Narrativ",
+ element8: "Nicht-Spieler-Charaktere"
+ };
+
+ let elementCountArray = [];
+ let elementNameArray = [];
+
+ let countCheckedCriteria = 0;
+ const criteriaElements = document.getElementsByClassName("criteria");
+
+ for (let i = 0; i < criteriaElements.length; i++) {
+ if (criteriaElements[i].checked) {
+ countCheckedCriteria++;
+ criteria[criteriaElements[i].id].forEach((item) => {
+ elementsResult[item] = elementsResult[item] + 1;
+ });
+ }
+ }
+
+ let totalCount = 0;
+ let percent = 0;
+
+ console.log(elementsResult, "results");
+ // Count totalCount up
+ for (element in elementsResult) {
+ if (elementsResult[element] > 0) totalCount++;
+
+ elementCountArray.push(elementsResult[element]);
+ elementNameArray.push(elements[element]);
+ //totalCount += elementsResult[element]
+ }
+
+ //showElements(elementsResult, countCheckedCriteria)
+ loopElements(elementsResult, countCheckedCriteria);
+
+ console.log("array: ", elementCountArray);
+ console.log("name: ", elementNameArray);
+
+ generateChart(elementNameArray, elementCountArray);
+}
+
+function loopElements(elementsResult, countCheckedCriteria) {
+ const circleElements = document.getElementsByTagName("circle");
+ const numberElements = document.getElementsByClassName("number");
+ console.log(circleElements);
+ console.log(numberElements);
+ console.log(elementsResult);
+
+ let i = 0;
+ for (var key in elementsResult) {
+ console.log(elementsResult[key]);
+
+ if (elementsResult[key] == 0) {
+ resetCircleAndNumber(numberElements[i], circleElements[i], key);
+ } else {
+ modifyNumberAndText(
+ circleElements[i],
+ numberElements[i],
+ elementsResult,
+ elementsResult[key],
+ countCheckedCriteria,
+ key
+ );
+ }
+ i++;
+ }
+}
+
+// Shows elements
+function modifyNumberAndText(
+ circle,
+ number,
+ elementsResult,
+ elementResultCount,
+ countCheckedCriteria,
+ key
+) {
+ let percent = 0;
+ const elements = {
+ element1: "Punkte",
+ element2: "Abzeichen",
+ element3: "Fortschrittsanzeige",
+ element4: "Bestenlisten",
+ element5: "Level",
+ element6: "Avatar",
+ element7: "Narrativ",
+ element8: "Nicht-Spieler-Charaktere"
+ };
+
+ if (elementResultCount > 0) {
+ // Get percent of each element
+ if (countCheckedCriteria > 0) {
+ percent = ((elementResultCount / countCheckedCriteria) * 100).toFixed(2);
+ }
+
+ // Increasing progess number
+
+ let progress = 0;
+
+ // Modify Number & Circle Progress
+ //if (elementsResult.element3 > 0 && String(element) == "element3") {
+ modifiyCircleProgressNumber(number, percent, key);
+ modifyCircleProgress(circle, percent);
+ //}
+ }
+}
+
+function modifyCircleProgress(circle, percent) {
+ const progress = parseInt(440 - (440 * parseInt(percent)) / 100);
+ circle.style.setProperty("--fill", progress);
+}
+
+function modifiyCircleProgressNumber(number, percent, key) {
+ // Modify Number
+ if (numberCounter[key] <= percent) {
+ // Count up
+ let intervalCountUp = setInterval(() => {
+ if (numberCounter[key] >= percent) {
+ clearInterval(intervalCountUp);
+ } else {
+ numberCounter[key] += 1;
+ number.innerHTML = numberCounter[key] + "%";
+ }
+ }, 2000 / percent);
+ } else {
+ // Count down
+ let intervalCountDown = setInterval(() => {
+ if (numberCounter[key] <= percent) {
+ clearInterval(intervalCountDown);
+ } else {
+ numberCounter[key] -= 1;
+ number.innerHTML = numberCounter[key] + "%";
+ }
+ }, 2000 / percent);
+ }
+}
+
+function resetCircleAndNumber(number, circle, key) {
+ let intervalToZero = setInterval(() => {
+ if (numberCounter[key] <= 0) {
+ clearInterval(intervalToZero);
+ } else {
+ numberCounter[key] -= 1;
+ number.innerHTML = numberCounter[key] + "%";
+ }
+ }, 2000 / numberCounter[key]);
+ circle.style.setProperty("--fill", 439);
+}
+
+function setActive(e, svgId) {
+ progressBarElements = document.getElementsByClassName("progressbar");
+ svgElements = document.getElementsByClassName("svgContainer");
+ svgToShow = document.getElementById(svgId);
+
+ for (let i = 0; i < progressBarElements.length; i++) {
+ progressBarElements[i].classList.remove("active");
+ }
+
+ for (let i = 0; i < svgElements.length; i++) {
+ svgElements[i].style.display = "none";
+ }
+
+ svgToShow.style.display = "flex";
+ e.classList.add("active");
+}
+
+/*
+ * Chart.js
+ */
+let chart;
+
+function generateChart(elementNameArray, elementCountArray) {
+ try {
+ chart.destroy();
+ } catch (error) {
+ console.error(error);
+ // Expected output: ReferenceError: nonExistentFunction is not defined
+ // (Note: the exact output may be browser-dependent)
+ }
+
+ const ctx = document.getElementById("myChart");
+
+ chart = new Chart(ctx, {
+ type: "bar",
+ data: {
+ labels: elementNameArray,
+ datasets: [
+ {
+ label: "# of Votes",
+ data: elementCountArray,
+ borderWidth: 1
+ }
+ ]
+ },
+ options: {
+ scales: {
+ y: {
+ beginAtZero: true
+ }
+ }
+ }
+ });
+}