From 16471141b2fa785655641becaa20c0b5ba4e3721 Mon Sep 17 00:00:00 2001
From: ben8 <ben_ollech@outlook.com>
Date: Fri, 13 Jun 2025 17:29:43 +0200
Subject: [PATCH] pictures_and_numbers(detail_quiz)#132

---
 django/templates/library/detail_quiz.html | 31 ++++++++++++++++++++---
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/django/templates/library/detail_quiz.html b/django/templates/library/detail_quiz.html
index 5e139d7..ca00726 100644
--- a/django/templates/library/detail_quiz.html
+++ b/django/templates/library/detail_quiz.html
@@ -88,7 +88,9 @@
     <div class="bg-white rounded-lg shadow-md border-blue-600 border-2 rounded-xl shadow-md">
         <div class="border-b border-gray-200 p-4">
             <div class="flex justify-between items-center flex-wrap">
-                <h2 class="text-xl font-semibold">Fragen</h2>
+                <h2 class="text-xl font-semibold">Fragen
+                    {% for question in questions %}{% if forloop.last %}({{ forloop.counter }}) {% endif %} {% endfor %}
+                </h2>
                 <div class="flex space-x-2 flex-wrap">
                     {% if quiz.user_id == request.user %}
                     <a href="{% url 'library:new_question' %}?type=input&quiz_id={{ quiz.id }}" 
@@ -119,7 +121,10 @@
             <div class="divide-y divide-gray-200">
                 {% for question in questions %}
                 
+
+                
                     <div class="w-full rounded-xl p-4 hover:bg-gray-50">
+                        <p>{{ forloop.counter }}.</p>
                         {% if quiz.user_id == request.user %} <a class="block flex h-full w-full" href="{% url 'library:edit_question' question.id %}" > {% endif %}
                         <div class="flex justify-between items-start">
                             
@@ -134,9 +139,13 @@
                                     {% if detail %}
 
                                     {% if question.data.type == 'multiple_choice' %}
+                                    <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">
+                                               
                                                 {% if option.is_correct %}
                                                     <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"/>
@@ -149,9 +158,15 @@
                                                     <span class="text-gray-600">{{ option.value }}</span>
                                                 {% endif %}
                                             </li>
-                                        {% endfor %}
+                                        {% 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>  
+                                 
                                     {% elif question.data.type == 'input' %}
+                                    <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">
@@ -162,8 +177,12 @@
                                             </li>
                                         {% endfor %}
                                     </ul>
-                                
-                                {% else %}              
+                                    {% 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 ">                  
                                 {% for option in question.data.options %}
                                     {% if option.is_correct %}
                                     <p class="text-sm">
@@ -172,6 +191,10 @@
                                 </p>
                                     {% endif %}
                             {% endfor %}
+                                    {% 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>
                             
                                 {% endif %}