Compare commits

..

36 Commits

Author SHA1 Message Date
9b13749a29 Change Allowed Hosts 2025-03-15 13:40:45 +01:00
Juhn-Vitus Saß
b6831616cc Channel Layers 2025-03-15 12:57:05 +01:00
889134784a Basestructure Chat App 2025-03-15 12:35:32 +01:00
ab6e27f80e Add chat App 2025-03-15 12:15:45 +01:00
35617470c4 Merge branch '21-teilnehmer-seite-vorberiten-mit-eingabefeld-fur-websockets' into 'master'
Resolve "Host und Spiel App erstellen und Grundlegende Templates erstellen"

Closes #21

See merge request enrichment-2024/qivip!6
2025-03-15 10:57:49 +00:00
Juhn-Vitus Saß
b6991c2cbd Update REQUIREMENTS 2025-03-15 11:31:25 +01:00
ben8
a0e31d77f2 Merge branch 'master' of edugit.org:enrichment-2024/qivip 2025-03-15 11:19:15 +01:00
ben8
434d1f63e3 Struktur 2025-03-15 11:19:12 +01:00
nik8
e3bd3c8579 Update Design 2025-03-15 11:00:29 +01:00
nik8
7e66868a7d Löschenformular_blaue_Border 2025-03-14 18:32:29 +01:00
nik8
b306321565 Design_form_fürs_Bearbeiten 2025-03-14 18:25:35 +01:00
nik8
3a099945b5 #fix_28 2025-03-14 18:18:19 +01:00
nik8
9f6c1cc33c #fix_29_Links 2025-03-14 17:31:56 +01:00
juhnsa
13cbaaa6dc Templates hinzufuegen; Spiel beitreten seite stylen 2025-03-12 20:16:00 +01:00
juhnsa
46634b1e1c Initiale Play App erstellen und integrieren 2025-03-12 19:16:08 +01:00
Juhn-Vitus Saß
3508b8e341 Merge branch '5-formular-fur-quizfragen-erstellen-uberarbeiten' into 'master'
Resolve "Formular für Quizfragen erstellen / überarbeiten"

Closes #5

See merge request enrichment-2024/qivip!5
2025-03-12 18:08:48 +00:00
juhnsa
039e3ea0cb Vergrößere Textfelder in Quiz-Fragen-Formularen
- Ändere Eingabefelder zu Textareas für bessere Benutzerfreundlichkeit
- Fragen-Textfeld auf 4 Zeilen vergrößert
- Antwort-Optionen auf 2 Zeilen vergrößert
- Behebe Probleme mit der Anzeige bestehender Fragen
2025-03-12 19:08:08 +01:00
90d7a3ea94 Changed 'static/homepage/t-style.css' to 'static/css/t-style.css' 2025-03-08 19:37:00 +01:00
c348734ff4 Merge branch '26-fix_fragen_erstellen-bearbeiten' into 'master'
Resolve "Fix_Fragen_Erstellen/Bearbeiten"

Closes #26

See merge request enrichment-2024/qivip!4
2025-03-08 17:30:32 +00:00
35da688b1e Fix Create Questins 2025-03-08 18:30:14 +01:00
Juhn-Vitus Saß
089abfc598 Update README 2025-03-08 18:20:21 +01:00
f732d8305e Merge branch '19-project_template_ordner' into 'master'
Resolve "Project_Ordner"

Closes #19

See merge request enrichment-2024/qivip!3
2025-03-08 15:23:30 +00:00
ben8
7a4caf7191 margin verändert quiz library 2025-03-08 16:21:51 +01:00
213b4cfd77 New structure 2025-03-08 16:21:40 +01:00
ben8
1f55ad8247 margin bei quiz library 2025-03-08 16:19:49 +01:00
ben8
53ffe3822a Merge branch 'master' of edugit.org:enrichment-2024/qivip 2025-03-08 16:18:16 +01:00
ben8
71d8deab5b Rahmen bei Quiz library 2025-03-08 16:18:14 +01:00
Frank Poetzsch-Heffter
2173d7f928 Readme ergänzt durch Issue - Merge Request- Merge 2025-03-08 14:56:33 +00:00
ben8
eddab4a298 text color white 2025-03-08 15:56:02 +01:00
Frank Poetzsch-Heffter
2ea2c03c67 t-style.css entferent
Merge branch 'fix_20_t-style_entfernen'
2025-03-08 15:41:13 +01:00
Frank Poetzsch-Heffter
0775710102 t-style.css entfernt 2025-03-08 15:36:42 +01:00
Juhn-Vitus Saß
ba77d72091 Merge branch 'master' of edugit.org:enrichment-2024/qivip 2025-03-08 15:36:41 +01:00
Juhn-Vitus Saß
b09eb2c7d6 Fix #5 2025-03-08 15:34:39 +01:00
ben8
47beb3a8e7 Merge branch 'master' of edugit.org:enrichment-2024/qivip 2025-03-08 15:33:28 +01:00
ben8
0eaac8c2f0 Merge branch 'master' of edugit.org:enrichment-2024/qivip 2025-03-08 15:28:15 +01:00
ben8
adb208a56a Register gefixt 2025-03-08 15:01:48 +01:00
56 changed files with 959 additions and 1192 deletions

1
.gitignore vendored
View File

@@ -3,3 +3,4 @@ __pycache__
db.sqlite3 db.sqlite3
tailwindcss.exe tailwindcss.exe
t-style.css t-style.css
dump.rdb

View File

@@ -6,6 +6,7 @@
2. [Starten des Servers](#starten-des-servers) 2. [Starten des Servers](#starten-des-servers)
3. [Superuser erstellen](#superuser-erstellen) 3. [Superuser erstellen](#superuser-erstellen)
4. [Tailwind-Nutzung](#tailwind-nutzung) 4. [Tailwind-Nutzung](#tailwind-nutzung)
5. [Issue - Merge Request - Merge](#issue-mergerequest-merge)
## Initialisierung des Projekts ## Initialisierung des Projekts
@@ -83,7 +84,11 @@ npm install tailwindcss @tailwindcss/cli
### Datei generieren ### Datei generieren
```sh ```sh
# Bei Verwendung der Binärdatei:
tailwindcss -i <INPUT-DATEI> -o <OUTPUT-DATEI> --watch --minify tailwindcss -i <INPUT-DATEI> -o <OUTPUT-DATEI> --watch --minify
# Bei Verwendung von NPM:
npx @tailwindcss/cli -i <INPUT-DATEI> -o <OUTPUT-DATEI> --watch --minify
``` ```
- INPUT-DATEI: CSS Datei, welche die Einbindung und Konfiguration von Tailwind enthält - INPUT-DATEI: CSS Datei, welche die Einbindung und Konfiguration von Tailwind enthält
@@ -94,5 +99,19 @@ tailwindcss -i <INPUT-DATEI> -o <OUTPUT-DATEI> --watch --minify
**Beispiel:** **Beispiel:**
```sh ```sh
tailwindcss -i core/homepage/static/homepage/t-input.css -o core/homepage/static/homepage/t-style.css --watch --minify # unter Linux mit Tailwind Binärdatei:
tailwindcss -i core/static/homepage/t-input.css -o core/static/homepage/t-style.css --watch --minify
# unter Windows mit NPM:
npx @tailwindcss/cli -i .\core\static\homepage\t-input.css -o .\core\static\homepage\t-style.css --watch --minify
``` ```
## Issue - Merge Request - Merge
Hier der vereinbarte Arbeitsablauf:
1. Issue erstellen - das geht am einfachsten über die Webseite. Der Titel beschreibt kurz und klar, was angestrebt wird.
2. Merge Request anlegen - dadurch wird der Bransch automatisch angelegt. Dieser kann mit `git pull` geholt und mit `git checkout <branch>` bearbeitet werden.
3. Nach dem Hochladen kann der Merge in den Master durchgeführt werden.

View File

@@ -1,16 +0,0 @@
{% load static %}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="{% static 'homepage/t-style.css' %}">
</head>
<body>
{% include 'homepage/partials/_nav.html' %}
{% block content %}
{% endblock %}
{% include 'homepage/partials/_footer.html' %}
</body>
</html>

View File

@@ -1,12 +0,0 @@
<nav class="flex justify-between bg-blue-600 h-12 px-4 sm:px-6 lg:px-8 rounded-lg m-2 shadow-md">
<div class="flex items-center">
<h2 class="text-xl font-bold text-white hover:scale-110 transition duration-200"><a href="#">qivip</a></h2>
</div>
<div class="flex items-center">
<ul class="flex space-x-4 qp-nav-list">
<li><a href="#">Start</a></li>
<li><a href="#">Bibliothek</a></li>
<li><a href="{% url 'login' %}">Konto</a></li> <!--Hier ist der Link erstmal auf das alte Login-Formular gesetzt! Zum Testen!-->
</ul>
</div>
</nav>

0
core/chat/__init__.py Normal file
View File

40
core/chat/consumers.py Normal file
View File

@@ -0,0 +1,40 @@
import json
from asgiref.sync import async_to_sync
from channels.generic.websocket import WebsocketConsumer
class ChatConsumer(WebsocketConsumer):
def connect(self):
self.room_name = self.scope["url_route"]["kwargs"]["room_name"]
self.room_group_name = f"chat_{self.room_name}"
# Join room group
async_to_sync(self.channel_layer.group_add)(
self.room_group_name, self.channel_name
)
self.accept()
def disconnect(self, close_code):
# Leave room group
async_to_sync(self.channel_layer.group_discard)(
self.room_group_name, self.channel_name
)
# Receive message from WebSocket
def receive(self, text_data):
text_data_json = json.loads(text_data)
message = text_data_json["message"]
# Send message to room group
async_to_sync(self.channel_layer.group_send)(
self.room_group_name, {"type": "chat.message", "message": message}
)
# Receive message from room group
def chat_message(self, event):
message = event["message"]
# Send message to WebSocket
self.send(text_data=json.dumps({"message": message}))

View File

8
core/chat/routing.py Normal file
View File

@@ -0,0 +1,8 @@
# chat/routing.py
from django.urls import re_path
from . import consumers
websocket_urlpatterns = [
re_path(r"ws/chat/(?P<room_name>\w+)/$", consumers.ChatConsumer.as_asgi()),
]

9
core/chat/urls.py Normal file
View File

@@ -0,0 +1,9 @@
# chat/urls.py
from django.urls import path
from . import views
urlpatterns = [
path("", views.index, name="index"),
path("<str:room_name>/", views.room, name="room"),
]

8
core/chat/views.py Normal file
View File

@@ -0,0 +1,8 @@
# chat/views.py
from django.shortcuts import render
def index(request):
return render(request, "chat/index.html")
def room(request, room_name):
return render(request, "chat/room.html", {"room_name": room_name})

View File

@@ -9,8 +9,26 @@ https://docs.djangoproject.com/en/5.1/howto/deployment/asgi/
import os import os
from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
from channels.security.websocket import AllowedHostsOriginValidator
from django.core.asgi import get_asgi_application from django.core.asgi import get_asgi_application
from django.core.asgi import get_asgi_application
from channels.routing import ProtocolTypeRouter
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings') os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings')
application = get_asgi_application() #application = get_asgi_application()
django_asgi_app = get_asgi_application()
from chat.routing import websocket_urlpatterns
application = ProtocolTypeRouter(
{
"http": django_asgi_app,
"websocket": AllowedHostsOriginValidator(
AuthMiddlewareStack(URLRouter(websocket_urlpatterns))
),
}
)

View File

@@ -25,16 +25,19 @@ SECRET_KEY = 'django-insecure-#+s307$rxkts=8@+_^i)8)n1b4*y4za1xz!mvv(h@!+n9!mp9)
# SECURITY WARNING: don't run with debug turned on in production! # SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True DEBUG = True
ALLOWED_HOSTS = ['127.0.0.1', 'localhost', '*'] ALLOWED_HOSTS = ['127.0.0.1', 'localhost', '*', '172.22.10.111']
# Application definition # Application definition
INSTALLED_APPS = [ INSTALLED_APPS = [
'daphne',
'chat',
'library.apps.LibraryConfig', 'library.apps.LibraryConfig',
'homepage.apps.HomepageConfig', 'homepage.apps.HomepageConfig',
'components.apps.ComponentsConfig', 'components.apps.ComponentsConfig',
'accounts.apps.AccountsConfig', 'accounts.apps.AccountsConfig',
'play.apps.PlayConfig',
'django.contrib.admin', 'django.contrib.admin',
'django.contrib.auth', 'django.contrib.auth',
'django.contrib.contenttypes', 'django.contrib.contenttypes',
@@ -58,7 +61,7 @@ ROOT_URLCONF = 'core.urls'
TEMPLATES = [ TEMPLATES = [
{ {
'BACKEND': 'django.template.backends.django.DjangoTemplates', 'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [], 'DIRS': [BASE_DIR / 'templates'],
'APP_DIRS': True, 'APP_DIRS': True,
'OPTIONS': { 'OPTIONS': {
'context_processors': [ 'context_processors': [
@@ -120,7 +123,7 @@ USE_TZ = True
# https://docs.djangoproject.com/en/5.1/howto/static-files/ # https://docs.djangoproject.com/en/5.1/howto/static-files/
STATIC_URL = '/static/' STATIC_URL = '/static/'
BASE_DIR='static' #von ben8 hinzugefügt STATICFILES_DIRS = [BASE_DIR / 'static']
# Default primary key field type # Default primary key field type
# https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field # https://docs.djangoproject.com/en/5.1/ref/settings/#default-auto-field
@@ -128,3 +131,17 @@ BASE_DIR='static' #von ben8 hinzugefügt
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField' DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
LOGIN_URL = '/account/login/' LOGIN_URL = '/account/login/'
# Daphne
ASGI_APPLICATION = "core.asgi.application"
# Channels
ASGI_APPLICATION = "core.asgi.application"
CHANNEL_LAYERS = {
"default": {
"BACKEND": "channels_redis.core.RedisChannelLayer",
"CONFIG": {
"hosts": [("127.0.0.1", 8000)],
},
},
}

View File

@@ -21,6 +21,7 @@ urlpatterns = [
path('admin/', admin.site.urls), path('admin/', admin.site.urls),
path('account/', include('accounts.urls')), path('account/', include('accounts.urls')),
path('', include('homepage.urls')), path('', include('homepage.urls')),
path('play/', include('components.urls')), path('play/', include('play.urls')),
path('library/', include('library.urls')), path('library/', include('library.urls')),
path('chat/', include('chat.urls')),
] ]

File diff suppressed because it is too large Load Diff

View File

@@ -1,34 +0,0 @@
{% load static %}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressum</title>
<link rel="icon" type="image/png" href="{% static 'icons/favicon.png' %}">
<link rel="stylesheet" href="{% static 'homepage/t-style.css' %}">
</head>
<body>
{% include 'homepage/partials/_nav.html' %}
<div class="max-w-screen-lg mx-auto">
{% block content%}{% endblock %}
</div>
<div>
<div>
<h1>Impressum</h1>
</div>
<div>
<dvi>
<p>
Katharineum zu Lübeck
</p>
<p>
Königsstraße 27-31
</p>
<p>
23552 Lübeck
</p>
</div>
{% include 'homepage/partials/_footer.html' %}
</body>
</html>

View File

@@ -1,23 +0,0 @@
{% load static %}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressum</title>
<link rel="icon" type="image/png" href="{% static 'icons/favicon.png' %}">
<link rel="stylesheet" href="{% static 'homepage/t-style.css' %}">
</head>
<body>
{% include 'homepage/partials/_nav.html' %}
<div class="max-w-screen-lg mx-auto">
{% block content%}{% endblock %}
<div>
<p>
Hallo, ich bin die Datenschutzerklärung!
</p>
</div>
</div>
{% include 'homepage/partials/_footer.html' %}
</body>
</html>

View File

@@ -1,17 +0,0 @@
{% 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 'homepage/t-style.css' %}">
<title>qivip</title>
</head>
<body>
{% include 'homepage/partials/_nav.html' %}
<div class="max-w-screen-lg mx-auto">
{% block content%}{% endblock %}
</div>
{% include 'homepage/partials/_footer.html' %}
</body>
</html>

View File

@@ -1,11 +0,0 @@
{% extends 'library/base.html' %}
{% block content %}
<h1>Löschen</h1>
<p>Soll das Quiz "{{ object.name }}" wirklich gelöscht werden?</p>
<form method="post">
{% csrf_token %}
<button type="submit">Löschen</button>
<a href="{% url 'library:overview_quiz' %}">Abbrechen</a>
</form>
{% endblock %}

View File

@@ -1,19 +0,0 @@
{% extends 'library/base.html' %}
{% block content %}
<h1>{{ quiz.name }}</h1>
<p>{{ quiz.description }}</p>
<a href="{% url 'library:edit_quiz' quiz.id %}">Bearbeiten</a>
<a href="{% url 'library:delete_quiz' quiz.id %}">Löschen</a>
<h2>Fragen</h2>
<ul>
<a href="{% url 'library:new_question' %}">Neue Frage erstellen</a>
{% for question in questions %}
<li>{{ question.data }}</li>
<a href="{% url 'library:edit_question' question.id %}">Bearbeiten</a>
<a href="{% url 'library:delete_question' question.id %}">Löschen</a>
{% endfor %}
</ul>
{% endblock %}

View File

@@ -1,19 +0,0 @@
{% extends 'library/base.html' %}
{% block content %}
<h1>Übersicht</h1>
<div class="flex justify-end">
<a href="{% url 'library:new_quiz' %}" class="bg-blue-500 text-white px-4 py-2 rounded-md">Neues Quiz erstellen</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{% for quiz in quizzes %}
<div class="bg-white rounded-lg p-4 shadow-md">
<h2 class="text-lg font-bold"><a href="{% url 'library:detail_quiz' quiz.id %}">{{ quiz.name }}</a></h2>
<p class="text-sm text-gray-600 my-8">{{ quiz.description }}</p>
<a href="#"class="qp-a-button-small bg-green-500">Spiel starten</a>
<button><a href="{% url 'library:edit_quiz' quiz.id %}"class="qp-a-button-small bg-indigo-500">Bearbeiten</a></button>
<a href="{% url 'library:delete_quiz' quiz.id %}" class="qp-a-button-small bg-purple-500">Löschen</a>
</div>
{% endfor %}
</div>
{% endblock %}

View File

@@ -1,8 +1,11 @@
from django.shortcuts import render, redirect, get_object_or_404 from django.shortcuts import render, redirect, get_object_or_404
from django.contrib.auth.decorators import login_required from django.contrib.auth.decorators import login_required
from django.contrib.auth.models import User from django.contrib.auth.models import User
from django.urls import reverse
from django.contrib import messages
from .models import QivipQuiz, QivipQuestion from .models import QivipQuiz, QivipQuestion
from .forms import QuizForm, QuestionForm from .forms import QuizForm, QuestionForm
import json
# Übersicht aller Quizze # Übersicht aller Quizze
@login_required @login_required
@@ -52,47 +55,240 @@ def delete_quiz(request, pk):
def detail_quiz(request, pk): def detail_quiz(request, pk):
quiz = get_object_or_404(QivipQuiz, pk=pk, user_id=request.user) quiz = get_object_or_404(QivipQuiz, pk=pk, user_id=request.user)
questions = QivipQuestion.objects.filter(quiz_id=quiz) questions = QivipQuestion.objects.filter(quiz_id=quiz)
return render(request, 'library/detail_quiz.html', {'quiz': quiz, 'questions': questions})
# Parse JSON data for each question
for question in questions:
if question.data:
question.data = json.loads(question.data)
context = {
'quiz': quiz,
'questions': questions
}
return render(request, 'library/detail_quiz.html', context)
# Übersicht aller Fragen # Übersicht aller Fragen
@login_required @login_required
def question_list(request): def question_list(request):
questions = QivipQuestion.objects.filter(quiz_id__user_id=request.user) questions = QivipQuestion.objects.filter(quiz_id__user_id=request.user)
# Parse JSON data for each question
for question in questions:
if question.data:
question.data = json.loads(question.data)
return render(request, 'library/question_list.html', {'questions': questions}) return render(request, 'library/question_list.html', {'questions': questions})
# Neue Frage erstellen # Neue Frage erstellen
@login_required @login_required
def new_question(request): def new_question(request):
question_type = request.GET.get('type')
quiz_id = request.GET.get('quiz_id')
if not quiz_id:
messages.error(request, 'Quiz ID muss angegeben werden.')
return redirect('library:overview_quiz')
try:
quiz = QivipQuiz.objects.get(pk=quiz_id, user_id=request.user)
except QivipQuiz.DoesNotExist:
messages.error(request, 'Quiz nicht gefunden oder keine Berechtigung.')
return redirect('library:overview_quiz')
if question_type not in ['multiple_choice', 'true_false']:
base_url = reverse('library:new_question')
return redirect(f'{base_url}?type=multiple_choice&quiz_id={quiz_id}')
if request.method == 'POST': if request.method == 'POST':
form = QuestionForm(request.POST) question_text = request.POST.get('question', '')
if form.is_valid():
question = form.save(commit=False) # Handle different question types
# Prüfe ob der User Zugriff auf das Quiz hat if question_type == 'true_false':
if question.quiz_id.user_id != request.user: correct_answer = request.POST.get('correct_answer') == 'true'
return redirect('library:question_list') json_data = {
question.save() 'type': question_type,
return redirect('library:edit_question', pk=question.pk) 'question': question_text,
'options': [
{'value': 'Wahr', 'is_correct': correct_answer},
{'value': 'Falsch', 'is_correct': not correct_answer}
]
}
elif question_type == 'multiple_choice':
options = []
i = 1
# Limit to maximum 6 options
while request.POST.get(f'option_{i}') and i <= 6:
is_correct = request.POST.get(f'correct_{i}') == '1'
options.append({
'order': i,
'value': request.POST.get(f'option_{i}'),
'is_correct': is_correct
})
i += 1
# Validate minimum 2 options
if len(options) < 2:
messages.error(request, 'Mindestens zwei Optionen müssen angegeben werden.')
return redirect(request.get_full_path())
json_data = {
'type': question_type,
'question': question_text,
'options': options
}
question = QivipQuestion()
question.data = json.dumps(json_data)
question.quiz_id = quiz
question.save()
return redirect('library:detail_quiz', pk=quiz.pk)
else: else:
form = QuestionForm() # Initialize empty question data for new questions
return render(request, 'library/form.html', {'form': form}) if question_type == 'true_false':
question_data = {
'type': question_type,
'question': '',
'options': [
{'value': 'Wahr', 'is_correct': True},
{'value': 'Falsch', 'is_correct': False}
]
}
elif question_type == 'multiple_choice':
question_data = {
'type': question_type,
'question': '',
'options': [
{'value': '', 'is_correct': False},
{'value': '', 'is_correct': False}
]
}
template_name = f'library/question/question_{question_type}.html'
context = {
'question': question_data,
'quiz_id': quiz_id,
'quiz': quiz
}
return render(request, template_name, context)
# Frage bearbeiten # Frage bearbeiten
@login_required @login_required
def edit_question(request, pk): def edit_question(request, pk):
question = get_object_or_404(QivipQuestion, pk=pk, quiz_id__user_id=request.user) question = get_object_or_404(QivipQuestion, pk=pk, quiz_id__user_id=request.user)
if question.quiz_id.user_id != request.user:
return redirect('library:question_list')
# Parse the existing JSON data
try:
question_data = json.loads(question.data) if question.data else {}
question_type = question_data.get('type', 'multiple_choice')
# For true/false questions, get the correct answer from the options
if question_type == 'true_false':
# Default to true if no options exist
correct_answer = True
if question_data.get('options'):
correct_answer = question_data['options'][0].get('is_correct', True)
question_data = {
'type': question_type,
'question': question_data.get('question', ''),
'correct_answer': correct_answer, # Add this for template compatibility
'options': [
{'value': 'Wahr', 'is_correct': correct_answer},
{'value': 'Falsch', 'is_correct': not correct_answer}
]
}
else:
# For multiple choice questions
question_data.setdefault('type', question_type)
question_data.setdefault('question', '')
question_data.setdefault('options', [])
except (json.JSONDecodeError, AttributeError):
# Handle invalid JSON or None data
question_type = question_data.get('type', 'multiple_choice')
if question_type == 'true_false':
question_data = {
'type': question_type,
'question': '',
'correct_answer': True, # Default to true for new questions
'options': [
{'value': 'Wahr', 'is_correct': True},
{'value': 'Falsch', 'is_correct': False}
]
}
else:
question_data = {
'type': question_type,
'question': '',
'options': []
}
if request.method == 'POST': if request.method == 'POST':
form = QuestionForm(request.POST, instance=question) question_text = request.POST.get('question', '')
if form.is_valid():
form.save() # Handle different question types
return redirect('library:edit_question', pk=pk) if question_type == 'true_false':
correct_answer = request.POST.get('correct_answer') == 'true'
json_data = {
'type': question_type,
'question': question_text,
'options': [
{'value': 'Wahr', 'is_correct': correct_answer},
{'value': 'Falsch', 'is_correct': not correct_answer}
]
}
elif question_type == 'multiple_choice':
options = []
i = 1
# Limit to maximum 6 options
while request.POST.get(f'option_{i}') and i <= 6:
options.append({
'order': i,
'value': request.POST.get(f'option_{i}'),
'is_correct': request.POST.get(f'correct_{i}') == '1'
})
i += 1
# Validate minimum 2 options
if len(options) < 2:
messages.error(request, 'Mindestens zwei Optionen müssen angegeben werden.')
return redirect(request.get_full_path())
# Validate maximum 6 options
if len(options) > 6:
messages.error(request, 'Maximal 6 Optionen sind erlaubt.')
return redirect(request.get_full_path())
json_data = {
'type': question_type,
'question': question_text,
'options': options
}
question.data = json.dumps(json_data)
question.save()
return redirect('library:detail_quiz', pk=question.quiz_id.pk)
else: else:
form = QuestionForm(instance=question) template_name = f'library/question/question_{question_type}.html'
return render(request, 'library/form.html', {'form': form}) context = {
'question': {'data': question_data}, # Wrap in data structure expected by template
'quiz_id': question.quiz_id.pk,
'quiz': question.quiz_id
}
return render(request, template_name, context)
# Frage löschen # Frage löschen
@login_required @login_required
def delete_question(request, pk): def delete_question(request, pk):
question = get_object_or_404(QivipQuestion, pk=pk, quiz_id__user_id=request.user) question = get_object_or_404(QivipQuestion, pk=pk, quiz_id__user_id=request.user)
# Parse JSON data for question
if question.data:
question.data = json.loads(question.data)
if request.method == 'POST': if request.method == 'POST':
question.delete() question.delete()
return redirect('library:detail_quiz', pk=question.quiz_id.pk) return redirect('library:detail_quiz', pk=question.quiz_id.pk)

0
core/play/__init__.py Normal file
View File

3
core/play/admin.py Normal file
View File

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

6
core/play/apps.py Normal file
View File

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

View File

3
core/play/models.py Normal file
View File

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

3
core/play/tests.py Normal file
View File

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

9
core/play/urls.py Normal file
View File

@@ -0,0 +1,9 @@
from django.urls import path
from . import views
app_name = 'play'
urlpatterns = [
path('lobby', views.lobby, name='lobby'),
path('join', views.join_game, name='join_game'),
]

8
core/play/views.py Normal file
View File

@@ -0,0 +1,8 @@
from django.shortcuts import render
# Create your views here.
def lobby(request):
return render(request, 'play/lobby.html')
def join_game(request):
return render(request, 'play/join_game.html')

View File

@@ -1,5 +1,9 @@
@import 'tailwindcss'; @import 'tailwindcss';
qp-container {
@apply max-w-xl w-full mx-auto;
}
nav div ul.qp-nav-list li { nav div ul.qp-nav-list li {
@apply text-white hover:scale-110 hover:border-b-2 hover:border-white transition duration-200; @apply text-white hover:scale-110 hover:border-b-2 hover:border-white transition duration-200;
} }

View File

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

View File

@@ -1,9 +1,9 @@
{% extends 'accounts/base.html'%} {% extends 'base.html'%}
{% block title %}Home{% endblock %} {% block title %}Home{% endblock %}
{% block content %} {% block content %}
<div class="max-w-screen-lg mx-auto mt-12"> <div class="flex justify-center items-center mt-12 ">
<div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md"> <div class="input-group p-4 m-2 border-blue-600 border-2 rounded-xl shadow-md">
<div class="grid place-content-center h-120"> <div class="grid place-content-center h-120">

View File

@@ -1,4 +1,4 @@
{% extends 'accounts/base.html' %} {% extends 'base.html' %}
{% load static %} {% load static %}
{% block title %}Anmeldung{% endblock %} {% block title %}Anmeldung{% endblock %}
{% block content %} {% block content %}

View File

@@ -1,4 +1,4 @@
{% extends 'accounts/base.html' %} {% extends 'base.html' %}
{% block title %}Registrierung{% endblock %} {% block title %}Registrierung{% endblock %}
{% block content %} {% block content %}
<div class="grid place-content-center h-120 mt-12 mb-12"> <div class="grid place-content-center h-120 mt-12 mb-12">

View File

@@ -5,12 +5,13 @@
<link rel="icon" type="image/png" href="{% static 'icons/favicon.png' %}"> <link rel="icon" type="image/png" href="{% static 'icons/favicon.png' %}">
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{% static 'homepage/t-style.css' %}"> <link rel="stylesheet" href="{% static 'css/t-style.css' %}">
<title>qivip</title> <title>qivip</title>
</head> </head>
<body> <body>
{% include 'homepage/partials/_nav.html' %} {% include 'partials/_nav.html' %}
{% block content%}{% endblock %} {% block content%}{% endblock %}
{% include 'homepage/partials/_footer.html' %} {% include 'partials/_footer.html' %}
{% block extra_js %}{% endblock %}
</body> </body>
</html> </html>

View File

@@ -0,0 +1,27 @@
<!-- chat/templates/chat/index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Chat Rooms</title>
</head>
<body>
What chat room would you like to enter?<br>
<input id="room-name-input" type="text" size="100"><br>
<input id="room-name-submit" type="button" value="Enter">
<script>
document.querySelector('#room-name-input').focus();
document.querySelector('#room-name-input').onkeyup = function(e) {
if (e.key === 'Enter') { // enter, return
document.querySelector('#room-name-submit').click();
}
};
document.querySelector('#room-name-submit').onclick = function(e) {
var roomName = document.querySelector('#room-name-input').value;
window.location.pathname = '/chat/' + roomName + '/';
};
</script>
</body>
</html>

View File

@@ -0,0 +1,50 @@
<!-- chat/templates/chat/room.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Chat Room</title>
</head>
<body>
<textarea id="chat-log" cols="100" rows="20"></textarea><br>
<input id="chat-message-input" type="text" size="100"><br>
<input id="chat-message-submit" type="button" value="Send">
{{ room_name|json_script:"room-name" }}
<script>
const roomName = JSON.parse(document.getElementById('room-name').textContent);
const chatSocket = new WebSocket(
'ws://'
+ window.location.host
+ '/ws/chat/'
+ roomName
+ '/'
);
chatSocket.onmessage = function(e) {
const data = JSON.parse(e.data);
document.querySelector('#chat-log').value += (data.message + '\n');
};
chatSocket.onclose = function(e) {
console.error('Chat socket closed unexpectedly');
};
document.querySelector('#chat-message-input').focus();
document.querySelector('#chat-message-input').onkeyup = function(e) {
if (e.key === 'Enter') { // enter, return
document.querySelector('#chat-message-submit').click();
}
};
document.querySelector('#chat-message-submit').onclick = function(e) {
const messageInputDom = document.querySelector('#chat-message-input');
const message = messageInputDom.value;
chatSocket.send(JSON.stringify({
'message': message
}));
messageInputDom.value = '';
};
</script>
</body>
</html>

View File

@@ -1,4 +1,4 @@
{% extends 'homepage/base.html' %} {% extends 'base.html' %}
{% block content %} {% block content %}
<div class="grid place-content-center md:h-screen h-150 w-full -z-50 top-0 p-4"> <div class="grid place-content-center md:h-screen h-150 w-full -z-50 top-0 p-4">

View File

@@ -0,0 +1,22 @@
{% extends 'base.html' %}
{% block content%}
<div>
<div>
<h1>Impressum</h1>
</div>
<div>
<div>
<p>
Katharineum zu Lübeck
</p>
<p>
Königsstraße 27-31
</p>
<p>
23552 Lübeck
</p>
</div>
</div>
{% endblock %}
</body>
</html>

View File

@@ -0,0 +1,13 @@
{% extends 'base.html' %}
{% block content%}
<div>
<p>
Hallo, ich bin die Datenschutzerklärung!
</p>
</div
{% endblock %}
>
</div>
</body>
</html>

View File

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

View File

@@ -0,0 +1,114 @@
{% extends 'base.html' %}
{% block content %}
<div class="container mx-auto px-4">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">{{ quiz.name }}</h1>
<div class="flex space-x-2">
<a href="{% url 'library:edit_quiz' quiz.id %}" class="bg-green-500 text-white px-4 py-2 rounded-md text-sm lg:text-lg hover:bg-green-600 transition-colors">Quiz bearbeiten</a>
<a href="{% url 'library:delete_quiz' quiz.id %}" class="bg-red-500 text-white px-4 py-2 rounded-md text-sm lg:text-lg hover:bg-red-600 transition-colors">Quiz löschen</a>
</div>
</div>
{% if quiz.description %}
<p class="text-gray-600 mb-8">{{ quiz.description }}</p>
{% endif %}
<div class="bg-white rounded-lg shadow-md border-blue-600 border-2 rounded-xl shadow-md">
<div class="border-b border-gray-200 p-4">
<div class="flex justify-between items-center">
<h2 class="text-xl font-semibold">Fragen</h2>
<div class="flex space-x-2">
<a href="{% url 'library:new_question' %}?type=multiple_choice&quiz_id={{ quiz.id }}"
class="bg-blue-100 text-blue-800 px-4 py-2 rounded-md text-xs lg:text-lg hover:border-blue-600 border-2">
Multiple Choice
</a>
<a href="{% url 'library:new_question' %}?type=true_false&quiz_id={{ quiz.id }}"
class="bg-purple-100 text-purple-800 px-4 py-2 rounded-md text-xs lg:text-lg hover:border-blue-600 border-2">
Wahr/Falsch
</a>
</div>
</div>
</div>
{% if questions %}
<div class="divide-y divide-gray-200">
{% for question in questions %}
<div class="w-full rounded-xl p-4 hover:bg-gray-50">
<a class="block flex h-full w-full" href="{% url 'library:edit_question' question.id %}" >
<div class="flex justify-between items-start">
<div class="flex-grow">
<p class="font-medium">{{ question.data.question }}</p>
<div class="mt-1">
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {% if question.data.type == 'multiple_choice' %}bg-blue-100 text-blue-800{% else %}bg-purple-100 text-purple-800{% endif %}">
{% if question.data.type == 'multiple_choice' %}Multiple Choice{% else %}Wahr/Falsch{% endif %}
</span>
</div>
<div class="mt-2">
{% if question.data.type == 'multiple_choice' %}
<ul class="space-y-1">
{% for option in question.data.options %}
<li class="flex items-center text-sm">
{% if option.is_correct %}
<svg class="h-4 w-4 text-green-500 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
</svg>
<span class="font-medium text-green-700">{{ option.value }}</span>
{% else %}
<svg class="h-4 w-4 text-gray-400 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6"/>
</svg>
<span class="text-gray-600">{{ option.value }}</span>
{% endif %}
</li>
{% endfor %}
</ul>
{% else %}
{% for option in question.data.options %}
{% if option.is_correct %}
<p class="text-sm">
<span class="text-gray-500">Richtige Antwort:</span>
<span class="ml-1 font-medium {% if option.value == "Wahr" %} text-green-700 {% else %}text-red-700{% endif %}">{{ option.value }}</span>
</p>
{% endif %}
{% endfor %}
{% endif %}
</div>
</div>
<div class="flex h-full space-x-2 ml-4 items-center">
<!--
<a href="{% url 'library:edit_question' question.id %}"
class="bg-gray-100 text-gray-700 px-3 py-1 rounded hover:bg-gray-200 transition-colors">
Bearbeiten
</a>
-->
<a href=" {% url 'library:delete_question' question.id %}"
class=" text-red-700 px-4 py-1 rounded hover:scale-110 ">
&#x1F5D1
</a>
</div>
</div>
</div>
</a>
{% endfor %}
</div>
{% else %}
<div class="p-8 text-center">
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
</svg>
<p class="mt-2 text-sm text-gray-500">Noch keine Fragen vorhanden. Erstellen Sie eine neue Frage, um loszulegen!</p>
</div>
{% endif %}
</div>
</div>
{% endblock %}

View File

@@ -1,9 +1,9 @@
{% extends 'library/base.html' %} {% extends 'base.html' %}
{% block content %} {% block content %}
<h1>Formular</h1> <h1>Formular</h1>
<h2>{{ form.name.value }}</h2> <h2>{{ form.name.value }}</h2>
<div class="input-group"> <div class="input-group border-blue-600 border-2 rounded-xl shadow-md">
<form method="post"> <form method="post">
{% csrf_token %} {% csrf_token %}
{{ form.as_p }} {{ form.as_p }}

View File

@@ -0,0 +1,28 @@
{% extends 'base.html' %}
{% block content %}
<h1>Übersicht</h1>
<div class="flex justify-end">
<a href="{% url 'library:new_quiz' %}" class="text-white bg-blue-500 px-4 py-2 rounded-md mb-12">Neues Quiz erstellen</a>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 px-4 place-items-center">
{% for quiz in quizzes %}
<div class="bg-white w-full max-w-md rounded-lg p-4 shadow-md border-blue-600 border-2 rounded-xl">
<h2 class="text-lg font-bold"><a href="{% url 'library:edit_quiz' quiz.id %}">{{ quiz.name }}</a></h2>
<p class="text-sm text-gray-600 py-12">{{ quiz.description }}</p>
<div>
<div class="flex justify-between items-center gap-2">
<a href="#" class="qp-a-button-small border-2 border-blue-600 text-black">Spiel starten</a>
<div class="flex gap-2">
<a href="{% url 'library:detail_quiz' quiz.id %}" class="qp-a-button-small border-2 border-blue-600 text-white">&#x270F;</a>
<a href="{% url 'library:delete_quiz' quiz.id %}" class="qp-a-button-small border-2 border-blue-600 text-white">&#x1F5D1;</a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% endblock %}

View File

@@ -0,0 +1,164 @@
{% extends 'base.html' %}
{% block content %}
<div class="container mx-auto px-4">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">{% if question %}Frage bearbeiten{% else %}Neue Multiple Choice Frage{% endif %}</h1>
<a href="{% url 'library:detail_quiz' quiz.id %}"
class="bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition-colors">
Zurück zum Quiz
</a>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<form method="post" class="space-y-6">
{% csrf_token %}
<!-- Question Text -->
<div>
<label for="question" class="block text-sm font-medium text-gray-700">Frage</label>
<div class="mt-1">
<textarea name="question" id="question" rows="4"
class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
required>{{ question.data.question|default:'' }}</textarea>
</div>
</div>
<!-- Options -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Antwortmöglichkeiten</label>
<div id="options-container" class="space-y-3">
{% if question and question.data.options %}
{% for option in question.data.options %}
<div class="flex items-center space-x-3">
<textarea name="option_{{ forloop.counter }}" rows="2"
class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
required>{{ option.value }}</textarea>
<label class="inline-flex items-center">
<input type="checkbox" name="correct_{{ forloop.counter }}" value="1"
class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"
{% if option.is_correct %}checked{% endif %}>
<span class="ml-2 text-sm text-gray-600">Richtig</span>
</label>
<button type="button" onclick="removeOption(this)"
class="text-red-600 hover:text-red-800 transition-colors">
<svg class="h-5 w-5" 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>
</button>
</div>
{% endfor %}
{% else %}
<div class="flex items-center space-x-3">
<textarea name="option_1" rows="2"
class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
required></textarea>
<label class="inline-flex items-center">
<input type="checkbox" name="correct_1" value="1"
class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
<span class="ml-2 text-sm text-gray-600">Richtig</span>
</label>
<button type="button" onclick="removeOption(this)"
class="text-red-600 hover:text-red-800 transition-colors">
<svg class="h-5 w-5" 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>
</button>
</div>
<div class="flex items-center space-x-3">
<textarea name="option_2" rows="2"
class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
required></textarea>
<label class="inline-flex items-center">
<input type="checkbox" name="correct_2" value="1"
class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
<span class="ml-2 text-sm text-gray-600">Richtig</span>
</label>
<button type="button" onclick="removeOption(this)"
class="text-red-600 hover:text-red-800 transition-colors">
<svg class="h-5 w-5" 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>
</button>
</div>
{% endif %}
</div>
<button type="button" onclick="addOption()"
class="mt-3 inline-flex items-center px-3 py-1.5 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
<svg class="h-4 w-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
</svg>
Option hinzufügen
</button>
</div>
<div class="flex justify-end space-x-3">
<a href="{% url 'library:detail_quiz' quiz.id %}"
class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Abbrechen
</a>
<button type="submit"
class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
{% if question %}Speichern{% else %}Erstellen{% endif %}
</button>
</div>
</form>
</div>
</div>
<script>
function addOption() {
const container = document.getElementById('options-container');
const optionCount = container.children.length + 1;
if (optionCount > 6) {
alert('Maximal 6 Optionen sind erlaubt.');
return;
}
const div = document.createElement('div');
div.className = 'flex items-center space-x-3';
div.innerHTML = `
<textarea name="option_${optionCount}" rows="2"
class="shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
required></textarea>
<label class="inline-flex items-center">
<input type="checkbox" name="correct_${optionCount}" value="1"
class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded">
<span class="ml-2 text-sm text-gray-600">Richtig</span>
</label>
<button type="button" onclick="removeOption(this)"
class="text-red-600 hover:text-red-800 transition-colors">
<svg class="h-5 w-5" 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>
</button>
`;
container.appendChild(div);
}
function removeOption(button) {
const container = document.getElementById('options-container');
if (container.children.length > 2) {
button.parentElement.remove();
updateOptionNumbers();
} else {
alert('Mindestens zwei Optionen müssen vorhanden sein.');
}
}
function updateOptionNumbers() {
const container = document.getElementById('options-container');
const options = container.children;
Array.from(options).forEach((option, index) => {
const number = index + 1;
const textInput = option.querySelector('textarea');
const checkbox = option.querySelector('input[type="checkbox"]');
textInput.name = `option_${number}`;
checkbox.name = `correct_${number}`;
});
}
</script>
{% endblock %}

View File

@@ -0,0 +1,59 @@
{% extends 'base.html' %}
{% block content %}
<div class="container mx-auto px-4">
<div class="flex justify-between items-center mb-6">
<h1 class="text-2xl font-bold">{% if question %}Frage bearbeiten{% else %}Neue Wahr/Falsch Frage{% endif %}</h1>
<a href="{% url 'library:detail_quiz' quiz.id %}"
class="bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition-colors">
Zurück zum Quiz
</a>
</div>
<div class="bg-white rounded-lg shadow-md p-6">
<form method="post" class="space-y-6">
{% csrf_token %}
<!-- Question Text -->
<div>
<label for="question" class="block text-sm font-medium text-gray-700">Frage</label>
<div class="mt-1">
<textarea name="question" id="question" rows="4"
class="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
required>{{ question.data.question }}</textarea>
</div>
</div>
<!-- True/False Selection -->
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Richtige Antwort</label>
<div class="flex space-x-4">
<label class="inline-flex items-center">
<input type="radio" name="correct_answer" value="true"
class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300"
{% if question.data.correct_answer %}checked{% endif %}>
<span class="ml-2 text-sm text-gray-600">Wahr</span>
</label>
<label class="inline-flex items-center">
<input type="radio" name="correct_answer" value="false"
class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300"
{% if not question.data.correct_answer %}checked{% endif %}>
<span class="ml-2 text-sm text-gray-600">Falsch</span>
</label>
</div>
</div>
<div class="flex justify-end space-x-3">
<a href="{% url 'library:detail_quiz' quiz.id %}"
class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Abbrechen
</a>
<button type="submit"
class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
{% if question %}Speichern{% else %}Erstellen{% endif %}
</button>
</div>
</form>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,35 @@
{% extends 'base.html' %}
{% block content %}
<div class="grid place-items-center min-h-[calc(100vh-5rem)] py-6 m-2">
<div class="max-w-md w-full p-8 rounded-2xl border-2 border-blue-400 bg-white">
<h1 class="text-2xl text-center font-bold mb-4">Spiel beitreten</h1>
<form action="{% url 'play:join_game' %}" method="post" class="flex flex-col gap-4">
{% csrf_token %}
<div class="flex gap-3 items-center justify-center">
<input type="text" name="game_code" placeholder="XXX-XXX" maxlength="7" pattern="[A-Za-z0-9]{3}-[A-Za-z0-9]{3}" class="w-32 p-3 rounded-full bg-gray-200 focus:scale-105 transition duration-200 font-black focus:outline-none focus:ring-2 focus:ring-blue-400 focus:bg-blue-100 text-center uppercase tracking-wider" oninput="let v = this.value.replace(/[^A-Za-z0-9]/g, '').slice(0,6).toUpperCase(); this.value = v.length > 3 ? v.slice(0,3) + '-' + v.slice(3) : v;" autofocus>
<button type="submit" class="h-12 px-6 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200 flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-blue-700 active:scale-95 group" disabled>
<span class="hidden sm:block">Beitreten</span>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-5 h-5 transition-transform group-hover:translate-x-1">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
</svg>
</button>
</div>
</form>
<script>
const input = document.querySelector('input[name="game_code"]');
const button = document.querySelector('button[type="submit"]');
input.addEventListener('input', function(e) {
button.disabled = !this.value.match(/^[A-Z0-9]{3}-[A-Z0-9]{3}$/);
});
input.addEventListener('keypress', function(e) {
if (e.key === 'Enter' && !button.disabled) {
button.click();
}
});
</script>
</div>
</div>
{% endblock %}

View File

@@ -0,0 +1,15 @@
{% extends 'base.html' %}
{% block content %}
<div class="container mx-auto px-4">
<h1>Bundeslaender Deutschland Quiz</h1>
<div id="player-list">
<ul>
<li>Spieler 1</li>
<li>Spieler 2</li>
<li>Spieler 3</li>
</ul>
</div>
<button class="w-full p-3 rounded-full bg-blue-600 text-white font-black hover:scale-105 transition duration-200" type="submit">Starten</button>
</div>
{% endblock %}

View File

@@ -1 +1,4 @@
django~=5.1.4 django~=5.1.4
channels~=4.2.0
daphne~=4.1.2
channels_redis