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

Schätzfunktion( (mit Schieberegler) #148

Browse Source
This commit is contained in:
ben8
2025-07-21 18:56:17 +02:00
parent 885eb1e528
commit 07633dcaf9
7 changed files with 357 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -141,27 +141,60 @@
{% if request.session.mode == "learn" %}
<button
onclick="submitOrderAnswer()"
id="send_order" class="mt-2 text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a] ">
abschicken
id="send_order" class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors duration-200 answer-option "
>
Abschicken
</button>
{% endif %}
{% else %}
{% elif question_data.type == "input" %}
{% if request.session.mode == "learn" %}
<form action="">
<input id="textanswer" type="text" placeholder="DEINE ANTWORT"
class="answer-option text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option lg:w-80 dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a] ">
<button {% if request.session.mode == "learn" %}
onclick="submitAnswer( -1 );" {% endif %}
class="mt-2 text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a] ">
abschicken
<button
onclick="submitAnswer( -1 );"
class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors duration-200 answer-option "
>
Abschicken
</button>
</form>
{% endif %}
{% elif question_data.type == "guess" %}
{% if request.session.mode == "learn" %}
<form class="flex flex-col items-center gap-4 mt-4">
<!-- Slider mit Beschriftung -->
<div class="w-full max-w-xl text-center">
<input
id="textanswer"
type="range"
min="{{ question_data.min }}"
max="{{ question_data.max }}"
value="{{ question_data.min }}"
step="1"
oninput="document.getElementById('range-value').textContent = 'Wert: ' + this.value;"
class="w-full answer-option bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a]"
>
<p id="range-value" class="mt-2 font-bold text-gray-800 dark:text-white">Wert: {{ question_data.min }}</p>
</div>
<!-- Abschicken-Button -->
<button
onclick="submitAnswer(-1);"
class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors duration-200 answer-option "
>
Abschicken
</button>
</form>
{% endif %}
{% endif %}
{% endif %}

42
django/templates/play/game/question_participant.html
View File

@@ -115,10 +115,41 @@
<div class="flex gap-2">
<button id="send_order"
onclick="submitOrderAnswer()"
class="mt-2 text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a] ">
abschicken
class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors duration-200 answer-option "
>
Abschicken
</button>
{% elif question_data.type == "guess" %}
<form class="flex flex-col items-center gap-4 mt-4">
<!-- Slider mit Beschriftung -->
<div class="w-full max-w-xl text-center">
<input
id="textanswer"
type="range"
min="{{ question_data.min }}"
max="{{ question_data.max }}"
value="{{ question_data.min }}"
step="1"
oninput="document.getElementById('range-value').textContent = 'Wert: ' + this.value;"
class="w-full answer-option bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a]"
>
<p id="range-value" class="mt-2 font-bold text-gray-800 dark:text-white">Wert: {{ question_data.min }}</p>
</div>
<!-- Abschicken-Button -->
<button
onclick="submitAnswer(-1);"
class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors duration-200 answer-option "
>
Abschicken
</button>
</form>
@@ -126,14 +157,15 @@
{% else %}
{% elif question_data.type == "input" %}
<form action="">
<input id="textanswer" type="text" placeholder="DEINE ANTWORT"
class="answer-option text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option lg:w-80 dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a]">
<button
onclick="submitAnswer( -1 );"
class="mt-2 text-center p-2 bg-gray-100 hover:bg-blue-100 rounded-lg transition-colors duration-200 answer-option dark:bg-transparent dark:text-white dark:hover:bg-[#2a2f3a]">
abschicken
class="px-6 py-2 bg-blue-500 hover:bg-blue-600 text-white font-semibold rounded-lg transition-colors duration-200 answer-option "
>
Abschicken
</button>
</form>
{% endif %}

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

@@ -9,7 +9,7 @@
<h2 class="text-xl font-bold mb-4">Aktuelle Frage</h2>
<p class="text-lg mb-2">{{ question_data.question }}</p>
{% if question_data.type != "order" %}
{% if question_data.type != "order" and question_data.type != "guess" %}
<div class="grid grid-cols-2 gap-4">
{% for option in question_data.options %}
@@ -25,6 +25,25 @@
</div>
{% endfor %}
</div>
{% elif question_data.type == "guess" %}
<div id="option-box-0" class="relative p-4 rounded-lg border-2 border-green-500 overflow-auto">
<div id="option-fill-0" class="absolute left-0 top-0 h-full bg-green-300 opacity-50 z-0 transition-all duration-1500" style="width: 0%;"></div>
<div class="relative z-10">
<p class="text-lg">Richtige Anwort: {% for option in question_data.options%} {{ option.value }}{% endfor %}</p>
<p class="text-sm">(prozentuale Punktevergabe ab Genauigkeit von {{ question_data.tolerance }}%)</p>
<p class="text-gray-600" id="option-count-0">0 Antworten</p>
</div>
</div>
<div id="option-box-1" class="relative p-4 rounded-lg border-2 border-red-500 overflow-auto mt-2">
<div id="option-fill-1" class="absolute left-0 top-0 h-full bg-red-300 opacity-50 z-0 transition-all duration-1500" style="width: 0%;"></div>
<div class="relative z-10">
<p class="text-lg">Schätzung zu ungenau</p>
<p class="text-gray-600" id="option-count-1">0 Antworten</p>
</div>
</div>
{% else %}
<div id="option-box-0" class="relative p-4 rounded-lg border-2 border-green-500 overflow-auto">
<div id="option-fill-0" class="absolute left-0 top-0 h-full bg-green-300 opacity-50 z-0 transition-all duration-1500" style="width: 0%;"></div>