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

Revert "Merge branch '103-verschiedene-lernmodi' into 'master'"

Browse Source 
This reverts merge request !47
This commit is contained in:
ben8
2025-04-18 13:48:23 +00:00
parent d4252c1297
commit a9343f285a
7 changed files with 42 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
django/templates/play/game/finished.html
View File

@@ -7,7 +7,7 @@
<div class="bg-white rounded-lg shadow-md p-8 mb-6">
<div class="text-center mb-8">
<h1 class="text-4xl font-bold text-blue-600 mb-4">Quiz beendet!</h1>
<p class="text-xl text-gray-600">Vielen Dank fürs Spielen!</p>
<p class="text-xl text-gray-600">Vielen Dank fürs Mitspielen!</p>
</div>
{% if not is_host %}

93
django/templates/play/game/question_host.html
View File

@@ -1,67 +1,46 @@
{% 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>
{% if request.session.mode == "learn" %}
<div class="grid grid-cols-1 gap-4 mb-6">
{% else %}
<div class="grid grid-cols-2 gap-4 mb-6">
{% endif %}
{% if request.session.mode != "learn" %}
<div class="grid grid-cols-2 gap-4 mb-6">
<div class="p-4 bg-blue-50 rounded-lg">
<p class="text-blue-600 text-xl mb-2">Verbleibende Zeit </p>
<p class="text-blue-600 text-xl mb-2">Verbleibende Zeit</p>
<p id="remaining-time" class="text-6xl font-bold text-blue-700">30</p>
</div>
{% endif %}
<div class="p-4 bg-blue-50 rounded-lg">
<p class="text-blue-600 text-xl mb-2">Antworten</p>
<p id="answer-count" class="text-6xl font-bold text-blue-700">0/0</p>
</div>
</div>
<div class="grid grid-cols-2 gap-4" id="options-container">
<div class="grid grid-cols-2 gap-4">
{% for option in question_data.options %}
<button
class="p-4 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option"
data-index="{{ forloop.counter0 }}"
{% if request.session.mode == "learn" %}
onclick="submitAnswer({{ forloop.counter0 }});" {% endif %}>
<div class="p-4 bg-gray-100 rounded-lg" data-correct="{{ option.is_correct }}">
<p class="text-lg">{{ option.value }}</p>
</button>
<p id="option-count-{{ forloop.counter0 }}" class="text-gray-600 hidden">0 Antworten</p>
</div>
{% endfor %}
</div>
</div>
</div>
{% endblock %}
{% block extra_js %}
{% include 'play/game/common_scripts.html' %}
<script>
const joinCode = '{{ quiz_game.join_code }}';
const hostId = '{{ host_id }}';
const questionStartTime = {{ start_time }};
var questionDuration = 30000; // 30 seconds in milliseconds
const questionDuration = '{{ current_question.time_per_question }}'*1000; //Zeit pro Frage (indviduell eingestellt)
const gameSocket = initializeGameSocket(joinCode);
let answeredParticipants = 0;
let totalParticipants = 0;
const optionCounts = {};
gameSocket.onmessage = function(e) {
const data = JSON.parse(e.data);
if (data.type === 'participant_answer') {
@@ -106,7 +85,7 @@
// Show correct answers and answer counts
var correctOptions = document.querySelectorAll('[data-correct="True"]');
for (var i = 0; i < correctOptions.length; i++) {
correctOptions[i].classList.add('border-2', 'border-blue-500');
correctOptions[i].classList.add('border-2', 'border-green-500');
}
// Show answer counts
@@ -125,7 +104,6 @@
}
// Timer
{% if request.session.mode != "learn" %}
function updateTimer() {
const now = Date.now();
const elapsed = now - questionStartTime;
@@ -140,9 +118,6 @@
}
}
{% endif %}
// Request initial participants list
gameSocket.onopen = function(e) {
gameSocket.send(JSON.stringify({
@@ -150,51 +125,5 @@
}));
updateTimer();
};
let hasAnswered = false;
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;
hasAnswered = true;
const now = Date.now();
const timeRemaining = Math.max(0, questionDuration - (now - questionStartTime));
// Disable all options and highlight selected
const options = document.getElementsByClassName('answer-option');
for (let option of options) {
option.disabled = true;
option.classList.remove('hover:bg-blue-100');
if (parseInt(option.dataset.index) === optionIndex) {
option.classList.remove('bg-gray-100');
option.classList.add('bg-blue-600', 'text-white');
} else {
option.classList.add('opacity-50');
}
}
// Send answer to server
gameSocket.send(JSON.stringify({
type: 'submit_answer',
participant_id: participantId,
answer: optionIndex,
time_remaining: timeRemaining
}));
}
</script>
{% endblock %}

27
django/templates/play/game/score_overview.html
View File

@@ -10,43 +10,33 @@
<p class="text-lg mb-2">{{ question_data.question }}</p>
<div class="grid grid-cols-2 gap-4">
{% for option in question_data.options %}
<div class="p-4 rounded-lg {% if option.is_correct %}bg-green-100 border-2 border-green-500 {% else %} bg-gray-100 {% endif %}">
<div class="p-4 rounded-lg {% if option.is_correct %}bg-green-100 border-2 border-green-500{% else %}bg-gray-100{% endif %}">
<p class="text-lg">{{ option.value }}</p>
<p class="text-gray-600" id="option-count-{{ forloop.counter0 }}">0 Antworten</p>
</div>
{% endfor %}
</div>
</div>
{% if request.session.mode != "learn" %}
<div class="mb-6">
<h2 class="text-xl font-bold mb-4">Punktestand</h2>
<div class="space-y-2">
{% for participant in participants %}
{% if participant == my_participant or is_host %}
<div class="p-4 {% if forloop.first %}bg-yellow-100 border-2 border-yellow-500{% else %}bg-gray-100{% endif %} rounded-lg flex justify-between items-center">
<div>
<p class="text-lg font-bold">{{ participant.display_name }}</p>
<p class="text-gray-600">{{ participant.score }} Punkte</p>
</div>
<div>
<p class="text-lg font-bold">{{ participant.display_name }}</p>
<p class="text-gray-600">{{ participant.score }} Punkte</p>
</div>
{% if participant.last_answer_correct %}
<span class="text-green-500">✓</span>
{% elif participant.last_answer_correct == False %}
<span class="text-red-500">✗</span>
{% endif %}
</div>
{% else %}
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
{% if is_host %}
{% if is_last_question %}
<button id="finish-button" class="w-full p-3 rounded-full bg-blue-600 text-white font-bold hover:bg-blue-700 transition-colors duration-200">
@@ -122,8 +112,7 @@
if (stats.hasOwnProperty(optionIndex)) {
var element = document.getElementById('option-count-' + optionIndex);
if (element) {
element.textContent = stats[optionIndex] + ' Antwort(en)';
element.textContent = stats[optionIndex] + ' Antworten';
}
}
}