Merge branch 'initial-game-logic' into 'master'

Initial game logic

Closes #33, #43, #52, and #66

See merge request enrichment-2024/qivip!31

django/core/settings.py

@@ -98,6 +98,9 @@ STORAGES = {
     "staticfiles": {
         "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
     },
+    "default": {
+        "BACKEND": "django.core.files.storage.FileSystemStorage",
+    },
 }
 
 
@@ -139,6 +142,12 @@ STATIC_URL = '/static/'
 STATIC_ROOT = BASE_DIR / "staticfiles"
 STATICFILES_DIRS = [BASE_DIR / 'static']
 
+# WhiteNoise configuration
+STATICFILES_STORAGE = 'whitenoise.storage.CompressedStaticFilesStorage'
+WHITENOISE_SKIP_COMPRESS_EXTENSIONS = ['css', 'js']
+# Return 404 instead of 500 for missing files
+WHITENOISE_MISSING_FILE_ERRNO = None
+
 # Default primary key field type
 # https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field
 

django/library/migrations/0031_alter_qivipquestion_quiz_id.py

@@ -0,0 +1,19 @@
+# Generated by Django 5.1.7 on 2025-04-05 17:45
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0030_remove_qivipquiz_creator_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='qivipquestion',
+            name='quiz_id',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='questions', to='library.qivipquiz'),
+        ),
+    ]

django/library/migrations/0032_qivipquiz_average_rating_qivipquiz_rating_count_and_more.py

@@ -0,0 +1,37 @@
+# Generated by Django 5.1.7 on 2025-04-05 19:08
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('library', '0031_alter_qivipquestion_quiz_id'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='qivipquiz',
+            name='average_rating',
+            field=models.FloatField(default=3.0),
+        ),
+        migrations.AddField(
+            model_name='qivipquiz',
+            name='rating_count',
+            field=models.IntegerField(default=0),
+        ),
+        migrations.CreateModel(
+            name='QuizRating',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('participant_id', models.CharField(max_length=200)),
+                ('rating', models.IntegerField(choices=[(1, '1'), (2, '2'), (3, '3'), (4, '4'), (5, '5')])),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('quiz', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='ratings', to='library.qivipquiz')),
+            ],
+            options={
+                'unique_together': {('quiz', 'participant_id')},
+            },
+        ),
+    ]

django/library/models.py

@@ -38,6 +38,8 @@ class QivipQuiz(models.Model):
     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")
     credits=models.TextField(blank=True, editable=True)
+    average_rating = models.FloatField(default=3.0)
+    rating_count = models.IntegerField(default=0)
     def __str__(self):
 
         return self.name
@@ -47,7 +49,7 @@ class QivipQuiz(models.Model):
 # Create your models here.
 class QivipQuestion(models.Model):
     uuid = models.UUIDField(default=uuid.uuid4, editable=False, unique=True)
-    quiz_id = models.ForeignKey(QivipQuiz, on_delete=models.CASCADE, related_name='question')
+    quiz_id = models.ForeignKey(QivipQuiz, on_delete=models.CASCADE, related_name='questions')
     creation_date = models.DateTimeField(auto_now_add=True)
     update_date = models.DateTimeField(auto_now=True)
     data = models.TextField()
@@ -61,6 +63,28 @@ class Tag(models.Model):
     def __str__(self):
         return self.name
 
+class QuizRating(models.Model):
+    quiz = models.ForeignKey(QivipQuiz, on_delete=models.CASCADE, related_name='ratings')
+    participant_id = models.CharField(max_length=200)
+    rating = models.IntegerField(choices=[(i, str(i)) for i in range(1, 6)])
+    created_at = models.DateTimeField(auto_now_add=True)
+
+    class Meta:
+        unique_together = ('quiz', 'participant_id')
+
+    def save(self, *args, **kwargs):
+        is_new = self.pk is None
+        super().save(*args, **kwargs)
+
+        if is_new:
+            # Update quiz average rating
+            quiz = self.quiz
+            total_ratings = quiz.ratings.count()
+            avg_rating = quiz.ratings.aggregate(models.Avg('rating'))['rating__avg']
+            quiz.average_rating = round(avg_rating, 1) if avg_rating else 3.0
+            quiz.rating_count = total_ratings
+            quiz.save()
+
 class QuizCategory(models.Model):
     name = models.CharField(max_length=100, unique=True)
     description = models.TextField(blank=True, null=True)

django/library/views.py

@@ -15,20 +15,20 @@ from django.contrib.auth.models import User
 # Übersicht aller Quizze
 
 def overview_quiz(request):
-    
-    #Filter
+    # Filter
     form = QuizFilterForm(request.GET)
 
-
-    try:
-        
-         filter_my_quizzes = QivipQuiz.objects.filter(user_id=request.user).annotate(max_amout_questions=Count('question'))
-    except:
+    # Initialize querysets
+    if request.user.is_authenticated:
+        filter_my_quizzes = QivipQuiz.objects.filter(user_id=request.user).annotate(max_amout_questions=Count('questions'))
+        filter_other_quizzes = QivipQuiz.objects.exclude(user_id=request.user)
+    else:
         filter_my_quizzes = QivipQuiz.objects.none()
+        filter_other_quizzes = QivipQuiz.objects.all()
     
-    filter_other_quizzes = QivipQuiz.objects.annotate(max_amout_questions=Count('question'))
-       
-
+    # Apply common filters to other quizzes
+    filter_other_quizzes = filter_other_quizzes.annotate(max_amout_questions=Count('questions'))
+    filter_other_quizzes = filter_other_quizzes.filter(max_amout_questions__gte=1, status='öffentlich')
 
     if form.is_valid():
         search = form.cleaned_data.get('search')
@@ -41,10 +41,7 @@ def overview_quiz(request):
 
         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()
+           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)
@@ -69,16 +66,27 @@ def overview_quiz(request):
         
 
 
-        filter_other_quizzes = filter_other_quizzes.filter(max_amout_questions__gte=1).filter(status='öffentlich')
+        # Pagination for my quizzes
+        my_quizzes_paginator = Paginator(filter_my_quizzes.order_by('-creation_date'), 8)  # 8 quizzes per page
+        try:
+            my_quizzes = my_quizzes_paginator.page(request.GET.get('my_page', 1))
+        except:
+            my_quizzes = my_quizzes_paginator.page(1)
+
+        # Pagination for other quizzes
+        other_quizzes_paginator = Paginator(filter_other_quizzes.order_by('-creation_date'), 8)  # 8 quizzes per page
+        try:
+            other_quizzes = other_quizzes_paginator.page(request.GET.get('other_page', 1))
+        except:
+            other_quizzes = other_quizzes_paginator.page(1)
 
         context = {
             'show_search': True,
-            'filter_my_quizzes': filter_my_quizzes.order_by('-creation_date'),
-            'filter_other_quizzes': filter_other_quizzes.order_by('-creation_date'),
+            'my_quizzes': my_quizzes,
+            'other_quizzes': other_quizzes,
             'form': form,
         }
 
-
         return render(request, 'library/overview_quiz.html', context)
 
       

django/play/consumers.py

@@ -4,8 +4,263 @@ from channels.generic.websocket import AsyncWebsocketConsumer
 from channels.db import database_sync_to_async
 from django.utils import timezone
 from datetime import timedelta
+from django.urls import reverse
 from .models import QuizGame, QuizGameParticipant
 
+class GameConsumer(AsyncWebsocketConsumer):
+    async def connect(self):
+        self.join_code = self.scope['url_route']['kwargs']['join_code']
+        self.game_group_name = f'game_{self.join_code}'
+
+        # Join game group
+        await self.channel_layer.group_add(
+            self.game_group_name,
+            self.channel_name
+        )
+
+        await self.accept()
+
+    async def disconnect(self, close_code):
+        # Leave game group
+        await self.channel_layer.group_discard(
+            self.game_group_name,
+            self.channel_name
+        )
+
+    async def receive(self, text_data):
+        text_data_json = json.loads(text_data)
+        message_type = text_data_json['type']
+
+        if message_type == 'submit_answer':
+            participant_id = text_data_json['participant_id']
+            answer = text_data_json['answer']
+            time_remaining = text_data_json.get('time_remaining', 0)
+            
+            # Save answer and update participant score
+            await self.save_answer(participant_id, answer, time_remaining)
+            
+            # Notify host about the new answer
+            await self.channel_layer.group_send(
+                self.game_group_name,
+                {
+                    'type': 'participant_answer',
+                    'answer': answer
+                }
+            )
+
+        elif message_type == 'get_answer_stats':
+            stats = await self.get_answer_stats()
+            await self.send(text_data=json.dumps({
+                'type': 'answer_stats',
+                'stats': stats
+            }))
+
+        elif message_type == 'update_participants':
+            participants = await self.get_participants()
+            await self.channel_layer.group_send(
+                self.game_group_name,
+                {
+                    'type': 'participant_list_update',
+                    'participants': participants
+                }
+            )
+
+        elif message_type == 'next_question':
+            host_id = text_data_json['host_id']
+            if await self.verify_host(host_id):
+                await self.advance_to_next_question()
+
+        elif message_type == 'finish_game':
+            host_id = text_data_json['host_id']
+            if await self.verify_host(host_id):
+                await self.finish_game()
+
+        elif message_type == 'advance_to_scores':
+            host_id = text_data_json['host_id']
+            if await self.verify_host(host_id):
+                await self.show_scores()
+
+    async def participant_answer(self, event):
+        await self.send(text_data=json.dumps({
+            'type': 'participant_answer',
+            'answer': event['answer']
+        }))
+
+    async def participant_list_update(self, event):
+        await self.send(text_data=json.dumps({
+            'type': 'participant_list_update',
+            'participants': event['participants']
+        }))
+
+    async def game_state_update(self, event):
+        await self.send(text_data=json.dumps({
+            'type': 'game_state_update',
+            'action': event['action'],
+            'redirect_url': event.get('redirect_url')
+        }))
+
+    @database_sync_to_async
+    def verify_host(self, host_id):
+        try:
+            quiz_game = QuizGame.objects.get(join_code=self.join_code)
+            return quiz_game.host_id == host_id
+        except QuizGame.DoesNotExist:
+            return False
+
+    @database_sync_to_async
+    def save_answer(self, participant_id, answer_index, time_remaining):
+        try:
+            participant = QuizGameParticipant.objects.get(
+                quiz_game__join_code=self.join_code,
+                participant_id=participant_id
+            )
+            quiz_game = participant.quiz_game
+            current_question = quiz_game.quiz_id.questions.all()[quiz_game.current_question_index]
+            
+            # Check if answer is correct
+            is_correct = False
+            if answer_index >= 0:  # -1 means timeout
+                is_correct = current_question.data['options'][answer_index]['is_correct']
+            
+            # Calculate score based on correctness and time
+            score = 0
+            if is_correct:
+                base_score = 1000
+                time_factor = time_remaining / 30000  # 30 seconds max
+                score = int(base_score * (0.5 + 0.5 * time_factor))
+            
+            participant.score += score
+            participant.last_answer_correct = is_correct
+            participant.save()
+            
+            return True
+        except (QuizGameParticipant.DoesNotExist, IndexError):
+            return False
+
+    @database_sync_to_async
+    def get_answer_stats(self):
+        try:
+            quiz_game = QuizGame.objects.get(join_code=self.join_code)
+            participants = QuizGameParticipant.objects.filter(quiz_game=quiz_game)
+            
+            # Count answers for each option
+            stats = {}
+            for participant in participants:
+                if participant.last_answer is not None:
+                    stats[participant.last_answer] = stats.get(participant.last_answer, 0) + 1
+            
+            return stats
+        except QuizGame.DoesNotExist:
+            return {}
+
+    @database_sync_to_async
+    def get_participants(self):
+        try:
+            quiz_game = QuizGame.objects.get(join_code=self.join_code)
+            participants = QuizGameParticipant.objects.filter(quiz_game=quiz_game)
+            return [
+                {
+                    'id': p.participant_id,
+                    'display_name': p.display_name,
+                    'score': p.score
+                }
+                for p in participants
+            ]
+        except QuizGame.DoesNotExist:
+            return []
+
+    @database_sync_to_async
+    def _advance_to_next_question(self):
+        try:
+            quiz_game = QuizGame.objects.get(join_code=self.join_code)
+            quiz = quiz_game.quiz_id
+            
+            # Move to next question
+            quiz_game.current_question_index += 1
+            
+            # Check if we've reached the end
+            if quiz_game.current_question_index >= quiz.questions.count():
+                quiz_game.current_state = 'finished'
+                quiz_game.save()
+                return 'finished'
+            else:
+                # Update game state and start time
+                quiz_game.current_state = 'question'
+                quiz_game.question_start_time = timezone.now()
+                quiz_game.save()
+                return 'question'
+        except QuizGame.DoesNotExist:
+            return None
+
+    async def advance_to_next_question(self):
+        result = await self._advance_to_next_question()
+        if result == 'finished':
+            # Notify clients to redirect to finished page
+            await self.channel_layer.group_send(
+                self.game_group_name,
+                {
+                    'type': 'game_state_update',
+                    'action': 'finish_game',
+                    'redirect_url': reverse('play:finished', kwargs={'join_code': self.join_code})
+                }
+            )
+        elif result == 'question':
+            # Notify clients to redirect to next question
+            await self.channel_layer.group_send(
+                self.game_group_name,
+                {
+                    'type': 'game_state_update',
+                    'action': 'next_question',
+                    'redirect_url': reverse('play:question', kwargs={'join_code': self.join_code})
+                }
+            )
+
+    @database_sync_to_async
+    def _show_scores(self):
+        try:
+            quiz_game = QuizGame.objects.get(join_code=self.join_code)
+            quiz_game.current_state = 'scores'
+            quiz_game.save()
+            return True
+        except QuizGame.DoesNotExist:
+            return False
+
+    async def show_scores(self):
+        success = await self._show_scores()
+        if success:
+            # Notify clients to redirect to scores page
+            await self.channel_layer.group_send(
+                self.game_group_name,
+                {
+                    'type': 'game_state_update',
+                    'action': 'show_scores',
+                    'redirect_url': reverse('play:scores', kwargs={'join_code': self.join_code})
+                }
+            )
+    
+    @database_sync_to_async
+    def _finish_game(self):
+        try:
+            quiz_game = QuizGame.objects.get(join_code=self.join_code)
+            quiz_game.current_state = 'finished'
+            quiz_game.save()
+            return True
+        except QuizGame.DoesNotExist:
+            return False
+
+    async def finish_game(self):
+        success = await self._finish_game()
+        if success:
+            # Notify clients to redirect to finished page
+            await self.channel_layer.group_send(
+                self.game_group_name,
+                {
+                    'type': 'game_state_update',
+                    'action': 'finish_game',
+                    'redirect_url': reverse('play:finished', kwargs={'join_code': self.join_code})
+                }
+            )
+
 class LobbyConsumer(AsyncWebsocketConsumer):
     async def connect(self):
         self.join_code = self.scope['url_route']['kwargs']['join_code']
@@ -64,6 +319,96 @@ class LobbyConsumer(AsyncWebsocketConsumer):
                 }
             )
             
+        elif message_type == 'start_game':
+            # Verify sender is host
+            sender_id = text_data_json.get('host_id')
+            if await self._is_host(sender_id):
+                # Update game state and notify all participants
+                await self._start_game()
+                await self.channel_layer.group_send(
+                    self.room_group_name,
+                    {
+                        'type': 'game_state_update',
+                        'action': 'start_game',
+                        'redirect_url': f'/play/game/{self.join_code}/0'
+                    }
+                )
+
+    async def game_state_update(self, event):
+        # Send game state update to WebSocket
+        await self.send(text_data=json.dumps({
+            'type': 'game_state_update',
+            'action': event['action'],
+            'redirect_url': event.get('redirect_url')
+        }))
+
+    @database_sync_to_async
+    def _start_game(self):
+        game = QuizGame.objects.get(join_code=self.join_code)
+        game.current_state = 'question'
+        game.current_question_index = 0
+        game.question_start_time = timezone.now()
+        game.save()
+                
+    async def receive(self, text_data):
+        text_data_json = json.loads(text_data)
+        message_type = text_data_json['type']
+
+        if message_type == 'heartbeat':
+            # Update participant's last activity timestamp
+            participant_id = text_data_json.get('participant_id')
+            if participant_id:
+                await self._update_participant_heartbeat(participant_id)
+
+        elif message_type == 'update_participants':
+            participants = await self.get_participants()
+            await self.channel_layer.group_send(
+                self.room_group_name,
+                {
+                    'type': 'participant_list_update',
+                    'participants': participants
+                }
+            )
+            
+        elif message_type == 'start_game':
+            # Verify sender is host
+            sender_id = text_data_json.get('host_id')
+            if await self._is_host(sender_id):
+                # Update game state and notify all participants
+                await self._start_game()
+                await self.channel_layer.group_send(
+                    self.room_group_name,
+                    {
+                        'type': 'game_state_update',
+                        'action': 'start_game',
+                        'redirect_url': f'/play/game/{self.join_code}/0'
+                    }
+                )
+                
+        elif message_type == 'submit_answer':
+            participant_id = text_data_json.get('participant_id')
+            answer = text_data_json.get('answer')
+            time_remaining = text_data_json.get('time_remaining')
+            if participant_id:
+                score = await self._process_answer(participant_id, answer, time_remaining)
+                await self.send(text_data=json.dumps({
+                    'type': 'answer_processed',
+                    'score': score
+                }))
+                
+        elif message_type == 'next_question':
+            sender_id = text_data_json.get('host_id')
+            if await self._is_host(sender_id):
+                next_state = await self._advance_game_state()
+                await self.channel_layer.group_send(
+                    self.room_group_name,
+                    {
+                        'type': 'game_state_update',
+                        'action': next_state['action'],
+                        'redirect_url': next_state['redirect_url']
+                    }
+                )
+
     async def participant_list_update(self, event):
         participants = event['participants']
         await self.send(text_data=json.dumps({
@@ -85,6 +430,71 @@ class LobbyConsumer(AsyncWebsocketConsumer):
         except QuizGameParticipant.DoesNotExist:
             pass
             
+    @database_sync_to_async
+    def _is_host(self, host_id):
+        try:
+            return QuizGame.objects.filter(join_code=self.join_code, host_id=host_id).exists()
+        except QuizGame.DoesNotExist:
+            return False
+            
+    @database_sync_to_async
+    def _start_game(self):
+        game = QuizGame.objects.get(join_code=self.join_code)
+        game.current_state = 'question'
+        game.current_question_index = 0
+        game.question_start_time = timezone.now()
+        game.save()
+        
+    @database_sync_to_async
+    def _process_answer(self, participant_id, answer, time_remaining):
+        game = QuizGame.objects.get(join_code=self.join_code)
+        participant = QuizGameParticipant.objects.get(participant_id=participant_id)
+        question = game.quiz_id.questions.all()[game.current_question_index]
+        
+        # Load question data
+        question_data = json.loads(question.data)
+        correct_answer = question_data.get('correct_answer')
+        
+        # Calculate score based on correctness and time
+        score = 0
+        if answer == correct_answer:
+            # Base score for correct answer + bonus for speed
+            score = 1000 + int(time_remaining * 10)  # 10 points per remaining second
+            
+        participant.score += score
+        participant.save()
+        return score
+        
+    @database_sync_to_async
+    def _advance_game_state(self):
+        game = QuizGame.objects.get(join_code=self.join_code)
+        total_questions = game.quiz_id.questions.count()
+        
+        if game.current_state == 'question':
+            game.current_state = 'scores'
+            game.save()
+            return {
+                'action': 'show_scores',
+                'redirect_url': f'/play/game/{self.join_code}/scores'
+            }
+        elif game.current_state == 'scores':
+            if game.current_question_index + 1 < total_questions:
+                game.current_state = 'question'
+                game.current_question_index += 1
+                game.question_start_time = timezone.now()
+                game.save()
+                return {
+                    'action': 'next_question',
+                    'redirect_url': f'/play/game/{self.join_code}/{game.current_question_index}'
+                }
+            else:
+                game.current_state = 'finished'
+                game.save()
+                return {
+                    'action': 'game_finished',
+                    'redirect_url': f'/play/game/{self.join_code}/finished'
+                }
+
     @database_sync_to_async
     def _remove_inactive_participants(self):
         # Remove participants who haven't sent a heartbeat in the last 30 seconds

django/play/consumers/__init__.py

@@ -0,0 +1,3 @@
+from .game import GameConsumer
+
+__all__ = ['GameConsumer']

django/play/consumers/game.py

@@ -0,0 +1,492 @@
+import json
+import asyncio
+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
+
+# Dictionary to track inactive check tasks per game
+game_check_tasks = {}
+
+
+class GameConsumer(AsyncWebsocketConsumer):
+    @classmethod
+    async def start_inactive_check(cls, join_code, channel_layer):
+        """Start the inactive player check for a game if not already running."""
+        if join_code not in game_check_tasks or game_check_tasks[join_code].done():
+            async def check_inactive_players():
+                game_group_name = f'game_{join_code}'
+                while True:
+                    try:
+                        await asyncio.sleep(30)  # Check every 30 seconds
+                        try:
+                            game = await database_sync_to_async(QuizGame.objects.get)(join_code=join_code)
+                            cutoff_time = timezone.now() - timedelta(minutes=1)
+                            
+                            # Get active and inactive participants
+                            all_participants = await database_sync_to_async(lambda: list(
+                                game.participants.all().values('participant_id', 'display_name', 'last_heartbeat')
+                            ))()
+                            
+                            # Konvertiere datetime zu ISO Format String
+                            for p in all_participants:
+                                if p['last_heartbeat']:
+                                    p['last_heartbeat'] = p['last_heartbeat'].isoformat()
+                            
+                            active_participants = [p for p in all_participants if p['last_heartbeat'] and timezone.datetime.fromisoformat(p['last_heartbeat']) >= cutoff_time]
+                            inactive_participants = [p for p in all_participants if not p['last_heartbeat'] or timezone.datetime.fromisoformat(p['last_heartbeat']) < cutoff_time]
+                            
+                            # Remove inactive participants
+                            if inactive_participants:
+                                for p in inactive_participants:
+                                    # Benachrichtige andere über den gekickten Spieler
+                                    await channel_layer.group_send(
+                                        game_group_name,
+                                        {
+                                            'type': 'player_left',
+                                            'player_name': p['display_name'],
+                                            'was_kicked': True
+                                        }
+                                    )
+                                    # Lösche den inaktiven Teilnehmer
+                                    await database_sync_to_async(QuizGameParticipant.objects.filter(
+                                        participant_id=p['participant_id']
+                                    ).delete)()
+                            
+                            # Broadcast update to all clients
+                            if active_participants or inactive_participants:
+                                await channel_layer.group_send(
+                                    game_group_name,
+                                    {
+                                        'type': 'participant_list_update',
+                                        'participants': active_participants
+                                    }
+                                )
+                        except QuizGame.DoesNotExist:
+                            break  # Stop checking if game no longer exists
+                        except Exception as e:
+                            print(f'Error checking inactive players in game: {e}')
+                            await asyncio.sleep(5)  # Wait before retry
+                    except asyncio.CancelledError:
+                        break
+                    except Exception as e:
+                        print(f'Error in game inactive check loop: {e}')
+                        await asyncio.sleep(5)
+
+            game_check_tasks[join_code] = asyncio.create_task(check_inactive_players())
+
+    async def connect(self):
+        self.join_code = self.scope['url_route']['kwargs']['join_code']
+        self.game_group_name = f'game_{self.join_code}'
+
+        # Join game group
+        await self.channel_layer.group_add(
+            self.game_group_name,
+            self.channel_name
+        )
+
+        await self.accept()
+        
+        # Ensure inactive check is running for this game
+        await self.start_inactive_check(self.join_code, self.channel_layer)
+
+    async def disconnect(self, close_code):
+        # Leave game group
+        await self.channel_layer.group_discard(
+            self.game_group_name,
+            self.channel_name
+        )
+        
+        # Check if game should be deleted
+        await self.cleanup_game()
+
+    async def receive(self, text_data):
+        text_data_json = json.loads(text_data)
+        message_type = text_data_json['type']
+
+        if message_type == 'ping':
+            # Respond with pong to keep connection alive
+            await self.send(text_data=json.dumps({
+                'type': 'pong'
+            }))
+            return
+            
+        if message_type == 'leave_game':
+            participant_id = text_data_json.get('participant_id')
+            if participant_id:
+                try:
+                    # Get participant info before deletion
+                    participant = await database_sync_to_async(QuizGameParticipant.objects.get)(participant_id=participant_id)
+                    display_name = participant.display_name
+                    join_code = self.join_code
+                    
+                    # Delete participant
+                    await database_sync_to_async(participant.delete)()
+                    
+                    # Update participants list
+                    participants = await self.get_participants()
+                    await self.channel_layer.group_send(
+                        self.game_group_name,
+                        {
+                            'type': 'participant_list_update',
+                            'participants': participants
+                        }
+                    )
+                    
+                    # Send redirect to home
+                    await self.send(text_data=json.dumps({
+                        'type': 'redirect',
+                        'url': '/'
+                    }))
+                except QuizGameParticipant.DoesNotExist:
+                    pass
+            return
+            
+        if message_type == 'heartbeat':
+            participant_id = text_data_json.get('participant_id')
+            if participant_id:
+                await self.update_participant_heartbeat(participant_id)
+                # Update participants list after heartbeat
+                participants = await self.get_participants()
+                await self.channel_layer.group_send(
+                    self.game_group_name,
+                    {
+                        'type': 'participant_list_update',
+                        'participants': participants
+                    }
+                )
+            return
+
+        if message_type == 'submit_rating':
+            participant_id = text_data_json['participant_id']
+            rating = text_data_json['rating']
+            success = await self.save_rating(participant_id, rating)
+            if success:
+                await self.send(text_data=json.dumps({
+                    'type': 'rating_confirmed'
+                }))
+
+        elif message_type == 'submit_answer':
+            participant_id = text_data_json['participant_id']
+            answer = text_data_json['answer']
+            time_remaining = text_data_json.get('time_remaining', 0)
+            
+            # Save answer and update participant score
+            await self.save_answer(participant_id, answer, time_remaining)
+            
+            # Notify host about the new answer
+            await self.channel_layer.group_send(
+                self.game_group_name,
+                {
+                    'type': 'participant_answer',
+                    'answer': answer
+                }
+            )
+
+        elif message_type == 'start_game':
+            host_id = text_data_json['host_id']
+            if await self.verify_host(host_id):
+                await self.advance_to_next_question()
+
+        elif message_type == 'get_answer_stats':
+            stats = await self.get_answer_stats()
+            await self.send(text_data=json.dumps({
+                'type': 'answer_stats',
+                'stats': stats
+            }))
+
+        elif message_type == 'update_participants':
+            participants = await self.get_participants()
+            await self.channel_layer.group_send(
+                self.game_group_name,
+                {
+                    'type': 'participant_list_update',
+                    'participants': participants
+                }
+            )
+
+        elif message_type == 'next_question':
+            host_id = text_data_json['host_id']
+            if await self.verify_host(host_id):
+                await self.advance_to_next_question()
+
+        elif message_type == 'finish_game':
+            host_id = text_data_json['host_id']
+            if await self.verify_host(host_id):
+                await self.finish_game()
+
+        elif message_type == 'advance_to_scores':
+            host_id = text_data_json['host_id']
+            if await self.verify_host(host_id):
+                await self.show_scores()
+
+    async def participant_answer(self, event):
+        await self.send(text_data=json.dumps({
+            'type': 'participant_answer',
+            'answer': event['answer']
+        }))
+
+    async def participant_list_update(self, event):
+        await self.send(text_data=json.dumps({
+            'type': 'participant_list_update',
+            'participants': event['participants']
+        }))
+        
+    async def player_left(self, event):
+        await self.send(text_data=json.dumps({
+            'type': 'player_left',
+            'player_name': event['player_name'],
+            'was_kicked': event.get('was_kicked', False)
+        }))
+
+    async def game_state_update(self, event):
+        await self.send(text_data=json.dumps({
+            'type': 'game_state_update',
+            'action': event['action'],
+            'redirect_url': event.get('redirect_url')
+        }))
+
+    async def update_participant_heartbeat(self, participant_id):
+        """Update the last heartbeat timestamp for a participant."""
+        try:
+            participant = await database_sync_to_async(QuizGameParticipant.objects.get)(
+                participant_id=participant_id
+            )
+            participant.last_heartbeat = timezone.now()
+            await database_sync_to_async(participant.save)()
+        except QuizGameParticipant.DoesNotExist:
+            pass
+
+    @database_sync_to_async
+    def verify_host(self, host_id):
+        try:
+            quiz_game = QuizGame.objects.get(join_code=self.join_code)
+            return quiz_game.host_id == host_id
+        except QuizGame.DoesNotExist:
+            return False
+
+    @database_sync_to_async
+    def save_answer(self, participant_id, answer_index, time_remaining):
+        try:
+            participant = QuizGameParticipant.objects.get(
+                quiz_game__join_code=self.join_code,
+                participant_id=participant_id
+            )
+            quiz_game = participant.quiz_game
+            current_question = quiz_game.quiz_id.questions.all()[quiz_game.current_question_index]
+            
+            # Check if answer is correct
+            is_correct = False
+            if answer_index >= 0:  # -1 means timeout
+                question_data = json.loads(current_question.data)
+                is_correct = question_data['options'][answer_index]['is_correct']
+            
+            # Calculate score based on correctness and time
+            score = 0
+            if is_correct:
+                base_score = 1000
+                time_factor = time_remaining / 30000  # 30 seconds max
+                score = int(base_score * (0.5 + 0.5 * time_factor))
+            
+            # Update or create answer in QuizAnswer table
+            answer_obj, created = QuizAnswer.objects.get_or_create(
+                participant=participant,
+                question_index=quiz_game.current_question_index,
+                defaults={
+                    'answer_index': answer_index,
+                    'is_correct': is_correct,
+                    'score': score,
+                    'time_remaining': time_remaining
+                }
+            )
+            
+            if not created:
+                answer_obj.answer_index = answer_index
+                answer_obj.is_correct = is_correct
+                answer_obj.score = score
+                answer_obj.time_remaining = time_remaining
+                answer_obj.save()
+            
+            participant.score += score
+            participant.last_answer_correct = is_correct
+            participant.save()
+            
+            return True
+        except (QuizGameParticipant.DoesNotExist, IndexError):
+            return False
+
+    @database_sync_to_async
+    def get_answer_stats(self):
+        try:
+            quiz_game = QuizGame.objects.get(join_code=self.join_code)
+            
+            # Count answers for each option in the current question
+            stats = {}
+            answers = QuizAnswer.objects.filter(
+                participant__quiz_game=quiz_game,
+                question_index=quiz_game.current_question_index
+            )
+            
+            for answer in answers:
+                if answer.answer_index >= 0:  # Ignore timeouts (-1)
+                    stats[answer.answer_index] = stats.get(answer.answer_index, 0) + 1
+            
+            return stats
+        except QuizGame.DoesNotExist:
+            return {}
+
+    @database_sync_to_async
+    def save_rating(self, participant_id, rating):
+        from library.models import QuizRating
+        try:
+            game = QuizGame.objects.get(join_code=self.join_code)
+            participant = QuizGameParticipant.objects.get(
+                quiz_game=game,
+                participant_id=participant_id
+            )
+            
+            # Update or create rating
+            rating_obj, created = QuizRating.objects.get_or_create(
+                quiz=game.quiz_id,
+                participant_id=participant_id,
+                defaults={'rating': rating}
+            )
+            
+            if not created:
+                rating_obj.rating = rating
+                rating_obj.save()
+            
+            return True
+        except (QuizGame.DoesNotExist, QuizGameParticipant.DoesNotExist):
+            return False
+
+    @database_sync_to_async
+    def cleanup_game(self):
+        try:
+            game = QuizGame.objects.get(join_code=self.join_code)
+            
+            # Get all active participants (heartbeat within last minute)
+            from django.utils import timezone
+            active_participants = QuizGameParticipant.objects.filter(
+                quiz_game=game,
+                last_heartbeat__gte=timezone.now() - timezone.timedelta(minutes=1)
+            ).count()
+            
+            # If no active participants and game is finished for more than 5 minutes, delete it
+            if active_participants == 0 and game.current_state == 'finished':
+                if game.question_start_time and (timezone.now() - game.question_start_time).total_seconds() > 300:
+                    game.delete()
+        except QuizGame.DoesNotExist:
+            pass
+
+    @database_sync_to_async
+    def get_participants(self):
+        try:
+            quiz_game = QuizGame.objects.get(join_code=self.join_code)
+            participants = QuizGameParticipant.objects.filter(quiz_game=quiz_game)
+            return [
+                {
+                    'id': p.participant_id,
+                    'display_name': p.display_name,
+                    'score': p.score
+                }
+                for p in participants
+            ]
+        except QuizGame.DoesNotExist:
+            return []
+
+    @database_sync_to_async
+    def _advance_to_next_question(self):
+        try:
+            quiz_game = QuizGame.objects.get(join_code=self.join_code)
+            quiz = quiz_game.quiz_id
+            
+            # Move to next question
+            quiz_game.current_question_index += 1
+            
+            # Check if we've reached the end
+            if quiz_game.current_question_index >= quiz.questions.count():
+                quiz_game.current_state = 'finished'
+                quiz_game.save()
+                return 'finished'
+            else:
+                # Update game state and start time
+                quiz_game.current_state = 'question'
+                quiz_game.question_start_time = timezone.now()
+                quiz_game.save()
+                return 'question'
+        except QuizGame.DoesNotExist:
+            return None
+
+    async def advance_to_next_question(self):
+        result = await self._advance_to_next_question()
+        if result == 'finished':
+            # Notify clients to redirect to finished page
+            await self.channel_layer.group_send(
+                self.game_group_name,
+                {
+                    'type': 'game_state_update',
+                    'action': 'finish_game',
+                    'redirect_url': reverse('play:finished', kwargs={'join_code': self.join_code})
+                }
+            )
+        elif result == 'question':
+            # Notify clients to redirect to next question
+            await self.channel_layer.group_send(
+                self.game_group_name,
+                {
+                    'type': 'game_state_update',
+                    'action': 'next_question',
+                    'redirect_url': reverse('play:question', kwargs={'join_code': self.join_code})
+                }
+            )
+
+    @database_sync_to_async
+    def _show_scores(self):
+        try:
+            quiz_game = QuizGame.objects.get(join_code=self.join_code)
+            quiz_game.current_state = 'scores'
+            quiz_game.save()
+            return True
+        except QuizGame.DoesNotExist:
+            return False
+
+    async def show_scores(self):
+        success = await self._show_scores()
+        if success:
+            # Notify clients to redirect to scores page
+            await self.channel_layer.group_send(
+                self.game_group_name,
+                {
+                    'type': 'game_state_update',
+                    'action': 'show_scores',
+                    'redirect_url': reverse('play:scores', kwargs={'join_code': self.join_code})
+                }
+            )
+    
+    @database_sync_to_async
+    def _finish_game(self):
+        try:
+            quiz_game = QuizGame.objects.get(join_code=self.join_code)
+            quiz_game.current_state = 'finished'
+            quiz_game.save()
+            return True
+        except QuizGame.DoesNotExist:
+            return False
+
+    async def finish_game(self):
+        success = await self._finish_game()
+        if success:
+            # Notify clients to redirect to finished page
+            await self.channel_layer.group_send(
+                self.game_group_name,
+                {
+                    'type': 'game_state_update',
+                    'action': 'finish_game',
+                    'redirect_url': reverse('play:finished', kwargs={'join_code': self.join_code})
+                }
+            )

django/play/consumers/lobby.py

@@ -0,0 +1,282 @@
+from channels.generic.websocket import AsyncWebsocketConsumer
+import json
+import asyncio
+from ..models import QuizGame, QuizGameParticipant
+from channels.db import database_sync_to_async
+
+# Dictionary to track inactive check tasks and active connections per game
+game_check_tasks = {}
+game_connections = {}
+
+class LobbyConsumer(AsyncWebsocketConsumer):
+    @classmethod
+    async def start_inactive_check(cls, join_code, channel_layer):
+        """Start the inactive player check for a game if not already running."""
+        if join_code not in game_check_tasks or game_check_tasks[join_code].done():
+            async def check_inactive_players():
+                room_group_name = f'lobby_{join_code}'
+                while True:
+                    try:
+                        await asyncio.sleep(10)  # Check every 10 seconds to match frontend heartbeat
+                        # Get participants list and broadcast update
+                        try:
+                            from django.utils import timezone
+                            from datetime import timedelta
+                            game = await database_sync_to_async(QuizGame.objects.get)(join_code=join_code)
+                            cutoff_time = timezone.now() - timedelta(seconds=20)  # Consider inactive after 20 seconds (2 missed heartbeats)
+                            # Get current active participants with full info
+                            active_participants = await database_sync_to_async(lambda: list(
+                                game.participants.filter(last_heartbeat__gte=cutoff_time)
+                                .values('participant_id', 'display_name')
+                            ))()
+                            
+                            # Send update to all clients
+                            await channel_layer.group_send(
+                                room_group_name,
+                                {
+                                    'type': 'participants_list_update',
+                                    'participants': active_participants
+                                }
+                            )
+                        except QuizGame.DoesNotExist:
+                            break  # Stop checking if game no longer exists
+                        except Exception as e:
+                            print(f'Error checking inactive players: {e}')
+                            await asyncio.sleep(5)  # Wait before retry
+                    except asyncio.CancelledError:
+                        break
+                    except Exception as e:
+                        print(f'Error in inactive check loop: {e}')
+                        await asyncio.sleep(5)
+
+            game_check_tasks[join_code] = asyncio.create_task(check_inactive_players())
+
+    async def connect(self):
+        self.join_code = self.scope['url_route']['kwargs']['join_code']
+        self.room_group_name = f'lobby_{self.join_code}'
+        
+        # Get participant ID from session
+        self.participant_id = self.scope['session'].get('participant_id')
+
+        # Track connection
+        if self.join_code not in game_connections:
+            game_connections[self.join_code] = set()
+        game_connections[self.join_code].add(self.channel_name)
+
+        # Start inactive check task if not already running
+        await self.start_inactive_check(self.join_code, self.channel_layer)
+
+        # Join room group
+        await self.channel_layer.group_add(
+            self.room_group_name,
+            self.channel_name
+        )
+
+        await self.accept()
+
+        # Send initial participants list
+        await self.update_participants()
+
+    async def disconnect(self, close_code):
+        # Leave room group
+        await self.channel_layer.group_discard(
+            self.room_group_name,
+            self.channel_name
+        )
+
+        # Remove from connection tracking
+        if self.join_code in game_connections:
+            game_connections[self.join_code].discard(self.channel_name)
+            if not game_connections[self.join_code]:
+                # Last connection closed
+                del game_connections[self.join_code]
+                if self.join_code in game_check_tasks:
+                    # Cancel the inactive check task
+                    game_check_tasks[self.join_code].cancel()
+                    del game_check_tasks[self.join_code]
+
+    async def receive(self, text_data):
+        data = json.loads(text_data)
+        message_type = data.get('type')
+        print(f'Received message type: {message_type}')
+
+        if message_type == 'ping':
+            # Respond with pong to keep connection alive
+            await self.send(text_data=json.dumps({
+                'type': 'pong'
+            }))
+            return
+
+        if message_type == 'heartbeat':
+            participant_id = data.get('participant_id')
+            if participant_id:
+                await self.update_participant_heartbeat(participant_id)
+                # Don't update participants list after heartbeat - let the background task handle it
+        elif message_type in ['leave_game', 'kick_player']:
+            participant_id = data.get('participant_id')
+            if participant_id:
+                try:
+                    # Get participant info before deletion
+                    participant = await database_sync_to_async(QuizGameParticipant.objects.get)(participant_id=participant_id)
+                    display_name = participant.display_name
+                    
+                    # For kick_player, verify that the request comes from the host
+                    if message_type == 'kick_player':
+                        game = await database_sync_to_async(lambda: participant.quiz_game)()
+                        # Get host_id from message
+                        host_id = data.get('host_id')
+                        print(f'Kick attempt - Game host_id: {game.host_id}, Message host_id: {host_id}')
+                        if not host_id:
+                            print('No host_id in message')
+                            return
+                        if str(game.host_id) != str(host_id):
+                            print(f'Host ID mismatch: {game.host_id} != {host_id}')
+                            return
+                        
+                        # Also verify against cookie as backup
+                        cookie_host_id = self.scope.get('cookies', {}).get('host_id')
+                        if not cookie_host_id or str(cookie_host_id) != str(host_id):
+                            print(f'Cookie host_id mismatch: {cookie_host_id} != {host_id}')
+                            return
+                    
+                    # Delete the participant
+                    await database_sync_to_async(participant.delete)()
+                    
+                    # Notify other players
+                    await self.channel_layer.group_send(
+                        self.room_group_name,
+                        {
+                            'type': 'player_left',
+                            'player_name': display_name,
+                            'was_kicked': message_type == 'kick_player',
+                            'participant_id': participant_id
+                        }
+                    )
+                    
+                    # Update participants list
+                    await self.update_participants()
+                    
+                    # If it's the kicked player's connection, send them home
+                    if participant_id == self.participant_id:
+                        await self.send(text_data=json.dumps({
+                            'type': 'redirect',
+                            'url': '/'
+                        }))
+                except QuizGameParticipant.DoesNotExist:
+                    pass
+        elif message_type == 'update_participants':
+            await self.update_participants()
+        elif message_type == 'start_game':
+            host_id = data.get('host_id')
+            if host_id:
+                success = await self.start_game(host_id)
+                if success:
+                    await self.channel_layer.group_send(
+                        self.room_group_name,
+                        {
+                            'type': 'game_state_update',
+                            'action': 'start_game',
+                            'redirect_url': f'/play/game/{self.join_code}/question'
+                        }
+                    )
+
+    @database_sync_to_async
+    def update_participant_heartbeat(self, participant_id):
+        try:
+            participant = QuizGameParticipant.objects.get(participant_id=participant_id)
+            from django.utils import timezone
+            participant.last_heartbeat = timezone.now()
+            participant.save()
+            return True
+        except QuizGameParticipant.DoesNotExist:
+            return False
+
+    async def get_participants_list(self):
+        try:
+            from django.utils import timezone
+            from datetime import timedelta
+            game = await database_sync_to_async(QuizGame.objects.get)(join_code=self.join_code)
+            # Only return participants that have been seen in the last minute
+            cutoff_time = timezone.now() - timedelta(seconds=20)  # Consider inactive after 20 seconds (2 missed heartbeats)
+            participants = await database_sync_to_async(lambda: list(
+                game.participants.filter(last_heartbeat__gte=cutoff_time)
+                .values('participant_id', 'display_name')
+            ))()
+
+            
+            # Send join notification for new participants
+            try:
+                prev_names = set(p['display_name'] for p in self.last_participants) if hasattr(self, 'last_participants') else set()
+                current_names = set(p['display_name'] for p in participants)
+                new_participants = current_names - prev_names
+                
+                for name in new_participants:
+                    await self.channel_layer.group_send(
+                        self.room_group_name,
+                        {
+                            'type': 'player_joined',
+                            'player_name': name
+                        }
+                    )
+            except Exception as e:
+                print(f'Error sending join notifications: {e}')
+            
+            self.last_participants = participants
+            return participants
+        except QuizGame.DoesNotExist:
+            return []
+
+    async def update_participants(self):
+        participants = await self.get_participants_list()
+        await self.channel_layer.group_send(
+            self.room_group_name,
+            {
+                'type': 'participants_list_update',
+                'participants': participants
+            }
+        )
+
+    async def participants_list_update(self, event):
+        await self.send(text_data=json.dumps({
+            'type': 'participants_list_update',
+            'participants': event['participants']
+        }))
+
+    @database_sync_to_async
+    def start_game(self, host_id):
+        try:
+            game = QuizGame.objects.get(join_code=self.join_code)
+            if str(game.host_id) == str(host_id):
+                from django.utils import timezone
+                game.current_state = 'question'
+                game.question_start_time = timezone.now()
+                game.save()
+                return True
+        except QuizGame.DoesNotExist:
+            pass
+        return False
+
+    async def game_state_update(self, event):
+        await self.send(text_data=json.dumps({
+            'type': 'game_state_update',
+            'action': event['action'],
+            'redirect_url': event.get('redirect_url')
+        }))
+
+    async def player_joined(self, event):
+        await self.send(text_data=json.dumps({
+            'type': 'player_joined',
+            'player_name': event['player_name']
+        }))
+
+    async def player_left(self, event):
+        message = {
+            'type': 'player_left',
+            'player_name': event['player_name'],
+            'was_kicked': event.get('was_kicked', False)
+        }
+        if event.get('was_kicked') and event.get('participant_id'):
+            message['participant_id'] = event['participant_id']
+        await self.send(text_data=json.dumps(message))
+
+

django/play/migrations/0006_quizgame_current_question_index_and_more.py

@@ -0,0 +1,28 @@
+# Generated by Django 5.1.7 on 2025-04-05 17:37
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('play', '0005_quizgameparticipant_last_heartbeat'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='quizgame',
+            name='current_question_index',
+            field=models.IntegerField(default=0),
+        ),
+        migrations.AddField(
+            model_name='quizgame',
+            name='current_state',
+            field=models.CharField(choices=[('lobby', 'In Lobby'), ('question', 'Frage läuft'), ('scores', 'Punkteübersicht'), ('finished', 'Beendet')], default='lobby', max_length=20),
+        ),
+        migrations.AddField(
+            model_name='quizgame',
+            name='question_start_time',
+            field=models.DateTimeField(blank=True, null=True),
+        ),
+    ]

django/play/migrations/0007_alter_quizgameparticipant_quiz_game.py

@@ -0,0 +1,19 @@
+# Generated by Django 5.1.7 on 2025-04-05 18:27
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('play', '0006_quizgame_current_question_index_and_more'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='quizgameparticipant',
+            name='quiz_game',
+            field=models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='participants', to='play.quizgame'),
+        ),
+    ]

django/play/migrations/0008_quizgameparticipant_last_answer_and_more.py

@@ -0,0 +1,23 @@
+# Generated by Django 5.1.7 on 2025-04-05 18:59
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('play', '0007_alter_quizgameparticipant_quiz_game'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='quizgameparticipant',
+            name='last_answer',
+            field=models.IntegerField(blank=True, null=True),
+        ),
+        migrations.AddField(
+            model_name='quizgameparticipant',
+            name='last_answer_correct',
+            field=models.BooleanField(blank=True, null=True),
+        ),
+    ]

django/play/migrations/0009_quizanswer.py

@@ -0,0 +1,29 @@
+# Generated by Django 5.1.7 on 2025-04-05 20:04
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('play', '0008_quizgameparticipant_last_answer_and_more'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='QuizAnswer',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('question_index', models.IntegerField()),
+                ('answer_index', models.IntegerField()),
+                ('is_correct', models.BooleanField()),
+                ('score', models.IntegerField()),
+                ('time_remaining', models.IntegerField()),
+                ('participant', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='answers', to='play.quizgameparticipant')),
+            ],
+            options={
+                'unique_together': {('participant', 'question_index')},
+            },
+        ),
+    ]

django/play/migrations/0010_alter_quizgameparticipant_last_heartbeat.py

@@ -0,0 +1,18 @@
+# Generated by Django 5.1.7 on 2025-04-06 17:21
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('play', '0009_quizanswer'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='quizgameparticipant',
+            name='last_heartbeat',
+            field=models.DateTimeField(auto_now_add=True),
+        ),
+    ]

django/play/models.py

@@ -6,9 +6,19 @@ import random, string
 
 # Create your models here.
 class QuizGame(models.Model):
+    GAME_STATES = [
+        ('lobby', 'In Lobby'),
+        ('question', 'Frage läuft'),
+        ('scores', 'Punkteübersicht'),
+        ('finished', 'Beendet')
+    ]
+    
     host_id = models.CharField(max_length=200, unique=True)
     join_code = models.CharField(max_length=6, unique=True, blank=True)
     quiz_id = models.ForeignKey(QivipQuiz, on_delete=models.CASCADE)
+    current_state = models.CharField(max_length=20, choices=GAME_STATES, default='lobby')
+    current_question_index = models.IntegerField(default=0)
+    question_start_time = models.DateTimeField(null=True, blank=True)
 
     def save(self, *args, **kwargs):
         if not self.join_code:
@@ -30,10 +40,12 @@ class QuizGame(models.Model):
 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")
+    quiz_game = models.ForeignKey(QuizGame, on_delete=models.CASCADE, related_name="participants")
     score = models.IntegerField(verbose_name="Punkte", default=0)
     avatar = models.CharField(max_length=200, blank=True, default="")
-    last_heartbeat = models.DateTimeField(auto_now=True)
+    last_heartbeat = models.DateTimeField(auto_now_add=True)
+    last_answer = models.IntegerField(null=True, blank=True)
+    last_answer_correct = models.BooleanField(null=True, blank=True)
 
     def save(self, *args, **kwargs):
         if not self.participant_id:
@@ -45,3 +57,20 @@ class QuizGameParticipant(models.Model):
             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
+
+class QuizAnswer(models.Model):
+    participant = models.ForeignKey(QuizGameParticipant, on_delete=models.CASCADE, related_name='answers')
+    question_index = models.IntegerField()
+    answer_index = models.IntegerField()
+    is_correct = models.BooleanField()
+    score = models.IntegerField()
+    time_remaining = models.IntegerField()
+    
+    class Meta:
+        unique_together = ['participant', 'question_index']
+
+    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/routing.py

@@ -1,6 +1,8 @@
 from django.urls import re_path
-from . import consumers
+from .consumers.game import GameConsumer
+from .consumers.lobby import LobbyConsumer
 
 websocket_urlpatterns = [
-    re_path(r'ws/game/(?P<join_code>\w+)/$', consumers.LobbyConsumer.as_asgi()),
+    re_path(r'ws/game/(?P<join_code>\w+)/$', GameConsumer.as_asgi()),
+    re_path(r'ws/play/lobby/(?P<join_code>\w+)/$', LobbyConsumer.as_asgi()),
 ]

django/play/urls.py

@@ -8,6 +8,8 @@ urlpatterns = [
     path('game/<str:join_code>', views.lobby, name='lobby'),
     path('game/<str:join_code>/participate', views.create_participant, name='create_participant'),
     path('join', views.join_game, name='join_game'),
-    path('game/<str:join_code>/<int:question_id>', views.question, name='question'),
-    path('game/<str:join_code>/<int:question_id>/participant', views.question_participant, name='question_participant'),
+    path('game/<str:join_code>/question', views.question, name='question'),
+    path('game/<str:join_code>/waiting', views.waiting_room, name='waiting'),
+    path('game/<str:join_code>/scores', views.scores, name='scores'),
+    path('game/<str:join_code>/finished', views.finished, name='finished'),
 ]

django/play/views.py

@@ -29,6 +29,7 @@ def lobby(request, join_code):
         participant = QuizGameParticipant.objects.get(participant_id=participant_id)
         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.save()
     except QuizGameParticipant.DoesNotExist:
         return redirect('play:create_participant', join_code=join_code)
@@ -37,34 +38,41 @@ def lobby(request, join_code):
     return render(request, 'play/lobby.html', context=context)
 
 def create_participant(request, join_code):
+    quiz_game = get_object_or_404(QuizGame, join_code=join_code)
+
     if "participant_id" in request.COOKIES:
         # Prüfe ob der Teilnehmer noch existiert
         participant_id = request.COOKIES['participant_id']
         try:
             participant = QuizGameParticipant.objects.get(participant_id=participant_id)
+            if participant.quiz_game.join_code != join_code:
+                participant.quiz_game = quiz_game
+                participant.score = 0  # Reset score when joining new game
+                participant.save()
             return redirect('play:lobby', join_code=join_code)
         except QuizGameParticipant.DoesNotExist:
             # Cookie löschen wenn Teilnehmer nicht mehr existiert
             response = HttpResponseRedirect(request.path)
             response.delete_cookie('participant_id')
             return response
+
     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)
+        if not display_name:
+            return render(request, 'play/initialize_participant.html', {
+                'join_code': join_code,
+                'error': 'Bitte geben Sie einen Namen ein'
+            })
+
         participant = QuizGameParticipant()
         participant.display_name = display_name
-            participant.quiz_game = quiz
+        participant.quiz_game = quiz_game
+        participant.score = 0  # Initialize score
         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})
 
@@ -89,32 +97,162 @@ def join_game(request):
         join_code = request.POST.get('game_code')
         try:
             quiz = QuizGame.objects.get(join_code=join_code)
+            # Redirect to create_participant if no participant cookie exists
+            if not "participant_id" in request.COOKIES:
+                return redirect('play:create_participant', 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')
 
-def question(request, join_code, question_id):
-    question = get_object_or_404(QivipQuestion, pk=question_id)
-
-    if question.data:
-            question.data = json.loads(question.data)
+def finished(request, join_code):
+    try:
+        game = QuizGame.objects.get(join_code=join_code)
+        participant = None
+        participant_id = request.session.get('participant_id')
+        if participant_id:
+            participant = QuizGameParticipant.objects.filter(
+                quiz_game=game,
+                participant_id=participant_id
+            ).first()
 
         context = {
-        'question': question,
+            'join_code': join_code,
+            'is_host': str(game.host_id) == str(request.session.get('host_id')),
+            'participant_id': participant_id if participant else None
         }
+        return render(request, 'play/game/finished.html', context)
+    except QuizGame.DoesNotExist:
+        return redirect('home')
 
-    return render(request, 'play/game/question_host.html', {'question': question, 'debug': "debug"})
+def scores(request, join_code):
+    quiz_game = get_object_or_404(QuizGame, join_code=join_code)
     
-def question_participant(request, join_code, question_id):
-    question = get_object_or_404(QivipQuestion, pk=question_id)
+    # Verify game state
+    if quiz_game.current_state != 'scores':
+        return redirect('play:lobby', join_code=join_code)
     
-    if question.data:
-            question.data = json.loads(question.data)
+    # Get participants sorted by score
+    participants = QuizGameParticipant.objects.filter(quiz_game=quiz_game).order_by('-score')
     
-    context = {
-        'question': question,
-    }
+    # Check if user is host
+    is_host = False
+    if 'host_id' in request.COOKIES and request.COOKIES['host_id'] == quiz_game.host_id:
+        is_host = True
     
-    return render(request, 'play/game/question_participant.html', {'question': question, 'debug': "debug"})
+    # Get current question for context
+    questions = quiz_game.quiz_id.questions.all()
+    current_question = questions[quiz_game.current_question_index]
+    question_data = json.loads(current_question.data)
+    
+    return render(request, 'play/game/score_overview.html', {
+        'quiz_game': quiz_game,
+        'participants': participants,
+        'is_host': is_host,
+        'host_id': quiz_game.host_id if is_host else None,
+        'is_last_question': quiz_game.current_question_index + 1 >= len(questions),
+        'question_data': question_data,
+        'question_index': quiz_game.current_question_index,
+        'total_questions': len(questions)
+    })
+
+def finished(request, join_code):
+    quiz_game = get_object_or_404(QuizGame, join_code=join_code)
+    
+    # Verify game state
+    if quiz_game.current_state != 'finished':
+        return redirect('play:lobby', join_code=join_code)
+    
+    # Get participants sorted by score
+    participants = QuizGameParticipant.objects.filter(quiz_game=quiz_game).order_by('-score')
+    
+    # Check if user is host
+    is_host = False
+    if 'host_id' in request.COOKIES and request.COOKIES['host_id'] == quiz_game.host_id:
+        is_host = True
+
+    # Get participant if exists
+    participant_id = request.COOKIES.get('participant_id')
+    participant = None
+    if participant_id:
+        participant = QuizGameParticipant.objects.filter(
+            quiz_game=quiz_game,
+            participant_id=participant_id
+        ).first()
+    
+    return render(request, 'play/game/finished.html', {
+        'quiz_game': quiz_game,
+        'participants': participants,
+        'winner': participants.first() if participants.exists() else None,
+        'join_code': join_code,
+        'is_host': is_host,
+        'participant_id': participant_id if participant else None
+    })
+
+def question(request, join_code):
+    quiz_game = get_object_or_404(QuizGame, join_code=join_code)
+    
+    # Verify game state
+    if quiz_game.current_state != 'question':
+        return redirect('play:lobby', join_code=join_code)
+    
+    # Get current question
+    questions = quiz_game.quiz_id.questions.all()
+    if quiz_game.current_question_index >= len(questions):
+        return redirect('play:lobby', join_code=join_code)
+    
+    current_question = questions[quiz_game.current_question_index]
+    question_data = json.loads(current_question.data)
+    
+    # Check if user is host
+    if 'host_id' in request.COOKIES and request.COOKIES['host_id'] == quiz_game.host_id:
+        return render(request, 'play/game/question_host.html', {
+            'quiz_game': quiz_game,
+            'question_data': question_data,
+            'host_id': quiz_game.host_id,
+            'start_time': int(quiz_game.question_start_time.timestamp() * 1000),
+            'question_index': quiz_game.current_question_index,
+            'total_questions': len(questions)
+        })
+    
+    # Handle participant view
+    if not 'participant_id' in request.COOKIES:
+        return redirect('play:create_participant', join_code=join_code)
+    
+    participant_id = request.COOKIES['participant_id']
+    try:
+        participant = QuizGameParticipant.objects.get(participant_id=participant_id)
+    except QuizGameParticipant.DoesNotExist:
+        return redirect('play:create_participant', join_code=join_code)
+    
+    return render(request, 'play/game/question_participant.html', {
+        'quiz_game': quiz_game,
+        'question_data': question_data,
+        'participant': participant,
+        'start_time': int(quiz_game.question_start_time.timestamp() * 1000),
+        'question_index': quiz_game.current_question_index,
+        'total_questions': len(questions)
+    })
+
+def waiting_room(request, join_code):
+    quiz_game = get_object_or_404(QuizGame, join_code=join_code)
+    
+    # Check if user is host
+    if 'host_id' in request.COOKIES and request.COOKIES['host_id'] == quiz_game.host_id:
+        return redirect('play:question', join_code=join_code)
+    
+    # Handle participant view
+    if not 'participant_id' in request.COOKIES:
+        return redirect('play:create_participant', join_code=join_code)
+    
+    participant_id = request.COOKIES['participant_id']
+    try:
+        participant = QuizGameParticipant.objects.get(participant_id=participant_id)
+    except QuizGameParticipant.DoesNotExist:
+        return redirect('play:create_participant', join_code=join_code)
+    
+    return render(request, 'play/game/wait_for_other_players.html', {
+        'quiz_game': quiz_game,
+        'participant': participant
+    })

django/static/css/t-input.css

@@ -101,6 +101,15 @@ div.qp-answer-container-host div p {
     @apply font-black text-xl p-4;
 }
 
+/* Filter Panel Styles */
+#filterPanel {
+    @apply hidden transition-all duration-300 ease-in-out;
+}
+
+#filterPanel.show {
+    @apply block;
+}
+
 div.qp-question-container {
     @apply text-center text-3xl px-4 py-9 h-screen;
 }

django/templates/base.html

@@ -6,12 +6,56 @@
     <meta charset="UTF-8">
     <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">
     <title>qivip</title>
 </head>
 <body>
     {% include 'partials/_nav.html' %}
     {% block content%}{% endblock %}
     {% include 'partials/_footer.html' %}
+    
+    <!-- Toast Container -->
+    <div id="toast-container" class="fixed top-4 right-4 z-50"></div>
+
+    <!-- Base JavaScript -->
+    <script>
+        // WebSocket Utility
+        const wsUtil = {
+            handleClose: function(e) {
+                if (e.code === 1000 || e.code === 1001) {
+                    console.log('Socket closed normally');
+                } else {
+                    console.error('Socket closed unexpectedly', e.code);
+                }
+            }
+        };
+
+        // Toast Notification System
+        const toast = {
+            create: function(message, type = 'info', duration = 3000) {
+                const toast = document.createElement('div');
+                toast.className = `mb-4 p-4 rounded-lg shadow-lg transform transition-all duration-300 ease-in-out
+                    ${type === 'success' ? 'bg-green-100 border-l-4 border-green-500 text-green-700' :
+                      type === 'error' ? 'bg-red-100 border-l-4 border-red-500 text-red-700' :
+                      type === 'warning' ? 'bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700' :
+                      'bg-blue-100 border-l-4 border-blue-500 text-blue-700'}`;
+                toast.innerHTML = message;
+                
+                const container = document.getElementById('toast-container');
+                container.appendChild(toast);
+
+                // Animate in
+                setTimeout(() => toast.classList.add('translate-x-0', 'opacity-100'), 100);
+                toast.classList.add('-translate-x-4', 'opacity-0');
+
+                // Remove after duration
+                setTimeout(() => {
+                    toast.classList.add('-translate-x-4', 'opacity-0');
+                    setTimeout(() => toast.remove(), 300);
+                }, duration);
+            }
+        };
+    </script>
     {% block extra_js %}{% endblock %}
 </body>
 </html>

django/templates/library/overview_quiz.html

@@ -1,15 +1,9 @@
 {% extends 'base.html' %}
-{% block content %}
 {% load static %}
-<head>
-  <meta charset="utf-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="stylesheet" href="{% static 'swiper/swiper-bundle.min.css' %}">
-  <style>
-
-
-
 
+{% block extra_css %}
+<link rel="stylesheet" href="{% static 'swiper/swiper-bundle.min.css' %}">
+<style>
   .swiper {
     width: 100%;
     height: 100%;
@@ -24,203 +18,361 @@
     align-items: center;
   }
 
+  .custom-outline {
+    -webkit-text-stroke: 0.2px rgb(0, 0, 0);
+  }
+</style>
+{% endblock %}
 
-  </style>
-</head>
+{% block content %}
 
-<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 class="container mx-auto px-4 py-4 flex justify-between items-center">
+    <button id="filterButton" class="p-2 hover:bg-gray-100 rounded-lg transition-colors duration-200 flex items-center gap-2 text-gray-700">
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+        </svg>
+        <span>Filter</span>
+    </button>
+    <div class="flex gap-2">
+        <a href="{% url 'library:overview_quiz' %}" class="inline-flex items-center px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors duration-200">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
+            </svg>
+            Zurücksetzen
+        </a>
+        <a href="{% url 'library:new_quiz' %}" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
+            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+            </svg>
+            Neues Quiz
+        </a>
+    </div>
 </div>
 
-<div 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>
+<div id="filterPanel" class="container mx-auto px-4">
+    <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-200">
+        <form method="get" class="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div class="space-y-2">
+                <label class="block text-sm font-medium text-gray-700">Minimale Fragen</label>
+                {{ form.min_amout_questions }}
+            </div>
+            <div class="space-y-2">
+                <label class="block text-sm font-medium text-gray-700">Maximale Fragen</label>
+                {{ form.max_amout_questions }}
+            </div>
+            <div class="space-y-2">
+                <label class="block text-sm font-medium text-gray-700">Von User</label>
+                {{ form.user }}
+            </div>
+            <div class="md:col-span-3 flex justify-end">
+                <button type="submit" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors duration-200">
+                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
+                    </svg>
+                    Filtern
+                </button>
+            </div>
         </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>
+
+
+{% if user.is_authenticated %}
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
+  <div class="flex items-center gap-3">
+    <h2 id="my-quizzes" class="text-2xl font-bold text-gray-900">Eigene Quiz</h2>
+    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
+  </div>
 </div>
 
-<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/{{ quiz.image.url }}');" {% endif %}>
-      <div class="absolute inset-0 bg-gray-900/60 bg-opacity-50 rounded-lg"></div>
+<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 auto-rows-fr">
+    {% for quiz in my_quizzes %}
+    <article class="relative min-h-[20rem] rounded-xl shadow-lg overflow-hidden bg-white flex flex-col">
+        <!-- Image Section (Top) -->
+        <div class="h-48 w-full relative flex-shrink-0">
+          {% if quiz.image %}
+          <div class="absolute inset-0 bg-cover bg-center" style="background-image: url({{ quiz.image.url }});"></div>
 
-      <h2 class=" break-words truncate text-white drop-shadow-lg custom-outline"> <a href="{% url 'library:detail_quiz' quiz.id %}">{{ quiz.name }}</a></h2>
+          {% else %}
+          <div class="h-full bg-gradient-to-r from-blue-500 to-blue-600"></div>
+          {% endif %}
+        </div>
 
-      <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>
+        <!-- Content Section (Bottom) -->
+        <div class="flex-grow bg-white p-4 flex flex-col gap-3">
+          <!-- Title -->
+          <h2 class="text-xl font-bold text-gray-900 break-words mb-2"> 
+            <a href="{% url 'library:detail_quiz' quiz.id %}" class="hover:text-blue-600 transition-colors">{{ quiz.name }}</a>
+          </h2>
+          <!-- Description -->
+          <p class="text-sm text-gray-700 break-words mb-3">{{ quiz.description }}</p>
 
+          <!-- Quiz Info Grid -->
+          <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+            <!-- Difficulty -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+              <span class="text-gray-800">{{ quiz.difficulty }}</span>
+            </div>
             
-          <p class=" font-bold break-words truncate text-white drop-shadow-lg custom-outline">
+            <!-- Questions Count -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span class="text-gray-800">{{ quiz.questions.count }} Fragen</span>
+            </div>
+            
+            <!-- Status -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span class="text-gray-800">{{ quiz.status }}</span>
+            </div>
+            
+            <!-- Rating -->
+            <div class="flex items-center gap-1">
+              {% for i in '12345'|make_list %}
+                {% if forloop.counter <= quiz.average_rating|floatformat:0|add:0 %}
+                  <span class="text-yellow-500 text-base">★</span>
+                {% else %}
+                  <span class="text-gray-300 text-base">★</span>
+                {% endif %}
+              {% endfor %}
+              <span class="text-gray-600 text-sm">({{ quiz.rating_count }})</span>
+            </div>
+          </div>
+
+          <!-- Authors -->
           {% if quiz.authors.all %}
-           Autor(en):
+          <div class="flex items-center gap-2 text-sm mt-2">
+            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
+            <span class="text-gray-600">
               {% for author in quiz.authors.all %}
-           
                 {{ author.username }}{% if not forloop.last %}, {% endif %}
               {% endfor %}
-        </p>
+            </span>
+          </div>
           {% endif %}
 
-       
-        </p>
-    
-        <!-- Buttons bleiben am unteren Rand -->
-        <div class="flex justify-between items-center gap-2 ">
-          <a href="{% url 'play:create_game' quiz.id %}" 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  font-bold  drop-shadow-lg custom-outline">
-              <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="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+          <!-- Action Buttons -->
+          <div class="flex justify-between items-center gap-2 mt-3 border-t pt-3">
+            <a href="{% url 'play:create_game' quiz.id %}" 
+               class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors duration-200 flex items-center gap-2">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              Spielen
+            </a>
+            <div class="flex gap-1">
+              <a href="{% url 'library:detail_quiz' quiz.id %}" 
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                 </svg>
               </a>
-            <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" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
-                <path stroke-linecap="round" stroke-linejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" />
+              {% if quiz.user == request.user %}
+              <a href="{% url 'library:edit_quiz' quiz.id %}" 
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                 </svg>
-              
               </a>
+              <a href="{% url 'library:delete_quiz' quiz.id %}" 
+                 class="p-1.5 bg-red-100 hover:bg-red-200 text-red-700 rounded-lg transition-colors duration-200">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                </svg>
+              </a>
+              {% endif %}
             </div>
           </div>
-    
-      </div>
           </div>
+    </article>
     {% 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="break-words truncate 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>
-      {% if quiz.original_creator %}
-      <p class=" font-bold break-words truncate text-white drop-shadow-lg custom-outline">Ursprünglich erstellt von: {{ quiz.original_creator }}</p>
-      {% endif %}
-  
-      <!-- Buttons bleiben am unteren Rand -->
-      <div class="flex justify-between items-center gap-2 ">
-        <a href="{% url 'play:create_game' quiz.id %}" 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" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-7">
-            <path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" />
+  <!-- Pagination für eigene Quiz -->
+  {% if my_quizzes.paginator.num_pages > 1 %}
+  <div class="flex justify-center space-x-2 mt-6 mb-8">
+    {% if my_quizzes.has_previous %}
+    <a href="?my_page={{ my_quizzes.previous_page_number }}{% if request.GET.other_page %}&other_page={{ request.GET.other_page }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" 
+       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
       </svg>
-
     </a>
-        <div class="flex gap-2">
-          <a href="{% url 'library:overview_quiz' %}?user={{ quiz.user_id }}" class="qp-a-button-small border-2 border-blue-600 text-white  font-bold  drop-shadow-lg custom-outline">
+    {% endif %}
     
-          <button type="submit" class=" text-sm py-1 text-white font-bold drop-shadow-lg custom-outline"> veröffentlicht von {{ quiz.user_id }}</button>
+    <span class="px-3 py-1 text-gray-600">Seite {{ my_quizzes.number }} von {{ my_quizzes.paginator.num_pages }}</span>
+    
+    {% if my_quizzes.has_next %}
+    <a href="?my_page={{ my_quizzes.next_page_number }}{% if request.GET.other_page %}&other_page={{ request.GET.other_page }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" 
+       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
     </a>
+    {% endif %}
   </div>
-      </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 passendes Quiz gefunden!</div>
+<!-- Quiz von anderen Nutzern -->
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-8 mb-6">
+  <div class="flex items-center gap-3">
+    <h2 id="other-quizzes" class="text-2xl font-bold text-gray-900">Quiz von anderen Nutzern</h2>
+    <div class="h-0.5 flex-grow bg-gradient-to-r from-blue-600 to-transparent rounded-full"></div>
+  </div>
+</div>
+
+{% if other_quizzes %}
+<div class="container mx-auto px-4 sm:px-6 lg:px-8">
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 auto-rows-fr">
+    {% for quiz in other_quizzes %}
+    <article class="relative min-h-[20rem] rounded-xl shadow-lg overflow-hidden bg-white flex flex-col">
+        <!-- Image Section (Top) -->
+        <div class="h-48 w-full relative flex-shrink-0">
+          {% if quiz.image %}
+          <div class="absolute inset-0 bg-cover bg-center" style="background-image: url({{ quiz.image.url }});"></div>
+
+          {% else %}
+          <div class="h-full bg-gradient-to-r from-blue-500 to-blue-600"></div>
+          {% endif %}
+        </div>
+
+        <!-- Content Section (Bottom) -->
+        <div class="flex-grow bg-white p-4 flex flex-col gap-3">
+          <!-- Title -->
+          <h2 class="text-xl font-bold text-gray-900 break-words mb-2"> 
+            <a href="{% url 'library:detail_quiz' quiz.id %}" class="hover:text-blue-600 transition-colors">{{ quiz.name }}</a>
+          </h2>
+          <!-- Description -->
+          <p class="text-sm text-gray-700 break-words mb-3">{{ quiz.description }}</p>
+
+          <!-- Quiz Info Grid -->
+          <div class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
+            <!-- Difficulty -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+              </svg>
+              <span class="text-gray-800">{{ quiz.difficulty }}</span>
+            </div>
+            
+            <!-- Questions Count -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span class="text-gray-800">{{ quiz.questions.count }} Fragen</span>
+            </div>
+            
+            <!-- Status -->
+            <div class="flex items-center gap-2">
+              <svg class="w-4 h-4 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              <span class="text-gray-800">{{ quiz.status }}</span>
+            </div>
+            
+            <!-- Rating -->
+            <div class="flex items-center gap-1">
+              {% for i in '12345'|make_list %}
+                {% if forloop.counter <= quiz.average_rating|floatformat:0|add:0 %}
+                  <span class="text-yellow-500 text-base">★</span>
+                {% else %}
+                  <span class="text-gray-300 text-base">★</span>
+                {% endif %}
+              {% endfor %}
+              <span class="text-gray-600 text-sm">({{ quiz.rating_count }})</span>
+            </div>
+          </div>
+
+          <!-- Authors -->
+          {% if quiz.authors.all %}
+          <div class="flex items-center gap-2 text-sm mt-2">
+            <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+            </svg>
+            <span class="text-gray-600">
+              {% for author in quiz.authors.all %}
+                {{ author.username }}{% if not forloop.last %}, {% endif %}
+              {% endfor %}
+            </span>
+          </div>
+          {% endif %}
+
+          <!-- Action Buttons -->
+          <div class="flex justify-between items-center gap-2 mt-3 border-t pt-3">
+            <a href="{% url 'play:create_game' quiz.id %}" 
+               class="px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors duration-200 flex items-center gap-2">
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+              Spielen
+            </a>
+            <div class="flex gap-1">
+              <a href="{% url 'library:detail_quiz' quiz.id %}" 
+                 class="p-1.5 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg transition-colors duration-200">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                </svg>
+              </a>
+            </div>
+          </div>
+        </div>
+    </article>
+    {% endfor %}
+  </div>
+
+  <!-- Pagination für andere Quiz -->
+  {% if other_quizzes.paginator.num_pages > 1 %}
+  <div class="flex justify-center space-x-2 mt-6 mb-8">
+    {% if other_quizzes.has_previous %}
+    <a href="?other_page={{ other_quizzes.previous_page_number }}{% if request.GET.my_page %}&my_page={{ request.GET.my_page }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" 
+       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+      </svg>
+    </a>
+    {% endif %}
+    
+    <span class="px-3 py-1 text-gray-600">Seite {{ other_quizzes.number }} von {{ other_quizzes.paginator.num_pages }}</span>
+    
+    {% if other_quizzes.has_next %}
+    <a href="?other_page={{ other_quizzes.next_page_number }}{% if request.GET.my_page %}&my_page={{ request.GET.my_page }}{% endif %}{% if request.GET.search %}&search={{ request.GET.search }}{% endif %}" 
+       class="px-3 py-1 bg-gray-100 text-gray-700 hover:bg-gray-200 rounded-lg transition-colors">
+      <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+      </svg>
+    </a>
+    {% endif %}
+  </div>
+  {% endif %}
+</div>
+{% else %}
+<div class="container mx-auto px-4 sm:px-6 lg:px-8 mt-4">
+  <p class="text-gray-600 text-center">Keine öffentlichen Quiz gefunden.</p>
+</div>
 {% endif %}
-
-
-
-<!-- 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();
-        },
-      },
+document.addEventListener('DOMContentLoaded', function() {
+    document.getElementById('filterButton').addEventListener('click', function() {
+        document.getElementById('filterPanel').classList.toggle('show');
     });
-  
-    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 %}
+});
+</script>
+{% endblock content %}

django/templates/play/game/common_scripts.html

@@ -0,0 +1,89 @@
+{% load static %}
+
+<script>
+    // Gemeinsame Funktionen für alle Spielseiten
+    // Toast-Benachrichtigungen und WebSocket-Funktionen werden im globalen Scope definiert
+    window.toast = {
+        create(message, type = 'info') {
+            const toastElement = document.createElement('div');
+            toastElement.className = `toast toast-${type}`;
+            toastElement.textContent = message;
+            document.body.appendChild(toastElement);
+
+            // Animation
+            setTimeout(() => {
+                toastElement.classList.add('show');
+                setTimeout(() => {
+                    toastElement.classList.remove('show');
+                    setTimeout(() => toastElement.remove(), 300);
+                }, 3000);
+            }, 100);
+        }
+    };
+
+    // WebSocket-Hilfsfunktionen
+    window.wsUtil = {
+        handleClose(e) {
+            if (e.code !== 1000 && e.code !== 1001) {
+                console.error('WebSocket closed unexpectedly', e.code);
+            }
+        }
+    };
+
+    // WebSocket-Initialisierung
+    window.initializeGameSocket = function(gameCode) {
+        const wsScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
+        const gameSocket = new WebSocket(
+            `${wsScheme}://${window.location.host}/ws/game/${gameCode}/`
+        );
+
+        gameSocket.onmessage = (e) => {
+            const data = JSON.parse(e.data);
+            if (data.type === 'player_left') {
+                const message = data.was_kicked 
+                    ? `${data.player_name} wurde wegen Inaktivität entfernt`
+                    : `${data.player_name} hat das Spiel verlassen`;
+                toast.create(message, data.was_kicked ? 'error' : 'warning');
+            }
+        };
+
+        gameSocket.onclose = (e) => wsUtil.handleClose(e);
+
+        return gameSocket;
+    }
+</script>
+
+<style>
+    .toast {
+        position: fixed;
+        top: 20px;
+        right: 20px;
+        padding: 12px 24px;
+        border-radius: 4px;
+        color: white;
+        opacity: 0;
+        transition: opacity 0.3s ease-in-out;
+        z-index: 9999;
+        max-width: 300px;
+    }
+
+    .toast.show {
+        opacity: 1;
+    }
+
+    .toast-info {
+        background-color: #3498db;
+    }
+
+    .toast-success {
+        background-color: #2ecc71;
+    }
+
+    .toast-warning {
+        background-color: #f1c40f;
+    }
+
+    .toast-error {
+        background-color: #e74c3c;
+    }
+</style>

django/templates/play/game/finished.html

@@ -0,0 +1,201 @@
+{% extends 'base.html' %}
+{% load static %}
+
+{% block content %}
+<div class="container mx-auto px-4">
+    <div class="max-w-2xl mx-auto">
+        <div class="bg-white rounded-lg shadow-md p-8 mb-6">
+            <div class="text-center mb-8">
+                <h1 class="text-4xl font-bold text-blue-600 mb-4">Quiz beendet!</h1>
+                <p class="text-xl text-gray-600">Vielen Dank fürs Mitspielen!</p>
+            </div>
+                    
+            {% if not is_host %}
+            <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">
+                    <i class="fas fa-star text-3xl transition-all duration-200 hover:scale-110" data-rating="1"></i>
+                    <i class="fas fa-star text-3xl transition-all duration-200 hover:scale-110" data-rating="2"></i>
+                    <i class="fas fa-star text-3xl transition-all duration-200 hover:scale-110" data-rating="3"></i>
+                    <i class="fas fa-star text-3xl transition-all duration-200 hover:scale-110" data-rating="4"></i>
+                    <i class="fas fa-star text-3xl transition-all duration-200 hover:scale-110" data-rating="5"></i>
+                </div>
+                <p id="rating-message" class="text-center text-blue-600 font-medium"></p>
+            </div>
+            {% endif %}
+
+            <div class="text-center">
+                <a href="{% url 'homepage:home' %}" 
+                   class="inline-block px-8 py-3 text-lg font-semibold text-white bg-blue-600 rounded-full hover:bg-blue-700 transform transition-all duration-200 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+                    Zurück zur Startseite
+                </a>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% if not is_host %}
+{% include 'play/game/common_scripts.html' %}
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const wsScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
+    let gameSocket = null;
+    let reconnectAttempts = 0;
+    let pingInterval = null;
+    const maxReconnectAttempts = 5;
+    const pingDelay = 30000; // 30 seconds
+
+    function startPingInterval() {
+        if (pingInterval) {
+            clearInterval(pingInterval);
+        }
+        pingInterval = setInterval(() => {
+            if (gameSocket && gameSocket.readyState === WebSocket.OPEN) {
+                gameSocket.send(JSON.stringify({ type: 'ping' }));
+            }
+        }, pingDelay);
+    }
+
+    function stopPingInterval() {
+        if (pingInterval) {
+            clearInterval(pingInterval);
+            pingInterval = null;
+        }
+    }
+
+    function connectWebSocket() {
+        if (gameSocket && (gameSocket.readyState === WebSocket.CONNECTING || gameSocket.readyState === WebSocket.OPEN)) {
+            return gameSocket; // Already connected or connecting
+        }
+
+        if (reconnectAttempts >= maxReconnectAttempts) {
+            console.error('Max reconnection attempts reached');
+            document.getElementById('rating-message').textContent = 'Verbindungsfehler. Bitte Seite neu laden.';
+            return null;
+        }
+
+        try {
+            gameSocket = new WebSocket(
+                `${wsScheme}://${window.location.host}/ws/game/{{ join_code }}/`
+            );
+
+            gameSocket.onopen = function(e) {
+                console.log('Game socket connected');
+                reconnectAttempts = 0;
+                startPingInterval();
+                document.getElementById('rating-message').textContent = '';
+            };
+
+            gameSocket.onclose = function(e) {
+                wsUtil.handleClose(e);
+                stopPingInterval();
+                gameSocket = null;
+                reconnectAttempts++;
+                if (reconnectAttempts < maxReconnectAttempts) {
+                    document.getElementById('rating-message').textContent = 'Verbindung wird wiederhergestellt...';
+                    setTimeout(connectWebSocket, 1000 * Math.min(reconnectAttempts, 3));
+                }
+            };
+
+            gameSocket.onerror = function(e) {
+                console.error('Game socket error:', e);
+                document.getElementById('rating-message').textContent = 'Verbindungsfehler aufgetreten';
+            };
+
+            return gameSocket;
+        } catch (error) {
+            console.error('Error creating WebSocket:', error);
+            document.getElementById('rating-message').textContent = 'Verbindungsfehler aufgetreten';
+            return null;
+        }
+    }
+
+    const stars = document.querySelectorAll('.stars i');
+    let rated = false;
+
+    function setRating(rating) {
+        stars.forEach((star, index) => {
+            star.style.color = index < rating ? '#ffc107' : '#e4e5e9';
+        });
+    }
+
+    stars.forEach(star => {
+        star.addEventListener('mouseover', function() {
+            if (!rated) {
+                setRating(this.dataset.rating);
+            }
+        });
+
+        star.addEventListener('mouseout', function() {
+            if (!rated) {
+                setRating(0);
+            }
+        });
+
+        star.addEventListener('click', function() {
+            if (!rated) {
+                const rating = parseInt(this.dataset.rating);
+                rated = true;
+                setRating(rating);
+                
+                if (!gameSocket || gameSocket.readyState !== WebSocket.OPEN) {
+                    console.error('WebSocket is not connected');
+                    document.getElementById('rating-message').textContent = 'Verbindung wird hergestellt...';
+                    gameSocket = connectWebSocket();
+                    if (gameSocket) {
+                        const retryRating = () => {
+                            if (gameSocket.readyState === WebSocket.OPEN) {
+                                star.click();
+                            } else {
+                                setTimeout(retryRating, 500);
+                            }
+                        };
+                        setTimeout(retryRating, 1000);
+                    }
+                    return;
+                }
+
+                try {
+                    gameSocket.send(JSON.stringify({
+                        'type': 'submit_rating',
+                        'participant_id': '{{ participant_id }}',
+                        'rating': rating
+                    }));
+                    document.getElementById('rating-message').textContent = 'Danke für deine Bewertung!';
+                    stars.forEach(s => s.style.cursor = 'default');
+                } catch (error) {
+                    console.error('Error sending rating:', error);
+                    document.getElementById('rating-message').textContent = 'Fehler beim Senden der Bewertung';
+                    rated = false;
+                }
+            }
+        });
+    });
+
+    // Initial connection
+    gameSocket = connectWebSocket();
+});
+</script>
+
+<style>
+.stars i {
+    cursor: pointer;
+    color: #e4e5e9;
+    transition: all 0.2s ease-in-out;
+}
+
+.stars i:hover ~ i {
+    color: #e4e5e9;
+}
+
+.stars:hover i {
+    color: #ffc107;
+}
+
+.stars i:hover {
+    transform: scale(1.2);
+    color: #ffc107;
+}
+</style>
+{% endif %}
+{% endblock %}

django/templates/play/game/question_host.html

@@ -1,35 +1,129 @@
-{% load static %}
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="{% static 'css/t-style.css' %}">
-    <title>qivip</title>
-</head>
-<body>
-    <div>
-        <div  class="qp-question-container">
-            <p class="text-gray-700 font-bold text-xl uppercase">Frage X</p>
-            <img src="integral.png">
-            <h1>Frage: {{ question.data.question }}</h1>
-            <div>
-                <div class="p-4">
-                    <p class="text-blue-500 text-xl">Verbleibende Zeit:</p>
-                    <p id="remaining_time" class="text-6xl">36</p>
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mx-auto px-4">
+    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+        <p class="text-gray-700 font-bold text-xl mb-4">Frage {{ question_index|add:1 }} von {{ total_questions }}</p>
+        <h1 class="text-3xl font-bold mb-6">{{ question_data.question }}</h1>
+        
+        <div class="grid grid-cols-2 gap-4 mb-6">
+            <div class="p-4 bg-blue-50 rounded-lg">
+                <p class="text-blue-600 text-xl mb-2">Verbleibende Zeit</p>
+                <p id="remaining-time" class="text-6xl font-bold text-blue-700">30</p>
             </div>
-                <div class="p-4">
-                    <p class="text-blue-500 text-xl">7/14 Antworten</p>
+            <div class="p-4 bg-blue-50 rounded-lg">
+                <p class="text-blue-600 text-xl mb-2">Antworten</p>
+                <p id="answer-count" class="text-6xl font-bold text-blue-700">0/0</p>
             </div>
         </div>
-        </div>
-        <div class="qp-answer-container-host" id="qp-answer-container-host">
-            {% for option in question.data.options %}
-                <div>
-                    <p>{{ option.value }}</p>
+
+        <div class="grid grid-cols-2 gap-4">
+            {% for option in question_data.options %}
+                <div class="p-4 bg-gray-100 rounded-lg" data-correct="{{ option.is_correct }}">
+                    <p class="text-lg">{{ option.value }}</p>
+                    <p id="option-count-{{ forloop.counter0 }}" class="text-gray-600 hidden">0 Antworten</p>
                 </div>
             {% endfor %}
         </div>
     </div>
-</body>
-</html>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+{% include 'play/game/common_scripts.html' %}
+<script>
+    const joinCode = '{{ quiz_game.join_code }}';
+    const hostId = '{{ host_id }}';
+    const questionStartTime = {{ start_time }};
+    const questionDuration = 30000; // 30 seconds in milliseconds
+    const gameSocket = initializeGameSocket(joinCode);
+    let answeredParticipants = 0;
+    let totalParticipants = 0;
+    const optionCounts = {};
+
+    gameSocket.onmessage = function(e) {
+        const data = JSON.parse(e.data);
+        if (data.type === 'participant_answer') {
+            answeredParticipants++;
+            updateAnswerCount();
+            updateOptionCount(data.answer);
+        } else if (data.type === 'participant_list_update') {
+            totalParticipants = data.participants.length;
+            updateAnswerCount();
+        } else if (data.type === 'game_state_update' && 
+                   data.action === 'show_scores' && 
+                   data.redirect_url) {
+            window.location.href = data.redirect_url;
+        }
+    };
+
+    gameSocket.onclose = function(e) {
+        wsUtil.handleClose(e);
+    };
+
+    function updateAnswerCount() {
+        const answerCountElement = document.getElementById('answer-count');
+        if (answerCountElement) {
+            answerCountElement.textContent = `${answeredParticipants}/${totalParticipants}`;
+        }
+
+        // If everyone has answered, advance to scores
+        if (answeredParticipants === totalParticipants && totalParticipants > 0) {
+            advanceToScores();
+        }
+    }
+
+    function updateOptionCount(optionIndex) {
+        optionCounts[optionIndex] = (optionCounts[optionIndex] || 0) + 1;
+        const optionElement = document.getElementById(`option-count-${optionIndex}`);
+        if (optionElement) {
+            optionElement.textContent = `${optionCounts[optionIndex]} Antworten`;
+        }
+    }
+
+    function advanceToScores() {
+        // Show correct answers and answer counts
+        var correctOptions = document.querySelectorAll('[data-correct="True"]');
+        for (var i = 0; i < correctOptions.length; i++) {
+            correctOptions[i].classList.add('border-2', 'border-green-500');
+        }
+        
+        // Show answer counts
+        var countElements = document.querySelectorAll('[id^="option-count-"]');
+        for (var j = 0; j < countElements.length; j++) {
+            countElements[j].classList.remove('hidden');
+        }
+        
+        // Wait a moment to show the correct answer and counts
+        setTimeout(function() {
+            gameSocket.send(JSON.stringify({
+                'type': 'advance_to_scores',
+                'host_id': hostId
+            }));
+        }, 2000);
+    }
+
+    // Timer
+    function updateTimer() {
+        const now = Date.now();
+        const elapsed = now - questionStartTime;
+        const remaining = Math.max(0, Math.ceil((questionDuration - elapsed) / 1000));
+        
+        document.getElementById('remaining-time').textContent = remaining;
+
+        if (remaining === 0) {
+            advanceToScores();
+        } else {
+            requestAnimationFrame(updateTimer);
+        }
+    }
+
+    // Request initial participants list
+    gameSocket.onopen = function(e) {
+        gameSocket.send(JSON.stringify({
+            'type': 'update_participants'
+        }));
+        updateTimer();
+    };
+</script>
+{% endblock %}

django/templates/play/game/question_participant.html

@@ -1,19 +1,115 @@
-{% load static %}
-<!DOCTYPE html>
-<html lang="de">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="{% static 'css/t-style.css' %}">
-    <title>qivip</title>
-</head>
-<body>
-    <div class="qp-answer-container" id="qp-answer-container">
-        {% for option in question.data.options %}
-                <div>
-                    <p>{{ option.value }}</p>
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mx-auto px-4">
+    <div class="flex justify-end mb-4">
+        <button onclick="leaveGame()" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded">
+            Spiel verlassen
+        </button>
     </div>
+    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+        <p class="text-gray-700 font-bold text-xl mb-4">Frage {{ question_index|add:1 }} von {{ total_questions }}</p>
+        <h1 class="text-3xl font-bold mb-6">{{ question_data.question }}</h1>
+        
+        <div class="p-4 bg-blue-50 rounded-lg mb-6">
+            <p class="text-blue-600 text-xl mb-2">Verbleibende Zeit</p>
+            <p id="remaining-time" class="text-6xl font-bold text-blue-700">30</p>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4" id="options-container">
+            {% for option in question_data.options %}
+                <button 
+                    class="p-4 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option"
+                    data-index="{{ forloop.counter0 }}"
+                    onclick="submitAnswer({{ forloop.counter0 }});">
+                    <p class="text-lg">{{ option.value }}</p>
+                </button>
             {% endfor %}
         </div>
-</body>
-</html>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+{% include 'play/game/common_scripts.html' %}
+<script>
+    let hasAnswered = false;
+    const joinCode = '{{ quiz_game.join_code }}';
+    const participantId = '{{ participant.participant_id }}';
+    const questionStartTime = {{ start_time }};
+    const questionDuration = 30000; // 30 seconds in milliseconds
+    const gameSocket = initializeGameSocket(joinCode);
+
+    gameSocket.onmessage = function(e) {
+        const data = JSON.parse(e.data);
+        if (data.type === 'redirect' && data.url) {
+            window.location.href = data.url;
+        } else if (data.type === 'game_state_update' && 
+            data.action === 'show_scores' && 
+            data.redirect_url) {
+            window.location.href = data.redirect_url;
+        }
+    };
+
+    gameSocket.onclose = function(e) {
+        wsUtil.handleClose(e);
+    };
+
+    function submitAnswer(optionIndex) {
+        if (hasAnswered) return;
+        
+        hasAnswered = true;
+        const now = Date.now();
+        const timeRemaining = Math.max(0, questionDuration - (now - questionStartTime));
+
+        // Disable all options and highlight selected
+        const options = document.getElementsByClassName('answer-option');
+        for (let option of options) {
+            option.disabled = true;
+            option.classList.remove('hover:bg-blue-100');
+            if (parseInt(option.dataset.index) === optionIndex) {
+                option.classList.remove('bg-gray-100');
+                option.classList.add('bg-blue-600', 'text-white');
+            } else {
+                option.classList.add('opacity-50');
+            }
+        }
+
+        // Send answer to server
+        gameSocket.send(JSON.stringify({
+            type: 'submit_answer',
+            participant_id: participantId,
+            answer: optionIndex,
+            time_remaining: timeRemaining
+        }));
+    }
+
+    // Timer
+    function updateTimer() {
+        const now = Date.now();
+        const elapsed = now - questionStartTime;
+        const remaining = Math.max(0, Math.ceil((questionDuration - elapsed) / 1000));
+        
+        document.getElementById('remaining-time').textContent = remaining;
+
+        if (remaining === 0 && !hasAnswered) {
+            // Auto-submit timeout answer
+            submitAnswer(-1);
+        } else if (remaining > 0) {
+            requestAnimationFrame(updateTimer);
+        }
+    }
+
+    function leaveGame() {
+        if (confirm('Möchtest du das Spiel wirklich verlassen?')) {
+            gameSocket.send(JSON.stringify({
+                type: 'leave_game',
+                participant_id: participantId
+            }));
+        }
+    }
+
+    // Start timer when page loads
+    updateTimer();
+</script>
+{% endblock %}

django/templates/play/game/score_overview.html

@@ -1,5 +1,128 @@
-<!--> 
-    Spieler sehen ihre Punktzahl, Platzierung und Richtig/Falsch
+{% extends 'base.html' %}
 
-    Host: Scoreboard, Button: 'Weiter'
-</!-->
+{% block content %}
+<div class="container mx-auto px-4">
+    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+        <h1 class="text-3xl font-bold mb-6">Ergebnisse</h1>
+        
+        <div class="mb-6">
+            <h2 class="text-xl font-bold mb-4">Aktuelle Frage</h2>
+            <p class="text-lg mb-2">{{ question_data.question }}</p>
+            <div class="grid grid-cols-2 gap-4">
+                {% for option in question_data.options %}
+                    <div class="p-4 rounded-lg {% if option.is_correct %}bg-green-100 border-2 border-green-500{% else %}bg-gray-100{% endif %}">
+                        <p class="text-lg">{{ option.value }}</p>
+                        <p class="text-gray-600" id="option-count-{{ forloop.counter0 }}">0 Antworten</p>
+                    </div>
+                {% endfor %}
+            </div>
+        </div>
+
+        <div class="mb-6">
+            <h2 class="text-xl font-bold mb-4">Punktestand</h2>
+            <div class="space-y-2">
+                {% for participant in participants %}
+                    <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>
+                {% endfor %}
+            </div>
+        </div>
+
+        {% 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">
+                    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">
+                    Nächste Frage
+                </button>
+            {% endif %}
+        {% endif %}
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+{% include 'play/game/common_scripts.html' %}
+<script>
+    const joinCode = '{{ quiz_game.join_code }}';
+    const hostId = '{{ host_id }}';
+    const wsScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
+    const gameSocket = new WebSocket(
+        `${wsScheme}://${window.location.host}/ws/game/${joinCode}/`
+    );
+
+    gameSocket.onmessage = function(e) {
+        const data = JSON.parse(e.data);
+        if (data.type === 'game_state_update' && 
+            data.redirect_url && 
+            (data.action === 'next_question' || data.action === 'finish_game')) {
+            window.location.href = data.redirect_url;
+        } else if (data.type === 'answer_stats') {
+            updateAnswerStats(data.stats);
+        }
+    };
+
+    gameSocket.onclose = function(e) {
+        // Normal closure (code 1000) oder Navigation zu einer anderen Seite (code 1001)
+        if (e.code === 1000 || e.code === 1001) {
+            console.log('Game socket closed normally');
+        } else {
+            console.error('Game socket closed unexpectedly', e.code);
+        }
+    };
+
+    {% if is_host %}
+    // Add click handlers for host buttons
+    {% if is_last_question %}
+    var finishButton = document.getElementById('finish-button');
+    if (finishButton) {
+        finishButton.addEventListener('click', function() {
+            gameSocket.send(JSON.stringify({
+                'type': 'finish_game',
+                'host_id': hostId
+            }));
+        });
+    }
+    {% else %}
+    var nextButton = document.getElementById('next-button');
+    if (nextButton) {
+        nextButton.addEventListener('click', function() {
+            gameSocket.send(JSON.stringify({
+                'type': 'next_question',
+                'host_id': hostId
+            }));
+        });
+    }
+    {% endif %}
+    {% endif %}
+
+    function updateAnswerStats(stats) {
+        for (var optionIndex in stats) {
+            if (stats.hasOwnProperty(optionIndex)) {
+                var element = document.getElementById('option-count-' + optionIndex);
+                if (element) {
+                    element.textContent = stats[optionIndex] + ' Antworten';
+                }
+            }
+        }
+    }
+
+    // Request answer stats when page loads
+    gameSocket.onopen = function(e) {
+        gameSocket.send(JSON.stringify({
+            'type': 'get_answer_stats'
+        }));
+    };
+</script>
+{% endblock %}

django/templates/play/game/wait_for_other_players.html

@@ -1,5 +1,53 @@
-<!--> 
-    Spieler: Countdown, automatische Weiterleitung
+{% extends 'base.html' %}
 
-    (Host: Frage)
-</!-->
+{% block content %}
+<div class="container mx-auto px-4">
+    <div class="bg-white rounded-lg shadow-md p-6 mb-6 text-center">
+        <h1 class="text-3xl font-bold mb-6">Warte auf andere Spieler...</h1>
+        
+        <div class="p-4 bg-blue-50 rounded-lg mb-6 inline-block">
+            <p class="text-blue-600 text-xl mb-2">Die nächste Frage beginnt in</p>
+            <p id="countdown" class="text-6xl font-bold text-blue-700">5</p>
+        </div>
+
+        <div class="animate-pulse">
+            <p class="text-gray-600">Bitte warte, bis alle Spieler bereit sind</p>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+{% include 'play/game/common_scripts.html' %}
+<script>
+    const joinCode = '{{ quiz_game.join_code }}';
+    const wsScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
+    const gameSocket = new WebSocket(
+        wsScheme + '://' + window.location.host + '/ws/game/' + joinCode + '/'
+    );
+
+    let countdown = 5;
+    const countdownElement = document.getElementById('countdown');
+
+    gameSocket.onmessage = function(e) {
+        const data = JSON.parse(e.data);
+        if (data.type === 'game_state_update' && data.action === 'start_question' && data.redirect_url) {
+            window.location.href = data.redirect_url;
+        }
+    };
+
+    gameSocket.onclose = function(e) {
+        wsUtil.handleClose(e);
+    };
+
+    function updateCountdown() {
+        countdownElement.textContent = countdown;
+        if (countdown > 0) {
+            countdown--;
+            setTimeout(updateCountdown, 1000);
+        }
+    }
+
+    updateCountdown();
+</script>
+{% endblock %}

django/templates/play/initialize_participant.html

@@ -1,13 +1,63 @@
 {% extends 'base.html' %}
+{% load static %}
 
 {% block content %}
-<h1>User for a Game:</h1>
-<div class="input-group  border-blue-600 border-2 rounded-xl shadow-md">
-    <form method="post">
+<div class="container mx-auto px-4 py-8">
+    <div class="max-w-md mx-auto bg-white rounded-lg shadow-lg p-6">
+        <h1 class="text-2xl font-bold mb-6 text-center text-blue-600">Spieler einrichten</h1>
+        
+        <div class="text-center mb-6">
+            <div class="inline-block bg-blue-100 rounded-lg px-4 py-2">
+                <span class="text-sm text-blue-800">Spiel-Code:</span>
+                <span class="font-mono font-bold text-blue-900">{{ join_code }}</span>
+            </div>
+        </div>
+
+        <form method="post" class="space-y-4">
             {% csrf_token %}
             <input type="hidden" name="join_code" value="{{join_code}}">
-        <input type="text" name="display_name" placeholder="Anzeigename">
-        <button type="submit">Speichern</button>
+            
+            <div class="bg-gray-50 p-4 rounded-lg mb-4">
+                <p class="text-sm text-gray-600 mb-2">Wähle einen Anzeigenamen für das Spiel:</p>
+                <input type="text" 
+                       name="display_name" 
+                       required
+                       maxlength="20"
+                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                       placeholder="Dein Spielername">
+                <p class="text-xs text-gray-500 mt-2">Maximal 20 Zeichen</p>
+            </div>
+
+            <div class="flex justify-center space-x-4">
+                <a href="/" 
+                   class="px-6 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition-colors duration-200">
+                    Abbrechen
+                </a>
+                <button type="submit"
+                        class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors duration-200">
+                    Spiel beitreten
+                </button>
+            </div>
         </form>
+
+        {% if error %}
+        <div class="mt-4 p-4 bg-red-100 border-l-4 border-red-500 text-red-700">
+            <p class="font-medium">Fehler</p>
+            <p class="text-sm">{{ error }}</p>
+        </div>
+        {% endif %}
+    </div>
 </div>
+
+<style>
+    input:focus {
+        outline: none;
+    }
+    
+    .container {
+        min-height: calc(100vh - 4rem);
+        display: flex;
+        align-items: center;
+    }
+</style>
 {% endblock %}

django/templates/play/lobby.html

@@ -1,23 +1,62 @@
 {% extends 'base.html' %}
 
 {% block content %}
-<div class="container mx-auto px-4">
-    <h3>{{ quiz.name }}</h3>
-    <h1 class="text-center text-4xl font-bold mb-4">{{ quiz_game.join_code }}</h1>
+<div class="container mx-auto px-4 py-8">
+
+    <div class="max-w-2xl mx-auto bg-white rounded-lg shadow-lg p-6">
+        <!-- Quiz Info -->
+        <div class="text-center mb-8">
+            <h3 class="text-xl text-gray-600 mb-2">{{ quiz.name }}</h3>
+            <div class="bg-blue-100 rounded-lg p-4 mb-4">
+                <h1 class="text-4xl font-bold text-blue-800">{{ quiz_game.join_code }}</h1>
+                <p class="text-sm text-blue-600 mt-1">Spiel-Code</p>
+            </div>
+        </div>
+
+        <!-- Participant Info -->
         {% if participant %}
-    <div class="mt-4 mb-4 text-center">
-        <h3>Sichtbar als <b>{{ participant.display_name }}</b></h3>
+        <div class="mb-6 text-center">
+            <div class="inline-flex items-center bg-green-100 px-4 py-2 rounded-full">
+                <span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
+                <span>Angemeldet als <b>{{ participant.display_name }}</b></span>
+            </div>
         </div>
         {% endif %}
-    <div class="mb-4">
-        <h3 class="font-bold mb-2">Teilnehmer:</h3>
-        <ul id="participants-list" class="space-y-2">
-            <li class="text-gray-500">Warte auf Teilnehmer...</li>
+
+        <!-- Participants List -->
+        <div class="mb-6">
+            <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" />
+                </svg>
+                Teilnehmer
+            </h3>
+            <ul id="participants-list" class="space-y-2 max-h-60 overflow-y-auto">
+                <li class="text-gray-500 p-3 bg-gray-50 rounded-lg text-center">Warte auf Teilnehmer...</li>
             </ul>
         </div>
+
+        <!-- Action Buttons -->
+        <div class="space-y-3">
             {% if host_id %}
-    <button id="start-button" class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200" type="button">Starten</button>
+            <button id="start-button" class="w-full p-4 rounded-lg bg-blue-600 text-white font-bold hover:bg-blue-700 transform hover:scale-105 transition duration-200 shadow-md flex items-center justify-center" type="button">
+                <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="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+                Spiel starten
+            </button>
             {% endif %}
+            {% if participant %}
+            <button id="leave-button" class="w-full p-4 rounded-lg bg-red-100 text-red-700 font-bold hover:bg-red-200 transition duration-200 flex items-center justify-center" type="button">
+                <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 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                </svg>
+                Spiel verlassen
+            </button>
+            {% endif %}
+        </div>
+    </div>
 </div>
 {% endblock %}
 
@@ -25,50 +64,309 @@
 <script>
     const joinCode = '{{ quiz_game.join_code }}';
     const wsScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
-    const lobbySocket = new WebSocket(
-        wsScheme + '://' + window.location.host + '/ws/game/' + joinCode + '/'
+    let lobbySocket = null;
+    let reconnectAttempts = 0;
+    let pingInterval = null;
+    const maxReconnectAttempts = 5;
+    const pingDelay = 30000; // 30 seconds
+    const heartbeatDelay = 10000; // 10 seconds
+    let heartbeatInterval = null;
+
+    function startPingInterval() {
+        stopPingInterval();
+        pingInterval = setInterval(() => {
+            if (lobbySocket && lobbySocket.readyState === WebSocket.OPEN) {
+                lobbySocket.send(JSON.stringify({ type: 'ping' }));
+            }
+        }, pingDelay);
+    }
+
+    function stopPingInterval() {
+        if (pingInterval) {
+            clearInterval(pingInterval);
+            pingInterval = null;
+        }
+    }
+
+    function startHeartbeat() {
+        stopHeartbeat();
+        heartbeatInterval = setInterval(() => {
+            if (lobbySocket && lobbySocket.readyState === WebSocket.OPEN) {
+                lobbySocket.send(JSON.stringify({
+                    type: 'heartbeat',
+                    participant_id: '{{ participant.participant_id }}'
+                }));
+            }
+        }, heartbeatDelay);
+    }
+
+    function stopHeartbeat() {
+        if (heartbeatInterval) {
+            clearInterval(heartbeatInterval);
+            heartbeatInterval = null;
+        }
+    }
+
+    function connectWebSocket() {
+        if (lobbySocket && (lobbySocket.readyState === WebSocket.CONNECTING || lobbySocket.readyState === WebSocket.OPEN)) {
+            return lobbySocket; // Already connected or connecting
+        }
+
+        if (reconnectAttempts >= maxReconnectAttempts) {
+            console.error('Max reconnection attempts reached');
+            return null;
+        }
+
+
+        try {
+            lobbySocket = new WebSocket(
+                wsScheme + '://' + window.location.host + '/ws/play/lobby/' + joinCode + '/'
             );
 
-    lobbySocket.onmessage = function(e) {
-        const data = JSON.parse(e.data);
-        if (data.type === 'participant_list' || data.type === 'participant_list_update') {
-            updateParticipantsList(data.participants);
-        }
+            lobbySocket.onopen = function(e) {
+                console.log('Lobby socket connected');
+                reconnectAttempts = 0;
+                startPingInterval();
+                {% if participant %}
+                startHeartbeat();
+                {% endif %}
+                // Request initial participants list
+                lobbySocket.send(JSON.stringify({
+                    type: 'update_participants'
+                }));
             };
 
             lobbySocket.onclose = function(e) {
-        console.error('Lobby socket closed unexpectedly');
+                wsUtil.handleClose(e);
+                stopPingInterval();
+                stopHeartbeat();
+                lobbySocket = null;
+                reconnectAttempts++;
+                if (reconnectAttempts < maxReconnectAttempts) {
+                    const delay = Math.min(1000 * Math.pow(2, reconnectAttempts), 10000); // Exponential backoff, max 10s
+                    setTimeout(connectWebSocket, delay);
+                }
             };
 
-    {% if participant %}
-    // Send heartbeat every 10 seconds
-    setInterval(() => {
-        if (lobbySocket.readyState === WebSocket.OPEN) {
+            lobbySocket.onerror = function(e) {
+                console.error('Lobby socket error:', e);
+            };
+
+            lobbySocket.onmessage = function(e) {
+                const data = JSON.parse(e.data);
+                if (data.type === 'participants_list_update') {
+                    updateParticipantsList(data.participants);
+                } else if (data.type === 'game_state_update' && 
+                          data.action === 'start_game' && 
+                          data.redirect_url) {
+                    window.location.href = data.redirect_url;
+                } else if (data.type === 'pong') {
+                    console.log('Received pong from server');
+                } else if (data.type === 'redirect' && data.url) {
+                    window.location.href = data.url;
+                } else if (data.type === 'player_joined' && '{{ host_id }}') {
+                    toast.create(`${data.player_name} ist beigetreten`, 'success');
+                } else if (data.type === 'player_left') {
+                    if (data.was_kicked) {
+                        // Show kick message
+                        toast.create(`${data.player_name} wurde vom Host entfernt`, 'error');
+                        
+                        // If this client was kicked, redirect to home
+                        if (data.participant_id === '{{ participant.participant_id }}') {
+                            window.location.href = '/';
+                        }
+                    } else {
+                        toast.create(`${data.player_name} hat das Spiel verlassen`, 'info');
+                    }
+                }
+            };
+
+            return lobbySocket;
+        } catch (error) {
+            console.error('Error creating WebSocket:', error);
+            return null;
+        }
+    }
+
+
+
+    // Initial connection
+    lobbySocket = connectWebSocket();
+
+    function leaveGame() {
+        if (confirm('Möchtest du das Spiel wirklich verlassen?')) {
             lobbySocket.send(JSON.stringify({
-                'type': 'heartbeat',
-                'participant_id': '{{ participant.participant_id }}'
+                type: 'leave_game',
+                participant_id: '{{ participant.participant_id }}'
             }));
         }
-    }, 10000);
-    {% endif %}
+    }
+
+    function kickPlayer(participantId) {
+        const button = event.currentTarget;
+        if (!button.disabled && confirm('Möchtest du diesen Spieler wirklich aus dem Spiel entfernen?')) {
+            console.log('Attempting to kick player:', participantId);
+            console.log('Host ID:', '{{ quiz_game.host_id }}');
+            console.log('Current host cookie:', document.cookie.split('; ').find(row => row.startsWith('host_id=')));
+            
+            button.disabled = true;
+            button.classList.add('opacity-50');
+            button.innerHTML = '<svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">' +
+                             '<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>' +
+                             '<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>' +
+                             '</svg>';
+            
+            if (lobbySocket && lobbySocket.readyState === WebSocket.OPEN) {
+                const message = {
+                    type: 'kick_player',
+                    participant_id: participantId,
+                    host_id: '{{ quiz_game.host_id }}'
+                };
+                console.log('Sending kick message:', message);
+                lobbySocket.send(JSON.stringify(message));
+            } else {
+                console.error('WebSocket is not connected');
+                button.disabled = false;
+                button.classList.remove('opacity-50');
+                alert('Verbindungsfehler. Bitte versuche es erneut.');
+            }
+        }
+    }
 
     function updateParticipantsList(participants) {
         const list = document.getElementById('participants-list');
-        if (participants.length === 0) {
-            list.innerHTML = '<li class="text-gray-500">Noch keine Teilnehmer...</li>';
+        if (!list) {
+            console.warn('Participants list element not found');
             return;
         }
 
-        list.innerHTML = participants
-            .map(p => `<li class="p-2 bg-gray-100 rounded">${p.name}</li>`)
-            .join('');
+        if (!participants || participants.length === 0) {
+            list.innerHTML = '<li class="text-gray-500 p-3 bg-gray-50 rounded-lg text-center">Noch keine Teilnehmer...</li>';
+            return;
         }
 
-    // Request initial participants list
-    lobbySocket.onopen = function(e) {
+        try {
+            // Finde neue und entfernte Teilnehmer
+            const currentParticipants = Array.from(list.children)
+                .map(li => li.textContent)
+                .filter(name => name !== 'Noch keine Teilnehmer...' && name !== 'Fehler beim Aktualisieren der Liste');
+            
+            const newParticipants = participants
+                .filter(p => !currentParticipants.includes(p.display_name))
+                .map(p => p.display_name);
+            
+            const removedParticipants = currentParticipants
+                .filter(name => !participants.find(p => p.display_name === name));
+
+            // Aktualisiere die Liste mit animierten Einträgen
+            list.innerHTML = participants
+                .filter(p => p && p.display_name) // Filter out invalid participants
+                .map(function(p) {
+                    if (!p || !p.display_name) {
+                        console.error('Invalid participant data:', p);
+                        return '';
+                    }
+                    const displayName = p.display_name;
+                    const initial = displayName.charAt(0) || '?';
+                    const participantId = p.participant_id;
+                    
+                    // Check if this entry is for the host
+                    const isHost = participantId === '{{ quiz_game.host_id }}';
+                    const isCurrentUserHost = document.cookie.includes('host_id={{ quiz_game.host_id }}');
+                    console.log('Participant check:', {
+                        participantId,
+                        displayName,
+                        isHost,
+                        isCurrentUserHost,
+                        gameHostId: '{{ quiz_game.host_id }}'
+                    });
+                    
+                    // Show kick button if current user is host and this is not their own entry
+                    let kickButton = '';
+                    if (isCurrentUserHost && !isHost && participantId) {
+                        kickButton = '<button onclick="kickPlayer(\'' + p.participant_id + '\')" ' +
+                                    'class="p-1.5 rounded-full text-red-600 hover:text-white hover:bg-red-600 ' +
+                                    'transition-all duration-200 group relative" title="Spieler kicken">' +
+                                    '<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">' +
+                                    '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" ' +
+                                    'd="M6 18L18 6M6 6l12 12"/>' +
+                                    '</svg>' +
+                                    '<span class="absolute -top-8 left-1/2 transform -translate-x-1/2 px-2 py-1 ' +
+                                    'bg-gray-800 text-white text-xs rounded opacity-0 group-hover:opacity-100 ' +
+                                    'transition-opacity duration-200 whitespace-nowrap">Spieler kicken</span>' +
+                                    '</button>';
+                    }
+
+                    return '<li class="p-3 bg-white border border-gray-200 rounded-lg shadow-sm hover:shadow-md transition duration-200 flex items-center justify-between animate-fade-in">' +
+                           '<div class="flex items-center">' +
+                           '<div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center mr-3">' +
+                           '<span class="text-blue-600 font-bold">' + initial.toUpperCase() + '</span>' +
+                           '</div>' +
+                           '<span class="font-medium">' + displayName + '</span>' +
+                           '</div>' +
+                           '<div class="flex items-center space-x-2">' +
+                           (isHost ? '<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Host</span>' : '') +
+                           '<span class="w-2 h-2 bg-green-500 rounded-full ml-2"></span>' +
+                           kickButton +
+                           '</div>' +
+                           '</li>';
+                })
+                .join('');
+
+            // Benachrichtigungen werden über WebSocket-Events gehandelt
+        } catch (error) {
+            console.error('Error updating participants list:', error);
+            list.innerHTML = '<li class="text-red-500">Fehler beim Aktualisieren der Liste</li>';
+        }
+    }
+
+    {% if host_id %}
+    const startButton = document.getElementById('start-button');
+    if (startButton) {
+        startButton.addEventListener('click', function() {
+            if (lobbySocket && lobbySocket.readyState === WebSocket.OPEN) {
+                startButton.disabled = true;
+                startButton.classList.add('opacity-50');
+                startButton.innerHTML = 
+                    '<svg class="animate-spin h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">' +
+                    '<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>' +
+                    '<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>' +
+                    '</svg>' +
+                    'Spiel wird gestartet...';
                 lobbySocket.send(JSON.stringify({
-            'type': 'update_participants'
+                    type: 'start_game',
+                    host_id: '{{ host_id }}'
                 }));
-    };
+            }
+        });
+    }
+    {% endif %}
+
+    {% if participant %}
+    const leaveButton = document.getElementById('leave-button');
+    if (leaveButton) {
+        leaveButton.addEventListener('click', function() {
+            if (lobbySocket && lobbySocket.readyState === WebSocket.OPEN) {
+                leaveButton.disabled = true;
+                leaveButton.classList.add('opacity-50');
+                leaveButton.innerHTML = 
+                    '<svg class="animate-spin h-5 w-5 mr-2" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">' +
+                    '<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>' +
+                    '<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>' +
+                    '</svg>' +
+                    'Verlasse Spiel...';
+                lobbySocket.send(JSON.stringify({
+                    type: 'leave_game',
+                    participant_id: '{{ participant.participant_id }}'
+                }));
+                
+                // Warte kurz und leite dann zur Startseite weiter
+                setTimeout(() => {
+                    window.location.href = '/';
+                }, 500);
+            }
+        });
+    }
+    {% endif %}
 </script>
 {% endblock %}