listtemplatefooter.html

];
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++) {
    var zahl = inneresArray[j];
    if (zahl && !isNaN(zahl)) {
      const reversed = ringnumber + 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(questionnumber) {
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 / ringnumber);
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 / ringnumber);
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 / ringnumber);
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/ringnumber);

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 / ringnumber);

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-ringnumber)*Math.random() +(10-ringnumber)*Math.random() + "px";
      punkt.style.top = zielscheibe.offsetHeight / 2 + y - (10-ringnumber)*Math.random() +(10-ringnumber)*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 = ringnumber - 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";
    }
  }

</script>
<br><br>