Teilnehmer_Koordinaten-einzeichnen

django/templates/play/game/score_overview.html

@@ -12,7 +12,7 @@
 
             {% if question_data.type == "map" %}
                 <!-- Map Question Display -->
-                <div class="mb-4">
+                <div class="mb-4">                  
                     <div id="map" class="h-96 w-full rounded-lg border border-gray-300 dark:border-gray-600"></div>
                 </div>
                 
@@ -20,6 +20,20 @@
                         integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
                         crossorigin=""></script>
                 <script>
+
+                        const participantAnswers = [
+    {% for participant in participants %}
+        {% if participant.coordinate_answer %}
+            "{{ participant.coordinate_answer }}",
+        {% endif %}
+    {% endfor %}];
+    
+
+
+
+
+
+
                     document.addEventListener('DOMContentLoaded', function() {
                         // Parse the target location from the string format "lat,lng"
                         const targetCoords = '{{ question_data.target_location|escapejs }}'.split(',');
@@ -65,6 +79,21 @@
                             noWrap: true
                         }).addTo(map);
 
+                     participantAnswers.forEach(coordStr => {
+                     const coords = coordStr.split(',').map(Number);
+                    if (coords.length === 2 && !coords.some(isNaN)) {
+                   const marker = L.marker(coords).addTo(map).bindPopup('Antwort eines Teilnehmers');
+
+                    // Linie vom Ziel zum Teilnehmermarker
+                     L.polyline([targetLocation, coords], {
+                    color: '#f59e0b',   
+                    weight: 2,          // Linienstärke
+                    dashArray: '5,5',   // gestrichelte Linie
+                    opacity: 0.6
+                    }).addTo(map);
+                    }
+                    });
+
                         // Add target marker
                         L.marker(targetLocation, {
                             icon: L.divIcon({