singletemplate.html

##edit## ##delete##
<div class="parent" id="parent">
  <p style="text-align: center; font-size: 42px; color: white">
    🎯Danke für dein Feedback!
  </p>
  <span
    id="nachladenHinweis"
    style="display: none; text-align: center; color: pink"
    >Die Punkte werden neu generiert, bitte warten...</span
  >
  <div class="zielscheibe" id="zielscheibe">
		<div id="ring1"><div class="content1" style="justify-content: center;align-items: center;height: 100%;
width: 100%;display: flex;color: gray;">-</div></div>
		<div id="ring2"><div class="oben content2"></div><div class="links content2"></div><div class="rechts content2">&nbsp;</div><div class="unten content2"></div></div>
		<div id="ring3"><div class="oben content3"></div><div class="links content3"></div><div class="rechts content3"></div><div class="unten content3"></div></div>
		<div id="ring4"><div class="oben content4"></div><div class="links content4"></div><div class="rechts content4"></div><div class="unten content4"></div></div>
               <div id="ring5"><div class="oben content5"></div><div class="links content5"></div><div class="rechts content5"></div><div class="unten content5"></div></div>
               <div id="ring6"><div class="oben content6"></div><div class="links content6"></div><div class="rechts content6"></div><div class="unten content6"></div></div>
               <div id="ring7"><div class="oben content7"></div><div class="links content7"></div><div class="rechts content7"></div><div class="unten content7"></div></div>
                <div id="ring8"><div class="oben content8"></div><div class="links content8"></div><div class="rechts content8"></div><div class="unten content8"></div></div>
  <div id="ring9"><div class="oben content9"></div><div class="links content9"></div><div class="rechts content9">;</div><div class="unten content9"></div></div>
  <div id="ring10"><div class="oben content10"></div><div class="links content10"></div><div class="rechts content10"></div><div class="unten content10"></div></div>
	</div>
  <br />
  <div class="divlabel green">
    <span id="question1"></span><span class="green-mittelwert"></span>
  </div>
  <div class="divlabel yellow">
    <span id="question2"></span><span class="yellow-mittelwert"></span>
  </div>
  <div class="divlabel red">
    <span id="question3"></span> <span class="red-mittelwert"></span>
  </div>
  <div class="divlabel blue">
    <span id="question4"></span> <span class="blue-mittelwert"></span>
  </div>
</div>

<script>
  var feedback = [[[[Feedback1]], [[Feedback2]], [[Feedback3]], [[Feedback4]]]];

  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);
  }

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