henrik2399/qivip
1
0
Fork 0
Code Issues 24 Pull Requests 14 Actions Packages Projects Releases Wiki Activity

Zwischenstand

Browse Source
This commit is contained in:
nik8
2025-03-22 12:21:39 +01:00
parent 157daae740
commit 93b2675b9e
11 changed files with 218 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

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

6
django/core/settings.py
View File

@@ -128,4 +128,8 @@ STATICFILES_DIRS = [BASE_DIR / 'static']
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'
LOGIN_URL = '/account/login/'
LOGIN_URL = '/account/login/'
import os
MEDIA_URL = '/media/' # URL, um auf Medien-Dateien zuzugreifen
MEDIA_ROOT = os.path.join(BASE_DIR, 'media') # Speicherort für hochgeladene Dateien

3
django/library/forms.py
View File

@@ -4,7 +4,7 @@ from .models import QivipQuiz, QivipQuestion
class QuizForm(forms.ModelForm):
class Meta:
model = QivipQuiz
fields = ['name', 'description', 'status', 'category', 'tags',"difficulty"]
fields = ['name', 'description','image', 'status', 'category', 'tags',"difficulty"]
class QuestionForm(forms.ModelForm):
class Meta:
@@ -29,4 +29,3 @@ class QuizFilterForm(forms.Form):
user = forms.CharField(required=False, label="von User", widget=forms.TextInput(attrs={
'class': 'border-2 border-gray-300 rounded-lg p-2 w-full'
}))

18
django/library/migrations/0023_qivipquiz_image.py Normal file
View File

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

18
django/library/migrations/0024_alter_qivipquiz_image.py Normal file
View File

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

2
django/library/models.py
View File

@@ -24,7 +24,7 @@ class QivipQuiz(models.Model):
if value.strip() == "In dem Quiz geht es um ...":
raise ValidationError("Bitte gib eine aussagekräftige Beschreibung ein.")
image = models.ImageField(max_length=256, upload_to='quiz_images/', blank=True, null=True) # Bild speichern in media/quiz_images/
uuid = models.UUIDField(default=uuid.uuid4, editable=False, unique=True)
user_id = models.ForeignKey(User, on_delete=models.CASCADE, related_name='quiz')
creation_date = models.DateTimeField(auto_now_add=True)

8
django/library/urls.py
View File

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

17
django/library/views.py
View File

@@ -18,6 +18,7 @@ def overview_quiz(request):
#Filter
form = QuizFilterForm(request.GET)
try:
filter_my_quizzes = QivipQuiz.objects.filter(user_id=request.user).annotate(max_amout_questions=Count('question'))
@@ -65,16 +66,8 @@ def overview_quiz(request):
filter_other_quizzes=filter_other_quizzes.exclude(user_id=request.user)
except:
filter_other_quizzes=filter_other_quizzes
my_paginator = Paginator(filter_my_quizzes, 3) # 3 Quiz pro Seite
my_page_number = request.GET.get('my_page')
filter_my_quizzes = my_paginator.get_page(my_page_number)
# Paginator für fremde Quizze
other_paginator = Paginator(filter_other_quizzes, 3) # 3 Quiz pro Seite
other_page_number = request.GET.get('other_page')
filter_other_quizzes = other_paginator.get_page(other_page_number)
# Anzahl der Quiz pro Seite für Swiper
context = {
@@ -116,7 +109,7 @@ def overview_quiz(request):
@login_required
def new_quiz(request):
if request.method == 'POST':
form = QuizForm(request.POST)
form = QuizForm(request.POST, request.FILES)
if form.is_valid():
quiz = form.save(commit=False)
quiz.user_id = request.user
@@ -133,7 +126,7 @@ def new_quiz(request):
def edit_quiz(request, pk):
quiz = get_object_or_404(QivipQuiz, pk=pk, user_id=request.user)
if request.method == 'POST':
form = QuizForm(request.POST, instance=quiz)
form = QuizForm(request.POST, instance=quiz, files=request.FILES)
if form.is_valid():
form.save()
return redirect('library:detail_quiz', pk=quiz.pk)

2
django/templates/library/form.html
View File

@@ -2,7 +2,7 @@
{% block content %}
<div class="input-group border-blue-600 border-2 rounded-xl shadow-md mt-12">
<form method="post">
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Speichern</button>

229
django/templates/library/overview_quiz.html
View File

@@ -1,6 +1,33 @@
{% extends 'base.html' %}
{% block content %}
<head>
<meta charset="utf-8" />
<title>Swiper Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<style>
.swiper {
width: 100%;
height: 100%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<div class="flex justify-end mr-2">
<a href="{% url 'library:new_quiz' %}" class="mt-2 p-2 shadow-md border-blue-600 border-2 rounded-md text-black ">Neues Quiz erstellen</a>
@@ -21,84 +48,146 @@
</form>
</div>
</div>
<!-- Swiper Container für eigene Quiz -->
{% if filter_my_quizzes %}
<div class="text-center m-8 bg-blue-600 grid mx-8 h-8 place-items-center rounded-xl shadow-md ">
<h1 id="my-quizzes"class="flex px-4 font-bold text-white ">eigene Quiz</h1></div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 px-4 place-items-center ">
<h1 id="my-quizzes" class="flex px-4 font-bold text-white">Eigene Quiz</h1>
</div>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
{% for quiz in filter_my_quizzes %}
<div class="bg-white w-full max-w-md rounded-lg p-4 shadow-md border-blue-600 border-2 rounded-xl h-80 ">
<h2 class="text-lg font-bold break-words truncate"><a href="{% url 'library:edit_quiz' quiz.id %}">{{ quiz.name }}</a></h2>
<p class="text-sm text-gray-600 pt-11 h-54"><span class="break-words line-clamp-2">{{ quiz.description }} </span><br> Status: <span class="font-bold">{{ quiz.status }}</span>
<br> Schwierigkeit:<span class="font-bold"> {{ quiz.difficulty }}</span>
<br> Anzahl der Fragen:<span class="font-bold"> {{ quiz.question.count }}</span> </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 class="swiper-slide">
<div class="relative h-80 bg-white bg-cover text-white w-full max-w-md rounded-lg p-4 shadow-md border-blue-600 border-2 rounded-xl flex flex-col justify-between"
{% if quiz.image %} style="background-image: url('http://127.0.0.1:8000/library{{ quiz.image.url }}');" {% endif %}>
<div class="absolute inset-0 bg-gray-900/60 bg-opacity-50 rounded-lg"></div>
<h2 class=" font-bold break-words truncate text-white font-bold text-white drop-shadow-lg custom-outline"> <a href="{% url 'library:detail_quiz' quiz.id %}">{{ quiz.name }}</a></h2>
<p class="text-white font-bold text-white drop-shadow-lg custom-outline">
<span class="break-words line-clamp-2 ">{{ quiz.description }}</span><br>
Schwierigkeit: <span class="font-bold">{{ quiz.difficulty }}</span><br>
Anzahl der Fragen: <span class="font-bold ">{{ quiz.question.count }}</span><br>
Status: <span class="font-bold ">{{ quiz.status }}</span>
</p>
<!-- Buttons bleiben am unteren Rand -->
<div class="flex justify-between items-center gap-2 ">
<a href="#" class="qp-a-button-small border-2 border-blue-600 text-white font-bold text-white drop-shadow-lg custom-outline">Spiel starten</a>
<div class="flex gap-2">
<a href="{% url 'library:detail_quiz' quiz.id %}" class="qp-a-button-small border-2 border-blue-600 text-white text-white font-bold text-white drop-shadow-lg custom-outline">&#x270F;</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">&#x1F5D1;</a>
</div>
</div>
</div>
</div>
{% endfor %}
{% endif %}
</div>
{% if filter_my_quizzes|length > 1 %}
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
{% endif %}
</div>
{% if filter_my_quizzes or 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 Nutzer</h1></div>
{% endif %}
<!-- Swiper Container für Quiz von anderen Nutzern -->
{% if filter_other_quizzes %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 px-4 place-items-center">
{% for quiz in filter_other_quizzes %}
<div class="h-80 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 break-words truncate">{{ quiz.name }}</h2>
<p class="text-sm text-gray-600 pt-11 h-54"><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>Erstmalig erstellt am:<span class="font-bold"> {{ quiz.creation_date }}</span>
</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:overview_quiz' %}?user={{ quiz.user_id }}" class=" text-gray-600 text-sm" >
<button type="submit" class=" py-1 text-blue-600 hover:text-blue-750">
Quiz von {{ quiz.user_id }}
</button>
</a>
</div>
</div>
</div>
</div>
{% endfor %}
{% elif not filter_my_quizzes %}
<div class="text-center font-bold">Es wurde kein passendes Quiz gefunden.</div>
{% else %}
<div class="text-center font-bold">Es wurde kein passendes Quiz von einem anderen Nutzer gefunden.</div>
{% endif %}
<div class="text-center m-8 bg-blue-600 grid mx-8 h-8 place-items-center rounded-xl shadow-md">
<h1 id="other-quizzes" class="flex px-4 font-bold text-white">Quiz von anderen Nutzern</h1>
</div>
<div class="swiper mySwiper">
<div class="swiper-wrapper">
{% for quiz in filter_other_quizzes %}
<div class="swiper-slide">
<div class="relative h-80 bg-white bg-cover text-white w-full max-w-md rounded-lg p-4 shadow-md border-blue-600 border-2 rounded-xl flex flex-col justify-between"
{% if quiz.image %} style="background-image: url('http://127.0.0.1:8000/library{{ quiz.image.url }}');" {% endif %}>
<div class="absolute inset-0 bg-gray-900/60 bg-opacity-50 rounded-lg"></div>
<h2 class=" font-bold break-words truncate text-white font-bold text-white drop-shadow-lg custom-outline"> <a href="{% url 'library:detail_quiz' quiz.id %}">{{ quiz.name }}</a></h2>
<p class="text-white font-bold text-white drop-shadow-lg custom-outline">
<span class="break-words line-clamp-2 ">{{ quiz.description }}</span><br>
Schwierigkeit: <span class="font-bold">{{ quiz.difficulty }}</span><br>
Anzahl der Fragen: <span class="font-bold ">{{ quiz.question.count }}</span><br>
Erstellt am: <span class="font-bold ">{{ quiz.creation_date }}</span>
</p>
<!-- Buttons bleiben am unteren Rand -->
<div class="flex justify-between items-center gap-2 ">
<a href="#" class="qp-a-button-small border-2 border-blue-600 text-white font-bold text-white drop-shadow-lg custom-outline">Spiel starten</a>
<a href="{% url 'library:detail_quiz' quiz.id %}" class="qp-a-button-small border-2 border-blue-600 text-white text-white font-bold text-white drop-shadow-lg custom-outline">&#x270F;</a>
<div class="flex gap-2">
<button type="submit" class=" text-sm py-1 text-white font-bold text-white drop-shadow-lg custom-outline hover:text-gray-300"> Quiz von {{ quiz.user_id }}</button>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% if filter_other_quizzes|length > 1 %}
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
{% endif %}
</div>
{% endif %}
{% if not filter_other_quizzes and not filter_my_quizzes %}
<div class="grid text-center font-bold items-center">Es wurde kein Quiz passendes gefunden!</div>
{% endif %}
<!-- Swiper.js -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper('.swiper', {
slidesPerView: getSlidesPerView(),
direction: getDirection(),
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
on: {
resize: function () {
swiper.changeDirection(getDirection());
swiper.params.slidesPerView = getSlidesPerView();
swiper.update();
},
},
});
function getDirection() {
return window.innerWidth <= 0? 'vertical' : 'horizontal';
}
function getSlidesPerView() {
if (window.innerWidth <= 840) {
return 1; // Smartphones
} else if (window.innerWidth <= 1024) {
return 2; // Tablets
} else {
return 3; // Desktops
}
}
</script>
<style>
.custom-outline {
-webkit-text-stroke: 0.2px rgb(0, 0, 0); /* Schwarze Umrandung */
}
</style>
{% endblock %}

3
requirements.txt
View File

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