From 07633dcaf9bb598f5af992bf1d80782236840ee6 Mon Sep 17 00:00:00 2001
From: ben8 <ben_ollech@outlook.com>
Date: Mon, 21 Jul 2025 18:56:17 +0200
Subject: [PATCH] =?UTF-8?q?Sch=C3=A4tzfunktion(=20(mit=20Schieberegler)=20?=
 =?UTF-8?q?#148?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 django/library/views.py                       |  56 ++++++-
 django/play/consumers/game.py                 |  34 +++-
 django/templates/library/detail_quiz.html     |  25 ++-
 .../library/question/question_guess.html      | 150 ++++++++++++++++++
 django/templates/play/game/question_host.html |  49 +++++-
 .../play/game/question_participant.html       |  42 ++++-
 .../templates/play/game/score_overview.html   |  21 ++-
 7 files changed, 357 insertions(+), 20 deletions(-)
 create mode 100644 django/templates/library/question/question_guess.html

diff --git a/django/library/views.py b/django/library/views.py
index 11fbfd0..5da7064 100644
--- a/django/library/views.py
+++ b/django/library/views.py
@@ -849,6 +849,7 @@ def question_list(request):
 def new_question(request):
     question_type = request.GET.get('type')
     quiz_id = request.GET.get('quiz_id')
+    question_data = None
     
     if not quiz_id:
         messages.error(request, 'Quiz ID muss angegeben werden.')
@@ -860,7 +861,7 @@ def new_question(request):
         messages.error(request, 'Quiz nicht gefunden oder keine Berechtigung.')
         return redirect('library:overview_quiz')
     
-    if question_type not in ['multiple_choice', 'true_false','input','order']:
+    if question_type not in ['multiple_choice', 'true_false','input','order','guess']:
         base_url = reverse('library:new_question')
         return redirect(f'{base_url}?type=multiple_choice&quiz_id={quiz_id}')
        
@@ -937,6 +938,24 @@ def new_question(request):
                 'question': question_text,
                 'options': options
             }
+            
+
+        elif question_type == 'guess':
+            correct_answer = request.POST.get('correct_answer')
+            min_value = request.POST.get('min')
+            max_value = request.POST.get('max')
+            tolerance = request.POST.get('tolerance')
+            json_data = {
+        'type': question_type,
+        'question': question_text,
+        'correct_answer': correct_answer,
+        'min': min_value,
+        'max': max_value,
+        'tolerance': tolerance,
+        'options': [
+            {'value': correct_answer, 'is_correct': True}
+        ]
+    }
 
         
 
@@ -1005,6 +1024,24 @@ def new_question(request):
                 ]
             }
             standard_time_per_question = 30
+        elif question_type == 'guess':
+            correct_answer = request.POST.get('correct_answer')
+            min_value = request.POST.get('min')
+            max_value = request.POST.get('max')
+            tolerance = request.POST.get('tolerance')
+            json_data = {
+        'type': question_type,
+        'question': '',
+        'correct_answer': correct_answer,
+        'min': min_value,
+        'max': max_value,
+        'tolerance': tolerance,
+        'options': [
+            {'value': correct_answer, 'is_correct': True}
+        ]
+    }
+            standard_time_per_question = 30
+            
             
     template_name = f'library/question/question_{question_type}.html'
     context = {
@@ -1157,6 +1194,23 @@ def edit_question(request, pk):
                 'question': question_text,
                 'options': options
             }
+        elif question_type == 'guess':
+            correct_answer = request.POST.get('correct_answer')
+            min_value = request.POST.get('min')
+            max_value = request.POST.get('max')
+            tolerance = request.POST.get('tolerance')
+            json_data = {
+        'type': question_type,
+        'question': question_text,
+        'correct_answer': correct_answer,
+        'min': min_value,
+        'max': max_value,
+        'tolerance': tolerance,
+        'options': [
+            {'value': correct_answer, 'is_correct': True}
+        ]
+    }
+
         question.data = json.dumps(json_data)
         question.time_per_question = request.POST.get('time_per_question', '30')
         try:
diff --git a/django/play/consumers/game.py b/django/play/consumers/game.py
index 01b3abc..5500af7 100644
--- a/django/play/consumers/game.py
+++ b/django/play/consumers/game.py
@@ -210,15 +210,43 @@ class GameConsumer(AsyncWebsocketConsumer):
             correct_sequence = sorted(question_data["options"], key=lambda x: x["order"])
             correct_values = [opt["value"] for opt in correct_sequence]
             is_correct = (answers_order == correct_values)
-            
+        
+        elif question_type == "guess": 
+            try:
+                user_val = float(answer)
+                correct_val = float(question_data['options'][0].get('value', 0))
+                tolerance = float(question_data.get('tolerance', 0))
+                percentage = min(user_val, correct_val) / (max(user_val, correct_val) + 1e-5)
+
+               
+                score_percentage= min(round(percentage, 3), 1.0)
+                if score_percentage>= abs(tolerance/100):
+                    is_correct=True
+                else:
+                    is_correct=False
+
+                print(score_percentage)
+                
+
+            except ValueError:
+                is_correct = False  # falls keine Zahl eingegeben wurde     
+            answer_index = 0 if is_correct else 1
+
 
         # Score berechnen
+        try:
+            if score_percentage==None:
+                score_percentage=1
+        except:
+            score_percentage=1
+
+
         score = 0
         if is_correct:
             base_score = 1000
             time_factor = time_remaining / int(current_question.time_per_question) / 1000
-            score = int(base_score * (0.5 + 0.5 * time_factor))
-        
+            score = int(base_score * (0.75 + 0.25 * time_factor))*score_percentage
+            
         # Antwort speichern oder aktualisieren
         answer_obj, created = QuizAnswer.objects.get_or_create(
             participant=participant,
diff --git a/django/templates/library/detail_quiz.html b/django/templates/library/detail_quiz.html
index 46312f7..111b946 100644
--- a/django/templates/library/detail_quiz.html
+++ b/django/templates/library/detail_quiz.html
@@ -115,6 +115,11 @@
                        class=" mt-1 bg-yellow-100 text-yellow-800 px-4 py-2 rounded-md text-xs lg:text-lg  hover:border-blue-600 border-2">
                         Reihenfolge
                     </a>
+
+                       <a href="{% url 'library:new_question' %}?type=guess&quiz_id={{ quiz.id }}" 
+                       class=" mt-1 bg-pink-100 text-pink-800 px-4 py-2 rounded-md text-xs lg:text-lg  hover:border-blue-600 border-2">
+                        Schätzen
+                    </a>
                     {% endif %}
                 </div>
             </div>
@@ -135,8 +140,8 @@
                             <div class="flex-grow">
                                 <p class="font-medium">{{ question.data.question }}</p>
                                 <div class="mt-1">
-                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {% if question.data.type == 'multiple_choice' %}bg-blue-100 text-blue-800 {% elif question.data.type == 'input' %} bg-green-100 text-green-800 {% elif question.data.type == 'true_false' %}bg-purple-100 text-purple-800{% else %}bg-yellow-100 text-yellow-800{% endif %}">
-                                        {% if question.data.type == 'multiple_choice' %}Multiple Choice{% elif question.data.type == 'input' %}Eingabe{% elif question.data.type == 'true_false' %}Wahr/Falsch{% else %}Reihenfolge{% endif %}
+                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {% if question.data.type == 'multiple_choice' %}bg-blue-100 text-blue-800 {% elif question.data.type == 'input' %} bg-green-100 text-green-800 {% elif question.data.type == 'true_false' %}bg-purple-100 text-purple-800{% elif question.data.type == 'order' %}bg-yellow-100 text-yellow-800{% else %}bg-pink-100 text-pink-800 {% endif %}">
+                                        {% if question.data.type == 'multiple_choice' %}Multiple Choice{% elif question.data.type == 'input' %}Eingabe{% elif question.data.type == 'true_false' %}Wahr/Falsch{% elif question.data.type == 'order' %}Reihenfolge{% else %}Schätzen{% endif %}
                                     </span>
                                 </div>
                                 <div class="mt-2">
@@ -199,6 +204,22 @@
                                     {% if question.image.image.url %}
                                     <img src="{{ question.image.image.url }}" alt="Bild der Frage" class="w-[200px] rounded-lg shadow-md border-blue-600 border-2 rounded-xl shadow-md object-contain mt-4 md:mt-0" />
                                     {% endif %}
+                                </div> 
+                                       {% elif question.data.type == 'guess' %}
+                                    <div class="w-full gap-4 md:flex justify-between ">    
+                                    <ul class="space-y-1 ">
+                                        {% for option in question.data.options %}
+                                            <li class="flex items-center text-sm">
+                                                  <svg class="h-4 w-4 text-green-500 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
+                                                    </svg>
+                                                    <span class="font-medium text-green-700 dark:text-white">{{ option.value }}</span>
+                                            </li>
+                                        {% endfor %}
+                                    </ul>
+                                    {% if question.image.image.url %}
+                                    <img src="{{ question.image.image.url }}" alt="Bild der Frage" class="w-[200px] rounded-lg shadow-md border-blue-600 border-2 rounded-xl shadow-md object-contain mt-4 md:mt-0" />
+                                    {% endif %}
                                 </div> 
                                 {% else %}
                                 <div class="w-full gap-4 md:flex justify-between ">                  
diff --git a/django/templates/library/question/question_guess.html b/django/templates/library/question/question_guess.html
new file mode 100644
index 0000000..5f1fe2d
--- /dev/null
+++ b/django/templates/library/question/question_guess.html
@@ -0,0 +1,150 @@
+{% extends 'base.html' %}
+
+{% block content %}
+<div class="container mx-auto px-4">
+    <div class="flex justify-between items-center mb-6">
+        <h1 class="text-2xl font-bold dark:text-white">{% if question %}Frage bearbeiten{% else %}Neue Schätzfrage{% endif %}</h1>
+        <a href="{% url 'library:detail_quiz' quiz.id %}" 
+           class="bg-gray-100 text-gray-700 px-4 py-2 rounded-md hover:bg-gray-200 transition-colors">
+            Zurück zum Quiz
+        </a>
+    </div>
+
+    <div class="bg-white rounded-lg shadow-md p-6 border-blue-600 border-2 rounded-xl shadow-md dark:bg-transparent dark:text-white">
+        <form method="post" class="space-y-6" enctype="multipart/form-data">
+            {% csrf_token %}
+            
+            <!-- Question Text -->
+            <div>
+                <label for="question" class="block text-sm font-medium text-gray-700 dark:text-white">Frage</label>
+                <div class="mt-1">
+                    <textarea name="question" id="question" rows="4"
+                           class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           required>{{ question.data.question }}</textarea>
+                </div>
+            </div>
+
+            {% if image %}
+            <img src="{{ image.image.url }}" style="max-width: 100px;" alt="Bild der Frage">
+            <label for="reset_image">
+                <input type="checkbox" name="reset_ques_image" id="reset_ques_image">
+                Bild zurücksetzen
+            </label>
+            {% endif %}
+            <div>
+                <label class="font-bold" for="question_image">Bild:</label>
+                <input class="max-w-full bg-blue-200 p-2 m-2 rounded-lg border-2 border-blue-400 dark:bg-transparent" type="file" name="question_image" id="question_image">
+            </div>
+
+            <!-- Eingabe  -->
+            {% if question and question.data.options %}
+            {% for option in question.data.options %}
+            <div> 
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Richtige Antwort</label>
+                <div class="flex space-x-4">
+                    <input name="correct_answer" type="number" value="{{ question.data.correct_answer|default:'' }}" 
+                    class="p-3 dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    required></input>
+            
+                </div>
+                                         <div> 
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Minimale Zahlenauswahl</label>
+                <div class="flex space-x-4">
+                    <input name="min" type="number" value="{{ question.data.min|default:'' }}"
+                    class="p-3 dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    required></input>
+            
+                </div>
+
+                            <div> 
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Maximale Zahlenauswahl</label>
+                <div class="flex space-x-4">
+                    <input name="max" type="number"  value="{{ question.data.max|default:'' }}"
+                    class="p-3 dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    required></input>
+            
+                </div>
+                                            <div> 
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Punkte ab Genauigkeit von ... (in %)</label>
+                <div class="flex space-x-4">
+                    <input name="tolerance" type="number" value="{{ question.data.tolerance|default:'' }}" max="100" min="1" value="75"
+                    class=" p-3 dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    required></input>
+            
+                </div>
+            </div>
+            {% endfor %}
+            {% else %}
+            <div> 
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Richtige Antwort</label>
+                <div class="flex space-x-4">
+                    <input name="correct_answer" type="number" 
+                    class="p-3 dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    required></input>
+            
+                </div>
+                                         <div> 
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Minimale Zahlenauswahl</label>
+                <div class="flex space-x-4">
+                    <input name="min" type="number" value="0"
+                    class="p-3 dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    required></input>
+            
+                </div>
+
+                            <div> 
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Maximale Zahlenauswahl</label>
+                <div class="flex space-x-4">
+                    <input name="max" type="number" 
+                    class="p-3 dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    required></input>
+            
+                </div>
+                                            <div> 
+                <label class="block text-sm font-medium text-gray-700 mb-2 dark:text-white">Punkte ab Genauigkeit von ... (in %)</label>
+                <div class="flex space-x-4">
+                    <input name="tolerance" type="number"  max="100" min="1" value="75"
+                    class=" p-3 dark:bg-[#2a2f3a] focus:outline-none focus:ring-2 shadow-sm focus:ring-blue-500 focus:border-blue-500 flex-grow sm:text-sm border-gray-300 rounded-md"
+                    required></input>
+            
+                </div>
+
+
+
+            </div>
+            {% endif %}
+           
+
+            <div class="p-4">
+                <label class="font-bold" for="time_per_question">Zeit pro Frage:</label>
+                <select name="time_per_question" id="time_per_question" class="dark:text-white dark:bg-[#2a2f3a]  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                    <option value="10" {% if standard_time_per_question == "10" or time_per_question == "10" %}selected{% endif %}>10 Sekunden</option>
+                    <option value="20" {% if standard_time_per_question == "20" or time_per_question == "20" %}selected{% endif %}>20 Sekunden</option>
+                    <option value="30" {% if standard_time_per_question == "30" or time_per_question == "30" %}selected{% endif %}>30 Sekunden</option>
+                    <option value="45" {% if standard_time_per_question == "45" or time_per_question == "45" %}selected{% endif %}>45 Sekunden</option>
+                    <option value="60" {% if standard_time_per_question == "60" or time_per_question == "60" %}selected{% endif %}>1 Minute</option>
+                    <option value="120" {% if standard_time_per_question == "120" or time_per_question == "120" %}selected{% endif %}>2 Minuten</option>
+                    <option value="300" {% if standard_time_per_question == "300" or time_per_question == "300" %}selected{% endif %}>5 Minuten</option>
+                </select>
+            </div>
+                                       <label for="credits" class="block text-sm font-medium text-gray-700 dark:text-white">Credits</label>
+                <div class="mt-1">
+                    <textarea name="credits" rows="4"
+                           class="dark:bg-[#2a2f3a] shadow-sm  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
+                           >{{ credits }}</textarea>
+                </div>
+
+            <div class="flex justify-end space-x-3 mt-6">
+                <a href="{% url 'library:detail_quiz' quiz.id %}" 
+                   class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    Abbrechen
+                </a>
+                <button type="submit" 
+                        class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
+                    Speichern
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+{% endblock %}
diff --git a/django/templates/play/game/question_host.html b/django/templates/play/game/question_host.html
index 02bd1d6..71fdf17 100644
--- a/django/templates/play/game/question_host.html
+++ b/django/templates/play/game/question_host.html
@@ -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 %}
 
 
diff --git a/django/templates/play/game/question_participant.html b/django/templates/play/game/question_participant.html
index fdfe94b..b2d8e5d 100644
--- a/django/templates/play/game/question_participant.html
+++ b/django/templates/play/game/question_participant.html
@@ -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 %}
diff --git a/django/templates/play/game/score_overview.html b/django/templates/play/game/score_overview.html
index f93d05c..8a6fa75 100644
--- a/django/templates/play/game/score_overview.html
+++ b/django/templates/play/game/score_overview.html
@@ -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>
-- 
2.49.1