Improve quiz form

quiz/models.py

@@ -55,7 +55,7 @@ class Quiz(models.Model):
     description = models.TextField(
         verbose_name=_("Description"),
         blank=True,
-        help_text=_("a description of the quiz"),
+        help_text=_("A detailed description of the quiz"),
     )
     category = models.TextField(choices=CATEGORY_OPTIONS, blank=True)
     random_order = models.BooleanField(
@@ -442,7 +442,11 @@ class Sitting(models.Model):
 class Question(models.Model):
     quiz = models.ManyToManyField(Quiz, verbose_name=_("Quiz"), blank=True)
     figure = models.ImageField(
-        upload_to="uploads/%Y/%m/%d", blank=True, null=True, verbose_name=_("Figure")
+        upload_to="uploads/%Y/%m/%d",
+        blank=True,
+        null=True,
+        verbose_name=_("Figure"),
+        help_text=_("Add an image for the question if it's necessary."),
     )
     content = models.CharField(
         max_length=1000,

static/css/style.css

@@ -212,7 +212,6 @@ a.text-orange:hover {
 
 .quiz-wrapper {
   text-align: center;
-  overflow: hidden;
   border-radius: 0.3em;
   background: #fff;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);

static/css/style.scss

@@ -249,7 +249,6 @@ a.text-orange:hover {
 }
 .quiz-wrapper {
   text-align: center;
-  overflow: hidden;
   border-radius: 0.3em;
   background: #fff;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);

templates/course/course_add.html

@@ -7,7 +7,7 @@
 <div id="input-nav"><a href="{% url 'home' %}" class="primary1">Home</a>
     <a href="{% url 'programs' %}" class="primary1">Programs</a> Add & Update Course</div>
 
-<div class="title-1">Course Add & Update Form</div>
+<div class="title-1">Course Add &amp; Update Form</div>
 <br>
 <br>
 {% if messages %}

templates/quiz/mcquestion_form.html

@@ -1,4 +1,5 @@
 {% extends 'base.html' %}
+{% load crispy_forms_tags %}
 
 {% block content %}
 
@@ -10,7 +11,7 @@
 
 <div class="container">
 
-    <div class="header-title-xl text-center mt-4">Questions form for {{ quiz_obj }}</div>
+    <div class="header-title-md text-center mt-4">Add questions [{{ quiz_obj }}]</div>
     <div class="title-line mb-5"></div>
 
     <div class="info-text bg-orange mb-3">{{ quizQuestions }} question added</div>
@@ -19,35 +20,25 @@
         {% if form.errors %}<p class="alert alert-danger">Correct the error(s) below.</p>{% endif %}
         <div class="row">
             <div class="col mx-3 py-4 border bg-white">
-                <div class="form-group" hidden>
+                <div class="mb-2" hidden>
-                    <label for="title">{{ form.quiz.label }}</label> {{ form.quiz }}
+                    {{ form.quiz }}
-                    <span class="danger">{{ form.quiz.errors }}</span>
-                    <small class="d-block text-muted">Hold down "Control", or "Command" on a Mac, to select more than one.</small>
                 </div>
-                <div class="form-group">
+                <div class="mb-2">
-                    <label for="content">{{ form.content.label }}</label> {{ form.content }}
+                    {{ form.content|as_crispy_field }}
-                    <span class="danger">{{ form.content.errors }}</span>
-                    <small class="d-block text-muted">Enter the question text that you want displayed.</small>
                 </div>
-                <div class="form-group">
+                <div class="mb-2">
-                    <label for="figure">{{ form.figure.label }}</label> {{ form.figure }}
+                    {{ form.figure|as_crispy_field }}
-                    <span class="danger">{{ form.figure.errors }}</span>
-                    <small class="d-block text-muted">Add an image for the question if it's necessary.</small>
                 </div>
-                <div class="form-group">
+                <div class="mb-2">
-                    <label for="explanation">{{ form.explanation.label }}</label> {{ form.explanation }}
+                    {{ form.explanation|as_crispy_field }}
-                    <span class="danger">{{ form.explanation.errors }}</span>
-                    <small class="d-block text-muted">Explanation to be shown after the question has been answered.</small>
                 </div>
             </div>
             <div class="col mx-3 py-4 border bg-white">
-                <div class="form-group">
+                <div class="mb-2">
-                    <label for="choice_order">{{ form.choice_order.label }}</label> {{ form.choice_order }}
+                    {{ form.choice_order|as_crispy_field }}
-                    <span class="danger">{{ form.choice_order.errors }}</span>
-                    <small class="d-block text-muted">The order in which multichoice choice options are displayed to the user.</small>
                 </div>
-                <div class="border py-3">
+                <div class="border p-2">
-                    <div class="lead text-center">Choices</div>
+                    <label class="lead">Choices</label>
                 {{ formset.management_form }}
                 {% for fs in formset %}
                     <label for="username">{{ fs.label }}</label>
@@ -70,92 +61,7 @@
             </button>
             <button class="btn btn-lg btn-primary my-4" type="submit">Save</button>
         </center>
-
-        <!-- <h3>FormSet example</h3>
-        {{ myformset.management_form }}
-        <div id="form_set">
-            {% for form in myformset.forms %}
-                {{form.non_field_errors}}
-                {{form.errors}}
-                <table class='no_error'>
-                    {{ form }}
-                </table>
-            {% endfor %}
-        </div>
-        <input type="button" value="Add More" id="add_more">
-        <div id="empty_form" style="display:none">
-            <table class='no_error'>
-                {{ myformset.empty_form }}
-            </table>
-        </div> -->
-
     </form>
-
-    <!-- <form method="POST" action="">{% csrf_token %}
-        {% if form.errors %}<h1>Error {{ formset.errors }}</h1>{% endif %}
-        {{ formset.management_form }}
-        {% for form in formset.forms %}
-            {{form.non_field_errors}}
-            {{form.errors}}
-            <table class='no_error'>
-                {{ form }}
-            </table>
-        {% endfor %}
-        {% if formset.errors %}<h1>Formset error</h1>{% endif %}
-        <input type="button" value="Add More" id="add_more">
-        <div id="empty_form" style="display:none">
-            <table class='no_error'>
-                {{ formset.empty_form }}
-            </table>
-        </div>
-    </form> -->
-    
-    <!-- <div class="body">
-        {{ formset.management_form }}
-        {{ formset.non_form_errors }}
-        {% for form in formset.forms %}
-        <div class="inline-form prefix">
-            {{ form }}
-        </div>
-        {% endfor %}
-        <div class="new-inline">
-            <input type="button" class="add-inline" value="Add another form" />
-        </div>
-    </div> -->
-
 </div>
 
 {% endblock %}
-
-<!-- {% block js %}
-<script>
-    function add_inline_form(prefix) {
-        var count = parseInt($('#id_' + prefix + '-TOTAL_FORMS').val(), 10);
-        var last_form = $('.' + prefix + ':last');
-
-        var new_form = last_form.clone(false).html(last_form.html().replace(
-            new RegExp(prefix + '-\\\\d-', 'g'), prefix + '-' + count + '-'));
-        new_form.find('input[type="text"], textarea').each(function () {
-            $(this).val('');
-        });
-        new_form.hide().insertAfter(last_form).slideDown(300);
-
-        // Update the total form count
-        $('#id_' + prefix + '-TOTAL_FORMS').val(count + 1);
-
-        // re-initialise triggers
-
-        return false;
-    }
-
-    var regex = /(?:inline\-form) ([\\w\-]*) (?:add|existing)/;
-    $('.add-inline').each(function () {
-        var match = regex.exec($(this).closest('.body').find('.inline-form').attr('class'));
-        if (match && match.length > 1) {
-            $(this).click(function () {
-                return add_inline_form(match[1]);
-            });
-        }
-    });
-</script>
-{% endblock js %} -->

templates/quiz/quiz_form.html

@@ -1,4 +1,5 @@
 {% extends 'base.html' %}
+{% load crispy_forms_tags %}
 
 {% block content %}
 
@@ -12,125 +13,33 @@
     <div class="header-title-xl text-center">Quiz form for {{ course }}</div>
     <div class="title-line mb-5"></div>
 
-    <!-- <form method="POST" action="">{% csrf_token %}
-        <div class="card p-4">
-            {% for f in form %}
-            <label for="{{ f.label }}">{{ f.label }}</label>{{ f }}
-            {% endfor %}
-            <button class="btn btn-primary" type="submit">Save</button>
-        </div>
-    </form> -->
-    <!-- <form action="" method="POST">{% csrf_token %}
-        <div class="row">
-            <div class="col mx-3 p-3 bg-white">
-                <div class="container">
-                    <div class="form-group">
-                        <label for="course">{{ form.course.label }}</label> {{ form.course }}
-                        <span class="danger">{{ form.course.errors }}</span>
-                    </div>
-                    <div class="form-group">
-                        <label for="title">{{ form.title.label }}</label> {{ form.title }}
-                        <span class="danger">{{ form.title.errors }}</span>
-                    </div>
-                    <div class="form-group">
-                        <label for="category">{{ form.category.label }}</label> {{ form.category }}
-                        <span class="danger">{{ form.category.errors }}</span>
-                    </div>
-                    <div class="form-group">
-                        <label for="max_questions">{{ form.max_questions.label }}</label> {{ form.max_questions }}
-                        <span class="danger">{{ form.max_questions.errors }}</span>
-                        <small class="d-block text-muted">Number of questions to be answered on each attempt.</small>
-                    </div>
-                    <div class="form-group">
-                        <label for="pass_mark">{{ form.pass_mark.label }}</label> {{ form.pass_mark }}
-                        <span class="danger">{{ form.pass_mark.errors }}</span>
-                        <small class="d-block text-muted">Percentage required to pass exam.</small>
-                    </div>
-                    <div class="form-group">
-                        <label for="description">{{ form.description.label }}</label> {{ form.description }}
-                        <span class="danger">{{ form.description.errors }}</span>
-                        <small class="d-block text-muted">a description of the quiz</small>
-                    </div>
-                </div>
-            </div>
-            <div class="col mx-3 p-3 bg-white">
-                <div class="container">
-                    <div class="form-group">
-                        <label for="questions">{{ form.questions.label }}</label> {{ form.questions }}
-                        <span class="danger">{{ form.questions.errors }}</span>
-                        <small class="d-block text-muted">Hold down "Control", or "Command" on a Mac, to select more than one.</small>
-                    </div>
-                    <div class="form-group">
-                        <label for="random_order">{{ form.random_order.label }}</label> {{ form.random_order }}
-                        <span class="danger">{{ form.random_order.errors }}</span>
-                        <small class="d-block text-muted">Display the questions in a random order or as they are set?</small>
-                    </div>
-                    <div class="form-group">
-                        <label for="answers_at_end">{{ form.answers_at_end.label }}</label> {{ form.answers_at_end }}
-                        <span class="danger">{{ form.answers_at_end.errors }}</span>
-                        <small class="d-block text-muted">Correct answer is NOT shown after question. Answers displayed at the end.</small>
-                    </div>
-                    <div class="form-group">
-                        <label for="exam_paper">{{ form.exam_paper.label }}</label> {{ form.exam_paper }}
-                        <span class="danger">{{ form.exam_paper.errors }}</span>
-                        <small class="d-block text-muted">If yes, the result of each attempt by a user will be stored. Necessary for marking.</small>
-                    </div>
-                    <div class="form-group">
-                        <label for="single_attempt">{{ form.single_attempt.label }}</label> {{ form.single_attempt }}
-                        <span class="danger">{{ form.single_attempt.errors }}</span>
-                        <small class="d-block text-muted">If yes, only one attempt by a user will be permitted. Non users cannot sit this exam.</small>
-                    </div>
-                    <div class="form-group">
-                        <label for="draft">{{ form.draft.label }}</label> {{ form.draft }}
-                        <span class="danger">{{ form.draft.errors }}</span>
-                        <small class="d-block text-muted">If yes, the quiz is not displayed in the quiz list and can only be taken by users who can edit quizzes.</small>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <center>
-            <button class="btn btn-primary my-4" type="submit">Save & Continue</button>
-        </center>
-    </form> -->
-
     <form action="" method="POST">{% csrf_token %}
         <div class="row">
             <div class="col-md-6">
                 <div class="card p-2">
                 <!-- <div class="container"> -->
-                    <div class="form-group" hidden>
+                    <div class="mb-2" hidden>
                         <label for="course">{{ form.course.label }}</label><br> {{ form.course }}
                         <span class="danger">{{ form.course.errors }}</span>
                         <span class="danger">{{ form.course.errors }}</span>
                     </div>
-                    <div class="form-group">
+                    <div class="mb-2">
-                        <label for="category">{{ form.category.label }}</label> {{ form.category }}
+                        {{ form.category|as_crispy_field }}
-                        <span class="danger">{{ form.category.errors }}</span>
                     </div>
-                    <div class="form-group">
+                    <div class="mb-2">
-                        <label for="title">{{ form.title.label }}</label>
+                        {{ form.title|as_crispy_field }}
-                        {{ form.title }}
-                        <!-- <input type="text" name="title" value="{{ form.title }}" maxlength="60" required id="id_title" class="form-control"> -->
                     </div>
-                    <!-- <div class="form-group">
+                    <!-- <div class="mb-2">
                         <label for="max_questions">{{ form.max_questions.label }}</label>
                         <input class="form-control" type="number" name="max_questions" min="0" id="id_max_questions">
                         <span class="danger">{{ form.max_questions.errors }}</span>
                         <small class="d-block text-muted">Number of questions to be answered on each attempt.</small>
                     </div> -->
-                    <div class="form-group">
+                    <div class="mb-2">
-                        <label for="pass_mark">{{ form.pass_mark.label }}</label>
+                        {{ form.pass_mark|as_crispy_field }}
-                        {{ form.pass_mark }}
-                        <!-- <input class="form-control" type="number" name="pass_mark" value="50" id="id_pass_mark"> -->
-                        <span class="danger">{{ form.pass_mark.errors }}</span>
-                        <small class="d-block text-muted">Percentage required to pass exam.</small>
                     </div>
-                    <div class="form-group">
+                    <div class="mb-2">
-                        <label for="description">{{ form.description.label }}</label><br>
+                        {{ form.description|as_crispy_field }}
-                        {{ form.description }}
-                        <!-- <textarea name="description" class="form-control" id="id_description"></textarea> -->
-                        <span class="danger">{{ form.description.errors }}</span>
-                        <small class="d-block text-muted">a description of the quiz</small>
                     </div>
                 <!-- </div> -->
                 </div>
@@ -138,52 +47,32 @@
             <div class="col-md-6">
                 <div class="card p-3">
                 <!-- <div class="container"> -->
-                    <div class="form-group" hidden>
+                    <div class="mb-2" hidden>
                         <label for="questions">{{ form.questions.label }}</label><br> {{ form.questions }}
                         <span class="danger">{{ form.questions.errors }}</span>
                         <small class="d-block text-muted">Hold down "Control", or "Command" on a Mac, to select more than one.</small>
                     </div>
-                    <div class="form-group">
+                    <div class="mb-2">
-                        <label for="random_order">{{ form.random_order.label }}</label>
+                        {{ form.random_order|as_crispy_field }}
-                        {{ form.random_order }}
-                        <!-- <input class="custom-checkbox" type="checkbox" name="random_order" id="id_random_order"> -->
-                        <span class="danger">{{ form.random_order.errors }}</span>
-                        <small class="d-block text-muted">Display the questions in a random order or as they are set?</small>
                     </div>
-                    <div class="form-group">
+                    <div class="mb-2">
-                        <label for="answers_at_end">{{ form.answers_at_end.label }}</label>
+                        {{ form.answers_at_end|as_crispy_field }}
-                        {{ form.answers_at_end }}
-                        <!-- <input class="custom-checkbox" type="checkbox" name="answers_at_end" id="id_answers_at_end"> -->
-                        <span class="danger">{{ form.answers_at_end.errors }}</span>
-                        <small class="d-block text-muted">Correct answer is NOT shown after question. Answers displayed at the end.</small>
                     </div>
-                    <div class="form-group">
+                    <div class="mb-2">
-                        <label for="exam_paper">{{ form.exam_paper.label }}</label>
+                        {{ form.exam_paper|as_crispy_field }}
-                        {{ form.exam_paper }}
-                        <!-- <input class="custom-checkbox" type="checkbox" name="exam_paper" id="id_exam_paper"> -->
-                        <span class="danger">{{ form.exam_paper.errors }}</span>
-                        <small class="d-block text-muted">If yes, the result of each attempt by a user will be stored. Necessary for marking.</small>
                     </div>
-                    <div class="form-group">
+                    <div class="mb-2">
-                        <label for="single_attempt">{{ form.single_attempt.label }}</label>
+                        {{ form.single_attempt|as_crispy_field }}
-                        {{ form.single_attempt }}
-                        <!-- <input class="custom-checkbox" type="checkbox" name="single_attempt" id="id_single_attempt"> -->
-                        <span class="danger">{{ form.single_attempt.errors }}</span>
-                        <small class="d-block text-muted">If yes, only one attempt by a user will be permitted. Non users cannot sit this exam.</small>
                     </div>
-                    <div class="form-group">
+                    <div class="mb-2">
-                        <label for="draft">{{ form.draft.label }}</label>
+                        {{ form.draft|as_crispy_field }}
-                        {{ form.draft }}
-                        <!-- <input class="custom-checkbox" type="checkbox" name="draft" id="id_draft"> -->
-                        <span class="danger">{{ form.draft.errors }}</span>
-                        <small class="d-block text-muted">If yes, the quiz is not displayed in the quiz list and can only be taken by users who can edit quizzes.</small>
                     </div>
                 <!-- </div> -->
                 </div>
             </div>
         </div>
         <center>
-            <button class="btn btn-lg btn-primary my-4" id="{% if form.is_valid %}btn-transition{% endif %}" type="submit">Save & Continue</button>
+            <button class="btn btn-lg btn-primary my-4" id="{% if form.is_valid %}btn-transition{% endif %}" type="submit">Save &amp; Continue</button>
         </center>
     </form>
 </div>

templates/quiz/quiz_list.html

@@ -27,7 +27,7 @@
 
     <style>.bg-light-warning{background-color: rgb(252, 217, 111) !important;}</style>
 
-    <div class="header-title-xl text-center">Quiz list of {{ course }}</div>
+    <div class="header-title-md text-center">Quizzes [{{ course }}]</div>
     <div class="title-line mb-5"></div>
 
     {% if request.user.is_superuser or request.user.is_lecturer %}
@@ -38,22 +38,9 @@
         {% for quiz in quizzes %}
         <div class="col-md-4 mb-4 mx-auto text-center">
             <div class="card p-2 quiz-wrapper">
-                {% if request.user.is_superuser or request.user.is_lecturer %}
+                <div class="d-flex justify-content-between align-items-center text-success mb-4">
-                <div class="update-delete-wrapper">
+                    <em class="text-left">{{ quiz.category|title }} Quiz</em>
-                    <div class="navbar">
+                    <div class="text-right info-text bg-danger" style="border-bottom-right-radius: 1px; border-top-right-radius: 1px;">
-                        <li class="dropdown">
-                            <a class="dropdown-toggle-split" href="#" id="dropdown01" data-toggle="dropdown"><i class="fas fa-ellipsis-v text-white"></i></a>
-                            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdown01">
-                                <a href="{% url 'quiz_update' slug=course.slug pk=quiz.id %}" class="update"><i class="fas fa-pencil-alt"></i> Edit</a>
-                                <a href="{% url 'quiz_delete' slug=course.slug pk=quiz.id %}" class="delete"><i class="fas fa-trash-alt"></i> Delete</a>
-                            </div>
-                        </li>
-                    </div>
-                </div>
-                {% endif %}
-                <div class="row text-success mb-4">
-                    <em class="col-6 text-left">{{ quiz.category|title }} Quiz</em>
-                    <div class="col-6 text-right info-text bg-danger" style="border-bottom-right-radius: 1px; border-top-right-radius: 1px;">
                         {{ quiz.get_questions.count }} Questions
                     </div>
                 </div>
@@ -71,7 +58,19 @@
                     <small class="col-6 text-left">{% trans "Category" %}: <b>{{ quiz.category }}</b></small>
                     <small class="col-6 text-right">Time set: <b>1:30</b></small>
                 </div> -->
+                <div class="d-flex">
                     <a class="btn btn-block btn-secondary" href="{% url 'quiz_take' pk=course.pk slug=quiz.slug %}">{% trans "Start quiz" %} &raquo;</a>
+
+                    {% if request.user.is_superuser or request.user.is_lecturer %}
+                        <li class="dropdown">
+                            <a class="btn btn-default bg-light ml-2" href="#" id="dropdown01" data-toggle="dropdown"><i class="fas fa-ellipsis-v m-0"></i></a>
+                            <div class="dropdown-menu dropdown-menu-top-left" aria-labelledby="dropdown01">
+                                <a href="{% url 'quiz_update' slug=course.slug pk=quiz.id %}" class="update"><i class="fas fa-pencil-alt"></i> Edit</a>
+                                <a href="{% url 'quiz_delete' slug=course.slug pk=quiz.id %}" class="delete"><i class="fas fa-trash-alt"></i> Delete</a>
+                            </div>
+                        </li>
+                    {% endif %}
+                </div>
             </div>
         </div>
         {% if forloop.counter|divisibleby:3 %}</div><div class="row">{% endif %}