First Iteration of Map Question Type

django/templates/play/game/question_participant.html

@@ -25,8 +25,7 @@
             <div class="w-full bg-gray-300 rounded-full h-4 my-4">
            <div id="time-bar" class="bg-blue-600 h-4 rounded-full transition-all duration-100 linear" style="width: 100%;"></div>
            </div>
-
-     {% if question_data.type  == "multiple_choice" or question_data.type == "true_false" %}
+        {% if question_data.type  == "multiple_choice" or question_data.type == "true_false" %}
         <div class="grid grid-cols-2 gap-4" id="options-container">
             {% for option in question_data.options %}
                 <button data-index="{{ forloop.counter0 }}"
@@ -168,6 +167,58 @@
         Abschicken
  </button>
  </form>
+        {% elif question_data.type == "map" %}
+            <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+                integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+                crossorigin=""></script>
+            <div class="text-sm text-gray-600 dark:text-gray-400 mb-2">Ziel auswählen</div>
+            <div id="map" class="h-96"></div>
+            <input type="hidden" value="" id="location" name="location">
+            <div class="mt-4">
+                <button onclick="submitAnswerMap()" class="bg-blue-400 text-white px-4 py-2 rounded-md hover:bg-blue-500 transition-colors">
+                    Abgeben
+                </button>
+            </div>
+            <script>
+                let marker = null;
+                const locationInput = document.getElementById('location');
+
+                const map = L.map('map').setView([51.72, 10.45], 3);
+
+                // Prüfe, ob Dark Mode aktiv ist
+                const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+                // Wähle das passende Karten-Design
+                const tileUrl = isDarkMode
+                ? 'https://{s}.basemaps.cartocdn.com/rastertiles/dark_nolabels/{z}/{x}/{y}.png'
+                : 'https://{s}.basemaps.cartocdn.com/rastertiles/light_nolabels/{z}/{x}/{y}.png';
+
+                L.tileLayer(tileUrl, {
+                maxZoom: 19,
+                attribution: '© OpenStreetMap © CARTO'
+                }).addTo(map);
+
+                function updateInput(latlng) {
+                    locationInput.value = `${latlng.lat.toFixed(6)},${latlng.lng.toFixed(6)}`;
+                }
+
+                function placeOrMoveMarker(latlng) {
+                    if (marker) {
+                        marker.setLatLng(latlng);
+                    } else {
+                        marker = L.marker(latlng, { draggable: true }).addTo(map);
+
+                        marker.on('dragend', () => {
+                            updateInput(marker.getLatLng());
+                        });
+                    }
+                    updateInput(latlng);
+                }
+
+                map.on('click', e => placeOrMoveMarker(e.latlng));
+            </script>
+        {% else %}
+        <p>aaaaah gibts nicht</p>
         {% endif %}
     </div>
 </div>
@@ -203,7 +254,22 @@
         wsUtil.handleClose(e);
     };
 
-    function submitAnswer(optionIndex) {
+    function submitAnswer(optionIndex=0, has_options=true) {
+        if (!has_options){
+            answer = document.getElementById("singleanswer").value;
+
+            if (answer == ""){
+                alert("Bitte eine Antwort eingeben!");
+                return;
+            }
+
+            gameSocket.send(JSON.stringify({
+                type: 'submit_answer',
+                participant_id: participantId,
+                answer:answer, 
+                time_remaining: questionDuration
+            }));
+        }
         if (hasAnswered) return;
         let input = ""; // Declare input here
 
@@ -249,7 +315,42 @@
     }
     }
 
-    
+    function submitAnswerMap() {
+        answer = document.getElementById("location").value;
+
+        if (answer == ""){
+            alert("Bitte eine Antwort eingeben!");
+            return;
+        }
+
+        // Add grey overlay
+        const overlay = document.createElement('div');
+        overlay.style.position = 'fixed';
+        overlay.style.top = '0';
+        overlay.style.left = '0';
+        overlay.style.width = '100%';
+        overlay.style.height = '100%';
+        overlay.style.backgroundColor = 'rgba(128, 128, 128, 0.5)';
+        overlay.style.zIndex = '1000';
+        overlay.style.display = 'flex';
+        overlay.style.justifyContent = 'center';
+        overlay.style.alignItems = 'center';
+        overlay.style.color = 'white';
+        overlay.style.fontSize = '24px';
+        overlay.style.fontWeight = 'bold';
+        overlay.textContent = 'Antwort übermittelt';
+        document.body.appendChild(overlay);
+
+        const now = Date.now();
+        const timeRemaining = Math.max(0, questionDuration - (now - questionStartTime));
+
+        gameSocket.send(JSON.stringify({
+            type: 'submit_answer',
+            participant_id: participantId,
+            answer: answer, 
+            time_remaining: timeRemaining
+        }));
+    }
 
     // Timer
     function updateTimer() {