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

fix und Balkenanimation

Browse Source
This commit is contained in:
ben8
2025-05-17 12:08:25 +02:00
parent 7eb2a80656
commit 75e25fb3df
2 changed files with 29 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
django/play/consumers/game.py
View File

@@ -188,7 +188,7 @@ class GameConsumer(AsyncWebsocketConsumer):
question_data = json.loads(current_question.data) question_data = json.loads(current_question.data)
print(answer_index) print(answer_index)
try: try:
#if answer_index >= 0 : # -1 means timeout if answer_index >= 0 : # -1 means timeout
is_correct = question_data['options'][answer_index]['is_correct'] is_correct = question_data['options'][answer_index]['is_correct']
print(is_correct) print(is_correct)
except: except:

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

@@ -10,10 +10,16 @@
<p class="text-lg mb-2">{{ question_data.question }}</p> <p class="text-lg mb-2">{{ question_data.question }}</p>
<div class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-4">
{% for option in question_data.options %} {% 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 %}">
<p class="text-lg">{{ option.value }}</p> <div id="option-box-{{ forloop.counter0 }}" class="bg-gray-100 relative p-4 rounded-lg overflow-hidden {% if option.is_correct %} border-2 border-green-500{% else %}border-2 border-red-500{% endif %}">
<p class="text-gray-600" id="option-count-{{ forloop.counter0 }}">0 Antworten</p>
</div> <div id="option-fill-{{ forloop.counter0 }}" class="absolute left-0 top-0 h-full {% if option.is_correct %}bg-green-300 {% else %}bg-red-300 {% endif %} opacity-50 z-0 transition-all duration-1500 " style="width: 0%;"></div>
<div class="relative z-10">
<p class="text-lg">{{ option.value }}</p>
<p class="text-gray-600" id="option-count-{{ forloop.counter0 }}">0 Antworten</p>
</div>
</div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
@@ -36,7 +42,7 @@
{% endif %} {% endif %}
{{ participant.display_name }} {{ participant.display_name }}
</p> </p>
<p class="text-gray-600">{{ participant.score }} Punkte</p> <p data-last-score="{{ participant.last_score }}" class="text-gray-600" id="score-{{ forloop.counter0 }}">{{ participant.score }} Punkte</p>
</div> </div>
{% if participant.last_answer_correct %} {% if participant.last_answer_correct %}
<span class="text-green-500">✓</span> <span class="text-green-500">✓</span>
@@ -66,6 +72,7 @@
{% block extra_js %} {% block extra_js %}
{% if is_last_question %} {% if is_last_question %}
<script> <script>
// Hilfsfunktion für Pausen // Hilfsfunktion für Pausen
function sleep(ms) { function sleep(ms) {
@@ -174,17 +181,25 @@
{% endif %} {% endif %}
{% endif %} {% endif %}
function updateAnswerStats(stats) { function updateAnswerStats(stats) {
for (var optionIndex in stats) { const total = Object.values(stats).reduce((a, b) => a + b, 0) || 1;
if (stats.hasOwnProperty(optionIndex)) {
var element = document.getElementById('option-count-' + optionIndex); for (var optionIndex in stats) {
if (element) { if (stats.hasOwnProperty(optionIndex)) {
var countElement = document.getElementById('option-count-' + optionIndex);
element.textContent = stats[optionIndex] + ' Antwort(en)'; var fillElement = document.getElementById('option-fill-' + optionIndex);
}
if (countElement) {
countElement.textContent = stats[optionIndex] + ' Antwort(en)';
}
if (fillElement) {
const percentage = Math.round((stats[optionIndex] / total) * 100);
fillElement.style.width = percentage + '%';
} }
} }
} }
}
// Request answer stats when page loads // Request answer stats when page loads
gameSocket.onopen = function(e) { gameSocket.onopen = function(e) {