Merge branch '48-quiz-fragen-templates-erstellen' into 'master'

Resolve "Quiz Fragen Templates erstellen"

Closes #48

See merge request enrichment-2024/qivip!15

django/library/admin.py

@@ -9,7 +9,7 @@ class QivipQuizAdmin(admin.ModelAdmin):
 
 # Für das QivipQuestion Modell
 class QivipQuestionAdmin(admin.ModelAdmin):
-    list_display = ('quiz_id', 'data', 'creation_date', 'update_date')
+    list_display = ('id', 'quiz_id', 'data', 'creation_date', 'update_date')
     search_fields = ('data',)
     list_filter = ('quiz_id',)
 

django/play/urls.py

@@ -4,7 +4,9 @@ from . import views
 app_name = 'play'
 
 urlpatterns = [
-    path('lobby/<str:join_code>', views.lobby, name='lobby'),
+    path('game/<str:join_code>', views.lobby, name='lobby'),
-    path('lobby/<str:join_code>/participate', views.create_participant, name='create_participant'),
+    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'),
 ]

django/play/views.py

@@ -1,9 +1,11 @@
 from django.shortcuts import render
 from django.shortcuts import render, redirect, get_object_or_404, reverse
 from play.models import QuizGame, QuizGameParticipant
-from library.models import QivipQuiz
+from library.models import QivipQuiz, QivipQuestion
 from django.http import HttpResponseRedirect
 
+import json
+
 # Create your views here.
 def lobby(request, join_code):
     if not "participant_id" in request.COOKIES:
@@ -58,3 +60,27 @@ def join_game(request):
             # 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)
+
+    context = {
+        'question': question,
+    }
+
+    return render(request, 'play/game/question_host.html', {'question': question, 'debug': "debug"})
+
+def question_participant(request, join_code, question_id):
+    question = get_object_or_404(QivipQuestion, pk=question_id)
+
+    if question.data:
+            question.data = json.loads(question.data)
+
+    context = {
+        'question': question,
+    }
+
+    return render(request, 'play/game/question_participant.html', {'question': question, 'debug': "debug"})

django/static/css/t-input.css

@@ -51,3 +51,60 @@ a.qp-a-button-small {
     @apply p-3 rounded-full bg-indigo-500 hover:bg-indigo-600 text-white focus:scale-105 
     transition duration-200 font-black shadow-md hover:shadow-lg;
 }
+
+
+
+
+
+
+
+
+
+
+
+div.qp-answer-container {
+    @apply grid grid-cols-2 h-screen;
+}
+
+div.qp-answer-container div {
+    @apply grid place-content-center rounded-xl m-2 place-self-stretch text-white transition duration-300;
+    @apply nth-1:bg-green-500 hover:nth-1:bg-green-600;
+    @apply nth-2:bg-red-500 hover:nth-2:bg-red-600;
+    @apply nth-3:bg-blue-500 hover:nth-3:bg-blue-600;
+    @apply nth-4:bg-yellow-500 hover:nth-4:bg-yellow-600;
+    @apply nth-5:bg-purple-500 hover:nth-5:bg-purple-600;
+    @apply nth-6:bg-black hover:nth-6:bg-slate-800;
+}
+
+div.qp-answer-container div p {
+    @apply font-black text-xl sm:text-2xl md:text-4xl;
+}
+
+
+
+
+div.qp-answer-container-host {
+    @apply grid grid-cols-2 absolute bottom-0 w-screen xl:px-20 xl:pb-10;
+}
+
+div.qp-answer-container-host div {
+    @apply grid place-content-center rounded-xl m-1 place-self-stretch text-white transition duration-300;
+    @apply nth-1:bg-green-500 hover:nth-1:bg-green-600;
+    @apply nth-2:bg-red-500 hover:nth-2:bg-red-600;
+    @apply nth-3:bg-blue-500 hover:nth-3:bg-blue-600;
+    @apply nth-4:bg-yellow-500 hover:nth-4:bg-yellow-600;
+    @apply nth-5:bg-purple-500 hover:nth-5:bg-purple-600;
+    @apply nth-6:bg-black hover:nth-6:bg-slate-800;
+}
+
+div.qp-answer-container-host div p {
+    @apply font-black text-xl p-4;
+}
+
+div.qp-question-container {
+    @apply text-center text-3xl px-4 py-9 h-screen;
+}
+
+div.qp-question-container img {
+    @apply max-w-[50vw] max-h-[40vh] mx-auto;
+}

django/templates/play/game/question_host.html

@@ -0,0 +1,35 @@
+{% 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>
+                </div>
+                <div class="p-4">
+                    <p class="text-blue-500 text-xl">7/14 Antworten</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>
+            {% endfor %}
+        </div>
+    </div>
+</body>
+</html>

django/templates/play/game/question_participant.html

@@ -0,0 +1,19 @@
+{% 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>
+                </div>
+        {% endfor %}
+    </div>
+</body>
+</html>