Merge branch '59-uniocodes-austauschen' into 'master'

Resolve "Uniocodes Austauschen"

Closes #59

See merge request enrichment-2024/qivip!22

.gitignore

@@ -2,4 +2,7 @@ __pycache__
 .venv
 db.sqlite3
 tailwindcss.exe
-t-style.css
+t-style.css
+dump.rdb
+media
+node_modules

README.md

@@ -100,10 +100,10 @@ npx @tailwindcss/cli -i <INPUT-DATEI> -o <OUTPUT-DATEI> --watch --minify
 
 ```sh
 # unter Linux mit Tailwind Binärdatei:
-tailwindcss -i core/static/homepage/t-input.css -o core/static/homepage/t-style.css --watch --minify
+tailwindcss -i static/css/t-input.css -o static/css/t-style.css --watch --minify
 
-# unter Windows mit NPM:
-npx @tailwindcss/cli -i .\core\static\homepage\t-input.css -o .\core\static\homepage\t-style.css --watch --minify
+# unter Windows mit NPM (in bash mit '/' statt '\'):
+npx @tailwindcss/cli -i .\static\css\t-input.css -o .\static\css\t-style.css --watch --minify
 ```
 
 ## Issue - Merge Request - Merge

django/accounts/views.py

@@ -1,5 +1,6 @@
 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
 
 # Create your views here.
@@ -11,8 +12,9 @@ def register(response):
     if response.method == "POST":
         form = RegisterForm(response.POST)
         if form.is_valid():
-            form.save()
-            return redirect("home")
+            user=form.save()
+            login(response, user) #automatischer Login nach Registrierung 
+            return redirect("accounts:home")
     else:
         form = RegisterForm()
 

django/core/settings.py

@@ -35,7 +35,7 @@ INSTALLED_APPS = [
     'homepage.apps.HomepageConfig',
     'components.apps.ComponentsConfig',
     'accounts.apps.AccountsConfig',
-    'play.apps.PlayConfig',
+    'play',
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
@@ -128,4 +128,8 @@ STATICFILES_DIRS = [BASE_DIR / 'static']
 
 DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
 
-LOGIN_URL = '/account/login/'
+LOGIN_URL = '/account/login/'
+import os
+
+MEDIA_URL = '/media/'  # URL, um auf Medien-Dateien zuzugreifen
+MEDIA_ROOT = os.path.join(BASE_DIR, 'media')  # Speicherort für hochgeladene Dateien

django/core/urls.py

@@ -23,4 +23,5 @@ urlpatterns = [
     path('', include('homepage.urls')),
     path('play/', include('play.urls')),
     path('library/', include('library.urls')),
+    path('components/', include('components.urls'))
 ]

django/library/forms.py

@@ -4,9 +4,28 @@ from .models import QivipQuiz, QivipQuestion
 class QuizForm(forms.ModelForm):
     class Meta:
         model = QivipQuiz
-        fields = ['name', 'description', 'status', 'category', 'tags',"difficulty"]
+        fields = ['name', 'description','image', 'status', 'category', 'tags',"difficulty"]
 
 class QuestionForm(forms.ModelForm):
     class Meta:
         model = QivipQuestion
-        fields = ['quiz_id', 'data']
+        fields = ['quiz_id', 'data']
+
+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 ...',
+    }))
+
+
+    min_amout_questions = forms.IntegerField(required=False, min_value=1,   label="Minimale Anzahl an Fragen", widget=forms.NumberInput(attrs={
+        'class': 'border-2 border-gray-300 rounded-lg p-2 w-full'
+    }))
+
+    max_amout_questions = forms.IntegerField(required=False, min_value=1,  label="Maximale Anzahl an Fragen", widget=forms.NumberInput(attrs={
+        'class': 'border-2 border-gray-300 rounded-lg p-2 w-full'
+    }))
+    user = forms.CharField(required=False, label="von User", widget=forms.TextInput(attrs={
+        'class': 'border-2 border-gray-300 rounded-lg p-2 w-full'
+    }))

django/library/migrations/0016_alter_qivipquiz_status.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-03-16 12:53
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0015_alter_qivipquiz_difficulty'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='status',
+            field=models.CharField(choices=[('öffentlich', 'Öffentlich'), ('versteckt', 'Versteckt'), ('privat', 'Privat')], default='öffentlich', max_length=10),
+        ),
+    ]

django/library/migrations/0017_alter_qivipquiz_difficulty.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-03-16 12:54
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0016_alter_qivipquiz_status'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='difficulty',
+            field=models.CharField(choices=[('1', '1'), ('2', '2'), ('3', '3'), ('4', '4'), ('5', '5'), ('nicht gesetzt', 'nicht gesetzt')], default='nicht gesetzt', help_text='1: niedrigste Schwierigkeit und 5: höchste Schwierigkeit', max_length=13),
+        ),
+    ]

django/library/migrations/0018_alter_qivipquiz_description.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-03-16 13:03
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0017_alter_qivipquiz_difficulty'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='description',
+            field=models.TextField(blank=True, default='In dem Quiz geht es um ...', max_length=150, null=True),
+        ),
+    ]

django/library/migrations/0019_alter_qivipquiz_description.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-03-16 13:05
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0018_alter_qivipquiz_description'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='description',
+            field=models.TextField(default='In dem Quiz geht es um ...', max_length=255, null=True),
+        ),
+    ]

django/library/migrations/0020_alter_qivipquiz_description.py

@@ -0,0 +1,19 @@
+# Generated by Django 5.1.7 on 2025-03-16 13:08
+
+import library.models
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0019_alter_qivipquiz_description'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='description',
+            field=models.TextField(default='In dem Quiz geht es um ...', max_length=255, validators=[library.models.QivipQuiz.validate_description]),
+        ),
+    ]

django/library/migrations/0021_alter_qivipquiz_name.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-03-16 14:34
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0020_alter_qivipquiz_description'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='name',
+            field=models.CharField(max_length=100),
+        ),
+    ]

django/library/migrations/0022_alter_qivipquiz_description_alter_qivipquiz_name.py

@@ -0,0 +1,24 @@
+# Generated by Django 5.1.7 on 2025-03-16 14:35
+
+import library.models
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0021_alter_qivipquiz_name'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='description',
+            field=models.TextField(default='In dem Quiz geht es um ...', max_length=200, validators=[library.models.QivipQuiz.validate_description]),
+        ),
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='name',
+            field=models.CharField(max_length=75),
+        ),
+    ]

django/library/migrations/0023_qivipquiz_image.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-03-21 17:24
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0022_alter_qivipquiz_description_alter_qivipquiz_name'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='qivipquiz',
+            name='image',
+            field=models.ImageField(blank=True, null=True, upload_to='quiz_images/'),
+        ),
+    ]

django/library/migrations/0024_alter_qivipquiz_image.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-03-22 10:22
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0023_qivipquiz_image'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquiz',
+            name='image',
+            field=models.ImageField(blank=True, max_length=256, null=True, upload_to='quiz_images/'),
+        ),
+    ]

django/library/models.py

@@ -2,12 +2,13 @@ from django.db import models
 from django.contrib.auth.models import User
 from django.utils.text import slugify
 import uuid
+from django.core.exceptions import ValidationError
 
 class QivipQuiz(models.Model):
     STATUS_VALUES = {
-        "public": "Öffentlich",
-        "hidden": "Versteckt",
-        "private": "Privat",
+        "öffentlich": "Öffentlich",
+        "versteckt": "Versteckt",
+        "privat": "Privat",
     }
     DIFFICULTY_VALUES = {
         "1": "1",
@@ -15,20 +16,25 @@ class QivipQuiz(models.Model):
         "3": "3",
         "4": "4",
         "5": "5",
-        "not defined":"nicht gesetzt",
+        "nicht gesetzt":"nicht gesetzt",
 
     }
+        
+    def validate_description(value):
+        if value.strip() == "In dem Quiz geht es um ...":
+            raise ValidationError("Bitte gib eine aussagekräftige Beschreibung ein.")
 
+    image = models.ImageField(max_length=256, upload_to='quiz_images/', blank=True, null=True)  # Bild speichern in media/quiz_images/
     uuid = models.UUIDField(default=uuid.uuid4, editable=False, unique=True)
     user_id = models.ForeignKey(User, on_delete=models.CASCADE, related_name='quiz')
     creation_date = models.DateTimeField(auto_now_add=True)
     update_date = models.DateTimeField(auto_now=True)
-    status = models.CharField(max_length=10, choices=list(STATUS_VALUES.items()), default="public")
+    status = models.CharField(max_length=10, choices=list(STATUS_VALUES.items()), default="öffentlich")
     category = models.ForeignKey('QuizCategory', related_name='quiz', on_delete=models.CASCADE)
     tags = models.ManyToManyField('Tag', blank=True)
-    name = models.CharField(max_length=255)
-    description = models.TextField(blank=True, null=True, default="In dem Quiz geht es um ...")
-    difficulty= models.CharField(max_length=11, choices=list(DIFFICULTY_VALUES.items()), default="not defined", help_text="1: niedrigste Schwierigkeit und 5: höchste Schwierigkeit")
+    name = models.CharField(max_length=75)
+    description = models.TextField(validators=[validate_description],max_length=200,blank=False, default="In dem Quiz geht es um ...")
+    difficulty= models.CharField(max_length=13, choices=list(DIFFICULTY_VALUES.items()), default="nicht gesetzt", help_text="1: niedrigste Schwierigkeit und 5: höchste Schwierigkeit")
 
     def __str__(self):
         return self.name

django/library/urls.py

@@ -1,6 +1,8 @@
 from django.urls import path
-from . import views
 
+from django.conf import settings
+from . import views
+from django.conf.urls.static import static
 app_name = 'library'
 
 urlpatterns = [
@@ -12,4 +14,6 @@ urlpatterns = [
     path('question/new/', views.new_question, name='new_question'),
     path('question/edit/<int:pk>/', views.edit_question, name='edit_question'),
     path('question/delete/<int:pk>/', views.delete_question, name='delete_question'),
-]
+]# Nur für die Entwicklungsumgebung
+if settings.DEBUG:
+    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

django/library/views.py

@@ -6,24 +6,117 @@ from django.contrib import messages
 from .models import QivipQuiz, QivipQuestion
 from .forms import QuizForm, QuestionForm
 import json
-
+from django.core.paginator import Paginator
+from .models import QivipQuiz
+from .forms import QuizFilterForm
+from django.db.models import Count
+from django.contrib.auth.models import User
 # Übersicht aller Quizze
-@login_required
-def overview_quiz(request):
-    quizzes = QivipQuiz.objects.filter(user_id=request.user)
-    return render(request, 'library/overview_quiz.html', {'quizzes': quizzes})
 
+def overview_quiz(request):
+    
+    #Filter
+    form = QuizFilterForm(request.GET)
+
+
+    try:
+        
+         filter_my_quizzes = QivipQuiz.objects.filter(user_id=request.user).annotate(max_amout_questions=Count('question'))
+    except:
+        filter_my_quizzes = QivipQuiz.objects.none()
+  
+    filter_other_quizzes = QivipQuiz.objects.annotate(max_amout_questions=Count('question'))
+    
+       
+
+
+    if form.is_valid():
+        search = form.cleaned_data.get('search')
+        username= form.cleaned_data.get('user')
+        max_amout_questions= form.cleaned_data.get('max_amout_questions')
+        min_amout_questions= form.cleaned_data.get('min_amout_questions')
+        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)
+           try:
+               filter_my_quizzes =filter_my_quizzes.filter(max_amout_questions__gte=min_amout_questions)
+           except:
+               filter_my_quizzes = 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
+        
+            # Anzahl der Quiz pro Seite für Swiper
+
+
+        context = {
+            'show_search': True,
+            'filter_my_quizzes': filter_my_quizzes,
+            'filter_other_quizzes': filter_other_quizzes,
+            'form': form,
+        }
+    
+
+        return render(request, 'library/overview_quiz.html', context)
+
+      
+
+
+    try:
+        filter_my_quizzes = QivipQuiz.objects.filter(user_id=request.user)
+        filter_other_quizzes = QivipQuiz.objects.filter(status='öffentlich').exclude(user_id=request.user).filter(question__isnull=False).distinct()
+        context = {
+            'show_search': True,
+            'filter_my_quizzes': filter_my_quizzes,
+            'filter_other_quizzes': filter_other_quizzes,
+            'form': form,
+        }
+        return render(request, 'library/overview_quiz.html', context)
+
+    except:
+        filter_other_quizzes = QivipQuiz.objects.filter(status='öffentlich').filter(question__isnull=False).distinct()
+        context = {
+            'show_search': True,
+            'filter_my_quizzes': None,
+            'filter_other_quizzes': filter_other_quizzes,
+            'form': form,
+        }
+        return render(request, 'library/overview_quiz.html', context)
+    
+    
 # Neues Quiz erstellen
 @login_required
 def new_quiz(request):
     if request.method == 'POST':
-        form = QuizForm(request.POST)
+        form = QuizForm(request.POST, request.FILES)
         if form.is_valid():
             quiz = form.save(commit=False)
             quiz.user_id = request.user
             quiz.save()
             form.save_m2m()  # Speichert die Many-to-Many Beziehungen (Tags)
-            return redirect('library:edit_quiz', pk=quiz.pk)
+            return redirect('library:detail_quiz', pk=quiz.pk)
+            
     else:
         form = QuizForm()
     return render(request, 'library/form.html', {'form': form})
@@ -33,10 +126,10 @@ def new_quiz(request):
 def edit_quiz(request, pk):
     quiz = get_object_or_404(QivipQuiz, pk=pk, user_id=request.user)
     if request.method == 'POST':
-        form = QuizForm(request.POST, instance=quiz)
+        form = QuizForm(request.POST, instance=quiz, files=request.FILES) 
         if form.is_valid():
             form.save()
-            return redirect('library:overview_quiz')
+            return redirect('library:detail_quiz', pk=quiz.pk)
     else:
         form = QuizForm(instance=quiz)
     return render(request, 'library/form.html', {'form': form})

django/package-lock.json

@@ -0,0 +1,35 @@
+{
+  "name": "django",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "django",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "swiper": "^11.2.6"
+      }
+    },
+    "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"
+        },
+        {
+          "type": "open_collective",
+          "url": "http://opencollective.com/swiper"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.7.0"
+      }
+    }
+  }
+}

django/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "django",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "swiper": "^11.2.6"
+  }
+}

django/play/admin.py

@@ -1,3 +1,6 @@
 from django.contrib import admin
+from .models import QuizGame, QuizGameParticipant
 
 # Register your models here.
+admin.site.register(QuizGame)
+admin.site.register(QuizGameParticipant)

django/play/migrations/0001_initial.py

@@ -0,0 +1,37 @@
+# Generated by Django 5.1.7 on 2025-03-15 13:48
+
+import django.db.models.deletion
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        ('library', '0015_alter_qivipquiz_difficulty'),
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='QuizGame',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('join_code', models.CharField(max_length=6, unique=True)),
+                ('host_user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='host_user', to=settings.AUTH_USER_MODEL)),
+                ('quiz_id', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, to='library.qivipquiz')),
+            ],
+        ),
+        migrations.CreateModel(
+            name='QuizGameParticipant',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('display_name', models.CharField(max_length=15, verbose_name='Anzeigename')),
+                ('score', models.IntegerField(max_length=10, verbose_name='Punkte')),
+                ('avatar', models.CharField(max_length=200)),
+                ('quiz_game', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='participant', to='play.quizgame')),
+            ],
+        ),
+    ]

django/play/migrations/0002_alter_quizgame_join_code.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-03-15 13:59
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('play', '0001_initial'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='quizgame',
+            name='join_code',
+            field=models.CharField(blank=True, max_length=6, unique=True),
+        ),
+    ]

django/play/migrations/0003_quizgameparticipant_participant_id_and_more.py

@@ -0,0 +1,29 @@
+# Generated by Django 5.1.7 on 2025-03-15 19:05
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('play', '0002_alter_quizgame_join_code'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='quizgameparticipant',
+            name='participant_id',
+            field=models.CharField(default=1, max_length=200, unique=True),
+            preserve_default=False,
+        ),
+        migrations.AlterField(
+            model_name='quizgameparticipant',
+            name='avatar',
+            field=models.CharField(blank=True, default='', max_length=200),
+        ),
+        migrations.AlterField(
+            model_name='quizgameparticipant',
+            name='score',
+            field=models.IntegerField(default=0, verbose_name='Punkte'),
+        ),
+    ]

django/play/models.py

@@ -1,3 +1,40 @@
 from django.db import models
+from django.contrib.auth.models import User
+from library.models import QivipQuiz
+from django.http import response
+import random, string
 
 # Create your models here.
+class QuizGame(models.Model):
+    host_user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='host_user')
+    join_code = models.CharField(max_length=6, unique=True, blank=True)
+    quiz_id = models.ForeignKey(QivipQuiz, on_delete=models.CASCADE)
+
+    def save(self, *args, **kwargs):
+        if not self.join_code:
+            self.join_code = self.generate_unique_code()
+        super().save(*args, **kwargs)
+
+    def generate_unique_code(self):
+        for i in range(10):
+            new_code = ''.join(random.choices(string.digits, k=6))
+            if not QuizGame.objects.filter(join_code=new_code).exists():
+                return new_code
+
+class QuizGameParticipant(models.Model):
+    participant_id = models.CharField(max_length=200, unique=True)
+    display_name = models.CharField(verbose_name="Anzeigename", max_length=15)
+    quiz_game = models.ForeignKey(QuizGame, on_delete=models.CASCADE, related_name="participant")
+    score = models.IntegerField(verbose_name="Punkte", default=0)
+    avatar = models.CharField(max_length=200, blank=True, default="")
+
+    def save(self, *args, **kwargs):
+        if not self.participant_id:
+            self.participant_id = self.generate_unique_id()
+        super().save(*args, **kwargs)
+
+    def generate_unique_id(self):
+        for i in range(10):
+            new_id = ''.join(random.choices(string.digits + string.ascii_lowercase, k=60))
+            if not QuizGameParticipant.objects.filter(participant_id=new_id).exists():
+                return new_id

django/play/urls.py

@@ -4,6 +4,7 @@ from . import views
 app_name = 'play'
 
 urlpatterns = [
-    path('lobby', views.lobby, name='lobby'),
+    path('lobby/<str:join_code>', views.lobby, name='lobby'),
+    path('lobby/<str:join_code>/participate', views.create_participant, name='create_participant'),
     path('join', views.join_game, name='join_game'),
 ]

django/play/views.py

@@ -1,8 +1,60 @@
 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
+from django.http import HttpResponseRedirect
 
 # Create your views here.
-def lobby(request):
-    return render(request, 'play/lobby.html')
+def lobby(request, join_code):
+    if not "participant_id" in request.COOKIES:
+        return redirect('play:create_participant', join_code=join_code)
+    participant_id = request.COOKIES['participant_id']
+    quiz_game = get_object_or_404(QuizGame, join_code=join_code)
+    quiz = get_object_or_404(QivipQuiz, pk=quiz_game.quiz_id.id)
+    participant = get_object_or_404(QuizGameParticipant, participant_id=participant_id)
+
+    if not participant.quiz_game.join_code == join_code:
+        participant.quiz_game = quiz_game
+        participant.save()
+
+    context = {
+        'debug': "test", 
+        'participant': participant,
+        'quiz': quiz,
+    }
+    
+    return render(request, 'play/lobby.html', context=context)
+
+def create_participant(request, join_code):
+    if "participant_id" in request.COOKIES: # Umleiten, falls Teilnehmer bereits erstellt
+        return redirect('play:lobby', join_code=join_code)
+    if request.method == 'POST':
+        display_name = request.POST.get('display_name')
+        join_code = request.POST.get('join_code')
+        try:
+            quiz = QuizGame.objects.get(join_code=join_code)
+            participant = QuizGameParticipant()
+            participant.display_name = display_name
+            participant.quiz_game = quiz
+            participant.save()
+
+            response = HttpResponseRedirect(reverse('play:lobby', kwargs={'join_code': join_code}))
+            response.set_cookie('participant_id', participant.participant_id, max_age=3600)
+
+            return response
+        except QuizGame.DoesNotExist:
+            # TODO: Fehlermeldung fuer nicht-existierendes Quiz
+            pass
+
+    return render(request, 'play/initialize_participant.html', {'join_code': join_code})
 
 def join_game(request):
+    if request.method == 'POST':
+        join_code = request.POST.get('game_code')
+        try:
+            quiz = QuizGame.objects.get(join_code=join_code)
+            return redirect('play:lobby', join_code=join_code)
+        except QuizGame.DoesNotExist:
+            # TODO: Mit message eine Fehlermeldung weitergeben (und im entsprechenden Template Designen)
+            pass
     return render(request, 'play/join_game.html')

django/templates/components/answer.html

@@ -2,7 +2,7 @@
 {% load static %}
 {% block title %}Antwort{% endblock %}
 {% block content %}
-<link rel="stylesheet" href="{% static 'homepage/t-style.css' %}">
+<link rel="stylesheet" href="{% static 'css/t-style.css' %}">
 
  <!-- TODO Bedingung festlegen: Quiztyp unterscheiden % if <Bedingung> % -->
   {% if user.is_authenticated %}

django/templates/components/ranking.html

@@ -1,5 +1,5 @@
 {% load static %}
-<link rel="stylesheet" href="{% static 'homepage/t-style.css' %}">
+<link rel="stylesheet" href="{% static 'css/t-style.css' %}">
 <!doctype html>
 <html class="h-full">
   <head>

django/templates/homepage/home.html

@@ -4,12 +4,12 @@
 <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="italic font-extralight sm:text-2xl text-md">Interaktives Lernen neu definiert.</h3>
+        <h3 class="mt-4 italic font-extralight sm:text-2xl text-md">Interaktives Lernen neu definiert.</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="#">Teilnehmen</a>
-        <a class="qp-a-button bg-indigo-500 text-white" href="#">Moderieren</a>
-        <a class="qp-a-button bg-purple-500 text-white" href="#">Verwalten</a>
+        <a class="qp-a-button bg-green-500 text-white" href="{% url 'play:join_game' %}">Teilnehmen</a>
+        <a class="qp-a-button bg-indigo-500 text-white" href="{% url 'library:overview_quiz' %}">Moderieren</a>
+        <a class="qp-a-button bg-purple-500 text-white" href="{% url 'library:new_quiz' %}">Erstellen</a>
     </div>
 </div>
 {% endblock %}

django/templates/homepage/impress.html

@@ -1,22 +1,36 @@
 {% extends 'base.html' %}
-    {% block content%}
-        <div>
-            <div>
-                <h1>Impressum</h1>
+{% block content%}
+
+    <div class="flex justify-center  items-center mt-12 ">
+        <div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md">
+            <div class="grid place-content-center h-120">
+              
+                <h1 class="text-center m-4 text-3xl lg:text-6xl">Impressum</b></h1>
+                Katharineum zu Lübeck <br>
+                Königsstraße 27-31 <br>
+                23552 Lübeck 
             </div>
-            <div>
-                <div>
-                    <p>
-                        Katharineum zu Lübeck
-                    </p>
-                    <p>
-                        Königsstraße 27-31
-                    </p>
-                    <p>
-                        23552 Lübeck
-                    </p>
-                </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>
+                    </div>
         </div>
+    </div>
+                   
+
+              
+
+  
+                        
+
     {% endblock %}
+
+       
+        
+
+
+</body>
+</html>
 </body>
 </html>

django/templates/homepage/privacy.html

@@ -1,13 +1,23 @@
 {% extends 'base.html' %}
 
         {% block content%}
-            <div>
-                <p>
-                    Hallo, ich bin die Datenschutzerklärung!
-                </p>
-            </div
-        {% endblock %}
->
+        <div class="flex justify-center  items-center mt-12 ">
+            <div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md">
+                <div class="grid place-content-center h-120">
+                  
+                    <h1 class="text-center m-4 text-3xl lg:text-6xl">Datenschutz-</br>erklärung</h1>
+                    Hier muss die Datenschutzerklärung stehen! <br>
+                     <br>
+                    
+                </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>
+                        </div>
+            </div>
+        </div>
+{% endblock %}
     </div>
 </body>
 </html>

django/templates/library/detail_quiz.html

@@ -5,8 +5,17 @@
     <div class="flex justify-between items-center mb-6">
         <h1 class="text-2xl font-bold">{{ quiz.name }}</h1>
         <div class="flex space-x-2">
-            <a href="{% url 'library:edit_quiz' quiz.id %}" class="bg-green-500 text-white px-4 py-2 rounded-md text-sm lg:text-lg hover:bg-green-600 transition-colors">Quiz bearbeiten</a>
-            <a href="{% url 'library:delete_quiz' quiz.id %}" class="bg-red-500 text-white px-4 py-2 rounded-md text-sm lg:text-lg hover:bg-red-600 transition-colors">Quiz löschen</a>
+            <a href="{% url 'library:edit_quiz' quiz.id %}" class=" text-white px-4 py-2 rounded-md text-sm lg:text-lg hover:scale-110 transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="text-gray-400 size-7">
+                    <path d="M13.488 2.513a1.75 1.75 0 0 0-2.475 0L6.75 6.774a2.75 2.75 0 0 0-.596.892l-.848 2.047a.75.75 0 0 0 .98.98l2.047-.848a2.75 2.75 0 0 0 .892-.596l4.261-4.262a1.75 1.75 0 0 0 0-2.474Z" />
+                    <path d="M4.75 3.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h6.5c.69 0 1.25-.56 1.25-1.25V9A.75.75 0 0 1 14 9v2.25A2.75 2.75 0 0 1 11.25 14h-6.5A2.75 2.75 0 0 1 2 11.25v-6.5A2.75 2.75 0 0 1 4.75 2H7a.75.75 0 0 1 0 1.5H4.75Z" />
+                  </svg>   
+            </a>
+            <a href="{% url 'library:delete_quiz' quiz.id %}" class=" text-white px-4 py-2 rounded-md text-sm lg:text-lg hover:scale-110 transition-colors">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-7 text-gray-400">
+                    <path fill-rule="evenodd" d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z" clip-rule="evenodd" />
+                  </svg>
+            </a>
         </div>
     </div>
 
@@ -49,7 +58,7 @@
                                 </div>
                                 <div class="mt-2">
                                     {% if question.data.type == 'multiple_choice' %}
-                                        <ul class="space-y-1">
+                                        <ul class="space-y-1 ">
                                             {% for option in question.data.options %}
                                                 <li class="flex items-center text-sm">
                                                     {% if option.is_correct %}
@@ -89,7 +98,9 @@
                                 
                                 <a href=" {% url 'library:delete_question' question.id %}" 
                 class="  text-red-700 px-4 py-1 rounded hover:scale-110 ">
-                &#x1F5D1
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-7 text-gray-400">
+                    <path fill-rule="evenodd" d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z" clip-rule="evenodd" />
+                  </svg>
              </a>
                             
                             </div>

django/templates/library/form.html

@@ -1,10 +1,8 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<h1>Formular</h1>
-<h2>{{ form.name.value }}</h2>
-<div class="input-group  border-blue-600 border-2 rounded-xl shadow-md">
-    <form method="post">
+<div class="input-group  border-blue-600 border-2 rounded-xl shadow-md mt-12">
+    <form method="post" enctype="multipart/form-data">
         {% csrf_token %}
         {{ form.as_p }}
         <button type="submit">Speichern</button>

django/templates/library/overview_quiz.html

@@ -1,28 +1,209 @@
 {% extends 'base.html' %}
-
 {% block content %}
-<h1>Übersicht</h1>
-<div class="flex justify-end">
-    <a href="{% url 'library:new_quiz' %}" class="text-white bg-blue-500 px-4 py-2 rounded-md mb-12">Neues Quiz erstellen</a>
+{% load static %}
+<head>
+  <meta charset="utf-8" />
+  <title>Swiper Demo</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <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;
+    }
+
+   
+  </style>
+</head>
+
+<div class="flex justify-end mr-2">
+    <a href="{% url 'library:new_quiz' %}" class="mt-2 p-2 shadow-md border-blue-600 border-2 rounded-md text-black ">Neues Quiz erstellen</a>
+</div>
+<div class="flex justify-end mr-2">
+    <a href="{% url 'library:overview_quiz' %}" class="mt-2 p-2 shadow-md border-blue-600 border-2 rounded-md text-black ">Suche und Filter zurücksetzen</a>
 </div>
 
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 px-4 place-items-center">
-    {% for quiz in quizzes %}
-    <div class="bg-white w-full max-w-md rounded-lg p-4 shadow-md border-blue-600 border-2 rounded-xl">
-        <h2 class="text-lg font-bold"><a href="{% url 'library:edit_quiz' quiz.id %}">{{ quiz.name }}</a></h2>
-        <p class="text-sm text-gray-600 py-12">{{ quiz.description }}</p>
+<div class="w-screen flex justify-center items-center">
+    <div class="w-full m-4 border-blue-600 border-2 rounded-xl shadow-md p-6 lg:w-1/4">
+        <form method="get" class="flex flex-col space-y-4">
+            <h1 class="text-xl font-bold">Filter</h1>
+            Minimale Anzahl an Fragen {{ form.min_amout_questions }}
+            Maximale Anzahl an Fragen {{ form.max_amout_questions }}
+            von User {{ form.user }}
+             <!-- Rendert die Form-Felder -->
+            <button type="submit" class="qp-a-button-small border-2 border-blue-600 text-black">Filtern</button>
+        </form>
+    </div>
+</div>
+<!-- Swiper Container für eigene Quiz -->
+{% if filter_my_quizzes %}
+<div class="text-center m-8 bg-blue-600 grid mx-8 h-8 place-items-center rounded-xl shadow-md ">    
+  <h1 id="my-quizzes" class="flex px-4 font-bold text-white">Eigene Quiz</h1>
+</div>
 
-        <div>
-            <div class="flex justify-between items-center gap-2">
-                <a href="#" class="qp-a-button-small border-2 border-blue-600 text-black">Spiel starten</a>
-                
-                <div class="flex gap-2">
-                    <a href="{% url 'library:detail_quiz' quiz.id %}" class="qp-a-button-small border-2 border-blue-600 text-white">&#x270F;</a>
-                    <a href="{% url 'library:delete_quiz' quiz.id %}" class="qp-a-button-small border-2 border-blue-600 text-white">&#x1F5D1;</a>
-                </div>
-            </div>
+<div class="swiper mySwiper">
+  <div class="swiper-wrapper">
+    {% for quiz in filter_my_quizzes %}
+    <div class="swiper-slide">
+      <div class="relative h-80 bg-white bg-cover text-white w-full max-w-md rounded-lg p-4 shadow-md border-blue-600 border-2 rounded-xl flex flex-col justify-between"
+      {% if quiz.image %}  style="background-image: url('http://127.0.0.1:8000/library{{ quiz.image.url }}');" {% endif %}>
+      <div class="absolute inset-0 bg-gray-900/60 bg-opacity-50 rounded-lg"></div>
+       
+      <h2 class=" font-bold break-words truncate text-white font-bold text-white drop-shadow-lg custom-outline"> <a href="{% url 'library:detail_quiz' quiz.id %}">{{ quiz.name }}</a></h2>
+        
+      <p class="text-white font-bold text-white drop-shadow-lg custom-outline">
+          <span class="break-words line-clamp-2 ">{{ quiz.description }}</span><br>
+          Schwierigkeit: <span class="font-bold">{{ quiz.difficulty }}</span><br>
+          Anzahl der Fragen: <span class="font-bold ">{{ quiz.question.count }}</span><br>
+          Status: <span class="font-bold ">{{ quiz.status }}</span>
+        </p>
+    
+        <!-- Buttons bleiben am unteren Rand -->
+        <div class="flex justify-between items-center gap-2 ">
+          <a href="#" class="qp-a-button-small border-2 border-blue-600 text-white font-bold text-white drop-shadow-lg custom-outline">Spiel starten</a>
+          <div class="flex gap-2">
+            <a href="{% url 'library:detail_quiz' quiz.id %}" class="qp-a-button-small border-2 border-blue-600 text-white text-white font-bold text-white drop-shadow-lg custom-outline">
+              
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-7">
+                <path d="M13.488 2.513a1.75 1.75 0 0 0-2.475 0L6.75 6.774a2.75 2.75 0 0 0-.596.892l-.848 2.047a.75.75 0 0 0 .98.98l2.047-.848a2.75 2.75 0 0 0 .892-.596l4.261-4.262a1.75 1.75 0 0 0 0-2.474Z" />
+                <path d="M4.75 3.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h6.5c.69 0 1.25-.56 1.25-1.25V9A.75.75 0 0 1 14 9v2.25A2.75 2.75 0 0 1 11.25 14h-6.5A2.75 2.75 0 0 1 2 11.25v-6.5A2.75 2.75 0 0 1 4.75 2H7a.75.75 0 0 1 0 1.5H4.75Z" />
+              </svg>
+              </a>
+            <a href="{% url 'library:delete_quiz' quiz.id %}" class="qp-a-button-small border-2 border-blue-600 text-white text-white font-bold text-white drop-shadow-lg custom-outline">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-7">
+                <path fill-rule="evenodd" d="M5 3.25V4H2.75a.75.75 0 0 0 0 1.5h.3l.815 8.15A1.5 1.5 0 0 0 5.357 15h5.285a1.5 1.5 0 0 0 1.493-1.35l.815-8.15h.3a.75.75 0 0 0 0-1.5H11v-.75A2.25 2.25 0 0 0 8.75 1h-1.5A2.25 2.25 0 0 0 5 3.25Zm2.25-.75a.75.75 0 0 0-.75.75V4h3v-.75a.75.75 0 0 0-.75-.75h-1.5ZM6.05 6a.75.75 0 0 1 .787.713l.275 5.5a.75.75 0 0 1-1.498.075l-.275-5.5A.75.75 0 0 1 6.05 6Zm3.9 0a.75.75 0 0 1 .712.787l-.275 5.5a.75.75 0 0 1-1.498-.075l.275-5.5a.75.75 0 0 1 .786-.711Z" clip-rule="evenodd" />
+              </svg>
+              </a>
+          </div>
         </div>
+    
+      </div>
     </div>
     {% endfor %}
+    
+  </div>
+
+  {% if filter_my_quizzes|length > 1 %}
+  <div class="swiper-button-next"></div>
+  <div class="swiper-button-prev"></div>
+  {% endif %}
 </div>
+{% endif %}
+
+<!-- Swiper Container für Quiz von anderen Nutzern -->
+{% if filter_other_quizzes %}
+<div class="text-center m-8 bg-blue-600 grid mx-8 h-8 place-items-center rounded-xl shadow-md">    
+  <h1 id="other-quizzes" class="flex px-4 font-bold text-white">Quiz von anderen Nutzern</h1>
+</div>
+
+<div class="swiper mySwiper">
+  <div class="swiper-wrapper">
+
+
+  {% for quiz in filter_other_quizzes %}
+  <div class="swiper-slide">
+    <div class="relative h-80 bg-white bg-cover text-white w-full max-w-md rounded-lg p-4 shadow-md border-blue-600 border-2 rounded-xl flex flex-col justify-between"
+    {% if quiz.image %}  style="background-image: url('http://127.0.0.1:8000/library{{ quiz.image.url }}');" {% endif %}>
+    <div class="absolute inset-0 bg-gray-900/60 bg-opacity-50 rounded-lg"></div>
+     
+    <h2 class=" font-bold break-words truncate text-white font-bold text-white drop-shadow-lg custom-outline"> <a href="{% url 'library:detail_quiz' quiz.id %}">{{ quiz.name }}</a></h2>
+      
+    <p class="text-white font-bold text-white drop-shadow-lg custom-outline">
+        <span class="break-words line-clamp-2 ">{{ quiz.description }}</span><br>
+        Schwierigkeit: <span class="font-bold">{{ quiz.difficulty }}</span><br>
+        Anzahl der Fragen: <span class="font-bold ">{{ quiz.question.count }}</span><br>
+        Erstellt am: <span class="font-bold ">{{ quiz.creation_date }}</span>
+      </p>
+  
+      <!-- Buttons bleiben am unteren Rand -->
+      <div class="flex justify-between items-center gap-2 ">
+        <a href="#" class="qp-a-button-small border-2 border-blue-600 text-white font-bold text-white drop-shadow-lg custom-outline">Spiel starten</a>
+        <a href="{% url 'library:detail_quiz' quiz.id %}" class="qp-a-button-small border-2 border-blue-600 text-white text-white font-bold text-white drop-shadow-lg custom-outline">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-7">
+            <path d="M13.488 2.513a1.75 1.75 0 0 0-2.475 0L6.75 6.774a2.75 2.75 0 0 0-.596.892l-.848 2.047a.75.75 0 0 0 .98.98l2.047-.848a2.75 2.75 0 0 0 .892-.596l4.261-4.262a1.75 1.75 0 0 0 0-2.474Z" />
+            <path d="M4.75 3.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h6.5c.69 0 1.25-.56 1.25-1.25V9A.75.75 0 0 1 14 9v2.25A2.75 2.75 0 0 1 11.25 14h-6.5A2.75 2.75 0 0 1 2 11.25v-6.5A2.75 2.75 0 0 1 4.75 2H7a.75.75 0 0 1 0 1.5H4.75Z" />
+          </svg></a>
+        <div class="flex gap-2">
+          <a href="{% url 'library:overview_quiz' %}?user={{ quiz.user_id }}" class="text-gray-600 text-sm">
+          <button type="submit" class=" text-sm py-1 text-white font-bold text-white drop-shadow-lg custom-outline hover:text-gray-300"> Quiz von {{ quiz.user_id }}</button>
+        </a>
+        </div>
+      </div>
+  
+    </div>
+  </div>
+  {% endfor %}
+  
+</div>
+
+
+
+  {% if filter_other_quizzes|length > 1 %}
+  <div class="swiper-button-next"></div>
+  <div class="swiper-button-prev"></div>
+  {% endif %}
+</div>
+{% endif %}
+
+{% if not filter_other_quizzes and not filter_my_quizzes %}
+<div class="grid text-center font-bold items-center">Es wurde kein Quiz passendes gefunden!</div>
+{% endif %}
+
+
+
+<!-- Swiper.js -->
+<script src="{% static 'swiper/swiper-bundle.min.js' %}"></script>
+<script>
+
+
+
+    var swiper = new Swiper('.swiper', {
+      slidesPerView: getSlidesPerView(),
+      direction: getDirection(),
+      navigation: {
+        nextEl: '.swiper-button-next',
+        prevEl: '.swiper-button-prev',
+      },
+      on: {
+        resize: function () {
+          swiper.changeDirection(getDirection());
+          swiper.params.slidesPerView = getSlidesPerView();
+          swiper.update();
+        },
+      },
+    });
+  
+    function getDirection() {
+      return window.innerWidth <= 0? 'vertical' : 'horizontal';
+    }
+  
+    function getSlidesPerView() {
+      if (window.innerWidth <= 840) {
+        return 1; // Smartphones
+      } else if (window.innerWidth <= 1024) {
+        return 2; // Tablets
+      } else {
+        return 3; // Desktops
+      }
+    }
+  </script>
+  
+  <style>
+    .custom-outline {
+      -webkit-text-stroke: 0.2px rgb(0, 0, 0); /* Schwarze Umrandung */
+    }
+  </style>
 {% endblock %}

django/templates/library/question/question_multiple_choice.html

@@ -10,7 +10,7 @@
         </a>
     </div>
 
-    <div class="bg-white rounded-lg shadow-md p-6">
+    <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">
             {% csrf_token %}
             

django/templates/library/question/question_true_false.html

@@ -10,7 +10,7 @@
         </a>
     </div>
 
-    <div class="bg-white rounded-lg shadow-md p-6">
+    <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">
             {% csrf_token %}
             

django/templates/partials/_nav.html

@@ -1,10 +1,27 @@
-<nav class="flex justify-between bg-blue-600 h-12 px-4 sm:px-6 lg:px-8 rounded-lg m-2 shadow-md">
-    <div class="flex items-center">
-        <h2 class="text-xl font-bold text-white hover:scale-110 transition duration-200"><a href="{% url 'homepage:home' %}">qivip</a></h2>
+<nav class="flex justify-between items-center bg-blue-600 h-12 px-4 sm:px-6 lg:px-8 rounded-lg m-2 shadow-md overflow-x-auto whitespace-nowrap">
+    <div class="flex items-center flex-shrink-0">
+        <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 items-center">
+
+    {% if show_search %}
+    <form method="get" class="mr-2 ml-2 flex items-center w-full 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="w-full px-3 py-1 text-black bg-transparent focus:outline-none">
+        <button type="submit" class=" py-1 text-blue-600">
+            🔍
+        </button>
+    </form>
+    {% endif %}
+
+    <div class="flex items-center space-x-4">
         <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>
+            {% else%}
             <li><a href="{% url 'library:overview_quiz' %}">Bibliothek</a></li>
+            {% endif %}
             {% if user.is_authenticated %}
             <li><a href="{% url 'accounts:home' %}">Konto</a></li>
             {% else %}

django/templates/play/game/score_overview.html

@@ -0,0 +1,5 @@
+<!--> 
+    Spieler sehen ihre Punktzahl, Platzierung und Richtig/Falsch
+
+    Host: Scoreboard, Button: 'Weiter'
+</!-->

django/templates/play/game/wait_for_other_players.html

@@ -0,0 +1,5 @@
+<!--> 
+    Spieler: Countdown, automatische Weiterleitung
+
+    (Host: Frage)
+</!-->

django/templates/play/initialize_participant.html

@@ -0,0 +1,13 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<h1>User for a Game:</h1>
+<div class="input-group  border-blue-600 border-2 rounded-xl shadow-md">
+    <form method="post">
+        {% csrf_token %}
+        <input type="hidden" name="join_code" value="{{join_code}}">
+        <input type="text" name="display_name" placeholder="Anzeigename">
+        <button type="submit">Speichern</button>
+    </form>
+</div>
+{% endblock %}

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="XXX-XXX" maxlength="7" pattern="[A-Za-z0-9]{3}-[A-Za-z0-9]{3}" 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 uppercase tracking-wider" oninput="let v = this.value.replace(/[^A-Za-z0-9]/g, '').slice(0,6).toUpperCase(); this.value = v.length > 3 ? v.slice(0,3) + '-' + v.slice(3) : v;" autofocus>
+                <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>
                 <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">
@@ -21,7 +21,7 @@
             const button = document.querySelector('button[type="submit"]');
             
             input.addEventListener('input', function(e) {
-                button.disabled = !this.value.match(/^[A-Z0-9]{3}-[A-Z0-9]{3}$/);
+                button.disabled = !this.value.match(/^[0-9]{6}$/);
             });
 
             input.addEventListener('keypress', function(e) {

django/templates/play/lobby.html

@@ -2,14 +2,20 @@
 
 {% block content %}
 <div class="container mx-auto px-4">
-    <h1>Bundeslaender Deutschland Quiz</h1>
+    <h1>{{ quiz.name }}</h1>
+    <div class="mt-4 mb-4 text-center">
+        <h3>Sichtbar als <b>{{ participant.display_name }}</b></h3>
+    </div>
     <div id="player-list">
         <ul>
-            <li>Spieler 1</li>
-            <li>Spieler 2</li>
-            <li>Spieler 3</li>
+            <li>Noch keine Spieler gefunden.</li>
         </ul>
+        {{debug}}
     </div>
     <button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200" type="submit">Starten</button>
 </div>
+
+<script>
+    // TODO: Websocket Verbindung aufbauen und Teilnehmerliste bei beitreten updaten
+</script>
 {% endblock %}

requirements.txt

@@ -1,3 +1,4 @@
 django~=5.1.4
 channels~=4.2.0
-daphne~=4.1.2
+daphne~=4.1.2
+pillow~=11.1.0