update

quiz/templates/index.html

@@ -2,7 +2,10 @@
 
 {% block content %}
 <style>
-    .filter-section { margin-bottom: 20px; }
+    .filter-section {
+        margin-bottom: 20px;
+    }
+
     .tag-chip {
         display: inline-block;
         padding: 5px 12px;
@@ -14,13 +17,16 @@
         font-size: 14px;
         transition: background 0.2s;
     }
+
     .tag-chip.active {
         background: #4CAF50;
         color: white;
     }
+
     .tag-chip:hover {
         background: #d5d5d5;
     }
+
     .tag-chip.active:hover {
         background: #45a049;
     }
@@ -29,18 +35,19 @@
 <h1>Quiz Application</h1>
 
 <div class="filter-section">
+    <a href="{% url 'create_quiz' %}" class="tag-chip" style="background: #2196F3; color: white;">+ New Quiz</a>
     <a href="?tag=" class="tag-chip {% if not current_tag %}active{% endif %}">All</a>
     {% for tag in tags %}
-        <a href="?tag={{ tag.slug }}" class="tag-chip {% if current_tag == tag.slug %}active{% endif %}">
-            {{ tag.name }}
-        </a>
+    <a href="?tag={{ tag.slug }}" class="tag-chip {% if current_tag == tag.slug %}active{% endif %}">
+        {{ tag.name }}
+    </a>
     {% endfor %}
 </div>
 
 <div class="progress">
-    <div class="progress-bar" style="width: {% if total_questions > 0 %}{{ answered_count|floatformat:0 }}{% else %}0{% endif %}%"></div>
+    <div class="progress-bar"
+        style="width: {% if total_questions > 0 %}{{ answered_count|floatformat:0 }}{% else %}0{% endif %}%"></div>
 </div>
 <p>Besvarade frågor: {{ answered_count }} / {{ total_questions }}</p>
 <div id="quiz-container" hx-get="{% url 'next_question' %}" hx-trigger="load"></div>
-{% endblock %}
-
+{% endblock %}