]; console.log(feedback); var antworten = []; for (var i = 0; i < feedback.length; i++) { var inneresArray = feedback[i]; var neuesInneresArray = []; // for (var j = 0; j < inneresArray.length; j++) { for (var j = 0; j < anzahl; j++) { var zahl = inneresArray[j]; if (zahl && !isNaN(zahl)) { const reversed = skala + 1 - zahl - 0.5; neuesInneresArray.push(reversed); } else { neuesInneresArray.push(99); } } antworten.push(neuesInneresArray); console.log(neuesInneresArray) } var counterDiv = document.getElementById("counter"); counterDiv.innerHTML = antworten.length; // Definiere eine Farbpalette für die Punkte var farbpalette = ["green", "yellow", "red", "blue"]; // Bestimme den Viertel des Kreises basierend auf der Farbe des Punktes var viertel = { "green": 1, "yellow": 2, "red": 3, "blue": 4 }; function platzierePunkte() { var zielscheibe = document.querySelector(".zielscheibe"); // Iteriere über die Antworten for (var frage = 0; frage < antworten[0].length; frage++) { // Platziere einen Punkt für jeden Teilnehmer auf der Zielscheibe for (var i = 0; i < antworten.length; i++) { // Erstelle das Punkt-Element var punkt = document.createElement("div"); punkt.classList.add("punkt"); // Bestimme den Ring basierend auf der Antwort auf die Frage var ring = antworten[i][frage]; // Bestimme den Viertel des Kreises basierend auf der Farbe des Punktes var farbe = farbpalette[frage]; var viertelIndex = viertel[farbe]; switch(anzahl) { case 1: // Bestimme den Winkel und Radius für den Punkt var winkel = Math.random() * 270 + 270 * (viertelIndex - 1); var radius = (zielscheibe.offsetWidth / 2) * (ring / skala); break; case 2: // Bestimme den Winkel und Radius für den Punkt var winkel = Math.random() * -180 + 180 * (viertelIndex - 1); var radius = (zielscheibe.offsetWidth / 2) * (ring / skala); break; case 3: // Bestimme den Winkel und Radius für den Punkt var winkel = Math.random() * 120 + 120 * (viertelIndex - 1); var radius = (zielscheibe.offsetWidth / 2) * (ring / skala); break; case 4: // Bestimme den Winkel und Radius für den Punkt var winkel = Math.random() * 90 + 90 * (viertelIndex - 1); var radius = (zielscheibe.offsetWidth / 2) * (ring / skala); break; default: // Bestimme den Winkel und Radius für den Punkt) var winkel = Math.random() * 270 + 270 * (viertelIndex - 1); var radius = (zielscheibe.offsetWidth / 2) * (ring / skala); break; } // Berechne die x- und y-Koordinaten des Punktes var x = Math.cos(winkel * Math.PI / 180) * radius; var y = Math.sin(winkel * Math.PI / 180) * radius; // Platziere den Punkt auf der Zielscheibe punkt.style.left = zielscheibe.offsetWidth / 2 + x - (10-skala)*Math.random() +(10-skala)*Math.random() + "px"; punkt.style.top = zielscheibe.offsetHeight / 2 + y - (10-skala)*Math.random() +(10-skala)*Math.random() + "px"; // Füge die Farbe des Punktes als Klasse hinzu punkt.classList.add(farbe); // Füge den Punkt zur Zielscheibe hinzu zielscheibe.appendChild(punkt); } } } function berechneMittelwert() { var mittelwerte = {}; // Iteriere über die Farben in der Farbpalette for (var i = 0; i < farbpalette.length; i++) { var farbe = farbpalette[i]; var summe = 0; var anzahl = 0; // Iteriere über die Antworten für diese Farbe for (var j = 0; j < feedback.length; j++) { var ring = feedback[j][viertel[farbe] - 1]; // Ignoriere leere Werte im Array feedback if (ring !== undefined) { summe += parseInt(ring); anzahl++; } } // Berechne den Mittelwert für diese Farbe, wenn mindestens ein Wert vorhanden ist if (anzahl > 0) { var mittelwert = summe / anzahl; mittelwerte[farbe] = mittelwert.toFixed(1); } } return mittelwerte; } var mittelwerte = berechneMittelwert(); console.log(mittelwerte); // Schreibe den Mittelwert für jede Farbe in den entsprechenden Container document.querySelector(".green-mittelwert").textContent = mittelwerte["green"]; document.querySelector(".red-mittelwert").textContent = mittelwerte["red"]; document.querySelector(".yellow-mittelwert").textContent = mittelwerte["yellow"]; document.querySelector(".blue-mittelwert").textContent = mittelwerte["blue"]; // Zielscheibe beschriften for (let i = 1; i <= 10; i++) { let ring = skala - i + 1; let contents = document.querySelectorAll(".content" + i); contents.forEach((content) => { content.textContent = ring; }); } platzierePunkte(); // Animation if (punkteanimation != "yes") { } else { var punktegreen = document.querySelectorAll(".punkt.green"); for (var i = 0; i < punktegreen.length; i++) { punktegreen[i].style.animationDelay = Math.random() * 1 + "s"; } var punkteyellow = document.querySelectorAll(".punkt.yellow"); for (var i = 0; i < punkteyellow.length; i++) { punkteyellow[i].style.animationDelay = 1 + Math.random() * 1 + "s"; } var punktered = document.querySelectorAll(".punkt.red"); for (var i = 0; i < punktered.length; i++) { punktered[i].style.animationDelay = 2 + Math.random() * 1 + "s"; } var punkteblue = document.querySelectorAll(".punkt.blue"); for (var i = 0; i < punkteblue.length; i++) { punkteblue[i].style.animationDelay = 3 + Math.random() * 1 + "s"; } }