Change templates and models

- Remove unwanted model manager methods
- Minor UI refactor for course and question interface

8 files changed, 320 insertions, 349 deletions

diff --git a/yaksh/forms.py b/yaksh/forms.py
index 7a9eb87..01e691d 100644
--- a/yaksh/forms.py
+++ b/yaksh/forms.py
@@ -387,7 +387,7 @@ class QuestionFilterForm(forms.Form):
 class SearchFilterForm(forms.Form):
     search_tags = forms.CharField(
         label='Search Tags',
-        widget=forms.TextInput(attrs={'placeholder': 'Search',
+        widget=forms.TextInput(attrs={'placeholder': 'Search by course name',
                                       'class': form_input_class, }),
         required=False
         )
diff --git a/yaksh/models.py b/yaksh/models.py
index 662a8b4..0f62948 100644
--- a/yaksh/models.py
+++ b/yaksh/models.py
@@ -1985,58 +1985,6 @@ class QuestionSet(models.Model):
 
 ###############################################################################
 class AnswerPaperManager(models.Manager):
-    def get_all_questions(self, questionpaper_id, attempt_number, course_id,
-                          status='completed'):
-        ''' Return a dict of question id as key and count as value'''
-        papers = self.filter(question_paper_id=questionpaper_id,
-                             course_id=course_id,
-                             attempt_number=attempt_number, status=status)
-        all_questions = list()
-        questions = list()
-        for paper in papers:
-            all_questions += paper.get_questions()
-        for question in all_questions:
-            questions.append(question.id)
-        return Counter(questions)
-
-    def get_per_answer_stats(self, questionpaper_id, attempt_number,
-                                   course_id, status='completed'):
-        papers = self.filter(question_paper_id=questionpaper_id,
-                             course_id=course_id,
-                             attempt_number=attempt_number, status=status)
-        questions = Question.objects.filter(
-            questions__id__in=papers,
-        ).distinct()
-
-        stats = {}
-        for question in questions:
-            answers = Answer.objects.filter(
-                answerpaper__id__in=papers, question=question.id
-            ).values('answer', 'question__id', 'answerpaper__id')
-            question_ans_count = {}
-            answerpaper_count = []
-            for ans in answers:
-                if ans.get('answerpaper__id'):
-                    if ans.get('answer') not in question_ans_count:
-                        question_ans_count[ans.get('answer')] = 1
-                    else:
-                        question_ans_count[ans.get('answer')] += 1
-                    answerpaper_count.append(ans.get('answerpaper__id'))
-            stats[question] = question_ans_count
-        return stats
-
-    def get_all_questions_answered(self, questionpaper_id, attempt_number,
-                                   course_id, status='completed'):
-        ''' Return a dict of answered question id as key and count as value'''
-        papers = self.filter(question_paper_id=questionpaper_id,
-                             course_id=course_id,
-                             attempt_number=attempt_number, status=status)
-        questions_answered = list()
-        for paper in papers:
-            for question in filter(None, paper.get_questions_answered()):
-                if paper.is_answer_correct(question):
-                    questions_answered.append(question.id)
-        return Counter(questions_answered)
 
     def get_attempt_numbers(self, questionpaper_id, course_id,
                             status='completed'):
diff --git a/yaksh/static/yaksh/css/custom.css b/yaksh/static/yaksh/css/custom.css
index 91f68b5..78eaba4 100644
--- a/yaksh/static/yaksh/css/custom.css
+++ b/yaksh/static/yaksh/css/custom.css
@@ -210,4 +210,4 @@ iframe {
   bottom: 0;
   width: 100%;
   text-align: center;
-}
\ No newline at end of file
+}
diff --git a/yaksh/static/yaksh/js/show_courses.js b/yaksh/static/yaksh/js/show_courses.js
index 1209ce3..b887d01 100644
--- a/yaksh/static/yaksh/js/show_courses.js
+++ b/yaksh/static/yaksh/js/show_courses.js
@@ -36,4 +36,11 @@ window.onload = function() {
         $('#gridbtn').addClass('active');
         $('#listbtn').removeClass('active');
     }
+    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+      $("#course-list").removeClass("col-9");
+      $("#course-list").addClass("col");
+    } else{
+      $("#course-list").addClass("col-9");
+      $("#course-list").removeClass("col");
+    }
 }
\ No newline at end of file
diff --git a/yaksh/static/yaksh/js/show_question.js b/yaksh/static/yaksh/js/show_question.js
index d7b6a44..abebdab 100644
--- a/yaksh/static/yaksh/js/show_question.js
+++ b/yaksh/static/yaksh/js/show_question.js
@@ -61,4 +61,11 @@ $(document).ready(function() {
                 });
         }
     });
+    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
+      $("#question-list").removeClass("col-9");
+      $("#question-list").addClass("col");
+    } else{
+      $("#question-list").addClass("col-9");
+      $("#question-list").removeClass("col");
+    }
 });
diff --git a/yaksh/templates/yaksh/add_course.html b/yaksh/templates/yaksh/add_course.html
index b264c5e..1afa34b 100644
--- a/yaksh/templates/yaksh/add_course.html
+++ b/yaksh/templates/yaksh/add_course.html
@@ -14,7 +14,7 @@
 {% block title %} Add Course {% endblock %}
 {% block pagetitle %} Add Course {% endblock %}
 {% block content %}
-<div class="container">
+<div class="container-fluid">
     <div class="row">
         <div class="col-md-8">
             <ul class="nav nav-pills" id="course_tabs">
@@ -37,6 +37,7 @@
         </div>
     </div>
     <hr>
+    <div class="container">
     <form name=frm id=frm action="" method="post" >
         {% csrf_token %}
         <center>
@@ -60,5 +61,6 @@
         </center>
         <br>
     </form>
+    </div>
 </div>
 {% endblock %}
diff --git a/yaksh/templates/yaksh/courses.html b/yaksh/templates/yaksh/courses.html
index 0c59b2b..02cbad9 100644
--- a/yaksh/templates/yaksh/courses.html
+++ b/yaksh/templates/yaksh/courses.html
@@ -10,127 +10,218 @@
 
 {% block content %}
 <div class="container-fluid">
-    <div class="container">
-        <div class="row">
-            <div class="col-md-8">
-                <ul class="nav nav-pills" id="course_tabs">
-                    <li class="nav-item">
-                        <a class="nav-link {% if created %}active{% endif %}" href="{% url 'yaksh:courses' %}">
-                            My Courses
-                        </a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="{% url 'yaksh:add_course' %}">
-                            Add/Edit Course
-                        </a>
-                    </li>
-                    <li class="nav-item">
-                        <a href="{% url 'grades:grading_systems'%}" class="nav-link" >
-                            Add/View Grading Systems
-                        </a>
-                    </li>
-                </ul>
-            </div>
+    <div class="row">
+        <div class="col-md-8">
+            <ul class="nav nav-pills" id="course_tabs">
+                <li class="nav-item">
+                    <a class="nav-link {% if created %}active{% endif %}" href="{% url 'yaksh:courses' %}">
+                        My Courses
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link" href="{% url 'yaksh:add_course' %}">
+                        Add/Edit Course
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a href="{% url 'grades:grading_systems'%}" class="nav-link" >
+                        Add/View Grading Systems
+                    </a>
+                </li>
+            </ul>
         </div>
     </div>
-    <div class="container">
+    <br>
+    <div>
         {% if not objects %}
             <br><br>
             <div class="alert alert-info">
                 <center> <h3> No Courses Found </h3> </center>
             </div>
         {% else %}
-            <hr>
-            <form name=frm action="" method="get">
-                <div class="card">
-                    <div class="card-header">
-                        <h3>Search/Filter Courses</h3>
-                    </div>
-                    <div class="card-body">
-                        <div class="row">
-                            <div class="col-md-6">
-                                {{ form.search_tags }}
+            <div class="row">
+                <div class="col">
+                    <form name=frm action="" method="get">
+                        <div class="card">
+                            <div class="card-header">
+                                <h3>Search/Filter Courses</h3>
                             </div>
-                            <div class="col-md-3">
-                                {{ form.search_status }}
+                            <div class="card-body">
+                                <div>
+                                    {{form.search_tags}}
+                                    <br>
+                                    {{form.search_status}}
+                                </div>
+                                <br>
+                                <button class="btn btn-outline-success" type="submit">
+                                    <i class="fa fa-search"></i>&nbsp;Search
+                                </button>
+                                <a class="btn btn-outline-danger" href="{% url 'yaksh:courses' %}">
+                                    <i class="fa fa-times"></i>&nbsp;Clear
+                                </a>
                             </div>
                         </div>
-                        <br>
-                        <button class="btn btn-outline-success" type="submit">
-                            <i class="fa fa-search"></i>&nbsp;Search
-                        </button>
-                        <a class="btn btn-outline-danger" href="{% url 'yaksh:courses' %}">
-                            <i class="fa fa-times"></i>&nbsp;Clear
-                        </a>
-                    </div>
+                    </form>
                 </div>
-            </form>
-            <hr>
-            <center><h4 class="badge badge-success">{{ courses_found }} Course(s) Available</h4></center>
+                <div id="course-list">
+                    <center><h4 class="badge badge-success">{{ courses_found }} Course(s) Available</h4></center>
 
-            {% if messages %}
-                {% for message in messages %}
-                <div class="alert alert-dismissible alert-{{ message.tags }}">
-                    <button type="button" class="close" data-dismiss="alert">
-                        <i class="fa fa-close"></i>
-                    </button>
-                    <strong>{{ message }}</strong>
-                </div>
-                {% endfor %}
-            {% endif %}
-            {% with objects as courses %}
-            <div class="row">
-                <div class="col-md-4">
-                    {% include "yaksh/paginator.html" %}
-                </div>
-                <div class="ml-auto">
-                    <div class="nav nav-pills" role="tablist" aria-orientation="vertical">
-                        <a  id="listbtn" class="nav-link"  data-toggle="pill" role="tab" aria-controls="show" aria-selected="true">
-                            <i class="fa fa-list"></i>
-                        </a>
-                        <a  id="gridbtn" class="nav-link" data-toggle="pill" role="tab" aria-controls="updown" aria-selected="false">
-                            <i class="fa fa-columns"></i>
-                        </a>
+                    {% if messages %}
+                        {% for message in messages %}
+                        <div class="alert alert-dismissible alert-{{ message.tags }}">
+                            <button type="button" class="close" data-dismiss="alert">
+                                <i class="fa fa-close"></i>
+                            </button>
+                            <strong>{{ message }}</strong>
+                        </div>
+                        {% endfor %}
+                    {% endif %}
+                    {% with objects as courses %}
+                    <div class="row">
+                        <div class="col-md-4">
+                            {% include "yaksh/paginator.html" %}
+                        </div>
+                        <div class="ml-auto">
+                            <div class="nav nav-pills" role="tablist" aria-orientation="vertical">
+                                <a  id="listbtn" class="nav-link"  data-toggle="pill" role="tab" aria-controls="show" aria-selected="true">
+                                    <i class="fa fa-list"></i>
+                                </a>
+                                <a  id="gridbtn" class="nav-link" data-toggle="pill" role="tab" aria-controls="updown" aria-selected="false">
+                                    <i class="fa fa-columns"></i>
+                                </a>
+                            </div>
+                        </div>
                     </div>
-                </div>
-            </div>
 
-            <div class="tab-content">
-                <div class="tab-pane active" id="gridview" role="tabpanel" aria-labelledby="gridbtn">
-                    <!-- GridView -->
-                    <br>
-                    <div class="row">
-                        <br>
-                        {% for course in courses %}
-                            <div class="col-md-6">
-                                <div class="card border-primary">
-                                    <div class="card-header" style="height: 150px">
-                                        {{course.name}}
-                                        <div>
-                                            {% if user.id != course.creator.id %}
-                                            <span class="badge badge-pill badge-warning">
-                                                Allotted Course
-                                            </span>
-                                            {% else %}
-                                            <span class="badge badge-pill badge-primary">
-                                                Created Course
-                                            </span>
-                                            {% endif %}
-                                        </div>
-                                    </div>
-                                    <div class="card-body">
-                                        <div class="row">
-                                            <div class="col">
-                                                <strong>Starts On:</strong>
-                                                {{course.start_enroll_time}}
+                    <div class="tab-content">
+                        <div class="tab-pane active" id="gridview" role="tabpanel" aria-labelledby="gridbtn">
+                            <!-- GridView -->
+                            <br>
+                            <div class="row">
+                                <br>
+                                {% for course in courses %}
+                                    <div class="col-md-6">
+                                        <div class="card border-primary">
+                                            <div class="card-header" style="height: 150px">
+                                                {{course.name}}
+                                                <div>
+                                                    {% if user.id != course.creator.id %}
+                                                    <span class="badge badge-pill badge-warning">
+                                                        Allotted Course
+                                                    </span>
+                                                    {% else %}
+                                                    <span class="badge badge-pill badge-primary">
+                                                        Created Course
+                                                    </span>
+                                                    {% endif %}
+                                                </div>
+                                            </div>
+                                            <div class="card-body">
+                                                <div class="row">
+                                                    <div class="col">
+                                                        <strong>Starts On:</strong>
+                                                        {{course.start_enroll_time}}
+                                                        <br>
+                                                        <strong>Ends On:</strong>
+                                                        {{course.end_enroll_time}}
+                                                    </div>
+                                                </div>
+                                                <hr>
+                                                <div class="row">
+                                                    <div class="col-md-3">
+                                                        {% if course.active %}
+                                                            <span class="badge badge-pill badge-success">
+                                                            Active
+                                                            </span>
+                                                        {% else %}
+                                                            <span class="badge badge-pill badge-danger">
+                                                            Inactive
+                                                            </span>
+                                                        {% endif %}
+                                                    </div>
+                                                    <div class="col-md-4">
+                                                        <a href="{% url 'yaksh:toggle_course_status' course.id %}">
+                                                        {% if course.active %}
+                                                            <i class="fa fa-toggle-on fa-2x"></i>
+                                                        {% else %}
+                                                            <i class="fa fa-toggle-off fa-2x"></i>
+                                                        {% endif %}
+                                                        </a>
+                                                    </div>
+                                                </div>
+                                                <hr>
+                                                <div class="row">
+                                                    <div class="col-md-5">
+                                                        <a href="{% url 'yaksh:edit_course' course.id %}" class="btn btn-info">
+                                                            <i class="fa fa-edit"></i>
+                                                            Edit
+                                                        </a>
+                                                    </div>
+                                                    <div class="col-md-5">
+                                                        <a href="{% url 'yaksh:course_detail' course.id %}" class="btn btn-primary">
+                                                            <i class="fa fa-tasks"></i>
+                                                            Manage
+                                                        </a>
+                                                    </div>
+                                                </div>
                                                 <br>
-                                                <strong>Ends On:</strong>
-                                                {{course.end_enroll_time}}
+                                                <div class="row">
+                                                    <div class="col-md-5">
+                                                        <a href="{% url 'yaksh:duplicate_course' course.id %}" class="btn btn-secondary">
+                                                            <i class="fa fa-clone"></i>
+                                                            Clone
+                                                        </a>
+                                                    </div>
+                                                    <div class="col-md-5">
+                                                        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
+                                                        <button type="button" class="btn btn-secondary">
+                                                            <i class="fa fa-download"></i>
+                                                            Download
+                                                        </button>
+                                                        <div class="btn-group" role="group">
+                                                        <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
+                                                        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1" style="">
+                                                        <a class="dropdown-item" href="{% url 'yaksh:download_course_csv' course.id %}">
+                                                            CSV
+                                                        </a>
+                                                        <a class="dropdown-item" href="{% url 'yaksh:download_course' course.id %}">
+                                                            Course
+                                                        </a>
+                                                        </div>
+                                                        </div>
+                                                        </div>
+                                                    </div>
+                                                </div>
                                             </div>
                                         </div>
-                                        <hr>
+                                        <br>
+                                    </div>
+                                {% endfor %}
+                                <br>
+                            </div>
+                        </div>
+                        <div class="tab-pane" id="listview" role="tabpanel" aria-labelledby="gridbtn">
+                            <!-- ListView -->
+                            <br>
+                            {% for course in courses %}
+                                <div class="card">
+                                    <div class="card-header bg-secondary">
                                         <div class="row">
+                                            <div class="col-md-5">
+                                                {{course.name}}
+                                            </div>
                                             <div class="col-md-3">
+                                                {% if user.id != course.creator.id %}
+                                                    <span class="badge badge-pill badge-warning">
+                                                        Allotted Course
+                                                    </span>
+                                                {% else %}
+                                                    <span class="badge badge-pill badge-primary">
+                                                        Created Course
+                                                    </span>
+                                                {% endif %}
+                                            </div>
+                                            <div class="col-md-2">
                                                 {% if course.active %}
                                                     <span class="badge badge-pill badge-success">
                                                     Active
@@ -141,7 +232,7 @@
                                                     </span>
                                                 {% endif %}
                                             </div>
-                                            <div class="col-md-4">
+                                            <div class="col-md-2">
                                                 <a href="{% url 'yaksh:toggle_course_status' course.id %}">
                                                 {% if course.active %}
                                                     <i class="fa fa-toggle-on fa-2x"></i>
@@ -151,159 +242,68 @@
                                                 </a>
                                             </div>
                                         </div>
+                                    </div>
+                                    <div class="card-body">
+                                        <div class="row">
+                                            <div class="col">
+                                                <strong>Starts On:</strong>
+                                                {{course.start_enroll_time}}
+                                                <br>
+                                                <strong>Ends On:</strong>
+                                                {{course.end_enroll_time}}
+                                            </div>
+                                        </div>
                                         <hr>
                                         <div class="row">
-                                            <div class="col-md-5">
+                                            <div class="col-md-3">
                                                 <a href="{% url 'yaksh:edit_course' course.id %}" class="btn btn-info">
                                                     <i class="fa fa-edit"></i>
-                                                    Edit Course
+                                                    Edit
                                                 </a>
                                             </div>
-                                            <div class="col-md-5">
+                                            <div class="col-md-3">
                                                 <a href="{% url 'yaksh:course_detail' course.id %}" class="btn btn-primary">
                                                     <i class="fa fa-tasks"></i>
-                                                    Manage Course
+                                                    Manage
                                                 </a>
                                             </div>
-                                        </div>
-                                        <br>
-                                        <div class="row">
-                                            <div class="col-md-5">
+                                            <div class="col-md-3">
                                                 <a href="{% url 'yaksh:duplicate_course' course.id %}" class="btn btn-secondary">
                                                     <i class="fa fa-clone"></i>
-                                                    Clone Course
+                                                    Clone
                                                 </a>
                                             </div>
-                                            <div class="col-md-5">
+                                            <div class="col-md-3">
                                                 <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
-                                                <button type="button" class="btn btn-secondary">
-                                                    <i class="fa fa-download"></i>
-                                                    Download
-                                                </button>
-                                                <div class="btn-group" role="group">
-                                                <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
-                                                <div class="dropdown-menu" aria-labelledby="btnGroupDrop1" style="">
-                                                <a class="dropdown-item" href="{% url 'yaksh:download_course_csv' course.id %}">
-                                                    CSV
-                                                </a>
-                                                <a class="dropdown-item" href="{% url 'yaksh:download_course' course.id %}">
-                                                    Course
-                                                </a>
-                                                </div>
-                                                </div>
+                                                    <button type="button" class="btn btn-secondary">
+                                                        <i class="fa fa-download"></i>
+                                                        Download
+                                                    </button>
+                                                    <div class="btn-group" role="group">
+                                                    <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
+                                                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1" style="">
+                                                    <a class="dropdown-item" href="{% url 'yaksh:download_course_csv' course.id %}">
+                                                        CSV
+                                                    </a>
+                                                    <a class="dropdown-item" href="{% url 'yaksh:download_course' course.id %}">
+                                                        Course
+                                                    </a>
+                                                    </div>
+                                                    </div>
                                                 </div>
                                             </div>
                                         </div>
                                     </div>
                                 </div>
                                 <br>
-                            </div>
-                        {% endfor %}
-                        <br>
-                    </div>
-                </div>
-                <div class="tab-pane" id="listview" role="tabpanel" aria-labelledby="gridbtn">
-                    <!-- ListView -->
-                    <br>
-                    {% for course in courses %}
-                        <div class="card">
-                            <div class="card-header bg-secondary">
-                                <div class="row">
-                                    <div class="col-md-5">
-                                        {{course.name}}  
-                                    </div>
-                                    <div class="col-md-3">
-                                        {% if user.id != course.creator.id %}
-                                            <span class="badge badge-pill badge-warning">
-                                                Allotted Course
-                                            </span>
-                                        {% else %}
-                                            <span class="badge badge-pill badge-primary">
-                                                Created Course
-                                            </span>
-                                        {% endif %}
-                                    </div>
-                                    <div class="col-md-2">
-                                        {% if course.active %}
-                                            <span class="badge badge-pill badge-success">
-                                            Active
-                                            </span>
-                                        {% else %}
-                                            <span class="badge badge-pill badge-danger">
-                                            Inactive
-                                            </span>
-                                        {% endif %}
-                                    </div>
-                                    <div class="col-md-2">
-                                        <a href="{% url 'yaksh:toggle_course_status' course.id %}">
-                                        {% if course.active %}
-                                            <i class="fa fa-toggle-on fa-2x"></i>
-                                        {% else %}
-                                            <i class="fa fa-toggle-off fa-2x"></i>
-                                        {% endif %}
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
-                            <div class="card-body">
-                                <div class="row">
-                                    <div class="col">
-                                        <strong>Starts On:</strong>
-                                        {{course.start_enroll_time}}
-                                        <br>
-                                        <strong>Ends On:</strong>
-                                        {{course.end_enroll_time}}
-                                    </div>
-                                </div>
-                                <hr>
-                                <div class="row">
-                                    <div class="col-md-3">
-                                        <a href="{% url 'yaksh:edit_course' course.id %}" class="btn btn-info">
-                                            <i class="fa fa-edit"></i>
-                                            Edit Course
-                                        </a>
-                                    </div>
-                                    <div class="col-md-3">
-                                        <a href="{% url 'yaksh:course_detail' course.id %}" class="btn btn-primary">
-                                            <i class="fa fa-tasks"></i>
-                                            Manage Course
-                                        </a>
-                                    </div>
-                                    <div class="col-md-3">
-                                        <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
-                                            <button type="button" class="btn btn-secondary">
-                                                <i class="fa fa-download"></i>
-                                                Download
-                                            </button>
-                                            <div class="btn-group" role="group">
-                                            <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
-                                            <div class="dropdown-menu" aria-labelledby="btnGroupDrop1" style="">
-                                            <a class="dropdown-item" href="{% url 'yaksh:download_course_csv' course.id %}">
-                                                CSV
-                                            </a>
-                                            <a class="dropdown-item" href="{% url 'yaksh:download_course' course.id %}">
-                                                Course
-                                            </a>
-                                            </div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                    <div class="col-md-3">
-                                        <a href="{% url 'yaksh:duplicate_course' course.id %}" class="btn btn-secondary">
-                                            <i class="fa fa-clone"></i>
-                                            Clone Course
-                                        </a>
-                                    </div>
-                                </div>
-                            </div>
+                            {% endfor %}
+                            <br>
                         </div>
-                        <br>
-                    {% endfor %}
-                    <br>
+                    </div>
+                    {% include "yaksh/paginator.html" %}
+                    {% endwith %}
                 </div>
             </div>
-            {% include "yaksh/paginator.html" %}
-            {% endwith %}
         {% endif %}
     </div>
 </div>
diff --git a/yaksh/templates/yaksh/showquestions.html b/yaksh/templates/yaksh/showquestions.html
index 81bf01a..aefb3a6 100644
--- a/yaksh/templates/yaksh/showquestions.html
+++ b/yaksh/templates/yaksh/showquestions.html
@@ -78,74 +78,73 @@
           </div>
           {% endfor %}
         {% endif %}
-        <div class="card">
-          <div class="card-body">
-            <!-- Filter Questions -->
-            <h4>Filters Questions: </h4>
-            <form method="GET" action="{% url 'yaksh:questions_filter' %}">
-
-              <div class="row">
-                  <div class="col-md-4">{{ form.question_type }}</div>
-                  <div class="col-md-4">{{ form.language }}</div>
-                  <div class="col-md-4">{{ form.marks }}</div>
-                  <br><br>
-                  <div class="col">
-                    <button class="btn btn-outline-success">
-                      <i class="fa fa-filter"></i>&nbsp;Filter
+        <div class="row">
+          <div class="col">
+          <div class="card">
+            <div class="card-body">
+              <!-- Filter Questions -->
+              <h4>Filters Questions: </h4>
+              <form method="GET" action="{% url 'yaksh:questions_filter' %}">
+                {{form.as_table}}
+                <br><br>
+                <button class="btn btn-outline-success">
+                  <i class="fa fa-filter"></i>&nbsp;Filter
+                </button>
+              </form>
+              <!-- End Filter Questions -->
+              <hr>
+              <h4>OR</h4>
+              <!-- Search by Tags -->
+              <h4>Search using Tags: </h4>
+              <select class="form-control" id="sel1" onchange="append_tag(this);">
+                {% if all_tags %}
+                 <option value="" disabled selected>Available Tags</option>
+                {% for tag in all_tags %}
+                <option>
+                    {{tag}}
+                </option>
+                {% endfor %}
+                {% else %}
+                 <option value="" disabled selected>No Available Tags</option>
+                {% endif %}
+              </select>
+              <br>
+              <form method="GET" action="{% url 'yaksh:search_questions_by_tags' %}">
+                <div class="input-group">
+                  <input type="text" name="question_tags" id="question_tags" class="form-control" type="search"  placeholder="Search questions using comma separated Tags">
+                  <span class="input-group-append">
+                    <button class="btn btn-outline-success" type="submit">
+                      <i class="fa fa-search"></i>
                     </button>
-                  </div>
-              </div>
-            </form>
-            <!-- End Filter Questions -->
-            <hr>
-            <!-- Search by Tags -->
-            <h4 >Search using Tags: </h4>
-            <div class="row">
-              <div class="col">
-                <form method="GET" action="{% url 'yaksh:search_questions_by_tags' %}">
-                  <div class="input-group">
-                    <input type="text" name="question_tags" id="question_tags" class="form-control" type="search"  placeholder="Search questions using comma separated Tags">
-                    <span class="input-group-append">
-                      <button class="btn btn-outline-success" type="submit">
-                        <i class="fa fa-search"></i>&nbsp;Search
-                      </button>
-                    </span>
-                  </div>
-                </form>
-              </div>
-              <div class="col">
-                <select class="form-control" id="sel1" onchange="append_tag(this);">
-                  {% if all_tags %}
-                   <option value="" disabled selected>Available Tags</option>
-                  {% for tag in all_tags %}
-                  <option>
-                      {{tag}}
-                  </option>
-                  {% endfor %}
-                  {% else %}
-                   <option value="" disabled selected>No Available Tags</option>
-                  {% endif %}
-                </select>
-              </div>
+                  </span>
+                </div>
+              </form>
+              <br>
+              <!-- End Search by Tags -->
+              <a class="btn btn-outline-danger" href="{% url 'yaksh:show_questions' %}">
+                <i class="fa fa-times"></i>&nbsp;Clear
+              </a>
             </div>
-            <br>
-            <!-- End Search by Tags -->
-            <a class="btn btn-outline-danger" href="{% url 'yaksh:show_questions' %}">
-              <i class="fa fa-times"></i>&nbsp;Clear
-            </a>
+            <!-- End Card body -->
           </div>
-          <!-- End Card body -->
         </div>
+        <div id="question-list">
         <!-- End card filters and search -->
         <form name=frm action="{% url 'yaksh:show_questions' %}" method="post">
           {% csrf_token %}
           <div id="filtered-questions">
             <br>
-            <a class="btn btn-lg btn-success" href="{% url 'yaksh:add_question' %}">
-              <i class="fa fa-plus-circle"></i>&nbsp;Add Question</a>
             {% if objects %}
-              <br><br>
-              {% include "yaksh/paginator.html" %}
+              <div class="row">
+                <div class="col">
+                {% include "yaksh/paginator.html" %}
+                </div>
+                <div class="col">
+                  <a class="btn btn-lg btn-success" href="{% url 'yaksh:add_question' %}">
+                    <i class="fa fa-plus-circle"></i>&nbsp;Add Question
+                  </a>
+                </div>
+              </div>
               <br>
               <h5><input id="checkall" type="checkbox"> Select All </h5>
                 <div class="card">
@@ -158,7 +157,7 @@
                     <thead class="thead-dark">
                       <tr>
                         <th> Select </th>
-                        <th> Sr No. </th>
+                        <th> Sr No.</th>
                         <th> Summary&nbsp;<i class="fa fa-sort"></i> </th>
                         <th> Language&nbsp;<i class="fa fa-sort"></i> </th>
                         <th> Type&nbsp;<i class="fa fa-sort"></i> </th>
@@ -174,8 +173,14 @@
                         <td>
                          <input type="checkbox" name="question" value="{{ question.id }}">
                         </td>
-                        <td>{{forloop.counter}}</td>
-                        <td><a href="{% url 'yaksh:add_question' question.id %}">{{question.summary|capfirst}}</a></td>
+                        <td>
+                          {{forloop.counter}}
+                        </td>
+                        <td>
+                          <a href="{% url 'yaksh:add_question' question.id %}" class="text-white">
+                            {{question.summary|capfirst}}
+                          </a>
+                        </td>
                         <td>{{question.language|capfirst}}</td>
                         <td>{{question.type|capfirst}}</td>
                         <td>{{question.points}}</td>
@@ -185,9 +190,9 @@
                           </a>
                         </td>
                         <td><a href="{% url 'yaksh:download_question' question.id %}" class="btn btn-primary">
-                          <i class="fa fa-download"></i>&nbsp;Download</a></td>
+                          <i class="fa fa-download"></i></a></td>
                         <td><a href="{% url 'yaksh:delete_question' question.id %}" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete {{question.summary|capfirst}}?')">
-                        <i class="fa fa-trash"></i>&nbsp;Delete</a></td>
+                        <i class="fa fa-trash"></i></a></td>
                       </tr>
                       {% endfor %}
                     </tbody>
@@ -212,6 +217,8 @@
             {% endif %}
           </center>
         </form>
+        </div>
+      </div>
       </div>
     </div>
   </div>