settings

Resolve "Suchfunktion verbessern"

Closes #127

See merge request enrichment-2024/qivip!85

.gitignore

@@ -1,5 +1,6 @@
 __pycache__
 .venv
+.env
 db.sqlite3
 tailwindcss.exe
 t-style.css

README.md

@@ -41,7 +41,7 @@ Um das Projekt erfolgreich zu starten, folge diesen Schritten:
    ```
 7. Die Datenbank migrieren:
    ```sh
-   python3 core/manage.py migrate
+   python django/manage.py migrate
    ```
 
 ## Starten des Servers

django/core/settings.py

@@ -10,8 +10,9 @@ For the full list of settings and their values, see
 https://docs.djangoproject.com/en/5.1/ref/settings/
 """
 
-import json
+import json, os
 from pathlib import Path
+from dotenv import load_dotenv
 
 # Build paths inside the project like this: BASE_DIR / 'subdir'.
 BASE_DIR = Path(__file__).resolve().parent.parent
@@ -21,11 +22,17 @@ EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' #TODO: NUR FÜR
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/5.1/howto/deployment/checklist/
 
+# Support env variables from .env file if defined
+env_path = load_dotenv(os.path.join(BASE_DIR, '.env'))
+load_dotenv(env_path)
+
 # SECURITY WARNING: keep the secret key used in production secret!
-SECRET_KEY = 'django-insecure-#+s307$rxkts=8@+_^i)8)n1b4*y4za1xz!mvv(h@!+n9!mp9)'
+#SECRET_KEY = 'django-insecure-#+s307$rxkts=8@+_^i)8)n1b4*y4za1xz!mvv(h@!+n9!mp9)'
+SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY', 'django-insecure-&psk#na5l=p3q8_a+-$4w1f^lt3lx1c@d*p4x$ymm_rn7pwb87')
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = True
+#DEBUG = True
+DEBUG = os.environ.get('DJANGO_DEBUG', '') != 'False'
 
 ALLOWED_HOSTS = ['127.0.0.1', 'localhost', '*']
 
@@ -152,7 +159,7 @@ STATIC_ROOT = BASE_DIR / "staticfiles"
 STATICFILES_DIRS = [BASE_DIR / 'static']
 
 # WhiteNoise configuration
-STATICFILES_STORAGE = 'whitenoise.storage.CompressedStaticFilesStorage'
+STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
 WHITENOISE_SKIP_COMPRESS_EXTENSIONS = ['css', 'js']
 # Return 404 instead of 500 for missing files
 WHITENOISE_MISSING_FILE_ERRNO = None

django/library/views.py

@@ -21,11 +21,21 @@ def quiz_names_json(request):
     form = QuizFilterForm(request.GET)
     if form.is_valid():
         search = form.cleaned_data.get('search')
-        names = list(
-    QivipQuiz.objects.all().annotate(max_amout_questions=Count('questions')).filter(max_amout_questions__gte=1, status='öffentlich', name__icontains=search)
-    .values_list('name', flat=True)
-    .distinct()
-)
+    
+    
+        names = QivipQuiz.objects.all().annotate(max_amout_questions=Count('questions')).filter(max_amout_questions__gte=1, status='öffentlich', name__icontains=search)
+
+    
+    if request.user.is_authenticated:
+        names = names | QivipQuiz.objects.filter(
+        user_id=request.user.id,
+        status='privat',
+        name__icontains=search
+    )
+        
+    names=list(names.values_list('name', flat=True).distinct())
+    
+        
     return JsonResponse(names, safe=False)
 
 def overview_quiz(request):
@@ -260,7 +270,6 @@ def delete_quiz(request, pk):
 
 # Quiz anzeigen
 def detail_quiz(request, pk):
-    #quiz = get_object_or_404(QivipQuiz, pk=pk, user_id=request.user)
     quiz = get_object_or_404(QivipQuiz, pk=pk)
     show_answers = request.GET.get('show_answers', 'false').lower() == 'true'
     questions = QivipQuestion.objects.filter(quiz_id=quiz)
@@ -274,7 +283,11 @@ def detail_quiz(request, pk):
         'questions': questions,
         'detail':show_answers,
     }
-    return render(request, 'library/detail_quiz.html', context)
+    if quiz.status!="privat" or quiz.user_id==request.user:
+        return render(request, 'library/detail_quiz.html', context)
+    else:
+        return redirect('library:overview_quiz')
+
 
 
 @login_required

django/play/consumers.py

@@ -129,6 +129,7 @@ class GameConsumer(AsyncWebsocketConsumer):
                 time_factor = time_remaining / 30000  # 30 seconds max
                 score = int(base_score * (0.5 + 0.5 * time_factor))
             
+            participant.last_score=score
             participant.score += score
             participant.last_answer_correct = is_correct
             participant.save()
@@ -460,7 +461,7 @@ class LobbyConsumer(AsyncWebsocketConsumer):
         if answer == correct_answer:
             # Base score for correct answer + bonus for speed
             score = 1000 + int(time_remaining * 10)  # 10 points per remaining second
-            
+        participant.last_score= score 
         participant.score += score
         participant.save()
         return score

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:
@@ -233,6 +233,7 @@ class GameConsumer(AsyncWebsocketConsumer):
                 answer_obj.time_remaining = time_remaining
                 answer_obj.save()
             
+            participant.last_score = score
             participant.score += score
             participant.last_answer_correct = is_correct
             participant.save()

django/play/migrations/0012_quizgameparticipant_last_score.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-05-22 15:26
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('play', '0011_quizgame_updated_at'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='quizgameparticipant',
+            name='last_score',
+            field=models.IntegerField(default=0, verbose_name='Letzte_Punkte'),
+        ),
+    ]

django/play/models.py

@@ -43,6 +43,7 @@ class QuizGameParticipant(models.Model):
     display_name = models.CharField(verbose_name="Anzeigename", max_length=15)
     quiz_game = models.ForeignKey(QuizGame, on_delete=models.CASCADE, related_name="participants")
     score = models.IntegerField(verbose_name="Punkte", default=0)
+    last_score = models.IntegerField(verbose_name="Letzte_Punkte", default=0)
     avatar = models.CharField(max_length=200, blank=True, default="")
     last_heartbeat = models.DateTimeField(auto_now_add=True)
     last_answer = models.IntegerField(null=True, blank=True)

django/play/views.py

@@ -8,10 +8,20 @@ from django.contrib import messages
 from django.conf import settings
 
 import json
-
+import qrcode
+import base64
+from io import BytesIO
+from django.shortcuts import render
 
 # Create your views here.
 def lobby(request, join_code):
+    relative_url = reverse("play:create_participant", kwargs={"join_code": join_code})
+    full_url = request.build_absolute_uri(relative_url)
+
+    qr = qrcode.make(full_url)
+    buffer = BytesIO()
+    qr.save(buffer, format="PNG")
+    img_base64 = base64.b64encode(buffer.getvalue()).decode("utf-8")
 
     
     
@@ -20,6 +30,7 @@ def lobby(request, join_code):
     context = {
         'quiz': quiz,
         'quiz_game': quiz_game,
+        "qr_code_base64": img_base64,
     }
 
 
@@ -29,6 +40,7 @@ def lobby(request, join_code):
         host_id = request.COOKIES['host_id']
         if host_id == quiz_game.host_id:
             context['host_id'] = host_id
+            context["qr_code_base64"] = img_base64
             return render(request, 'play/lobby.html', context=context)
         elif mode=="learn":
             return redirect('play:create_participant', join_code=join_code)
@@ -45,11 +57,13 @@ def lobby(request, join_code):
         if not participant.quiz_game.join_code == join_code: # Teilnehmer dem richtigen Spiel hinzufügen
             participant.quiz_game = quiz_game
             participant.score = 0  # Reset score when joining new game
+            participant.last_score = 0
             participant.save()
     except QuizGameParticipant.DoesNotExist:
         return redirect('play:create_participant', join_code=join_code)
 
     context['participant'] = participant
+    context["qr_code_base64"] = img_base64
     return render(request, 'play/lobby.html', context=context)
 
 def select_mode(request,join_code):
@@ -70,6 +84,7 @@ def create_participant(request, join_code):
             if participant.quiz_game.join_code != join_code:
                 participant.quiz_game = quiz_game
                 participant.score = 0  # Reset score when joining new game
+                participant.last_score = 0
                 participant.save()
             return redirect('play:lobby', join_code=join_code)
         except QuizGameParticipant.DoesNotExist:
@@ -90,6 +105,7 @@ def create_participant(request, join_code):
         participant.display_name = display_name
         participant.quiz_game = quiz_game
         participant.score = 0  # Initialize score
+        participant.last_score = 0
         participant.save()
 
         response = HttpResponseRedirect(reverse('play:lobby', kwargs={'join_code': join_code}))
@@ -327,6 +343,7 @@ def selected_mode(request, join_code):
             participant.participant_id=host_id
             participant.quiz_game = quiz_game
             participant.score = 0  # Initialize score
+            participant.last_score = 0
             participant.save()
             quiz_game.current_state = "question"
             quiz_game.question_start_time = timezone.now()
@@ -334,5 +351,5 @@ def selected_mode(request, join_code):
   
             return redirect('play:question',join_code)
         
+        return redirect('play:lobby', join_code=join_code)
         
-        return render(request, 'play/lobby.html', context=context)

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>
@@ -68,7 +68,7 @@
                 <br>
                 - alle öffentlichen Quizze können auch ohne Account gespielt werden
                 <br>
-                - qivip ist 100% kostenlos
+                - qivip ist zu 100% kostenlos
                                 <br>
                 - es gibt keine Werbung
                                                 <br>
@@ -133,7 +133,7 @@
                 <br>
                 <br>
                 <b>Moderator: </b>Der Moderator selbst spielt nicht mit. Gehen Sie entweder auf die Startseite und klicken Sie auf "Moderieren" oder klicken einfach auf "spielen" (eines von Ihnen ausgewählten Quizzes) und dann auf Moderiermodus.
-                Der Moderator kann das Spiel, wenn die Teilnehmer da sind starten.
+                Der Moderator kann das Spiel, wenn die Teilnehmer da sind, starten.
                 <br>
                 <br>
                 <b>Teilnehmer: </b>Gehen Sie auf die Startseite und klicken Sie auf "Teilnehmen" und geben Sie dann den beim Moderator angegebenen Zahlencode ein. Anschließlich können Sie noch einen Anzeigenamen eingeben.  

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/library/question/question_input.html

@@ -25,7 +25,7 @@
             </div>
 
             {% if image %}
-            <img src="{{ image.image.url }}" style="max-width: 500px;" alt="Bild der Frage">
+            <img src="{{ image.image.url }}" style="max-width: 100px;" alt="Bild der Frage">
             <label for="reset_image">
                 <input type="checkbox" name="reset_ques_image" id="reset_ques_image">
                 Bild zurücksetzen

django/templates/library/question/question_multiple_choice.html

@@ -25,7 +25,7 @@
 
             
             {% if image %}
-            <img src="{{ image.image.url }}" style="max-width: 500px;" alt="Bild der Frage">
+            <img src="{{ image.image.url }}" style="max-width: 100px;" alt="Bild der Frage">
             <label for="reset_image">
                 <input type="checkbox" name="reset_ques_image" id="reset_ques_image">
                 Bild zurücksetzen

django/templates/library/question/question_true_false.html

@@ -25,7 +25,7 @@
             </div>
 
             {% if image %}
-            <img src="{{ image.image.url }}" style="max-width: 500px;" alt="Bild der Frage">
+            <img src="{{ image.image.url }}" style="max-width: 100px;" alt="Bild der Frage">
             <label for="reset_image">
                 <input type="checkbox" name="reset_ques_image" id="reset_ques_image">
                 Bild zurücksetzen

django/templates/play/game/question_host.html

@@ -15,7 +15,7 @@
 
         {% if question_image %}
             <div class="flex justify-center">
-                <img class="m-4" src="{{ question_image.image.url }}" style="max-width: 500px;" alt="Bild der Frage">
+                <img class="m-4 w-full max-w-[500px] " src="{{ question_image.image.url }}" alt="Bild der Frage">
             </div>
         {% endif %}
         
@@ -73,6 +73,7 @@
 
 {% block extra_js %}
 {% include 'play/game/common_scripts.html' %}
+{% include 'play/game/sound.html' %}
 <script>
     const joinCode = '{{ quiz_game.join_code }}';
     const hostId = '{{ host_id }}';

django/templates/play/game/score_overview.html

@@ -10,40 +10,134 @@
             <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 %}">
-                        <p class="text-lg">{{ option.value }}</p>
-                        <p class="text-gray-600" id="option-count-{{ forloop.counter0 }}">0 Antworten</p>
-                    </div>
+                
+            <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>
         </div>
 
-
         <div class="mb-6">
             <h2 class="text-xl font-bold mb-4">Punktestand</h2>
-            <div id="scoreboard" class="space-y-2">
+
+            <div id="scoreboard" class="leading-relaxed">
                 {% for participant in participants %}
                     {% if participant == my_participant or is_host %}
-                        <div class="p-4 bg-gray-100 rounded-lg flex justify-between items-center border {% if forloop.counter <= 3 %}border-yellow-500{% else %}border-transparent{% endif %}">
-                            <div>  
-                                <p class="text-lg font-bold">
+                        <div class="mt-2 shadow-sm p-4 bg-gray-100 rounded-lg border-2 border {% if forloop.counter <= 3 %}border-yellow-500{% else %}border-transparent{% endif %}">
+                            <div class="flex flex-col items-start gap-1">  
+                                <div class="text-lg font-bold flex items-center gap-2">
                                     {% if forloop.counter == 1 %}
                                         🥇 
                                     {% elif forloop.counter == 2 %}
                                         🥈 
                                     {% elif forloop.counter == 3 %}
                                         🥉 
+                                        {% else %}
+                                        {{ forloop.counter }}.
                                     {% endif %}
-                                    {{ participant.display_name }}
-                                </p>
-                                <p class="text-gray-600">{{ participant.score }} Punkte</p> 
-                            </div>                     
-                            {% if participant.last_answer_correct %}
-                                <span class="text-green-500">✓</span>
+                                    <span class="display_name text-gray-600 font-black text-2xl " id="display_name-{{ forloop.counter0 }}">{{ participant.display_name }}</span>
+                                </div class="flex flex-col items-start">
+                                
+                                <p data-score="{{ participant.score }}" data-last-score="{{ participant.last_score }}" class="text-gray-600 font-bold show-score" id="score-{{ forloop.counter0 }}">{{ participant.score }} Punkte</p> 
+                                {% if participant == my_participant or request.session.mode == "learn"%}
+                                <p class="text-blue-600 font-bold text-sm">+{{ participant.last_score }} Punkte</p>
+                               {% endif %}
+                               </div>
+                            <script>                                
+
+                            async function start() {
+
+                            elements=document.getElementsByClassName("show-score");
+                            for (let i = 0; i < elements.length; i++) {
+                            const el = elements[i];
+
+                            let counter=Number(el.getAttribute('data-score'))-Number(el.getAttribute('data-last-score'));
+                            let goal=Number(el.getAttribute('data-score'));
+                            let interval= setInterval(function(){
+                            el.innerHTML = counter + " Punkte";
+
+                               
+                                if(counter<=goal){
+                            el.innerHTML = counter + " Punkte";
+                            counter+=8;
+                           
+                                }
+                                else{
+                                    
+                                    el.innerHTML = goal + " Punkte";
+                                    clearInterval(interval);
+                                }
+
+                            }, 20);}}
+
+                            function bounce(){
+                                                            
+                            const names = document.getElementsByClassName("display_name");
+                            for (let i = 0; i < names.length; i++) {
+                            names[i].classList.add("animate-bounce");
+                           }
+                            }
+ 
+
+                            {% if is_last_question %}
+                            bounce();
+
+                            {% else %}
+                             start();
+                        
+
+                                {% endif %}
+                                
+                            
+                               
+
+
+
+
+                            </script>
+
+                                                 
+                            
+                            {% if participant == my_participant or request.session.mode == "learn" %}
+                                {% if participant.last_answer_correct %}
+                           
+                            <div class="mt-1 flex justify-center border-t-2 border-gray-300 gap-1">
+
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="pt-2 text-center text-green-500 font-black size-10">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                                </svg>
+
+                                 
+                            <div class=" pt-3  text-center text-gray-600  font-bold" id="antwort-richtig">
+                            Hier erscheint gleich dein Feedback... 
+                            </div>
+                           
+                            </div>
                             {% elif participant.last_answer_correct == False %}
-                                <span class="text-red-500">✗</span>
+
+
+                                <div class="mt-1 flex justify-center border-t-2 border-gray-300 gap-1">
+                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="pt-2 text-center text-red-500 font-black size-10">
+                                    <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                                    </svg>
+
+
+                            <div class=" pt-3  text-center text-gray-600  font-bold" id="antwort-falsch">
+                            Hier erscheint gleich dein Feedback... 
+                            </div>
+                            <div class="flex justify-center border-t-2 border-gray-500 gap-1">
+
+                            {% endif %}
                             {% endif %}
                         </div>
+                        
                     {% endif %}
                 {% endfor %}
             </div>
@@ -51,11 +145,11 @@
  
     {% if is_host %}
         {% if is_last_question %}
-            <button id="finish-button" class="w-full p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
+            <button id="finish-button" class="mt-4 w-full p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
                 Quiz beenden
             </button>
         {% else %}
-            <button id="next-button" class="w-full p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
+            <button id="next-button" class="mt-4 w-full p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
                 Nächste Frage
             </button>
         {% endif %}
@@ -66,6 +160,7 @@
 
 {% block extra_js %}
 {% if is_last_question %}
+
 <script>
     // Hilfsfunktion für Pausen
     function sleep(ms) {
@@ -88,7 +183,8 @@
       });
   
       // Warten bevor Animation startet
-      await sleep(1500);  // <<< hier die 5 Sekunden Pause
+      await sleep(1500);  // <<< hier die Pause
+      
   
       // Transition-Eigenschaft setzen nach Render-Zyklus
       requestAnimationFrame(() => {
@@ -104,6 +200,7 @@
   
             if (index === top3.length - 1) {
               triggerConfetti();
+
             }
           }, index * 1500); // Zeitversetzt aufdecken
         });
@@ -121,7 +218,78 @@
   </script>
 {% endif %}  
 {% include 'play/game/common_scripts.html' %}
+{% if is_host %}
+{% include 'play/game/sound.html' %}
+{% endif %}
+
+
+
+
 <script>
+    
+const richtigeAntworten = [
+  "Deine Antwort ist nicht falsch. Sie ist richtig!",
+  "Ja, du kannst es!",
+  "So kann es weiter gehen.",
+  "Ja, deine Antwort ist korrekt. Was soll ich dazu noch sagen? SUPER!",
+  "SUPER GUT.",
+  "Volltreffer!",
+  "Bravo! Das sitzt!",
+  "Na bitte, geht doch!",
+  "Schön. Einfach schön.",
+  "Exzellent kombiniert, Sherlock!",
+  "Punkt für dich!",
+  "Das war meisterhaft.",
+  "Korrekt - du scheinst das zu können!",
+  "So sieht Erfolg aus!",
+  "Glänzend gelöst!",
+  "Das war keine Glückssache - das war Können!",
+  "Treffer, versenkt!",
+  "Du hast es drauf!",
+  "Da merkt man: Profi am Werk.",
+  "Richtige Antwort - dafür gibt es viele Punkte!",
+  "Weiter so!",
+  "Wow - das war richtig gut!"
+];
+
+const falscheAntworten = [
+  "Oops! War wohl nicht dein Tag.",
+  "Knapp daneben ist auch vorbei!",
+  "Das war... kreativ!",
+  "Wenn man schon alles wüsste, wäre das Quiz doch sinnlos.",
+  "Deine Antwort war einzigartig - leider falsch!",
+  "Na gut, wenigstens hast du es probiert.",
+  "Das war eine interessante Theorie...",
+  "Ein Genie irrt sich auch mal.",
+  "Eine gute Antwort - aber nicht auf diese Frage.",
+  "Das ist leider falsch. Mehr gibt es nicht zu sagen.",
+  "Gute Idee! Aber leider nicht richtig.",
+  "Oh weh! Ein Fehler. Naja, einer ist keiner.",
+  "Die Antwort klang richtig, sie ist es aber nicht.",
+  "Interessanter Ansatz. Nicht hilfreich, aber interessant.",
+  "Nenn das lieber „alternative Fakten“.",
+  "Du hast die richtige Antwort doch gewusst: 'Die Seite hat nur nicht geladen.'",
+  "Jeder fängt mal klein an!",
+  "Kopf hoch - weiter geht's!",
+  "Nobody is perfect!",
+  "Du schaffst das - vielleicht ab jetzt.",
+  "Falsche Antwort, aber guter Wille!",
+  "Übung macht den Quiz-Meister.",
+  "Beim nächsten Mal triffst du!",
+  "Das war nur zum Aufwärmen, oder?",
+  "Kein Problem - weiter geht's.",
+  "Gute Frage - aber falsche Antwort."
+];
+
+
+const antwortRichtig = document.getElementById("antwort-richtig");
+const antwortFalsch = document.getElementById("antwort-falsch");
+
+if (antwortRichtig) {
+  antwortRichtig.textContent = richtigeAntworten[Math.floor(Math.random() * richtigeAntworten.length)];
+} else if (antwortFalsch) {
+  antwortFalsch.textContent = falscheAntworten[Math.floor(Math.random() * falscheAntworten.length)];
+}
     const joinCode = '{{ quiz_game.join_code }}';
     const hostId = '{{ host_id }}';
     const wsScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
@@ -174,17 +342,25 @@
     {% endif %}
     {% endif %}
 
-    function updateAnswerStats(stats) {
-        for (var optionIndex in stats) {
-            if (stats.hasOwnProperty(optionIndex)) {
-                var element = document.getElementById('option-count-' + optionIndex);
-                if (element) {
-                    
-                    element.textContent = stats[optionIndex] + ' Antwort(en)';
-                }
+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 countElement = document.getElementById('option-count-' + optionIndex);
+            var fillElement = document.getElementById('option-fill-' + optionIndex);
+
+            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) {
@@ -193,4 +369,4 @@
         }));
     };
 </script>
-{% endblock %}
+{% endblock %}

django/templates/play/game/sound.html

@@ -0,0 +1,29 @@
+{% load static %}
+
+
+<audio id="bg-music" src="{% static 'mp3/Hintergrundmusik.mp3' %}" autoplay loop ></audio>
+
+<script>
+
+    document.addEventListener("DOMContentLoaded", function () {
+  const audio = document.getElementById("bg-music");
+  const savedTime = localStorage.getItem("bg-music-time");
+
+  if (savedTime) {
+    audio.addEventListener("loadedmetadata", () => {
+      audio.currentTime = parseFloat(savedTime);
+    });
+  }
+
+  document.addEventListener("click", () => {
+    audio.play().catch(e => console.warn("Autoplay blockiert:", e));
+  }, { once: true });
+
+  setInterval(() => {
+    if (!audio.paused) {
+      localStorage.setItem("bg-music-time", audio.currentTime);
+    }
+  }, 0);
+});
+
+</script>

django/templates/play/lobby.html

@@ -8,12 +8,17 @@
         <div class="text-center mb-8">
             <h3 class="text-xl text-gray-600 mb-2">{{ quiz.name }}</h3>
             {% if request.session.mode != "learn" %}
+            {% if host_id %}
             <div class="bg-blue-100 rounded-lg p-4 mb-4">
                 <h1 class="text-4xl font-bold text-blue-800">{{ quiz_game.join_code }}</h1>
+                <div class="w-full flex justify-center my-2">
+                <img src="data:image/png;base64,{{ qr_code_base64 }}" class="h-1/2 w-1/2" alt="QR-Code">
+                </div>
                 <p class="text-sm text-blue-600 mt-1">Spiel-Code</p>
             </div>
         </div>
         {% endif %}
+        {% endif %}
 
         <!-- Participant Info -->
         {% if participant %}
@@ -26,7 +31,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" />

requirements.txt

@@ -6,4 +6,6 @@ pillow~=11.1.0   # Image handling
 whitenoise~=6.6.0  # Static file serving
 django-cleanup
 redis
-channels_redis
+channels_redis
+python-dotenv    # Production server safety
+qrcode~=7.4.2