fix: quiz form

quiz/models.py

@@ -423,7 +423,7 @@ class MCQuestion(Question):
 
     def order_choices(self, queryset):
         if self.choice_order == "content":
-            return queryset.order_by("choice")
+            return queryset.order_by("choice_text")
         elif self.choice_order == "random":
             return queryset.order_by("?")
         else:

quiz/views.py

@@ -246,12 +246,15 @@ class QuizTake(FormView):
                 "You have already completed this quiz. Only one attempt is permitted.",
             )
             return redirect("quiz_index", slug=self.course.slug)
+
+        # Set self.question and self.progress here
+        self.question = self.sitting.get_first_question()
+        self.progress = self.sitting.progress()
+
         return super().dispatch(request, *args, **kwargs)
 
     def get_form_kwargs(self):
         kwargs = super().get_form_kwargs()
-        self.question = self.sitting.get_first_question()
-        self.progress = self.sitting.progress()
         kwargs["question"] = self.question
         return kwargs
 
@@ -292,6 +295,10 @@ class QuizTake(FormView):
         self.sitting.add_user_answer(self.question, guess)
         self.sitting.remove_first_question()
 
+        # Update self.question and self.progress for the next question
+        self.question = self.sitting.get_first_question()
+        self.progress = self.sitting.progress()
+
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context["question"] = self.question

static/scss/style.scss

@@ -690,7 +690,7 @@ a {
 }
 
 .progress-bar {
-  animation: loader-bar ease-in-out 7s forwards;
+  animation: loader-bar ease-in-out 3s forwards;
 }
 @keyframes loader-bar {
   0%,
@@ -1301,3 +1301,7 @@ video {
   box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.16),
     0px 2px 10px 0px rgba(0, 0, 0, 0.12);
 }
+
+.breadcrumb-item a {
+  color: var(--bs-primary);
+}

templates/quiz/correct_answer.html

@@ -1,19 +1,12 @@
 {% load i18n %}
 {% if previous.answers %}
-
-  {% if user_was_incorrect %}
-    <div class="alert alert-error">
-  	  <strong>{% trans "You answered the above question incorrectly" %}</strong>
-    </div>
-  {% endif %}
-
   <table class="table table-striped table-bordered">
     <tbody>
   	  {% for answer in previous.answers %}
         {% if answer.correct %}
   	    <tr class="success">
   		  <td>{{ answer }}</td>
-  		  <td><strong>{% trans "This is the correct answer" %}</strong></td>
+  		  <td class="text-success"><strong>{% trans "This is the correct answer" %}</strong></td>
 		</tr>
         {% else %}
   		<tr>
@@ -30,4 +23,10 @@
   	{% endfor %}
     </tbody>
   </table>
+
+  {% if user_was_incorrect %}
+    <div class="text-danger">
+  	  <strong>{% trans "You answered the above question incorrectly" %}</strong>
+    </div>
+  {% endif %}
 {% endif %}

templates/quiz/mcquestion_form.html

@@ -28,7 +28,7 @@
 {% endif %}
 
 <div class="container">
-    <div class="info-text bg-orange mb-3">{{ quizQuestions }} {% trans 'question added' %}</div>
+    <div class="mb-3 bg-secondary text-light py-1 px-3">{{ quiz_questions_count }} {% trans 'question added' %}</div>
 
     <form action="#" method="POST">{% csrf_token %}
         {% if form.errors %}<p class="alert alert-danger">{% trans 'Correct the error(s) below.' %}</p>{% endif %}

templates/quiz/question.html

@@ -33,7 +33,7 @@
 	{% else %}
 		<div class="alert alert-warning">
 	{% endif %}
-		<p><small>
+		<p class="mb-0"><small>
 			{% trans "Your answer was" %} </small>
 			<strong>
 			{{ previous.previous_outcome|yesno:"correct,incorrect" }}
@@ -44,20 +44,13 @@
 		
         {% load i18n %}
         {% if previous.answers %}
-
-          {% if user_was_incorrect %}
-            <div class="alert alert-error">
-              <strong>{% trans "You answered the above question incorrectly" %}</strong>
-            </div>
-          {% endif %}
-
           <table class="table table-striped table-bordered">
             <tbody>
               {% for answer in previous.answers %}
                 {% if answer.correct %}
                   <tr class="success">
                     <td>{{ answer }}</td>
-                  <td><strong>{% trans "This is the correct answer" %}</strong></td>
+                  <td class="text-success"><strong>{% trans "This is the correct answer" %}</strong></td>
 				  </tr>
                 {% else %}
                   <tr>
@@ -74,6 +67,13 @@
               {% endfor %}
             </tbody>
           </table>
+
+          {% if user_was_incorrect %}
+            <div class="text-danger">
+              <strong>{% trans "You answered the above question incorrectly" %}</strong>
+            </div>
+          {% endif %}
+
         {% endif %}
 		
 

templates/quiz/quiz_list.html

@@ -65,10 +65,10 @@
                             <button class="btn btn-sm p-0 ms-2" type="button" data-bs-toggle="dropdown"><i class="fas fa-ellipsis-v m-0"></i></button>
                             <div class="dropdown-menu" aria-labelledby="dropdown01">
                                 <div class="dropdown-item">
-                                    <a href="{% url 'quiz_update' slug=course.slug pk=quiz.id %}" class="update"><i class="fas fa-pencil-alt"></i>{% trans 'Edit' %}</a>
+                                    <a href="{% url 'quiz_update' slug=course.slug pk=quiz.id %}" class="update"><i class="unstyled me-2 fas fa-pencil-alt"></i>{% trans 'Edit' %}</a>
                                 </div>
                                 <div class="dropdown-item">
-                                    <a href="{% url 'quiz_delete' slug=course.slug pk=quiz.id %}" class="delete"><i class="fas fa-trash-alt"></i>{% trans 'Delete' %}</a>
+                                    <a href="{% url 'quiz_delete' slug=course.slug pk=quiz.id %}" class="delete"><i class="unstyled me-2 fas fa-trash-alt"></i>{% trans 'Delete' %}</a>
                                 </div>
                             </div>
                         </div>
@@ -96,6 +96,6 @@
         document.getElementById('progress-card').style.display = 'none';
         document.getElementById('progress-main').style.display = 'block';
         clearInterval(timer)
-    }, 8000);           
+    }, 4000);           
 </script>
 {% endblock js %}

templates/quiz/result.html

@@ -35,7 +35,7 @@
     <div class="card bg-white p-3">
         <p class="muted"><small>{% trans "The previous question" %}:</small></p>
         <p>{{ previous.previous_question }}</p>
-        <p>Your answer was
+        <p class="mb-0">Your answer was
         <strong>
             {{ previous.previous_outcome|yesno:"correct,incorrect" }}
         </strong>
@@ -43,20 +43,13 @@
 
         {% load i18n %}
         {% if previous.answers %}
-
-          {% if user_was_incorrect %}
-            <div class="alert alert-error">
-              <strong>{% trans "You answered the above question incorrectly" %}</strong>
-            </div>
-          {% endif %}
-
           <table class="table table-striped table-bordered">
             <tbody>
               {% for answer in previous.answers %}
                 {% if answer.correct %}
                   <tr class="success">
                     <td>{{ answer }}</td>
-                  <td><strong>{% trans "This is the correct answer" %}</strong></td>
+                  <td class="text-success"><strong>{% trans "This is the correct answer" %}</strong></td>
                   </tr>
                 {% else %}
                   <tr>
@@ -73,6 +66,13 @@
               {% endfor %}
             </tbody>
           </table>
+
+          {% if user_was_incorrect %}
+            <div class="text-danger">
+              <strong>{% trans "You answered the above question incorrectly" %}</strong>
+            </div>
+          {% endif %}
+
         {% endif %}
 
         <p><strong>{% trans "Explanation" %}:</strong></p>
@@ -159,7 +159,7 @@
     {% correct_answer_for_all question %}
     
     {% if question.user_answer %}
-    <p>{% trans "Your answer" %}: {{ question|answer_choice_to_string:question.user_answer }}</p>
+    <p><span class="bg-secondary px-3 py-1 text-light">{% trans "Your answer" %}: {{ question|answer_choice_to_string:question.user_answer }}</span></p>
     {% endif %}
 
     <hr>