Reihenfolge_Fragetyp(und Lizenzenz_Dateien)

django/templates/play/game/question_participant.html

@@ -1,6 +1,10 @@
 {% extends 'base.html' %}
 
 {% block content %}
+
+{% load static %}
+<script src="{% static 'js/sortablejs/Sortable.min.js' %}"></script>
+
 <div class="container mx-auto px-4">
     <div class="flex justify-end mb-4">
         <button onclick="leaveGame()" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">
@@ -22,10 +26,11 @@
            <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  != "input" %}
+     {% 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 
+                <button data-index="{{ forloop.counter0 }}"
+            data-value="{{ option.value }}"
                     class="
                     {% if forloop.counter0 == 0 %}
                     bg-green-500
@@ -56,6 +61,71 @@
                 </button>
             {% endfor %}
         </div>
+
+        
+        
+{% elif question_data.type == "order" %}
+
+<div id="sortable-options" class=" mb-4 flex flex-col items-center">
+    {% for option in question_data.options %}
+    
+                <button data-index="{{ forloop.counter0 }}"
+            data-value="{{ option.value }}" 
+                
+                    class=" my-2 w-3/4 max-w-xl
+                    {% if forloop.counter0 == 0 %}
+                    bg-green-500
+                    hover:bg-green-600
+                    {% elif forloop.counter0 == 1 %}
+                    bg-red-500
+                    hover:bg-red-600
+                    {% elif forloop.counter0 == 2 %}
+                    bg-blue-500
+                    hover:bg-blue-600
+                    {% elif forloop.counter0 == 3 %}
+                    bg-purple-500
+                    hover:bg-purple-600
+                    {% elif forloop.counter0 == 4 %}
+                    bg-orange-500
+                    hover:bg-orange-600
+                    {% elif forloop.counter0 == 5 %}
+                    bg-yellow-500
+                    hover:bg-yellow-600
+                    {% else %}
+                    bg-gray-500
+                    hover:bg-gray-600
+                    {% endif %}
+                    p-4 rounded-lg text-white transition-colors duration-200 answer-option overflow-auto break-words hyphens-auto "
+                    data-index="{{ forloop.counter0 }}"
+                    
+            >
+                    
+<p class="text-lg flex items-center">
+    <span class="order-number inline-block w-8 h-8 rounded-full bg-white text-gray-800 font-bold text-center leading-8 mr-3">1</span>
+
+    {{ option.value }}
+</p>
+                    
+                </button>
+
+
+    {% endfor %}
+</div>
+
+<div class="flex gap-2">
+ <button id="send_order"
+ onclick="submitOrderAnswer()" 
+         class="mt-2 text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a] ">
+     abschicken
+ </button>
+    
+ 
+
+ 
+
+
+
+
         {% else %}
         <form action="">
         <input id="textanswer" type="text" placeholder="DEINE ANTWORT" 
@@ -89,7 +159,11 @@
             data.action === 'show_scores' && 
             data.redirect_url) {
             window.location.href = data.redirect_url;
-            submitAnswer( -1 );
+            {% if question_data.type == "order" %}
+            submitOrderAnswer();
+            {% else %}
+            submitAnswer(-1);
+            {% endif %}
         }
     };
 
@@ -159,7 +233,13 @@
 
         if (remaining === 0 && !hasAnswered) {
             // Auto-submit timeout answer
+            {% if question_data.type == "order" %}
+            submitOrderAnswer();
+            {% else %}
             submitAnswer(-1);
+            {% endif %}
+
+            
         } else if (remaining > 0) {
             requestAnimationFrame(updateTimer);
         }
@@ -176,5 +256,74 @@
 
     // Start timer when page loads
     updateTimer();
+
+let initialOrder = [];
+
+document.addEventListener('DOMContentLoaded', () => {
+    const container = document.getElementById('sortable-options');
+    if (container) {
+        initialOrder = Array.from(container.children).map(div => div.dataset.index);
+
+        Sortable.create(container, {
+            animation: 150,
+            onUpdate: updateOrderNumbers  // <--- Nummern aktualisieren nach Sortieren
+        });
+
+        updateOrderNumbers(); // initial setzen
+    }
+});
+
+function updateOrderNumbers() {
+    const container = document.getElementById('sortable-options');
+    const children = container.children;
+    for (let i = 0; i < children.length; i++) {
+        const label = children[i].querySelector('.order-number');
+        if (label) {
+            label.textContent = `${i + 1}.`;
+        }
+    }
+}
+
+
+function submitOrderAnswer() {
+    const order_button=document.getElementById("send_order")
+    order_button.disabled=true;
+    order_button.classList.add('opacity-50');
+    const orderedDivs = document.querySelectorAll('#sortable-options button');
+
+const selectedOrder = Array.from(orderedDivs).map(div => div.dataset.value);
+ 
+
+    const now = Date.now();
+    let timeRemaining = Math.max(0, questionDuration - (now - questionStartTime));
+        {% if request.session.mode == "learn" %} 
+         timeRemaining = questionDuration;
+        {% endif %}
+
+    gameSocket.send(JSON.stringify({
+        type: 'submit_answer',
+        participant_id: participantId,
+        answer: selectedOrder,
+        time_remaining: timeRemaining
+    }));
+
+    hasAnswered = true;
+}
+
+function resetOrderSelection() {
+    const container = document.getElementById('sortable-options');
+    const divs = Array.from(container.children);
+    const indexMap = {};
+    divs.forEach(div => {
+        indexMap[div.dataset.index] = div;
+    });
+
+    // Sort children back to initial order
+    container.innerHTML = '';
+    initialOrder.forEach(i => {
+        container.appendChild(indexMap[i]);
+    });
+}
+
 </script>
 {% endblock %}