Merge branch '121-teilnehmer-nicht-uberdecken' into 'master'

Resolve "Teilnehmer nicht überdecken"

Closes #121

See merge request enrichment-2024/qivip!78

django/play/consumers/game.py

@@ -188,7 +188,7 @@ class GameConsumer(AsyncWebsocketConsumer):
             question_data = json.loads(current_question.data)
             print(answer_index)
             try:
-                #if answer_index >= 0 :  # -1 means timeout
+                if answer_index >= 0 :  # -1 means timeout
                     is_correct = question_data['options'][answer_index]['is_correct']
                     print(is_correct)
             except:

django/templates/accounts/register.html

@@ -42,7 +42,9 @@
                     {{ form.email }}
     
                     </div>
-      
+        <div class="text-center text-gray-600 text-sm dislay-flex align-bottom">
+            <label class=''>Mit der Erstellung ihres Kontos stimmen Sie der <a class="text-blue-600" href="/privacy">Datenschutzerklärung </a> zu.</label>
+        </div>
             <button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200" type="submit" class="login-button">Registrieren</button>
         </form>
         <button class="text-center text-sm w-full mt-2 font-light text-blue-600"><a href="{% url 'accounts:login' %}" class="register_link">Bereits ein Konto?</a></button>

django/templates/homepage/home.html

@@ -4,7 +4,7 @@
 <div class="grid place-content-center md:h-screen h-150 w-full -z-50 top-0 p-4">
     <div class="text-center">
         <h2 class="font-bold md:text-8xl text-6xl md:mb-8 text-blue-600">qivip</h2>
-        <h3 class="mt-4 italic font-extralight sm:text-2xl text-md">Interaktives Lernen neu definiert.</h3>
+        <h3 class="mt-4 italic font-extralight sm:text-4xl text-md">forever and forall</h3>
     </div>
     <div class="grid sm:grid-cols-3 place-items-stretch text-center mt-8 gap-4 p-4 border-3 bg-blue-100 border-blue-100 rounded-md">
         <a class="qp-a-button bg-green-500 text-white" href="{% url 'play:join_game' %}">Teilnehmen</a>

django/templates/library/detail_quiz.html

@@ -237,4 +237,5 @@
 </div>
 
 </div>
+
 {% endblock %}

django/templates/library/form.html

@@ -18,7 +18,9 @@
             <input  class="bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400" type="file" name="quiz_image" id="quiz_image">
         </div>
 
-
+       <div class="text-center text-gray-600 text-sm dislay-flex align-bottom">
+            <label class=''>Mit der Erstellung von diesem Quiz stimmen Sie der <a class="text-blue-600" href="/privacy">Datenschutzerklärung </a> zu.</label>
+        </div>
 
         <div class="flex justify-center space-x-3">
             <a href="{% if object.quiz_id %}{% url 'library:detail_quiz' object.quiz_id.id %}{% else %}{% url 'library:overview_quiz' %}{% endif %}" 

django/templates/play/game/score_overview.html

@@ -10,9 +10,15 @@
             <p class="text-lg mb-2">{{ question_data.question }}</p>
             <div class="grid grid-cols-2 gap-4">
                 {% for option in question_data.options %}
-                    <div class="p-4 rounded-lg {% if option.is_correct %}bg-green-100 border-2 border-green-500 {% else %} bg-gray-100 {% endif %}">
+                
+            <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-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">
             <p class="text-lg">{{ option.value }}</p>
             <p class="text-gray-600" id="option-count-{{ forloop.counter0 }}">0 Antworten</p>
+             
+            </div>
         </div>
                 {% endfor %}
             </div>
@@ -36,7 +42,7 @@
                                     {% endif %}
                                     {{ participant.display_name }}
                                 </p>
-                                <p class="text-gray-600">{{ participant.score }} Punkte</p> 
+                                <p data-last-score="{{ participant.last_score }}" class="text-gray-600" id="score-{{ forloop.counter0 }}">{{ participant.score }} Punkte</p> 
                             </div>                     
                             {% if participant.last_answer_correct %}
                                 <span class="text-green-500">✓</span>
@@ -66,6 +72,7 @@
 
 {% block extra_js %}
 {% if is_last_question %}
+
 <script>
     // Hilfsfunktion für Pausen
     function sleep(ms) {
@@ -174,17 +181,25 @@
     {% endif %}
     {% endif %}
 
-    function updateAnswerStats(stats) {
+function updateAnswerStats(stats) {
+    const total = Object.values(stats).reduce((a, b) => a + b, 0) || 1;
+
     for (var optionIndex in stats) {
         if (stats.hasOwnProperty(optionIndex)) {
-                var element = document.getElementById('option-count-' + optionIndex);
+            var countElement = document.getElementById('option-count-' + optionIndex);
-                if (element) {
+            var fillElement = document.getElementById('option-fill-' + optionIndex);
 
-                    element.textContent = stats[optionIndex] + ' Antwort(en)';
+            if (countElement) {
-                }
+                countElement.textContent = stats[optionIndex] + ' Antwort(en)';
+            }
+
+            if (fillElement) {
+                const percentage = Math.round((stats[optionIndex] / total) * 100);
+                fillElement.style.width = percentage + '%';
             }
         }
     }
+}
 
     // Request answer stats when page loads
     gameSocket.onopen = function(e) {

django/templates/play/lobby.html

@@ -26,7 +26,7 @@
         {% endif %}
 
         <!-- Participants List -->
-        <div class="mb-6">
+        <div class="mb-6 overflow-y-scroll max-h-96">
             <h3 class="font-bold text-lg mb-3 flex items-center">
                 <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />