Lernfunktion

This commit is contained in:
ben8
2025-04-14 23:39:43 +02:00
parent 4209dcbc2d
commit 9fb9ab9198
5 changed files with 90 additions and 18 deletions

View File

@@ -1,7 +1,15 @@
{% extends 'base.html' %}
{% block content %}
{% if request.session.mode == "learn" %}
<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>{% endif %}
<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>
@@ -22,7 +30,8 @@
<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 }});">
{% if request.session.mode == "learn" %}
onclick="submitAnswer({{ forloop.counter0 }});" {% endif %}>
<p class="text-lg">{{ option.value }}</p>
</button>
{% endfor %}
@@ -133,8 +142,20 @@
let hasAnswered = false;
const participantId = '{{ host_id }}';
const participantId = '{{ host_id }}'; // HIER IST DER HOST DER SPIELER
function leaveGame() {
if (confirm('Möchtest du das Spiel wirklich verlassen?')) {
gameSocket.send(JSON.stringify({
type: 'leave_game',
participant_id: participantId
}));
window.location.href = '/';
gameSocket.close();
}
}
function submitAnswer(optionIndex) {
if (hasAnswered) return;

View File

@@ -7,11 +7,13 @@
<!-- Quiz Info -->
<div class="text-center mb-8">
<h3 class="text-xl text-gray-600 mb-2">{{ quiz.name }}</h3>
{% if request.session.mode != "learn" %}
<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>
{% endif %}
<!-- Participant Info -->
{% if participant %}

View File

@@ -9,7 +9,7 @@
<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 %}">
<a class="qp-a-button bg-green-500 text-white flex justify-center items-center relative group h-20 gap-2" href="{% url 'play:selected_mode' join_code %}?mode=classic">
<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>
@@ -22,7 +22,7 @@
</a>
<!-- Lernmodus -->
<a class="qp-a-button bg-indigo-500 text-white flex justify-center items-center relative group h-20 gap-2" href="#">
<a class="qp-a-button bg-indigo-500 text-white flex justify-center items-center relative group h-20 gap-2" href="{% url 'play:selected_mode' join_code %}?mode=learn">
<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>
@@ -35,7 +35,7 @@
</a>
<!-- Testmodus -->
<a class="qp-a-button bg-purple-500 text-white flex justify-center items-center relative group h-20 gap-2" href="#">
<a class="qp-a-button bg-purple-500 text-white flex justify-center items-center relative group h-20 gap-2" href="{% url 'play:selected_mode' join_code %}?mode=test">
<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>