Merge branch 'master' into 103-verschiedene-lernmodi

django/play/urls.py

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

django/play/views.py

@@ -38,6 +38,11 @@ def lobby(request, join_code):
     context['participant'] = participant
     return render(request, 'play/lobby.html', context=context)
 
+def select_mode(request,join_code):
+    return render(request, 'play/select_mode.html', {'join_code': join_code})
+
+
+
 def create_participant(request, join_code):
     quiz_game = get_object_or_404(QuizGame, join_code=join_code)
 
@@ -92,7 +97,7 @@ def create_game(request, quiz_id):
         participant.score = 0  # Initialize score
         participant.save()
 
-        response = HttpResponseRedirect(reverse('play:lobby', kwargs={'join_code': game.join_code}))
+        response = HttpResponseRedirect(reverse('play:select_mode', kwargs={'join_code': game.join_code}))
         response.set_cookie('host_id', game.host_id, max_age=3600)
         
         return response

django/templates/play/select_mode.html

@@ -0,0 +1,53 @@
+{% extends 'base.html' %}
+
+{% block content %}
+
+<div class="grid place-content-center md:h-screen h-150 w-full -z-50 top-0 p-8 ">
+    <div class="rounded-md rounded-xl shadow-lg border-3 border-blue-100 p-10">
+       <span class="flex justify-center font-bold p-4 text-center text-1xl lg:text-2xl">Bitte wählen Sie einen Spielmodus aus:</span> 
+
+        <div class="grid sm:grid-cols-3 place-items-stretch text-center gap-4 p-4">
+            
+            <!-- Moderieren -->
+            <a class="qp-a-button bg-green-500 text-white flex justify-center items-center relative group h-20 gap-2" href="{% url 'play:lobby' join_code %}">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z" />
+                  </svg>
+                  
+                Moderiermodus
+                <!-- Tooltip -->
+                <span class="absolute w-full h-1/2 top-1/4 left-0 hidden group-hover:flex items-center justify-center text-white bg-black bg-opacity-90 text-xs rounded px-2 z-10 pointer-events-none">
+                    Klassischer Spielmodus zum Moderieren
+                </span>
+            </a>
+
+            <!-- Lernmodus -->
+            <a class="qp-a-button bg-indigo-500 text-white flex justify-center items-center relative group h-20 gap-2" href="#">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+                  </svg>
+                  
+              Lernmodus
+                <!-- Tooltip -->
+                <span class="absolute w-full h-1/2 top-1/4 left-0 hidden group-hover:flex items-center justify-center text-white bg-black bg-opacity-90 text-xs rounded px-2 z-10 pointer-events-none">
+                    Modus zum selbständigen Üben und Lernen
+                </span>
+            </a>
+
+            <!-- Testmodus -->
+            <a class="qp-a-button bg-purple-500 text-white flex justify-center items-center relative group h-20 gap-2" href="#">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="size-6">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12" />
+                  </svg>
+                  
+                 Testmodus
+                <!-- Tooltip -->
+                <span class="absolute w-full h-1/2 top-1/4 left-0 hidden group-hover:flex items-center justify-center text-white bg-black bg-opacity-90 text-xs rounded px-2 z-10 pointer-events-none">
+                    Ideal für die Schule (mit Feedback für Lehrkraft)
+                </span>
+            </a>
+        </div>
+    </div>
+</div>
+
+{% endblock %}