settings

Resolve "Suchfunktion verbessern"

Closes #127

See merge request enrichment-2024/qivip!85

.gitignore

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

README.md

@@ -7,6 +7,7 @@
 3. [Superuser erstellen](#superuser-erstellen)
 4. [Tailwind-Nutzung](#tailwind-nutzung)
 5. [Issue - Merge Request - Merge](#issue-mergerequest-merge)
+6. [Konfiguration](#konfiguration)
 
 ## Initialisierung des Projekts
 
@@ -40,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
@@ -161,3 +162,11 @@ Hier der vereinbarte Arbeitsablauf:
 2. Merge Request anlegen - dadurch wird der Branch automatisch angelegt. Dieser kann mit `git pull` geholt und mit `git checkout <branch>` bearbeitet werden.
 
 3. Nach dem Hochladen kann der Merge in den Master durchgeführt werden.
+
+## Konfiguration
+
+Die Konfiguration des Projekts befindet sich im `config/qivip_config.json`.
+
+| Variable | Bedeutung | Optionen |
+| --- | --- | --- |
+| ENABLE_RATING_SYSTEM | Soll das Bewertungssystem aktiviert werden? | true [Standard], false |

datenschutzerklaerung.txt

@@ -0,0 +1,7 @@
+Name und Anschrift des Verantwortlichen
+
+//NAME HIER EINSETZEN//
+
+//ADRESSE HIER EINSETZEN//
+
+//E-MAIL HIER EINSETZEN//

django/accounts/forms.py

@@ -6,11 +6,15 @@ from django import forms
 class RegisterForm(UserCreationForm):
     class Meta:
         model=User
-        fields = ['username','password1','password2']
+        fields = ['username','password1','password2', "email"]
         
     username = forms.CharField(
         widget=forms.TextInput(attrs={'placeholder': 'BENUTZERNAME'})
     )
+    email = forms.EmailField(
+        widget=forms.TextInput(attrs={'placeholder': 'E-MAIL'})
+    )
+
     password1 = forms.CharField(
         widget=forms.PasswordInput(attrs={'placeholder': 'PASSWORT'})
     )
@@ -19,4 +23,3 @@ class RegisterForm(UserCreationForm):
     )
 
 
-

django/accounts/urls.py

@@ -1,7 +1,8 @@
-from django.urls import path # type: ignore
+from django.urls import path, reverse_lazy # type: ignore
 from . import views
 from django.contrib.auth.views import LogoutView
 from django.contrib.auth.views import LoginView 
+from django.contrib.auth import views as auth_views
 
 app_name = 'accounts' # Namensraum zum verhindern von Konflikten zwischen Apps
 #
@@ -13,4 +14,22 @@ urlpatterns = [
     path('logout/', LogoutView.as_view(next_page='accounts:login'), name='logout'),
     path('login/', LoginView.as_view(template_name='accounts/login.html', next_page='accounts:home'), name='login'),
     path('register/', views.register, name='register'),
+    path('password_reset/', auth_views.PasswordResetView.as_view(success_url=reverse_lazy('accounts:password_reset_done')), name='password_reset'),
+    path('password_reset/done/', auth_views.PasswordResetDoneView.as_view(), name='password_reset_done'),
+    path('reset/done/', auth_views.PasswordResetCompleteView.as_view(), name='password_reset_complete'),
+    
+
+
+    path('password_change/', views.password_changed, name='password_change'),
+    path('password_change/done/', auth_views.PasswordChangeDoneView.as_view(), name='password_change_done'),
+    path('delete_account/', views.deleteAccount, name="delete_account"),
+    path(
+    'reset/<uidb64>/<token>/',
+    auth_views.PasswordResetConfirmView.as_view(
+        template_name='registration/password_reset_confirm.html',
+        success_url=reverse_lazy('accounts:password_reset_complete') 
+    ),
+    name='password_reset_confirm'
+),
+   
 ]

django/accounts/views.py

@@ -2,12 +2,20 @@ from django.shortcuts import render, redirect
 from django.contrib.auth.decorators import login_required
 from django.contrib.auth import login, authenticate
 from .forms import RegisterForm
+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
+
+
 
 # Create your views here.
 @login_required
 def home(request):
     return render(request, 'accounts/home.html')
 
+
+
 def register(response):
     if response.method == "POST":
         form = RegisterForm(response.POST)
@@ -19,3 +27,33 @@ def register(response):
         form = RegisterForm()
 
     return render(response, "accounts/register.html", {"form":form})
+
+from django.contrib.auth import views as auth_views
+
+@login_required
+def password_changed(request):
+    if request.method == 'POST':
+        form = PasswordChangeForm(user=request.user, data=request.POST)
+        if form.is_valid():
+            user = form.save()
+            #update_session_auth_hash(request, user) #Hier wäre der User nach Passwortänderung noch angemeldet!
+            logout(request)
+            messages.success(request, "Das Passwort wurde erfolgreich geändert!")
+            return redirect('accounts:home')
+            
+    else:
+        form = PasswordChangeForm(user=request.user)
+    
+    return render(request, 'registration/password_change_form.html', {'form': form})
+
+
+@login_required
+def deleteAccount(request):
+    if request.method == 'POST':
+        user=request.user
+        logout(request)
+        user.delete()
+        messages.success(request, "Der Account wurde erfolgreich gelöscht!")
+        return redirect('homepage:home')
+    return render(request, 'registration/delete_account_confirm.html')
+

django/components/admin.py

@@ -1,3 +0,0 @@
-from django.contrib import admin
-
-# Register your models here.

django/components/apps.py

@@ -1,6 +0,0 @@
-from django.apps import AppConfig
-
-
-class ComponentsConfig(AppConfig):
-    default_auto_field = 'django.db.models.BigAutoField'
-    name = 'components'

django/components/models.py

@@ -1,3 +0,0 @@
-from django.db import models
-
-# Create your models here.

django/components/tests.py

@@ -1,3 +0,0 @@
-from django.test import TestCase
-
-# Create your tests here.

django/components/urls.py

@@ -1,14 +0,0 @@
-from django.urls import path # type: ignore
-from . import views
-
-
-app_name = 'components' # Namensraum zum verhindern von Konflikten zwischen Apps
-#
-# Wichtig: Damit Links funktionieren müssen diese so eingebunden werden: {% url 'accounts:login' %} statt {% url 'login' %}
-#
-
-urlpatterns = [
-    path('<int:pk>', views.play, name='play'),
-    path('ranking/<int:pk>', views.show_rank, name='ranking')
-  
-]

django/components/views.py

@@ -1,9 +0,0 @@
-from django.shortcuts import render
-
-# Create your views here.
-def play(request,pk):     #
-    return render(request, 'components/answer.html', {"pk": pk}) #
-
-
-def show_rank(request,pk):     #
-    return render(request, 'components/ranking.html', {"pk": pk}) #

django/config/qivip_config.json

@@ -0,0 +1,3 @@
+{
+  "ENABLE_RATING_SYSTEM": true
+}

django/core/settings.py

@@ -10,30 +10,41 @@ For the full list of settings and their values, see
 https://docs.djangoproject.com/en/5.1/ref/settings/
 """
 
+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
 
+EMAIL_BACKEND = 'django.core.mail.backends.console.EmailBackend' #TODO: NUR FÜR ENTWICKLUNG
 
 # Quick-start development settings - unsuitable for production
 # See https://docs.djangoproject.com/en/5.1/howto/deployment/checklist/
 
+# Support env variables from .env file if defined
+env_path = load_dotenv(os.path.join(BASE_DIR, '.env'))
+load_dotenv(env_path)
+
 # SECURITY WARNING: keep the secret key used in production secret!
-SECRET_KEY = 'django-insecure-#+s307$rxkts=8@+_^i)8)n1b4*y4za1xz!mvv(h@!+n9!mp9)'
+#SECRET_KEY = 'django-insecure-#+s307$rxkts=8@+_^i)8)n1b4*y4za1xz!mvv(h@!+n9!mp9)'
+SECRET_KEY = os.environ.get('DJANGO_SECRET_KEY', 'django-insecure-&psk#na5l=p3q8_a+-$4w1f^lt3lx1c@d*p4x$ymm_rn7pwb87')
 
 # SECURITY WARNING: don't run with debug turned on in production!
-DEBUG = True
+#DEBUG = True
+DEBUG = os.environ.get('DJANGO_DEBUG', '') != 'False'
 
 ALLOWED_HOSTS = ['127.0.0.1', 'localhost', '*']
 
+# Konfigurationsdatei für Projekt
+with open(BASE_DIR / 'config' / 'qivip_config.json') as config_file:
+    QIVIP_CONFIG = json.load(config_file)
 
 # Application definition
 
 INSTALLED_APPS = [
     'library.apps.LibraryConfig',
     'homepage.apps.HomepageConfig',
-    'components.apps.ComponentsConfig',
     'accounts.apps.AccountsConfig',
     'play',
     'django.contrib.admin',
@@ -148,7 +159,7 @@ STATIC_ROOT = BASE_DIR / "staticfiles"
 STATICFILES_DIRS = [BASE_DIR / 'static']
 
 # WhiteNoise configuration
-STATICFILES_STORAGE = 'whitenoise.storage.CompressedStaticFilesStorage'
+STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'
 WHITENOISE_SKIP_COMPRESS_EXTENSIONS = ['css', 'js']
 # Return 404 instead of 500 for missing files
 WHITENOISE_MISSING_FILE_ERRNO = None

django/core/urls.py

@@ -25,7 +25,6 @@ urlpatterns = [
     path('', include('homepage.urls')),
     path('play/', include('play.urls')),
     path('library/', include('library.urls')),
-    path('components/', include('components.urls'))
 ]
 
 if settings.DEBUG:

django/library/admin.py

@@ -1,5 +1,5 @@
 from django.contrib import admin
-from .models import QivipQuiz, QivipQuestion, QivipQuizFavorite, QuizCategory
+from .models import QivipQuiz, QivipQuestion, QivipQuizFavorite, QuestionImage, QuizCategory, QuizImage
 
 # Für das QivipQuiz Modell
 class QivipQuizAdmin(admin.ModelAdmin):
@@ -23,8 +23,17 @@ class QuizCategoryAdmin(admin.ModelAdmin):
 class QivipQuizFavoriteAdmin(admin.ModelAdmin):
     list_display = ('user', 'favorite', 'quiz')  # Welche Felder sollen in der Übersicht angezeigt werden
 
+
+class QuizImageAdmin(admin.ModelAdmin):
+     list_display = ('image',)
+
+class QuestionImageAdmin(admin.ModelAdmin):
+     list_display = ('image',)  
+
 # Registrierung der Modelle im Admin
 admin.site.register(QivipQuiz, QivipQuizAdmin)
 admin.site.register(QivipQuestion, QivipQuestionAdmin)
 admin.site.register(QuizCategory, QuizCategoryAdmin)
 admin.site.register(QivipQuizFavorite, QivipQuizFavoriteAdmin)
+admin.site.register(QuizImage, QuizImageAdmin)
+admin.site.register(QuestionImage, QuestionImageAdmin)

django/library/forms.py

@@ -4,7 +4,7 @@ from .models import QivipQuiz, QivipQuestion
 class QuizForm(forms.ModelForm):
     class Meta:
         model = QivipQuiz
-        fields = ['name', 'description','image', 'status', 'category','difficulty','credits']
+        fields = ['name', 'description', 'status', 'category','difficulty','credits']
 
 class QuestionForm(forms.ModelForm):
     class Meta:
@@ -15,7 +15,7 @@ from django import forms
 
 class QuizFilterForm(forms.Form):
     search = forms.CharField(required=False, label="Suche", widget=forms.TextInput(attrs={
-        'class': 'flex flex-grow rounded-lg p-2' ,'placeholder': 'Suche ...',
+        'class': 'flex flex-grow rounded-lg p-2' ,'placeholder': 'Suche ...', 'list': 'quiz-names',
     }))
 
 

django/library/migrations/0050_questionimage_quizimages_alter_qivipquestion_image_and_more.py

@@ -0,0 +1,38 @@
+# Generated by Django 5.1.7 on 2025-04-22 16:04
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0049_alter_qivipquestion_image'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='QuestionImage',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('image', models.ImageField(blank=True, null=True, upload_to='question_images/', verbose_name='Bild')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='QuizImage',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('image', models.ImageField(blank=True, max_length=256, null=True, upload_to='quiz_images/', verbose_name='Bild')),
+            ],
+        ),
+        migrations.AlterField(
+            model_name='qivipquestion',
+            name='image',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='questions', to='library.questionimage'),
+        ),
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='image',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.SET_NULL, related_name='quizzes', to='library.QuizImage'),
+        ),
+    ]

django/library/migrations/0051_alter_qivipquestion_image_alter_qivipquiz_image.py

@@ -0,0 +1,24 @@
+# Generated by Django 5.1.7 on 2025-04-23 12:04
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0050_questionimage_quizimages_alter_qivipquestion_image_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquestion',
+            name='image',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='questions', to='library.questionimage'),
+        ),
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='image',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.CASCADE, related_name='quizzes', to='library.quizimage'),
+        ),
+    ]

django/library/migrations/0052_alter_qivipquestion_image_alter_qivipquiz_image_and_more.py

@@ -0,0 +1,29 @@
+# Generated by Django 5.1.7 on 2025-04-23 12:21
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0051_alter_qivipquestion_image_alter_qivipquiz_image'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquestion',
+            name='image',
+            field=models.ImageField(blank=True, null=True, upload_to='question_images/', verbose_name='Bild'),
+        ),
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='image',
+            field=models.ImageField(blank=True, max_length=256, null=True, upload_to='quiz_images/', verbose_name='Bild'),
+        ),
+        migrations.DeleteModel(
+            name='QuestionImage',
+        ),
+        migrations.DeleteModel(
+            name='QuizImage',
+        ),
+    ]

django/library/migrations/0053_questionimage_quizimage_alter_qivipquestion_image_and_more.py

@@ -0,0 +1,38 @@
+# Generated by Django 5.1.7 on 2025-04-23 13:15
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0052_alter_qivipquestion_image_alter_qivipquiz_image_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='QuestionImage',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('image', models.ImageField(blank=True, null=True, upload_to='question_images/', verbose_name='Bild')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='QuizImage',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('image', models.ImageField(blank=True, max_length=256, null=True, upload_to='quiz_images/', verbose_name='Bild')),
+            ],
+        ),
+        migrations.AlterField(
+            model_name='qivipquestion',
+            name='image',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.PROTECT, related_name='questions', to='library.questionimage'),
+        ),
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='image',
+            field=models.ForeignKey(blank=True, null=True, on_delete=django.db.models.deletion.PROTECT, related_name='quizzes', to='library.quizimage'),
+        ),
+    ]

django/library/models.py

@@ -4,6 +4,15 @@ from django.utils.text import slugify
 import uuid
 from django.core.exceptions import ValidationError
 
+
+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/
+
+
+class QuestionImage(models.Model):
+     image = models.ImageField(verbose_name="Bild", upload_to="question_images/", blank=True, null=True)
+
+
 class QivipQuiz(models.Model):
     STATUS_VALUES = {
         "öffentlich": "Öffentlich",
@@ -27,7 +36,15 @@ class QivipQuiz(models.Model):
         if value.strip() == "In dem Quiz geht es um ...":
             raise ValidationError("Bitte gib eine aussagekräftige Beschreibung ein.")
 
-    image = models.ImageField(max_length=256,verbose_name="Bild", upload_to='quiz_images/', blank=True, null=True)  # Bild speichern in media/quiz_images/
+    image = models.ForeignKey(
+    QuizImage,
+    null=True,
+    blank=True,
+    on_delete=models.PROTECT, 
+    related_name="quizzes"
+    )
+
+
     uuid = models.UUIDField(default=uuid.uuid4, editable=False, unique=True)
     user_id = models.ForeignKey(User, on_delete=models.CASCADE, related_name='quiz')
     #creator = models.ForeignKey(User, on_delete=models.SET_NULL,blank=True, null=True, related_name='creator_quiz')
@@ -74,7 +91,14 @@ class QivipQuestion(models.Model):
     update_date = models.DateTimeField(auto_now=True)
     data = models.TextField()
     time_per_question = models.CharField(max_length=3, choices=list(TIME_VALUES.items()), default=30, help_text="Zeit pro Frage in Sekunden")
-    image = models.ImageField(verbose_name="Bild", upload_to="question_images/", blank=True, null=True)
+    image = models.ForeignKey(
+    QuestionImage,
+    null=True,
+    blank=True,
+    on_delete=models.PROTECT,
+    related_name="questions"
+)
+
     def __str__(self):
         return self.data[:50]
 

django/library/urls.py

@@ -16,5 +16,6 @@ urlpatterns = [
     path('question/delete/<int:pk>/', views.delete_question, name='delete_question'),
     path('detail/copy/<int:pk>/', views.copy_quiz, name='copy_quiz'),
     path('favorite_quiz/<int:pk>/', views.favorite_quiz, name='favorite_quiz'),
+    path("quiz-names-json/", views.quiz_names_json, name="quiz_names_json"),
 
 ]

django/library/views.py

@@ -1,12 +1,12 @@
 from django.utils import timezone
 import uuid
-from django.http import HttpResponse, HttpResponseRedirect
+from django.http import HttpResponse, HttpResponseRedirect, JsonResponse
 from django.shortcuts import render, redirect, get_object_or_404
 from django.contrib.auth.decorators import login_required
 from django.contrib.auth.models import User
 from django.urls import reverse
 from django.contrib import messages
-from .models import QivipQuiz, QivipQuestion, QivipQuizFavorite
+from .models import QivipQuiz, QivipQuestion, QivipQuizFavorite, QuestionImage, QuizImage
 from .forms import QuizForm, QuestionForm
 import json
 from django.core.paginator import Paginator
@@ -16,6 +16,28 @@ from django.db.models import Count
 from django.contrib.auth.models import User
 # Übersicht aller Quizze
 
+
+def quiz_names_json(request):
+    form = QuizFilterForm(request.GET)
+    if form.is_valid():
+        search = form.cleaned_data.get('search')
+    
+    
+        names = QivipQuiz.objects.all().annotate(max_amout_questions=Count('questions')).filter(max_amout_questions__gte=1, status='öffentlich', name__icontains=search)
+
+    
+    if request.user.is_authenticated:
+        names = names | QivipQuiz.objects.filter(
+        user_id=request.user.id,
+        status='privat',
+        name__icontains=search
+    )
+        
+    names=list(names.values_list('name', flat=True).distinct())
+    
+        
+    return JsonResponse(names, safe=False)
+
 def overview_quiz(request):
     # Filter
     form = QuizFilterForm(request.GET)
@@ -85,36 +107,6 @@ def overview_quiz(request):
         except:
             favorite_quizzes=QivipQuiz.objects.none()
 
-        """
-        if search: # Suche nach Namen
-           filter_other_quizzes = filter_other_quizzes.filter(name__icontains=search)
-           filter_my_quizzes = filter_my_quizzes.filter(name__icontains=search)
-
-        if min_amout_questions:
-           filter_other_quizzes = filter_other_quizzes.filter(max_amout_questions__gte=min_amout_questions)
-           filter_my_quizzes = filter_my_quizzes.filter(max_amout_questions__gte=min_amout_questions) if filter_my_quizzes else QivipQuiz.objects.none()
-
-        if max_amout_questions:
-           filter_other_quizzes = filter_other_quizzes.filter(max_amout_questions__lte=max_amout_questions)
-           try:
-               filter_my_quizzes =filter_my_quizzes.filter(max_amout_questions__lte=max_amout_questions)
-           except:
-               filter_my_quizzes = QivipQuiz.objects.none()
-               
-        if username:
-            try:
-                user = User.objects.get(username=username)  # Benutzer anhand des Namens holen
-                filter_other_quizzes = filter_other_quizzes.filter(user_id=user.id)
-                filter_my_quizzes = filter_my_quizzes.filter(user_id=user.id)  # Nach der user_id filtern
-            except User.DoesNotExist:
-                filter_other_quizzes = QivipQuiz.objects.none()  # Falls User nicht existiert, leere Query zurückgeben
-                filter_my_quizzes = QivipQuiz.objects.none()
-                
-        try:
-           filter_other_quizzes=filter_other_quizzes.exclude(user_id=request.user)
-        except:
-            filter_other_quizzes=filter_other_quizzes
-        """
         
 
         # Pagination for my quizzes
@@ -173,9 +165,6 @@ def favorite_quiz(request, pk):
 
         if favorite.favorite==True:
             favorite.favorite_date = timezone.now()          
-            
-            statement="Das Quiz '"+ favorite.quiz.name+ "' wurde erfolgreich zu den Favoriten hinzugefügt!"
-            messages.success(request,statement )
             favorite.save()
         else:
             favorite.favorite_date = None
@@ -185,18 +174,32 @@ def favorite_quiz(request, pk):
     
         
     else:
-       QivipQuizFavorite.objects.create(user=request.user, quiz=quiz, favorite=True, favorite_date=timezone.now())
-
+       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'))
     
     
 # Neues Quiz erstellen
 @login_required
 def new_quiz(request):
+
+        
     if request.method == 'POST':
+
+
         form = QuizForm(request.POST, request.FILES)
         if form.is_valid():
             quiz = form.save(commit=False)
+            try:
+                quiz_image=request.FILES['quiz_image']
+                imagequiz=QuizImage.objects.create(image=quiz_image)
+                quiz.image=imagequiz
+
+            except:
+                pass
+
+            
             quiz.user_id = request.user
             #quiz.creator = request.user
             quiz.save()
@@ -215,7 +218,27 @@ def edit_quiz(request, pk):
         form = QuizForm(request.POST, instance=quiz, files=request.FILES) 
         if form.is_valid():
 
+            if 'reset_image' in request.POST:
+                quiz.image = None
+
+            try:
+                quiz_image=request.FILES['quiz_image']
+                imagequiz=QuizImage.objects.create(image=quiz_image)
+                quiz.image=imagequiz
+
+
+            except:
+                pass
+
+            
+            
             form.save()
+            for img in QuizImage.objects.all():
+                try:
+                    img.delete()
+                    img.image.delete(save=False)
+                except:
+                    pass
             return redirect('library:detail_quiz', pk=pk)
             #return modified(request, pk)
             
@@ -229,12 +252,24 @@ def delete_quiz(request, pk):
     quiz = get_object_or_404(QivipQuiz, pk=pk, user_id=request.user)
     if request.method == 'POST':
         quiz.delete()
+        for img in QuizImage.objects.all():
+            try:
+                img.delete()
+                img.image.delete(save=False)
+            except:
+                pass
+        for img in QuestionImage.objects.all():
+            try:
+                img.delete()
+                img.image.delete(save=False)
+            except:
+                pass
+
         return redirect('library:overview_quiz')
     return render(request, 'library/delete_confirmation.html', {'object': quiz})
 
 # 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)
@@ -248,7 +283,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
@@ -256,6 +295,7 @@ def copy_quiz(request, pk):
     original_quiz = get_object_or_404(QivipQuiz, pk=pk)
 
     
+    
     # Quiz kopieren (ohne ID, damit ein neues Objekt erstellt wird)
  
         # Quiz kopieren (ohne ID, damit ein neues Objekt erstellt wird)
@@ -264,11 +304,10 @@ def copy_quiz(request, pk):
     new_quiz.pk = None  # Setzt die ID auf None, damit Django es als neues Objekt erkennt
     new_quiz.uuid = uuid.uuid4()  # Neue UUID generieren
     new_quiz.user_id = request.user  # Neuer Besitzer ist der aktuelle User
-    new_quiz.name += " - Kopie"  # Optional: Name anpassen
+    new_quiz.name += " - Kopie"
     new_quiz.base_quiz_id = pk
     new_quiz.rating_count = 0
     new_quiz.average_rating = 3.0
-    #new_quiz.creator = original_quiz.creator or request.user
     new_quiz.save()  # Speichern als neues Objekt 
    # Optional: Beschreibung anpassen
     # Alle zugehörigen Fragen kopieren
@@ -278,6 +317,7 @@ def copy_quiz(request, pk):
         question.pk = None  # Setze pk auf None, damit es als neues Objekt gespeichert wird
         question.quiz_id = original_quiz  # Verknüpfe mit dem neuen Quiz
         question.data = question.data  # `data`-Feld wird explizit übernommen # Verknüpfe mit dem neuen Quiz
+
         question.save()
     
     messages.success(request, "Quiz wurde erfolgreich kopiert!")
@@ -312,13 +352,12 @@ def new_question(request):
         messages.error(request, 'Quiz nicht gefunden oder keine Berechtigung.')
         return redirect('library:overview_quiz')
     
-    if question_type not in ['multiple_choice', 'true_false']:
+    if question_type not in ['multiple_choice', 'true_false','input']:
         base_url = reverse('library:new_question')
         return redirect(f'{base_url}?type=multiple_choice&quiz_id={quiz_id}')
        
     if request.method == 'POST':
         question_text = request.POST.get('question', '')
-        question_image = request.FILES.get('question_image', None)
         
         # Handle different question types
         if question_type == 'true_false':
@@ -331,6 +370,17 @@ def new_question(request):
                     {'value': 'Falsch', 'is_correct': not correct_answer}
                 ]
             }
+
+        elif question_type == 'input':
+            correct_answer = request.POST.get('correct_answer')
+            json_data = {
+                'type': question_type,
+                'question': question_text,
+                'options': [
+                    {'value': correct_answer, 'is_correct': True}
+                    
+                ]
+            } 
         elif question_type == 'multiple_choice':
             options = []
             i = 1
@@ -358,7 +408,14 @@ def new_question(request):
         question = QivipQuestion()
         question.data = json.dumps(json_data)
         question.quiz_id = quiz
-        question.image = question_image
+        try:
+            question_image=request.FILES['question_image']
+            imagequestion=QuestionImage.objects.create(image=question_image)
+            question.image=imagequestion
+        except:
+            pass
+
+
         question.time_per_question = request.POST.get('time_per_question', '30')
         question.save()
         #return modified(request, pk=quiz.pk)
@@ -375,6 +432,18 @@ def new_question(request):
                 ]
             }
             standard_time_per_question = 30
+
+        elif question_type == 'input':
+            question_data = {
+                'type': question_type,
+                'question': '',
+                'options': [
+                    
+                    
+                ]
+            } 
+            standard_time_per_question = 30
+
         elif question_type == 'multiple_choice':
             question_data = {
                 'type': question_type,
@@ -400,6 +469,8 @@ def new_question(request):
 @login_required
 def edit_question(request, pk):
     question = get_object_or_404(QivipQuestion, pk=pk, quiz_id__user_id=request.user)
+    if 'reset_ques_image' in request.POST:
+                question.image = None
     if question.quiz_id.user_id != request.user:
         return redirect('library:question_list')
     
@@ -453,7 +524,9 @@ def edit_question(request, pk):
     if request.method == 'POST':
         question_text = request.POST.get('question', '')
         try:
-            question_image = request.FILES['question_image']
+            question_image=request.FILES['question_image']
+            imagequestion=QuestionImage.objects.create(image=question_image)
+            question.image=imagequestion
         except Exception:
             pass
 
@@ -468,6 +541,17 @@ def edit_question(request, pk):
                     {'value': 'Falsch', 'is_correct': not correct_answer}
                 ]
             }
+        elif question_type == 'input':
+            correct_answer = request.POST.get('correct_answer')
+            json_data = {
+                'type': question_type,
+                'question': question_text,
+                'options': [
+                    {'value': correct_answer,'is_correct':True}
+                    
+                ]
+            } 
+
         elif question_type == 'multiple_choice':
             options = []
             i = 1
@@ -498,8 +582,15 @@ def edit_question(request, pk):
             
         question.data = json.dumps(json_data)
         question.time_per_question = request.POST.get('time_per_question', '30')
-        question.image = question_image
+
+        
         question.save()
+        for img in QuestionImage.objects.all():
+            try:
+                img.delete()
+                img.image.delete(save=False)
+            except:
+                pass
         #return modified(request, question.quiz_id.pk)
         return redirect('library:detail_quiz', pk=question.quiz_id.pk)
         
@@ -527,5 +618,11 @@ def delete_question(request, pk):
     
     if request.method == 'POST':
         question.delete()
+        for img in QuestionImage.objects.all():
+            try:
+                img.delete()
+                img.image.delete(save=False)
+            except:
+                pass
         return redirect('library:detail_quiz', pk=question.quiz_id.pk)
     return render(request, 'library/delete_confirmation.html', {'object': question})

django/package-lock.json

@@ -9,26 +9,907 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
-        "swiper": "^11.2.6"
+        "@tailwindcss/cli": "^4.1.5",
+        "tailwindcss": "^4.1.5"
       }
     },
-    "node_modules/swiper": {
-      "version": "11.2.6",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-11.2.6.tgz",
-      "integrity": "sha512-8aXpYKtjy3DjcbzZfz+/OX/GhcU5h+looA6PbAzHMZT6ESSycSp9nAjPCenczgJyslV+rUGse64LMGpWE3PX9Q==",
-      "funding": [
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/swiperjs"
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.1.tgz",
+      "integrity": "sha512-dfUnCxiN9H4ap84DvD2ubjw+3vUNpstxa0TneY/Paat8a3R4uQZDLSvWjmznAY/DoahqTHl9V46HF/Zs3F29pg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "is-glob": "^4.0.3",
+        "micromatch": "^4.0.5",
+        "node-addon-api": "^7.0.0"
       },
-        {
-          "type": "open_collective",
-          "url": "http://opencollective.com/swiper"
-        }
-      ],
-      "license": "MIT",
       "engines": {
-        "node": ">= 4.7.0"
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.1",
+        "@parcel/watcher-darwin-arm64": "2.5.1",
+        "@parcel/watcher-darwin-x64": "2.5.1",
+        "@parcel/watcher-freebsd-x64": "2.5.1",
+        "@parcel/watcher-linux-arm-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm-musl": "2.5.1",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.1",
+        "@parcel/watcher-linux-arm64-musl": "2.5.1",
+        "@parcel/watcher-linux-x64-glibc": "2.5.1",
+        "@parcel/watcher-linux-x64-musl": "2.5.1",
+        "@parcel/watcher-win32-arm64": "2.5.1",
+        "@parcel/watcher-win32-ia32": "2.5.1",
+        "@parcel/watcher-win32-x64": "2.5.1"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.1.tgz",
+      "integrity": "sha512-KF8+j9nNbUN8vzOFDpRMsaKBHZ/mcjEjMToVMJOhTozkDonQFFrRcfdLWn6yWKCmJKmdVxSgHiYvTCef4/qcBA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.1.tgz",
+      "integrity": "sha512-eAzPv5osDmZyBhou8PoF4i6RQXAfeKL9tjb3QzYuccXFMQU0ruIc/POh30ePnaOyD1UXdlKguHBmsTs53tVoPw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.1.tgz",
+      "integrity": "sha512-1ZXDthrnNmwv10A0/3AJNZ9JGlzrF82i3gNQcWOzd7nJ8aj+ILyW1MTxVk35Db0u91oD5Nlk9MBiujMlwmeXZg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.1.tgz",
+      "integrity": "sha512-SI4eljM7Flp9yPuKi8W0ird8TI/JK6CSxju3NojVI6BjHsTyK7zxA9urjVjEKJ5MBYC+bLmMcbAWlZ+rFkLpJQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.1.tgz",
+      "integrity": "sha512-RCdZlEyTs8geyBkkcnPWvtXLY44BCeZKmGYRtSgtwwnHR4dxfHRG3gR99XdMEdQ7KeiDdasJwwvNSF5jKtDwdA==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.1.tgz",
+      "integrity": "sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.1.tgz",
+      "integrity": "sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.1.tgz",
+      "integrity": "sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.1.tgz",
+      "integrity": "sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.1.tgz",
+      "integrity": "sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.1.tgz",
+      "integrity": "sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.1.tgz",
+      "integrity": "sha512-c2KkcVN+NJmuA7CGlaGD1qJh1cLfDnQsHjE89E60vUEMlqduHGCdCLJCID5geFVM0dOtA3ZiIO8BoEQmzQVfpQ==",
+      "cpu": [
+        "ia32"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.1.tgz",
+      "integrity": "sha512-9lHBdJITeNR++EvSQVUcaZoWupyHfXe1jZvGZ06O/5MflPcuPLtEphScIBL+AiCWBO46tDSHzWyD0uDmmZqsgA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@tailwindcss/cli": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/cli/-/cli-4.1.5.tgz",
+      "integrity": "sha512-Kr567rDwDjY1VUnfqh5/+DCpRf4B8lPs5O9flP4kri7n4AM2aubrIxGSh5GN8s+awUKw/U4+6kNlEnZbBNfUeg==",
+      "dependencies": {
+        "@parcel/watcher": "^2.5.1",
+        "@tailwindcss/node": "4.1.5",
+        "@tailwindcss/oxide": "4.1.5",
+        "enhanced-resolve": "^5.18.1",
+        "mri": "^1.2.0",
+        "picocolors": "^1.1.1",
+        "tailwindcss": "4.1.5"
+      },
+      "bin": {
+        "tailwindcss": "dist/index.mjs"
+      }
+    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.5.tgz",
+      "integrity": "sha512-CBhSWo0vLnWhXIvpD0qsPephiaUYfHUX3U9anwDaHZAeuGpTiB3XmsxPAN6qX7bFhipyGBqOa1QYQVVhkOUGxg==",
+      "dependencies": {
+        "enhanced-resolve": "^5.18.1",
+        "jiti": "^2.4.2",
+        "lightningcss": "1.29.2",
+        "tailwindcss": "4.1.5"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.5.tgz",
+      "integrity": "sha512-1n4br1znquEvyW/QuqMKQZlBen+jxAbvyduU87RS8R3tUSvByAkcaMTkJepNIrTlYhD+U25K4iiCIxE6BGdRYA==",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.5",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.5",
+        "@tailwindcss/oxide-darwin-x64": "4.1.5",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.5",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.5",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.5",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.5",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.5",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.5",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.5",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.5",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.5"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.5.tgz",
+      "integrity": "sha512-LVvM0GirXHED02j7hSECm8l9GGJ1RfgpWCW+DRn5TvSaxVsv28gRtoL4aWKGnXqwvI3zu1GABeDNDVZeDPOQrw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.5.tgz",
+      "integrity": "sha512-//TfCA3pNrgnw4rRJOqavW7XUk8gsg9ddi8cwcsWXp99tzdBAZW0WXrD8wDyNbqjW316Pk2hiN/NJx/KWHl8oA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.5.tgz",
+      "integrity": "sha512-XQorp3Q6/WzRd9OalgHgaqgEbjP3qjHrlSUb5k1EuS1Z9NE9+BbzSORraO+ecW432cbCN7RVGGL/lSnHxcd+7Q==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.5.tgz",
+      "integrity": "sha512-bPrLWbxo8gAo97ZmrCbOdtlz/Dkuy8NK97aFbVpkJ2nJ2Jo/rsCbu0TlGx8joCuA3q6vMWTSn01JY46iwG+clg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.5.tgz",
+      "integrity": "sha512-1gtQJY9JzMAhgAfvd/ZaVOjh/Ju/nCoAsvOVJenWZfs05wb8zq+GOTnZALWGqKIYEtyNpCzvMk+ocGpxwdvaVg==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.5.tgz",
+      "integrity": "sha512-dtlaHU2v7MtdxBXoqhxwsWjav7oim7Whc6S9wq/i/uUMTWAzq/gijq1InSgn2yTnh43kR+SFvcSyEF0GCNu1PQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.5.tgz",
+      "integrity": "sha512-fg0F6nAeYcJ3CriqDT1iVrqALMwD37+sLzXs8Rjy8Z1ZHshJoYceodfyUwGJEsQoTyWbliFNRs2wMQNXtT7MVA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.5.tgz",
+      "integrity": "sha512-SO+F2YEIAHa1AITwc8oPwMOWhgorPzzcbhWEb+4oLi953h45FklDmM8dPSZ7hNHpIk9p/SCZKUYn35t5fjGtHA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.5.tgz",
+      "integrity": "sha512-6UbBBplywkk/R+PqqioskUeXfKcBht3KU7juTi1UszJLx0KPXUo10v2Ok04iBJIaDPkIFkUOVboXms5Yxvaz+g==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.5.tgz",
+      "integrity": "sha512-hwALf2K9FHuiXTPqmo1KeOb83fTRNbe9r/Ixv9ZNQ/R24yw8Ge1HOWDDgTdtzntIaIUJG5dfXCf4g9AD4RiyhQ==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.4.3",
+        "@emnapi/runtime": "^1.4.3",
+        "@emnapi/wasi-threads": "^1.0.2",
+        "@napi-rs/wasm-runtime": "^0.2.9",
+        "@tybys/wasm-util": "^0.9.0",
+        "tslib": "^2.8.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.5.tgz",
+      "integrity": "sha512-oDKncffWzaovJbkuR7/OTNFRJQVdiw/n8HnzaCItrNQUeQgjy7oUiYpsm9HUBgpmvmDpSSbGaCa2Evzvk3eFmA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.5.tgz",
+      "integrity": "sha512-WiR4dtyrFdbb+ov0LK+7XsFOsG+0xs0PKZKkt41KDn9jYpO7baE3bXiudPVkTqUEwNfiglCygQHl2jklvSBi7Q==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==",
+      "bin": {
+        "detect-libc": "bin/detect-libc.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.18.1",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
+      "integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
+      "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
+    "node_modules/lightningcss": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.29.2.tgz",
+      "integrity": "sha512-6b6gd/RUXKaw5keVdSEtqFVdzWnU5jMxTUjA2bVcMNPLwSQ08Sv/UodBVtETLCn7k4S1Ibxwh7k68IwLZPgKaA==",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-darwin-arm64": "1.29.2",
+        "lightningcss-darwin-x64": "1.29.2",
+        "lightningcss-freebsd-x64": "1.29.2",
+        "lightningcss-linux-arm-gnueabihf": "1.29.2",
+        "lightningcss-linux-arm64-gnu": "1.29.2",
+        "lightningcss-linux-arm64-musl": "1.29.2",
+        "lightningcss-linux-x64-gnu": "1.29.2",
+        "lightningcss-linux-x64-musl": "1.29.2",
+        "lightningcss-win32-arm64-msvc": "1.29.2",
+        "lightningcss-win32-x64-msvc": "1.29.2"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.29.2.tgz",
+      "integrity": "sha512-cK/eMabSViKn/PG8U/a7aCorpeKLMlK0bQeNHmdb7qUnBkNPnL+oV5DjJUo0kqWsJUapZsM4jCfYItbqBDvlcA==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.29.2.tgz",
+      "integrity": "sha512-j5qYxamyQw4kDXX5hnnCKMf3mLlHvG44f24Qyi2965/Ycz829MYqjrVg2H8BidybHBp9kom4D7DR5VqCKDXS0w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.29.2.tgz",
+      "integrity": "sha512-wDk7M2tM78Ii8ek9YjnY8MjV5f5JN2qNVO+/0BAGZRvXKtQrBC4/cn4ssQIpKIPP44YXw6gFdpUF+Ps+RGsCwg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.29.2.tgz",
+      "integrity": "sha512-IRUrOrAF2Z+KExdExe3Rz7NSTuuJ2HvCGlMKoquK5pjvo2JY4Rybr+NrKnq0U0hZnx5AnGsuFHjGnNT14w26sg==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.29.2.tgz",
+      "integrity": "sha512-KKCpOlmhdjvUTX/mBuaKemp0oeDIBBLFiU5Fnqxh1/DZ4JPZi4evEH7TKoSBFOSOV3J7iEmmBaw/8dpiUvRKlQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.29.2.tgz",
+      "integrity": "sha512-Q64eM1bPlOOUgxFmoPUefqzY1yV3ctFPE6d/Vt7WzLW4rKTv7MyYNky+FWxRpLkNASTnKQUaiMJ87zNODIrrKQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.29.2.tgz",
+      "integrity": "sha512-0v6idDCPG6epLXtBH/RPkHvYx74CVziHo6TMYga8O2EiQApnUPZsbR9nFNrg2cgBzk1AYqEd95TlrsL7nYABQg==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.29.2.tgz",
+      "integrity": "sha512-rMpz2yawkgGT8RULc5S4WiZopVMOFWjiItBT7aSfDX4NQav6M44rhn5hjtkKzB+wMTRlLLqxkeYEtQ3dd9696w==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.29.2.tgz",
+      "integrity": "sha512-nL7zRW6evGQqYVu/bKGK+zShyz8OVzsCotFgc7judbt6wnB2KbiKKJwBE4SGoDBQ1O94RjW4asrCjQL4i8Fhbw==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.29.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.29.2.tgz",
+      "integrity": "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss/node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mri": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+      "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ=="
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.5.tgz",
+      "integrity": "sha512-nYtSPfWGDiWgCkwQG/m+aX83XCwf62sBgg3bIlNiiOcggnS1x3uVRDAuyelBFL+vJdOPPCGElxv9DjHJjRHiVA=="
+    },
+    "node_modules/tapable": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
       }
     }
   }

django/package.json

@@ -10,6 +10,7 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
-    "swiper": "^11.2.6"
+    "@tailwindcss/cli": "^4.1.5",
+    "tailwindcss": "^4.1.5"
   }
 }

django/play/consumers.py

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

django/play/consumers/game.py

@@ -4,10 +4,8 @@ from channels.generic.websocket import AsyncWebsocketConsumer
 from channels.db import database_sync_to_async
 from django.utils import timezone
 from django.urls import reverse
-from django.db import models
-from datetime import timedelta
-
 from play.models import QuizGame, QuizGameParticipant, QuizAnswer
+from django.conf import settings
 
 class GameConsumer(AsyncWebsocketConsumer):
 
@@ -86,7 +84,10 @@ class GameConsumer(AsyncWebsocketConsumer):
 
         elif message_type == 'submit_answer':
             participant_id = text_data_json['participant_id']
+            try:
                 answer = text_data_json['answer']
+            except:
+                answer=-1
             time_remaining = text_data_json.get('time_remaining', 0)
             
             # Save answer and update participant score
@@ -184,15 +185,33 @@ class GameConsumer(AsyncWebsocketConsumer):
             
             # Check if answer is correct
             is_correct = False
-            if answer_index >= 0:  # -1 means timeout
             question_data = json.loads(current_question.data)
+            print(answer_index)
+            try:
+                if answer_index >= 0 :  # -1 means timeout
                     is_correct = question_data['options'][answer_index]['is_correct']
+                    print(is_correct)
+            except:
+                user_input = str(answer_index).strip().lower().replace(" ", "")
+                correct_value = str(question_data['options'][0].get('value', '')).strip().lower().replace(" ", "")
+                print("Richtig",correct_value)
+                print(user_input)
+                if user_input == correct_value:
+                    is_correct=True
+                    answer_index=int(0)
+                    print(is_correct)
+                else:
+                    answer_index=int(1)
+
+                    
+                
+                    
             
             # Calculate score based on correctness and time
             score = 0
             if is_correct:
                 base_score = 1000
-                time_factor = time_remaining / 30000  # 30 seconds max
+                time_factor = time_remaining /  int(current_question.time_per_question)/int(1000)
                 score = int(base_score * (0.5 + 0.5 * time_factor))
             
             # Update or create answer in QuizAnswer table
@@ -214,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()
@@ -244,6 +264,8 @@ class GameConsumer(AsyncWebsocketConsumer):
 
     @database_sync_to_async
     def save_rating(self, participant_id, rating):
+        if not settings.QIVIP_CONFIG['ENABLE_RATING_SYSTEM']:
+            return False
         from library.models import QuizRating
         try:
             game = QuizGame.objects.get(join_code=self.join_code)

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

@@ -2,15 +2,26 @@ from django.utils import timezone
 from django.shortcuts import render
 from django.shortcuts import render, redirect, get_object_or_404, reverse
 from play.models import QuizGame, QuizGameParticipant
-from library.models import QivipQuiz, QivipQuestion
+from library.models import QivipQuiz
 from django.http import HttpResponseRedirect, HttpResponseNotFound
 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")
 
     
     
@@ -19,6 +30,7 @@ def lobby(request, join_code):
     context = {
         'quiz': quiz,
         'quiz_game': quiz_game,
+        "qr_code_base64": img_base64,
     }
 
 
@@ -28,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)
@@ -44,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):
@@ -69,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:
@@ -89,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}))
@@ -144,7 +161,8 @@ def finished(request, join_code):
         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
+            '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:
@@ -325,6 +343,7 @@ def selected_mode(request, join_code):
             participant.participant_id=host_id
             participant.quiz_game = quiz_game
             participant.score = 0  # Initialize score
+            participant.last_score = 0
             participant.save()
             quiz_game.current_state = "question"
             quiz_game.question_start_time = timezone.now()
@@ -332,5 +351,5 @@ def selected_mode(request, join_code):
   
             return redirect('play:question',join_code)
         
+        return redirect('play:lobby', join_code=join_code)
         
-        return render(request, 'play/lobby.html', context=context)

django/templates/accounts/home.html

@@ -9,11 +9,15 @@
       
         <h1 class="text-center m-4 text-3xl lg:text-6xl">Willkommen,  <b>{{ request.user.username }}</b>!</h1>
        
+      
         <form action="{% url 'accounts:logout' %}" method="post">
             {% csrf_token %}
-            <button class="bg-blue-600 text-white p-3 rounded-full font-black" type="submit">Abmelden</button>
+            <button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200 cursor-pointer" type="submit">Abmelden</button>
             </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>
+       
         <div class="flex justify-end">
             <span class="text-[clamp(0.6rem,5vw,1rem)] font-black overflow-x-auto mt-1 ml-0.75 text-blue-600 p-0.75 bg-white">qivip
             </span>

django/templates/accounts/login.html

@@ -24,9 +24,10 @@
             <div class="items-center w-full">
                 <input class=" w-full p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black" type="password" name="password" id="password" required placeholder="PASSWORT">
             </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">Anmelden</button>
+            <button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200 cursor-pointer" type="submit" class="login-button">Anmelden</button>
         </form>
         <button class="text-center text-sm w-full mt-2 font-light text-blue-600"><a href="{% url 'accounts:register' %}" class="register_link">Noch kein Konto?</a></button>
+        <button class="text-center text-sm w-full mt-2 font-light text-blue-600"><a href="{% url 'accounts:password_reset' %}" class="register_link">Passwort vergessen?</a></button>
     </div>
     </div>
 {% endblock %}

django/templates/accounts/register.html

@@ -37,7 +37,14 @@
                 {{ form.password2 }}
 
                 </div>
+                <div class="register">
                 
+                    {{ 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/base.html

@@ -7,11 +7,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="{% static 'css/t-style.css' %}">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/@tsparticles/confetti@3.0.3/tsparticles.confetti.bundle.min.js"></script>
     <title>qivip</title>
 </head>
 <body>
     {% include 'partials/_nav.html' %}
     {% block content%}{% endblock %}
+    {% block faqs%}{% endblock %}
     {% include 'partials/_footer.html' %}
     
     <!-- Toast Container -->
@@ -70,5 +72,8 @@
         localStorage.setItem("meine_seite_scroll", 0);}
     </script>
     {% block extra_js %}{% endblock %}
+    <style>html {
+        overflow-y: scroll;
+      }</style>
 </body>
 </html>

django/templates/components/answer.html

@@ -1,22 +0,0 @@
-{% extends 'components/base.html' %}
-{% load static %}
-{% block title %}Antwort{% endblock %}
-{% block content %}
-<link rel="stylesheet" href="{% static 'css/t-style.css' %}">
-
- <!-- TODO Bedingung festlegen: Quiztyp unterscheiden % if <Bedingung> % -->
-  {% if user.is_authenticated %}
-<button class="overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4 border-gray-500 text-2xl font-black m-0.75 bg-red-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)]  text-center text-white">1</button>
-<button class="overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4 border-gray-500 text-2xl font-black m-0.75 bg-indigo-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)]  text-center text-white">2</button>
-<button class="overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4  border-gray-500 text-2xl font-black m-0.75 bg-yellow-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)]  text-center text-white">3</button>
-<button class="overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4 border-gray-500 text-2xl font-black m-0.75 bg-green-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)] text-center text-white">4</button>
-
-<!-- TODO wieder einfügen, wenn Bedingung gestetzt  -->
-{% else %}
-<button class=" overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4  border-gray-500 text-2xl font-black m-0.75 bg-green-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)]  text-center text-white">wahr</button>
-<button class=" overflow-x-auto text-[clamp(0.3rem,5vw,1rem)] break-words border-4 border-gray-500 text-2xl font-black m-0.75 bg-red-500 rounded-sm shadow-[0_2px_2px_rgba(0,0,0,0.1)] text-center text-white">falsch</button>
-
-    
-<!--TODO wieder einfügen, wenn Bedingung gestetzt plus   -->
-{% endif %}
-{% endblock %}

django/templates/components/base.html

@@ -1,45 +0,0 @@
-{% load static %}
-<!doctype html>
-<html class="h-full">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  </head>
-  <body class="dark:bg-gray-900  h-full m-0">
-
-    <div style="height: calc(12vh);"  class=" m-0 text-white  bg-blue-600 rounded-lg  h-12 shadow-md  font-semibold px-1  w-full h-20 shadow-[0_2px_2px_rgba(0,0,0,0.1)] break-words text-center flex items-center justify-center overflow-x-auto text-[clamp(0.55rem,5vw,1.5rem)]" > Frage: Wie hoch ist der Eiffelturm insgesamt? 
-      </div>
-    
-    <div class=" dark:bg-gray-900  flex justify-end gap-2 " style="height: calc(12vh);">
-    <span class="mt-4 text-[clamp(0.6rem,5vw,1rem)] overflow-x-auto ml-0.75 text-white bg-blue-400 mb-6 h-12 rounded-sm p-3 shadow-[0_2px_2px_rgba(0,0,0,0.1)] z-40 items-center">Zeit: 60s</span>
-    <div class="mt-4 text-[clamp(0.6rem,5vw,1rem)] overflow-x-auto mr-0.75 bg-gray-500 text-white h-12 mb-6 rounded-sm p-3 shadow-[0_2px_2px_rgba(0,0,0,0.1)] z-40 items-center  ">Deine Punkte: 60</div>
-    </div>
-  
-
-
-
- 
-   
-    <div class="mt-3 flex justify-center -z-1  " style="height: calc(37vh);"> <img class="object-cover "  src="{% static 'components/Ausgabe.png' %}" alt="Bild">   </div>
-    <div class="w-full  grid grid-cols-2 p-2 h-full" style="height: calc(38vh);min-height: 50px;">
- 
-      
-      {% block content %}
-   
-      {% endblock %}
-  
-  </div>
-
-
-
-
-  
-  
-
-<div class="absolute bottom-0 right-0">
-  <span class="text-[clamp(0.6rem,5vw,1rem)] font-black overflow-x-auto mt-1 ml-0.75 text-blue-600 p-0.75 bg-white">qivip
-  </span>
-  </div>
-
-  </body>
-</html>

django/templates/components/ranking.html

@@ -1,63 +0,0 @@
-{% load static %}
-<link rel="stylesheet" href="{% static 'css/t-style.css' %}">
-<!doctype html>
-<html class="h-full">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  </head>
-  <body class="  dark:bg-gray-900 w-full justify-center h-full m-0">
-    <div style="height: calc(10vh);"  class=" m-0 text-white  bg-blue-600 rounded-lg  h-12 shadow-md  font-semibold px-1  w-full h-20 shadow-[0_2px_2px_rgba(0,0,0,0.1)] break-words text-center flex items-center justify-center overflow-x-auto text-[clamp(0.75rem,5vw,1.5rem)]" >Ranking 
-    </div>
-    <div class="m-4 flex justify-end font-bold">Frage 1/10</div>
-
-
-      
-   
-
-  
-
-    <div class="text-[clamp(0.75rem,5vw,1.25rem)] font-bold  flex items-center justify-around   border-blue-600  border-4 space-x-2  mt-2  overflow-x-auto  rounded-lg p-4 shadow-[0_2px_2px_rgba(0,0,0,0.1)] w-full">
-      <div style="background:linear-gradient(120deg, rgb(255, 208, 0),rgb(216, 151, 21))"  class="text-white !important px-4 rounded-sm">1. Platz</div>
-      <div class="text-stone-900   ">6000 Punkte</div>
-      <div class="">Person XY</div>
-      </div>
-
-    <div class=" text-[clamp(0.75rem,5vw,1.25rem)] font-bold p-4 flex items-center justify-around   border-blue-600  border-4 space-x-2  mt-2  overflow-x-auto  rounded-lg  shadow-[0_2px_2px_rgba(0,0,0,0.1)] w-full">
-        <div style="background:linear-gradient(120deg, rgb(102, 122, 122),rgb(194, 186, 186))" class="text-white !important  px-4 rounded-sm">2. Platz</div>
-        <div class="text-stone-900   ">5000 Punkte</div>
-        <div class="">Person XY</div>
-        </div>
-
-    <div class=" text-[clamp(0.75rem,5vw,1.25rem)] font-bold  flex items-center justify-around   border-blue-600  border-4 space-x-2  mt-2  overflow-x-auto  rounded-lg p-4 shadow-[0_2px_2px_rgba(0,0,0,0.1)] w-full">
-    <div style="background:linear-gradient(120deg, rgb(211, 91, 17),rgb(219, 168, 109))"  class="text-white !important  px-4 rounded-sm">3. Platz</div>
-    <div class="text-stone-900   ">600 Punkte</div>
-    <div class="">Person XY</div>
-    </div>
-      
-    <div class=" text-[clamp(0.75rem,5vw,1.25rem)] items-center flex justify-around font-bold  border-blue-600   border-4 space-x-2  mt-2 text-[clamp(0.6rem,5vw,1rem)] overflow-x-auto rounded-lg p-4 shadow-[0_2px_2px_rgba(0,0,0,0.1)] w-full">
-    <div>4. Platz</div>
-    <div>200 Punkte</div>
-    <div>Person XY</div>
-    </div>
-
-
-
-
- 
-
-
-
-  
-
-
-  
-  
-
-<div class="absolute bottom-0 right-0">
-  <span class="text-[clamp(0.6rem,5vw,1rem)] font-black overflow-x-auto mt-1 ml-0.75 text-blue-600 p-0.75 bg-white">qivip
-  </span>
-  </div>
-
-  </body>
-</html>

django/templates/homepage/home.html

@@ -4,7 +4,7 @@
 <div class="grid place-content-center md:h-screen h-150 w-full -z-50 top-0 p-4">
     <div class="text-center">
         <h2 class="font-bold md:text-8xl text-6xl md:mb-8 text-blue-600">qivip</h2>
-        <h3 class="mt-4 italic font-extralight sm:text-2xl text-md">Interaktives Lernen neu definiert.</h3>
+        <h3 class="mt-4 italic font-extralight sm:text-4xl text-md">forever and forall</h3>
     </div>
     <div class="grid sm:grid-cols-3 place-items-stretch text-center mt-8 gap-4 p-4 border-3 bg-blue-100 border-blue-100 rounded-md">
         <a class="qp-a-button bg-green-500 text-white" href="{% url 'play:join_game' %}">Teilnehmen</a>
@@ -13,3 +13,155 @@
     </div>
 </div>
 {% endblock %}
+
+{% block faqs %}
+<style>
+   details[open] summary svg {
+    transform: rotate(180deg);
+  }
+
+</style>
+
+
+<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>
+    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
+  </div>
+</div>
+
+
+    <div class="input-group !max-w-4xl tracking-wide">
+        <h1 class="font-black text-blue-600 flex justify-between gap-2 lg:text-lg">
+
+
+        FAQs - häufig gestellte Fragen
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
+</svg></h1>
+   
+</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 ist 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">qivip ist eine Webseite zum Lernen! Es können vor allem Quizze erstellt, bearbeitet, kopiert und auch gespielt werden. </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 zu 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>
+ 
+{% endblock %}

django/templates/library/detail_quiz.html

@@ -90,6 +90,14 @@
             <div class="flex justify-between items-center flex-wrap">
                 <h2 class="text-xl font-semibold">Fragen</h2>
                 <div class="flex space-x-2 flex-wrap">
+                    {% if quiz.user_id == request.user %}
+                    <a href="{% url 'library:new_question' %}?type=input&quiz_id={{ quiz.id }}" 
+                       class=" mt-1 bg-green-100 text-green-800 px-4 py-2 rounded-md text-xs lg:text-lg  hover:border-blue-600 border-2">
+                        Eingabe
+                    </a>
+                    {% endif %}
+
+
                     {% if quiz.user_id == request.user %}
                     <a href="{% url 'library:new_question' %}?type=multiple_choice&quiz_id={{ quiz.id }}" 
                        class=" mt-1 bg-blue-100 text-blue-800 px-4 py-2 rounded-md text-xs lg:text-lg hover:border-blue-600 border-2">
@@ -118,8 +126,8 @@
                             <div class="flex-grow">
                                 <p class="font-medium">{{ question.data.question }}</p>
                                 <div class="mt-1">
-                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {% if question.data.type == 'multiple_choice' %}bg-blue-100 text-blue-800{% else %}bg-purple-100 text-purple-800{% endif %}">
-                                        {% if question.data.type == 'multiple_choice' %}Multiple Choice{% else %}Wahr/Falsch{% endif %}
+                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {% if question.data.type == 'multiple_choice' %}bg-blue-100 text-blue-800 {% elif question.data.type == 'input' %} bg-green-100 text-green-800 {% else %}bg-purple-100 text-purple-800{% endif %}">
+                                        {% if question.data.type == 'multiple_choice' %}Multiple Choice{% elif question.data.type == 'input' %}Eingabe{% else %}Wahr/Falsch{% endif %}
                                     </span>
                                 </div>
                                 <div class="mt-2">
@@ -143,6 +151,18 @@
                                             </li>
                                         {% endfor %}
                                     </ul>
+                                    {% elif question.data.type == 'input' %}
+                                    <ul class="space-y-1 ">
+                                        {% for option in question.data.options %}
+                                            <li class="flex items-center text-sm">
+                                                  <svg class="h-4 w-4 text-green-500 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+                                                    </svg>
+                                                    <span class="font-medium text-green-700">{{ option.value }}</span>
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                
                                 {% else %}              
                                 {% for option in question.data.options %}
                                     {% if option.is_correct %}
@@ -193,26 +213,29 @@
 
     <div class="flex justify-end">   
         {% if quiz.base_quiz %}
-        <p class="text-gray-600 mt-2 ">Bearbeitung:<span class="font-bold"> {{ quiz.user_id}}</span></p>
+        <p class="text-gray-600 mt-2 ">Bearbeitung:<span class="text-blue-600 font-bold"> <a href="{% url 'library:overview_quiz' %}?filter=1&user={{ quiz.user_id }}">{{ quiz.user_id }}</a></span></p>
+        {% else %}
+        <p class="text-gray-600 mt-2 ">Autor:<span class="text-blue-600 font-bold"> <a href="{% url 'library:overview_quiz' %}?filter=1&user={{ quiz.user_id }}">{{ quiz.user_id }}</a></span></p>
         {% endif %}
     </div>
 
 <div class="flex justify-end">   
 {% if quiz.base_quiz %}
-<p class="text-gray-600  ">Kopie von: <a href="{% url 'library:detail_quiz' quiz.base_quiz.id %}"><span class="font-bold">{{ quiz.base_quiz}}</span></a></p>
+<p class="text-gray-600  ">Kopie von: <a href="{% url 'library:detail_quiz' quiz.base_quiz.id %}"><span class="text-blue-600 font-bold">{{ quiz.base_quiz}}</span></a></p>
 {% endif %}
 </div>
 <div class="flex justify-end">  
     {% if quiz.base_quiz %}
-    <p class="text-gray-600 ">Autor:<span class="font-bold"> {{ quiz.base_quiz.user_id}}</span></p>
+    <p class="text-gray-600 ">Autor:<span class="text-blue-600 font-bold"> <a href="{% url 'library:overview_quiz' %}?filter=1&user={{ quiz.base_quiz.user_id }}">{{ quiz.base_quiz.user_id }}</a></span></p>
     {% endif %}
 </div>
 
 <div class="flex justify-end">  
     {% if quiz.credits %}
-    <p class="text-gray-600 mb-2">Credits:<span class="font-bold"> {{ quiz.credits }}</span></p>
+    <p class="text-gray-600 mb-2">Credits:<span class="text-blue-600 font-bold"> {{ quiz.credits }}</span></p>
     {% endif %}
 </div>
 
 </div>
+
 {% endblock %}

django/templates/library/form.html

@@ -5,6 +5,23 @@
     <form method="post" enctype="multipart/form-data">
         {% csrf_token %}
         {{ form.as_p }}
+
+        {% if form.instance.image %}
+        <img src="{{ form.instance.image.image.url }}" style="max-width: 100px;" alt="Bild der Frage">
+        <label for="reset_image">
+            <input type="checkbox" name="reset_image" id="reset_image">
+            Bild zurücksetzen
+        </label>
+        {% endif %}
+        <div>
+            <label class="font-bold" for="quiz_image">Bild:</label>
+            <input  class="bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400" type="file" name="quiz_image" id="quiz_image">
+        </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 %}" 
                class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">

django/templates/library/overview_quiz.html

@@ -2,21 +2,8 @@
 {% load static %}
 
 {% block extra_css %}
-<link rel="stylesheet" href="{% static 'swiper/swiper-bundle.min.css' %}">
 <style>
-  .swiper {
-    width: 100%;
-    height: 100%;
-  }
 
-  .swiper-slide {
-    text-align: center;
-    font-size: 18px;
-    background: #fff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
 
   .custom-outline {
     -webkit-text-stroke: 0.2px rgb(0, 0, 0);
@@ -55,15 +42,15 @@
         <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">
+            <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">
+            <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">
+            <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">
@@ -97,7 +84,7 @@
           <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.url }});">
+                style="background-image: url({{ quiz.image.image.url }});">
             </div>
           </div>
          
@@ -167,6 +154,7 @@
             
             <!-- 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>
@@ -175,6 +163,9 @@
                 {% 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>
 
@@ -284,7 +275,7 @@
           <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.url }});">
+                style="background-image: url({{ quiz.image.image.url }});">
             </div>
           </div>
          
@@ -355,6 +346,7 @@
             
             <!-- 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>
@@ -363,6 +355,9 @@
                 {% 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>
 
@@ -479,7 +474,7 @@
           <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.url }});">
+                style="background-image: url({{ quiz.image.image.url }});">
             </div>
           </div>
           
@@ -548,6 +543,7 @@
             
             <!-- 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>
@@ -556,6 +552,9 @@
                 {% 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>
 

django/templates/library/question/question_input.html

@@ -0,0 +1,93 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mx-auto px-4">
+    <div class="flex justify-between items-center mb-6">
+        <h1 class="text-2xl font-bold">{% if question %}Frage bearbeiten{% else %}Neue Eingabe Frage{% endif %}</h1>
+        <a href="{% url 'library:detail_quiz' quiz.id %}" 
+           class="bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition-colors">
+            Zurück zum Quiz
+        </a>
+    </div>
+
+    <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md">
+        <form method="post" class="space-y-6" enctype="multipart/form-data">
+            {% csrf_token %}
+            
+            <!-- Question Text -->
+            <div>
+                <label for="question" class="block text-sm font-medium text-gray-700">Frage</label>
+                <div class="mt-1">
+                    <textarea name="question" id="question" rows="4"
+                           class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           required>{{ question.data.question }}</textarea>
+                </div>
+            </div>
+
+            {% if image %}
+            <img src="{{ image.image.url }}" style="max-width: 100px;" alt="Bild der Frage">
+            <label for="reset_image">
+                <input type="checkbox" name="reset_ques_image" id="reset_ques_image">
+                Bild zurücksetzen
+            </label>
+            {% endif %}
+            <div>
+                <label class="font-bold" for="question_image">Bild:</label>
+                <input class="bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400" type="file" name="question_image" id="question_image">
+            </div>
+
+            <!-- Eingabe  -->
+            {% if question and question.data.options %}
+            {% for option in question.data.options %}
+            <div> 
+                <label class="block text-sm font-medium text-gray-700 mb-2">Richtige Antwort</label>
+                <div class="flex space-x-4">
+                    <textarea name="correct_answer" rows="2"
+                    class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    required>{{ option.value }}</textarea>
+            
+                </div>
+
+            </div>
+            {% endfor %}
+            {% else %}
+            <div> 
+                <label class="block text-sm font-medium text-gray-700 mb-2">Richtige Antwort</label>
+                <div class="flex space-x-4">
+                    <textarea name="correct_answer" rows="2"
+                    class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    required></textarea>
+            
+                </div>
+
+            </div>
+            {% endif %}
+           
+
+            <div class="p-4">
+                <label class="font-bold" for="time_per_question">Zeit pro Frage:</label>
+                <select name="time_per_question" id="time_per_question">
+                    <option value="10" {% if standard_time_per_question == "10" or time_per_question == "10" %}selected{% endif %}>10 Sekunden</option>
+                    <option value="20" {% if standard_time_per_question == "20" or time_per_question == "20" %}selected{% endif %}>20 Sekunden</option>
+                    <option value="30" {% if standard_time_per_question == "30" or time_per_question == "30" %}selected{% endif %}>30 Sekunden</option>
+                    <option value="45" {% if standard_time_per_question == "45" or time_per_question == "45" %}selected{% endif %}>45 Sekunden</option>
+                    <option value="60" {% if standard_time_per_question == "60" or time_per_question == "60" %}selected{% endif %}>1 Minute</option>
+                    <option value="120" {% if standard_time_per_question == "120" or time_per_question == "120" %}selected{% endif %}>2 Minuten</option>
+                    <option value="300" {% if standard_time_per_question == "300" or time_per_question == "300" %}selected{% endif %}>5 Minuten</option>
+                </select>
+            </div>
+
+            <div class="flex justify-end space-x-3">
+                <a href="{% url 'library:detail_quiz' quiz.id %}" 
+                   class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    Abbrechen
+                </a>
+                <button type="submit" 
+                        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    {% if question %}Speichern{% else %}Erstellen{% endif %}
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}

django/templates/library/question/question_multiple_choice.html

@@ -25,7 +25,11 @@
 
             
             {% if image %}
-            <img src="{{ 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
+            </label>
             {% endif %}
             <div>
                 <label class="font-bold" for="question_image">Bild:</label>

django/templates/library/question/question_true_false.html

@@ -25,7 +25,11 @@
             </div>
 
             {% if image %}
-            <img src="{{ 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
+            </label>
             {% endif %}
             <div>
                 <label class="font-bold" for="question_image">Bild:</label>

django/templates/partials/_nav.html

@@ -1,26 +1,31 @@
-<nav class="flex justify-between items-center bg-blue-600 h-12 px-4 sm:px-6  rounded-lg mt-1 m-2 shadow-md overflow-x-auto whitespace-nowrap">
+<nav id="main-nav" class="relative bg-blue-600 rounded-lg mt-1 m-2 shadow-md transition-all duration-300">
+    <!-- Desktop Navigation Bar -->
+    <div class="flex justify-between items-center h-12 px-4 sm:px-6 overflow-x-auto whitespace-nowrap">
+        <!-- Logo / Left section -->
         <div class="flex items-center flex-shrink-0 md:w-32">
-        <h2 class="text-xl  font-bold text-white hover:scale-110 transition duration-200 ">
+            <h2 class="text-xl font-bold text-white hover:scale-110 transition duration-200">
                 <a href="{% url 'homepage:home' %}">qivip</a>
             </h2>
         </div>
 
-<div class="flex justify-center items-center  min-w-40">
+        <!-- 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">
-        <input 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">
+                <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">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 md:size-6 ">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5 md:size-6">
                         <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
                     </svg>              
                 </button>
-    </form></div>
+            </form>
+        </div>
     
-
-    <div class="flex items-center space-x-4 md:w-40 ">
+        <!-- Desktop Navigation Links - Hidden on mobile -->
+        <div class="hidden md:flex items-center">
             <ul class="flex space-x-4 qp-nav-list">
                 {% if show_search %}
-            <li class="hidden md:flex"><a href="{% url 'library:overview_quiz' %}">Bibliothek</a></li>
+                <li><a href="{% url 'library:overview_quiz' %}">Bibliothek</a></li>
                 {% else%}
                 <li><a href="{% url 'library:overview_quiz' %}">Bibliothek</a></li>
                 {% endif %}
@@ -31,4 +36,158 @@
                 {% endif %}
             </ul>
         </div>
+
+        <!-- Mobile menu button - Only visible on mobile -->
+        <div class="flex md:hidden items-center">
+            <button id="mobile-menu-button" class="text-white focus:outline-none">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+            </button>
+        </div>
+    </div>
+
+    <!-- Mobile Navigation Menu - Hidden by default - FULLWIDTH DROPDOWN -->
+    <div id="mobile-menu" class="hidden absolute w-full z-50 md:hidden opacity-0 transform -translate-y-2 transition-all duration-300">
+        <div class="bg-blue-500 pt-3 pb-4 rounded-b-lg shadow-inner">
+            <!-- Search in mobile menu -->
+            <form method="get" action="{% url 'library:overview_quiz' %}" class="px-4 mb-4">
+                <div class="flex items-center justify-center bg-white rounded-full px-4 py-2 shadow-md">
+                    <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">
+                    <button class="text-blue-600">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" 
+                                stroke="currentColor" class="size-5">
+                            <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>              
+                    </button>
+                </div>
+
+                <datalist id="quiz-names-desktop">
+                    {% for quiz in quiz_names %}
+                        <option value="{{ quiz.name }}">
+                    {% endfor %}
+                </datalist>
+
+                <datalist id="quiz-names-mobile">
+                    {% for quiz in quiz_names %}
+                        <button value="{{ quiz.name }}" onclick="performSearch(this.value)"><option value="{{ quiz.name }}" ></option></button>
+                    {% endfor %}
+                </datalist>
+                
+                
+
+              
+                {{ quiz_names|json_script:"quiz-names-data" }}
+
+                <script>
+                    async function fetchQuizNames() {
+                        try {
+                            const response = await fetch("{% url 'library:quiz_names_json' %}");
+                            if (!response.ok) throw new Error("Netzwerkfehler");
+                            const data = await response.json();
+                            if (Array.isArray(data)) return data;
+                        } catch (err) {
+                            console.error("Fehler beim Laden der Quiz-Namen:", err);
+                        }
+                        return [];
+                    }
+                
+                    function setupAutocomplete(inputId, datalistId, quizNames) {
+                        const searchInput = document.getElementById(inputId);
+                        const datalist = document.getElementById(datalistId);
+                        if (!searchInput || !datalist) return;
+                
+                        // Wenn der Benutzer den Text ändert, Filter anwenden
+                        searchInput.addEventListener('input', () => {
+                            const value = searchInput.value.toLowerCase();
+                            datalist.innerHTML = '';
+                            quizNames
+                                .filter(name => name.toLowerCase().includes(value))
+                                .slice(0, 10)
+                                .forEach(name => {
+                                    const option = document.createElement('option');
+                                    option.value = name;
+                                    datalist.appendChild(option);
+                                    
+                                });
+                        });
+       
+
+                    }
+                
+                    // Funktion zum Durchführen der Suche
+                    function performSearch(query) {
+                        datalist.innerHTML = '';
+                        // Hier kann deine Logik zur Verarbeitung der Suche eingefügt werden
+
+                        // Falls du die Seite zu einer Suchergebnisseite weiterleiten möchtest:
+                        window.location.href = `{% url 'library:overview_quiz' %}?search=${query}`;
+                    }
+                
+                    document.addEventListener('DOMContentLoaded', async () => {
+                        const quizNames = await fetchQuizNames();
+                        setupAutocomplete('quiz-search-desktop', 'quiz-names-desktop', quizNames);
+                        setupAutocomplete('quiz-search-mobile', 'quiz-names-mobile', quizNames);
+                    });
+                </script>
+                
+                    
+                
+            </form>
+
+            <!-- Mobile Navigation Links -->
+            <div class="space-y-2 px-4">
+                <a href="{% url 'library:overview_quiz' %}" class="block py-2 text-white font-medium rounded-lg hover:bg-blue-600 transition duration-200">
+                    Bibliothek
+                </a>
+                {% if user.is_authenticated %}
+                <a href="{% url 'accounts:home' %}" class="block py-2 text-white font-medium rounded-lg hover:bg-blue-600 transition duration-200">
+                    Konto
+                </a>
+                {% else %}
+                <a href="{% url 'accounts:login' %}" class="block py-2 text-white font-medium rounded-lg hover:bg-blue-600 transition duration-200">
+                    Anmelden
+                </a>
+                {% endif %}
+            </div>
+        </div>
+    </div>
 </nav>
+
+<!-- Mobile Menu Script -->
+<script>
+    document.addEventListener('DOMContentLoaded', function() {
+        const mobileMenuButton = document.getElementById('mobile-menu-button');
+        const mobileMenu = document.getElementById('mobile-menu');
+        const mainNav = document.getElementById('main-nav');
+
+        mobileMenuButton.addEventListener('click', function() {
+            // Toggle menu visibility
+            if (mobileMenu.classList.contains('hidden')) {
+                // Show menu
+                mobileMenu.classList.remove('hidden');
+                // Entferne unten abgerundete Ecken der Navbar wenn Menü offen
+                mainNav.classList.remove('rounded-lg');
+                mainNav.classList.add('rounded-t-lg');
+                // Animation einfahren
+                setTimeout(() => {
+                    mobileMenu.classList.remove('opacity-0', 'transform', '-translate-y-2');
+                    mobileMenu.classList.add('opacity-100');
+                }, 50);
+            } else {
+                // Ausfahren Animation
+                mobileMenu.classList.add('opacity-0', 'transform', '-translate-y-2');
+                mobileMenu.classList.remove('opacity-100');
+                // Nach der Animation verstecken
+                setTimeout(() => {
+                    mobileMenu.classList.add('hidden');
+                    // Stelle die abgerundeten Ecken wieder her
+                    mainNav.classList.remove('rounded-t-lg');
+                    mainNav.classList.add('rounded-lg');
+                }, 300);
+            }
+        });
+    });
+</script>

django/templates/play/game/finished.html

@@ -11,6 +11,7 @@
             </div>
                     
             {% if not is_host %}
+            {% if rating_enabled %}
             <div class="bg-blue-50 rounded-lg p-6 mb-8">
                 <h2 class="text-2xl font-bold text-blue-800 mb-4 text-center">Wie hat dir das Quiz gefallen?</h2>
                 <div class="stars flex justify-center space-x-4 mb-4">
@@ -22,6 +23,9 @@
                 </div>
                 <p id="rating-message" class="text-center text-blue-600 font-medium"></p>
             </div>
+            {% else %}
+                <p class="text-center text-blue-600 font-medium mb-8">Bewertungen sind deaktiviert</p>
+            {% endif %}
             {% endif %}
 
             <div class="text-center">

django/templates/play/game/question_host.html

@@ -15,7 +15,7 @@
 
         {% if question_image %}
             <div class="flex justify-center">
-                <img class="m-4" src="{{ question_image.url }}" style="max-width: 500px;" alt="Bild der Frage">
+                <img class="m-4 w-full max-w-[500px] " src="{{ question_image.image.url }}" alt="Bild der Frage">
             </div>
         {% endif %}
         
@@ -36,7 +36,7 @@
                 <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 
@@ -48,7 +48,21 @@
                 </button>
             {% endfor %}
         </div>
+        {% else %}
+        {% if request.session.mode == "learn" %}
+        <form action="">
+        <input id="textanswer" type="text" placeholder="DEINE ANTWORT" 
+        class="answer-option text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option lg:w-80 ">
    
+ <button {% if request.session.mode == "learn" %}
+ onclick="submitAnswer( -1 );" {% endif %}
+         class="mt-2 text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option">
+     abschicken
+ </button>
+</form>
+  
+        {% endif %}
+        {% endif %}
 
 
     </div>
@@ -59,6 +73,7 @@
 
 {% block extra_js %}
 {% include 'play/game/common_scripts.html' %}
+{% include 'play/game/sound.html' %}
 <script>
     const joinCode = '{{ quiz_game.join_code }}';
     const hostId = '{{ host_id }}';
@@ -155,7 +170,9 @@
         gameSocket.send(JSON.stringify({
             'type': 'update_participants'
         }));
+        {% if request.session.mode != "learn" %} 
         updateTimer();
+        {% endif %}
     };
 
     
@@ -177,10 +194,20 @@
 
     function submitAnswer(optionIndex) {
         if (hasAnswered) return;
+        let input = ""; // Declare input here
 
+        try {
+       input = document.getElementById("textanswer").value;
+      } catch (e) {
+       input = "";
+       }
         hasAnswered = true;
         const now = Date.now();
-        const timeRemaining = Math.max(0, questionDuration - (now - questionStartTime));
+        let timeRemaining = Math.max(0, questionDuration - (now - questionStartTime));
+        {% if request.session.mode == "learn" %} 
+         timeRemaining = questionDuration;
+        {% endif %}
+        
 
         // Disable all options and highlight selected
         const options = document.getElementsByClassName('answer-option');
@@ -194,14 +221,23 @@
                 option.classList.add('opacity-50');
             }
         }
-
+        if(input!=""){
         // Send answer to server
         gameSocket.send(JSON.stringify({
             type: 'submit_answer',
             participant_id: participantId,
-            answer: optionIndex,
+            answer:input, 
             time_remaining: timeRemaining
         }));
     }
+    else{
+        gameSocket.send(JSON.stringify({
+            type: 'submit_answer',
+            participant_id: participantId,
+            answer:optionIndex,
+            time_remaining: timeRemaining
+        }));
+    }
+    }
 </script>
 {% endblock %}

django/templates/play/game/question_participant.html

@@ -15,7 +15,7 @@
             <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>
-
+        {% if question_data.type  != "input" %}
         <div class="grid grid-cols-2 gap-4" id="options-container">
             {% for option in question_data.options %}
                 <button 
@@ -26,6 +26,17 @@
                 </button>
             {% endfor %}
         </div>
+        {% else %}
+        <form action="">
+        <input id="textanswer" type="text" placeholder="DEINE ANTWORT" 
+        class="answer-option text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option lg:w-80">
+ <button
+ onclick="submitAnswer( -1 );"
+         class="mt-2 text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option">
+     abschicken
+ </button>
+ </form>
+        {% endif %}
     </div>
 </div>
 {% endblock %}
@@ -57,6 +68,13 @@
 
     function submitAnswer(optionIndex) {
         if (hasAnswered) return;
+        let input = ""; // Declare input here
+
+        try {
+        input = document.getElementById("textanswer").value;
+        } catch (e) {
+        input = "";
+        }
         
         hasAnswered = true;
         const now = Date.now();
@@ -75,14 +93,26 @@
             }
         }
 
+        if(input!=""){
         // Send answer to server
         gameSocket.send(JSON.stringify({
             type: 'submit_answer',
             participant_id: participantId,
-            answer: optionIndex,
+            answer:input, 
             time_remaining: timeRemaining
         }));
     }
+    else{
+        gameSocket.send(JSON.stringify({
+            type: 'submit_answer',
+            participant_id: participantId,
+            answer:optionIndex,
+            time_remaining: timeRemaining
+        }));
+    }
+    }
+
+    
 
     // Timer
     function updateTimer() {

django/templates/play/game/score_overview.html

@@ -10,50 +10,146 @@
             <p class="text-lg mb-2">{{ question_data.question }}</p>
             <div class="grid grid-cols-2 gap-4">
                 {% for option in question_data.options %}
-                    <div class="p-4 rounded-lg {% if option.is_correct %}bg-green-100 border-2 border-green-500 {% else %} bg-gray-100 {% endif %}">
+                
+            <div id="option-box-{{ forloop.counter0 }}" class="bg-gray-100 relative p-4 rounded-lg overflow-hidden {% if option.is_correct %} border-2 border-green-500{% else %}border-2 border-red-500{% endif %}">
+            
+            <div id="option-fill-{{ forloop.counter0 }}" class="absolute left-0 top-0 h-full {% if option.is_correct %}bg-green-300 {% else %}bg-red-300 {% endif %} opacity-50 z-0 transition-all duration-1500 " style="width: 0%;"></div>
+            <div class="relative z-10">
             <p class="text-lg">{{ option.value }}</p>
             <p class="text-gray-600" id="option-count-{{ forloop.counter0 }}">0 Antworten</p>
+             
+            </div>
         </div>
                 {% endfor %}
             </div>
         </div>
-    {% if request.session.mode != "learn" %} 
 
         <div class="mb-6">
             <h2 class="text-xl font-bold mb-4">Punktestand</h2>
-            <div 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 {% if forloop.first %}bg-yellow-100 border-2 border-yellow-500{% else %}bg-gray-100{% endif %} rounded-lg flex justify-between items-center">
-                        <div>                    
-                             <p class="text-lg font-bold">{{ participant.display_name }}</p>
-                             <p class="text-gray-600">{{ participant.score }} Punkte</p> 
-                        </div>                     
-                        {% if participant.last_answer_correct %}
-                            <span class="text-green-500">✓</span>
-                        {% elif participant.last_answer_correct == False %}
-                            <span class="text-red-500">✗</span>
-                        {% endif %}
-                    </div>
+                        <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 %}
+                               </div>
+                            <script>                                
+
+                            async function start() {
+
+                            elements=document.getElementsByClassName("show-score");
+                            for (let i = 0; i < elements.length; i++) {
+                            const el = elements[i];
+
+                            let counter=Number(el.getAttribute('data-score'))-Number(el.getAttribute('data-last-score'));
+                            let goal=Number(el.getAttribute('data-score'));
+                            let interval= setInterval(function(){
+                            el.innerHTML = counter + " Punkte";
+
+                               
+                                if(counter<=goal){
+                            el.innerHTML = counter + " Punkte";
+                            counter+=8;
+                           
+                                }
+                                else{
+                                    
+                                    el.innerHTML = goal + " Punkte";
+                                    clearInterval(interval);
+                                }
+
+                            }, 20);}}
+
+                            function bounce(){
+                                                            
+                            const names = document.getElementsByClassName("display_name");
+                            for (let i = 0; i < names.length; i++) {
+                            names[i].classList.add("animate-bounce");
+                           }
+                            }
+ 
+
+                            {% if is_last_question %}
+                            bounce();
+
+                            {% else %}
+                             start();
                         
 
                                 {% endif %}
                                 
                             
                                
+
+
+
+
+                            </script>
+
+                                                 
+                            
+                            {% if participant == my_participant or request.session.mode == "learn" %}
+                                {% if participant.last_answer_correct %}
+                           
+                            <div class="mt-1 flex justify-center border-t-2 border-gray-300 gap-1">
+
+                                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="pt-2 text-center text-green-500 font-black size-10">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+                                </svg>
+
+                                 
+                            <div class=" pt-3  text-center text-gray-600  font-bold" id="antwort-richtig">
+                            Hier erscheint gleich dein Feedback... 
+                            </div>
+                           
+                            </div>
+                            {% elif participant.last_answer_correct == False %}
+
+
+                                <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>
         </div>
-        {% endif %}
+ 
     {% 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 %}
@@ -63,8 +159,137 @@
 {% endblock %}
 
 {% block extra_js %}
-{% include 'play/game/common_scripts.html' %}
+{% if is_last_question %}
+
 <script>
+    // Hilfsfunktion für Pausen
+    function sleep(ms) {
+      return new Promise(resolve => setTimeout(resolve, ms));
+    }
+  
+    document.addEventListener('DOMContentLoaded', async function() {
+      const items = document.querySelectorAll('#scoreboard div');
+      const top3 = Array.from(items).slice(0, 3); // Nur die ersten 3 animieren
+  
+      // Sofort Startzustände für Top3 setzen, die anderen sofort sichtbar
+      items.forEach((el, index) => {
+        if (index >= 3) {
+          el.style.opacity = '1';
+          el.style.transform = 'translateY(0)';
+        } else {
+          el.style.opacity = '0';
+          el.style.transform = 'translateY(20px)';
+        }
+      });
+  
+      // Warten bevor Animation startet
+      await sleep(1500);  // <<< hier die Pause
+      
+  
+      // Transition-Eigenschaft setzen nach Render-Zyklus
+      requestAnimationFrame(() => {
+        top3.forEach(el => {
+          el.style.transition = 'all 0.8s ease';
+        });
+  
+        // Animation für Top 3 starten – von Platz 3 zu 1
+        top3.reverse().forEach((el, index) => {
+          setTimeout(() => {
+            el.style.opacity = '1';
+            el.style.transform = 'translateY(0)';
+  
+            if (index === top3.length - 1) {
+              triggerConfetti();
+
+            }
+          }, index * 1500); // Zeitversetzt aufdecken
+        });
+      });
+    });
+  
+    function triggerConfetti() {
+      const end = Date.now() + 15 * 1000;
+      (function frame() {
+        confetti({ particleCount: 2, angle: 60, spread: 55, origin: { x: 0 } });
+        confetti({ particleCount: 2, angle: 120, spread: 55, origin: { x: 1 } });
+        if (Date.now() < end) requestAnimationFrame(frame);
+      })();
+    }
+  </script>
+{% 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';
@@ -117,17 +342,25 @@
     {% endif %}
     {% endif %}
 
-    function updateAnswerStats(stats) {
+function updateAnswerStats(stats) {
+    const total = Object.values(stats).reduce((a, b) => a + b, 0) || 1;
+
     for (var optionIndex in stats) {
         if (stats.hasOwnProperty(optionIndex)) {
-                var element = document.getElementById('option-count-' + optionIndex);
-                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 + '%';
             }
         }
     }
+}
 
     // Request answer stats when page loads
     gameSocket.onopen = function(e) {

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/join_game.html

@@ -7,7 +7,7 @@
         <form action="{% url 'play:join_game' %}" method="post" class="flex flex-col gap-4">
             {% csrf_token %}
             <div class="flex gap-3 items-center justify-center">
-                <input type="text" name="game_code" placeholder="123456" maxlength="6" class="w-32 p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100 text-center tracking-wider"  autofocus>
+                <input type="number" name="game_code" placeholder="123456" maxlength="6" class="w-32 p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100 text-center tracking-wider"  autofocus>
                 <button type="submit" class="h-12 px-6 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-blue-700 active:scale-95 group" disabled>
                     <span class="hidden sm:block">Beitreten</span>
                     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 transition-transform group-hover:translate-x-1">

django/templates/play/lobby.html

@@ -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" />

django/templates/registration/delete_account_confirm.html

@@ -0,0 +1,35 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mx-auto px-4">
+    <div class="max-w-lg mx-auto mt-10">
+        <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md">
+            <div class="text-center">
+                <svg class="mx-auto h-12 w-12 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
+                </svg>
+                
+                <h2 class="mt-4 text-xl font-bold text-gray-900">Löschen bestätigen</h2>
+                
+                <p class="mt-2 text-sm text-gray-600">
+                        Möchten Sie ihren Account wirklich löschen? Diese Aktion kann nicht rückgängig gemacht werden.
+                </p>
+            </div>
+
+            <form method="post" class="mt-6">
+                {% csrf_token %}
+                <div class="flex justify-center space-x-3"> 
+                    <a href="{% url 'accounts:home' %}" 
+                       class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                        Abbrechen
+                    </a>
+                    <button type="submit" 
+                            class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
+                        Löschen
+                    </button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+{% endblock %}

django/templates/registration/password_change_form.html

@@ -0,0 +1,42 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block title %}Passwort ändern{% endblock %}
+{% block content %}
+    <div class="grid place-content-center h-120 mt-12 mb-12 ">
+    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
+        <h2 class="text-2xl text-center p-4 font-black">Passwort ändern</h2>
+        <form class="space-y-4" method="post">
+            {% if form.errors %}
+            <div class=" items-center text-red-600 font-black overflow-x-auto break-words text-center">
+                <ul>
+                    {% for field, errors in form.errors.items %}
+                        {% for error in errors %}
+                            <li>{{ error }}</li>
+                        {% endfor %}
+                    {% endfor %}
+                </ul>
+            </div>
+            {% endif %}
+            {% csrf_token %}
+            <div  class="register">
+                
+            {{ form.old_password.label_tag }} 
+            <input type="password" name="old_password" placeholder="ALTES PASSWORT" />
+            
+        </div>
+            
+        <div class="register">
+            {{ form.new_password1.label_tag }} 
+            <input type="password" name="new_password1" placeholder="NEUES PASSWORT" /> 
+        </div>
+            <div class="register">
+            {{ form.new_password2.label_tag }}  
+            <input type="password" name="new_password2" placeholder="NEUES PASSWORT WIEDERHOLEN" /> 
+        </div>
+            <button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200" type="submit">Bestätigen</button>
+            <button class="text-center text-sm w-full mt-2 font-light text-blue-600"><a href="{% url 'accounts:home' %}" class="register_link">Doch nicht ändern?</a></button>
+        </form>
+       
+    </div>
+    </div>
+{% endblock %}

django/templates/registration/password_reset_complete.html

@@ -0,0 +1,19 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block title %}Passwort zurückgesetzt{% endblock %}
+{% block content %}
+    <div class="grid place-content-center h-120 mt-12 mb-12 ">
+    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
+        <h2 class="text-2xl text-center p-4 font-black">Passwort zurückgesetzt</h2>
+        <div class="space-y-4">
+            Das Passwort wurde erfolgreich zurückgesetzt! Sie können sich nun mit dem neuen Passwort anmelden!
+            {% csrf_token %}
+            <div class="mt-4">
+            <a href="{% url 'accounts:login' %}" class="register_link"><button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200"  class="login-button">anmelden</button></a>
+        </div>
+
+        </div>
+       
+    </div>
+    </div>
+{% endblock %}

django/templates/registration/password_reset_confirm.html

@@ -0,0 +1,42 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block title %}Passwort zurücksetzen{% endblock %}
+{% block content %}
+    <div class="grid place-content-center h-120 mt-12 mb-12 ">
+    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
+        <h2 class="text-2xl text-center p-4 font-black">Passwort zurücksetzen</h2>
+        {% if validlink %} 
+        <form class="space-y-4" method="post">
+            {% if form.errors %}
+            <div class=" items-center text-red-600 font-black overflow-x-auto break-words text-center">
+                <ul>
+                    {% for field, errors in form.errors.items %}
+                        {% for error in errors %}
+                            <li>{{ error }}</li>
+                        {% endfor %}
+                    {% endfor %}
+                </ul>
+            </div>
+            {% endif %}
+            {% csrf_token %}
+            
+        <div class="register">
+            {{ form.new_password1.label_tag }}  
+            <input type="password" name="new_password1" placeholder="NEUES PASSWORT" /> 
+        </div>
+            <div class="register">
+            {{ form.new_password2.label_tag }}  
+            <input type="password" name="new_password2" placeholder="NEUES PASSWORT WIEDERHOLEN" /> 
+
+        </div>
+            <button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200" type="submit">Bestätigen</button>
+            <button class="text-center text-sm w-full mt-2 font-light text-blue-600"><a href="{% url 'accounts:home' %}" class="register_link">Doch nicht zurücksetzen?</a></button>
+        </form>
+        {% else %}
+        Dieser Link ist leider nicht mehr gültig oder abgelaufen. Bitte versuchen Sie es erneut:
+        <button class="text-center text-sm w-full mt-2 font-light text-blue-600"><a href="{% url 'accounts:password_reset' %}" class="register_link">Passwort zurücksetzen</a></button>
+        {% endif %}
+      
+    </div>
+    </div>
+{% endblock %}

django/templates/registration/password_reset_done.html

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

django/templates/registration/password_reset_email.html

@@ -0,0 +1,11 @@
+{% load i18n %}
+{% autoescape off %}
+{% blocktranslate %}Du erhältst diese E-Mail, weil du einen Passwort-Zurücksetzungsversuch bei {{ site_name }} angefragt hast.{% endblocktranslate %}
+
+{% translate "Bitte gehe zu folgender Seite und wähle ein neues Passwort:" %}
+{{ protocol }}://{{ domain }}{% url 'accounts:password_reset_confirm' uidb64=uid token=token %}
+
+{% translate "Dein Benutzername ist:" %} {{ user.get_username }}
+
+{% blocktranslate %}Danke, dass du {{ site_name }} benutzt!{% endblocktranslate %}
+{% endautoescape %}

django/templates/registration/password_reset_form.html

@@ -0,0 +1,35 @@
+{% extends 'base.html' %}
+{% load static %}
+{% block title %}Passwort ändern{% endblock %}
+{% block content %}
+    <div class="grid place-content-center h-120 mt-12 mb-12 ">
+    <div class="w-80 p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md lg:w-90">
+        <h2 class="text-2xl text-center p-4 font-black">Passwort zurücksetzen</h2>
+        <form class="space-y-4" method="post">
+            Gib hier deine E-Mail an und erhalte eine E-Mail, um das Passwort zurückzusetzen.
+            {% if form.errors %}
+            <div class=" items-center text-red-600 font-black overflow-x-auto break-words text-center">
+                <ul>
+                    {% for field, errors in form.errors.items %}
+                        {% for error in errors %}
+                            <li>{{ error }}</li>
+                        {% endfor %}
+                    {% endfor %}
+                </ul>
+            </div>
+            {% endif %}
+            {% csrf_token %}
+
+            
+        <div class="register">
+            {{ form.email.label_tag }}
+            <input type="email" name="email" placeholder="E-MAIL" /> 
+        </div>
+        
+
+            <button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200" type="submit">Bestätigen</button>
+        </form>
+       
+    </div>
+    </div>
+{% endblock %}

requirements.txt

@@ -5,3 +5,7 @@ daphne~=4.1.2    # ASGI server
 pillow~=11.1.0   # Image handling
 whitenoise~=6.6.0  # Static file serving
 django-cleanup
+redis
+channels_redis
+python-dotenv    # Production server safety
+qrcode~=7.4.2