added jquery datatable in quiz list

Author: suhailvs

django_school/classroom/migrations/0004_auto_20200418_1555.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.0.4 on 2020-04-18 15:55
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+ dependencies = [
+ ('classroom', '0003_auto_20191008_0704'),
+ ]
+
+ operations = [
+ migrations.AlterField(
+ model_name='question',
+ name='text',
+ field=models.TextField(verbose_name='Question'),
+ ),
+ ]

django_school/classroom/models.py

@@ -33,7 +33,7 @@ def __str__(self):
 
 class Question(models.Model):
  quiz = models.ForeignKey(Quiz, on_delete=models.CASCADE, related_name='questions')
- text = models.CharField('Question', max_length=255)
+ text = models.TextField('Question')
 
  def __str__(self):
  return self.text

django_school/classroom/templates/classroom/students/quiz_list.html

@@ -1,33 +1,48 @@
 {% extends 'base.html' %}
+{% load static %}
+
+{% block css %}
+<link rel="stylesheet" type="text/css" href="{% static 'datatables/dataTables.bootstrap4.min.css' %}">
+{% endblock %}
 
 {% block content %}
  {% include 'classroom/students/_header.html' with active='new' %}
- <div class="card">
- <table class="table mb-0">
- <thead>
+ 
+ <table class="table table-striped table-bordered mb-0" id="tb_quizlist" >
+ <thead>
+ <tr>
+ <th>Quiz</th>
+ <th class="d-none d-sm-table-cell">Subject</th>
+ <th class="d-none d-sm-table-cell">Length</th>
+ <th></th>
+ </tr>
+ </thead>
+ <tbody>
+ {% for quiz in quizzes %}
  <tr>
- <th>Quiz</th>
- <th class="d-none d-sm-table-cell">Subject</th>
- <th class="d-none d-sm-table-cell">Length</th>
- <th></th>
+ <td class="align-middle">{{ quiz.name }}</td>
+ <td class="align-middle d-none d-sm-table-cell">{{ quiz.subject.get_html_badge }}</td>
+ <td class="align-middle d-none d-sm-table-cell">{{ quiz.questions_count }} questions</td>
+ <td class="text-right">
+ <a href="{% url 'students:take_quiz' quiz.pk %}" class="btn btn-primary">Start quiz</a>
+ </td>
  </tr>
- </thead>
- <tbody>
- {% for quiz in quizzes %}
- <tr>
- <td class="align-middle">{{ quiz.name }}</td>
- <td class="align-middle d-none d-sm-table-cell">{{ quiz.subject.get_html_badge }}</td>
- <td class="align-middle d-none d-sm-table-cell">{{ quiz.questions_count }} questions</td>
- <td class="text-right">
- <a href="{% url 'students:take_quiz' quiz.pk %}" class="btn btn-primary">Start quiz</a>
- </td>
- </tr>
- {% empty %}
- <tr>
- <td class="bg-light text-center font-italic" colspan="4">No quiz matching your interests right now.</td>
- </tr>
- {% endfor %}
- </tbody>
- </table>
- </div>
+ {% empty %}
+ <tr>
+ <td class="bg-light text-center font-italic" colspan="4">No quiz matching your interests right now.</td>
+ </tr>
+ {% endfor %}
+ </tbody>
+ </table>
 {% endblock %}
+
+{% block js %}
+<script src="{% static 'js/jquery-3.3.1.min.js' %}"></script>
+<script src="{% static 'datatables/jquery.dataTables.min.js' %}"></script>
+<script src="{% static 'datatables/dataTables.bootstrap4.min.js' %}"></script>
+<script type="text/javascript">
+$(document).ready(function() {
+ $('#tb_quizlist').DataTable();
+});
+</script>
+{% endblock %}

django_school/classroom/templates/classroom/students/quiz_result.html

@@ -2,15 +2,14 @@
 {% load quiz_extras %}
 
 {% block content %}
-{% include 'classroom/students/_header.html' %}
+{% include 'classroom/students/_header.html' with active='taken' %}
 
 <h2>{{quiz.name}}</h2>
 {{ quiz.subject.get_html_badge }}
 
 <div class="progress">
  <div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: {{percentage}}%" aria-valuenow="{{percentage}}" aria-valuemin="0" aria-valuemax="100">{{percentage}}%</div>
-</div>
-<hr>
+</div><br>
 {% for question in questions %}
 <div class="card">
  <div class="card-body">

django_school/classroom/templates/classroom/students/student_list.html

@@ -2,6 +2,14 @@
 {% extends 'base.html' %}
 {% load quiz_extras %}
 
+{% block css %}
+<style type="text/css">
+ .media {
+ margin-top: 10px
+ }
+</style>
+{% endblock %}
+
 {% block content %}
  {% include 'classroom/students/_header.html' with active='students' %}
 <form method='GET'>