Abstand verändert

Resolve "Design Quiz Formular"

Closes #158

See merge request enrichment-2024/qivip!115

.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
@@ -170,3 +170,12 @@ Die Konfiguration des Projekts befindet sich im `config/qivip_config.json`.
 | Variable | Bedeutung | Optionen |
 | --- | --- | --- |
 | ENABLE_RATING_SYSTEM | Soll das Bewertungssystem aktiviert werden? | true [Standard], false |
+
+
+## Lizenzen für node_modules
+1. Installation: npm install license-checker --save-dev
+
+npx license-checker --markdown > THIRD_PARTY_LICENSES.md
+## für Python Packete:
+
+pip-licenses --format=markdown > THIRD_PARTY_LICENSES_PYTHON.md

django/THIRD_PARTY_LICENSES_PYTHON.md

@@ -0,0 +1,44 @@
+| Name               | Version      | License                                                 |
+|--------------------|--------------|---------------------------------------------------------|
+| Automat            | 25.4.16      | MIT License                                             |
+| Django             | 5.1.13       | BSD License                                             |
+| Twisted            | 25.5.0       | MIT License                                             |
+| asgiref            | 3.10.0       | BSD License                                             |
+| attrs              | 25.4.0       | UNKNOWN                                                 |
+| autobahn           | 25.10.1      | UNKNOWN                                                 |
+| certifi            | 2025.10.5    | Mozilla Public License 2.0 (MPL 2.0)                    |
+| cffi               | 2.0.0        | UNKNOWN                                                 |
+| channels           | 4.2.2        | BSD License                                             |
+| channels_redis     | 4.3.0        | BSD                                                     |
+| chardet            | 5.2.0        | GNU Lesser General Public License v2 or later (LGPLv2+) |
+| charset-normalizer | 3.4.4        | MIT                                                     |
+| colorama           | 0.4.6        | BSD License                                             |
+| constantly         | 23.10.4      | MIT License                                             |
+| cryptography       | 46.0.3       | UNKNOWN                                                 |
+| daphne             | 4.1.2        | BSD License                                             |
+| django-cleanup     | 9.0.0        | MIT License                                             |
+| geographiclib      | 2.1          | MIT                                                     |
+| geopy              | 2.4.1        | MIT License                                             |
+| hyperlink          | 21.0.0       | MIT License                                             |
+| idna               | 3.11         | UNKNOWN                                                 |
+| incremental        | 24.7.2       | MIT License                                             |
+| msgpack            | 1.1.2        | UNKNOWN                                                 |
+| pillow             | 11.1.0       | CMU License (MIT-CMU)                                   |
+| pyOpenSSL          | 25.3.0       | Apache Software License                                 |
+| pyasn1             | 0.6.1        | BSD License                                             |
+| pyasn1_modules     | 0.4.2        | BSD License                                             |
+| pycparser          | 2.23         | BSD License                                             |
+| pypng              | 0.20220715.0 | MIT License                                             |
+| python-dotenv      | 1.1.1        | BSD License                                             |
+| qrcode             | 7.4.2        | BSD License                                             |
+| redis              | 6.4.0        | MIT License                                             |
+| reportlab          | 4.2.5        | BSD License                                             |
+| requests           | 2.32.5       | Apache Software License                                 |
+| service-identity   | 24.2.0       | MIT License                                             |
+| sqlparse           | 0.5.3        | BSD License                                             |
+| txaio              | 25.9.2       | UNKNOWN                                                 |
+| typing_extensions  | 4.15.0       | UNKNOWN                                                 |
+| tzdata             | 2025.2       | Apache Software License                                 |
+| urllib3            | 2.5.0        | UNKNOWN                                                 |
+| whitenoise         | 6.6.0        | MIT License                                             |
+| zope.interface     | 8.0.1        | Zope Public License                                     |

django/accounts/views.py

@@ -6,13 +6,19 @@ from django.contrib.auth.forms import PasswordChangeForm
 from django.contrib.auth import update_session_auth_hash
 from django.contrib import messages
 from django.contrib.auth import logout
-
+from library.models import QivipQuiz, QivipQuestion
 
 
 # Create your views here.
 @login_required
 def home(request):
-    return render(request, 'accounts/home.html')
+    my_quizzes_number=QivipQuiz.objects.filter(user_id=request.user).count()
+    my_questions_number = QivipQuestion.objects.filter(quiz_id__user_id=request.user).count()
+    context = {
+        'my_quizzes_number': my_quizzes_number,
+        'my_questions_number': my_questions_number,
+    }
+    return render(request, 'accounts/home.html', context=context)
 
 
 

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,18 @@ 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 = False
+#DEBUG = os.environ.get('DJANGO_DEBUG', '') != 'False'
 
 ALLOWED_HOSTS = ['127.0.0.1', 'localhost', '*']
 
@@ -48,6 +56,7 @@ INSTALLED_APPS = [
     'django.contrib.staticfiles',
     'channels',
     'django_cleanup',
+    'django.contrib.humanize',
 ]
 
 MIDDLEWARE = [
@@ -86,7 +95,7 @@ CHANNEL_LAYERS = {
     "default": {
         "BACKEND": "channels_redis.core.RedisChannelLayer",
         "CONFIG": {
-            "hosts": [("127.0.0.1", 6379)],
+            "hosts": [("127.0.0.1", 6380)],
         },
     },
 }
@@ -152,7 +161,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
@@ -167,3 +176,13 @@ import os
 
 MEDIA_URL = '/media/'  # URL, um auf Medien-Dateien zuzugreifen
 MEDIA_ROOT = os.path.join(BASE_DIR, 'media')  # Speicherort für hochgeladene Dateien
+
+# Email Settings
+EMAIL_BACKEND = 'django.core.mail.backends.smtp.EmailBackend'
+EMAIL_HOST = 'postoffice.katharineum.de'
+EMAIL_PORT = 587 # 25
+EMAIL_USE_TLS = True
+EMAIL_HOST_USER = 'qivip-mail@katharineum.de'
+EMAIL_HOST_PASSWORD = '<password>'
+EMAIL_USE_SSL = False
+DEFAULT_FROM_EMAIL = 'qivip-mail@katharineum.de'

django/homepage/admin.py

@@ -1,3 +1,8 @@
 from django.contrib import admin
-
+from .models import QivipFaq
 # Register your models here.
+class QivipFaqAdmin(admin.ModelAdmin):
+     list_display = ('question','answer',)  
+
+# Registrierung der Modelle im Admin
+admin.site.register(QivipFaq, QivipFaqAdmin)

django/homepage/migrations/0001_initial.py

@@ -0,0 +1,22 @@
+# Generated by Django 5.1.7 on 2025-06-01 17:16
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='QivipFAQs',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('question', models.CharField(max_length=200)),
+                ('answer', models.CharField(max_length=1000)),
+            ],
+        ),
+    ]

django/homepage/migrations/0002_rename_qivipfaqs_qivipfaq.py

@@ -0,0 +1,17 @@
+# Generated by Django 5.1.7 on 2025-06-01 17:30
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('homepage', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.RenameModel(
+            old_name='QivipFAQs',
+            new_name='QivipFaq',
+        ),
+    ]

django/homepage/migrations/0003_alter_qivipfaq_answer_alter_qivipfaq_question.py

@@ -0,0 +1,23 @@
+# Generated by Django 5.1.7 on 2025-06-01 17:31
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('homepage', '0002_rename_qivipfaqs_qivipfaq'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipfaq',
+            name='answer',
+            field=models.TextField(max_length=1000),
+        ),
+        migrations.AlterField(
+            model_name='qivipfaq',
+            name='question',
+            field=models.TextField(max_length=200),
+        ),
+    ]

django/homepage/models.py

@@ -1,3 +1,6 @@
 from django.db import models
 
 # Create your models here.
+class QivipFaq(models.Model):
+    question = models.TextField(max_length=200) 
+    answer = models.TextField(max_length=1000) 

django/homepage/views.py

@@ -1,7 +1,10 @@
 from django.shortcuts import render, redirect
+from .models import QivipFaq
 
 def home(request):
-    return render(request, 'homepage/home.html')
+    faqs=QivipFaq.objects.all()
+    context={"faqs": faqs}
+    return render(request, 'homepage/home.html', context)
 
 def impress(request):
     return render(request, 'homepage/impress.html')

django/library/admin.py

@@ -1,14 +1,14 @@
 from django.contrib import admin
-from .models import QivipQuiz, QivipQuestion, QivipQuizFavorite, QuestionImage, QuizCategory, QuizImage
+from .models import QivipQuiz, QivipQuestion, QivipQuizFavorite, QuestionImage, QuizCategory, QuizImage, QuizRating
 
 # Für das QivipQuiz Modell
 class QivipQuizAdmin(admin.ModelAdmin):
-    list_display = ('name', 'user_id', 'status', 'category', 'creation_date', 'update_date')  # Welche Felder sollen in der Übersicht angezeigt werden
+    list_display = ('name','published_at', 'user_id', 'status', 'category', 'creation_date', 'update_date')  # Welche Felder sollen in der Übersicht angezeigt werden
     search_fields = ('name', 'user_id__username', 'category__name')  # Suchfelder
     list_filter = ('status', 'category')  # Filteroptionen
 # Für das QivipQuestion Modell
 class QivipQuestionAdmin(admin.ModelAdmin):
-    list_display = ('id', 'quiz_id', 'data', 'creation_date', 'update_date')
+    list_display = ('id', 'quiz_id', 'data', 'creation_date', 'update_date', 'credits')
     search_fields = ('data',)
     list_filter = ('quiz_id',)
 
@@ -30,10 +30,35 @@ class QuizImageAdmin(admin.ModelAdmin):
 class QuestionImageAdmin(admin.ModelAdmin):
      list_display = ('image',)  
 
+
+from django import forms
+from .models import QuizCategory
+
+class QuizCategoryForm(forms.ModelForm):
+    color = forms.CharField(
+        widget=forms.TextInput(attrs={'type': 'color'})
+    )
+
+    class Meta:
+        model = QuizCategory
+        fields = '__all__'
+from django.utils.html import format_html
+@admin.register(QuizCategory)
+class QuizCategoryAdmin(admin.ModelAdmin):
+    form = QuizCategoryForm
+    list_display = ('name', 'color_preview', 'color')
+
+    def color_preview(self, obj):
+        return format_html(
+            '<div style="width: 24px; height: 24px; background-color: {}; border: 2px solid #000;"></div>',
+            obj.color
+        )
+    color_preview.short_description = "Farbe"       
+        
 # Registrierung der Modelle im Admin
 admin.site.register(QivipQuiz, QivipQuizAdmin)
 admin.site.register(QivipQuestion, QivipQuestionAdmin)
-admin.site.register(QuizCategory, QuizCategoryAdmin)
+#admin.site.register(QuizCategory, QuizCategoryAdmin)
 admin.site.register(QivipQuizFavorite, QivipQuizFavoriteAdmin)
 admin.site.register(QuizImage, QuizImageAdmin)
 admin.site.register(QuestionImage, QuestionImageAdmin)

django/library/forms.py

@@ -1,11 +1,20 @@
 from django import forms
-from .models import QivipQuiz, QivipQuestion
+from .models import QivipQuiz, QivipQuestion, QuizCategory
 
 class QuizForm(forms.ModelForm):
     class Meta:
         model = QivipQuiz
         fields = ['name', 'description', 'status', 'category','difficulty','credits']
 
+    def __init__(self, *args, **kwargs):
+        super(QuizForm, self).__init__(*args, **kwargs)
+        for field in self.fields.values():
+            field.widget.attrs.update({
+                'class': 'dark:bg-[#2a2f3a]! dark:text-white!'
+            })
+          
+           
+
 class QuestionForm(forms.ModelForm):
     class Meta:
         model = QivipQuestion
@@ -19,13 +28,20 @@ class QuizFilterForm(forms.Form):
     }))
 
 
-    min_amout_questions = forms.IntegerField(required=False, min_value=1,   label="Minimale Anzahl an Fragen", widget=forms.NumberInput(attrs={
+    min_amount_questions = forms.IntegerField(required=False, min_value=1,   label="Minimale Anzahl an Fragen", widget=forms.NumberInput(attrs={
         'class': 'border-2 border-gray-300 rounded-lg p-2 w-full'
     }))
 
-    max_amout_questions = forms.IntegerField(required=False, min_value=1,  label="Maximale Anzahl an Fragen", widget=forms.NumberInput(attrs={
+    max_amount_questions = forms.IntegerField(required=False, min_value=1,  label="Maximale Anzahl an Fragen", widget=forms.NumberInput(attrs={
         'class': 'border-2 border-gray-300 rounded-lg p-2 w-full'
     }))
     user = forms.CharField(required=False, label="von User", widget=forms.TextInput(attrs={
         'class': 'border-2 border-gray-300 rounded-lg p-2 w-full'
     }))
+    categories = forms.ModelChoiceField(
+        queryset=QuizCategory.objects.filter().distinct(),
+        required=False,
+        label="Kategorie",
+        widget=forms.Select(attrs={
+            'class': 'border-2 border-gray-300 rounded-lg p-2 w-full dark:bg-[#2a2f3a] dark:text-white'
+        }))

django/library/migrations/0054_qivipquestion_credits.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-06-13 16:10
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0053_questionimage_quizimage_alter_qivipquestion_image_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='qivipquestion',
+            name='credits',
+            field=models.TextField(blank=True),
+        ),
+    ]

django/library/migrations/0055_qivipquiz_published_at.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-06-26 16:46
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0054_qivipquestion_credits'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='qivipquiz',
+            name='published_at',
+            field=models.DateTimeField(blank=True, null=True),
+        ),
+    ]

django/library/migrations/0056_alter_quizrating_unique_together.py

@@ -0,0 +1,17 @@
+# Generated by Django 5.1.7 on 2025-06-27 12:35
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0055_qivipquiz_published_at'),
+    ]
+
+    operations = [
+        migrations.AlterUniqueTogether(
+            name='quizrating',
+            unique_together=set(),
+        ),
+    ]

django/library/migrations/0057_quizcategory_color.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-07-02 11:31
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0056_alter_quizrating_unique_together'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='quizcategory',
+            name='color',
+            field=models.CharField(default='#000000', help_text='Farbe als Hex-Code, z.B. #ff0000', max_length=7),
+        ),
+    ]

django/library/migrations/0058_qivipquiz_quiz_played_lernmodus_and_more.py

@@ -0,0 +1,33 @@
+# Generated by Django 5.1.7 on 2025-11-14 14:51
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0057_quizcategory_color'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='qivipquiz',
+            name='quiz_played_Lernmodus',
+            field=models.IntegerField(blank=True, default=0, null=True),
+        ),
+        migrations.AddField(
+            model_name='qivipquiz',
+            name='quiz_played_Moderiermodus',
+            field=models.IntegerField(blank=True, default=0, null=True),
+        ),
+        migrations.AddField(
+            model_name='qivipquiz',
+            name='quiz_played_Moderiermodus_players',
+            field=models.IntegerField(blank=True, default=0, null=True),
+        ),
+        migrations.AddField(
+            model_name='qivipquiz',
+            name='single_player_or_multiple',
+            field=models.CharField(blank=True, max_length=20),
+        ),
+    ]

django/library/migrations/0059_remove_qivipquiz_single_player_or_multiple.py

@@ -0,0 +1,17 @@
+# Generated by Django 5.1.7 on 2025-11-14 15:04
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0058_qivipquiz_quiz_played_lernmodus_and_more'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='qivipquiz',
+            name='single_player_or_multiple',
+        ),
+    ]

django/library/models.py

@@ -3,7 +3,7 @@ from django.contrib.auth.models import User
 from django.utils.text import slugify
 import uuid
 from django.core.exceptions import ValidationError
-
+from django.utils import timezone
 
 class QuizImage(models.Model):
     image = models.ImageField(max_length=256,verbose_name="Bild", upload_to='quiz_images/', blank=True, null=True)  # Bild speichern in media/quiz_images/
@@ -45,6 +45,10 @@ class QivipQuiz(models.Model):
     )
    
 
+    quiz_played_Lernmodus = models.IntegerField(null=True, blank=True, default=0)
+    quiz_played_Moderiermodus= models.IntegerField(null=True, blank=True, default=0)
+    quiz_played_Moderiermodus_players= models.IntegerField(null=True, blank=True, default=0)
+
     uuid = models.UUIDField(default=uuid.uuid4, editable=False, unique=True)
     user_id = models.ForeignKey(User, on_delete=models.CASCADE, related_name='quiz')
     #creator = models.ForeignKey(User, on_delete=models.SET_NULL,blank=True, null=True, related_name='creator_quiz')
@@ -59,6 +63,10 @@ class QivipQuiz(models.Model):
     credits=models.TextField(blank=True, editable=True)
     average_rating = models.FloatField(default=3.0)
     rating_count = models.IntegerField(default=0)
+    published_at = models.DateTimeField(null=True, blank=True)  # manuell gesetzt, wenn veröffentlicht
+
+    def is_published(self):
+        return self.published_at is not None and self.published_at <= timezone.now()
     def __str__(self):
 
         return self.name
@@ -98,6 +106,7 @@ class QivipQuestion(models.Model):
     on_delete=models.PROTECT,
     related_name="questions"
 )
+    credits=models.TextField(blank=True, editable=True)
 
     def __str__(self):
         return self.data[:50]
@@ -110,9 +119,22 @@ class QuizRating(models.Model):
     rating = models.IntegerField(choices=[(i, str(i)) for i in range(1, 6)])
     created_at = models.DateTimeField(auto_now_add=True)
 
-    class Meta:
-        unique_together = ('quiz', 'participant_id')
+    #class Meta:
+        #unique_together = ('quiz', 'participant_id')
 
+    def save(self, *args, **kwargs):
+        super().save(*args, **kwargs)
+
+        # Update quiz average rating (immer, auch bei Updates)
+        quiz = self.quiz
+        total_ratings = quiz.ratings.count()
+        avg_rating = quiz.ratings.aggregate(models.Avg('rating'))['rating__avg']
+        quiz.average_rating = round(avg_rating, 1) if avg_rating else 3.0
+        quiz.rating_count = total_ratings
+        quiz.save()
+
+
+"""
     def save(self, *args, **kwargs):
         is_new = self.pk is None
         super().save(*args, **kwargs)
@@ -124,12 +146,18 @@ class QuizRating(models.Model):
             avg_rating = quiz.ratings.aggregate(models.Avg('rating'))['rating__avg']
             quiz.average_rating = round(avg_rating, 1) if avg_rating else 3.0
             quiz.rating_count = total_ratings
-            quiz.save()
+            quiz.save()"""
 
 class QuizCategory(models.Model):
     name = models.CharField(max_length=100, unique=True)
     description = models.TextField(blank=True, null=True)
     slug = models.SlugField(unique=True, blank=True)
+    color= models.CharField(
+        max_length=7,
+        default="#000000",
+        help_text="Farbe als Hex-Code, z.B. #ff0000"
+    )
+
 
     def save(self, *args, **kwargs):
         if not self.slug:

django/library/urls.py

@@ -7,6 +7,9 @@ app_name = 'library'
 
 urlpatterns = [
     path('', views.overview_quiz, name='overview_quiz'),
+    path('my/', views.overview_quiz_my, name='overview_quiz_my'),
+    path('favorites/', views.overview_quiz_favorites, name='overview_quiz_favorites'),
+
     path('new/', views.new_quiz, name='new_quiz'),
     path('edit/<int:pk>/', views.edit_quiz, name='edit_quiz'),
     path('delete/<int:pk>/', views.delete_quiz, name='delete_quiz'),
@@ -17,5 +20,7 @@ urlpatterns = [
     path('detail/copy/<int:pk>/', views.copy_quiz, name='copy_quiz'),
     path('favorite_quiz/<int:pk>/', views.favorite_quiz, name='favorite_quiz'),
     path("quiz-names-json/", views.quiz_names_json, name="quiz_names_json"),
+    #path('quiz/<int:pk>/pdf/', views.pdf_solution, name='quiz_solution'),
+    #path('quiz/<int:pk>/pdf/task', views.pdf_task, name='quiz_task'),
 
 ]

django/library/views.py

@@ -14,20 +14,514 @@ from .models import QivipQuiz
 from .forms import QuizFilterForm
 from django.db.models import Count
 from django.contrib.auth.models import User
+from urllib.parse import urlparse, urlunparse
 # Übersicht aller Quizze
 
+from reportlab.lib.pagesizes import A4
+from reportlab.lib.styles import getSampleStyleSheet, ParagraphStyle
+from reportlab.platypus import SimpleDocTemplate, Paragraph, Spacer, Table, TableStyle
+from reportlab.lib import colors
+from django.http import HttpResponse
+import json
+from datetime import datetime
+from reportlab.platypus import Image
+
+from reportlab.lib import colors
+from reportlab.platypus import SimpleDocTemplate, Paragraph, Spacer, Table, TableStyle, HRFlowable
+from reportlab.lib.styles import getSampleStyleSheet, ParagraphStyle
+from reportlab.lib.pagesizes import A4
+from django.http import HttpResponse
+from django.shortcuts import get_object_or_404
+import json
+from io import BytesIO
+import requests
+from django.core.files.storage import default_storage
+from PIL import Image as PILImage,  ImageOps
+from django.conf import settings
+import os
+from django.utils.html import escape
+"""
+def pdf_solution(request, pk):
+    quiz = get_object_or_404(QivipQuiz, pk=pk)
+    
+    questions = QivipQuestion.objects.filter(quiz_id=quiz)
+
+    for question in questions:
+        if question.data:
+            question.data = json.loads(question.data)
+
+    response = HttpResponse(content_type='application/pdf')
+    response['Content-Disposition'] = f'attachment; filename="Lösungen - {quiz.name}.pdf"'
+
+    doc = SimpleDocTemplate(response, pagesize=A4,
+                            rightMargin=40, leftMargin=40,
+                            topMargin=60, bottomMargin=60)
+
+    styles = getSampleStyleSheet()
+
+    # Stil für Quiz-Titel
+    title_style = ParagraphStyle(
+        'TitleStyle',
+        parent=styles['Title'],
+        alignment=1,  # zentriert
+        fontSize=14,
+        spaceAfter=2,
+    )
+
+    # Stil für Fragen-Box
+    question_box_style = ParagraphStyle(
+        'QuestionBox',
+        fontSize=10,
+        leading=16,
+        fontName='Helvetica-Bold',
+       
+       
+        spaceAfter=8,
+        leftIndent=6,
+        rightIndent=6,
+
+        alignment=0
+    )
+
+    # Stil für Antwort (richtig)
+    answer_correct_style = ParagraphStyle(
+        'AnswerCorrect',
+        fontSize=11,
+        leading=14,
+        textColor=colors.green,
+        leftIndent=20,
+        spaceAfter=4,
+    )
+
+    # Stil für Antwort (falsch)
+    answer_wrong_style = ParagraphStyle(
+        'AnswerWrong',
+        fontSize=11,
+        leading=14,
+        textColor=colors.red,
+        leftIndent=20,
+        spaceAfter=4,
+    )
+
+    # Stil für normalen Antwort-Text (ohne Antwortanzeige)
+    answer_neutral_style = ParagraphStyle(
+        'AnswerNeutral',
+        fontSize=11,
+        leading=14,
+        textColor=colors.black,
+        leftIndent=20,
+        spaceAfter=4,
+    )
+    date_style = ParagraphStyle(
+    name='RightAligned',
+    parent=styles['Normal'],
+    alignment=2,
+)
+
+    story = []
+
+    story.append(Paragraph(f"Quiz: {quiz.name}", title_style))
+    story.append(Paragraph(f"- Lösungen -", title_style))
+    story.append(Spacer(1, 20))
+
+    story.append(Paragraph(datetime.today().strftime("%d.%m.%Y"),  date_style))
+    story.append(Spacer(1, 20))
+
+    if quiz.description:
+        story.append(Paragraph(quiz.description, styles['Normal']))
+        story.append(Spacer(1, 20))
+    
+
+
+    for i, question in enumerate(questions, start=1):
+        data = question.data
+        frage_text = data.get('question', 'Frage nicht gefunden.')
+
+        story.append(Paragraph(f"Frage {i}: {frage_text}", question_box_style))
+        story.append(Spacer(1, 6))
+
+        rl_image = None
+        if hasattr(question, 'image') and question.image and question.image.image:
+            image_url = request.build_absolute_uri(question.image.image.url)
+            img_response = requests.get(image_url)
+            if img_response.status_code == 200:
+                image_data = BytesIO(img_response.content)
+                pil_image = PILImage.open(image_data)
+                pil_image = ImageOps.exif_transpose(pil_image)
+                orig_width, orig_height = pil_image.size
+                max_width = 80
+                max_height = 80
+                ratio = min(max_width / orig_width, max_height / orig_height)
+                new_width = orig_width * ratio
+                new_height = orig_height * ratio
+                output = BytesIO()
+                pil_image.save(output, format='JPEG')
+                output.seek(0)
+
+                rl_image = Image(output, width=new_width, height=new_height)
+
+        options = data.get('options', [])
+        answer_paragraphs = []
+        for idx, option in enumerate(options, start=1):
+            opt_text = option.get('value', '')
+            if option.get('is_correct', False):
+                text = f"✔ {opt_text}"
+                style = answer_correct_style
+            else:
+                text = f"✘ {opt_text}"
+                style = answer_wrong_style
+            answer_paragraphs.append(Paragraph(text, style))
+
+        if rl_image:
+        # Tabelle mit Bild links und Antworten rechts
+         from reportlab.platypus import Table, TableStyle
+         from reportlab.lib.units import cm
+         data_table = [[rl_image, answer_paragraphs]]
+         table = Table(data_table, colWidths=[6*cm, 10*cm])
+         table.setStyle(TableStyle([
+            ('VALIGN', (0,0), (-1,-1), 'TOP'),
+            ('LEFTPADDING', (0,0), (-1,-1), 0),
+            ('RIGHTPADDING', (0,0), (-1,-1), 10),
+        ]))
+         story.append(table)
+        else:
+        # Kein Bild, Antworten einfach nacheinander
+            for p in answer_paragraphs:
+                story.append(p)
+
+        story.append(Spacer(1, 12))
+        story.append(HRFlowable(width="100%", thickness=1, color=colors.grey))
+        story.append(Spacer(1, 12))
+    current_url = request.build_absolute_uri(f"/library/detail/{quiz.pk}/")
+    escaped_url = escape(current_url)  # Sicherheitshalber escapen
+
+    link_html = f'<a href="{escaped_url}" color="blue">{escaped_url}</a>'
+    story.append(Paragraph(link_html, styles['Normal']))
+    
+
+    doc.build(story)
+    return response
+def pdf_task(request, pk):
+    quiz = get_object_or_404(QivipQuiz, pk=pk)
+    questions = QivipQuestion.objects.filter(quiz_id=quiz)
+
+    for question in questions:
+        if question.data:
+            question.data = json.loads(question.data)
+
+    response = HttpResponse(content_type='application/pdf')
+    response['Content-Disposition'] = f'attachment; filename="Aufgabenblatt - {quiz.name}.pdf"'
+
+    doc = SimpleDocTemplate(response, pagesize=A4,
+                            rightMargin=40, leftMargin=40,
+                            topMargin=60, bottomMargin=60)
+
+    styles = getSampleStyleSheet()
+
+    title_style = ParagraphStyle(
+        'TitleStyle',
+        parent=styles['Title'],
+        alignment=1,
+        fontSize=14,
+        spaceAfter=2,
+        fontName='Helvetica-Bold',
+    )
+
+    question_box_style = ParagraphStyle(
+        'QuestionBox',
+        fontSize=10,
+        leading=16,
+        fontName='Helvetica-Bold',
+        spaceAfter=8,
+        leftIndent=6,
+        rightIndent=6,
+        alignment=0
+    )
+
+    
+
+    answer_neutral_style = ParagraphStyle(
+        'AnswerNeutral',
+        fontSize=11,
+        leading=14,
+        textColor=colors.black,
+        leftIndent=20,
+        spaceAfter=4,
+    )
+
+    date_style = ParagraphStyle(
+        name='RightAligned',
+        parent=styles['Normal'],
+        alignment=2,
+    )
+    
+    name_style = ParagraphStyle(
+        name='RightAligned',
+        parent=styles['Normal'],
+        alignment=0,
+    )
+    story = []
+
+    # Titel & Datum
+    story.append(Paragraph(f"Aufgabenblatt: {quiz.name}", title_style))
+    story.append(Spacer(1, 20))
+    story.append(Paragraph(datetime.today().strftime("%d.%m.%Y"), date_style))
+    story.append(Spacer(1, 20))
+    story.append(Paragraph("Name: ", name_style))
+    story.append(Spacer(1, 20))
+
+    if quiz.description:
+        story.append(Paragraph(quiz.description, styles['Normal']))
+        story.append(Spacer(1, 20))
+
+    for i, question in enumerate(questions, start=1):
+        data = question.data
+        frage_text = data.get('question', 'Frage nicht gefunden.')
+        story.append(Paragraph(f"Frage {i}: {frage_text}", question_box_style))
+        story.append(Spacer(1, 6))
+
+        rl_image = None
+        if hasattr(question, 'image') and question.image and question.image.image:
+            image_url = request.build_absolute_uri(question.image.image.url)
+            img_response = requests.get(image_url)
+            if img_response.status_code == 200:
+                image_data = BytesIO(img_response.content)
+                pil_image = PILImage.open(image_data)
+                pil_image = ImageOps.exif_transpose(pil_image)
+                orig_width, orig_height = pil_image.size
+                max_width = 80  # gleich wie bei Lösungen
+                max_height = 80
+                ratio = min(max_width / orig_width, max_height / orig_height)
+                new_width = orig_width * ratio
+                new_height = orig_height * ratio
+                output = BytesIO()
+                pil_image.save(output, format='JPEG')
+                output.seek(0)
+                rl_image = Image(output, width=new_width, height=new_height)
+
+        options = data.get('options', [])
+
+        answer_paragraphs = []
+        for idx, option in enumerate(options, start=1):
+            
+            opt_text = option.get('value', '')
+            if data.get("type") !="input":
+                opt_text = option.get('value', '')
+                answer_paragraphs.append(Paragraph(f"{idx}. {opt_text}", answer_neutral_style))
+            else:
+                story.append(Paragraph("Deine Antwort: ", answer_neutral_style))
+                story.append(Spacer(1, 12))
+
+        if rl_image:
+            from reportlab.platypus import Table, TableStyle
+            from reportlab.lib.units import cm
+            data_table = [[rl_image, answer_paragraphs]]
+            table = Table(data_table, colWidths=[6*cm, 10*cm])
+            table.setStyle(TableStyle([
+                ('VALIGN', (0,0), (-1,-1), 'TOP'),
+                ('LEFTPADDING', (0,0), (-1,-1), 0),
+                ('RIGHTPADDING', (0,0), (-1,-1), 10),
+            ]))
+            story.append(table)
+        else:
+            for p in answer_paragraphs:
+                story.append(p)
+
+        story.append(Spacer(1, 12))
+        story.append(HRFlowable(width="100%", thickness=1, color=colors.grey))
+        story.append(Spacer(1, 12))
+        current_url = request.build_absolute_uri(f"/library/detail/{quiz.pk}/")
+    escaped_url = escape(current_url)  # Sicherheitshalber escapen
+
+    link_html = f'<a href="{escaped_url}" color="blue">{escaped_url}</a>'
+    story.append(Paragraph(link_html, styles['Normal']))
+    doc.build(story)
+    return response
+"""
+
+
 
 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_amount_questions=Count('questions')).filter(max_amount_questions__gte=1, status='öffentlich', name__icontains=search)
+
+    
+    if request.user.is_authenticated:
+        names = names | QivipQuiz.objects.filter(
+        user_id=request.user.id,
+        name__icontains=search
     )
+        
+    names=list(names.values_list('name', flat=True).distinct())
+    
+        
     return JsonResponse(names, safe=False)
 
+
+def apply_quiz_filters(queryset, form):
+    
+    if not form.is_valid():
+        return queryset
+    queryset = queryset.annotate(question_count=Count('questions'))
+    search = form.cleaned_data.get('search')
+    username = form.cleaned_data.get('user')
+    min_questions = form.cleaned_data.get('min_amount_questions')
+    max_questions = form.cleaned_data.get('max_amount_questions')
+    category = form.cleaned_data.get('categories')
+
+    filters = {}
+
+    if search:
+        filters['name__icontains'] = search
+
+    if min_questions is not None:
+        filters['question_count__gte'] = min_questions
+
+    if max_questions is not None:
+        filters['question_count__lte'] = max_questions
+
+     
+    if category is not None:
+        filters['category'] = category
+ 
+
+    if username:
+        try:
+            user = User.objects.get(username=username)
+            filters['user_id'] = user.id
+        except User.DoesNotExist:
+            return queryset.none()
+
+    return queryset.filter(**filters)
+
+
+def overview_quiz(request, connect="all"):
+    form = QuizFilterForm(request.GET)
+
+    user = request.user if request.user.is_authenticated else None
+
+    # Meine Quizzeze mit mind. 1 Frage
+    filter_my_quizzes = QivipQuiz.objects.none()
+    if user:
+        filter_my_quizzes = QivipQuiz.objects.annotate(max_amount_questions=Count('questions')).filter(
+            user_id=user.id,
+            max_amount_questions__gte=0
+        )
+
+    # Öffentliche Alle mit mind. 1 Frage
+    filter_all_quizzes = QivipQuiz.objects.annotate(max_amount_questions=Count('questions')).filter(
+        status='öffentlich',
+        max_amount_questions__gte=1
+    )
+    if user:
+        filter_all_quizzes = filter_all_quizzes.exclude(user_id=user.id)
+
+    # Favoriten mit mind. 1 Frage
+    favorite_quiz_ids = []
+    favorite_quizzes = QivipQuiz.objects.none()
+    if user:
+        favorite_quiz_ids = QivipQuizFavorite.objects.filter(user=user, favorite=True).values_list('quiz', flat=True)
+        favorite_quizzes = QivipQuiz.objects.annotate(max_amount_questions=Count('questions')).filter(
+            id__in=favorite_quiz_ids,
+            max_amount_questions__gte=1
+        )
+
+    # Suche anwenden, falls vorhanden
+
+
+    filter_my_quizzes = apply_quiz_filters(filter_my_quizzes, form)
+    filter_all_quizzes = apply_quiz_filters(filter_all_quizzes, form)
+    favorite_quizzes = apply_quiz_filters(favorite_quizzes, form)
+    if request.user.is_authenticated:
+        filter_all_quizzes = apply_quiz_filters(filter_all_quizzes, form) | apply_quiz_filters(filter_my_quizzes, form)
+
+    # Treffer zählen
+    total_my = filter_my_quizzes.count()
+    total_all = filter_all_quizzes.count()
+    total_favorite = favorite_quizzes.count()
+
+    total_all_found=total_my + total_all + total_favorite
+
+    # Paginierung
+    paginator_my = Paginator(filter_my_quizzes.order_by('-creation_date'), 8)
+    paginator_all = Paginator(filter_all_quizzes.order_by('-published_at'), 8)
+    paginator_fav = Paginator(favorite_quizzes.order_by('-published_at'), 8)
+
+    my_page = request.GET.get('my_page', 1)
+    all_page = request.GET.get('all_page', 1)
+    fav_page = request.GET.get('favorite_page', 1)
+
+    try:
+        my_quizzes = paginator_my.page(my_page)
+    except:
+        my_quizzes = paginator_my.page(1)
+
+    try:
+        all_quizzes = paginator_all.page(all_page)
+    except:
+        all_quizzes = paginator_all.page(1)
+
+    try:
+        favorite_quizzes = paginator_fav.page(fav_page)
+    except:
+        favorite_quizzes = paginator_fav.page(1)
+
+    context = {
+        'form': form,
+        'my_quizzes': my_quizzes,
+        'all_quizzes': all_quizzes,
+        'favorite_quizzes': favorite_quizzes,
+        'total_my': total_my,
+        'total_all': total_all,
+        'total_favorite': total_favorite,
+        'total_all_found':total_all_found,
+        'show_search': True,
+        'favorite_quiz_ids': list(favorite_quiz_ids),
+        'url_my': '/library/my/',
+        'url_all': '/library/',
+        'url_favorite': '/library/favorites/',
+    }
+
+    query_params = request.GET.copy()
+
+    querydict_my = query_params.copy()
+    querydict_all = query_params.copy()
+    querydict_fav = query_params.copy()
+
+    # Entferne die jeweiligen Seiten-Parameter, damit wir sie neu setzen können
+    querydict_my.pop('my_page', None)
+    querydict_all.pop('all_page', None)
+    querydict_fav.pop('favorite_page', None)
+
+    # Füge die "bereinigten" Querystrings dem context hinzu
+    context.update({
+        'querystring_my': querydict_my.urlencode(),
+        'querystring_all': querydict_all.urlencode(),
+        'querystring_favorite': querydict_fav.urlencode(),
+    })
+
+    if connect=="all":
+        context.update({"link":"library:overview_quiz"})
+        return render(request, 'library/overview_quiz.html', context)
+    elif connect=="my":
+        context.update({"link":"library:overview_quiz_my"})
+        return render(request, 'library/overview_quiz_my.html', context)
+    elif connect=="favorite":
+        context.update({"link":"library:overview_quiz_favorites"})
+        return render(request, 'library/overview_quiz_favorite.html', context)
+
+
+def overview_quiz_my(request):
+    return overview_quiz(request, connect="my")
+    
+
+def overview_quiz_favorites(request):
+    return overview_quiz(request, connect="favorite")
+"""
 def overview_quiz(request):
     # Filter
     form = QuizFilterForm(request.GET)
@@ -43,28 +537,24 @@ def overview_quiz(request):
 
     # Initialize querysets
     if request.user.is_authenticated:
-        filter_my_quizzes = QivipQuiz.objects.filter(user_id=request.user).annotate(max_amout_questions=Count('questions'))
-        favorite_quizzes = favorite_quizzes.filter(id__in=favorite_quiz_ids).annotate(max_amout_questions=Count('questions'))
-        filter_other_quizzes = QivipQuiz.objects.exclude(user_id=request.user)
+        filter_my_quizzes = QivipQuiz.objects.filter(user_id=request.user).annotate(max_amount_questions=Count('questions'))
+        favorite_quizzes = favorite_quizzes.filter(id__in=favorite_quiz_ids).annotate(max_amount_questions=Count('questions'))
+        filter_all_quizzes = QivipQuiz.objects.exclude(user_id=request.user)
     else:
         favorite_quizzes = QivipQuiz.objects.none()
         filter_my_quizzes = QivipQuiz.objects.none()
-        filter_other_quizzes = QivipQuiz.objects.all()
-    
-    # Apply common filters to other quizzes
-    filter_other_quizzes = filter_other_quizzes.annotate(max_amout_questions=Count('questions'))
-    filter_other_quizzes = filter_other_quizzes.filter(max_amout_questions__gte=1, status='öffentlich')
-
-
-  
+        filter_all_quizzes = QivipQuiz.objects.all()
     
+    # Apply common filters to all quizzes
+    filter_all_quizzes = filter_all_quizzes.annotate(max_amount_questions=Count('questions'))
+    filter_all_quizzes = filter_all_quizzes.filter(max_amount_questions__gte=1, status='öffentlich')
 
     if form.is_valid():
         
         search = form.cleaned_data.get('search')
         username= form.cleaned_data.get('user')
-        max_amout_questions= form.cleaned_data.get('max_amout_questions')
-        min_amout_questions= form.cleaned_data.get('min_amout_questions')
+        max_amount_questions= form.cleaned_data.get('max_amount_questions')
+        min_amount_questions= form.cleaned_data.get('min_amount_questions')
         
         filters = {}
         if username:
@@ -74,19 +564,19 @@ def overview_quiz(request):
             except User.DoesNotExist:
                 favorite_quizzes = QivipQuiz.objects.none()
                 filter_my_quizzes = QivipQuiz.objects.none()
-                filter_other_quizzes=QivipQuiz.objects.none()
+                filter_all_quizzes=QivipQuiz.objects.none()
 
         if search:
             filters['name__icontains'] = search
-        if  min_amout_questions:
-            filters['max_amout_questions__gte'] =  min_amout_questions
-        if max_amout_questions:
-            filters['max_amout_questions__lte'] = max_amout_questions
+        if  min_amount_questions:
+            filters['max_amount_questions__gte'] =  min_amount_questions
+        if max_amount_questions:
+            filters['max_amount_questions__lte'] = max_amount_questions
 
         try:
-           filter_other_quizzes = filter_other_quizzes.filter(**filters)
+           filter_all_quizzes = filter_all_quizzes.filter(**filters)
         except:
-            filter_other_quizzes=QivipQuiz.objects.none()
+            filter_all_quizzes=QivipQuiz.objects.none()
         try:
            filter_my_quizzes = filter_my_quizzes.filter(**filters)
         except:
@@ -106,12 +596,12 @@ def overview_quiz(request):
         except:
             my_quizzes = my_quizzes_paginator.page(1)
 
-        # Pagination for other quizzes
-        other_quizzes_paginator = Paginator(filter_other_quizzes.order_by('-creation_date'), 8)  # 8 quizzes per page
+        # Pagination for all quizzes
+        all_quizzes_paginator = Paginator(filter_all_quizzes.order_by('-creation_date'), 8)  # 8 quizzes per page
         try:
-            other_quizzes = other_quizzes_paginator.page(request.GET.get('other_page', 1))
+            all_quizzes = all_quizzes_paginator.page(request.GET.get('all_page', 1))
         except:
-            other_quizzes = other_quizzes_paginator.page(1)
+            all_quizzes = all_quizzes_paginator.page(1)
 
   
 
@@ -125,9 +615,9 @@ def overview_quiz(request):
 
 
         # Pagination for favorite_quizzes
-        favorite_quizzes_paginator = Paginator(favorite_quizzes, 8)  # 8 quizzes per page
+        favorite_quizzes_paginator = Paginator(favorite_quizzes, 8)  # 9 quizzes per page
         try:
-           favorite_quizzes = favorite_quizzes_paginator.page(request.GET.get('my_page', 1))
+           favorite_quizzes = favorite_quizzes_paginator.page(request.GET.get('favorite_page', 1))
         except:
             favorite_quizzes = favorite_quizzes_paginator.page(1)
 
@@ -136,13 +626,13 @@ def overview_quiz(request):
             'favorite_quiz_ids': favorite_quiz_ids,
             'favorite_quizzes':favorite_quizzes,
             'my_quizzes': my_quizzes,
-            'other_quizzes': other_quizzes,
+            'all_quizzes': all_quizzes,
             'form': form,
         }
 
         return render(request, 'library/overview_quiz.html', context)
+      """
 
-# Neues Quiz erstellen
 @login_required
 def favorite_quiz(request, pk):
     quiz= get_object_or_404(QivipQuiz, pk=pk)
@@ -153,6 +643,7 @@ def favorite_quiz(request, pk):
         
         
 
+
         if favorite.favorite==True:
             favorite.favorite_date = timezone.now()        
             favorite.save()
@@ -167,6 +658,7 @@ def favorite_quiz(request, pk):
        favorite=QivipQuizFavorite.objects.create(user=request.user, quiz=quiz, favorite=True, favorite_date=timezone.now())
        statement="Das Quiz '"+ favorite.quiz.name+ "' wurde erfolgreich zu den Favoriten hinzugefügt!"
        messages.success(request,statement )
+
     return redirect(request.META.get('HTTP_REFERER', 'library:overview_quiz'))
     
     
@@ -179,10 +671,19 @@ def new_quiz(request):
 
 
         form = QuizForm(request.POST, request.FILES)
+        
+ 
+
         if form.is_valid():
             quiz = form.save(commit=False)
+            status = form.cleaned_data.get('status')
+    
+            if status == 'öffentlich' and not quiz.published_at:
+                quiz.published_at = timezone.now()
+
             try:
                 quiz_image=request.FILES['quiz_image']
+
                 imagequiz=QuizImage.objects.create(image=quiz_image)
                 quiz.image=imagequiz
 
@@ -191,6 +692,8 @@ def new_quiz(request):
 
             
             quiz.user_id = request.user
+
+
             #quiz.creator = request.user
             quiz.save()
             #form.save_m2m()  # Speichert die Many-to-Many Beziehungen (Tags)
@@ -206,8 +709,13 @@ def edit_quiz(request, pk):
     quiz = get_object_or_404(QivipQuiz, pk=pk, user_id=request.user)
     if request.method == 'POST':
         form = QuizForm(request.POST, instance=quiz, files=request.FILES)
+        
+
+
         if form.is_valid():
 
+
+
             if 'reset_image' in request.POST:
                 quiz.image = None
 
@@ -220,7 +728,12 @@ def edit_quiz(request, pk):
             except:
                 pass
 
+            quiz = form.save(commit=False)
     
+            # Beispiel: Status aus dem Formular holen
+            status = form.cleaned_data.get('status')
+            if status == 'öffentlich' and not quiz.published_at:
+                quiz.published_at = timezone.now()
             
             form.save()
             for img in QuizImage.objects.all():
@@ -260,7 +773,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 +786,11 @@ def detail_quiz(request, pk):
         'questions': questions,
         'detail':show_answers,
     }
+    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
@@ -295,6 +811,14 @@ def copy_quiz(request, pk):
     new_quiz.base_quiz_id = pk
     new_quiz.rating_count = 0
     new_quiz.average_rating = 3.0
+    new_quiz.quiz_played_Lernmodus = 0
+    new_quiz.quiz_played_Moderiermodus = 0
+    new_quiz.quiz_played_Moderiermodus_players = 0
+    if original_quiz.status=="öffentlich":
+        new_quiz.published_at = timezone.now()
+    else:
+        new_quiz.published_at = None
+
     new_quiz.save()  # Speichern als neues Objekt 
    # Optional: Beschreibung anpassen
     # Alle zugehörigen Fragen kopieren
@@ -328,6 +852,7 @@ def question_list(request):
 def new_question(request):
     question_type = request.GET.get('type')
     quiz_id = request.GET.get('quiz_id')
+    question_data = None
     
     if not quiz_id:
         messages.error(request, 'Quiz ID muss angegeben werden.')
@@ -339,12 +864,12 @@ def new_question(request):
         messages.error(request, 'Quiz nicht gefunden oder keine Berechtigung.')
         return redirect('library:overview_quiz')
     
-    if question_type not in ['multiple_choice', 'true_false','input']:
+    if question_type not in ['multiple_choice', 'true_false','input','order','guess','map']:
         base_url = reverse('library:new_question')
         return redirect(f'{base_url}?type=multiple_choice&quiz_id={quiz_id}')
        
     if request.method == 'POST':
-        question_text = request.POST.get('question', '')
+        question_text = request.POST.get('question', 'Kein Fragentext angegeben')
         
         # Handle different question types
         if question_type == 'true_false':
@@ -392,6 +917,59 @@ def new_question(request):
                 'options': options
             }
 
+        elif question_type == 'order'  :
+            options = []
+            i = 1
+            # Limit to maximum 6 options
+            while request.POST.get(f'option_{i}') and i <= 6:
+                is_correct = request.POST.get(f'correct_{i}') == '1'
+                options.append({
+                    'order': i,
+                    'value': request.POST.get(f'option_{i}'),
+                    
+                })
+                i += 1
+
+            
+            # Validate minimum 2 options
+            if len(options) < 2:
+                messages.error(request, 'Mindestens zwei Optionen müssen angegeben werden.')
+                return redirect(request.get_full_path())
+                
+            json_data = {
+                'type': question_type,
+                'question': question_text,
+                'options': options
+            }
+            
+
+        elif question_type == 'guess':
+            correct_answer = request.POST.get('correct_answer')
+            min_value = request.POST.get('min')
+            max_value = request.POST.get('max')
+            tolerance = request.POST.get('tolerance')
+            json_data = {
+                'type': question_type,
+                'question': question_text,
+                'correct_answer': correct_answer,
+                'min': min_value,
+                'max': max_value,
+                'tolerance': tolerance,
+                'options': [
+                    {'value': correct_answer, 'is_correct': True}
+                ]
+            }
+
+        elif question_type == 'map':
+            target_location = request.POST.get('location')
+            tolerance_radius = request.POST.get('tolerance_radius')
+                
+            json_data = {
+                'type': question_type,
+                'question': question_text,
+                'target_location': target_location,
+                'tolerance_radius': tolerance_radius
+            }
         question = QivipQuestion()
         question.data = json.dumps(json_data)
         question.quiz_id = quiz
@@ -404,6 +982,10 @@ def new_question(request):
 
 
         question.time_per_question = request.POST.get('time_per_question', '30')
+        try:
+            question.credits=request.POST.get('credits',"")
+        except:
+            question.credits=""
         question.save()
         #return modified(request, pk=quiz.pk)
         return redirect('library:detail_quiz', pk=quiz.pk)
@@ -442,6 +1024,43 @@ def new_question(request):
             }
             standard_time_per_question = 30
 
+        elif question_type == 'order':
+            question_data = {
+                'type': question_type,
+                'question': '',
+                'options': [
+                    {'value': ''},
+                    {'value': ''}
+                ]
+            }
+            standard_time_per_question = 30
+        elif question_type == 'guess':
+            correct_answer = request.POST.get('correct_answer')
+            min_value = request.POST.get('min')
+            max_value = request.POST.get('max')
+            tolerance = request.POST.get('tolerance')
+            json_data = {
+                'type': question_type,
+                'question': '',
+                'correct_answer': correct_answer,
+                'min': min_value,
+                'max': max_value,
+                'tolerance': tolerance,
+                'options': [
+                    {'value': correct_answer, 'is_correct': True}
+                ]
+            }
+            standard_time_per_question = 30
+            
+        elif question_type == 'map':
+            question_data = {
+                'type': question_type,
+                'question': '',
+                'target_location': "",
+                'tolerance_radius': 90000
+            }
+            standard_time_per_question = 30
+            
     template_name = f'library/question/question_{question_type}.html'
     context = {
         'question': question_data,
@@ -482,6 +1101,13 @@ def edit_question(request, pk):
                     {'value': 'Falsch', 'is_correct': not correct_answer}
                 ]
             }
+        elif question_type == 'map':
+            question_data = {
+                'type': question_type,
+                'question': question_data.get('question', ''),
+                'target_location': question_data.get('target_location', ''),
+                'tolerance_radius': question_data.get('tolerance_radius', 90000)
+            }
         else:
             # For multiple choice questions
             question_data.setdefault('type', question_type)
@@ -567,9 +1193,65 @@ def edit_question(request, pk):
                 'options': options
             }
             
+        elif question_type == 'order':
+            options = []
+            i = 1
+            # Limit to maximum 6 options
+            while request.POST.get(f'option_{i}') and i <= 6:
+                options.append({
+                    'order': i,
+                    'value': request.POST.get(f'option_{i}')
+                })
+                i += 1
+                
+            # Validate minimum 2 options
+            if len(options) < 2:
+                messages.error(request, 'Mindestens zwei Optionen müssen angegeben werden.')
+                return redirect(request.get_full_path())
+
+            # Validate maximum 6 options
+            if len(options) > 6:
+                messages.error(request, 'Maximal 6 Optionen sind erlaubt.')
+                return redirect(request.get_full_path())
+                
+            json_data = {
+                'type': question_type,
+                'question': question_text,
+                'options': options
+            }
+        elif question_type == 'guess':
+            correct_answer = request.POST.get('correct_answer')
+            min_value = request.POST.get('min')
+            max_value = request.POST.get('max')
+            tolerance = request.POST.get('tolerance')
+            json_data = {
+                'type': question_type,
+                'question': question_text,
+                'correct_answer': correct_answer,
+                'min': min_value,
+                'max': max_value,
+                'tolerance': tolerance,
+                'options': [
+                    {'value': correct_answer, 'is_correct': True}
+                ]
+            }
+
+        elif question_type == 'map':
+            target_location = request.POST.get('location')
+            tolerance_radius = request.POST.get('tolerance_radius')
+
+            json_data = {
+                'type': question_type,
+                'question': question_text,
+                'target_location': target_location,
+                'tolerance_radius': tolerance_radius
+            }
         question.data = json.dumps(json_data)
         question.time_per_question = request.POST.get('time_per_question', '30')
-
+        try:
+            question.credits=request.POST.get('credits',"")
+        except:
+            question.credits=""
  
         question.save()
         for img in QuestionImage.objects.all():
@@ -584,6 +1266,7 @@ def edit_question(request, pk):
     else:
         template_name = f'library/question/question_{question_type}.html'
         context = {
+            'credits':question.credits,
             'question': {'data': question_data},  # Wrap in data structure expected by template
             'quiz_id': question.quiz_id.pk,
             'quiz': question.quiz_id,

django/package-lock.json

@@ -10,7 +10,11 @@
       "license": "ISC",
       "dependencies": {
         "@tailwindcss/cli": "^4.1.5",
+        "sortablejs": "^1.15.6",
         "tailwindcss": "^4.1.5"
+      },
+      "devDependencies": {
+        "license-checker": "^25.0.1"
       }
     },
     "node_modules/@parcel/watcher": {
@@ -537,6 +541,55 @@
         "node": ">= 10"
       }
     },
+    "node_modules/abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "dev": true
+    },
+    "node_modules/ansi-styles": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
+      "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/array-find-index": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/array-find-index/-/array-find-index-1.0.2.tgz",
+      "integrity": "sha512-M1HQyIXcBGtVywBt8WVdim+lrNaK7VHp99Qt5pSNziXznKHViIBbXWtfRTpEFpF/c4FdfxNAsCCwPp5phBYJtw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==",
+      "dev": true
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
+    },
+    "node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
     "node_modules/braces": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
@@ -548,6 +601,60 @@
         "node": ">=8"
       }
     },
+    "node_modules/chalk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
+      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^3.2.1",
+        "escape-string-regexp": "^1.0.5",
+        "supports-color": "^5.3.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
+      "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "1.1.3"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
+      "integrity": "sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==",
+      "dev": true
+    },
+    "node_modules/concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
+      "dev": true
+    },
+    "node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
+    "node_modules/debuglog": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/debuglog/-/debuglog-1.0.1.tgz",
+      "integrity": "sha512-syBZ+rnAK3EgMsH2aYEOLUW7mZSY9Gb+0wUMCFsZvcmiz+HigA0LOcq/HoQqVuGG+EKykunc7QG2bzrponfaSw==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
@@ -559,6 +666,16 @@
         "node": ">=0.10"
       }
     },
+    "node_modules/dezalgo": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/dezalgo/-/dezalgo-1.0.4.tgz",
+      "integrity": "sha512-rXSP0bf+5n0Qonsb+SVVfNfIsimO4HEtmnIpPHY8Q1UCzKlQrDMfdobr8nJOOsRgWCyMRqeSBQzmWUMq7zvVig==",
+      "dev": true,
+      "dependencies": {
+        "asap": "^2.0.0",
+        "wrappy": "1"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.18.1",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
@@ -571,6 +688,15 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -582,11 +708,106 @@
         "node": ">=8"
       }
     },
+    "node_modules/fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
+      "dev": true
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob": {
+      "version": "7.2.3",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
+      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
+      "deprecated": "Glob versions prior to v9 are no longer supported",
+      "dev": true,
+      "dependencies": {
+        "fs.realpath": "^1.0.0",
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "^3.1.1",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      },
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
       "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
     },
+    "node_modules/has-flag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "dev": true,
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/hosted-git-info": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
+      "dev": true
+    },
+    "node_modules/inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
+      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
+      "dev": true,
+      "dependencies": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "dev": true
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "dev": true,
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -622,6 +843,33 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
+    "node_modules/license-checker": {
+      "version": "25.0.1",
+      "resolved": "https://registry.npmjs.org/license-checker/-/license-checker-25.0.1.tgz",
+      "integrity": "sha512-mET5AIwl7MR2IAKYYoVBBpV0OnkKQ1xGj2IMMeEFIs42QAkEVjRtFZGWmQ28WeU7MP779iAgOaOy93Mn44mn6g==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "^2.4.1",
+        "debug": "^3.1.0",
+        "mkdirp": "^0.5.1",
+        "nopt": "^4.0.1",
+        "read-installed": "~4.0.3",
+        "semver": "^5.5.0",
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-satisfies": "^4.0.0",
+        "treeify": "^1.1.0"
+      },
+      "bin": {
+        "license-checker": "bin/license-checker"
+      }
+    },
     "node_modules/lightningcss": {
       "version": "1.29.2",
       "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
@@ -859,6 +1107,39 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/minimatch": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/minimist": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
+      "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dev": true,
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -867,11 +1148,101 @@
         "node": ">=4"
       }
     },
+    "node_modules/ms": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "dev": true
+    },
     "node_modules/node-addon-api": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
       "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ=="
     },
+    "node_modules/nopt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
+      "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
+      "dev": true,
+      "dependencies": {
+        "abbrev": "1",
+        "osenv": "^0.1.4"
+      },
+      "bin": {
+        "nopt": "bin/nopt.js"
+      }
+    },
+    "node_modules/normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "dev": true,
+      "dependencies": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      }
+    },
+    "node_modules/npm-normalize-package-bin": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
+      "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
+      "dev": true
+    },
+    "node_modules/once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
+      "dev": true,
+      "dependencies": {
+        "wrappy": "1"
+      }
+    },
+    "node_modules/os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "deprecated": "This package is no longer supported.",
+      "dev": true,
+      "dependencies": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
+    },
+    "node_modules/path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -888,6 +1259,177 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/read-installed": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/read-installed/-/read-installed-4.0.3.tgz",
+      "integrity": "sha512-O03wg/IYuV/VtnK2h/KXEt9VIbMUFbk3ERG0Iu4FhLZw0EP0T9znqrYDGn6ncbEsXUFaUjiVAWXHzxwt3lhRPQ==",
+      "deprecated": "This package is no longer supported.",
+      "dev": true,
+      "dependencies": {
+        "debuglog": "^1.0.1",
+        "read-package-json": "^2.0.0",
+        "readdir-scoped-modules": "^1.0.0",
+        "semver": "2 || 3 || 4 || 5",
+        "slide": "~1.1.3",
+        "util-extend": "^1.0.1"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.2"
+      }
+    },
+    "node_modules/read-package-json": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/read-package-json/-/read-package-json-2.1.2.tgz",
+      "integrity": "sha512-D1KmuLQr6ZSJS0tW8hf3WGpRlwszJOXZ3E8Yd/DNRaM5d+1wVRZdHlpGBLAuovjr28LbWvjpWkBHMxpRGGjzNA==",
+      "deprecated": "This package is no longer supported. Please use @npmcli/package-json instead.",
+      "dev": true,
+      "dependencies": {
+        "glob": "^7.1.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "normalize-package-data": "^2.0.0",
+        "npm-normalize-package-bin": "^1.0.0"
+      }
+    },
+    "node_modules/readdir-scoped-modules": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz",
+      "integrity": "sha512-asaikDeqAQg7JifRsZn1NJZXo9E+VwlyCfbkZhwyISinqk5zNS6266HS5kah6P0SaQKGF6SkNnZVHUzHFYxYDw==",
+      "deprecated": "This functionality has been moved to @npmcli/fs",
+      "dev": true,
+      "dependencies": {
+        "debuglog": "^1.0.1",
+        "dezalgo": "^1.0.0",
+        "graceful-fs": "^4.1.2",
+        "once": "^1.3.0"
+      }
+    },
+    "node_modules/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/semver": {
+      "version": "5.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz",
+      "integrity": "sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/slide": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz",
+      "integrity": "sha512-NwrtjCg+lZoqhFU8fOwl4ay2ei8PaqCBOUV3/ektPY9trO1yQ1oXEfmHAhKArUVUr/hOHvy5f6AdP17dCM0zMw==",
+      "dev": true,
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/sortablejs": {
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/sortablejs/-/sortablejs-1.15.6.tgz",
+      "integrity": "sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A=="
+    },
+    "node_modules/spdx-compare": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-compare/-/spdx-compare-1.0.0.tgz",
+      "integrity": "sha512-C1mDZOX0hnu0ep9dfmuoi03+eOdDoz2yvK79RxbcrVEG1NO1Ph35yW102DHWKN4pk80nwCgeMmSY5L25VE4D9A==",
+      "dev": true,
+      "dependencies": {
+        "array-find-index": "^1.0.2",
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-ranges": "^2.0.0"
+      }
+    },
+    "node_modules/spdx-correct": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
+      "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
+      "dev": true,
+      "dependencies": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-exceptions": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
+      "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==",
+      "dev": true
+    },
+    "node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.21",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.21.tgz",
+      "integrity": "sha512-Bvg/8F5XephndSK3JffaRqdT+gyhfqIPwDHpX80tJrF8QQRYMo8sNMeaZ2Dp5+jhwKnUmIOyFFQfHRkjJm5nXg==",
+      "dev": true
+    },
+    "node_modules/spdx-ranges": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/spdx-ranges/-/spdx-ranges-2.1.1.tgz",
+      "integrity": "sha512-mcdpQFV7UDAgLpXEE/jOMqvK4LBoO0uTQg0uvXUewmEFhpiZx5yJSZITHB8w1ZahKdhfZqP5GPEOKLyEq5p8XA==",
+      "dev": true
+    },
+    "node_modules/spdx-satisfies": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-satisfies/-/spdx-satisfies-4.0.1.tgz",
+      "integrity": "sha512-WVzZ/cXAzoNmjCWiEluEA3BjHp5tiUmmhn9MK+X0tBbR9sOqtC6UQwmgCNrAIZvNlMuBUYAaHYfb2oqlF9SwKA==",
+      "dev": true,
+      "dependencies": {
+        "spdx-compare": "^1.0.0",
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-ranges": "^2.0.0"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
+      "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.5.tgz",
@@ -911,6 +1453,37 @@
       "engines": {
         "node": ">=8.0"
       }
+    },
+    "node_modules/treeify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/treeify/-/treeify-1.1.0.tgz",
+      "integrity": "sha512-1m4RA7xVAJrSGrrXGs0L3YTwyvBs2S8PbRHaLZAkFw7JR8oIFwYtysxlBZhYIa7xSyiYJKZ3iGrrk55cGA3i9A==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.6"
+      }
+    },
+    "node_modules/util-extend": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/util-extend/-/util-extend-1.0.3.tgz",
+      "integrity": "sha512-mLs5zAK+ctllYBj+iAQvlDCwoxU/WDOUaJkcFudeiAX6OajC6BKXJUa9a+tbtkC11dz2Ufb7h0lyvIOVn4LADA==",
+      "dev": true
+    },
+    "node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
+      "dependencies": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
+    "node_modules/wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
+      "dev": true
     }
   }
 }

django/package.json

@@ -11,6 +11,10 @@
   "description": "",
   "dependencies": {
     "@tailwindcss/cli": "^4.1.5",
+    "sortablejs": "^1.15.6",
     "tailwindcss": "^4.1.5"
+  },
+  "devDependencies": {
+    "license-checker": "^25.0.1"
   }
 }

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

@@ -4,8 +4,9 @@ from channels.generic.websocket import AsyncWebsocketConsumer
 from channels.db import database_sync_to_async
 from django.utils import timezone
 from django.urls import reverse
-from play.models import QuizGame, QuizGameParticipant, QuizAnswer
+from play.models import QuizGame, QuizGameParticipant, QuizAnswer,QivipQuiz
 from django.conf import settings
+from geopy.distance import geodesic
 
 class GameConsumer(AsyncWebsocketConsumer):
 
@@ -31,6 +32,13 @@ class GameConsumer(AsyncWebsocketConsumer):
         # Check if game should be deleted
         await self.cleanup_game()
 
+
+    @database_sync_to_async
+    def get_question_data(self):
+        quiz_game = QuizGame.objects.get(join_code=self.join_code)
+        current_question = quiz_game.quiz_id.questions.all()[quiz_game.current_question_index]
+        return json.loads(current_question.data)
+
     async def receive(self, text_data):
         text_data_json = json.loads(text_data)
         message_type = text_data_json['type']
@@ -84,15 +92,17 @@ class GameConsumer(AsyncWebsocketConsumer):
 
         elif message_type == 'submit_answer':
             participant_id = text_data_json['participant_id']
-            try:
             answer = text_data_json['answer']
-            except:
-                answer=-1
             time_remaining = text_data_json.get('time_remaining', 0)
             
-            # Save answer and update participant score
+
+            question_data = await self.get_question_data()
+            if question_data['type'] == "map":
+                await self.save_answer_map(participant_id, answer, time_remaining)
+            else:
                 await self.save_answer(participant_id, answer, time_remaining)
 
+            
             # Notify host about the new answer
             await self.channel_layer.group_send(
                 self.game_group_name,
@@ -111,7 +121,7 @@ class GameConsumer(AsyncWebsocketConsumer):
             stats = await self.get_answer_stats()
             await self.send(text_data=json.dumps({
                 'type': 'answer_stats',
-                'stats': stats
+                'stats': stats,
             }))
 
         elif message_type == 'update_participants':
@@ -128,8 +138,18 @@ class GameConsumer(AsyncWebsocketConsumer):
             host_id = text_data_json['host_id']
             if await self.verify_host(host_id):
                 await self.advance_to_next_question()
+        elif message_type == 'winner_podest':
+            host_id = text_data_json['host_id']
+            if await self.verify_host(host_id):
+                await self.show_winner_podest()
+
+        elif message_type == 'scoreboard':
+            host_id = text_data_json['host_id']
+            if await self.verify_host(host_id):
+                await self.show_scoreboard()
 
         elif message_type == 'finish_game':
+           
             host_id = text_data_json['host_id']
             if await self.verify_host(host_id):
                 await self.finish_game()
@@ -174,47 +194,107 @@ class GameConsumer(AsyncWebsocketConsumer):
             return False
 
     @database_sync_to_async
-    def save_answer(self, participant_id, answer_index, time_remaining):
+    def save_answer_map(self, participant_id, answer_location, time_remaining):
+        answer_index = 0
         try:
+            # Get all necessary data first
             participant = QuizGameParticipant.objects.get(
                 quiz_game__join_code=self.join_code,
                 participant_id=participant_id
             )
             quiz_game = participant.quiz_game
             current_question = quiz_game.quiz_id.questions.all()[quiz_game.current_question_index]
-            
-            # Check if answer is correct
-            is_correct = False
             question_data = json.loads(current_question.data)
-            print(answer_index)
+            target_location = question_data['target_location']
+            tolerance_radius = question_data.get('tolerance_radius', 1000)  # Default 1km if not set
+            
+            
+            # Parse coordinates if they are strings
+            def parse_coords(coord):
+                if isinstance(coord, str):
                     try:
-                if answer_index >= 0 :  # -1 means timeout
-                    is_correct = question_data['options'][answer_index]['is_correct']
-                    print(is_correct)
-            except:
-                user_input = str(answer_index).strip().lower().replace(" ", "")
-                correct_value = str(question_data['options'][0].get('value', '')).strip().lower().replace(" ", "")
-                print("Richtig",correct_value)
-                print(user_input)
-                if user_input == correct_value:
-                    is_correct=True
-                    answer_index=int(0)
-                    print(is_correct)
+                        # Handle both comma and space separated coordinates
+                        if ',' in coord:
+                            lat, lng = map(float, [x.strip() for x in coord.split(',')])
                         else:
-                    answer_index=int(1)
+                            # Try splitting by space if no comma
+                            parts = coord.strip().split()
+                            if len(parts) >= 2:
+                                lat, lng = map(float, parts[:2])
+                            else:
+                                raise ValueError("Invalid coordinate format")
+                        return (lat, lng)
+                    except (ValueError, AttributeError) as e:
+                        print(f"Error parsing coordinates {coord}: {e}")
+                        return None
+                elif isinstance(coord, (list, tuple)) and len(coord) >= 2:
+                    return (float(coord[0]), float(coord[1]))
+                return None
+
+            # Parse the coordinates
+            target_location = parse_coords(target_location)
+            answer_location_coords = answer_location
+            answer_location = parse_coords(answer_location)
             
             
-                
-                    
-            
-            # Calculate score based on correctness and time
+            if not target_location or not answer_location:
+                print("Invalid coordinates, cannot calculate score")
+                is_correct = False
                 score = 0
-            if is_correct:
-                base_score = 1000
-                time_factor = time_remaining /  int(current_question.time_per_question)/int(1000)
-                score = int(base_score * (0.5 + 0.5 * time_factor))
+            else:
                 
-            # Update or create answer in QuizAnswer table
+                # Configuration - Make these easily adjustable
+                MAX_DISTANCE_KM = 50  # Maximum distance for scoring (in km)
+                DIRECT_HIT_BONUS = 200  # Extra points for direct hit within tolerance
+                
+                try:
+                    # Calculate distance
+                    distance_km = geodesic(answer_location, target_location).kilometers
+                    tolerance_km = float(tolerance_radius) / 1000  # Convert meters to kilometers
+                    
+                    print(f"Distance: {distance_km} km, Tolerance: {tolerance_km} km")
+                    
+                    # Calculate base score with non-linear decrease
+                    if distance_km <= tolerance_km:
+                        # Direct hit - full points + bonus
+                        base_score = 1000 + DIRECT_HIT_BONUS
+                        is_correct = True
+                    else:
+                        if distance_km > MAX_DISTANCE_KM:
+                            # Beyond max distance - 0 points
+                            base_score = 0
+                            is_correct = False
+                        else:
+                            # Non-linear decrease using exponential falloff
+                            progress = (distance_km - tolerance_km) / (MAX_DISTANCE_KM - tolerance_km)
+                            falloff = progress ** 1.5  # 1.5 makes the falloff steeper at the beginning
+                            base_score = 1000 * (1 - falloff)
+                            is_correct = True
+                    
+                    # Apply time penalty (reduces score based on time taken)
+                    if is_correct and base_score > 0:
+                        # Calculate time taken as a fraction of total time (0-1)
+                        time_taken_sec = (int(current_question.time_per_question) * 1000 - time_remaining) / 1000
+                        max_time_sec = int(current_question.time_per_question)
+                        time_fraction = min(1.0, time_taken_sec / max_time_sec) if max_time_sec > 0 else 1.0
+                        
+                        # Reduce points based on time taken (up to 50% reduction for answering at the last second)
+                        time_penalty = base_score * 0.5 * time_fraction  # Up to 50% penalty
+                        final_score = max(1, base_score - time_penalty)  # At least 1 point if correct
+                    else:
+                        final_score = base_score  # 0 points for incorrect answers
+                    
+                    # Apply max score limit after all calculations (including bonus)
+                    final_score = min(final_score, 1200)  # Cap at 1200 (1000 + 200 bonus)
+                    
+                    score = int(round(final_score))
+                    
+                except Exception as e:
+                    print(f"Error calculating score: {e}")
+                    is_correct = False
+                    score = 0
+
+            # Save the answer
             answer_obj, created = QuizAnswer.objects.get_or_create(
                 participant=participant,
                 question_index=quiz_game.current_question_index,
@@ -233,7 +313,117 @@ class GameConsumer(AsyncWebsocketConsumer):
                 answer_obj.time_remaining = time_remaining
                 answer_obj.save()
             
+            participant.last_score = score
             participant.score += score
+            participant.coordinate_answer= answer_location_coords
+            participant.last_answer_correct = is_correct
+            participant.save()
+            
+            return True
+            
+        except (QuizGameParticipant.DoesNotExist, IndexError):
+            return False     
+
+
+    @database_sync_to_async
+    def save_answer(self, participant_id, answer, time_remaining):
+     try:
+        participant = QuizGameParticipant.objects.get(
+            quiz_game__join_code=self.join_code,
+            participant_id=participant_id
+        )
+        quiz_game = participant.quiz_game
+        current_question = quiz_game.quiz_id.questions.all()[quiz_game.current_question_index]
+        
+        question_data = json.loads(current_question.data)
+        question_type = question_data.get("type")
+
+        is_correct = False
+        answer_index = None
+        answers_order = None
+        answer_text = None
+
+        if question_type in ["multiple_choice", "true_false"]:
+            # answer ist hier eine Integer-Antwort (Index)
+            answer_index = int(answer)
+            if answer_index >= 0:
+                is_correct = question_data['options'][answer_index].get('is_correct', False)
+
+        elif question_type == "input":
+            user_input = str(answer).strip().lower().replace(" ", "")
+            correct_value = str(question_data['options'][0].get('value', '')).strip().lower().replace(" ", "")
+            is_correct = (user_input == correct_value)
+            answer_text = user_input
+            answer_index = 0 if is_correct else 1
+
+        elif question_type == "order":
+            # answer ist hier eine Liste von Strings mit der Reihenfolge
+            answers_order = answer
+            correct_sequence = sorted(question_data["options"], key=lambda x: x["order"])
+            correct_values = [opt["value"] for opt in correct_sequence]
+            is_correct = (answers_order == correct_values)
+        
+        elif question_type == "guess": 
+            try:
+                user_val = float(answer)
+                correct_val = float(question_data['options'][0].get('value', 0))
+                tolerance = float(question_data.get('tolerance', 0))
+                percentage = 1 - abs(user_val - correct_val) / (abs(correct_val) + 1e-5)
+
+               
+                score_percentage= min(round(percentage, 3), 1.0)
+                if score_percentage>= abs(tolerance/100):
+                    is_correct=True
+                else:
+                    is_correct=False
+
+                print(score_percentage)
+                
+
+            except ValueError:
+                is_correct = False  # falls keine Zahl eingegeben wurde     
+            answer_index = 0 if is_correct else 1
+
+
+        # Score berechnen
+        try:
+            if score_percentage==None:
+                score_percentage=1
+        except:
+            score_percentage=1
+
+
+        score = 0
+        if is_correct:
+            base_score = 1000
+            time_factor = time_remaining / int(current_question.time_per_question) / 1000
+            score = int(base_score * (0.75 + 0.25 * time_factor))*score_percentage
+            print(score)
+            
+        # Antwort speichern oder aktualisieren
+        answer_obj, created = QuizAnswer.objects.get_or_create(
+            participant=participant,
+            question_index=quiz_game.current_question_index,
+            defaults={
+                'answer_index': answer_index,
+                'answers_order': answers_order,
+                'is_correct': is_correct,
+                'score': score,
+                'time_remaining': time_remaining
+            }
+        )
+        if not created:
+            answer_obj.answer_index = answer_index
+            answer_obj.answers_order = answers_order
+            answer_obj.is_correct = is_correct
+            answer_obj.score = score
+            answer_obj.time_remaining = time_remaining
+            answer_obj.save()
+
+        # Teilnehmer aktualisieren
+        participant.last_score = score
+        participant.score += score
+        participant.last_answer=answer_index
         participant.last_answer_correct = is_correct
         participant.save()
 
@@ -241,28 +431,50 @@ class GameConsumer(AsyncWebsocketConsumer):
      except (QuizGameParticipant.DoesNotExist, IndexError):
         return False
 
+
     @database_sync_to_async
     def get_answer_stats(self):
      try:
         quiz_game = QuizGame.objects.get(join_code=self.join_code)
-            
-            # Count answers for each option in the current question
-            stats = {}
         answers = QuizAnswer.objects.filter(
             participant__quiz_game=quiz_game,
             question_index=quiz_game.current_question_index
         )
 
-            for answer in answers:
-                if answer.answer_index >= 0:  # Ignore timeouts (-1)
-                    stats[answer.answer_index] = stats.get(answer.answer_index, 0) + 1
         
+        
+    
+        current_question = quiz_game.quiz_id.questions.all()[quiz_game.current_question_index]
+        
+        question_data = json.loads(current_question.data)
+        question_type = question_data.get("type")
+        stats = {}
+
+        for single_answer in answers:
+            
+            
+            if question_type == "order":
+                correct_answer=[str(opt["value"]) for opt in sorted(question_data["options"], key=lambda x: x["order"])]
+                
+                if single_answer.answers_order== correct_answer:
+                    key = 0  # richtig
+                else:
+                    key = 1  # falsch
+                stats[key] = stats.get(key, 0) + 1
+            else:
+                key = str(single_answer.answer_index if single_answer.answer_index is not None else "unanswered")
+                stats[key] = stats.get(key, 0) + 1
         return stats
-        except QuizGame.DoesNotExist:
-            return {}
+     except:
+         pass
+    
+
+
+
 
     @database_sync_to_async
     def save_rating(self, participant_id, rating):
+        from django.db import models
         if not settings.QIVIP_CONFIG['ENABLE_RATING_SYSTEM']:
             return False
         from library.models import QuizRating
@@ -274,16 +486,23 @@ class GameConsumer(AsyncWebsocketConsumer):
             )
             
             # Update or create rating
+            """
             rating_obj, created = QuizRating.objects.get_or_create(
                 quiz=game.quiz_id,
                 participant_id=participant_id,
                 defaults={'rating': rating}
             )
+            """
+            rating_obj=QuizRating.objects.create(
+            quiz=game.quiz_id,
+            participant_id=participant_id,
+            rating=rating)
             
-            if not created:
             rating_obj.rating = rating
             rating_obj.save()
          
+
+            
             return True
         except (QuizGame.DoesNotExist, QuizGameParticipant.DoesNotExist):
             return False
@@ -364,6 +583,26 @@ class GameConsumer(AsyncWebsocketConsumer):
                     'redirect_url': reverse('play:question', kwargs={'join_code': self.join_code})
                 }
             )
+        elif result == 'winner_podest':
+            # Notify clients to redirect to next question
+            await self.channel_layer.group_send(
+                self.game_group_name,
+                {
+                    'type': 'game_state_update',
+                    'action': 'show_winner_podest',
+                    'redirect_url': reverse('play:winner_podest', kwargs={'join_code': self.join_code})
+                }
+            )
+        elif result == 'scoreboard':
+            # Notify clients to redirect to next question
+            await self.channel_layer.group_send(
+                self.game_group_name,
+                {
+                    'type': 'game_state_update',
+                    'action': 'show_scoreboard',
+                    'redirect_url': reverse('play:scoreboard', kwargs={'join_code': self.join_code})
+                }
+            )
 
     @database_sync_to_async
     def _show_scores(self):
@@ -388,10 +627,34 @@ class GameConsumer(AsyncWebsocketConsumer):
                 }
             )
 
+    @database_sync_to_async
+    def counter_played_quizzes(self): # Zähler, wie oft ein Quiz gespielt worden ist.
+          
+            quiz = QuizGame.objects.get(join_code=self.join_code).quiz_id
+            quiz_game = QuizGame.objects.get(join_code=self.join_code)
+            
+          
+     
+
+
+            if quiz_game.single_player_or_multiple=="multiple": 
+                quiz.quiz_played_Moderiermodus+=1
+
+                active_participants = QuizGameParticipant.objects.filter(
+                quiz_game=quiz_game
+                ).count()
+                quiz.quiz_played_Moderiermodus_players+=active_participants
+
+            else:
+                quiz.quiz_played_Lernmodus+=1
+            quiz.save()
+            
     @database_sync_to_async
     def _finish_game(self):
         try:
+            
             quiz_game = QuizGame.objects.get(join_code=self.join_code)
+            
             quiz_game.current_state = 'finished'
             quiz_game.save()
             return True
@@ -400,6 +663,7 @@ class GameConsumer(AsyncWebsocketConsumer):
 
     async def finish_game(self):
         success = await self._finish_game()
+        await self.counter_played_quizzes()
         if success:
             # Notify clients to redirect to finished page
             await self.channel_layer.group_send(
@@ -410,3 +674,48 @@ class GameConsumer(AsyncWebsocketConsumer):
                     'redirect_url': reverse('play:finished', kwargs={'join_code': self.join_code})
                 }
             )
+    @database_sync_to_async
+    def _show_winner_podest(self):
+        try:
+            quiz_game = QuizGame.objects.get(join_code=self.join_code)
+            quiz_game.current_state = 'winner_podest'
+            quiz_game.save()
+            return True
+        except QuizGame.DoesNotExist:
+            return False
+
+    async def show_winner_podest(self):
+        success = await self._show_winner_podest()
+        if success:
+            # Notify clients to redirect to finished page
+            await self.channel_layer.group_send(
+                self.game_group_name,
+                {
+                    'type': 'game_state_update',
+                    'action': 'show_winner_podest',
+                    'redirect_url': reverse('play:winner_podest', kwargs={'join_code': self.join_code})
+                }
+            )
+
+    @database_sync_to_async
+    def _show_scoreboard(self):
+        try:
+            quiz_game = QuizGame.objects.get(join_code=self.join_code)
+            quiz_game.current_state = 'scoreboard'
+            quiz_game.save()
+            return True
+        except QuizGame.DoesNotExist:
+            return False
+
+    async def show_scoreboard(self):
+        success = await self._show_scoreboard()
+        if success:
+            # Notify clients to redirect to finished page
+            await self.channel_layer.group_send(
+                self.game_group_name,
+                {
+                    'type': 'game_state_update',
+                    'action': 'show_scoreboard',
+                    'redirect_url': reverse('play:scoreboard', kwargs={'join_code': self.join_code})
+                }
+            )

django/play/consumers/lobby.py

@@ -11,7 +11,7 @@ game_connections = {}
 
 class LobbyConsumer(AsyncWebsocketConsumer):
 
-    r = redis.Redis(host='localhost', port=6379, db=0, decode_responses=True)
+    r = redis.Redis(host='localhost', port=6380, db=0, decode_responses=True)
 
     async def connect(self):
         self.join_code = self.scope['url_route']['kwargs']['join_code']
@@ -147,7 +147,7 @@ class LobbyConsumer(AsyncWebsocketConsumer):
             
             # Zustand laden
             try:
-                r = redis.Redis(host='localhost', port=6379, db=0, decode_responses=True)
+                r = redis.Redis(host='localhost', port=6380, db=0, decode_responses=True)
 
                 # Alte Teilnehmer aus Redis holen
                 data = r.get(f"last_participants_{self.room_group_name}")

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/migrations/0013_quizanswer_answer_text_quizanswer_answers_order_and_more.py

@@ -0,0 +1,28 @@
+# Generated by Django 5.1.7 on 2025-07-18 13:45
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('play', '0012_quizgameparticipant_last_score'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='quizanswer',
+            name='answer_text',
+            field=models.TextField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='quizanswer',
+            name='answers_order',
+            field=models.JSONField(blank=True, null=True),
+        ),
+        migrations.AlterField(
+            model_name='quizanswer',
+            name='answer_index',
+            field=models.IntegerField(blank=True, null=True),
+        ),
+    ]

django/play/migrations/0014_alter_quizgame_current_state.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-07-25 16:53
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('play', '0013_quizanswer_answer_text_quizanswer_answers_order_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='quizgame',
+            name='current_state',
+            field=models.CharField(choices=[('lobby', 'In Lobby'), ('question', 'Frage läuft'), ('scores', 'Punkteübersicht'), ('winner_podest', 'Siegerpodest'), ('finished', 'Beendet')], default='lobby', max_length=20),
+        ),
+    ]

django/play/migrations/0015_alter_quizgame_current_state.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-07-28 13:49
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('play', '0014_alter_quizgame_current_state'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='quizgame',
+            name='current_state',
+            field=models.CharField(choices=[('lobby', 'In Lobby'), ('question', 'Frage läuft'), ('scores', 'Punkteübersicht'), ('winner_podest', 'Siegerpodest'), ('finished', 'Beendet'), ('scoreboard', 'Scoreboard')], default='lobby', max_length=20),
+        ),
+    ]

django/play/migrations/0016_quizgameparticipant_coordinate_answer.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-11-01 15:20
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('play', '0015_alter_quizgame_current_state'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='quizgameparticipant',
+            name='coordinate_answer',
+            field=models.CharField(blank=True, max_length=256, null=True),
+        ),
+    ]

django/play/migrations/0017_quizgame_quiz_played_lernmodus_and_more.py

@@ -0,0 +1,28 @@
+# Generated by Django 5.1.7 on 2025-11-14 13:53
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('play', '0016_quizgameparticipant_coordinate_answer'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='quizgame',
+            name='quiz_played_Lernmodus',
+            field=models.IntegerField(blank=True, default=0, null=True),
+        ),
+        migrations.AddField(
+            model_name='quizgame',
+            name='quiz_played_Moderiermodus',
+            field=models.IntegerField(blank=True, default=0, null=True),
+        ),
+        migrations.AddField(
+            model_name='quizgame',
+            name='quiz_played_Moderiermodus_players',
+            field=models.IntegerField(blank=True, default=0, null=True),
+        ),
+    ]

django/play/migrations/0018_quizgame_single_player_or_multiple.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-11-14 14:11
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('play', '0017_quizgame_quiz_played_lernmodus_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='quizgame',
+            name='single_player_or_multiple',
+            field=models.CharField(blank=True, max_length=20),
+        ),
+    ]

django/play/migrations/0019_remove_quizgame_quiz_played_lernmodus_and_more.py

@@ -0,0 +1,29 @@
+# Generated by Django 5.1.7 on 2025-11-14 14:50
+
+from django.db import migrations
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('play', '0018_quizgame_single_player_or_multiple'),
+    ]
+
+    operations = [
+        migrations.RemoveField(
+            model_name='quizgame',
+            name='quiz_played_Lernmodus',
+        ),
+        migrations.RemoveField(
+            model_name='quizgame',
+            name='quiz_played_Moderiermodus',
+        ),
+        migrations.RemoveField(
+            model_name='quizgame',
+            name='quiz_played_Moderiermodus_players',
+        ),
+        migrations.RemoveField(
+            model_name='quizgame',
+            name='single_player_or_multiple',
+        ),
+    ]

django/play/migrations/0020_quizgame_single_player_or_multiple.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-11-14 15:04
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('play', '0019_remove_quizgame_quiz_played_lernmodus_and_more'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='quizgame',
+            name='single_player_or_multiple',
+            field=models.CharField(blank=True, max_length=20),
+        ),
+    ]

django/play/models.py

@@ -10,9 +10,12 @@ class QuizGame(models.Model):
         ('lobby', 'In Lobby'),
         ('question', 'Frage läuft'),
         ('scores', 'Punkteübersicht'),
-        ('finished', 'Beendet')
-    ]
+        ('winner_podest','Siegerpodest'),
+        ('finished', 'Beendet'),
+        ('scoreboard', 'Scoreboard'),
         
+    ]
+    single_player_or_multiple=models.CharField(max_length=20, blank=True)
     host_id = models.CharField(max_length=200, unique=True)
     join_code = models.CharField(max_length=6, unique=True, blank=True)
     quiz_id = models.ForeignKey(QivipQuiz, on_delete=models.CASCADE)
@@ -43,9 +46,11 @@ 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)
+    coordinate_answer = models.CharField(null=True, blank=True,max_length=256)
     last_answer_correct = models.BooleanField(null=True, blank=True)
 
     def save(self, *args, **kwargs):
@@ -62,7 +67,9 @@ class QuizGameParticipant(models.Model):
 class QuizAnswer(models.Model):
     participant = models.ForeignKey(QuizGameParticipant, on_delete=models.CASCADE, related_name='answers')
     question_index = models.IntegerField()
-    answer_index = models.IntegerField()
+    answer_index = models.IntegerField(null=True, blank=True)  # für MC, TF
+    answer_text = models.TextField(null=True, blank=True)      # für Input
+    answers_order = models.JSONField(null=True, blank=True)     # NEU für "order"
     is_correct = models.BooleanField()
     score = models.IntegerField()
     time_remaining = models.IntegerField()

django/play/urls.py

@@ -12,6 +12,8 @@ urlpatterns = [
     path('game/<str:join_code>/waiting', views.waiting_room, name='waiting'),
     path('game/<str:join_code>/scores', views.scores, name='scores'),
     path('game/<str:join_code>/finished', views.finished, name='finished'),
+    path('game/<str:join_code>/winner_podest', views.winner_podest, name='winner_podest'),
+    path('game/<str:join_code>/scoreboard', views.scoreboard, name='scoreboard'),
     path('select_mode/<str:join_code>', views.select_mode, name='select_mode'),
     path('selected_mode/<str:join_code>', views.selected_mode, name='selected_mode'),
 ]

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}))
@@ -131,26 +147,7 @@ def join_game(request):
             messages.error(request, "Dieses Spiel existiert nicht.")
     return render(request, 'play/join_game.html')
 
-def finished(request, join_code):
-    try:
-        game = QuizGame.objects.get(join_code=join_code)
-        participant = None
-        participant_id = request.session.get('participant_id')
-        if participant_id:
-            participant = QuizGameParticipant.objects.filter(
-                quiz_game=game,
-                participant_id=participant_id
-            ).first()
 
-        context = {
-            'join_code': join_code,
-            'is_host': str(game.host_id) == str(request.session.get('host_id')),
-            'participant_id': participant_id if participant else None,
-            'rating_enabled': settings.QIVIP_CONFIG['ENABLE_RATING_SYSTEM']
-        }
-        return render(request, 'play/game/finished.html', context)
-    except QuizGame.DoesNotExist:
-        return redirect('home')
 
 def scores(request, join_code):
     quiz_game = get_object_or_404(QuizGame, join_code=join_code)
@@ -192,7 +189,51 @@ def scores(request, join_code):
         'total_questions': len(questions)
     })
 
+
+def scoreboard(request, join_code):
+    quiz_game = get_object_or_404(QuizGame, join_code=join_code)
+
+    # Verify game state
+    if quiz_game.current_state != 'scoreboard':
+        return redirect('play:lobby', join_code=join_code)
+    
+    # Get participants sorted by score
+    participants = QuizGameParticipant.objects.filter(quiz_game=quiz_game).order_by('-score')
+    
+    # Check if user is host
+    is_host = False
+    if 'host_id' in request.COOKIES and request.COOKIES['host_id'] == quiz_game.host_id:
+        is_host = True
+    
+    # Get current question for context
+    questions = quiz_game.quiz_id.questions.all()
+    current_question = questions[quiz_game.current_question_index]
+    question_data = json.loads(current_question.data)
+    
+    try:
+        my_participant = request.session.get('my_participant-participant_id')
+        participant = QuizGameParticipant.objects.get(participant_id=my_participant)
+        my_participant=participant
+    except:
+        participant = QuizGameParticipant.objects.none()
+
+    return render(request, 'play/game/scoreboard.html', {
+        'quiz_game': quiz_game,
+        'participants': participants,
+        'participant': participant,
+        'my_participant':my_participant,
+        'is_host': is_host,
+        'host_id': quiz_game.host_id if is_host else None,
+        'is_last_question': quiz_game.current_question_index + 1 >= len(questions),
+        'question_data': question_data,
+        'question_index': quiz_game.current_question_index,
+        'total_questions': len(questions)
+    })
+
+
+"""
 def finished(request, join_code):
+    
     quiz_game = get_object_or_404(QuizGame, join_code=join_code)
     
     # Verify game state
@@ -224,6 +265,84 @@ def finished(request, join_code):
         'is_host': is_host,
         'participant_id': participant_id if participant else None
     })
+"""
+
+
+def winner_podest(request, join_code):
+    quiz_game = get_object_or_404(QuizGame, join_code=join_code)
+
+    # Verify game state
+    if quiz_game.current_state != 'winner_podest':
+        return redirect('play:lobby', join_code=join_code)
+    
+    # Get participants sorted by score
+    participants = QuizGameParticipant.objects.filter(quiz_game=quiz_game).order_by('-score')
+    
+    # Check if user is host
+    is_host = False
+    if 'host_id' in request.COOKIES and request.COOKIES['host_id'] == quiz_game.host_id:
+        is_host = True
+    
+    # Get current question for context
+    questions = quiz_game.quiz_id.questions.all()
+    current_question = questions[quiz_game.current_question_index]
+    question_data = json.loads(current_question.data)
+    
+    try:
+        my_participant = request.session.get('my_participant-participant_id')
+        participant = QuizGameParticipant.objects.get(participant_id=my_participant)
+        my_participant=participant
+    except:
+        participant = QuizGameParticipant.objects.none()
+
+    return render(request, 'play/game/winner_podest.html', {
+        'quiz_game': quiz_game,
+        'participants': participants,
+        'participant': participant,
+        'my_participant':my_participant,
+        'is_host': is_host,
+        'host_id': quiz_game.host_id if is_host else None,
+        'is_last_question': quiz_game.current_question_index + 1 >= len(questions),
+        'question_data': question_data,
+        'question_index': quiz_game.current_question_index,
+        'total_questions': len(questions)
+    })
+
+def finished(request, join_code):
+    quiz_game = get_object_or_404(QuizGame, join_code=join_code)
+    
+    if quiz_game.current_state != 'finished':
+        return redirect('play:lobby', join_code=join_code)
+    try:
+        game = QuizGame.objects.get(join_code=join_code) 
+        # Get participants sorted by score
+        participants = QuizGameParticipant.objects.filter(quiz_game=quiz_game).order_by('-score')
+
+
+        # Get participant if exists
+        participant_id = request.COOKIES.get('participant_id')
+        participant = None
+        if participant_id:
+            participant = QuizGameParticipant.objects.filter(
+            quiz_game=quiz_game,
+            participant_id=participant_id
+        ).first()
+            
+        is_host = False
+        if 'host_id' in request.COOKIES and request.COOKIES['host_id'] == quiz_game.host_id:
+            is_host = True
+
+        context = {
+            'join_code': join_code,
+            'is_host': is_host,
+            'participants': participants,
+            'participant_id': participant_id if participant else None,
+            'rating_enabled': settings.QIVIP_CONFIG['ENABLE_RATING_SYSTEM']
+        }
+        return render(request, 'play/game/finished.html', context)
+    except QuizGame.DoesNotExist:
+        return redirect('home')
+      
 
 def question(request, join_code):
     quiz_game = get_object_or_404(QuizGame, join_code=join_code)
@@ -301,13 +420,38 @@ def waiting_room(request, join_code):
 
 def selected_mode(request, join_code):
 
-    
     mode = request.GET.get('mode','default')
     request.session['mode'] = mode
+
+    quiz_game = QuizGame.objects.get(join_code=join_code)
+    if mode=="learn":
+        
+        quiz_game.single_player_or_multiple="single"
+    else:
+       
+        quiz_game.single_player_or_multiple="multiple"
+
+    quiz_game.save()
+
+
     quiz_game = get_object_or_404(QuizGame, join_code=join_code)
     quiz = get_object_or_404(QivipQuiz, pk=quiz_game.quiz_id.id)
     QuizGameParticipant.objects.filter(quiz_game=quiz_game).delete()
 
+# Hier werden die Fragen gemischt!
+    import random
+    questions = quiz_game.quiz_id.questions.all()
+    for question in questions:
+        try:
+            data = json.loads(question.data)
+            if (data.get('type') == 'order' or  data.get('type') == 'multiple_choice') and 'options' in data:
+                
+                random.shuffle(data['options'])
+                question.data = json.dumps(data)
+                question.save(update_fields=['data'])
+        except Exception:
+            pass
+    
     context = {
         'quiz': quiz,
         'quiz_game': quiz_game,
@@ -327,6 +471,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 +479,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/static/css/t-input.css

@@ -3,6 +3,9 @@
 qp-container {
     @apply max-w-xl w-full mx-auto;
 }
+.dark-form label {
+    @apply dark:text-white!;
+}
 
 nav div ul.qp-nav-list li {
     @apply text-white hover:scale-110 hover:border-b-2 hover:border-white transition duration-200;
@@ -53,6 +56,34 @@ a.qp-a-button-small {
 }
 
 
+.field-group form p {
+    @apply flex flex-col gap-2;
+}
+
+.field-group form p label {
+    @apply text-gray-900 font-semibold text-sm;
+}
+
+.field-group form p input {
+    @apply p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black 
+    focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100;
+}
+
+.field-group form p select {
+    @apply p-3 rounded-md bg-gray-200 focus:scale-105 transition duration-200 font-black
+    focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100;
+}
+
+.field-group form p textarea {
+    @apply p-3 rounded-xl bg-gray-200 focus:scale-105 transition duration-200 font-black
+    focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100 min-h-[100px];
+}
+
+.field-group form p button {
+    @apply p-3 rounded-full bg-indigo-500 hover:bg-indigo-600 text-white focus:scale-105 
+    transition duration-200 font-black shadow-md hover:shadow-lg;
+}
+
 
 
 ul.messages li {
@@ -122,3 +153,12 @@ div.qp-question-container {
 div.qp-question-container img {
     @apply max-w-[50vw] max-h-[40vh] mx-auto;
 }
+
+div#mapquestion-container {
+    display: flex;
+    justify-content: center;
+}
+
+div#map {
+    @apply md:w-[600px] lg:w-[900px] h-[400px]
+}

django/templates/404.html

@@ -0,0 +1,35 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="max-w-2xl mx-auto mt-20 p-6 bg-white shadow-xl rounded-2xl text-center dark:bg-transparent">
+  
+  <div class="flex justify-center items-center gap-4">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
+    class="w-10 h-10 text-red-600">
+    <path stroke-linecap="round" stroke-linejoin="round"
+      d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
+  </svg>
+    <h1 class=" text-4xl font-extrabold text-red-600">404 Fehler</h1>
+
+  </div>
+
+  <div class="my-6 flex justify-center">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+      stroke="currentColor" class="w-24 h-24 text-gray-400">
+      <path stroke-linecap="round" stroke-linejoin="round"
+        d="M15.182 16.318A4.486 4.486 0 0 0 12.016 15a4.486 4.486 0 0 0-3.198 1.318M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" />
+    </svg>
+  </div>
+
+  <h2 class="text-2xl font-semibold text-gray-800 mb-2 dark:text-white ">Seite nicht gefunden</h2>
+  <p class="text-lg text-gray-600 mb-6 dark:text-white">Ups, die angeforderte Seite wurde nicht gefunden. Überprüfen Sie die URL oder kehren Sie zur Startseite zurück.</p>
+
+  <div class="flex justify-center">
+    <a href="{% url 'homepage:home' %}"
+      class="bg-blue-600 hover:bg-blue-700 transition-colors text-white px-6 py-3 rounded-full text-lg font-semibold shadow-lg">
+      Zur Startseite
+    </a>
+  </div>
+</div>
+{% endblock %}
+

django/templates/accounts/home.html

@@ -4,8 +4,8 @@
 
 
 <div class="flex justify-center  items-center mt-12">
-<div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md">
-    <div class="grid place-content-center h-120">
+<div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md   dark:bg-transparent! dark:text-white! ">
+    <div class="grid place-content-center h-full mb-4 flex-col items-center justify-between">
       
         <h1 class="text-center m-4 text-3xl lg:text-6xl">Willkommen,  <b>{{ request.user.username }}</b>!</h1>
        
@@ -16,10 +16,28 @@
             </form>
             <button class="text-center text-sm w-full mt-4 font-light text-blue-600"><a  href="{% url 'accounts:password_change' %}">Passwort ändern</a></button>
             <button class="text-center text-sm w-full mt-4 font-light text-red-600"><a  href="{% url 'accounts:delete_account'  %}">Account löschen</a></button>
+   
+
+  <div class="border-2 border-blue-600 p-6 rounded-xl shadow-inner bg-blue-50 flex flex-col gap-4 items-start mt-8 dark:bg-transparent">
+  
+  <div class="flex items-center gap-2 text-xl font-semibold text-blue-800  dark:text-blue-600">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-500">
+      <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 18.75h-9m9 0a3 3 0 0 1 3 3h-15a3 3 0 0 1 3-3m9 0v-3.375c0-.621-.503-1.125-1.125-1.125h-.871M7.5 18.75v-3.375c0-.621.504-1.125 1.125-1.125h.872m5.007 0H9.497m5.007 0a7.454 7.454 0 0 1-.982-3.172M9.497 14.25a7.454 7.454 0 0 0 .981-3.172M5.25 4.236c-.982.143-1.954.317-2.916.52A6.003 6.003 0 0 0 7.73 9.728M5.25 4.236V4.5c0 2.108.966 3.99 2.48 5.228M5.25 4.236V2.721C7.456 2.41 9.71 2.25 12 2.25c2.291 0 4.545.16 6.75.47v1.516M7.73 9.728a6.726 6.726 0 0 0 2.748 1.35m8.272-6.842V4.5c0 2.108-.966 3.99-2.48 5.228m2.48-5.492a46.32 46.32 0 0 1 2.916.52 6.003 6.003 0 0 1-5.395 4.972m0 0a6.726 6.726 0 0 1-2.749 1.35m0 0a6.772 6.772 0 0 1-3.044 0" />
+    </svg>
+    Erfolge
+  </div>
+
+  <ul class="list-disc pl-6 text-base text-gray-700 dark:text-white">
+    <li><b>{{ my_quizzes_number }}</b> Quizze erstellt</li>
+    <li><b>{{ my_questions_number }}</b> Fragen insgesamt erstellt</li>
+  </ul>
+
+</div>
+
         </div>
        
         <div class="flex justify-end">
-            <span class="text-[clamp(0.6rem,5vw,1rem)] font-black overflow-x-auto mt-1 ml-0.75 text-blue-600 p-0.75 bg-white">qivip
+            <span class="text-[clamp(0.6rem,5vw,1rem)] font-black overflow-x-auto mt-1 ml-0.75 text-blue-600 p-0.75 bg-white dark:bg-transparent">qivip
             </span>
             </div>
 </div>

django/templates/accounts/login.html

@@ -4,7 +4,7 @@
 {% block content %}
     <div class="grid place-content-center h-120 mt-12 mb-12 ">
     <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
-        <h2 class="text-2xl text-center p-4 font-black">Anmeldung</h2>
+        <h2 class="text-2xl text-center p-4 font-black dark:text-white">Anmeldung</h2>
         <form class="space-y-4" method="post">
             {% if form.errors %}
             <div class=" items-center text-red-600 font-black overflow-x-auto break-words text-center">

django/templates/accounts/register.html

@@ -4,7 +4,7 @@
 <div class="grid place-content-center h-120 mt-12 mb-12">
 
         <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
-        <h2 class="text-2xl text-center p-4 font-black">Registrieren</h2>
+        <h2 class="text-2xl text-center p-4 font-black dark:text-white">Registrieren</h2>
 
         <form class=" space-y-4" method="post">
             {% if form.errors %}

django/templates/base.html

@@ -1,6 +1,6 @@
 {% load static %}
 <!DOCTYPE html>
-<html lang="de">
+<html lang="de" class="dark:bg-gray-900 h-full">
 <head>
     <link rel="icon" type="image/png" href="{% static 'icons/favicon.png' %}">
     <meta charset="UTF-8">
@@ -9,11 +9,16 @@
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
     <script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
     <title>qivip</title>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+     integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
+     crossorigin=""/>
 </head>
-<body>
+<body class="flex flex-col min-h-screen">
+    <main class="grow"> 
     {% include 'partials/_nav.html' %}
     {% block content%}{% endblock %}
     {% block faqs%}{% endblock %}
+    </main>
     {% include 'partials/_footer.html' %}
   
     <!-- Toast Container -->
@@ -68,12 +73,12 @@
                 }, duration);
             }
         };
-        if (window.location.pathname !== "/library/") {
-        localStorage.setItem("meine_seite_scroll", 0);}
+
     </script>
     {% block extra_js %}{% endblock %}
     <style>html {
         overflow-y: scroll;
       }</style>
+      
 </body>
 </html>

django/templates/homepage/home.html

@@ -4,9 +4,9 @@
 <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-4xl text-md">forever and forall</h3>
+        <h3 class="mt-4 italic font-light sm:text-4xl text-md bg-gradient-to-r from-pink-500 via-purple-600 to-blue-700 bg-clip-text text-transparent">weil Lernen auch Spaß <br> machen kann!</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">
+    <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 dark:bg-gray-900 dark:border-0">
         <a class="qp-a-button bg-green-500 text-white" href="{% url 'play:join_game' %}">Teilnehmen</a>
         <a class="qp-a-button bg-indigo-500 text-white" href="{% url 'library:overview_quiz' %}">Moderieren</a>
         <a class="qp-a-button bg-purple-500 text-white" href="{% url 'library:new_quiz' %}">Erstellen</a>
@@ -22,16 +22,16 @@
 
 </style>
 
-
+{% if faqs %}
 <div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
   <div class="flex items-center gap-3">
-    <h2 class="text-2xl font-bold text-gray-900">FAQs</h2>
+    <h2 class="text-2xl font-bold text-gray-900 dark:text-white">FAQs</h2>
     <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
   </div>
 </div>
 
 
-    <div class="input-group !max-w-4xl tracking-wide">
+    <div class="input-group !max-w-4xl tracking-wide dark:!bg-gray-900 dark:!text-white">
         <h1 class="font-black text-blue-600 flex justify-between gap-2 lg:text-lg">
 
 
@@ -42,126 +42,17 @@
    
 </div>
 
-
-<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
+{% for faq in faqs %}
+<div class="input-group mt-2.5  !max-w-4xl hover:bg-gray-50 dark:!bg-gray-900 dark:!text-white ">
         <details>
-            <summary class="flex justify-between cursor-pointer font-bold">Was ist qivip?
+            <summary class="flex justify-between cursor-pointer font-bold">{{ faq.question }}
                 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
                 <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
                 </svg>
             </summary> 
-            <p class="text-blue-600">qivip ist eine Webseite zum Lernen! Es können vor allem Quizze erstellt, bearbeitet, kopiert und auch gespielt werden. </p>
+            <p class="text-blue-600">{{ faq.answer }}</p>
         </details>
 </div>
-
-<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
-        <details>
-            <summary class="flex justify-between cursor-pointer font-bold">Was sind die Vorteile von qivip?
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
-                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
-                </svg>
-            </summary> 
-            <p class="text-blue-600">
-                Einige Vorteile von qivip:
-                <br>
-                - Sie können Quizze moderieren ohne Account (siehe wie man Quizze mit mehreren Personen gemeinsam spielt)
-                <br>
-                - alle öffentlichen Quizze können auch ohne Account gespielt werden
-                <br>
-                - qivip ist 100% kostenlos
-                                <br>
-                - es gibt keine Werbung
-                                                <br>
-                - qivip ist Open Source
-            </p>
-        </details>
-</div>
-
-<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
-        <details>
-            <summary class="flex justify-between cursor-pointer font-bold">Ist qivip kostenlos?
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
-                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
-                </svg>
-            </summary> 
-            <p class="text-blue-600">Ja! qivip ist zu 100% kostenlos und es gibt keine versteckten Kosten.</p>
-        </details>
-</div>
-
-<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
-        <details>
-            <summary class="flex justify-between cursor-pointer font-bold">Muss ich mich bei qivip registrieren, wenn ich ein Quiz spielen möchte?
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
-                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
-                </svg>
-            </summary> 
-            <p class="text-blue-600">Nein! qivip ist so ausgelegt, dass man auch ohne Account alle öffentlichen Quizze spielen kann.</p>
-        </details>
-</div>
-
-<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
-        <details>
-            <summary class="flex justify-between cursor-pointer font-bold">Kann ich ein Quiz von qivip auch alleine spielen?
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
-                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
-                </svg>
-            </summary> 
-            <p class="text-blue-600">Ja! Gehen Sie zur Bibliothek und klicken Sie auf den Button "spielen" (eines von Ihnen ausgewählten Quizzes). Wählen Sie anschließend bei den Spielmodi einfach den Lernmodus aus.</p>
-        </details>
-</div>
-<div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
-        <details>
-            <summary class="flex justify-between cursor-pointer font-bold">Wie kann ich ein Quiz erstellen?
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
-                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
-                </svg>
-            </summary> 
-            <p class="text-blue-600">Wichtig: Für diese Funktion müssen Sie angemeldet sein. Gehen Sie dafür auf die Startseite und klicken Sie auf "Erstellen". Nun wird Ihnen ein Formular angezeigt, dass Sie dann ausfüllen.
-                Anschließend können Sie Fragen zu dem Quiz hinzufügen, indem Sie auf den Button eines Fragetyps klicken. </p>
-        </details>
-    </div>
-
-    <div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
-        <details>
-            <summary class="flex justify-between cursor-pointer font-bold">Wie kann ich mit mehreren Personen ein Quiz gemeinsam spielen?
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
-                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
-                </svg>
-            </summary> 
-            <p class="text-blue-600">
-                Wenn man ein Quiz mit mehreren Personen spielt, gibt es sowohl einen Moderator als auch die Teilnehmer.
-                <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.
-                <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.  
-             </p>
-        </details>
-    </div>
-
-
-    <div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
-        <details>
-            <summary class="flex justify-between cursor-pointer font-bold">Wo steht unser Server?
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
-                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
-                </svg>
-            </summary> 
-            <p class="text-blue-600">Unser Server befindet sich in Deutschland, genauer gesagt in Nürnberg. </p>
-        </details>
-    </div>
-
-    <div class="input-group mt-2.5 !max-w-4xl hover:!bg-gray-50">
-        <details>
-            <summary class="flex justify-between cursor-pointer font-bold">Wer steckt hinter qivip?
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
-                <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
-                </svg>
-            </summary> 
-            <p class="text-blue-600">Wir sind eine kleine Gruppe von Schülern, die sich im Rahmen eines Enrichmenten Projektes zusammengefunden hat. </p>
-        </details>
-    </div>
- 
+{% endfor %}
+{% endif %}
 {% endblock %}

django/templates/homepage/impress.html

@@ -2,7 +2,7 @@
 {% block content%}
 
     <div class="flex justify-center  items-center mt-12">
-        <div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md">
+        <div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md  dark:!bg-transparent dark:!text-white ">
             <div class="grid place-content-center h-120">
               
                 <h1 class="text-center m-4 text-3xl lg:text-6xl">Impressum</b></h1>
@@ -12,7 +12,7 @@
             </div>
 
                 <div class="flex justify-end">
-                    <span class="text-[clamp(0.6rem,5vw,1rem)] font-black overflow-x-auto mt-1 ml-0.75 text-blue-600 p-0.75 bg-white">qivip
+                    <span class="text-[clamp(0.6rem,5vw,1rem)] font-black overflow-x-auto mt-1 ml-0.75 text-blue-600 p-0.75 bg-white dark:bg-transparent ">qivip
                     </span>
                     </div>
         </div>

django/templates/homepage/privacy.html

@@ -2,7 +2,7 @@
 
         {% block content%}
         <div class="flex justify-center  items-center mt-12 ">
-            <div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md">
+            <div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md dark:!bg-transparent dark:!text-white">
                 <div class="grid place-content-center h-120">
                   
                     <h1 class="text-center m-4 text-3xl lg:text-6xl">Datenschutz-</br>erklärung</h1>
@@ -12,7 +12,7 @@
                 </div>
     
                     <div class="flex justify-end">
-                        <span class="text-[clamp(0.6rem,5vw,1rem)] font-black overflow-x-auto mt-1 ml-0.75 text-blue-600 p-0.75 bg-white">qivip
+                        <span class="text-[clamp(0.6rem,5vw,1rem)] font-black overflow-x-auto mt-1 ml-0.75 text-blue-600 p-0.75 bg-white dark:!bg-transparent ">qivip
                         </span>
                         </div>
             </div>

django/templates/library/delete_confirmation.html

@@ -3,15 +3,15 @@
 {% block content %}
 <div class="container mx-auto px-4">
     <div class="max-w-lg mx-auto mt-10">
-        <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md">
+        <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md dark:text-white dark:bg-transparent">
             <div class="text-center">
                 <svg class="mx-auto h-12 w-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                 </svg>
                 
-                <h2 class="mt-4 text-xl font-bold text-gray-900">Löschen bestätigen</h2>
+                <h2 class="mt-4 text-xl font-bold text-gray-900 dark:text-white">Löschen bestätigen</h2>
                 
-                <p class="mt-2 text-sm text-gray-600">
+                <p class="mt-2 text-sm text-gray-600 dark:text-white">
                     {% if object.quiz_id %}
                         Möchten Sie die Frage "{{ object.data.question }}" wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.
                     {% else %}

django/templates/library/detail_quiz.html

@@ -3,22 +3,21 @@
 {% block content %}
 
 <div class="container mx-auto px-4">
-    
-    <div class="flex flex-wrap space-y-2 items-center justify-between mb-6">
-        <h1 class="text-2xl font-bold mr-4 ">{{ quiz.name }}</h1> 
+    <div class="flex flex-wrap space-y-2 items-center justify-between mb-6 dark:text-white">
+        <h1 class="text-2xl font-bold mr-4 dark:text-white ">{{ quiz.name }}</h1> 
      
         <div class=" flex flex-wrap space-x-2   ">
            
             <div class="flex flex-wrap">
             {% if quiz.user_id == request.user %}
             <a href="{% url 'library:edit_quiz' quiz.id %}" class=" text-white px-2 py-2 rounded-md text-sm lg:text-lg hover:scale-110 transition-colors">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7 text-gray-600">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7 text-gray-600 dark:text-white">
                     <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
                   </svg>
                   
             </a>
             <a href="{% url 'library:delete_quiz' quiz.id %}" class=" text-white px-2 py-2 rounded-md text-sm lg:text-lg hover:scale-110 transition-colors">
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7 text-gray-600">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7 text-gray-600 dark:text-white">
                     <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                   </svg>
             </a>
@@ -32,7 +31,7 @@
                     <path stroke-linecap="round" stroke-linejoin="round"
                       d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75" />
                   </svg>
-                  Quiz kopieren
+                  Quiz duplizieren
                 </a>
             
                 {% if quiz.questions.count != 0 %}
@@ -51,16 +50,17 @@
             </div>
           
             
+       
     </div>
   
     {% if quiz.description %}
-    <p class="text-gray-600 mb-4">{{ quiz.description }}</p>
+    <p class="text-gray-600 mb-4 dark:text-gray-400">{{ quiz.description }}</p>
     {% endif %}
     <div class="flex justify-end mb-4">
     {% if detail == True %}
     
 <a href="{% url 'library:detail_quiz' quiz.id %}?show_answers=false">
-    <div class="flex items-center mr-2">
+    <div class="flex items-center mr-2 dark:text-white">
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
         <path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
       </svg>
@@ -71,7 +71,7 @@
 {% else %}
 
 <a href="{% url 'library:detail_quiz' quiz.id %}?show_answers=true">
-    <div class="flex items-center mr-2">
+    <div class="flex items-center mr-2 dark:text-white">
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
     <path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" />
     <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /> 
@@ -85,30 +85,43 @@
 </div> 
 
 
-    <div class="bg-white rounded-lg shadow-md border-blue-600 border-2 rounded-xl shadow-md">
+    <div class="bg-white rounded-lg shadow-md border-blue-600 border-2 rounded-xl shadow-md dark:!bg-transparent dark:text-white">
         <div class="border-b border-gray-200 p-4">
             <div class="flex justify-between items-center flex-wrap">
-                <h2 class="text-xl font-semibold">Fragen</h2>
+                <h2 class="text-xl font-semibold">Fragen
+                    {% for question in questions %}{% if forloop.last %}({{ forloop.counter }}) {% endif %} {% endfor %}
+                </h2>
                 <div class="flex space-x-2 flex-wrap">
                     {% if quiz.user_id == request.user %}
                     <a href="{% url 'library:new_question' %}?type=input&quiz_id={{ quiz.id }}" 
                        class=" mt-1 bg-green-100 text-green-800 px-4 py-2 rounded-md text-xs lg:text-lg  hover:border-blue-600 border-2">
                         Eingabe
                     </a>
-                    {% endif %}
                     
-
-                    {% if quiz.user_id == request.user %}
                     <a href="{% url 'library:new_question' %}?type=multiple_choice&quiz_id={{ quiz.id }}" 
                        class=" mt-1 bg-blue-100 text-blue-800 px-4 py-2 rounded-md text-xs lg:text-lg hover:border-blue-600 border-2">
                         Multiple Choice
                     </a>
-                    {% endif %}
-                    {% if quiz.user_id == request.user %}
+
                     <a href="{% url 'library:new_question' %}?type=true_false&quiz_id={{ quiz.id }}" 
                        class=" mt-1 bg-purple-100 text-purple-800 px-4 py-2 rounded-md text-xs lg:text-lg  hover:border-blue-600 border-2">
                         Wahr/Falsch
                     </a>
+                                      
+                    <a href="{% url 'library:new_question' %}?type=order&quiz_id={{ quiz.id }}" 
+                       class=" mt-1 bg-yellow-100 text-yellow-800 px-4 py-2 rounded-md text-xs lg:text-lg  hover:border-blue-600 border-2">
+                        Reihenfolge
+                    </a>
+
+                    <a href="{% url 'library:new_question' %}?type=guess&quiz_id={{ quiz.id }}" 
+                       class=" mt-1 bg-pink-100 text-pink-800 px-4 py-2 rounded-md text-xs lg:text-lg  hover:border-blue-600 border-2">
+                        Schätzen
+                    </a>
+
+                    <a href="{% url 'library:new_question' %}?type=map&quiz_id={{ quiz.id }}" 
+                       class=" mt-1 bg-orange-100 text-orange-800 px-4 py-2 rounded-md text-xs lg:text-lg  hover:border-blue-600 border-2">
+                        Karte
+                    </a>
                     {% endif %}
                 </div>
             </div>
@@ -119,59 +132,154 @@
             <div class="divide-y divide-gray-200">
                 {% for question in questions %}
                 
-                    <div class="w-full rounded-xl p-4 hover:bg-gray-50">
+
+                
+                    <div class="w-full rounded-xl p-4 hover:bg-gray-50 dark:hover:bg-[#2a2f3a] dark:text-white">
+                        <p>{{ forloop.counter }}.</p>
                         {% if quiz.user_id == request.user %} <a class="block flex h-full w-full" href="{% url 'library:edit_question' question.id %}" > {% endif %}
                         <div class="flex justify-between items-start">
                             
                             <div class="flex-grow">
                                 <p class="font-medium">{{ question.data.question }}</p>
                                 <div class="mt-1">
-                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {% if question.data.type == 'multiple_choice' %}bg-blue-100 text-blue-800 {% elif question.data.type == 'input' %} bg-green-100 text-green-800 {% else %}bg-purple-100 text-purple-800{% endif %}">
-                                        {% if question.data.type == 'multiple_choice' %}Multiple Choice{% elif question.data.type == 'input' %}Eingabe{% else %}Wahr/Falsch{% endif %}
+                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {% if question.data.type == 'multiple_choice' %}bg-blue-100 text-blue-800 {% elif question.data.type == 'input' %} bg-green-100 text-green-800 {% elif question.data.type == 'map' %}bg-orange-100 text-orange-800 {% elif question.data.type == 'true_false' %}bg-purple-100 text-purple-800{% elif question.data.type == 'order' %}bg-yellow-100 text-yellow-800{% else %}bg-pink-100 text-pink-800 {% endif %}">
+                                        {% if question.data.type == 'multiple_choice' %}Multiple Choice
+                                        {% elif question.data.type == 'input' %}Eingabe
+                                        {% elif question.data.type == 'map' %}Karte
+                                        {% elif question.data.type == 'true_false' %}Wahr/Falsch
+                                        {% elif question.data.type == 'order' %}Reihenfolge
+                                        {% else %}Schätzen
+                                        {% endif %}
                                     </span>
                                 </div>
                                 <div class="mt-2">
                                     {% if detail %}
 
                                     {% if question.data.type == 'multiple_choice' %}
+                                    <div class="w-full gap-4 md:flex justify-between ">
                                     <ul class="space-y-1 ">
-                                        {% for option in question.data.options %}
+                                          {% for option in question.data.options|dictsort:"order" %}
+                                      
+                                            
                                             <li class="flex items-center text-sm ">
+                                               
                                                 {% if option.is_correct %}
                                                     <svg class="h-4 w-4 text-green-500 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                                     </svg>
                                                     <span class="font-medium text-green-700">{{ option.value }}</span>
                                                 {% else %}
-                                                    <svg class="h-4 w-4 text-gray-400 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                    <svg class="h-4 w-4 text-gray-400 mr-1.5 dark:text-white " fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6"/>
                                                     </svg>
-                                                    <span class="text-gray-600">{{ option.value }}</span>
+                                                    <span class="text-gray-600 dark:text-white">{{ option.value }}</span>
                                                 {% endif %}
                                             </li>
                                         {% endfor %}                           
                                     </ul>
+                                       {% if question.image.image.url %}
+                                    <img src="{{ question.image.image.url }}" alt="Bild der Frage" class="w-[200px] rounded-lg shadow-md border-blue-600 border-2 rounded-xl shadow-md object-contain mt-4 md:mt-0" />
+                                    {% endif %}
+                                </div>  
+                                
+                                {% elif question.data.type == 'map' and detail %}
+                                <div class="mt-3">
+                                    <div class="text-sm text-gray-600 dark:text-gray-300">
+                                        <span class="font-medium">Zielort:</span> 
+                                        <span id="target-location-{{ forloop.counter }}">
+                                            {% if question.data.target_location %}
+                                                {{ question.data.target_location }}
+                                            {% else %}
+                                                Kein Zielort festgelegt
+                                            {% endif %}
+                                        </span>
+                                    </div>
+                                    {% if question.data.target_location %}
+                                    <script>
+                                        // Format the coordinates to 4 decimal places
+                                        document.addEventListener('DOMContentLoaded', function() {
+                                            const targetEl = document.getElementById('target-location-{{ forloop.counter }}');
+                                            if (targetEl) {
+                                                const coords = targetEl.textContent.trim().split(',');
+                                                if (coords.length === 2) {
+                                                    const lat = parseFloat(coords[0]).toFixed(4);
+                                                    const lng = parseFloat(coords[1]).toFixed(4);
+                                                    targetEl.textContent = `${lat}, ${lng}`;
+                                                }
+                                            }
+                                        });
+                                    </script>
+                                    {% endif %}
+                                    {% if question.data.tolerance_radius %}
+                                    <div class="text-sm text-gray-600 dark:text-gray-300 mt-1">
+                                        <span class="font-medium">Toleranzradius:</span> {{ question.data.tolerance_radius }} Meter
+                                    </div>
+                                    {% endif %}
+                                    {% if question.image.image.url %}
+                                    <img src="{{ question.image.image.url }}" alt="Bild der Frage" class="w-[200px] rounded-lg shadow-md border-blue-600 border-2 rounded-xl shadow-md object-contain mt-4" />
+                                    {% endif %}
+                                </div>
+                                {% elif question.data.type == 'order' %}
+                                <div class="w-full gap-4 md:flex justify-between "> 
+                                    <ul class="space-y-1 ">
+                                        {% for option in question.data.options|dictsort:"order" %}
+                                            <li class="flex items-center text-sm">
+                                           {{ forloop.counter }}. &nbsp;
+                                                    <span class="font-medium text-green-700 dark:text-white">{{ option.value }}</span>
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                    {% if question.image.image.url %}
+                                    <img src="{{ question.image.image.url }}" alt="Bild der Frage" class="w-[200px] rounded-lg shadow-md border-blue-600 border-2 rounded-xl shadow-md object-contain mt-4 md:mt-0" />
+                                    {% endif %}
+                                </div> 
+                                
                                     {% elif question.data.type == 'input' %}
+                                    <div class="w-full gap-4 md:flex justify-between ">    
                                     <ul class="space-y-1 ">
                                         {% for option in question.data.options %}
                                             <li class="flex items-center text-sm">
                                                   <svg class="h-4 w-4 text-green-500 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                                                     </svg>
-                                                    <span class="font-medium text-green-700">{{ option.value }}</span>
+                                                    <span class="font-medium text-green-700 dark:text-white">{{ option.value }}</span>
                                             </li>
                                         {% endfor %}
                                     </ul>
-                                
+                                    {% if question.image.image.url %}
+                                    <img src="{{ question.image.image.url }}" alt="Bild der Frage" class="w-[200px] rounded-lg shadow-md border-blue-600 border-2 rounded-xl shadow-md object-contain mt-4 md:mt-0" />
+                                    {% endif %}
+                                </div> 
+                                       {% elif question.data.type == 'guess' %}
+                                    <div class="w-full gap-4 md:flex justify-between ">    
+                                    <ul class="space-y-1 ">
+                                        {% for option in question.data.options %}
+                                            <li class="flex items-center text-sm">
+                                                  <svg class="h-4 w-4 text-green-500 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+                                                    </svg>
+                                                    <span class="font-medium text-green-700 dark:text-white">{{ option.value }}</span>
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                    {% if question.image.image.url %}
+                                    <img src="{{ question.image.image.url }}" alt="Bild der Frage" class="w-[200px] rounded-lg shadow-md border-blue-600 border-2 rounded-xl shadow-md object-contain mt-4 md:mt-0" />
+                                    {% endif %}
+                                </div> 
                                 {% else %}
+                                <div class="w-full gap-4 md:flex justify-between ">                  
                                 {% for option in question.data.options %}
                                     {% if option.is_correct %}
                                     <p class="text-sm">
-                                    <span class="text-gray-500">Richtige Antwort:</span>
+                                    <span class="text-gray-500 dark:text-white">Richtige Antwort:</span>
                                     <span class="ml-1 font-medium {% if option.value == "Wahr" %} text-green-700 {% else %}text-red-700{% endif %}">{{ option.value }}</span>
                                 </p>
                                     {% endif %}
                             {% endfor %}
+                                    {% if question.image.image.url %}
+                                    <img src="{{ question.image.image.url }}" alt="Bild der Frage" class="w-[200px] rounded-lg shadow-md border-blue-600 border-2 rounded-xl shadow-md object-contain mt-4 md:mt-0" />
+                                    {% endif %}
+                                    </div>
                             
                                 {% endif %}
 
@@ -186,7 +294,7 @@
                                 <a href=" {% url 'library:delete_question' question.id %}" 
                 class="  text-red-700 px-4 py-1 rounded hover:scale-110 ">
                 {% if quiz.user_id == request.user %}
-                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7 text-gray-600">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="dark:text-white size-7 text-gray-600">
                     <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
                   </svg>
                   {% endif %}
@@ -213,29 +321,126 @@
 
     <div class="flex justify-end">   
         {% if quiz.base_quiz %}
-        <p class="text-gray-600 mt-2 ">Bearbeitung:<span class="text-blue-600 font-bold"> <a href="{% url 'library:overview_quiz' %}?filter=1&user={{ quiz.user_id }}">{{ quiz.user_id }}</a></span></p>
+        <p class="text-gray-600 mt-2 dark:text-white">Bearbeitung:<span class="text-blue-600 font-bold"> <a href="{% url 'library:overview_quiz' %}?filter=1&user={{ quiz.user_id }}">{{ quiz.user_id }}</a></span></p>
         {% else %}
-        <p class="text-gray-600 mt-2 ">Autor:<span class="text-blue-600 font-bold"> <a href="{% url 'library:overview_quiz' %}?filter=1&user={{ quiz.user_id }}">{{ quiz.user_id }}</a></span></p>
+        <p class="text-gray-600 mt-2 dark:text-white">Autor:<span class="text-blue-600 font-bold"> <a href="{% url 'library:overview_quiz' %}?filter=1&user={{ quiz.user_id }}">{{ quiz.user_id }}</a></span></p>
         {% endif %}
     </div>
 
 <div class="flex justify-end">   
 {% if quiz.base_quiz %}
-<p class="text-gray-600  ">Kopie von: <a href="{% url 'library:detail_quiz' quiz.base_quiz.id %}"><span class="text-blue-600 font-bold">{{ quiz.base_quiz}}</span></a></p>
+<p class="text-gray-600 dark:text-white ">Kopie von: <a href="{% url 'library:detail_quiz' quiz.base_quiz.id %}"><span class="text-blue-600 font-bold">{{ quiz.base_quiz}}</span></a></p>
 {% endif %}
 </div>
 <div class="flex justify-end">  
     {% if quiz.base_quiz %}
-    <p class="text-gray-600 ">Autor:<span class="text-blue-600 font-bold"> <a href="{% url 'library:overview_quiz' %}?filter=1&user={{ quiz.base_quiz.user_id }}">{{ quiz.base_quiz.user_id }}</a></span></p>
+    <p class="text-gray-600 dark:text-white">Autor:<span class="text-blue-600 font-bold"> <a href="{% url 'library:overview_quiz' %}?filter=1&user={{ quiz.base_quiz.user_id }}">{{ quiz.base_quiz.user_id }}</a></span></p>
     {% endif %}
 </div>
 
-<div class="flex justify-end">  
+<!-- Links müssen wieder ergänzt werden!
+ {% if questions %}
+<div class="flex flex-col sm:flex-row gap-4 items-start sm:items-center my-6">
+
+    
+
+  <a href="" 
+     target="_blank"
+     class=" inline-flex items-center gap-2 px-2 py-2 rounded-lg bg-blue-600 hover:bg-blue-700 text-white shadow-md transition">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
+         viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M12 4v16m8-8H4" />
+    </svg>
+    als Aufgabenblatt herunterladen (PDF)
+  </a>
+ 
+ 
+  <a href=""
+     target="_blank"
+     class="inline-flex items-center gap-2 px-2 py-2 rounded-lg bg-green-600 hover:bg-green-700 text-white  shadow-md transition">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
+         viewBox="0 0 24 24" stroke="currentColor">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+            d="M12 4v16m8-8H4" />
+    </svg>
+    Lösungen herunterladen (PDF)
+  </a>
+
+ 
+
+</div>
+   {% endif %}
+   -->
+
+   <div class="max-w-full p-4 mt-8 rounded-2xl bg-gray-100 dark:bg-transparent  shadow-sm">
+
+
+
+
+<div class="flex flex-col max-w-full">
+         <p class="text-lg font-bold text-gray-800 dark:text-white dark:bg-transparent mb-3">
+       Credits
+    </p>
     {% if quiz.credits %}
-    <p class="text-gray-600 mb-2">Credits:<span class="text-blue-600 font-bold"> {{ quiz.credits }}</span></p>
+        <p class="text-blue-500 mb-2 w-full break-words dark:text-gray-400  ">
+            <span class="break-words italic">{{ quiz.credits }}</span>
+            <span class="font-normal break-words text-gray-600 dark:text-white">(Credits für das Quiz)</span>
+        </p>
+        {% else %}
+        <p class="text-gray-500 dark:text-gray-400 ">Keine Credits für das Quizformular vorhanden.</p>
     {% endif %}
+    
 </div>
 
+
+
+<div class="flex flex-col max-w-full">
+    <ul class="space-y-2">
+        {% regroup questions by credits as grouped_credits %}
+        {% if grouped_credits|length == 1 and not grouped_credits.0.grouper %}
+            <li class="text-gray-500 dark:text-gray-400 ">Keine zusätzlichen Credits für die einzelnen Fragen vorhanden.</li>
+        {% else %}
+            {% for question in questions %}
+                {% if question.credits %}
+                    <li class="text-blue-500 mb-2 w-full break-words  break-words dark:text-gray-400 ">
+                        <span class="italic">{{ question.credits }}</span>
+                        <span class="font-normal break-words text-gray-600 dark:text-white">(Frage: {{ forloop.counter }})</span>
+                    </li>
+                {% endif %}
+            {% endfor %}
+        {% endif %}
+    </ul>
+</div>
+</div>
+
+
+<div class="max-w-full p-4 mt-8 rounded-2xl bg-gray-100 dark:bg-transparent  shadow-sm">
+    <p class="text-lg font-bold text-gray-800 dark:text-white dark:bg-transparent mb-3">
+        Quiz-Statistik
+    </p>
+
+    <div class="space-y-2 text-gray-700 dark:text-white ">
+        <p>
+            <span class="font-semibold">{{ quiz.quiz_played_Lernmodus }}</span>
+            mal im Lernmodus gespielt
+        </p>
+
+        <p>
+            <span class="font-semibold">{{ quiz.quiz_played_Moderiermodus }}</span>
+            mal im Moderiermodus gespielt
+            <span class="text-sm text-gray-500 dark:text-gray-400">
+                (insg. {{ quiz.quiz_played_Moderiermodus_players }} Spieler)
+            </span>
+        </p>
+         <p class="text-xs opacity-50"> 
+            * zählt nur, wenn das Quiz vollständig beendet wird
+        </p>
+
+    </div>
+</div>
+
+
 </div>
 
 {% endblock %}

django/templates/library/form.html

@@ -1,8 +1,13 @@
 {% extends 'base.html' %}
 
+
 {% block content %}
-<div class="input-group  border-blue-600 border-2 rounded-xl shadow-md mt-12">
-    <form method="post" enctype="multipart/form-data">
+
+
+
+  <div class="container mx-auto px-4 py-4">
+<div class="max-w-lg field-group mx-auto bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md dark:bg-transparent dark:text-white">
+    <form method="post" enctype="multipart/form-data" class="dark-form space-y-4">
         {% csrf_token %}
         {{ form.as_p }}
 
@@ -15,7 +20,7 @@
         {% endif %}
         <div>
             <label class="font-bold" for="quiz_image">Bild:</label>
-            <input  class="bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400" type="file" name="quiz_image" id="quiz_image">
+            <input  class="max-w-full bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400 dark:bg-transparent" type="file" name="quiz_image" id="quiz_image">
         </div>
 
        <div class="text-center text-gray-600 text-sm dislay-flex align-bottom">
@@ -34,4 +39,5 @@
         </div>
     </form>
 </div>
+</div>
 {% endblock %}

django/templates/library/head.html

@@ -0,0 +1,145 @@
+{% load static %}
+
+{% block extra_css %}
+<style>
+
+
+  .custom-outline {
+    -webkit-text-stroke: 0.2px rgb(0, 0, 0);
+  }
+</style>
+{% endblock %}
+
+{% block head %}
+<div class="container mx-auto px-4 py-4 flex justify-between items-center">
+    <button id="filterButton" class="dark:text-white dark:hover:bg-[#2a2f3a]  p-2 hover:bg-gray-100 rounded-lg transition-colors duration-200 flex items-center gap-2 text-gray-700">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+        </svg>
+        <span>Filter</span>
+    </button>
+    <div class="flex gap-2">
+        <a href="{% url link %}" class="dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a] inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors duration-200">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+            Zurücksetzen
+        </a>
+        <a href="{% url 'library:new_quiz' %}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+            </svg>
+            Neues Quiz
+        </a>
+    </div>
+</div>
+
+<div id="filterPanel" class="container mx-auto px-4 {% if request.GET.filter == '1' %}block{% else %}hidden{% endif %}">
+    <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200 dark:bg-transparent dark:text-white ">
+      <form action="{% url link %}" method="get" class="grid grid-cols-1 md:grid-cols-3 gap-6">
+         <input type="hidden" name="filter" id="filter-input"> 
+        <div class="space-y-2">
+            <div class="flex gap-2">
+            <input type="checkbox" name="use_min_amount_questions" id="use_min_amount_questions" {% if form.use_min_amount_questions.value %}checked{% endif %}>
+            <label class="block text-sm font-medium text-gray-700 dark:text-white">minimale Anzahl an Fragen</label>
+            </div>
+            <input 
+      type="range" 
+      name="min_amount_questions" 
+      id="id_min_amount_questions"
+      min="0" 
+      max="100" 
+      step="1"
+      value="{{ form.min_amount_questions.value|default_if_none:0 }}" 
+      class="w-full accent-blue-600 dark:text-white"
+      oninput="document.getElementById('min_amount_value').textContent = this.value + ' Frage(n)'"
+    {% if not form.use_min_amount_questions.value %}disabled{% endif %}
+    >
+
+    <span id="min_amount_value" class="text-sm font-semibold text-gray-800 dark:text-white">
+      {{ form.min_amount_questions.value|default_if_none:0 }} Frage(n)
+    </span>
+    <br>
+    <span class="text-xs text-gray-600 dark:text-white"> Quizze anderer User werden erst ab min. 1 Frage angezeigt.</span>
+    </div>
+
+        <div class="space-y-2">
+            <div class="flex gap-2">
+            <input type="checkbox" name="use_max_amount_questions" id="use_max_amount_questions" {% if form.use_max_amount_questions.value %}checked{% endif %}>
+            <label class="block text-sm font-medium text-gray-700 dark:text-white">maximale Anzahl an Fragen</label>
+            </div>
+       <input 
+      type="range" 
+      name="max_amount_questions" 
+      id="id_max_amount_questions"
+      min="1" 
+      max="100" 
+      step="1"
+      value="{{ form.max_amount_questions.value|default_if_none:100 }}" 
+      class="w-full accent-blue-600"
+      oninput="document.getElementById('max_amount_value').textContent = this.value+' Frage(n)'"
+       {% if not form.use_max_amount_questions.value %}disabled{% endif %}
+    >
+
+ <span id="max_amount_value" class="text-sm font-semibold text-gray-800 dark:text-white">
+      {{ form.max_amount_questions.value|default_if_none:100 }} Frage(n)
+    </span>
+</div>
+
+                <div class="space-y-2">
+            <label class="block text-sm font-medium text-gray-700 dark:text-white">veröffentlicht von User</label>
+            <input type="text" name="user" class="border-2 border-gray-300 rounded-lg p-2 w-full dark:text-white" id="id_user" value="{{ form.user.value|default_if_none:'' }}">
+        </div>
+       <div class="space-y-2">
+        <label class="block text-sm font-medium text-gray-700 dark:text-white">Kategorie</label>
+        {{ form.categories }}
+
+    </div> 
+       <div class="space-y-2">
+        <label class="block text-sm font-medium text-gray-700 dark:text-white">Suche</label>
+             {{ form.search }}
+
+    </div> 
+ 
+
+        <div class="md:col-span-3 flex justify-end">
+            <button
+             type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
+                </svg>
+                Filtern
+            </button>
+        </div>
+    </form>    
+    </div>
+</div>
+</form>
+<script>
+
+document.addEventListener('DOMContentLoaded', () => {
+
+   
+  const checkbox = document.getElementById('use_min_amount_questions');
+  const slider = document.getElementById('id_min_amount_questions');
+
+  const checkbox_max = document.getElementById('use_max_amount_questions');
+  const slider_max = document.getElementById('id_max_amount_questions');
+
+  checkbox.addEventListener('change', () => {
+    slider.disabled = !checkbox.checked;
+  });
+
+    checkbox_max.addEventListener('change', () => {
+    slider_max.disabled = !checkbox_max.checked;
+  });
+
+});
+
+
+
+
+</script>
+{% endblock %}
+
+

django/templates/library/overview_quiz(old).html

@@ -0,0 +1,672 @@
+{% extends 'base.html' %}
+{% load static %}
+<!-- Die gesamte Seite wird eigentlich nicht mehr genutzt. WICHTIG: ggf. kann Code aber hiervon noch genutzt werden. -->
+{% block extra_css %}
+<style>
+
+
+  .custom-outline {
+    -webkit-text-stroke: 0.2px rgb(0, 0, 0);
+  }
+</style>
+{% endblock %}
+
+
+{% block content %}
+
+<div class="container mx-auto px-4 py-4 flex justify-between items-center">
+    <button id="filterButton" class="p-2 hover:bg-gray-100 rounded-lg transition-colors duration-200 flex items-center gap-2 text-gray-700">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+        </svg>
+        <span>Filter</span>
+    </button>
+    <div class="flex gap-2">
+        <a href="{% url 'library:overview_quiz' %}" class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors duration-200">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+            Zurücksetzen
+        </a>
+        <a href="{% url 'library:new_quiz' %}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+            </svg>
+            Neues Quiz
+        </a>
+    </div>
+</div>
+
+<div id="filterPanel" class="container mx-auto px-4">
+    <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
+      <form action="{% url 'library:overview_quiz' %}" method="get" class="grid grid-cols-1 md:grid-cols-3 gap-6">
+        <input type="hidden" name="filter" value="1">
+        <div class="space-y-2">
+            <label class="block text-sm font-medium text-gray-700">minimale Anzahl an Fragen</label>
+            <input type="number" name="min_amount_questions" class="border-2 border-gray-300 rounded-lg p-2 w-full" min="1" id="id_min_amount_questions" value="{{ form.min_amount_questions.value|default_if_none:'' }}">
+        </div>
+        <div class="space-y-2">
+            <label class="block text-sm font-medium text-gray-700">maximale Anzahl an Fragen</label>
+            <input type="number" name="max_amount_questions" class="border-2 border-gray-300 rounded-lg p-2 w-full" min="1" id="id_max_amount_questions" value="{{ form.max_amount_questions.value|default_if_none:'' }}">
+        </div>
+        <div class="space-y-2">
+            <label class="block text-sm font-medium text-gray-700">veröffentlicht von User</label>
+            <input type="text" name="user" class="border-2 border-gray-300 rounded-lg p-2 w-full" id="id_user" value="{{ form.user.value|default_if_none:'' }}">
+        </div>
+        <div class="md:col-span-3 flex justify-end">
+            <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
+                </svg>
+                Filtern
+            </button>
+        </div>
+    </form>    
+    </div>
+</div>
+
+
+
+{% if user.is_authenticated %}
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
+  <div class="flex items-center gap-3">
+    <h2 id="my-quizzes" class="text-2xl font-bold text-gray-900">Meine Quizze</h2>
+    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
+  </div>
+</div>
+
+<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 auto-rows-fr">
+    {% for quiz in my_quizzes %}
+    <article class="relative min-h-[20rem] rounded-xl shadow-lg overflow-hidden bg-white flex flex-col">
+        <!-- Image Section (Top) -->
+        <div class="h-48 w-full relative flex-shrink-0">
+          {% if quiz.image %}
+          <div class="relative w-full h-full inset-0 bg-cover bg-center">
+            <!-- Hintergrundbild -->
+            <div class="absolute inset-0 bg-cover bg-center"
+                style="background-image: url({{ quiz.image.image.url }});">
+            </div>
+          </div>
+         
+
+          {% else %}
+          <div class="h-full bg-gradient-to-r from-blue-500 to-blue-600 flex items-center justify-center font-black text-white text-4xl px-4  overflow-auto break-words hyphens-auto ">{{ quiz.name }}</div>
+          {% endif %}
+          {% if user.is_authenticated %}
+          {% if quiz.id not in favorite_quiz_ids %}
+          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
+           
+            <a href="{% url 'library:favorite_quiz' quiz.pk %}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-black size-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+            </svg>
+          </a>
+          </div>
+          
+          {% else %}
+          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
+          <a href="{% url 'library:favorite_quiz' quiz.pk %}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-yellow-400 size-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+            </svg>
+          </a>
+          </div>
+          {% endif %}
+          {% endif %}
+        </div>
+
+        
+
+        <!-- Content Section (Bottom) -->
+        <div class="flex-grow bg-white p-4 flex flex-col gap-3">
+          <!-- Title -->
+          <h2 class="text-xl font-bold text-gray-900 break-words mb-2"> 
+            <a href="{% url 'library:detail_quiz' quiz.id %}" class="hover:text-blue-600 transition-colors">{{ quiz.name }}</a>
+          </h2>
+          <!-- Description -->
+          <p class="text-sm text-gray-700 break-words mb-3">{{ quiz.description }}</p>
+
+          <!-- Quiz Info Grid -->
+          <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+            <!-- Difficulty -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+              <span class="text-gray-800">{{ quiz.difficulty }}</span>
+            </div>
+            
+            <!-- Questions Count -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span class="text-gray-800">{{ quiz.questions.count }} Fragen</span>
+            </div>
+            
+            <!-- Status -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span class="text-gray-800">{{ quiz.status }}</span>
+            </div>
+            
+            <!-- Rating -->
+            <div class="flex items-center gap-1">
+              {% if quiz.rating_count > 0 %}
+              {% for i in '12345'|make_list %}
+                {% if forloop.counter <= quiz.average_rating|floatformat:0|add:0 %}
+                  <span class="text-yellow-500 text-base">★</span>
+                {% else %}
+                  <span class="text-gray-300 text-base">★</span>
+                {% endif %}
+              {% endfor %}
+              <span class="text-gray-600 text-sm">({{ quiz.rating_count }})</span>
+              {% else %}
+              <span class="text-gray-600 text-sm">Noch keine Bewertungen</span>
+              {% endif %}
+            </div>
+          </div>
+
+          <!-- Authors -->
+          {% if quiz.authors.all %}
+          <div class="flex items-center gap-2 text-sm mt-2">
+            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
+            <span class="text-gray-600">
+              {% for author in quiz.authors.all %}
+                {{ author.username }}{% if not forloop.last %}, {% endif %}
+              {% endfor %}
+            </span>
+          </div>
+          {% endif %}
+
+          <!-- Action Buttons -->
+          <div class="flex justify-between items-center gap-2 mt-3 border-t pt-3">
+            {% if quiz.questions.count != 0 %}
+            <a href="{% url 'play:create_game' quiz.id %}" 
+               class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors duration-200 flex items-center gap-2">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              Spielen
+            </a>
+            {% else %}
+            Fürs Spielen ist min. 1 Frage nötig!
+            {% endif %}
+            <div class="flex gap-1">
+              <a href="{% url 'library:detail_quiz' quiz.id %}" 
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                </svg>
+              </a>
+              {% if quiz.user_id == request.user %}
+              <a href="{% url 'library:edit_quiz' quiz.id %}" 
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                </svg>
+              </a>
+              <a href="{% url 'library:delete_quiz' quiz.id %}" 
+                 class="p-1.5 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors duration-200">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+              </a>
+              {% endif %}
+            </div>
+          </div>
+          </div>
+    </article>
+    {% endfor %}
+    
+  </div>
+
+  <!-- Pagination für Meine Quizze -->
+  {% if my_quizzes.paginator.num_pages > 1 %}
+  <div class="flex justify-center space-x-2 mt-6 mb-8">
+    {% if my_quizzes.has_previous %}
+    <a href="?my_page={{ my_quizzes.previous_page_number }}{% if request.GET.all_page %}&all_page={{ request.GET.all_page }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" 
+       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+    </a>
+    {% endif %}
+    
+    <span class="px-3 py-1 text-gray-600">Seite {{ my_quizzes.number }} von {{ my_quizzes.paginator.num_pages }}</span>
+    
+    {% if my_quizzes.has_next %}
+    <a href="?my_page={{ my_quizzes.next_page_number }}{% if request.GET.all_page %}&all_page={{ request.GET.all_page }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" 
+       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
+    </a>
+    {% endif %}
+  </div>
+  {% endif %}
+</div>
+{% endif %}
+
+
+
+
+{% if user.is_authenticated %}
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
+  <div class="flex items-center gap-3">
+    <h2 id="my-quizzes" class="text-2xl font-bold text-gray-900">Meine Favoriten</h2>
+    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
+  </div>
+</div>
+
+<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 auto-rows-fr">
+    {% for quiz in favorite_quizzes %}
+    <article class="relative min-h-[20rem] rounded-xl shadow-lg overflow-hidden bg-white flex flex-col">
+        <!-- Image Section (Top) -->
+        <div class="h-48 w-full relative flex-shrink-0">
+          {% if quiz.image %}
+          <div class="relative w-full h-full inset-0 bg-cover bg-center">
+            <!-- Hintergrundbild -->
+            <div class="absolute inset-0 bg-cover bg-center"
+                style="background-image: url({{ quiz.image.image.url }});">
+            </div>
+          </div>
+         
+
+          {% else %}
+          <div class="h-full bg-gradient-to-r from-blue-500 to-blue-600 flex items-center justify-center font-black text-white text-4xl px-4  overflow-auto break-words hyphens-auto ">{{ quiz.name }}</div>
+          {% endif %}
+          {% if user.is_authenticated %}
+          {% if quiz.favorite == False %}
+         
+          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
+           
+            <a href="{% url 'library:favorite_quiz' quiz.pk %}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-black size-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+            </svg>
+          </a>
+          </div>
+          
+          {% else %}
+          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
+          <a href="{% url 'library:favorite_quiz' quiz.pk %}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-yellow-400 size-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+            </svg>
+          </a>
+          </div>
+          {% endif %}
+          {% endif %}
+        </div>
+
+        
+
+        <!-- Content Section (Bottom) -->
+        <div class="flex-grow bg-white p-4 flex flex-col gap-3">
+          <!-- Title -->
+          <h2 class="text-xl font-bold text-gray-900 break-words mb-2"> 
+            <a href="{% url 'library:detail_quiz' quiz.id %}" class="hover:text-blue-600 transition-colors">{{ quiz.name }}</a>
+          </h2>
+          <!-- Description -->
+          <p class="text-sm text-gray-700 break-words mb-3">{{ quiz.description }}</p>
+
+          <!-- Quiz Info Grid -->
+          <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+            <!-- Difficulty -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+              <span class="text-gray-800">{{ quiz.difficulty }}</span>
+            </div>
+            
+            <!-- Questions Count -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span class="text-gray-800">{{ quiz.questions.count }} Fragen</span>
+            </div>
+            
+            <!-- Status -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span class="text-gray-800">{{ quiz.status }}</span>
+            </div>
+            
+            <!-- Rating -->
+            <div class="flex items-center gap-1">
+              {% if quiz.rating_count > 0 %}
+              {% for i in '12345'|make_list %}
+                {% if forloop.counter <= quiz.average_rating|floatformat:0|add:0 %}
+                  <span class="text-yellow-500 text-base">★</span>
+                {% else %}
+                  <span class="text-gray-300 text-base">★</span>
+                {% endif %}
+              {% endfor %}
+                <span class="text-gray-600 text-sm">({{ quiz.rating_count }})</span>
+              {% else %}
+                <span class="text-gray-600 text-sm">Noch keine Bewertungen</span>
+              {% endif %}
+            </div>
+          </div>
+
+          <!-- Authors -->
+          {% if quiz.authors.all %}
+          <div class="flex items-center gap-2 text-sm mt-2">
+            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
+            <span class="text-gray-600">
+              {% for author in quiz.authors.all %}
+                {{ author.username }}{% if not forloop.last %}, {% endif %}
+              {% endfor %}
+            </span>
+          </div>
+          {% endif %}
+
+          <!-- Action Buttons -->
+          <div class="flex justify-between items-center gap-2 mt-3 border-t pt-3">
+            {% if quiz.questions.count != 0 %}
+            <a href="{% url 'play:create_game' quiz.id %}" 
+               class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors duration-200 flex items-center gap-2">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              Spielen
+            </a>
+            {% else %}
+           Fürs Spielen ist min. 1 Frage nötig!
+            {% endif %}
+
+            <div class="flex gap-1">
+              <a href="{% url 'library:detail_quiz' quiz.id %}" 
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                </svg>
+              </a>
+              {% if quiz.user_id == request.user %}
+              <a href="{% url 'library:edit_quiz' quiz.id %}" 
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                </svg>
+              </a>
+              <a href="{% url 'library:delete_quiz' quiz.id %}" 
+                 class="p-1.5 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors duration-200">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+              </a>
+              {% endif %}
+            </div>
+          </div>
+          </div>
+    </article>
+    {% endfor %}
+    
+  </div>
+
+  <!-- Pagination für Meine Quizze -->
+  {% if favorite_quizzes.paginator.num_pages > 1 %}
+  <div class="flex justify-center space-x-2 mt-6 mb-8">
+    {% if favorite_quizzes.has_previous %}
+    <a href="?my_page={{ favorite.previous_page_number }}{% if request.GET.all_page %}&all_page={{ request.GET.all_page }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" 
+       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+    </a>
+    {% endif %}
+    
+    <span class="px-3 py-1 text-gray-600">Seite {{ favorite_quizzes.number }} von {{ favorite_quizzes.paginator.num_pages }}</span>
+    
+    {% if favorite_quizzes.has_next %}
+    <a href="?favorite_page={{ favorite_quizzes.next_page_number }}{% if request.GET.all_page %}&all_page={{ request.GET.all_page }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" 
+       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
+    </a>
+    {% endif %}
+  </div>
+  {% endif %}
+</div>
+{% endif %}
+
+
+
+
+
+
+
+
+
+<!-- Alle -->
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
+  <div class="flex items-center gap-3">
+    <h2 id="all-quizzes" class="text-2xl font-bold text-gray-900">Alle</h2>
+    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
+  </div>
+</div>
+
+{% if all_quizzes %}
+<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 auto-rows-fr">
+    {% for quiz in all_quizzes %}
+    <article class="relative min-h-[20rem] rounded-xl shadow-lg overflow-hidden bg-white flex flex-col">
+        <!-- Image Section (Top) -->
+        <div class="h-48 w-full relative flex-shrink-0">
+          {% if quiz.image %}
+          <div class="relative w-full h-full inset-0 bg-cover bg-center">
+            <!-- Hintergrundbild -->
+            <div class="absolute inset-0 bg-cover bg-center"
+                style="background-image: url({{ quiz.image.image.url }});">
+            </div>
+          </div>
+          
+            
+
+          {% else %}
+          <div class="h-full bg-gradient-to-r from-blue-500 to-blue-600 flex items-center justify-center font-black text-white text-4xl px-4  overflow-auto break-words hyphens-auto ">{{ quiz.name }}</div>
+          {% endif %}
+          {% if user.is_authenticated %}
+          {% if quiz.id not in favorite_quiz_ids %}
+          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
+           
+            <a href="{% url 'library:favorite_quiz' quiz.pk %}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-black size-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+            </svg>
+          </a>
+          </div>
+          
+          {% else %}
+          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
+          <a href="{% url 'library:favorite_quiz' quiz.pk %}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-yellow-400 size-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+            </svg>
+          </a>
+          </div>
+          {% endif %}
+          {% endif %}
+        </div>
+
+        <!-- Content Section (Bottom) -->
+        <div class="flex-grow bg-white p-4 flex flex-col gap-3">
+          <!-- Title -->
+          <h2 class="text-xl font-bold text-gray-900 break-words mb-2"> 
+            <a href="{% url 'library:detail_quiz' quiz.id %}" class="hover:text-blue-600 transition-colors">{{ quiz.name }}</a>
+          </h2>
+          <!-- Description -->
+          <p class="text-sm text-gray-700 break-words mb-3">{{ quiz.description }}</p>
+
+          <!-- Quiz Info Grid -->
+          <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+            <!-- Difficulty -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+              <span class="text-gray-800">{{ quiz.difficulty }}</span>
+            </div>
+            
+            <!-- Questions Count -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span class="text-gray-800">{{ quiz.questions.count }} Fragen</span>
+            </div>
+            
+            <!-- Status -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span class="text-gray-800">{{ quiz.status }}</span>
+            </div>
+            
+            <!-- Rating -->
+            <div class="flex items-center gap-1">
+              {% if quiz.rating_count > 0 %}
+              {% for i in '12345'|make_list %}
+                {% if forloop.counter <= quiz.average_rating|floatformat:0|add:0 %}
+                  <span class="text-yellow-500 text-base">★</span>
+                {% else %}
+                  <span class="text-gray-300 text-base">★</span>
+                {% endif %}
+              {% endfor %}
+              <span class="text-gray-600 text-sm">({{ quiz.rating_count }})</span>
+              {% else %}
+              <span class="text-gray-600 text-sm">Noch keine Bewertungen</span>
+              {% endif %}
+            </div>
+          </div>
+
+          <!-- Authors -->
+          {% if quiz.authors.all %}
+          <div class="flex items-center gap-2 text-sm mt-2">
+            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
+            <span class="text-gray-600">
+              {% for author in quiz.authors.all %}
+                {{ author.username }}{% if not forloop.last %}, {% endif %}
+              {% endfor %}
+            </span>
+          </div>
+          {% endif %}
+
+          <!-- Action Buttons -->
+          <div class="flex justify-between items-center gap-2 mt-3 border-t pt-3">
+            {% if quiz.questions.count != 0 %}
+            <a href="{% url 'play:create_game' quiz.id %}" 
+               class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors duration-200 flex items-center gap-2">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              Spielen
+            </a>
+            {% else %}
+            Fürs Spielen ist min. 1 Frage nötig!
+            {% endif %}
+            <div class="flex gap-1">
+              <a href="{% url 'library:detail_quiz' quiz.id %}" 
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+    </article>
+    {% endfor %}
+  </div>
+
+  <!-- Pagination für andere Quiz -->
+  {% if all_quizzes.paginator.num_pages > 1 %}
+  <div class="flex justify-center space-x-2 mt-6 mb-8">
+    {% if all_quizzes.has_previous %}
+    <a href="?all_page={{ all_quizzes.previous_page_number }}{% if request.GET.my_page %}&my_page={{ request.GET.my_page }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" 
+       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+    </a>
+    {% endif %}
+    
+    <span class="px-3 py-1 text-gray-600">Seite {{ all_quizzes.number }} von {{ all_quizzes.paginator.num_pages }}</span>
+    
+    {% if all_quizzes.has_next %}
+    <a href="?all_page={{ all_quizzes.next_page_number }}{% if request.GET.my_page %}&my_page={{ request.GET.my_page }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" 
+       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
+    </a>
+    {% endif %}
+  </div>
+  {% endif %}
+</div>
+{% else %}
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-4">
+  <p class="text-gray-600 text-center">Keine öffentlichen Quiz gefunden.</p>
+</div>
+{% endif %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('filter') === '1') {
+        document.getElementById('filterPanel').classList.add('show');
+    }
+
+    document.getElementById('filterButton').addEventListener('click', function() {
+        document.getElementById('filterPanel').classList.toggle('show');
+
+        // URL beim Öffnen aktualisieren
+        const params = new URLSearchParams(window.location.search);
+        if (document.getElementById('filterPanel').classList.contains('show')) {
+            params.set('filter', '1');
+        } else {
+            params.delete('filter');
+        }
+        history.replaceState(null, '', `${location.pathname}?${params}`);
+    });
+});
+
+
+if (window.location.pathname.includes("/library/")) {
+  window.addEventListener("beforeunload", function () {
+    localStorage.setItem("scroll-position", window.scrollY);
+  });
+
+  window.addEventListener("load", function () {
+    const scrollPos = localStorage.getItem("scroll-position");
+    if (scrollPos !== null) {
+      window.scrollTo(0, parseInt(scrollPos));
+    }
+  });
+}
+
+
+</script>
+{% endblock content %}

django/templates/library/overview_quiz.html

@@ -1,6 +1,6 @@
 {% extends 'base.html' %}
 {% load static %}
-
+{% load humanize %}
 {% block extra_css %}
 <style>
 
@@ -13,71 +13,54 @@
 
 {% block content %}
 
-<div class="container mx-auto px-4 py-4 flex justify-between items-center">
-    <button id="filterButton" class="p-2 hover:bg-gray-100 rounded-lg transition-colors duration-200 flex items-center gap-2 text-gray-700">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
-        </svg>
-        <span>Filter</span>
-    </button>
-    <div class="flex gap-2">
-        <a href="{% url 'library:overview_quiz' %}" class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors duration-200">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
-            </svg>
-            Zurücksetzen
-        </a>
-        <a href="{% url 'library:new_quiz' %}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-            </svg>
-            Neues Quiz
-        </a>
-    </div>
-</div>
+{% block head %}
+{% include 'library/head.html' %}
+{% endblock %}
 
-<div id="filterPanel" class="container mx-auto px-4">
-    <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
-      <form action="{% url 'library:overview_quiz' %}" method="get" class="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <input type="hidden" name="filter" value="1">
-        <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700">minimale Anzahl an Fragen</label>
-            <input type="number" name="min_amout_questions" class="border-2 border-gray-300 rounded-lg p-2 w-full" min="1" id="id_min_amout_questions" value="{{ form.min_amout_questions.value|default_if_none:'' }}">
-        </div>
-        <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700">maximale Anzahl an Fragen</label>
-            <input type="number" name="max_amout_questions" class="border-2 border-gray-300 rounded-lg p-2 w-full" min="1" id="id_max_amout_questions" value="{{ form.max_amout_questions.value|default_if_none:'' }}">
-        </div>
-        <div class="space-y-2">
-            <label class="block text-sm font-medium text-gray-700">veröffentlicht von User</label>
-            <input type="text" name="user" class="border-2 border-gray-300 rounded-lg p-2 w-full" id="id_user" value="{{ form.user.value|default_if_none:'' }}">
-        </div>
-        <div class="md:col-span-3 flex justify-end">
-            <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
-                </svg>
-                Filtern
-            </button>
-        </div>
-    </form>    
-    </div>
-</div>
+<!-- Alle -->
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6 dark:text-white">
    
 
+      <div class="flex justify-end  text-sm mb-2">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 text-blue-600">
+      <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+      </svg>
+      <div class="gap-2 mx-2">
+      {% if user.is_authenticated %}
+      Anzahl aller Ergebnisse:
+      <span class="font-bold"> {{ total_all_found }}</span>
+      </div>
+      (verschiedene: 
+      <span class="font-bold ml-1"> {{ total_all }}</span>)
+      {% else %}
+      Anzahl aller Ergebnisse:
+      <span class="font-bold"> {{ total_all_found }}</span>
+      </div>
+       {% endif %}
+      </div>
      
         {% if user.is_authenticated %}
-<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
-  <div class="flex items-center gap-3">
-    <h2 id="my-quizzes" class="text-2xl font-bold text-gray-900">Eigene Quiz</h2>
-    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
-  </div>
+    <div class="flex flex-wrap justify-end gap-4 font-bold text-blue-600 whitespace-nowrap text-sm mb-2 md:mb-0">
+        <p class="font-black underline">Alle ({{ total_all }})</p>
+    <a href="{{ url_my }}?{{ request.GET.urlencode }}">Meine Quizze ({{ total_my }})</a>
+    <a href="{{ url_favorite }}?{{ request.GET.urlencode }}">Meine Favoriten ({{ total_favorite }})</a>
   </div>
      
+          {% endif %}
+          <div class="flex items-center gap-3">
+    <h2 id="all-quizzes" class="text-2xl font-bold text-gray-900 dark:text-white">Alle</h2>
+    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
+  </div>
+ 
+</div>
+
+
+
+{% if all_quizzes %}
 <div class="container mx-auto px-4 sm:px-6 lg:px-8">
   <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 auto-rows-fr">
-    {% for quiz in my_quizzes %}
-    <article class="relative min-h-[20rem] rounded-xl shadow-lg overflow-hidden bg-white flex flex-col">
+    {% for quiz in all_quizzes %}
+    <article class="relative min-h-[20rem] rounded-xl shadow-lg overflow-hidden flex flex-col">
         <!-- Image Section (Top) -->
         <div class="h-48 w-full relative flex-shrink-0">
           {% if quiz.image %}
@@ -89,23 +72,24 @@
           </div>
           
             
+
           {% else %}
-          <div class="h-full bg-gradient-to-r from-blue-500 to-blue-600"></div>
+          <div class="h-full bg-gradient-to-r from-blue-500 to-blue-600 flex items-center justify-center font-black text-white text-3xl px-4  overflow-auto break-words hyphens-auto ">{{ quiz.name }}</div>
           {% endif %}
           {% if user.is_authenticated %}
           {% if quiz.id not in favorite_quiz_ids %}
-          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
+          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg dark:bg-[#2a2f3a]">
            
-            <a href="{% url 'library:favorite_quiz' quiz.pk %}">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-black size-6">
+            <a  class="favorite-link" href="{% url 'library:favorite_quiz' quiz.pk %}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-black size-6 dark:text-white">
               <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
             </svg>
           </a>
           </div>
           
           {% else %}
-          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
-          <a href="{% url 'library:favorite_quiz' quiz.pk %}">
+          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg dark:bg-[#2a2f3a]">
+          <a class="favorite-link" href="{% url 'library:favorite_quiz' quiz.pk %}">
             <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-yellow-400 size-6">
               <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
             </svg>
@@ -113,18 +97,27 @@
           </div>
           {% endif %}
           {% endif %}
+                    <div class="dark:bg-[#2a2f3a] max-w-6/10 h-max-12 truncate absolute top-4 left-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg ">
+           
+            <div  class="flex items-center gap-2">
+          <span class="rounded-full w-4 h-4 flex-shrink-0" style="background-color: {{ quiz.category.color }};"></span>
+             <a class=" text-gray-800 truncate text-sm dark:text-white" title="{{ quiz.category }}" href="{% url 'library:overview_quiz' %}?filter=1&categories={{ quiz.category.id }}">{{ quiz.category }}</a>
+            </div>
           </div>
 
 
 
+
+        </div>
+
         <!-- Content Section (Bottom) -->
-        <div class="flex-grow bg-white p-4 flex flex-col gap-3">
+        <div class="flex-grow bg-white p-4 flex flex-col gap-3 dark:bg-[#2a2f3a] dark:text-white"  >
           <!-- Title -->
           <h2 class="text-xl font-bold text-gray-900 break-words mb-2"> 
-            <a href="{% url 'library:detail_quiz' quiz.id %}" class="hover:text-blue-600 transition-colors">{{ quiz.name }}</a>
+            <a href="{% url 'library:detail_quiz' quiz.id %}" class="hover:text-blue-600 transition-colors dark:text-white">{{ quiz.name }}</a>
           </h2>
           <!-- Description -->
-          <p class="text-sm text-gray-700 break-words mb-3">{{ quiz.description }}</p>
+          <p class="text-sm text-gray-700 break-words mb-3 dark:text-white">{{ quiz.description }}</p>
 
           <!-- Quiz Info Grid -->
           <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
@@ -133,7 +126,7 @@
               <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
               </svg>
-              <span class="text-gray-800">{{ quiz.difficulty }}</span>
+              <span class="text-gray-800 dark:text-white">{{ quiz.difficulty }}</span>
             </div>
             
             <!-- Questions Count -->
@@ -141,7 +134,7 @@
               <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
-              <span class="text-gray-800">{{ quiz.questions.count }} Fragen</span>
+              <span class="text-gray-800 dark:text-white">{{ quiz.questions.count }} Fragen</span>
             </div>
             
             <!-- Status -->
@@ -149,9 +142,14 @@
               <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
               </svg>
-              <span class="text-gray-800">{{ quiz.status }}</span>
+              <span class="text-gray-800 dark:text-white">{{ quiz.status }}</span>
             </div>
 
+
+
+            
+
+
             <!-- Rating -->
             <div class="flex items-center gap-1">
               {% if quiz.rating_count > 0 %}
@@ -162,26 +160,37 @@
                   <span class="text-gray-300 text-base">★</span>
                 {% endif %}
               {% endfor %}
-              <span class="text-gray-600 text-sm">({{ quiz.rating_count }})</span>
+              <span class="text-gray-600 text-sm dark:text-white">({{ quiz.rating_count }})</span>
               {% else %}
-              <span class="text-gray-600 text-sm">Noch keine Bewertungen</span>
+              <span class="text-gray-600 text-sm dark:text-white">Noch keine Bewertungen</span>
               {% endif %}
             </div>
           </div>
-
-          <!-- Authors -->
-          {% if quiz.authors.all %}
+<!--
+          {% if quiz.user_id %}
   <div class="flex items-center gap-2 text-sm mt-2">
     <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
+            d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
     </svg>
     <span class="text-gray-600">
-              {% for author in quiz.authors.all %}
-                {{ author.username }}{% if not forloop.last %}, {% endif %}
-              {% endfor %}
+      {{ quiz.user_id.username }}
     </span>
   </div>
 {% endif %}
+-->
+
+<!-- Zeit-->
+{% if quiz.published_at != None %}            
+             
+            <div class="flex items-center gap-2 ">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"  class="text-green-400 size-4">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>
+<span class="text-gray-800 text-sm dark:text-white"><span class="font-medium dark:text-white">{{ quiz.published_at |naturaltime }}</span> <span class="text-sm">erst. veröffentlicht</span> </span>
+</div>
+{% endif %}
+
 
           <!-- Action Buttons -->
           <div class="flex justify-between items-center gap-2 mt-3 border-t pt-3"  >
@@ -199,7 +208,7 @@
             {% endif %}
             <div class="flex gap-1">
               <a href="{% url 'library:detail_quiz' quiz.id %}" 
-                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200">
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-gray-700 ">
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
@@ -207,13 +216,13 @@
               </a>
               {% if quiz.user_id == request.user %}
               <a href="{% url 'library:edit_quiz' quiz.id %}" 
-                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200">
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-gray-700">
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                 </svg>
               </a>
               <a href="{% url 'library:delete_quiz' quiz.id %}" 
-                 class="p-1.5 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors duration-200">
+                 class="p-1.5 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-gray-700">
                 <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                 </svg>
@@ -224,388 +233,13 @@
         </div>
     </article>
     {% endfor %}
-    
-  </div>
-
-  <!-- Pagination für eigene Quiz -->
-  {% if my_quizzes.paginator.num_pages > 1 %}
-  <div class="flex justify-center space-x-2 mt-6 mb-8">
-    {% if my_quizzes.has_previous %}
-    <a href="?my_page={{ my_quizzes.previous_page_number }}{% if request.GET.other_page %}&other_page={{ request.GET.other_page }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" 
-       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
-      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-      </svg>
-    </a>
-    {% endif %}
-    
-    <span class="px-3 py-1 text-gray-600">Seite {{ my_quizzes.number }} von {{ my_quizzes.paginator.num_pages }}</span>
-    
-    {% if my_quizzes.has_next %}
-    <a href="?my_page={{ my_quizzes.next_page_number }}{% if request.GET.other_page %}&other_page={{ request.GET.other_page }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" 
-       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
-      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-      </svg>
-    </a>
-    {% endif %}
-  </div>
-  {% endif %}
-</div>
-{% endif %}
-
-
-
-
-{% if user.is_authenticated %}
-<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
-  <div class="flex items-center gap-3">
-    <h2 id="my-quizzes" class="text-2xl font-bold text-gray-900">Meine Favoriten</h2>
-    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
-  </div>
-</div>
-
-<div class="container mx-auto px-4 sm:px-6 lg:px-8">
-  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 auto-rows-fr">
-    {% for quiz in favorite_quizzes %}
-    <article class="relative min-h-[20rem] rounded-xl shadow-lg overflow-hidden bg-white flex flex-col">
-        <!-- Image Section (Top) -->
-        <div class="h-48 w-full relative flex-shrink-0">
-          {% if quiz.image %}
-          <div class="relative w-full h-full inset-0 bg-cover bg-center">
-            <!-- Hintergrundbild -->
-            <div class="absolute inset-0 bg-cover bg-center"
-                style="background-image: url({{ quiz.image.image.url }});">
-            </div>
-          </div>
-         
-
-          {% else %}
-          <div class="h-full bg-gradient-to-r from-blue-500 to-blue-600"></div>
-          {% endif %}
-          {% if user.is_authenticated %}
-          {% if quiz.favorite == False %}
-         
-          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
-           
-            <a href="{% url 'library:favorite_quiz' quiz.pk %}">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-black size-6">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
-            </svg>
-          </a>
-          </div>
-          
-          {% else %}
-          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
-          <a href="{% url 'library:favorite_quiz' quiz.pk %}">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-yellow-400 size-6">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
-            </svg>
-          </a>
-          </div>
-          {% endif %}
-          {% endif %}
-        </div>
-
-        
-
-        <!-- Content Section (Bottom) -->
-        <div class="flex-grow bg-white p-4 flex flex-col gap-3">
-          <!-- Title -->
-          <h2 class="text-xl font-bold text-gray-900 break-words mb-2"> 
-            <a href="{% url 'library:detail_quiz' quiz.id %}" class="hover:text-blue-600 transition-colors">{{ quiz.name }}</a>
-          </h2>
-          <!-- Description -->
-          <p class="text-sm text-gray-700 break-words mb-3">{{ quiz.description }}</p>
-
-          <!-- Quiz Info Grid -->
-          <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
-            <!-- Difficulty -->
-            <div class="flex items-center gap-2">
-              <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
-              </svg>
-              <span class="text-gray-800">{{ quiz.difficulty }}</span>
-            </div>
-            
-            <!-- Questions Count -->
-            <div class="flex items-center gap-2">
-              <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-              <span class="text-gray-800">{{ quiz.questions.count }} Fragen</span>
-            </div>
-            
-            <!-- Status -->
-            <div class="flex items-center gap-2">
-              <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-              <span class="text-gray-800">{{ quiz.status }}</span>
-            </div>
-            
-            <!-- Rating -->
-            <div class="flex items-center gap-1">
-              {% if quiz.rating_count > 0 %}
-              {% for i in '12345'|make_list %}
-                {% if forloop.counter <= quiz.average_rating|floatformat:0|add:0 %}
-                  <span class="text-yellow-500 text-base">★</span>
-                {% else %}
-                  <span class="text-gray-300 text-base">★</span>
-                {% endif %}
-              {% endfor %}
-                <span class="text-gray-600 text-sm">({{ quiz.rating_count }})</span>
-              {% else %}
-                <span class="text-gray-600 text-sm">Noch keine Bewertungen</span>
-              {% endif %}
-            </div>
-          </div>
-
-          <!-- Authors -->
-          {% if quiz.authors.all %}
-          <div class="flex items-center gap-2 text-sm mt-2">
-            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-            </svg>
-            <span class="text-gray-600">
-              {% for author in quiz.authors.all %}
-                {{ author.username }}{% if not forloop.last %}, {% endif %}
-              {% endfor %}
-            </span>
-          </div>
-          {% endif %}
-
-          <!-- Action Buttons -->
-          <div class="flex justify-between items-center gap-2 mt-3 border-t pt-3">
-            {% if quiz.questions.count != 0 %}
-            <a href="{% url 'play:create_game' quiz.id %}" 
-               class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors duration-200 flex items-center gap-2">
-              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-              Spielen
-            </a>
-            {% else %}
-           Fürs Spielen ist min. 1 Frage nötig!
-            {% endif %}
-
-            <div class="flex gap-1">
-              <a href="{% url 'library:detail_quiz' quiz.id %}" 
-                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200">
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                </svg>
-              </a>
-              {% if quiz.user_id == request.user %}
-              <a href="{% url 'library:edit_quiz' quiz.id %}" 
-                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200">
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
-                </svg>
-              </a>
-              <a href="{% url 'library:delete_quiz' quiz.id %}" 
-                 class="p-1.5 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors duration-200">
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
-                </svg>
-              </a>
-              {% endif %}
-            </div>
-          </div>
-          </div>
-    </article>
-    {% endfor %}
-    
-  </div>
-
-  <!-- Pagination für eigene Quiz -->
-  {% if favorite_quizzes.paginator.num_pages > 1 %}
-  <div class="flex justify-center space-x-2 mt-6 mb-8">
-    {% if favorite_quizzes.has_previous %}
-    <a href="?my_page={{ my_quizzes.previous_page_number }}{% if request.GET.other_page %}&other_page={{ request.GET.other_page }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" 
-       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
-      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-      </svg>
-    </a>
-    {% endif %}
-    
-    <span class="px-3 py-1 text-gray-600">Seite {{ favorite_quizzes.number }} von {{ favorite_quizzes.paginator.num_pages }}</span>
-    
-    {% if my_quizzes.has_next %}
-    <a href="?my_page={{ my_quizzes.next_page_number }}{% if request.GET.other_page %}&other_page={{ request.GET.other_page }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" 
-       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
-      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
-      </svg>
-    </a>
-    {% endif %}
-  </div>
-  {% endif %}
-</div>
-{% endif %}
-
-
-
-
-
-
-
-
-
-<!-- Quiz von anderen Nutzern -->
-<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
-  <div class="flex items-center gap-3">
-    <h2 id="other-quizzes" class="text-2xl font-bold text-gray-900">Quiz von anderen Nutzern</h2>
-    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
-  </div>
-</div>
-
-{% if other_quizzes %}
-<div class="container mx-auto px-4 sm:px-6 lg:px-8">
-  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 auto-rows-fr">
-    {% for quiz in other_quizzes %}
-    <article class="relative min-h-[20rem] rounded-xl shadow-lg overflow-hidden bg-white flex flex-col">
-        <!-- Image Section (Top) -->
-        <div class="h-48 w-full relative flex-shrink-0">
-          {% if quiz.image %}
-          <div class="relative w-full h-full inset-0 bg-cover bg-center">
-            <!-- Hintergrundbild -->
-            <div class="absolute inset-0 bg-cover bg-center"
-                style="background-image: url({{ quiz.image.image.url }});">
-            </div>
-          </div>
-          
-            
-
-          {% else %}
-          <div class="h-full bg-gradient-to-r from-blue-500 to-blue-600"></div>
-          {% endif %}
-          {% if user.is_authenticated %}
-          {% if quiz.id not in favorite_quiz_ids %}
-          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
-           
-            <a href="{% url 'library:favorite_quiz' quiz.pk %}">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-black size-6">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
-            </svg>
-          </a>
-          </div>
-          
-          {% else %}
-          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg">
-          <a href="{% url 'library:favorite_quiz' quiz.pk %}">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-yellow-400 size-6">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
-            </svg>
-          </a>
-          </div>
-          {% endif %}
-          {% endif %}
-        </div>
-
-        <!-- Content Section (Bottom) -->
-        <div class="flex-grow bg-white p-4 flex flex-col gap-3">
-          <!-- Title -->
-          <h2 class="text-xl font-bold text-gray-900 break-words mb-2"> 
-            <a href="{% url 'library:detail_quiz' quiz.id %}" class="hover:text-blue-600 transition-colors">{{ quiz.name }}</a>
-          </h2>
-          <!-- Description -->
-          <p class="text-sm text-gray-700 break-words mb-3">{{ quiz.description }}</p>
-
-          <!-- Quiz Info Grid -->
-          <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
-            <!-- Difficulty -->
-            <div class="flex items-center gap-2">
-              <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
-              </svg>
-              <span class="text-gray-800">{{ quiz.difficulty }}</span>
-            </div>
-            
-            <!-- Questions Count -->
-            <div class="flex items-center gap-2">
-              <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-              <span class="text-gray-800">{{ quiz.questions.count }} Fragen</span>
-            </div>
-            
-            <!-- Status -->
-            <div class="flex items-center gap-2">
-              <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-              <span class="text-gray-800">{{ quiz.status }}</span>
-            </div>
-            
-            <!-- Rating -->
-            <div class="flex items-center gap-1">
-              {% if quiz.rating_count > 0 %}
-              {% for i in '12345'|make_list %}
-                {% if forloop.counter <= quiz.average_rating|floatformat:0|add:0 %}
-                  <span class="text-yellow-500 text-base">★</span>
-                {% else %}
-                  <span class="text-gray-300 text-base">★</span>
-                {% endif %}
-              {% endfor %}
-              <span class="text-gray-600 text-sm">({{ quiz.rating_count }})</span>
-              {% else %}
-              <span class="text-gray-600 text-sm">Noch keine Bewertungen</span>
-              {% endif %}
-            </div>
-          </div>
-
-          <!-- Authors -->
-          {% if quiz.authors.all %}
-          <div class="flex items-center gap-2 text-sm mt-2">
-            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-            </svg>
-            <span class="text-gray-600">
-              {% for author in quiz.authors.all %}
-                {{ author.username }}{% if not forloop.last %}, {% endif %}
-              {% endfor %}
-            </span>
-          </div>
-          {% endif %}
-
-          <!-- Action Buttons -->
-          <div class="flex justify-between items-center gap-2 mt-3 border-t pt-3">
-            {% if quiz.questions.count != 0 %}
-            <a href="{% url 'play:create_game' quiz.id %}" 
-               class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors duration-200 flex items-center gap-2">
-              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-              </svg>
-              Spielen
-            </a>
-            {% else %}
-            Fürs Spielen ist min. 1 Frage nötig!
-            {% endif %}
-            <div class="flex gap-1">
-              <a href="{% url 'library:detail_quiz' quiz.id %}" 
-                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200">
-                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
-                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
-                </svg>
-              </a>
-            </div>
-          </div>
-        </div>
-    </article>
-    {% endfor %}
   </div>
 
   <!-- Pagination für andere Quiz -->
-  {% if other_quizzes.paginator.num_pages > 1 %}
+  {% if all_quizzes.paginator.num_pages > 1 %}
   <div class="flex justify-center space-x-2 mt-6 mb-8">
-    {% if other_quizzes.has_previous %}
-    <a href="?other_page={{ other_quizzes.previous_page_number }}{% if request.GET.my_page %}&my_page={{ request.GET.my_page }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" 
+    {% if all_quizzes.has_previous %}
+    <a href="?all_page={{ all_quizzes.previous_page_number }}&{{ querystring_all }}" 
        class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
@@ -613,10 +247,10 @@
     </a>
     {% endif %}
     
-    <span class="px-3 py-1 text-gray-600">Seite {{ other_quizzes.number }} von {{ other_quizzes.paginator.num_pages }}</span>
+    <span class="px-3 py-1 text-gray-600 dark:text-white">Seite {{ all_quizzes.number }} von {{ all_quizzes.paginator.num_pages }}</span>
     
-    {% if other_quizzes.has_next %}
-    <a href="?other_page={{ other_quizzes.next_page_number }}{% if request.GET.my_page %}&my_page={{ request.GET.my_page }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" 
+    {% if all_quizzes.has_next %}
+    <a href="?all_page={{ all_quizzes.next_page_number }}&{{ querystring_all }}" 
        class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
       <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
@@ -628,44 +262,56 @@
 </div>
 {% else %}
 <div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-4">
-  <p class="text-gray-600 text-center">Keine öffentlichen Quiz gefunden.</p>
+  <p class="text-gray-600 text-center  dark:text-white">Keine Quiz gefunden.</p>
 </div>
-{% endif %}
-<script>
+{% endif %}<script>
+
+
+
+
   document.addEventListener('DOMContentLoaded', function () {
+    const filterPanel = document.getElementById('filterPanel');
+    const filterButton = document.getElementById('filterButton');
+
     const urlParams = new URLSearchParams(window.location.search);
     if (urlParams.get('filter') === '1') {
-        document.getElementById('filterPanel').classList.add('show');
+      filterPanel.classList.add('show');
     }
 
-    document.getElementById('filterButton').addEventListener('click', function() {
-        document.getElementById('filterPanel').classList.toggle('show');
+    filterButton.addEventListener('click', function () {
+      filterPanel.classList.toggle('show');
 
-        // URL beim Öffnen aktualisieren
       const params = new URLSearchParams(window.location.search);
-        if (document.getElementById('filterPanel').classList.contains('show')) {
-            params.set('filter', '1');
+      if (filterPanel.classList.contains('show')) {
+        //params.set('filter', '1');
       } else {
         params.delete('filter');
       }
+
       history.replaceState(null, '', `${location.pathname}?${params}`);
     });
   });
 
 
-if (window.location.pathname === "/library/") {
-  window.addEventListener("beforeunload", function () {
-    localStorage.setItem("meine_seite_scroll", window.scrollY);
-  });
 
-  window.addEventListener("load", function () {
-    const scrollPos = localStorage.getItem("meine_seite_scroll");
+document.addEventListener("DOMContentLoaded", function () {
+  // Scroll-Position beim Laden setzen
+  const scrollPos = localStorage.getItem("scroll-position");
   if (scrollPos !== null) {
     window.scrollTo(0, parseInt(scrollPos));
-    }
-  });
+    localStorage.removeItem("scroll-position");
   }
 
+  // Nur Favoriten-Links abfangen
+  const favoriteLinks = document.querySelectorAll('a.favorite-link');
+  favoriteLinks.forEach(link => {
+    link.addEventListener('click', function () {
+      localStorage.setItem("scroll-position", window.scrollY);
+    });
+  });
+});
 
 </script>
+
+
 {% endblock content %}

django/templates/library/overview_quiz_favorite.html

@@ -0,0 +1,309 @@
+{% extends 'base.html' %}
+{% load static %}
+{% load humanize %}
+{% block extra_css %}
+<style>
+
+
+  .custom-outline {
+    -webkit-text-stroke: 0.2px rgb(0, 0, 0);
+  }
+</style>
+{% endblock %}
+
+{% block content %}
+
+
+{% block head %}
+{% include 'library/head.html' %}
+{% endblock %}
+
+
+
+{% if user.is_authenticated %}
+
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6 dark:text-white">
+
+
+      <div class="flex justify-end  text-sm mb-2">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 text-blue-600">
+      <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+      </svg>
+      <div class="gap-2 mx-2 ">
+      Anzahl aller Ergebnisse:
+      <span class="font-bold"> {{ total_all_found }}</span>
+      </div>
+      (verschiedene: 
+      <span class="font-bold ml-1"> {{ total_all }}</span>) </div>
+
+  <div class="flex flex-wrap justify-end gap-4 font-bold text-blue-600 whitespace-nowrap text-sm mb-2 md:mb-0">
+    <a href="{{ url_all }}?{{ request.GET.urlencode }}">Alle ({{ total_all }})</a>
+    <a href="{{ url_my }}?{{ request.GET.urlencode }}">Meine Quizze ({{ total_my }})</a>
+    <p class="font-black underline">Meine Favoriten ({{ total_favorite }})</p>
+  </div>
+
+{% endif %}
+
+
+        <div class="flex items-center gap-3">
+    <h2 id="my-quizzes" class="text-2xl font-bold text-gray-900 dark:text-white">Meine Favoriten</h2>
+    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
+  </div>
+</div>
+{% if request.user.is_authenticated and favorite_quizzes %}
+<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 auto-rows-fr">
+    {% for quiz in favorite_quizzes %}
+    <article class="relative min-h-[20rem] rounded-xl shadow-lg overflow-hidden bg-white flex flex-col ">
+        <!-- Image Section (Top) -->
+        <div class="h-48 w-full relative flex-shrink-0 ">
+          {% if quiz.image %}
+          <div class="relative w-full h-full inset-0 bg-cover bg-center">
+            <!-- Hintergrundbild -->
+            <div class="absolute inset-0 bg-cover bg-center"
+                style="background-image: url({{ quiz.image.image.url }});">
+            </div>
+          </div>
+         
+
+          {% else %}
+          <div class="h-full bg-gradient-to-r from-blue-500 to-blue-600 flex items-center justify-center font-black text-white text-3xl  px-4  overflow-auto break-words hyphens-auto ">{{ quiz.name }}</div>
+          {% endif %}
+          {% if user.is_authenticated %}
+          {% if quiz.favorite == False %}
+         
+          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg dark:bg-[#2a2f3a]">
+           
+            <a class="favorite-link" href="{% url 'library:favorite_quiz' quiz.pk %}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-black size-6 dark:text-white">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+            </svg>
+          </a>
+          </div>
+          
+          {% else %}
+          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg dark:bg-[#2a2f3a]">
+          <a class="favorite-link" href="{% url 'library:favorite_quiz' quiz.pk %}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-yellow-400 size-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+            </svg>
+          </a>
+          </div>
+          {% endif %}
+          {% endif %}
+                    <div class="dark:bg-[#2a2f3a] max-w-6/10 h-max-12 truncate absolute top-4 left-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg ">
+           
+            <div  class="flex items-center gap-2">
+          <span class="rounded-full w-4 h-4 flex-shrink-0" style="background-color: {{ quiz.category.color }};"></span>
+           
+              <a class=" text-gray-800 truncate text-sm dark:text-white" title="{{ quiz.category }}" href="{% url 'library:overview_quiz' %}?filter=1&categories={{ quiz.category.id }}">{{ quiz.category }}</a>
+            </div>
+          </div>
+
+
+
+
+        </div>
+
+        
+
+        <!-- Content Section (Bottom) -->
+        <div class="flex-grow bg-white p-4 flex flex-col gap-3 dark:bg-[#2a2f3a] dark:text-white">
+          <!-- Title -->
+          <h2 class="text-xl font-bold text-gray-900 break-words mb-2"> 
+            <a href="{% url 'library:detail_quiz' quiz.id %}" class="hover:text-blue-600 transition-colors dark:text-white">{{ quiz.name }}</a>
+          </h2>
+          <!-- Description -->
+          <p class="text-sm text-gray-700 break-words mb-3 dark:text-white">{{ quiz.description }}</p>
+
+          <!-- Quiz Info Grid -->
+          <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+            <!-- Difficulty -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+              <span class="text-gray-800 dark:text-white">{{ quiz.difficulty }}</span>
+            </div>
+            
+            <!-- Questions Count -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span class="text-gray-800 dark:text-white">{{ quiz.questions.count }} Fragen</span>
+            </div>
+            
+            <!-- Status -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span class="text-gray-800 dark:text-white">{{ quiz.status }}</span>
+            </div>
+            
+            <!-- Rating -->
+            <div class="flex items-center gap-1">
+              {% if quiz.rating_count > 0 %}
+              {% for i in '12345'|make_list %}
+                {% if forloop.counter <= quiz.average_rating|floatformat:0|add:0 %}
+                  <span class="text-yellow-500 text-base">★</span>
+                {% else %}
+                  <span class="text-gray-300 text-base">★</span>
+                {% endif %}
+              {% endfor %}
+                <span class="text-gray-600 text-sm dark:text-white">({{ quiz.rating_count }})</span>
+              {% else %}
+                <span class="text-gray-600 text-sm dark:text-white">Noch keine Bewertungen</span>
+              {% endif %}
+            </div>
+          </div>
+
+          <!-- Authors -->
+           <!--
+          {% if quiz.authors.all %}
+          <div class="flex items-center gap-2 text-sm mt-2">
+            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
+            <span class="text-gray-600">
+              {% for author in quiz.authors.all %}
+                {{ author.username }}{% if not forloop.last %}, {% endif %}
+              {% endfor %}
+            </span>
+          </div>
+          {% endif %}-->
+
+                    <!-- Zeit-->
+{% if quiz.published_at != None %}            
+             
+            <div class="flex items-center gap-2 ">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"  class="text-green-400 size-4">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>
+<span class="text-gray-800 text-sm dark:text-white "><span class="font-medium dark:text-white">{{ quiz.published_at |naturaltime }}</span> <span class="text-sm">erst. veröffentlicht</span> </span>
+</div>
+{% endif %}
+
+          <!-- Action Buttons -->
+          <div class="flex justify-between items-center gap-2 mt-3 border-t pt-3">
+            {% if quiz.questions.count != 0 %}
+            <a href="{% url 'play:create_game' quiz.id %}" 
+               class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors duration-200 flex items-center gap-2">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              Spielen
+            </a>
+            {% else %}
+           Fürs Spielen ist min. 1 Frage nötig!
+            {% endif %}
+
+            <div class="flex gap-1">
+              <a href="{% url 'library:detail_quiz' quiz.id %}" 
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-gray-700">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                </svg>
+              </a>
+              {% if quiz.user_id == request.user %}
+              <a href="{% url 'library:edit_quiz' quiz.id %}" 
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-gray-700">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                </svg>
+              </a>
+              <a href="{% url 'library:delete_quiz' quiz.id %}" 
+                 class="p-1.5 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-gray-700">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+              </a>
+              {% endif %}
+            </div>
+          </div>
+          </div>
+    </article>
+    {% endfor %}
+    
+  </div>
+  
+  <!-- Pagination für favorite Quizze -->
+  {% if favorite_quizzes.paginator.num_pages > 1 %}
+  <div class="flex justify-center space-x-2 mt-6 mb-8 ">
+    {% if favorite_quizzes.has_previous %}
+    <a href="?favorite_page={{ favorite.previous_page_number }}&{{ querystring_favorite }}" 
+       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+    </a>
+    {% endif %}
+    
+    <span class="dark:text-white px-3 py-1 text-gray-600">Seite {{ favorite_quizzes.number }} von {{ favorite_quizzes.paginator.num_pages }}</span>
+    
+    {% if favorite_quizzes.has_next %}
+    <a href="?favorite_page={{ favorite_quizzes.next_page_number }}&{{ querystring_favorite }}" 
+       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
+    </a>
+    {% endif %}
+  </div>
+  {% endif %}
+</div>
+{% else %}
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-4">
+  <p class="text-gray-600 text-center  dark:text-white">Keine favorisierten Quiz gefunden.</p>
+</div>
+{% endif %}<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const filterPanel = document.getElementById('filterPanel');
+    const filterButton = document.getElementById('filterButton');
+
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('filter') === '1') {
+      filterPanel.classList.add('show');
+
+    }
+
+    
+
+    filterButton.addEventListener('click', function () {
+      filterPanel.classList.toggle('show');
+
+      const params = new URLSearchParams(window.location.search);
+      if (filterPanel.classList.contains('show')) {
+        //params.set('filter', '1');
+      } else {
+        params.delete('filter');
+      }
+
+      history.replaceState(null, '', `${location.pathname}?${params}`);
+    });
+  });
+
+
+  document.addEventListener("DOMContentLoaded", function () {
+  // Scroll-Position beim Laden setzen
+  const scrollPos = localStorage.getItem("scroll-position");
+  if (scrollPos !== null) {
+    window.scrollTo(0, parseInt(scrollPos));
+    localStorage.removeItem("scroll-position");
+  }
+
+  // Nur Favoriten-Links abfangen
+  const favoriteLinks = document.querySelectorAll('a.favorite-link');
+  favoriteLinks.forEach(link => {
+    link.addEventListener('click', function () {
+      localStorage.setItem("scroll-position", window.scrollY);
+    });
+  });
+});
+
+</script>
+
+{% endblock content %}

django/templates/library/overview_quiz_my.html

@@ -0,0 +1,306 @@
+{% extends 'base.html' %}
+{% load static %}
+{% load humanize %}
+{% block extra_css %}
+<style>
+
+
+  .custom-outline {
+    -webkit-text-stroke: 0.2px rgb(0, 0, 0);
+  }
+</style>
+{% endblock %}
+
+{% block content %}
+
+{% block head %}
+{% include 'library/head.html' %}
+{% endblock %}
+
+
+
+{% if user.is_authenticated %}
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6 dark:text-white">
+
+      <div class="flex justify-end  text-sm mb-2">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6 text-blue-600">
+      <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+      </svg>
+      <div class="gap-2 mx-2">
+      Anzahl aller Ergebnisse:
+      <span class="font-bold"> {{ total_all_found }}</span>
+      </div>
+      (verschiedene: 
+      <span class="font-bold ml-1"> {{ total_all }}</span>) </div>
+
+
+
+    <div class="flex flex-wrap justify-end gap-4 font-bold text-blue-600 whitespace-nowrap text-sm mb-2 md:mb-0">
+    <a href="{{ url_all }}?{{ request.GET.urlencode }}">Alle ({{ total_all }})</a>
+    <p class="font-black underline">Meine Quizze ({{ total_my }})</p>
+    <a href="{{ url_favorite }}?{{ request.GET.urlencode }}">Meine Favoriten ({{ total_favorite }})</a>
+  </div>
+  <div class="flex items-center gap-3">
+    <h2 id="my-quizzes" class="text-2xl font-bold text-gray-900 dark:text-white">Meine Quizze</h2>
+    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
+  </div>
+</div>
+{% endif %}
+
+{% if request.user.is_authenticated and my_quizzes %}
+
+<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 auto-rows-fr">
+    {% for quiz in my_quizzes %}
+    <article class="relative min-h-[20rem] rounded-xl shadow-lg overflow-hidden bg-white flex flex-col">
+        <!-- Image Section (Top) -->
+        <div class="h-48 w-full relative flex-shrink-0">
+          {% if quiz.image %}
+          <div class="relative w-full h-full inset-0 bg-cover bg-center">
+            <!-- Hintergrundbild -->
+            <div class="absolute inset-0 bg-cover bg-center"
+                style="background-image: url({{ quiz.image.image.url }});">
+            </div>
+          </div>
+         
+
+          {% else %}
+          <div class="h-full bg-gradient-to-r from-blue-500 to-blue-600 flex items-center justify-center font-black text-white text-3xl px-4  overflow-auto break-words hyphens-auto ">{{ quiz.name }}</div>
+          {% endif %}
+          {% if user.is_authenticated %}
+          {% if quiz.id not in favorite_quiz_ids %}
+          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg dark:bg-[#2a2f3a]">
+
+            
+           
+            <a class="favorite-link" href="{% url 'library:favorite_quiz' quiz.pk %}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-black size-6 dark:text-white">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+            </svg>
+          </a>
+          </div>
+          
+          {% else %}
+          <div class="absolute top-4 right-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg dark:bg-[#2a2f3a]">
+          <a class="favorite-link" href="{% url 'library:favorite_quiz' quiz.pk %}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="text-yellow-400 size-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+            </svg>
+          </a>
+          </div>
+          {% endif %}
+          {% endif %}
+                    <div class="dark:bg-[#2a2f3a] max-w-6/10 h-max-12 truncate absolute top-4 left-4 bg-white bg-opacity-60 text-white px-4 py-2 rounded-lg shadow-lg ">
+           
+            <div  class="flex items-center gap-2">
+          <span class="rounded-full w-4 h-4 flex-shrink-0" style="background-color: {{ quiz.category.color }};"></span>
+            <a class=" text-gray-800 truncate text-sm dark:text-white" title="{{ quiz.category }}" href="{% url 'library:overview_quiz' %}?filter=1&categories={{ quiz.category.id }}">{{ quiz.category }}</a>
+            </div>
+          </div>
+
+
+
+        </div>
+
+        
+
+        <!-- Content Section (Bottom) -->
+        <div class="flex-grow bg-white p-4 flex flex-col gap-3 dark:bg-[#2a2f3a] dark:text-white">
+          <!-- Title -->
+          <h2 class="text-xl font-bold text-gray-900 break-words mb-2"> 
+            <a href="{% url 'library:detail_quiz' quiz.id %}" class="hover:text-blue-600 transition-colors dark:text-white">{{ quiz.name }}</a>
+          </h2>
+          <!-- Description -->
+          <p class="text-sm text-gray-700 break-words mb-3 dark:text-white">{{ quiz.description }}</p>
+
+          <!-- Quiz Info Grid -->
+          <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+            <!-- Difficulty -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+              <span class="text-gray-800 dark:text-white">{{ quiz.difficulty }}</span>
+            </div>
+            
+            <!-- Questions Count -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span class="text-gray-800 dark:text-white">{{ quiz.questions.count }} Fragen</span>
+            </div>
+            
+            <!-- Status -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span class="text-gray-800 dark:text-white">{{ quiz.status }}</span>
+            </div>
+            
+            <!-- Rating -->
+            <div class="flex items-center gap-1">
+              {% if quiz.rating_count > 0 %}
+              {% for i in '12345'|make_list %}
+                {% if forloop.counter <= quiz.average_rating|floatformat:0|add:0 %}
+                  <span class="text-yellow-500 text-base">★</span>
+                {% else %}
+                  <span class="text-gray-300 text-base">★</span>
+                {% endif %}
+              {% endfor %}
+              <span class="text-gray-600 text-sm dark:text-white">({{ quiz.rating_count }})</span>
+              {% else %}
+              <span class="text-gray-600 text-sm dark:text-white">Noch keine Bewertungen</span>
+              {% endif %}
+            </div>
+          </div>
+
+          <!-- Authors -->
+           <!--
+          {% if quiz.authors.all %}
+          <div class="flex items-center gap-2 text-sm mt-2">
+            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
+            <span class="text-gray-600">
+              {% for author in quiz.authors.all %}
+                {{ author.username }}{% if not forloop.last %}, {% endif %}
+              {% endfor %}
+            </span>
+          </div>
+          {% endif %} 
+        -->
+
+
+          <!-- Zeit-->
+{% if quiz.published_at != None %}            
+             
+            <div class="flex items-center gap-2 ">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"  class="text-green-400 size-4">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+</svg>
+<span class="text-gray-800 text-sm dark:text-white"><span class="font-medium dark:text-white">{{ quiz.published_at |naturaltime }}</span> <span class="text-sm">erst. veröffentlicht</span> </span>
+</div>
+{% endif %}
+
+          <!-- Action Buttons -->
+          <div class="flex justify-between items-center gap-2 mt-3 border-t pt-3">
+            {% if quiz.questions.count != 0 %}
+            <a href="{% url 'play:create_game' quiz.id %}" 
+               class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors duration-200 flex items-center gap-2">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              Spielen
+            </a>
+            {% else %}
+            Fürs Spielen ist min. 1 Frage nötig!
+            {% endif %}
+            <div class="flex gap-1">
+              <a href="{% url 'library:detail_quiz' quiz.id %}" 
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-gray-700">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                </svg>
+              </a>
+              {% if quiz.user_id == request.user %}
+              <a href="{% url 'library:edit_quiz' quiz.id %}" 
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-gray-700">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                </svg>
+              </a>
+              <a href="{% url 'library:delete_quiz' quiz.id %}" 
+                 class="p-1.5 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-gray-700">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+              </a>
+              {% endif %}
+            </div>
+          </div>
+          </div>
+    </article>
+    {% endfor %}
+    
+  </div>
+
+  <!-- Pagination für Meine Quizze -->
+  {% if my_quizzes.paginator.num_pages > 1 %}
+  <div class="flex justify-center space-x-2 mt-6 mb-8">
+    {% if my_quizzes.has_previous %}
+    <a href="?my_page={{ my_quizzes.previous_page_number }}&{{ querystring_my }}" 
+       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+    </a>
+    {% endif %}
+    
+    <span class="px-3 py-1 text-gray-600 dark:text-white">Seite {{ my_quizzes.number }} von {{ my_quizzes.paginator.num_pages }}</span>
+    
+    {% if my_quizzes.has_next %}
+    <a href="?my_page={{ my_quizzes.next_page_number }}&{{ querystring_my }}" 
+       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
+    </a>
+    {% endif %}
+  </div>
+  {% endif %}
+</div>
+{% else %}
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-4">
+  <p class="text-gray-600 text-center  dark:text-white">Keine eigenen Quiz gefunden.</p>
+</div>
+{% endif %}<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const filterPanel = document.getElementById('filterPanel');
+    const filterButton = document.getElementById('filterButton');
+
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('filter') === '1') {
+      filterPanel.classList.add('show');
+    }
+
+    filterButton.addEventListener('click', function () {
+      filterPanel.classList.toggle('show');
+
+      const params = new URLSearchParams(window.location.search);
+      if (filterPanel.classList.contains('show')) {
+        //params.set('filter', '1');
+      } else {
+        params.delete('filter');
+      }
+
+      history.replaceState(null, '', `${location.pathname}?${params}`);
+    });
+  });
+
+
+document.addEventListener("DOMContentLoaded", function () {
+  // Scroll-Position beim Laden setzen
+  const scrollPos = localStorage.getItem("scroll-position");
+  if (scrollPos !== null) {
+    window.scrollTo(0, parseInt(scrollPos));
+    localStorage.removeItem("scroll-position");
+  }
+
+  // Nur Favoriten-Links abfangen
+  const favoriteLinks = document.querySelectorAll('a.favorite-link');
+  favoriteLinks.forEach(link => {
+    link.addEventListener('click', function () {
+      localStorage.setItem("scroll-position", window.scrollY);
+    });
+  });
+});
+
+
+</script>
+
+
+{% endblock content %}

django/templates/library/question/question_guess.html

@@ -0,0 +1,150 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mx-auto px-4">
+    <div class="flex justify-between items-center mb-6">
+        <h1 class="text-2xl font-bold dark:text-white">{% if question %}Frage bearbeiten{% else %}Neue Schätzfrage{% endif %}</h1>
+        <a href="{% url 'library:detail_quiz' quiz.id %}" 
+           class="bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition-colors">
+            Zurück zum Quiz
+        </a>
+    </div>
+
+    <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md dark:bg-transparent dark:text-white">
+        <form method="post" class="space-y-6" enctype="multipart/form-data">
+            {% csrf_token %}
+            
+            <!-- Question Text -->
+            <div>
+                <label for="question" class="block text-sm font-medium text-gray-700 dark:text-white">Frage</label>
+                <div class="mt-1">
+                    <textarea name="question" id="question" rows="4"
+                           class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           required>{{ question.data.question }}</textarea>
+                </div>
+            </div>
+
+            {% if image %}
+            <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
+            </label>
+            {% endif %}
+            <div>
+                <label class="font-bold" for="question_image">Bild:</label>
+                <input class="max-w-full bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400 dark:bg-transparent" type="file" name="question_image" id="question_image">
+            </div>
+
+            <!-- Eingabe  -->
+            {% if question and question.data.options %}
+            {% for option in question.data.options %}
+            <div> 
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Richtige Antwort</label>
+                <div class="flex space-x-4">
+                    <input name="correct_answer" type="number" value="{{ question.data.correct_answer|default:'' }}" 
+                    class="p-3 dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    required></input>
+            
+                </div>
+                                         <div> 
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Minimale Zahlenauswahl</label>
+                <div class="flex space-x-4">
+                    <input name="min" type="number" value="{{ question.data.min|default:'' }}"
+                    class="p-3 dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    required></input>
+            
+                </div>
+
+                            <div> 
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Maximale Zahlenauswahl</label>
+                <div class="flex space-x-4">
+                    <input name="max" type="number"  value="{{ question.data.max|default:'' }}"
+                    class="p-3 dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    required></input>
+            
+                </div>
+                                            <div> 
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Punkte ab Genauigkeit von ... (in %)</label>
+                <div class="flex space-x-4">
+                    <input name="tolerance" type="number" value="{{ question.data.tolerance|default:'' }}" max="100" min="1" value="75"
+                    class=" p-3 dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    required></input>
+            
+                </div>
+            </div>
+            {% endfor %}
+            {% else %}
+            <div> 
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Richtige Antwort</label>
+                <div class="flex space-x-4">
+                    <input name="correct_answer" type="number" 
+                    class="p-3 dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    required></input>
+            
+                </div>
+                                         <div> 
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Minimale Zahlenauswahl</label>
+                <div class="flex space-x-4">
+                    <input name="min" type="number" value="0"
+                    class="p-3 dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    required></input>
+            
+                </div>
+
+                            <div> 
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Maximale Zahlenauswahl</label>
+                <div class="flex space-x-4">
+                    <input name="max" type="number" 
+                    class="p-3 dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    required></input>
+            
+                </div>
+                                            <div> 
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Punkte ab Genauigkeit von ... (in %)</label>
+                <div class="flex space-x-4">
+                    <input name="tolerance" type="number"  max="100" min="1" value="75"
+                    class=" p-3 dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    required></input>
+            
+                </div>
+
+
+
+            </div>
+            {% endif %}
+           
+
+            <div class="p-4">
+                <label class="font-bold" for="time_per_question">Zeit pro Frage:</label>
+                <select name="time_per_question" id="time_per_question" class="dark:text-white dark:bg-[#2a2f3a]  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                    <option value="10" {% if standard_time_per_question == "10" or time_per_question == "10" %}selected{% endif %}>10 Sekunden</option>
+                    <option value="20" {% if standard_time_per_question == "20" or time_per_question == "20" %}selected{% endif %}>20 Sekunden</option>
+                    <option value="30" {% if standard_time_per_question == "30" or time_per_question == "30" %}selected{% endif %}>30 Sekunden</option>
+                    <option value="45" {% if standard_time_per_question == "45" or time_per_question == "45" %}selected{% endif %}>45 Sekunden</option>
+                    <option value="60" {% if standard_time_per_question == "60" or time_per_question == "60" %}selected{% endif %}>1 Minute</option>
+                    <option value="120" {% if standard_time_per_question == "120" or time_per_question == "120" %}selected{% endif %}>2 Minuten</option>
+                    <option value="300" {% if standard_time_per_question == "300" or time_per_question == "300" %}selected{% endif %}>5 Minuten</option>
+                </select>
+            </div>
+                                       <label for="credits" class="block text-sm font-medium text-gray-700 dark:text-white">Credits</label>
+                <div class="mt-1">
+                    <textarea name="credits" rows="4"
+                           class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           >{{ credits }}</textarea>
+                </div>
+
+            <div class="flex justify-end space-x-3 mt-6">
+                <a href="{% url 'library:detail_quiz' quiz.id %}" 
+                   class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    Abbrechen
+                </a>
+                <button type="submit" 
+                        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    Speichern
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}

django/templates/library/question/question_input.html

@@ -3,29 +3,29 @@
 {% block content %}
 <div class="container mx-auto px-4">
     <div class="flex justify-between items-center mb-6">
-        <h1 class="text-2xl font-bold">{% if question %}Frage bearbeiten{% else %}Neue Eingabe Frage{% endif %}</h1>
+        <h1 class="text-2xl font-bold dark:text-white">{% if question %}Frage bearbeiten{% else %}Neue Eingabe Frage{% endif %}</h1>
         <a href="{% url 'library:detail_quiz' quiz.id %}" 
            class="bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition-colors">
             Zurück zum Quiz
         </a>
     </div>
 
-    <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md">
+    <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md dark:bg-transparent dark:text-white">
         <form method="post" class="space-y-6" enctype="multipart/form-data">
             {% csrf_token %}
             
             <!-- Question Text -->
             <div>
-                <label for="question" class="block text-sm font-medium text-gray-700">Frage</label>
+                <label for="question" class="block text-sm font-medium text-gray-700 dark:text-white">Frage</label>
                 <div class="mt-1">
                     <textarea name="question" id="question" rows="4"
-                           class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                            required>{{ question.data.question }}</textarea>
                 </div>
             </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
@@ -33,17 +33,17 @@
             {% endif %}
             <div>
                 <label class="font-bold" for="question_image">Bild:</label>
-                <input class="bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400" type="file" name="question_image" id="question_image">
+                <input class="max-w-full bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400 dark:bg-transparent" type="file" name="question_image" id="question_image">
             </div>
 
             <!-- Eingabe  -->
             {% if question and question.data.options %}
             {% for option in question.data.options %}
             <div> 
-                <label class="block text-sm font-medium text-gray-700 mb-2">Richtige Antwort</label>
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Richtige Antwort</label>
                 <div class="flex space-x-4">
                     <textarea name="correct_answer" rows="2"
-                    class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    class="dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
                     required>{{ option.value }}</textarea>
             
                 </div>
@@ -52,10 +52,10 @@
             {% endfor %}
             {% else %}
             <div> 
-                <label class="block text-sm font-medium text-gray-700 mb-2">Richtige Antwort</label>
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Richtige Antwort</label>
                 <div class="flex space-x-4">
                     <textarea name="correct_answer" rows="2"
-                    class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
                     required></textarea>
             
                 </div>
@@ -66,7 +66,7 @@
 
             <div class="p-4">
                 <label class="font-bold" for="time_per_question">Zeit pro Frage:</label>
-                <select name="time_per_question" id="time_per_question">
+                <select name="time_per_question" id="time_per_question" class="dark:text-white dark:bg-[#2a2f3a]  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                     <option value="10" {% if standard_time_per_question == "10" or time_per_question == "10" %}selected{% endif %}>10 Sekunden</option>
                     <option value="20" {% if standard_time_per_question == "20" or time_per_question == "20" %}selected{% endif %}>20 Sekunden</option>
                     <option value="30" {% if standard_time_per_question == "30" or time_per_question == "30" %}selected{% endif %}>30 Sekunden</option>
@@ -75,6 +75,12 @@
                     <option value="120" {% if standard_time_per_question == "120" or time_per_question == "120" %}selected{% endif %}>2 Minuten</option>
                     <option value="300" {% if standard_time_per_question == "300" or time_per_question == "300" %}selected{% endif %}>5 Minuten</option>
                 </select>
+            </div>
+                                       <label for="credits" class="block text-sm font-medium text-gray-700 dark:text-white">Credits</label>
+                <div class="mt-1">
+                    <textarea name="credits" rows="4"
+                           class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           >{{ credits }}</textarea>
                 </div>
 
             <div class="flex justify-end space-x-3">

django/templates/library/question/question_map.html

@@ -0,0 +1,166 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+     integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+     crossorigin=""></script>
+<div id="mapquestion-container">
+</div>
+
+        <div class="container mx-auto px-4">
+    <div class="flex justify-between items-center mb-6">
+        <h1 class="text-2xl font-bold dark:text-white">{% if question %}Frage bearbeiten{% else %}Neue Karten Frage{% endif %}</h1>
+        <a href="{% url 'library:detail_quiz' quiz.id %}" 
+           class="bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition-colors">
+            Zurück zum Quiz
+        </a>
+    </div>
+    <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md dark:bg-transparent dark:text-white">
+        <form method="post" class="space-y-6" enctype="multipart/form-data">
+            {% csrf_token %}
+            
+            <!-- Question Text -->
+               <div>
+                <label for="question" class="block text-sm font-medium text-gray-700 dark:text-white">Frage</label>
+                <div class="mt-1">
+                    <textarea name="question" id="question" rows="4"
+                           class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           required>{{ question.data.question }}</textarea>
+                </div>
+            </div>
+
+            {% if image %}
+            <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
+            </label>
+            {% endif %}
+            <div>
+                <label class="font-bold" for="question_image">Bild:</label>
+                <input class="max-w-full bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400 dark:bg-transparent" type="file" name="question_image" id="question_image">
+            </div>
+
+            <label for="map"  class="block text-sm font-medium text-gray-700 dark:text-white">Ziel auswählen</label>
+                   <div id="map"></div>
+
+                <label for="location" class="block text-sm font-medium text-gray-700  dark:text-white">Koordinaten</label>
+                <div class="mt-1">
+                    <textarea id="location" name="location" rows="2" required
+                           class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md "
+                           >{{ question.data.target_location }}</textarea>
+                </div>
+
+                 <label for="tolerance_radius" class="block text-sm font-medium text-gray-700  dark:text-white">Radius (Meter) für volle Punktzahl</label>
+                <div class="mt-1">
+                    <textarea id="tolerance_radius" name="tolerance_radius" rows="2" required
+                           class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md "
+                           >{{ question.data.tolerance_radius }}</textarea>
+                </div>
+
+            <div class="p-4">
+                <label class="font-bold" for="time_per_question">Zeit pro Frage:</label>
+                <select name="time_per_question" id="time_per_question" class="dark:text-white dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                    <option value="10" {% if standard_time_per_question == "10" or time_per_question == "10" %}selected{% endif %}>10 Sekunden</option>
+                    <option value="20" {% if standard_time_per_question == "20" or time_per_question == "20" %}selected{% endif %}>20 Sekunden</option>
+                    <option value="30" {% if standard_time_per_question == "30" or time_per_question == "30" %}selected{% endif %}>30 Sekunden</option>
+                    <option value="45" {% if standard_time_per_question == "45" or time_per_question == "45" %}selected{% endif %}>45 Sekunden</option>
+                    <option value="60" {% if standard_time_per_question == "60" or time_per_question == "60" %}selected{% endif %}>1 Minute</option>
+                    <option value="120" {% if standard_time_per_question == "120" or time_per_question == "120" %}selected{% endif %}>2 Minuten</option>
+                    <option value="300" {% if standard_time_per_question == "300" or time_per_question == "300" %}selected{% endif %}>5 Minuten</option>
+                </select>
+            </div>
+           
+
+                <label for="credits" class="block text-sm font-medium text-gray-700  dark:text-white">Credits</label>
+                <div class="mt-1">
+                    <textarea name="credits" rows="4"
+                           class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md "
+                           >{{ credits }}</textarea>
+                </div>
+
+            <div class="flex justify-end space-x-3">
+                <a href="{% url 'library:detail_quiz' quiz.id %}" 
+                   class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    Abbrechen
+                </a>
+                <button type="submit" 
+                        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    {% if question %}Speichern{% else %}Erstellen{% endif %}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+<script>
+    let marker = null;
+    let circle = null;
+    const locationInput = document.getElementById('location');
+    const radiusInput = document.getElementById('tolerance_radius');
+
+    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_all/{z}/{x}/{y}.png'
+    : 'https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png';
+
+    L.tileLayer(tileUrl, {
+    maxZoom: 19,
+    attribution: '© OpenStreetMap © CARTO'
+    }).addTo(map);
+
+    function updateCircle(latlng) {
+        const radius = parseInt(radiusInput.value) || 100;
+        if (circle) {
+            map.removeLayer(circle);
+        }
+        circle = L.circle(latlng, {
+            color: 'blue',
+            fillColor: '#87CEEB',
+            fillOpacity: 0.2,
+            radius: radius
+        }).addTo(map);
+    }
+
+    function updateInput(latlng) {
+        locationInput.value = `${latlng.lat.toFixed(6)},${latlng.lng.toFixed(6)}`;
+        if (marker) {
+            updateCircle(marker.getLatLng());
+        }
+    }
+
+    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);
+    }
+
+    // Update circle when radius changes
+    radiusInput.addEventListener('input', () => {
+        if (marker) {
+            updateCircle(marker.getLatLng());
+        }
+    });
+
+    // Place marker at existing coordinates if available
+    const existingCoords = '{{ question.data.target_location }}';
+    if (existingCoords) {
+        const [lat, lng] = existingCoords.split(',').map(Number);
+        placeOrMoveMarker({ lat, lng });
+        map.setView([lat, lng], 6); // Zoom in to show the marker
+    }
+
+    map.on('click', e => placeOrMoveMarker(e.latlng));
+</script>
+{% endblock %}

django/templates/library/question/question_multiple_choice.html

@@ -3,29 +3,29 @@
 {% block content %}
 <div class="container mx-auto px-4">
     <div class="flex justify-between items-center mb-6">
-        <h1 class="text-2xl font-bold">{% if question %}Frage bearbeiten{% else %}Neue Multiple Choice Frage{% endif %}</h1>
+        <h1 class="text-2xl font-bold dark:text-white">{% if question %}Frage bearbeiten{% else %}Neue Multiple Choice Frage{% endif %}</h1>
         <a href="{% url 'library:detail_quiz' quiz.id %}" 
            class="bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition-colors">
             Zurück zum Quiz
         </a>
     </div>
-    <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md">
+    <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md dark:bg-transparent dark:text-white">
         <form method="post" class="space-y-6" enctype="multipart/form-data">
             {% csrf_token %}
             
             <!-- Question Text -->
             <div>
-                <label for="question" class="block text-sm font-medium text-gray-700">Frage</label>
+                <label for="question" class="block text-sm font-medium text-gray-700 dark:text-white">Frage</label>
                 <div class="mt-1">
                     <textarea name="question" id="question" rows="4"
-                           class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                            required>{{ question.data.question|default:'' }}</textarea>
                 </div>
             </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
@@ -33,24 +33,24 @@
             {% endif %}
             <div>
                 <label class="font-bold" for="question_image">Bild:</label>
-                <input value="image.url" class="bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400" type="file" name="question_image" id="question_image">
+                <input value="image.url" class="max-w-full bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400 dark:bg-transparent" type="file" name="question_image" id="question_image">
             </div>
 
             <!-- Options -->
             <div>
-                <label class="block text-sm font-medium text-gray-700 mb-2">Antwortmöglichkeiten</label>
+                <label class="block text-sm font-medium text-gray-700 mb-2  dark:text-white">Antwortmöglichkeiten</label>
                 <div id="options-container" class="space-y-3">
                     {% if question and question.data.options %}
-                        {% for option in question.data.options %}
+                          {% for option in question.data.options|dictsort:"order" %}
                             <div class="flex items-center space-x-3">
                                 <textarea name="option_{{ forloop.counter }}" rows="2"
-                                       class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                                       class="dark:bg-[#2a2f3a] shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
                                        required>{{ option.value }}</textarea>
                                 <label class="inline-flex items-center">
                                     <input type="checkbox" name="correct_{{ forloop.counter }}" value="1"
-                                           class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
+                                           class=" focus:outline-none focus:ring-2 focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
                                            {% if option.is_correct %}checked{% endif %}>
-                                    <span class="ml-2 text-sm text-gray-600">Richtig</span>
+                                    <span class="ml-2 text-sm text-gray-600 dark:text-white dark:text-white">Richtig</span>
                                 </label>
                                 <button type="button" onclick="removeOption(this)"
                                         class="text-red-600 hover:text-red-800 transition-colors">
@@ -63,12 +63,12 @@
                     {% else %}
                         <div class="flex items-center space-x-3">
                             <textarea name="option_1" rows="2"
-                                   class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                                   class="dark:bg-[#2a2f3a]  shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
                                    required></textarea>
                             <label class="inline-flex items-center">
                                 <input type="checkbox" name="correct_1" value="1"
-                                       class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
-                                <span class="ml-2 text-sm text-gray-600">Richtig</span>
+                                       class=" focus:outline-none focus:ring-2 focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
+                                <span class="ml-2 text-sm text-gray-600 dark:text-white">Richtig</span>
                             </label>
                             <button type="button" onclick="removeOption(this)"
                                     class="text-red-600 hover:text-red-800 transition-colors">
@@ -79,12 +79,44 @@
                         </div>
                         <div class="flex items-center space-x-3">
                             <textarea name="option_2" rows="2"
-                                   class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                                   class="dark:bg-[#2a2f3a]  shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
                                    required></textarea>
                             <label class="inline-flex items-center">
                                 <input type="checkbox" name="correct_2" value="1"
-                                       class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
-                                <span class="ml-2 text-sm text-gray-600">Richtig</span>
+                                       class=" focus:outline-none focus:ring-2 focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
+                                <span class="ml-2 text-sm text-gray-600 dark:text-white">Richtig</span>
+                            </label>
+                            <button type="button" onclick="removeOption(this)"
+                                    class="text-red-600 hover:text-red-800 transition-colors">
+                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <textarea name="option_3" rows="2"
+                                   class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                                   required></textarea>
+                            <label class="inline-flex items-center">
+                                <input type="checkbox" name="correct_3" value="1"
+                                       class=" focus:outline-none focus:ring-2 focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
+                                <span class="ml-2 text-sm text-gray-600 dark:text-white">Richtig</span>
+                            </label>
+                            <button type="button" onclick="removeOption(this)"
+                                    class="text-red-600 hover:text-red-800 transition-colors">
+                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                                </svg>
+                            </button>
+                        </div>
+                        <div class="flex items-center space-x-3">
+                            <textarea name="option_4" rows="2"
+                                   class="dark:bg-[#2a2f3a] shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                                   required></textarea>
+                            <label class="inline-flex items-center">
+                                <input type="checkbox" name="correct_4" value="1"
+                                       class=" focus:outline-none focus:ring-2 focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
+                                <span class="ml-2 text-sm text-gray-600 dark:text-white">Richtig</span>
                             </label>
                             <button type="button" onclick="removeOption(this)"
                                     class="text-red-600 hover:text-red-800 transition-colors">
@@ -106,7 +138,7 @@
 
             <div class="p-4">
                 <label class="font-bold" for="time_per_question">Zeit pro Frage:</label>
-                <select name="time_per_question" id="time_per_question">
+                <select name="time_per_question" id="time_per_question" class="dark:text-white dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                     <option value="10" {% if standard_time_per_question == "10" or time_per_question == "10" %}selected{% endif %}>10 Sekunden</option>
                     <option value="20" {% if standard_time_per_question == "20" or time_per_question == "20" %}selected{% endif %}>20 Sekunden</option>
                     <option value="30" {% if standard_time_per_question == "30" or time_per_question == "30" %}selected{% endif %}>30 Sekunden</option>
@@ -115,6 +147,12 @@
                     <option value="120" {% if standard_time_per_question == "120" or time_per_question == "120" %}selected{% endif %}>2 Minuten</option>
                     <option value="300" {% if standard_time_per_question == "300" or time_per_question == "300" %}selected{% endif %}>5 Minuten</option>
                 </select>
+            </div>
+                                                   <label for="credits" class="block text-sm font-medium text-gray-700  dark:text-white">Credits</label>
+                <div class="mt-1">
+                    <textarea name="credits" rows="4"
+                           class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md "
+                           >{{ credits }}</textarea>
                 </div>
 
             <div class="flex justify-end space-x-3">
@@ -145,12 +183,13 @@ function addOption() {
     div.className = 'flex items-center space-x-3';
     div.innerHTML = `
                                 <textarea name="option_${optionCount}" rows="2"
-               class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
-               required></textarea>
+                                       class="dark:bg-[#2a2f3a] shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                                       required>{{ option.value }}</textarea>
                                 <label class="inline-flex items-center">
                                     <input type="checkbox" name="correct_${optionCount}" value="1"
-                   class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
-            <span class="ml-2 text-sm text-gray-600">Richtig</span>
+                                           class=" focus:outline-none focus:ring-2 focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
+                                           {% if option.is_correct %}checked{% endif %}>
+                                    <span class="ml-2 text-sm text-gray-600 dark:text-white">Richtig</span>
                                 </label>
                                 <button type="button" onclick="removeOption(this)"
                                         class="text-red-600 hover:text-red-800 transition-colors">

django/templates/library/question/question_order.html

@@ -0,0 +1,189 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mx-auto px-4">
+    <div class="flex justify-between items-center mb-6">
+        <h1 class="text-2xl font-bold dark:text-white">{% if question %}Frage bearbeiten{% else %}Reihenfolge Frage{% endif %}</h1>
+        <a href="{% url 'library:detail_quiz' quiz.id %}" 
+           class="bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition-colors">
+            Zurück zum Quiz
+        </a>
+    </div>
+    <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md dark:bg-transparent dark:text-white">
+        <form method="post" class="space-y-6" enctype="multipart/form-data">
+            {% csrf_token %}
+            
+            <!-- Question Text -->
+            <div>
+                <label for="question" class="block text-sm font-medium text-gray-700 dark:text-white">Frage</label>
+                <div class="mt-1">
+                    <textarea name="question" id="question" rows="4"
+                           class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           required>{{ question.data.question|default:'' }}</textarea>
+                </div>
+            </div>
+
+            
+            {% if image %}
+            <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
+            </label>
+            {% endif %}
+            <div>
+                <label class="font-bold" for="question_image">Bild:</label>
+                <input value="image.url" class="max-w-full bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400 dark:bg-transparent" type="file" name="question_image" id="question_image">
+            </div>
+
+            <!-- Options -->
+            <div>
+                <label class="block text-sm font-medium text-gray-700 mb-2  dark:text-white">richtige Reihenfolge</label>
+                <div id="options-container" class="space-y-3">
+                    {% if question and question.data.options %}
+                        {% for option in question.data.options|dictsort:"order" %}
+                            <div class="flex items-center space-x-3">
+                                 <span class="number bg-blue-500 p-2 rounded-lg text-white">{{ forloop.counter }}.</span>
+                                <textarea name="option_{{ forloop.counter }}" rows="2"
+                                       class="dark:bg-[#2a2f3a] shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                                       required>{{ option.value }}</textarea>
+                                <label class="inline-flex items-center">
+                                </label>
+                                <button type="button" onclick="removeOption(this)"
+                                        class="text-red-600 hover:text-red-800 transition-colors">
+                                    <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                                    </svg>
+                                </button>
+                            </div>
+                        {% endfor %}
+                    {% else %}
+                    {% for i in "1234" %}
+                        <div class="flex items-center space-x-3">
+                            <span class="number bg-blue-500 p-2 rounded-lg text-white">{{ forloop.counter }}.</span>
+                            <textarea name="option_{{ forloop.counter }}" rows="2"
+                                   class="dark:bg-[#2a2f3a]  shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                                   required></textarea>
+                            <label class="inline-flex items-center">
+                          
+                            </label>
+                            <button type="button" onclick="removeOption(this)"
+                                    class="text-red-600 hover:text-red-800 transition-colors">
+                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                                </svg>
+                            </button>
+                        </div>
+                          {% endfor %}
+                    {% endif %}
+                </div>
+                <button type="button" onclick="addOption()" 
+                        class="mt-3 inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    <svg class="h-4 w-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
+                    </svg>
+                    Option hinzufügen
+                </button>
+            </div>
+
+            <div class="p-4">
+                <label class="font-bold" for="time_per_question">Zeit pro Frage:</label>
+                <select name="time_per_question" id="time_per_question" class="dark:text-white dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                    <option value="10" {% if standard_time_per_question == "10" or time_per_question == "10" %}selected{% endif %}>10 Sekunden</option>
+                    <option value="20" {% if standard_time_per_question == "20" or time_per_question == "20" %}selected{% endif %}>20 Sekunden</option>
+                    <option value="30" {% if standard_time_per_question == "30" or time_per_question == "30" %}selected{% endif %}>30 Sekunden</option>
+                    <option value="45" {% if standard_time_per_question == "45" or time_per_question == "45" %}selected{% endif %}>45 Sekunden</option>
+                    <option value="60" {% if standard_time_per_question == "60" or time_per_question == "60" %}selected{% endif %}>1 Minute</option>
+                    <option value="120" {% if standard_time_per_question == "120" or time_per_question == "120" %}selected{% endif %}>2 Minuten</option>
+                    <option value="300" {% if standard_time_per_question == "300" or time_per_question == "300" %}selected{% endif %}>5 Minuten</option>
+                </select>
+            </div>
+                                                   <label for="credits" class="block text-sm font-medium text-gray-700  dark:text-white">Credits</label>
+                <div class="mt-1">
+                    <textarea name="credits" rows="4"
+                           class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md "
+                           >{{ credits }}</textarea>
+                </div>
+
+            <div class="flex justify-end space-x-3">
+                <a href="{% url 'library:detail_quiz' quiz.id %}" 
+                   class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    Abbrechen
+                </a>
+                <button type="submit" 
+                        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    {% if question %}Speichern{% else %}Erstellen{% endif %}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<script>
+
+
+
+function addOption() {
+    const container = document.getElementById('options-container');
+    const optionCount = container.children.length + 1;
+    
+    if (optionCount > 6) {
+        alert('Maximal 6 Optionen sind erlaubt.');
+        return;
+    }
+    
+    const div = document.createElement('div');
+    div.className = 'flex items-center space-x-3';
+    div.innerHTML = `
+
+
+
+                               <span class="number bg-blue-500 p-2 rounded-lg text-white">${optionCount}.</span>
+                            <textarea name="option_${optionCount}" rows="2"
+                                   class="dark:bg-[#2a2f3a]  shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                                   required></textarea>
+                            <label class="inline-flex items-center">
+                          
+                            </label>
+                            <button type="button" onclick="removeOption(this)"
+                                    class="text-red-600 hover:text-red-800 transition-colors">
+                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                                </svg>
+                            </button>
+                            
+    `;
+    
+    container.appendChild(div);
+}
+
+function removeOption(button) {
+    
+    const container = document.getElementById('options-container');
+    if (container.children.length > 2) {
+        button.parentElement.remove();
+        updateOptionNumbers();
+    } else {
+        alert('Mindestens zwei Optionen müssen vorhanden sein.');
+    }
+}
+
+function updateOptionNumbers() {
+    const container = document.getElementById('options-container');
+    const options = container.children;
+    Array.from(options).forEach((option, index) => {
+        const number = index + 1;
+        const textInput = option.querySelector('textarea');
+     
+
+  
+        textInput.name = `option_${number}`;
+        const numberSpan = option.querySelector('span.number');
+        if (numberSpan) {
+            numberSpan.textContent = `${number}.`;
+        }
+
+    });
+}
+</script>
+{% endblock %}

django/templates/library/question/question_true_false.html

@@ -3,29 +3,29 @@
 {% block content %}
 <div class="container mx-auto px-4">
     <div class="flex justify-between items-center mb-6">
-        <h1 class="text-2xl font-bold">{% if question %}Frage bearbeiten{% else %}Neue Wahr/Falsch Frage{% endif %}</h1>
+        <h1 class="text-2xl font-bold  dark:text-white">{% if question %}Frage bearbeiten{% else %}Neue Wahr/Falsch Frage{% endif %}</h1>
         <a href="{% url 'library:detail_quiz' quiz.id %}" 
            class="bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition-colors">
             Zurück zum Quiz
         </a>
     </div>
 
-    <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md">
+    <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md dark:bg-transparent dark:text-white">
         <form method="post" class="space-y-6" enctype="multipart/form-data">
             {% csrf_token %}
             
             <!-- Question Text -->
             <div>
-                <label for="question" class="block text-sm font-medium text-gray-700">Frage</label>
+                <label for="question" class="block text-sm font-medium text-gray-700  dark:text-white">Frage</label>
                 <div class="mt-1">
                     <textarea name="question" id="question" rows="4"
-                           class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           class="dark:bg-[#2a2f3a] shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
                            required>{{ question.data.question }}</textarea>
                 </div>
             </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
@@ -33,31 +33,31 @@
             {% endif %}
             <div>
                 <label class="font-bold" for="question_image">Bild:</label>
-                <input class="bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400" type="file" name="question_image" id="question_image">
+                <input class="max-w-full bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400 dark:bg-transparent" type="file" name="question_image" id="question_image">
             </div>
 
             <!-- True/False Selection -->
             <div>
-                <label class="block text-sm font-medium text-gray-700 mb-2">Richtige Antwort</label>
+                <label class="block text-sm font-medium text-gray-700 mb-2  dark:text-white">Richtige Antwort</label>
                 <div class="flex space-x-4">
                     <label class="inline-flex items-center">
                         <input type="radio" name="correct_answer" value="true"
                                class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300"
                                {% if question.data.correct_answer %}checked{% endif %}>
-                        <span class="ml-2 text-sm text-gray-600">Wahr</span>
+                        <span class="ml-2 text-sm text-gray-600  dark:text-white">Wahr</span>
                     </label>
                     <label class="inline-flex items-center">
                         <input type="radio" name="correct_answer" value="false"
                                class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300"
                                {% if not question.data.correct_answer %}checked{% endif %}>
-                        <span class="ml-2 text-sm text-gray-600">Falsch</span>
+                        <span class="ml-2 text-sm text-gray-600  dark:text-white">Falsch</span>
                     </label>
                 </div>
             </div>
 
             <div class="p-4">
                 <label class="font-bold" for="time_per_question">Zeit pro Frage:</label>
-                <select name="time_per_question" id="time_per_question">
+                <select name="time_per_question" id="time_per_question" class="dark:text-white dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                     <option value="10" {% if standard_time_per_question == "10" or time_per_question == "10" %}selected{% endif %}>10 Sekunden</option>
                     <option value="20" {% if standard_time_per_question == "20" or time_per_question == "20" %}selected{% endif %}>20 Sekunden</option>
                     <option value="30" {% if standard_time_per_question == "30" or time_per_question == "30" %}selected{% endif %}>30 Sekunden</option>
@@ -67,6 +67,13 @@
                     <option value="300" {% if standard_time_per_question == "300" or time_per_question == "300" %}selected{% endif %}>5 Minuten</option>
                 </select>
             </div>
+                                                   <label for="credits" class="block text-sm font-medium text-gray-700  dark:text-white">Credits</label>
+                <div class="mt-1">
+                    <textarea name="credits" rows="4"
+                           class="dark:bg-[#2a2f3a] shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           >{{ credits }}</textarea>
+                            </div>
+
 
             <div class="flex justify-end space-x-3">
                 <a href="{% url 'library:detail_quiz' quiz.id %}" 

django/templates/partials/_footer.html

@@ -1,7 +1,48 @@
-<div class="grid place-content-center gap-2 w-full mt-4">
-    <div class="flex space-x-2 pb-4">
-        <p class="text-sm font-extralight"><a href="/impress">Impressum</a></p>
-        <p class="text-sm font-extralight"><a href="/privacy">Datenschutz</a></p>
-        <p class="text-sm font-extralight"><a href="https://edugit.org/enrichment-2024/qivip">Repository</a></p>
+<footer class="w-full bg-blue-600 text-white shadow-xl py-6 mt-24  break-words">
+
+
+
+<div class="flex items-center justify-center  flex-col sm:flex-row sm:gap-32">
+    
+    <div class="mb-2 sm:m-0">
+     <h1 class="flex justify-center text-md font-bold font-sans tracking-wider gap-2">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+    <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0 0 12 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 0 1-2.031.352 5.988 5.988 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971Zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0 2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 0 1-2.031.352 5.989 5.989 0 0 1-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971Z" />
+    </svg>
+        Rechtliches:</h1>
+
+    <div class="left-0 w-full p-2 flex justify-center space-x-2  text-white">
+        <p class="text-xs  tracking-wide"><a class= "hover:underline" href="/impress">Impressum</a></p>
+        <p class="text-xs  tracking-wide"><a class= "hover:underline" href="/privacy">Datenschutz</a></p>
+        <p class="text-xs  tracking-wide"><a class= "hover:underline" href="https://edugit.org/enrichment-2024/qivip">Repository</a></p>
     </div>
     </div>
+
+ <div>
+    <h2 class="flex justify-center text-md font-bold font-sans tracking-widerd gap-2">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M12 7.5h1.5m-1.5 3h1.5m-7.5 3h7.5m-7.5 3h7.5m3-9h3.375c.621 0 1.125.504 1.125 1.125V18a2.25 2.25 0 0 1-2.25 2.25M16.5 7.5V18a2.25 2.25 0 0 0 2.25 2.25M16.5 7.5V4.875c0-.621-.504-1.125-1.125-1.125H4.125C3.504 3.75 3 4.254 3 4.875V18a2.25 2.25 0 0 0 2.25 2.25h13.5M6 7.5h3v3H6v-3Z" />
+</svg>
+
+        Erfahren Sie mehr:</h2>
+    <div class="left-0 w-full p-2 flex justify-center space-x-2  text-white">
+        <p class="text-xs tracking-wide"><a class= "hover:underline" href="https://katharineum.de/qivip-unsere-neue-quiz-software/">
+            
+            mehr über uns</a></p>
+    </div>
+       </div>
+
+ </div>
+ 
+
+ <div class="flex justify-center">
+  <div class="h-0.25 w-200 bg-white opacity-40 rounded-full mt-2">
+ </div></div>
+
+
+<p class="text-xs text-center opacity-80 mt-2">
+    
+   <a class="font-bold" href="/">qivip</a> - Ein Projekt entstanden während des Enrichment-Programms.
+</p>
+
+</footer>

django/templates/partials/_nav.html

@@ -10,9 +10,9 @@
 
         <!-- Desktop Search (centered on screen) - Hidden on mobile -->
         <div class="hidden md:flex justify-center items-center absolute left-1/2 transform -translate-x-1/2 min-w-40 ">
-            <form method="get" action="{% url 'library:overview_quiz' %}" class="mr-2 ml-2 flex items-center justify-center w-screen max-w-sm bg-white rounded-full px-4 py-1 shadow-md">
+            <form method="get" action="{% url link|default:'library:overview_quiz' %}" class="mr-2 ml-2 flex items-center justify-center w-screen max-w-sm bg-white rounded-full px-4 py-1 shadow-md dark:bg-gray-900">
                 <input id="quiz-search-desktop" list="quiz-names-desktop" type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}"
-                       class="text-sm w-full px-3 py-1 text-black bg-transparent focus:outline-none lg:text-base">
+                       class="text-sm w-full px-3 py-1 text-black bg-transparent focus:outline-none lg:text-base dark:text-white">
                 <button class="py-1 text-blue-600">
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 md:size-6">
                         <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
@@ -51,10 +51,10 @@
     <div id="mobile-menu" class="hidden absolute w-full z-50 md:hidden opacity-0 transform -translate-y-2 transition-all duration-300 ">
         <div class="bg-blue-500 pt-3 pb-4 rounded-b-lg shadow-inner">
             <!-- Search in mobile menu -->
-            <form method="get" action="{% url 'library:overview_quiz' %}" class="px-4 mb-4">
-                <div class="flex items-center justify-center bg-white rounded-full px-4 py-2 shadow-md">
+            <form method="get" action="{% url link|default:'library:overview_quiz' %}" class="px-4 mb-4 ">
+                <div class="flex items-center justify-center bg-white rounded-full px-4 py-2 shadow-md dark:bg-gray-900">
                     <input id="quiz-search-mobile" list="quiz-names-mobile" type="text" name="search" placeholder="Suche ..." value="{{ request.GET.search }}"
-                            class="w-full text-sm px-2 text-black bg-transparent focus:outline-none">
+                            class="w-full text-sm px-2 text-black bg-transparent focus:outline-none dark:text-white">
                     <button class="text-blue-600">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" 
                                 stroke="currentColor" class="size-5">

django/templates/play/game/finished.html

@@ -4,16 +4,16 @@
 {% block content %}
 <div class="container mx-auto px-4">
     <div class="max-w-2xl mx-auto">
-        <div class="bg-white rounded-lg shadow-md p-8 mb-6">
+        <div class="bg-white rounded-lg shadow-md p-8 mb-6 dark:bg-transparent dark:text-white">
             <div class="text-center mb-8">
                 <h1 class="text-4xl font-bold text-blue-600 mb-4">Quiz beendet!</h1>
-                <p class="text-xl text-gray-600">Vielen Dank fürs Spielen!</p>
+                <p class="text-xl text-gray-600 dark:text-white">Vielen Dank fürs Spielen!</p>
             </div>
                     
             {% if not is_host %}
             {% if rating_enabled %}
-            <div class="bg-blue-50 rounded-lg p-6 mb-8">
-                <h2 class="text-2xl font-bold text-blue-800 mb-4 text-center">Wie hat dir das Quiz gefallen?</h2>
+            <div class="bg-blue-50 rounded-lg p-6 mb-8 dark:bg-transparent ">
+                <h2 class="text-2xl font-bold text-blue-800 mb-4 text-center dark:text-white">Wie hat dir das Quiz gefallen?</h2>
                 <div class="stars flex justify-center space-x-4 mb-4">
                     <i class="fas fa-star text-3xl transition-all duration-200 hover:scale-110" data-rating="1"></i>
                     <i class="fas fa-star text-3xl transition-all duration-200 hover:scale-110" data-rating="2"></i>

django/templates/play/game/question_host.html

@@ -1,21 +1,44 @@
 {% extends 'base.html' %}
 {% block content %}
 
-{% if request.session.mode == "learn" %}
+{% 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">
+        {% if request.session.mode == "learn" %}
         <button onclick="leaveGame()" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">
             Spiel verlassen
         </button>
-    </div>{% endif %}
-    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
-        <p class="text-gray-700 font-bold text-xl mb-4">Frage {{ question_index|add:1 }} von {{ total_questions }}</p>
-        <h1 class="text-3xl font-bold mb-6">{{ question_data.question }}</h1> 
+        {% endif %}
+        <button onclick="this.onclick=null; advanceToScores();" class="mx-2 bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
+            überspringen
+        </button>
+    </div>
+    <div id="form_host" class="bg-white rounded-lg shadow-md p-4 mb-6 dark:bg-transparent dark:text-white">
+        <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 dark:text-white">{{ question_index|add:1 }}</p>
+                <p class="text-sm">von</p>
+                <p class="text-gray-700 font-bold text-sm dark:text-white">{{ total_questions }}</p>
+            </div>
+        <div class="flex gap-1 mb-2"><p class="text-sm">Antworten:</p> <p id="answer-count" class="text-gray-700 font-bold text-sm dark:text-white"></p></div>
+        </div>
+
+        
+        
+
+        <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>
 
         {% 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 max-h-[33vh] w-auto rounded-lg" src="{{ question_image.image.url }}" alt="Bild der Frage">
+            </div>
+        {% endif %}
+            {% if request.session.mode != "learn" %}
+           <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 %}
         
@@ -23,48 +46,238 @@
         <div class="grid grid-cols-1 gap-4 mb-6">
         {% else %}
         <div class="grid grid-cols-2 gap-4 mb-6">
-        {% endif %}
-                {% if request.session.mode != "learn" %} 
-            <div class="p-4 bg-blue-50 rounded-lg">
-                <p class="text-blue-600 text-xl mb-2">Verbleibende Zeit </p>
-                <p id="remaining-time" class="text-6xl font-bold text-blue-700">30</p>
-            </div>
         {% endif %}
 
-            <div class="p-4 bg-blue-50 rounded-lg">
-                <p class="text-blue-600 text-xl mb-2">Antworten</p>
-                <p id="answer-count" class="text-6xl font-bold text-blue-700">0/0</p>
+
         </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 
-                    class="p-4 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option"
+                    class="  
+                    {% 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 }}"
                     {% if request.session.mode == "learn" %}
                     onclick="submitAnswer({{ forloop.counter0 }});" {% endif %}>
                     <p class="text-lg">{{ option.value }}</p>
                 </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">
+    {% if request.session.mode == "learn" %}
+ <button 
+ onclick="submitOrderAnswer()" 
+        id="send_order" class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors duration-200  answer-option "
+    >
+        Abschicken
+ </button>
+    {% endif %}
+ 
+
+
+        {% elif question_data.type == "input" %}
         {% if request.session.mode == "learn" %}
         <form action="">
         <input id="textanswer" type="text" placeholder="DEINE ANTWORT" 
-        class="answer-option text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option lg:w-80 ">
+        class="answer-option text-center mb-4 p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option lg:w-80 dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a] ">
    
- <button {% if request.session.mode == "learn" %}
- onclick="submitAnswer( -1 );" {% endif %}
-         class="mt-2 text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option">
-     abschicken
+ <button 
+ onclick="submitAnswer( -1 );"
+class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors duration-200  answer-option "
+    >
+        Abschicken
  </button>
 </form>
   
+        {% endif %}
+        {% elif question_data.type == "map" and request.session.mode == "learn" %}
+        <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="singleanswer" name="singleanswer">
+        <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>
+        <input type="hidden" id="location" name="location" value="">
+        <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));
+
+            function submitAnswerMap() {
+                const answer = document.getElementById("location").value;
+
+                if (answer === "") {
+                    alert("Bitte einen Ort auf der Karte auswählen!");
+                    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));
+
+                // Submit the answer
+                submitAnswer(answer);
+            }
+        </script>
+        {% elif question_data.type == "map" and request.session.mode != "learn" %}
+        <p class="text-sm text-gray-600 dark:text-gray-400 mb-2 text-center">Bitte den gesuchten Ort auf der Karte auswählen</p>
+        {% elif question_data.type == "guess" %}
+ {% if request.session.mode == "learn" %}
+<form class="flex flex-col items-center gap-4 mt-4">
+    <!-- Slider mit Beschriftung -->
+    <div class="w-full max-w-xl text-center">
+        <input 
+            id="textanswer" 
+            type="range" 
+            min="{{ question_data.min }}" 
+            max="{{ question_data.max }}" 
+            value="{{ question_data.min }}" 
+            step="1"
+            oninput="document.getElementById('range-value').textContent = 'Wert: ' + this.value;" 
+            class="w-full answer-option bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a]"
+        >
+        <p id="range-value" class="mt-2 font-bold text-gray-800 dark:text-white">Wert: {{ question_data.min }}</p>
+    </div>
+
+    <!-- Abschicken-Button -->
+     
+    <button 
+        onclick="submitAnswer(-1);"
+        
+        class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors duration-200  answer-option "
+    >
+        Abschicken
+    </button>
+    
+</form>
 {% endif %}
         {% endif %}
-
-
     </div>
 </div>
 {% endblock %}
@@ -73,6 +286,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 }}';
@@ -95,7 +309,12 @@
         } else if (data.type === 'game_state_update' && 
                    data.action === 'show_scores' && 
                    data.redirect_url) {
+            
+            
+              setTimeout(() => {
+                submitAnswer(-1);
         window.location.href = data.redirect_url;
+    }, 1000); 
         }
     };
 
@@ -123,6 +342,7 @@
         }
     }
     
+
     function advanceToScores() {
         // Show correct answers and answer counts
         var correctOptions = document.querySelectorAll('[data-correct="True"]');
@@ -142,7 +362,7 @@
                 'type': 'advance_to_scores',
                 'host_id': hostId
             }));
-        }, 2000);
+        }, 0);
     }
 
     // Timer
@@ -150,12 +370,18 @@
     function updateTimer() {
         const now = Date.now();
         const elapsed = now - questionStartTime;
-        const remaining = Math.max(0, Math.ceil((questionDuration - elapsed) / 1000));
+        const remaining = Math.max(0, (questionDuration - elapsed) / 1000);
 
-        document.getElementById('remaining-time').textContent = remaining;
+        
+        //document.getElementById('remaining-time').textContent = remaining;
+
+        document.getElementById('time-bar').style.width = ((remaining * 1000) / questionDuration * 100) + '%';
+                if (remaining<3){
+        document.getElementById('time-bar').style.backgroundColor="red";}else if(remaining<5){document.getElementById('time-bar').style.backgroundColor="orange";}
    
         if (remaining === 0) {
             advanceToScores();
+            
         } else {
             requestAnimationFrame(updateTimer);
         }
@@ -238,5 +464,74 @@
         }));
     }
     }
+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: '{{ host_id }}',
+        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 %}

django/templates/play/game/question_participant.html

@@ -1,41 +1,224 @@
 {% 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">
             Spiel verlassen
         </button>
     </div>
-    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
-        <p class="text-gray-700 font-bold text-xl mb-4">Frage {{ question_index|add:1 }} von {{ total_questions }}</p>
-        <h1 class="text-3xl font-bold mb-6">{{ question_data.question }}</h1>
+    <div class="bg-white rounded-lg shadow-md p-6 mb-6 dark:bg-transparent dark:text-white">
             
-        <div class="p-4 bg-blue-50 rounded-lg mb-6">
-            <p class="text-blue-600 text-xl mb-2">Verbleibende Zeit</p>
-            <p id="remaining-time" class="text-6xl font-bold text-blue-700">30</p>
+        <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 dark:text-white">{{ question_index|add:1 }}</p>
+                <p class="text-sm">von</p>
+                <p class="text-gray-700 font-bold text-sm dark:text-white">{{ total_questions }}</p>
             </div>
-        {% if question_data.type  != "input" %}
+        </div>
+        <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>
+           </div>
+        {% 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 
-                    class="p-4 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option"
+                <button data-index="{{ forloop.counter0 }}"
+            data-value="{{ option.value }}"
+                    class="
+                    {% 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 }}"
                     onclick="submitAnswer({{ forloop.counter0 }});">
                     <p class="text-lg">{{ option.value }}</p>
                 </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 %}
-        <form action="">
-        <input id="textanswer" type="text" placeholder="DEINE ANTWORT" 
-        class="answer-option text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option lg:w-80">
+                    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="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors duration-200  answer-option "
+    >
+        Abschicken
+ </button>
+    
+  {% elif question_data.type == "guess" %}
+<form class="flex flex-col items-center gap-4 mt-4">
+    <!-- Slider mit Beschriftung -->
+    <div class="w-full max-w-xl text-center">
+        <input 
+            id="textanswer" 
+            type="range" 
+            min="{{ question_data.min }}" 
+            max="{{ question_data.max }}" 
+            value="{{ question_data.min }}" 
+            step="1"
+            oninput="document.getElementById('range-value').textContent = 'Wert: ' + this.value;" 
+            class="w-full answer-option bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a]"
+        >
+        <p id="range-value" class="mt-2 font-bold text-gray-800 dark:text-white">Wert: {{ question_data.min }}</p>
+    </div>
+
+    <!-- Abschicken-Button -->
     <button 
+     
         onclick="submitAnswer(-1);"
-         class="mt-2 text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option">
-     abschicken
+     
+        class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors duration-200  answer-option "
+    >
+        Abschicken
     </button>
 </form>
+
+  
+      
+ 
+
+ 
+
+
+
+
+         {% elif question_data.type == "input" %}
+        <form action="">
+        <input id="textanswer" type="text" placeholder="DEINE ANTWORT" 
+        class="answer-option text-center p-2 mb-4 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option lg:w-80 dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a]">
+ <button
+ onclick="submitAnswer( -1 );"
+         class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors duration-200  answer-option "
+    >
+        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>
@@ -47,7 +230,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);
 
@@ -59,6 +242,11 @@
             data.action === 'show_scores' && 
             data.redirect_url) {
             window.location.href = data.redirect_url;
+            {% if question_data.type == "order" %}
+            submitOrderAnswer();
+            {% elif question_data.type != "map"  %}
+            submitAnswer(-1);
+            {% endif %}
         }
     };
 
@@ -66,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
 
@@ -112,19 +315,64 @@
     }
     }
 
+    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() {
         const now = Date.now();
         const elapsed = now - questionStartTime;
-        const remaining = Math.max(0, Math.ceil((questionDuration - elapsed) / 1000));
+        const remaining = Math.max(0, (questionDuration - elapsed) / 1000);
+        document.getElementById('time-bar').style.width = ((remaining * 1000) / questionDuration * 100) + '%';
+        if (remaining<3){
+        document.getElementById('time-bar').style.backgroundColor="red";}else if(remaining<5){document.getElementById('time-bar').style.backgroundColor="orange";}
    
-        document.getElementById('remaining-time').textContent = remaining;
+        
+        //document.getElementById('remaining-time').textContent = remaining;
 
         if (remaining === 0 && !hasAnswered) {
             // Auto-submit timeout answer
+            {% if question_data.type == "order" %}
+            submitOrderAnswer();
+            {% else %}
             submitAnswer(-1);
+            {% endif %}
+
+            
         } else if (remaining > 0) {
             requestAnimationFrame(updateTimer);
         }
@@ -141,5 +389,75 @@
 
     // 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() {
+    if (hasAnswered) return;
+    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 %}

django/templates/play/game/score_overview.html

@@ -2,54 +2,303 @@
 
 {% block content %}
 <div class="container mx-auto px-4">
-    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+    <div class="bg-white rounded-lg shadow-md p-6 mb-6 dark:bg-transparent dark:text-white ">
         <h1 class="text-3xl font-bold mb-6">Ergebnisse</h1>
-        
+       {% if request.session.mode == "learn" or is_host %}
         <div class="mb-6">
+           
             <h2 class="text-xl font-bold mb-4">Aktuelle Frage</h2>
             <p class="text-lg mb-2">{{ question_data.question }}</p>
+
+            {% if question_data.type == "map" %}
+                <!-- Map Question Display -->
+                <div class="mb-4">                  
+                    <div id="map" class="h-96 w-full rounded-lg border border-gray-300 dark:border-gray-600"></div>
+                </div>
+                
+                <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+                        integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
+                        crossorigin=""></script>
+                <script>
+
+                        const participantAnswers = [
+    {% for participant in participants %}
+        {% if participant.coordinate_answer %}
+            "{{ participant.coordinate_answer }}",
+        {% endif %}
+    {% endfor %}];
+    
+
+
+
+
+
+
+                    document.addEventListener('DOMContentLoaded', function() {
+                        // Parse the target location from the string format "lat,lng"
+                        const targetCoords = '{{ question_data.target_location|escapejs }}'.split(',');
+                        let targetLat, targetLng;
+                        
+                        if (targetCoords.length === 2) {
+                            targetLat = parseFloat(targetCoords[0].trim());
+                            targetLng = parseFloat(targetCoords[1].trim());
+                            
+                            // Normalize longitude to be within -180 to 180
+                            targetLng = ((targetLng % 360) + 540) % 360 - 180;
+                            
+                            // Clamp latitude to valid range (-90 to 90)
+                            targetLat = Math.max(-90, Math.min(90, targetLat));
+                            
+                            console.log('Normalized coordinates:', { lat: targetLat, lng: targetLng });
+                        }
+                        
+                        // Validate coordinates
+                        if (isNaN(targetLat) || isNaN(targetLng)) {
+                            console.warn('Invalid coordinates, hiding map');
+                            document.getElementById('map-container').style.display = 'none';
+                            return; // Exit the function early
+                        }
+                        
+                        const targetLocation = [targetLat, targetLng];
+                        console.log('Using coordinates:', targetLocation);
+                        
+                        // Initialize map centered on target location
+                        const map = L.map('map').setView(targetLocation, 7);
+
+                        // Check for dark mode
+                        const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+                        
+                        // Choose appropriate map style
+                        const tileUrl = isDarkMode
+                            ? 'https://{s}.basemaps.cartocdn.com/rastertiles/dark_all/{z}/{x}/{y}.png'
+                            : 'https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png';
+
+                        L.tileLayer(tileUrl, {
+                            maxZoom: 19,
+                            attribution: '© OpenStreetMap © CARTO',
+                            noWrap: true
+                        }).addTo(map);
+
+                     participantAnswers.forEach(coordStr => {
+                     const coords = coordStr.split(',').map(Number);
+                    if (coords.length === 2 && !coords.some(isNaN)) {
+                   const marker = L.marker(coords).addTo(map).bindPopup('Antwort eines Teilnehmers');
+
+                    // Linie vom Ziel zum Teilnehmermarker
+                     L.polyline([targetLocation, coords], {
+                    color: '#f59e0b',   
+                    weight: 2,          // Linienstärke
+                    dashArray: '5,5',   // gestrichelte Linie
+                    opacity: 0.6
+                    }).addTo(map);
+                    }
+                    });
+
+                        // Add target marker
+                        L.marker(targetLocation, {
+                            icon: L.divIcon({
+                                html: '🎯',
+                                className: 'text-3xl',
+                                iconSize: [32, 32],
+                                iconAnchor: [16, 32],
+                                popupAnchor: [0, -32]
+                            })
+                        }).addTo(map)
+                        .bindPopup('Zielort')
+                        .openPopup();
+
+                        // Add tolerance radius circle if available
+                        {% if question_data.tolerance_radius %}
+                        (function() {
+                            try {
+                                const toleranceRadius = parseFloat('{{ question_data.tolerance_radius|escapejs }}'.replace(',', '.'));
+                                if (!isNaN(toleranceRadius) && toleranceRadius > 0) {
+                                    L.circle(targetLocation, {
+                                        color: isDarkMode ? '#3b82f6' : '#2563eb',
+                                        fillColor: isDarkMode ? '#3b82f6' : '#2563eb',
+                                        fillOpacity: 0.2,
+                                        radius: toleranceRadius
+                                    }).addTo(map);
+                                    console.log('Added tolerance radius:', toleranceRadius);
+                                }
+                            } catch (e) {
+                                console.error('Error adding tolerance radius:', e);
+                            }
+                        })();
+                        {% endif %}
+                    });
+                </script>
+            
+            {% elif question_data.type != "order" and question_data.type != "guess" %}
+
             <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=" dark:bg-transparent 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">
             <p class="text-lg ">{{ option.value }}</p>
-            <p class="text-gray-600" id="option-count-{{ forloop.counter0 }}">0 Antworten</p>
+            <p class="text-gray-600 dark:text-gray-400" id="option-count-{{ forloop.counter0 }}">0 Antworten</p>
              
             </div>
         </div>
                 {% endfor %}
             </div>
+            {% elif question_data.type == "guess" %}
+               <div id="option-box-0" class="relative p-4 rounded-lg border-2 border-green-500 overflow-auto">
+    <div id="option-fill-0" class="absolute left-0 top-0 h-full bg-green-300 opacity-50 z-0 transition-all duration-1500" style="width: 0%;"></div>
+    <div class="relative z-10">
+      <p class="text-lg">Richtige Anwort: {% for option in question_data.options%} {{ option.value }}{% endfor %}</p>
+      <p class="text-sm">(prozentuale Punktevergabe ab Genauigkeit von {{ question_data.tolerance }}%)</p>
+      
+      <p class="text-gray-600" id="option-count-0">0 Antworten</p>
+    </div>
+  </div>
+  <div id="option-box-1" class="relative p-4 rounded-lg border-2 border-red-500 overflow-auto mt-2">
+    <div id="option-fill-1" class="absolute left-0 top-0 h-full bg-red-300 opacity-50 z-0 transition-all duration-1500" style="width: 0%;"></div>
+    <div class="relative z-10">
+         <p class="text-lg">Schätzung zu ungenau</p>
+      <p class="text-gray-600" id="option-count-1">0 Antworten</p>
+    </div>
   </div>
 
 
+      {% else %}
+  <div id="option-box-0" class="relative p-4 rounded-lg border-2 border-green-500 overflow-auto">
+    <div id="option-fill-0" class="absolute left-0 top-0 h-full bg-green-300 opacity-50 z-0 transition-all duration-1500" style="width: 0%;"></div>
+    <div class="relative z-10">
+      <p class="text-lg">Richtige Reihenfolge</p>
+      <ul class="">
+      {% for option in question_data.options|dictsort:"order" %}
+        <li class="text-lg"> {{ forloop.counter }}. <span class="">{{ option.value }}</span> </li>
+      {% endfor %}
+    </ul>
+      <p class="text-gray-600" id="option-count-0">0 Antworten</p>
+    </div>
+  </div>
+  <div id="option-box-1" class="relative p-4 rounded-lg border-2 border-red-500 overflow-auto mt-2">
+    <div id="option-fill-1" class="absolute left-0 top-0 h-full bg-red-300 opacity-50 z-0 transition-all duration-1500" style="width: 0%;"></div>
+    <div class="relative z-10">
+      <p class="text-lg">Falsche Reihenfolge</p>
+      <p class="text-gray-600" id="option-count-1">0 Antworten</p>
+    </div>
+  </div>
+  
+  {% endif %}
+  {% else %}
+
+
+<div class="flex flex-col items-center justify-center text-center pt-4">
+  {% if participant.last_answer_correct %}
+    <!-- Richtig-Symbol -->
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+         stroke-width="1.5" stroke="currentColor"
+         class="text-green-500 size-40">
+      <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>
+
+    <!-- Feedback-Text -->
+    <div id="antwort-richtig"
+         class="pt-3 text-gray-600 dark:text-white font-bold max-w-xs md:max-w-sm">
+      Hier erscheint gleich dein Feedback...
+    </div>
+
+  {% elif participant.last_answer_correct == False %}
+    <!-- Falsch-Symbol -->
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
+         stroke-width="1.5" stroke="currentColor"
+         class="text-red-500 size-40">
+      <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>
+
+    <!-- Feedback-Text -->
+    <div id="antwort-falsch"
+         class="pt-3 text-gray-600 dark:text-white font-bold max-w-xs md:max-w-sm">
+      Hier erscheint gleich dein Feedback...
+    </div>
+  {% endif %}
+  <p class="text-blue-600 font-bold text-md">+{{ participant.last_score }} Punkte</p>
+</div>
+
+
+
+  {% endif %}
+        </div>
+
         <div class="mb-6">
+            {% if request.session.mode == "learn" %}
             <h2 class="text-xl font-bold mb-4">Punktestand</h2>
-            <div id="scoreboard" class="space-y-2">
+              {% endif %}
+
+            <div id="scoreboard" class="leading-relaxed">
                 {% for participant in participants %}
+                {% if request.session.mode == "learn"  %}
                     {% 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="dark:bg-transparent 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 data-last-score="{{ participant.last_score }}" class="text-gray-600" id="score-{{ forloop.counter0 }}">{{ participant.score }} Punkte</p> 
+                                    <span class="display_name text-gray-600 font-black text-2xl dark:text-white " 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="dark:text-white 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 %}
+                              {% endif %}
+                              
+                               
                                </div>
+
+
+                                                 
+                            
+                            {% if participant == my_participant or request.session.mode == "learn" %}
                                 {% if participant.last_answer_correct %}
-                                <span class="text-green-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-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="dark:text-white 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="dark:text-white 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>
@@ -57,13 +306,29 @@
  
     {% 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">
+        {% if is_last_question and request.session.mode != "learn" %}
+               <button id="winner-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">
+                Siegerpodest
+            </button>
+         
+        {% else %}
+            <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>
+               {% endif %}
         {% 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">
+                   {% if request.session.mode == "learn" %}
+             <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>
+            {% else %}
+            <button id="scoreboard-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">
+                 Punkteübersicht
+
+            </button>
+              {% endif %}
+           
         {% endif %}
     {% endif %}    
     </div>
@@ -73,62 +338,135 @@
 {% block extra_js %}
 {% if is_last_question %}
 
+{% endif %}  
+{% include 'play/game/common_scripts.html' %}
+{% if is_host %}
+{% include 'play/game/sound.html' %}
+{% endif %}
+
+
+
+
 <script>
-    // Hilfsfunktion für Pausen
-    function sleep(ms) {
-      return new Promise(resolve => setTimeout(resolve, ms));
-    }
 
-    document.addEventListener('DOMContentLoaded', async function() {
-      const items = document.querySelectorAll('#scoreboard div');
-      const top3 = Array.from(items).slice(0, 3); // Nur die ersten 3 animieren
-  
-      // Sofort Startzustände für Top3 setzen, die anderen sofort sichtbar
-      items.forEach((el, index) => {
-        if (index >= 3) {
-          el.style.opacity = '1';
-          el.style.transform = 'translateY(0)';
-        } else {
-          el.style.opacity = '0';
-          el.style.transform = 'translateY(20px)';
-        }
-      });
-  
-      // Warten bevor Animation startet
-      await sleep(1500);  // <<< hier die 5 Sekunden Pause
-  
-      // Transition-Eigenschaft setzen nach Render-Zyklus
-      requestAnimationFrame(() => {
-        top3.forEach(el => {
-          el.style.transition = 'all 0.8s ease';
-        });
-  
-        // Animation für Top 3 starten – von Platz 3 zu 1
-        top3.reverse().forEach((el, index) => {
-          setTimeout(() => {
-            el.style.opacity = '1';
-            el.style.transform = 'translateY(0)';
-  
-            if (index === top3.length - 1) {
-              triggerConfetti();
-            }
-          }, index * 1500); // Zeitversetzt aufdecken
-        });
-      });
-    });
        
     function triggerConfetti() {
-      const end = Date.now() + 15 * 1000;
+      const end = Date.now() + 30 * 1000;
       (function frame() {
         confetti({ particleCount: 2, angle: 60, spread: 55, origin: { x: 0 } });
         confetti({ particleCount: 2, angle: 120, spread: 55, origin: { x: 1 } });
         if (Date.now() < end) requestAnimationFrame(frame);
       })();
     }
-  </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 %}
+                            start();
+                            bounce();
+                            {% if request.session.mode == "learn" %}
+                            triggerConfetti();
                             {% endif %}
-{% include 'play/game/common_scripts.html' %}
-<script>
+                                
+
+                            {% else %}
+                             start();
+                                {% endif %}
+    
+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';
@@ -140,9 +478,10 @@
         const data = JSON.parse(e.data);
         if (data.type === 'game_state_update' && 
     data.redirect_url && 
-            (data.action === 'next_question' || data.action === 'finish_game')) {
+    (data.action === 'next_question' || data.action === 'finish_game' || data.action === 'show_winner_podest'|| data.action === 'show_scoreboard')) {
     window.location.href = data.redirect_url;
-        } else if (data.type === 'answer_stats') {
+}
+ else if (data.type === 'answer_stats') {
             updateAnswerStats(data.stats);
         }
     };
@@ -168,7 +507,30 @@
             }));
         });
     }
+
+    var podestButton = document.getElementById('winner-button');
+    if (podestButton) {
+        podestButton.addEventListener('click', function() {
+            gameSocket.send(JSON.stringify({
+                'type': 'winner_podest',
+                'host_id': hostId
+            }));
+        });
+    }
+
     {% else %}
+
+        var scoreboardButton = document.getElementById('scoreboard-button');
+    if (scoreboardButton) {
+        scoreboardButton.addEventListener('click', function() {
+            gameSocket.send(JSON.stringify({
+                'type': 'scoreboard',
+                'host_id': hostId
+            }));
+        });
+    }
+
+
     var nextButton = document.getElementById('next-button');
     if (nextButton) {
         nextButton.addEventListener('click', function() {
@@ -176,7 +538,7 @@
                 'type': 'next_question',
                 'host_id': hostId
             }));
-        });
+        }, { once: true });
     }
     {% endif %}
     {% endif %}

django/templates/play/game/scoreboard.html

@@ -0,0 +1,306 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mx-auto px-4">
+    <div class="bg-white rounded-lg shadow-md p-6 mb-6 dark:bg-transparent dark:text-white">
+        <h1 class="text-3xl font-bold mb-6">Ergebnisse</h1>
+       
+
+
+        <div class="mb-6">
+            {% if request.session.mode != "learn" %}
+            <h2 class="text-xl font-bold mb-4">Punktestand</h2>
+              {% endif %}
+
+            <div id="scoreboard" class="leading-relaxed">
+                {% for participant in participants %}
+                {% if request.session.mode != "learn"  %}
+                    {% if participant == my_participant or is_host %}
+                        <div class="dark:bg-transparent mt-2 shadow-sm p-4 bg-gray-100 rounded-lg border-2 border
+                                             {% if forloop.counter <= 3 %}
+                      {% if forloop.counter == 1 %}border-yellow-400{% endif %}
+                      {% if forloop.counter == 2 %}border-gray-400{% endif %}
+                      {% if forloop.counter == 3 %}border-orange-400{% endif %}
+                    {% else %}
+                    border-transparent{% endif %}">
+                            <div class="flex flex-col items-start gap-1">  
+                                <div class="text-4xl font-bold flex items-center gap-2">
+                                    {% if forloop.counter == 1 %}
+                                        🥇 
+                                    {% elif forloop.counter == 2 %}
+                                        🥈 
+                                    {% elif forloop.counter == 3 %}
+                                        🥉 
+                                        {% else %}
+                                        {{ forloop.counter }}.
+                                    {% endif %}
+                                    <span class="display_name text-gray-600 font-black text-3xl dark:text-white " id="display_name-{{ forloop.counter0 }}">{{ participant.display_name }}</span>
+                                </div>
+                                
+                                <p data-score="{{ participant.score }}" data-last-score="{{ participant.last_score }}" class="dark:text-white text-gray-600 font-bold show-score text-xl" 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-md">+{{ participant.last_score }} Punkte</p>
+                            
+                               
+                               {% endif %}
+                                         </div>
+                                        </div>
+                              {% endif %}
+                              
+                               
+                     
+                         {% endif %}
+            
+                {% endfor %}
+            </div>
+        </div>  
+ 
+    {% if is_host %}
+        {% if is_last_question %}
+        {% if is_last_question and request.session.mode != "learn" %}
+               <button id="winner-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">
+                Siegerpodest
+            </button>
+         
+        {% else %}
+            <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>
+               {% endif %}
+        {% else %}
+                
+             <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 %}
+    {% endif %}    
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+{% if is_last_question %}
+
+{% endif %}  
+{% include 'play/game/common_scripts.html' %}
+{% if is_host %}
+{% include 'play/game/sound.html' %}
+{% endif %}
+
+
+
+
+<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 %}
+                            start();
+                            bounce();
+                                
+
+                            {% else %}
+                             start();
+                                {% endif %}
+    
+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';
+    const gameSocket = new WebSocket(
+        `${wsScheme}://${window.location.host}/ws/game/${joinCode}/`
+    );
+
+    gameSocket.onmessage = function(e) {
+        const data = JSON.parse(e.data);
+        if (data.type === 'game_state_update' && 
+    data.redirect_url && 
+    (data.action === 'next_question' || data.action === 'finish_game' || data.action === 'show_winner_podest'|| data.action === 'show_scoreboard')) {
+    window.location.href = data.redirect_url;
+}
+ else if (data.type === 'answer_stats') {
+            updateAnswerStats(data.stats);
+        }
+    };
+
+    gameSocket.onclose = function(e) {
+        // Normal closure (code 1000) oder Navigation zu einer anderen Seite (code 1001)
+        if (e.code === 1000 || e.code === 1001) {
+            console.log('Game socket closed normally');
+        } else {
+            console.error('Game socket closed unexpectedly', e.code);
+        }
+    };
+
+    {% if is_host %}
+    // Add click handlers for host buttons
+    {% if is_last_question %}
+    var finishButton = document.getElementById('finish-button');
+    if (finishButton) {
+        finishButton.addEventListener('click', function() {
+            gameSocket.send(JSON.stringify({
+                'type': 'finish_game',
+                'host_id': hostId
+            }));
+        });
+    }
+
+    var podestButton = document.getElementById('winner-button');
+    if (podestButton) {
+        podestButton.addEventListener('click', function() {
+            gameSocket.send(JSON.stringify({
+                'type': 'winner_podest',
+                'host_id': hostId
+            }));
+        });
+    }
+
+    {% else %}
+
+        var scoreboardButton = document.getElementById('scoreboard-button');
+    if (scoreboardButton) {
+        scoreboardButton.addEventListener('click', function() {
+            gameSocket.send(JSON.stringify({
+                'type': 'scoreboard',
+                'host_id': hostId
+            }));
+        });
+    }
+
+
+    var nextButton = document.getElementById('next-button');
+    if (nextButton) {
+        nextButton.addEventListener('click', function() {
+            gameSocket.send(JSON.stringify({
+                'type': 'next_question',
+                'host_id': hostId
+            }));
+        }, { once: true });
+    }
+    {% endif %}
+    {% endif %}
+
+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) {
+        gameSocket.send(JSON.stringify({
+            'type': 'get_answer_stats'
+        }));
+    };
+</script>
+{% 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/game/winner_podest.html

@@ -0,0 +1,594 @@
+{% extends 'base.html' %}
+
+{% block content %}
+      
+{% if is_last_question  and is_host %}
+<!-- Siegerpodest -->
+<div class="min-h-screen">
+<h2 class="w-full flex justify-center dark:text-white font-bold text-2xl ">&#127942; Siegerpodest</h2>
+<h4 class="w-full flex justify-center dark:text-white font-bold">Wer ist hier der Quiz-Master? </h4>
+
+{% with participant=participants.0 %}
+<div class="w-full flex justify-center">
+  <h1 id="winner-text" class="bg-gradient-to-r from-yellow-400 via-yellow-300 to-yellow-600 bg-clip-text text-transparent font-bold hidden animate-ping px-2 max-w-screen-sm text-center break-words">
+    Glückwunsch, {{ participant.display_name }}!
+  </h1>
+</div>
+{% endwith %}
+
+
+
+
+
+
+
+
+<div id="podest-container" class="w-full absolute bottom-0 flex justify-center items-end gap-2 md:gap-4 mb-2 dark:text-white">
+
+
+  <!-- Platz 2 links -->
+  {% with participant=participants.1 %}
+  <div class="flex flex-col shrink items-center break-words max-w-[6rem] md:max-w-[8rem] lg:max-w-[10rem]  overflow-x-auto  pt-10">
+    <span class="display_name p-2 text-gray-600 font-black text-xl md:text-2xl lg:text-3xl opacity-0 transition-opacity duration-1000 dark:text-white hyphens-auto" id="display_name-1">{{ participant.display_name }}</span>
+    <p data-score="{{ participant.score }}" data-last-score="{{ participant.last_score }}" class="opacity-0 transition-opacity duration-1000 dark:text-white font-bold show-score text-sm md:text-lg lg:text-xl text-gray-400" id="score-1">{{ participant.score }}</p>
+    <div data-final-height="33" id="podium-1" class="border-2 border-gray-200 transition-all duration-1000 ease-out overflow-hidden podium h-24 md:h-[12rem] lg:h-[16rem] w-24 md:w-32 lg:w-40 rounded-t-md font-bold text-center text-base shadow-lg bg-gradient-to-b from-gray-400 via-gray-300 to-gray-300 flex flex-col items-center justify-center text-black dark:text-white cursor-pointer leading-tight">
+      <span class="size-10 md:size-18 rounded-full bg-white text-black text-center flex items-center justify-center font-bold text-3xl md:text-5xl lg:text-6xl">🥈</span>
+    </div>
+  </div>
+  {% endwith %}
+
+  <!-- Platz 1 mitte -->
+  {% with participant=participants.0 %}
+  <div  class="flex flex-col shrink items-center break-words max-w-[6rem] md:max-w-[8rem] lg:max-w-[10rem]  overflow-x-auto  pt-10">
+    <div id="resultFirst"></div>
+    <span class="display_name p-2 text-gray-600 font-black text-xl md:text-3xl lg:text-4xl opacity-0 transition-opacity duration-1000 bg-gradient-to-r from-yellow-400 via-yellow-300 to-yellow-600 bg-clip-text text-transparent hyphens-auto" id="display_name-0">{{ participant.display_name }}</span>
+    <p data-score="{{ participant.score }}" data-last-score="{{ participant.last_score }}" class="opacity-0 transition-opacity duration-1000 dark:text-white text-yellow-500 font-bold show-score text-sm md:text-lg lg:text-xl" id="score-0">{{ participant.score }}</p>
+    <div data-final-height="45" id="podium-0" class="border-2 border-yellow-500 transition-all duration-1000 ease-out overflow-hidden podium h-32 md:h-[16rem] lg:h-[22rem] w-24 md:w-32 lg:w-40 rounded-t-md font-bold text-center text-base shadow-lg bg-gradient-to-b from-yellow-400 via-yellow-300 to-yellow-600 flex flex-col items-center justify-center text-black dark:text-white cursor-pointer leading-tight">
+      <span id="firstMedal" class="size-12 md:size-22 rounded-full bg-white text-black text-center flex items-center justify-center font-bold text-4xl md:text-6xl lg:text-7xl">🥇</span><br>
+    </div>
+  </div>
+  {% endwith %}
+
+  <!-- Platz 3 rechts -->
+  {% with participant=participants.2 %}
+  <div class="flex flex-col shrink items-center break-words max-w-[6rem] md:max-w-[8rem] lg:max-w-[10rem]  overflow-x-auto  pt-10">
+    <span class="display_name p-2 text-gray-600 font-black text-xl md:text-2xl lg:text-3xl dark:text-white opacity-0 transition-opacity duration-1000 hyphens-auto" id="display_name-2">{{ participant.display_name }}</span>
+    <p data-score="{{ participant.score }}" data-last-score="{{ participant.last_score }}" class="opacity-0 transition-opacity duration-1000 dark:text-white text-orange-500 font-bold show-score text-sm md:text-lg lg:text-xl" id="score-2">{{ participant.score }}</p>
+    <div data-final-height="25" id="podium-2" class="border-2 border-orange-500 transition-all duration-1000 ease-out overflow-hidden podium h-20 md:h-[10rem] lg:h-[14rem] w-24 md:w-32 lg:w-40 rounded-t-md font-bold text-center text-base shadow-lg bg-gradient-to-b from-orange-500 via-orange-400 to-orange-700 flex flex-col items-center justify-center text-black dark:text-white cursor-pointer leading-tight">
+      <span class="size-10 md:size-18 rounded-full bg-white text-black text-center flex items-center justify-center font-bold text-3xl md:text-5xl lg:text-6xl">🥉</span>
+    </div>
+  </div>
+  {% endwith %}
+
+</div>
+
+
+</div>
+<div id="thanks" class="hidden -mt-10">
+<div class="w-full flex justify-center">
+  <h1 class="bg-gradient-to-r from-yellow-400 via-yellow-300 to-yellow-600 bg-clip-text text-transparent font-bold  px-2 max-w-screen-sm text-center break-words">
+    Vielen Dank fürs Spielen!
+  </h1>
+</div>
+
+<div class="flex justify-center">
+   <button id="finish-button" class=" w-3/4 md:w-1/2 bottom-0 left-0  p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
+                Quiz beenden
+            </button>
+</div>
+</div>
+
+{% else %}
+
+
+<div class="container mx-auto px-4">
+
+
+  {% with participant=participants.0 %}
+<div class="w-full flex justify-center">
+  <h1 id="winner-text" class="bg-gradient-to-r from-yellow-400 via-yellow-300 to-yellow-600 bg-clip-text text-transparent font-bold hidden animate-ping px-2 max-w-screen-sm text-center break-words">
+    Glückwunsch, {{ participant.display_name }}!
+  </h1>
+</div>
+{% endwith %}
+
+    <div class="bg-white rounded-lg shadow-md p-6 mb-6 dark:bg-transparent dark:text-white">
+       <h1 id="result-text" class="text-3xl w-full flex justify-center dark:text-white font-bold">&#127942; Wer ist hier der Quiz-Master?</h1>
+
+        <h4 id="info" class="mt-4 w-full flex justify-center dark:text-white font-bold">Nach der Siegerehrung siehst du deine Platzierung!</h4>
+       
+        
+
+        <div id="participant-score" class="mb-6 ">
+  
+
+            <div id="scoreboard" class="leading-relaxed">
+                {% for participant in participants %}
+                {% if request.session.mode != "learn"  %}
+                    {% if participant == my_participant or is_host %}
+                        <div id="player_score" class="hidden dark:bg-transparent mt-2 shadow-sm p-4 bg-gray-100 rounded-lg border-2 border {% if forloop.counter <= 3 %}
+                      {% if forloop.counter == 1 %}border-yellow-400{% endif %}
+                      {% if forloop.counter == 2 %}border-gray-400{% endif %}
+                      {% if forloop.counter == 3 %}border-orange-400{% endif %}
+                    {% else %}
+                    border-transparent{% endif %}">
+                            <div class="flex flex-col items-start gap-1">  
+                                <div class="text-4xl  font-bold flex items-center gap-2">
+                                    {% if forloop.counter == 1 %}
+                                        🥇 
+                                    {% elif forloop.counter == 2 %}
+                                        🥈 
+                                    {% elif forloop.counter == 3 %}
+                                        🥉 
+                                        {% else %}
+                                        {{ forloop.counter }}.
+                                    {% endif %}
+                                    <span class="display_name text-gray-600 font-black text-3xl dark:text-white " 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="dark:text-white text-gray-600 font-bold show-score text-xl" id="score-{{ forloop.counter0 }}">{{ participant.score }} Punkte</p> 
+                      
+                              {% endif %}
+                              
+                               
+                               </div>
+
+                        </div>
+                        
+                    {% endif %}
+                {% endfor %}
+            </div>
+        </div>
+
+
+{% endif %}
+
+
+
+<style>
+.podium {
+  height: 0;
+ 
+}
+.spotlight-wrapper::before {
+  content: "";
+  position: absolute;
+  top: -800px;         /* Start oben außerhalb */
+  left: 50%;
+  transform: translateX(-50%);
+  width: 15rem;
+  height: 700px;
+  pointer-events: none;
+
+  background: radial-gradient(
+    ellipse 60% 100% at center bottom,
+    rgba(254, 254, 178, 0.9) 0%,
+    rgba(252, 236, 132, 0.7) 25%,
+    rgba(255, 230, 130, 0.5) 55%,
+    rgba(255, 210, 100, 0.1) 85%,
+    rgba(255, 180, 70, 0) 100%
+  );
+
+  filter: blur(24px) brightness(1.2);
+  opacity: 0;            /* Start unsichtbar */
+  animation: slideInOutSpotlight 6s ease forwards , fadeOutSpotlight 6s 6s ease forwards;  /* Dauer anpassen */
+  z-index: -1;
+
+  box-shadow: 0 0 60px 30px rgba(255, 240, 150, 0.15);
+}
+
+@keyframes slideInOutSpotlight {
+  0% {
+    top: -800px;
+    opacity: 0;
+  }
+  20% {
+    top: -640px;   /* Endposition */
+    opacity: 1;
+  }
+
+  100% {
+     top: -640px;
+    opacity: 1;
+  
+  }
+}
+
+
+@keyframes fadeOutSpotlight {
+  0% {
+    top: -640px;
+    opacity: 1;
+    
+  }
+
+
+  100% {
+     top: -640px;
+    opacity: 0;
+  }
+}
+
+
+
+</style>
+
+
+
+{% endblock %}
+</div>
+
+{% block extra_js %}
+{% if is_last_question %}
+
+<script>
+
+  document.addEventListener('DOMContentLoaded', () => {
+    
+    const animationDuration = 1500; // Dauer der Wachstumsanimation
+    const waitTime=3000;
+    const podiums = [
+    
+        { id: 'podium-2', delay: 2000 }, // immer vorheriges von Bedeutung
+        { id: 'podium-1', delay: 2000 },
+        { id: 'podium-0', delay: 0 },
+    ];
+
+
+    let totalDelay = 0;
+
+    podiums.forEach(({ delay }) => {
+    totalDelay += delay + waitTime;
+});
+const totalAnimationTime = totalDelay + animationDuration;
+    setTimeout(() => {
+        show_score();
+    }, totalAnimationTime);
+
+    totalDelay = 0;
+
+
+   
+    podiums.forEach(({ id, delay }) => {
+     
+        const podium = document.getElementById(id);
+        if (!podium) return;
+
+        const finalHeight = parseInt(podium.dataset.finalHeight) || 160;
+        podium.style.transition = `height ${animationDuration}ms ease-in-out`;
+        podium.style.height = '0px';
+
+        // Wachstum starten nach gesamter Wartezeit
+        setTimeout(() => {
+            podium.style.height = `${finalHeight}vh`;
+        }, totalDelay);
+
+        // Name & Score anzeigen nach Balken-Animation
+        setTimeout(() => {
+            
+              if (id === 'podium-0') {
+            let name = document.getElementById(`display_name-0`);
+            let score = document.getElementById(`score-0`);
+            let winnerText= document.getElementById(`winner-text`);
+          
+            let thanks= document.getElementById(`thanks`);
+                // 1. Lichtkegel anzeigen
+if (resultFirst) {
+  resultFirst.classList.add('spotlight-wrapper');
+  score.classList.add('opacity-0');
+  name.classList.add('opacity-0');
+}
+
+
+
+// 2. Nach kurzer Wartezeit Name & Score anzeigen
+setTimeout(() => {
+  
+  if (name) {
+    name.classList.add('opacity-100', 'animate-bounce','spotlight-text'); // z. B. sichtbar + Effekt
+  }
+
+    if (winnerText) {
+    winnerText.classList.remove('hidden'); 
+  }
+ 
+      if (thanks) {
+    thanks.classList.remove('hidden'); 
+  }
+
+  if (score) {
+    score.classList.add('opacity-100'); // z. B. sichtbar + Effekt
+  }
+ triggerConfetti();
+
+}, 2000); 
+
+   
+
+                
+            
+            
+                  
+               
+                document.body.style.overflow = 'auto';
+                return;
+            }
+          
+            const index = id.split('-')[1];
+            const name = document.getElementById(`display_name-${index}`);
+            const score = document.getElementById(`score-${index}`);
+
+            document.body.style.overflow = 'hidden';
+ 
+            if (name && id !== 'podium-0') setTimeout(() => {
+            name.classList.add('opacity-100');
+            name.classList.add('animate-bounce');
+            
+            if (score) score.classList.add('opacity-100');
+            }, waitTime); 
+
+        }, totalDelay + animationDuration);
+          
+          
+        totalDelay += delay + waitTime; // wichtig: aufsummieren
+        
+
+    });
+
+
+
+});
+    
+    // Hilfsfunktion für Pausen
+    function sleep(ms) {
+      return new Promise(resolve => setTimeout(resolve, ms));
+    }
+  
+   
+    function triggerConfetti() {
+      const end = Date.now() + 30 * 1000;
+      (function frame() {
+        confetti({ particleCount: 2, angle: 60, spread: 55, origin: { x: 0 } });
+        confetti({ particleCount: 2, angle: 120, spread: 55, origin: { x: 1 } });
+        if (Date.now() < end) requestAnimationFrame(frame);
+      })();
+    }
+
+        function show_score() {
+
+    let player_score=document.getElementById('player_score');
+    player_score.classList.remove('hidden');
+    info=document.getElementById('info');
+    info.classList.add('hidden');
+    resultText=document.getElementById('result-text');
+    resultText.textContent="Dein Ergebnis";
+    
+
+
+    const myName = "{{ my_participant.id|escapejs }}";
+    const firstPlaceName = "{{ participants.0.id|escapejs }}";
+
+    if (myName === firstPlaceName) {
+        let winnerText= document.getElementById(`winner-text`);
+        winnerText.classList.remove('hidden');
+        triggerConfetti();
+    }
+   
+
+
+    }
+    
+
+
+
+  </script>
+{% endif %}  
+{% include 'play/game/common_scripts.html' %}
+{% if is_host %}
+{% include 'play/game/sound.html' %}
+{% endif %}
+
+
+
+
+<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 %}
+                            start();
+                            bounce();
+                                
+
+                            {% else %}
+                             start();
+                                {% endif %}
+    
+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';
+    const gameSocket = new WebSocket(
+        `${wsScheme}://${window.location.host}/ws/game/${joinCode}/`
+    );
+
+    gameSocket.onmessage = function(e) {
+        const data = JSON.parse(e.data);
+        if (data.type === 'game_state_update' && 
+    data.redirect_url && 
+    (data.action === 'next_question' || data.action === 'finish_game' || data.action === 'show_winner_podest')) {
+    window.location.href = data.redirect_url;
+}
+ else if (data.type === 'answer_stats') {
+            updateAnswerStats(data.stats);
+        }
+    };
+
+    gameSocket.onclose = function(e) {
+        // Normal closure (code 1000) oder Navigation zu einer anderen Seite (code 1001)
+        if (e.code === 1000 || e.code === 1001) {
+            console.log('Game socket closed normally');
+        } else {
+            console.error('Game socket closed unexpectedly', e.code);
+        }
+    };
+
+    {% if is_host %}
+    // Add click handlers for host buttons
+    {% if is_last_question %}
+    var finishButton = document.getElementById('finish-button');
+    if (finishButton) {
+        finishButton.addEventListener('click', function() {
+            gameSocket.send(JSON.stringify({
+                'type': 'finish_game',
+                'host_id': hostId
+            }));
+        });
+    }
+
+    var podestButton = document.getElementById('winner-button');
+    if (podestButton) {
+        podestButton.addEventListener('click', function() {
+            gameSocket.send(JSON.stringify({
+                'type': 'winner_podest',
+                'host_id': hostId
+            }));
+        });
+    }
+
+    {% else %}
+
+    var nextButton = document.getElementById('next-button');
+    if (nextButton) {
+        nextButton.addEventListener('click', function() {
+            gameSocket.send(JSON.stringify({
+                'type': 'next_question',
+                'host_id': hostId
+            }));
+        }, { once: true });
+    }
+    {% endif %}
+    {% endif %}
+
+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) {
+        gameSocket.send(JSON.stringify({
+            'type': 'get_answer_stats'
+        }));
+    };
+</script>
+
+{% endblock %}

django/templates/play/initialize_participant.html

@@ -1,9 +1,10 @@
 {% extends 'base.html' %}
 {% load static %}
 
+
 {% block content %}
 <div class="container mx-auto px-4 py-8">
-    <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6">
+    <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6 dark:bg-transparent dark:border-2 dark:text-white">
         <h1 class="text-2xl font-bold mb-6 text-center text-blue-600">Spieler einrichten</h1>
         
         <div class="text-center mb-6">
@@ -17,20 +18,20 @@
             {% csrf_token %}
             <input type="hidden" name="join_code" value="{{join_code}}">
             
-            <div class="bg-gray-50 p-4 rounded-lg mb-4">
-                <p class="text-sm text-gray-600 mb-2">Wähle einen Anzeigenamen für das Spiel:</p>
+            <div class="bg-gray-50 p-4 rounded-lg mb-4 dark:bg-transparent">
+                <p class="text-sm text-gray-600 mb-2 dark:text-white">Wähle einen Anzeigenamen für das Spiel:</p>
                 <input type="text" 
                        name="display_name" 
                        required
                        maxlength="20"
                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                        placeholder="Dein Spielername">
-                <p class="text-xs text-gray-500 mt-2">Maximal 20 Zeichen</p>
+                <p class="text-xs text-gray-500 mt-2 dark:text-white">Maximal 20 Zeichen</p>
             </div>
 
             <div class="flex justify-center space-x-4">
                 <a href="/" 
-                   class="px-6 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors duration-200">
+                   class="px-6 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors duration-200 dark:bg-transparent dark:hover:bg-[#2a2f3a]">
                     Abbrechen
                 </a>
                 <button type="submit"

django/templates/play/join_game.html

@@ -1,13 +1,13 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<div class="sm:grid sm:place-items-center sm:min-h-[calc(100vh-5rem)] flex justify-center py-6 m-2">
-    <div class="max-w-md w-full p-8 rounded-2xl border-2 border-blue-400 bg-white">
+<div class="grid place-items-center min-h-[calc(100vh-5rem)] flex justify-center py-6 m-2">
+    <div class="max-w-md w-full p-8 rounded-2xl border-2 border-blue-400 bg-white dark:bg-transparent dark:text-white">
         <h1 class="text-2xl text-center font-bold mb-4 ">Spiel beitreten</h1>
         <form action="{% url 'play:join_game' %}" method="post" class="flex flex-col gap-4">
             {% csrf_token %}
             <div class="flex gap-3 items-center justify-center">
-                <input type="number" name="game_code" placeholder="123456" maxlength="6" class="w-32 p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100 text-center tracking-wider"  autofocus>
+                <input type="number" name="game_code" placeholder="123456" maxlength="6" class="w-32 p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100 text-center tracking-wider text-black"  autofocus>
                 <button type="submit" class="h-12 px-6 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-blue-700 active:scale-95 group" disabled>
                     <span class="hidden sm:block">Beitreten</span>
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 transition-transform group-hover:translate-x-1">

django/templates/play/lobby.html

@@ -3,22 +3,27 @@
 {% block content %}
 <div class="container mx-auto px-4 py-8">
 
-    <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6">
+    <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6 dark:bg-transparent dark:text-white">
         <!-- Quiz Info -->
         <div class="text-center mb-8">
-            <h3 class="text-xl text-gray-600 mb-2">{{ quiz.name }}</h3>
+            <h3 class="text-xl text-gray-600 mb-2 dark:text-white">{{ quiz.name }}</h3>
             {% if request.session.mode != "learn" %}
-            <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>
-                <p class="text-sm text-blue-600 mt-1">Spiel-Code</p>
+            {% if host_id %}
+            <div class="bg-blue-100 rounded-lg p-4 mb-4 dark:bg-transparent">
+                <h1 class="text-4xl font-bold text-blue-800 dark:text-white">{{ 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 dark:text-white">Spiel-Code</p>
             </div>
         </div>
         {% endif %}
+        {% endif %}
 
         <!-- Participant Info -->
         {% if participant %}
         <div class="mb-6 text-center">
-            <div class="inline-flex items-center bg-green-100 px-4 py-2 rounded-full">
+            <div class="inline-flex items-center bg-green-100 px-4 py-2 rounded-full dark:text-black">
                 <span class="w-2 h-2 bg-green-500 rounded-full mr-2  "></span>
                 <span>Angemeldet als <b>{{ participant.display_name }}</b></span>
             </div>
@@ -26,7 +31,7 @@
         {% endif %}
 
         <!-- Participants List -->
-        <div class="mb-6 overflow-y-scroll max-h-96">
+        <div class="mb-6 overflow-y-scroll max-h-96 overflow-x-hidden">
             <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" />
@@ -34,7 +39,7 @@
                 Teilnehmer
             </h3>
             <ul id="participants-list" class="space-y-2 max-h-60 ">
-                <li class="text-gray-500 p-3 bg-gray-50 rounded-lg text-center">Warte auf Teilnehmer...</li>
+                <li class=" p-3 bg-gray-50 rounded-lg text-center dark:bg-transparent">Warte auf Teilnehmer...</li>
             </ul>
         </div>
 
@@ -243,7 +248,7 @@
         }
 
         if (!participants || participants.length === 0) {
-            list.innerHTML = '<li class="text-gray-500 p-3 bg-gray-50 rounded-lg text-center">Noch keine Teilnehmer...</li>';
+            list.innerHTML = '<li class="text-gray-500 p-3 bg-gray-50 rounded-lg text-center dark:bg-transparent">Noch keine Teilnehmer...</li>';
             return;
         }
 
@@ -293,13 +298,13 @@
                                     '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" ' +
                                     'd="M6 18L18 6M6 6l12 12"/>' +
                                     '</svg>' +
-                                    '<span class="absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 ' +
+                                    '<span class="absolute pr-8 -top-8  left-1/2 transform -translate-x-1/2 px-2 py-1 ' +
                                     'bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 ' +
                                     'transition-opacity duration-200 whitespace-nowrap">Spieler kicken</span>' +
                                     '</button>';
                     }
 
-                    return '<li class="p-3 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition duration-200 flex items-center justify-between animate-fade-in">' +
+                    return '<li class="dark:bg-transparent p-3 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition duration-200 flex items-center justify-between animate-fade-in">' +
                            '<div class="flex items-center">' +
                            '<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">' +
                            '<span class="text-blue-600 font-bold">' + initial.toUpperCase() + '</span>' +

django/templates/play/select_mode.html

@@ -4,7 +4,7 @@
 
 <div class="grid place-content-center md:h-screen h-150 w-full -z-50 top-0 p-8 ">
     <div class="rounded-md rounded-xl shadow-lg border-3 border-blue-100 p-10">
-       <span class="flex justify-center font-bold p-4 text-center text-1xl lg:text-2xl">Bitte wählen Sie einen Spielmodus aus:</span> 
+       <span class="flex justify-center font-bold p-4 text-center text-1xl lg:text-2xl dark:text-white">Bitte wählen Sie einen Spielmodus aus:</span> 
 
         <div class="grid sm:grid-cols-2 place-items-stretch text-center gap-4 p-4">
             

django/templates/registration/delete_account_confirm.html

@@ -3,15 +3,15 @@
 {% block content %}
 <div class="container mx-auto px-4">
     <div class="max-w-lg mx-auto mt-10">
-        <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md">
+        <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md dark:text-white dark:bg-transparent">
             <div class="text-center">
                 <svg class="mx-auto h-12 w-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                 </svg>
                 
-                <h2 class="mt-4 text-xl font-bold text-gray-900">Löschen bestätigen</h2>
+                <h2 class="mt-4 text-xl font-bold text-gray-900 dark:text-white">Löschen bestätigen</h2>
                 
-                <p class="mt-2 text-sm text-gray-600">
+                <p class="mt-2 text-sm text-gray-600 dark:text-white">
                         Möchten Sie ihren Account wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.
                 </p>
             </div>

django/templates/registration/password_change_form.html

@@ -3,7 +3,7 @@
 {% block title %}Passwort ändern{% endblock %}
 {% block content %}
     <div class="grid place-content-center h-120 mt-12 mb-12 ">
-    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
+    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90 dark:text-white!">
         <h2 class="text-2xl text-center p-4 font-black">Passwort ändern</h2>
         <form class="space-y-4" method="post">
             {% if form.errors %}
@@ -21,17 +21,17 @@
             <div  class="register">
                 
             {{ form.old_password.label_tag }} 
-            <input type="password" name="old_password" placeholder="ALTES PASSWORT" />
+            <input type="password" name="old_password" placeholder="ALTES PASSWORT" class="dark:text-black" />
             
         </div>
             
         <div class="register">
             {{ form.new_password1.label_tag }} 
-            <input type="password" name="new_password1" placeholder="NEUES PASSWORT" /> 
+            <input type="password" name="new_password1" placeholder="NEUES PASSWORT"  class="dark:text-black" /> 
         </div>
             <div class="register">
             {{ form.new_password2.label_tag }}  
-            <input type="password" name="new_password2" placeholder="NEUES PASSWORT WIEDERHOLEN" /> 
+            <input type="password" name="new_password2" placeholder="NEUES PASSWORT WIEDERHOLEN"  class="dark:text-black" /> 
         </div>
             <button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200" type="submit">Bestätigen</button>
             <button class="text-center text-sm w-full mt-2 font-light text-blue-600"><a href="{% url 'accounts:home' %}" class="register_link">Doch nicht ändern?</a></button>

django/templates/registration/password_reset_complete.html

@@ -3,7 +3,7 @@
 {% block title %}Passwort zurückgesetzt{% endblock %}
 {% block content %}
     <div class="grid place-content-center h-120 mt-12 mb-12 ">
-    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
+    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90 dark:text-white">
         <h2 class="text-2xl text-center p-4 font-black">Passwort zurückgesetzt</h2>
         <div class="space-y-4">
             Das Passwort wurde erfolgreich zurückgesetzt! Sie können sich nun mit dem neuen Passwort anmelden!

django/templates/registration/password_reset_confirm.html

@@ -4,7 +4,7 @@
 {% block content %}
     <div class="grid place-content-center h-120 mt-12 mb-12 ">
     <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
-        <h2 class="text-2xl text-center p-4 font-black">Passwort zurücksetzen</h2>
+        <h2 class="text-2xl text-center p-4 font-black dark:text-white">Passwort zurücksetzen</h2>
         {% if validlink %} 
         <form class="space-y-4" method="post">
             {% if form.errors %}
@@ -21,11 +21,12 @@
             {% csrf_token %}
             
         <div class="register">
-            {{ form.new_password1.label_tag }}  
+            
+            <span class="dark:text-white">{{ form.new_password1.label_tag }}   </span> 
             <input type="password" name="new_password1" placeholder="NEUES PASSWORT" /> 
         </div>
             <div class="register ">
-            {{ form.new_password2.label_tag }}  
+            <span class="dark:text-white">{{ form.new_password2.label_tag }}  </span>
             <input type="password" name="new_password2" placeholder="NEUES PASSWORT WIEDERHOLEN" /> 
 
         </div>

django/templates/registration/password_reset_done.html

@@ -4,12 +4,12 @@
 
 {% block content %}
 <div class="grid place-content-center h-120 mt-12 mb-12">
-    <div class="w-80 p-6 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90 text-center">
-        <h2 class="text-2xl font-black mb-4">E-Mail wurde gesendet</h2>
-        <p class="text-gray-700 mb-6">
+    <div class="w-80 p-6 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90 text-center dark:text-white">
+        <h2 class="text-2xl font-black mb-4 dark:text-white">E-Mail wurde gesendet</h2>
+        <p class="text-gray-700 mb-6 dark:text-white">
             Wenn ein Konto mit dieser E-Mail-Adresse existiert, haben wir dir eine Nachricht mit einem Link zum Zurücksetzen des Passworts gesendet.
        
-        </p><p class="text-gray-700 mb-6 font-bold">&nbsp; Tipp: Gegebenenfalls Spam überprüfen.</p>
+        </p><p class="text-gray-700 mb-6 font-bold dark:text-white">&nbsp; Tipp: Gegebenenfalls Spam überprüfen.</p>
         
         
         <a href="{% url 'accounts:login' %}" class="block w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200">Zur Anmeldung</a>

django/templates/registration/password_reset_form.html

@@ -3,7 +3,7 @@
 {% block title %}Passwort ändern{% endblock %}
 {% block content %}
     <div class="grid place-content-center h-120 mt-12 mb-12 ">
-    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
+    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90 dark:text-white">
         <h2 class="text-2xl text-center p-4 font-black">Passwort zurücksetzen</h2>
         <form class="space-y-4" method="post">
             Gib hier deine E-Mail an und erhalte eine E-Mail, um das Passwort zurückzusetzen.
@@ -23,7 +23,7 @@
             
         <div class="register">
             {{ form.email.label_tag }}
-            <input type="email" name="email" placeholder="E-MAIL" /> 
+            <input type="email" name="email" placeholder="E-MAIL" class="dark:text-black" /> 
         </div>
         
 

requirements.txt

@@ -7,3 +7,10 @@ whitenoise~=6.6.0  # Static file serving
 django-cleanup
 redis
 channels_redis
+python-dotenv    # Production server safety
+qrcode~=7.4.2
+reportlab~=4.2.0
+pip-licenses ~= 5.0.0
+requests
+requests
+geopy