Quiz_updatet_date

Resolve "Zeitangabe für Quizze"

Closes #143

See merge request enrichment-2024/qivip!98

.gitignore

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

README.md

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

django/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',)
 

django/library/forms.py

@@ -1,5 +1,5 @@
 from django import forms
-from .models import QivipQuiz, QivipQuestion
+from .models import QivipQuiz, QivipQuestion, QuizCategory
 
 class QuizForm(forms.ModelForm):
     class Meta:
@@ -19,13 +19,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'
+        }))

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/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/
@@ -59,6 +59,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 +102,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 +115,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,7 +142,7 @@ 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)

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'),

django/library/views.py

@@ -14,6 +14,7 @@ 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
 
 
@@ -21,13 +22,183 @@ 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 +214,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 +241,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 +273,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 +292,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 +303,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 +320,7 @@ def favorite_quiz(request, pk):
         
         
 
+
         if favorite.favorite==True:
             favorite.favorite_date = timezone.now()        
             favorite.save()
@@ -167,6 +335,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 +348,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,7 +369,10 @@ def new_quiz(request):
 
             
             quiz.user_id = request.user
+
+
             #quiz.creator = request.user
+            if form.has_changed():
                 quiz.save()
             #form.save_m2m()  # Speichert die Many-to-Many Beziehungen (Tags)
             return redirect('library:detail_quiz', pk=quiz.pk)
@@ -206,8 +387,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,8 +406,13 @@ 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()
+            if form.has_changed():
                 form.save()
             for img in QuizImage.objects.all():
                 try:
@@ -260,7 +451,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 +464,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 +489,11 @@ def copy_quiz(request, pk):
     new_quiz.base_quiz_id = pk
     new_quiz.rating_count = 0
     new_quiz.average_rating = 3.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
@@ -404,6 +603,11 @@ 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)
@@ -569,7 +773,10 @@ def edit_question(request, pk):
             
         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 +791,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/play/consumers.py

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

django/play/consumers/game.py

@@ -188,7 +188,7 @@ class GameConsumer(AsyncWebsocketConsumer):
             question_data = json.loads(current_question.data)
             print(answer_index)
             try:
-                #if answer_index >= 0 :  # -1 means timeout
+                if answer_index >= 0 :  # -1 means timeout
                     is_correct = question_data['options'][answer_index]['is_correct']
                     print(is_correct)
             except:
@@ -233,6 +233,7 @@ class GameConsumer(AsyncWebsocketConsumer):
                 answer_obj.time_remaining = time_remaining
                 answer_obj.save()
             
+            participant.last_score = score
             participant.score += score
             participant.last_answer_correct = is_correct
             participant.save()
@@ -263,6 +264,7 @@ class GameConsumer(AsyncWebsocketConsumer):
 
     @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 +276,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

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/models.py

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

django/play/views.py

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

django/templates/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">
+  
+  <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 ">Seite nicht gefunden</h2>
+  <p class="text-lg text-gray-600 mb-6">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

@@ -5,7 +5,7 @@
 
 <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="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,6 +16,24 @@
             </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">
+  
+  <div class="flex items-center gap-2 text-xl font-semibold text-blue-800">
+    <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">
+    <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">

django/templates/accounts/register.html

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

django/templates/homepage/home.html

@@ -4,7 +4,7 @@
 <div class="grid place-content-center md:h-screen h-150 w-full -z-50 top-0 p-4">
     <div class="text-center">
         <h2 class="font-bold md:text-8xl text-6xl md:mb-8 text-blue-600">qivip</h2>
-        <h3 class="mt-4 italic font-extralight sm:text-2xl text-md">Interaktives Lernen neu definiert.</h3>
+        <h3 class="mt-4 italic font-extralight sm:text-4xl text-md">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">
         <a class="qp-a-button bg-green-500 text-white" href="{% url 'play:join_game' %}">Teilnehmen</a>
@@ -22,7 +22,7 @@
 
 </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>
@@ -42,126 +42,17 @@
    
 </div>
 
-
+{% for faq in faqs %}
 <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 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/library/detail_quiz.html

@@ -88,7 +88,9 @@
     <div class="bg-white rounded-lg shadow-md border-blue-600 border-2 rounded-xl shadow-md">
         <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 }}" 
@@ -119,7 +121,10 @@
             <div class="divide-y divide-gray-200">
                 {% for question in questions %}
                 
+
+                
                     <div class="w-full rounded-xl p-4 hover:bg-gray-50">
+                        <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">
                             
@@ -134,9 +139,13 @@
                                     {% 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 %}
+                                      
+                                            
                                             <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"/>
@@ -151,7 +160,13 @@
                                             </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">
@@ -162,8 +177,12 @@
                                             </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">
@@ -172,6 +191,10 @@
                                 </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 %}
 
@@ -230,11 +253,28 @@
     {% endif %}
 </div>
 
-<div class="flex justify-end">  
+<div class="flex flex-col max-w-full">
+    Credits: 
     {% 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-gray-600 mb-2 w-full break-words">
+            <span class="font-bold break-words">{{ quiz.credits }}</span>
+        </p>
     {% endif %}
 </div>
 
+<div class="flex flex-col max-w-full">
+    <ul class="space-y-2">
+        {% for question in questions %}
+            {% if question.credits %}
+                <li class="text-gray-600 mb-2 w-full break-words font-bold break-words">
+                    {{ question.credits }}
+                    <span class="font-medium text-gray-500 break-words">(Frage: {{ forloop.counter }})</span>
+                </li>
+            {% endif %}
+        {% endfor %}
+    </ul>
 </div>
+
+</div>
+
 {% endblock %}

django/templates/library/form.html

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

django/templates/library/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="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="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">
+      <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">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"
+      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">
+      {{ form.min_amount_questions.value|default_if_none:0 }} Frage(n)
+    </span>
+    <br>
+    <span class="text-xs text-gray-600"> 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">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">
+      {{ 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">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="space-y-2">
+        <label class="block text-sm font-medium text-gray-700">Kategorie</label>
+        {{ form.categories }}
+
+    </div> 
+       <div class="space-y-2">
+        <label class="block text-sm font-medium text-gray-700">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,70 +13,45 @@
 
 {% 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>
-
-
-
-{% if user.is_authenticated %}
+<!-- Alle -->
 <div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
+    {% if user.is_authenticated %}
+
+      <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">
+        <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="my-quizzes" class="text-2xl font-bold text-gray-900">Eigene Quiz</h2>
+    <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 my_quizzes %}
+    {% 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">
@@ -89,14 +64,15 @@
           </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">
            
-            <a href="{% url 'library:favorite_quiz' quiz.pk %}">
+            <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">
               <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>
@@ -105,398 +81,7 @@
           
           {% 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 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 %}">
+          <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>
@@ -541,6 +126,8 @@
               <span class="text-gray-800">{{ quiz.status }}</span>
             </div>
             
+
+
             <!-- Rating -->
             <div class="flex items-center gap-1">
               {% if quiz.rating_count > 0 %}
@@ -557,20 +144,31 @@
               {% 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 "><span class="font-medium">{{ 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">
@@ -602,10 +200,10 @@
   </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 +211,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">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" />
@@ -630,42 +228,54 @@
 <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>
+{% 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,297 @@
+{% 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">
+
+
+      <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">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">
+           
+            <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">
+              <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 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>
+
+        
+
+        <!-- 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 %}-->
+
+                    <!-- 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 "><span class="font-medium">{{ 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">
+                <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="?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="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">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,294 @@
+{% 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">
+
+      <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">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">
+           
+            <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">
+              <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 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>
+
+        
+
+        <!-- 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 %} 
+        -->
+
+
+          <!-- 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 "><span class="font-medium">{{ 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">
+                <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 }}&{{ 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">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">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_input.html

@@ -25,7 +25,7 @@
             </div>
 
             {% if image %}
-            <img src="{{ image.image.url }}" style="max-width: 500px;" alt="Bild der Frage">
+            <img src="{{ image.image.url }}" style="max-width: 100px;" alt="Bild der Frage">
             <label for="reset_image">
                 <input type="checkbox" name="reset_ques_image" id="reset_ques_image">
                 Bild zurücksetzen
@@ -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">Credits</label>
+                <div class="mt-1">
+                    <textarea name="credits" rows="4"
+                           class="shadow-sm 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_multiple_choice.html

@@ -25,7 +25,7 @@
 
             
             {% if image %}
-            <img src="{{ image.image.url }}" style="max-width: 500px;" alt="Bild der Frage">
+            <img src="{{ image.image.url }}" style="max-width: 100px;" alt="Bild der Frage">
             <label for="reset_image">
                 <input type="checkbox" name="reset_ques_image" id="reset_ques_image">
                 Bild zurücksetzen
@@ -93,6 +93,38 @@
                                 </svg>
                             </button>
                         </div>
+                        <div class="flex items-center space-x-3">
+                            <textarea name="option_3" 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>
+                            <label class="inline-flex items-center">
+                                <input type="checkbox" name="correct_3" 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>
+                            </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="shadow-sm 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: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>
+                            </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>
                     {% endif %}
                 </div>
                 <button type="button" onclick="addOption()" 
@@ -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">Credits</label>
+                <div class="mt-1">
+                    <textarea name="credits" rows="4"
+                           class="shadow-sm 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_true_false.html

@@ -25,7 +25,7 @@
             </div>
 
             {% if image %}
-            <img src="{{ image.image.url }}" style="max-width: 500px;" alt="Bild der Frage">
+            <img src="{{ image.image.url }}" style="max-width: 100px;" alt="Bild der Frage">
             <label for="reset_image">
                 <input type="checkbox" name="reset_ques_image" id="reset_ques_image">
                 Bild zurücksetzen
@@ -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">Credits</label>
+                <div class="mt-1">
+                    <textarea name="credits" rows="4"
+                           class="shadow-sm 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/_nav.html

@@ -10,7 +10,7 @@
 
         <!-- 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">
                 <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">
                 <button class="py-1 text-blue-600">
@@ -51,7 +51,7 @@
     <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">
+            <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">
                     <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">

django/templates/play/game/question_host.html

@@ -1,21 +1,42 @@
 {% extends 'base.html' %}
 {% block content %}
 
-{% if request.session.mode == "learn" %}
+
 
 <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">
+            weiter
+        </button>
+    </div>
+    <div id="form_host" class="bg-white rounded-lg shadow-md p-4 mb-6">
+        <div class="flex justify-between mb-2">
+            <div class="flex gap-1 text-sm"><p class="text-sm">Frage</p>
+                <p class="text-gray-700 font-bold text-sm">{{ question_index|add:1 }}</p>
+                <p class="text-sm">von</p>
+                <p class="text-gray-700 font-bold text-sm">{{ 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"></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,24 +44,38 @@
         <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" %}
         <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 %}>
@@ -73,6 +108,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 }}';
@@ -96,6 +132,7 @@
                    data.action === 'show_scores' && 
                    data.redirect_url) {
             window.location.href = data.redirect_url;
+            submitAnswer( -1 );
         }
     };
 
@@ -123,6 +160,7 @@
         }
     }
     
+
     function advanceToScores() {
         // Show correct answers and answer counts
         var correctOptions = document.querySelectorAll('[data-correct="True"]');
@@ -150,9 +188,14 @@
     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();

django/templates/play/game/question_participant.html

@@ -8,18 +8,48 @@
         </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="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">{{ question_index|add:1 }}</p>
+                <p class="text-sm">von</p>
+                <p class="text-gray-700 font-bold text-sm">{{ total_questions }}</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>
+        
+            <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  != "input" %}
         <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 }}"
                     onclick="submitAnswer({{ forloop.counter0 }});">
                     <p class="text-lg">{{ option.value }}</p>
@@ -47,7 +77,7 @@
     let hasAnswered = false;
     const joinCode = '{{ quiz_game.join_code }}';
     const participantId = '{{ participant.participant_id }}';
-    const questionStartTime = {{ start_time }};
+    const questionStartTime = Date.now();
     const questionDuration = '{{ current_question.time_per_question }}'*1000; //Zeit pro Frage (indviduell eingestellt)
     const gameSocket = initializeGameSocket(joinCode);
 
@@ -59,6 +89,7 @@
             data.action === 'show_scores' && 
             data.redirect_url) {
             window.location.href = data.redirect_url;
+            submitAnswer( -1 );
         }
     };
 
@@ -118,9 +149,13 @@
     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

django/templates/play/game/score_overview.html

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

django/templates/play/game/sound.html

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

django/templates/play/lobby.html

@@ -8,12 +8,17 @@
         <div class="text-center mb-8">
             <h3 class="text-xl text-gray-600 mb-2">{{ quiz.name }}</h3>
             {% if request.session.mode != "learn" %}
+            {% if host_id %}
             <div class="bg-blue-100 rounded-lg p-4 mb-4">
                 <h1 class="text-4xl font-bold text-blue-800">{{ quiz_game.join_code }}</h1>
+                <div class="w-full flex justify-center my-2">
+                <img src="data:image/png;base64,{{ qr_code_base64 }}" class="h-1/2 w-1/2" alt="QR-Code">
+                </div>
                 <p class="text-sm text-blue-600 mt-1">Spiel-Code</p>
             </div>
         </div>
         {% endif %}
+        {% endif %}
 
         <!-- Participant Info -->
         {% if participant %}
@@ -26,7 +31,7 @@
         {% endif %}
 
         <!-- Participants List -->
-        <div class="mb-6">
+        <div class="mb-6 overflow-y-scroll max-h-96">
             <h3 class="font-bold text-lg mb-3 flex items-center">
                 <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />

requirements.txt

@@ -7,3 +7,5 @@ whitenoise~=6.6.0  # Static file serving
 django-cleanup
 redis
 channels_redis
+python-dotenv    # Production server safety
+qrcode~=7.4.2