Merge branch '135-design' into 'master'

Resolve "Design"

Closes #135

See merge request enrichment-2024/qivip!91

django/templates/play/game/question_host.html

@@ -9,7 +9,7 @@
             Spiel verlassen
         </button>
     </div>{% endif %}
-    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
+    <div id="form_host" class="bg-white rounded-lg shadow-md p-4 mb-6">
         <div class="flex justify-between mb-2">
             <div class="flex gap-1 text-sm"><p class="text-sm">Frage</p>
                 <p class="text-gray-700 font-bold text-sm">{{ question_index|add:1 }}</p>
@@ -30,7 +30,7 @@
             </div>
         {% endif %}
             {% if request.session.mode != "learn" %}
-           <div class="w-full bg-gray-300 rounded-full h-4 mx-2">
+           <div class="w-full bg-gray-300 rounded-full h-4">
            <div id="time-bar" class="bg-blue-600 h-4 rounded-full transition-all duration-100 linear" style="width: 100%;"></div>
            </div>
             {% endif %}
@@ -70,7 +70,7 @@
                     bg-gray-500
                     hover:bg-gray-600
                     {% endif %}
-                    p-4 rounded-lg text-white transition-colors duration-200 answer-option"
+                    p-4 rounded-lg text-white transition-colors duration-200 answer-option overflow-auto break-words hyphens-auto "
                     data-index="{{ forloop.counter0 }}"
                     {% if request.session.mode == "learn" %}
                     onclick="submitAnswer({{ forloop.counter0 }});" {% endif %}>

django/templates/play/game/question_participant.html

@@ -16,7 +16,7 @@
                 <p class="text-gray-700 font-bold text-sm">{{ total_questions }}</p>
             </div>
         </div>
-        <h1 class="text-3xl font-bold mb-6">{{ question_data.question }}</h1>
+        <h1 class="text-xl font-black mb-2 border-blue-500 border-4 p-4 text-center rounded-lg md:text-2xl lg:text-4xl">{{ question_data.question}}</h1>
         
             <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>
@@ -49,7 +49,7 @@
                     bg-gray-500
                     hover:bg-gray-600
                     {% endif %}
-                    p-4 rounded-lg text-white transition-colors duration-200 answer-option"
+                    p-4 rounded-lg text-white transition-colors duration-200 answer-option overflow-auto break-words hyphens-auto "
                     data-index="{{ forloop.counter0 }}"
                     onclick="submitAnswer({{ forloop.counter0 }});">
                     <p class="text-lg">{{ option.value }}</p>
@@ -77,7 +77,7 @@
     let hasAnswered = false;
     const joinCode = '{{ quiz_game.join_code }}';
     const participantId = '{{ participant.participant_id }}';
-    const questionStartTime = {{ start_time }};
+    const questionStartTime = Date.now();
     const questionDuration = '{{ current_question.time_per_question }}'*1000; //Zeit pro Frage (indviduell eingestellt)
     const gameSocket = initializeGameSocket(joinCode);
 

django/templates/play/game/score_overview.html

@@ -11,7 +11,7 @@
             <div class="grid grid-cols-2 gap-4">
                 {% for option in question_data.options %}
                 
-            <div id="option-box-{{ forloop.counter0 }}" class="bg-gray-100 relative p-4 rounded-lg overflow-hidden {% if option.is_correct %} border-2 border-green-500{% else %}border-2 border-red-500{% endif %}">
+            <div id="option-box-{{ forloop.counter0 }}" class="bg-gray-100 relative p-4 rounded-lg overflow-auto break-words hyphens-auto  {% if option.is_correct %} border-2 border-green-500{% else %}border-2 border-red-500{% endif %}">
             
             <div id="option-fill-{{ forloop.counter0 }}" class="absolute left-0 top-0 h-full {% if option.is_correct %}bg-green-300 {% else %}bg-red-300 {% endif %} opacity-50 z-0 transition-all duration-1500 " style="width: 0%;"></div>
             <div class="relative z-10">
@@ -181,9 +181,12 @@
           el.style.transform = 'translateY(20px)';
         }
       });
+      try{
+     document.getElementById("finish-button").style.display = 'none';}
+     catch{}
   
       // Warten bevor Animation startet
-      await sleep(1500);  // <<< hier die Pause
+      await sleep(500);  // <<< hier die Pause
       
   
       // Transition-Eigenschaft setzen nach Render-Zyklus
@@ -200,9 +203,13 @@
   
             if (index === top3.length - 1) {
               triggerConfetti();
+                    try{
+                       
+             document.getElementById("finish-button").style.display = 'block';}
+             catch{}
 
             }
-          }, index * 1500); // Zeitversetzt aufdecken
+          }, index * 1000); // Zeitversetzt aufdecken
         });
       });
     });