Change in views, forms, templates, static

- Revamp UI in student dashboard
- Fix course form to get bootstrap form class
- Add custom css for sidebar in course module page for student
- Use django url pattern

11 files changed, 1224 insertions, 1154 deletions

diff --git a/yaksh/templates/exam.html b/yaksh/templates/exam.html
index d439c64..6480cce 100644
--- a/yaksh/templates/exam.html
+++ b/yaksh/templates/exam.html
@@ -1,83 +1,89 @@
 {% extends "base.html" %}
 {% load custom_filters %}
+{% load static %}
+
+{% block title %}{{ paper.question_paper.quiz.description }}{% endblock %}
+
 {% block nav %}
-<div class="container-fluid yakshnav">
-  <nav class="navbar fixed-top navbar-expand-lg yakshheading yakshnav">
-    <div class="container">
-      <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon" style="color: white"></span>
-      </button>
-      <a class="navbar-brand">
-          <img src="{{ URL_ROOT }}/static/yaksh/images/yaksh_banner.png" alt="YAKSH">
-          </img>
-       </a>    
-      <div class="collapse navbar-collapse col-md-6" id="myNavbar">
-          <div class="nav nav-pills nav-fill ml-auto">
-              <span class="time-div nav-item" id="time_left" ></span>
-              <form id="logout" action="{{URL_ROOT}}/exam/quit/{{ paper.attempt_number }}/{{module.id}}/{{ paper.question_paper.id }}/{{course.id}}/" method="post" class="ml-auto">
-              {% csrf_token %}
-              <span class="nav-item"><button class="nav-link  btn-danger" type="submit" name="quit">
-                {% if paper.questions_unanswered.all %}
-                  Quit {{ quiz_type }}
-                {% else %}
-                  Finish {{ quiz_type }}
-                {% endif %}
-              <span class="fa fa-power-off"></span></button></span>
-              </form>
-          </div>
-      </div><!-- /.navbar -->
-    </div><!-- /.container -->
-  </nav><!-- /.navbar -->
+<div class="container-fluid">
+  <nav class="navbar navbar-expand-sm navbar-dark bg-primary fixed-top">
+    <img src="{% static 'yaksh/images/yaksh_banner.png' %}" alt="YAKSH">
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
+    <span class="navbar-toggler-icon"></span>
+    </button>
+
+    <div class="collapse navbar-collapse" id="navbarColor01">
+      <div class="row ml-auto my-lg-0">
+        <div class="col-md-4">
+          <span class="time-div nav-item" id="time_left"></span>
+        </div>
+        <div class="col-md-6">
+          <form id="logout" action="{% url 'yaksh:quit_quiz' paper.attempt_number module.id paper.question_paper.id course.id %}" method="post" class="ml-auto">
+            {% csrf_token %}
+            <span class="nav-item"><button class="btn btn-danger btn-lg" type="submit" name="quit">
+              {% if paper.questions_unanswered.all %}
+                Quit {{ quiz_type }}
+              {% else %}
+                Finish {{ quiz_type }}
+              {% endif %}
+            <span class="fa fa-power-off"></span></button></span>
+          </form>
+        </div>
+      </div>
+    </div>
+  </nav>
 </div>
 {% endblock %}
 {% block content %}
 <div class="container-fluid">
   <div class="row">
-      <!-- Side bar -->
-      <div class="col-md-3 yakshlabel collapse" id="sidebar">
-        <center>
-          <b class="yakshheading">{{course.name}}</b><br>
-          {{ paper.question_paper.quiz.description }}</h4>
-          <hr>
-        </center>
-          <div class="yakshwell">            
-              <p class="text-center">Question Navigator</p>
-                <div>
-                  {% for qid in paper.get_all_ordered_questions %}
-                {%if paper.question_paper.quiz.allow_skip %}
-                {% if qid in paper.get_questions_unanswered %}
-                {% if qid.id == question.id %}
-                <a class="active btn btn-outline-success " href="#"data-toggle="tooltip"
-                    title="{{ qid.description|striptags }}"
-                    onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ qid.id }}/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/')">{{ forloop.counter }}</a>
-                {% else %}
-                <a class=" btn btn-outline-success " href="#" data-toggle="tooltip" title="{{ qid.description|striptags }}"
-                    onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ qid.id }}/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/')">{{ forloop.counter }}</a>
-                {% endif %}
-                {% endif %}
-                {% if qid in paper.get_questions_answered %}
-                <a class="btn btn-outline-light question-nav-bg" href="#" data-toggle="tooltip"
-                onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ qid.id }}/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/')"
-                title="{{ qid.description }}">{{ forloop.counter }}</a>
-                {% endif %}
-                {% else %}
-                {% if qid.id == question.id %}
-                <a class="active btn btn-outline-success" data-toggle="tooltip" title="{{ qid.description|striptags }}">{{ forloop.counter }}</a>
-                {% elif qid in paper.get_questions_answered %}
-                <a class="btn btn-outline-success question-nav-bg" href="#" data-toggle="tooltip"
-                onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ qid.id }}/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/')"
-                title="{{ qid.description }}">{{ forloop.counter }}</a>
-                {% else %}
-                <a class="disabled btn btn-outline-success " data-toggle="tooltip" title="{{ qid.description|striptags }}">{{ forloop.counter }}</a>
-                {% endif %}
-                {% endif %}
-                {% endfor %}
-                </div>
-                <br>
-          <p class="text-center">Question(s) left: <b>{{ paper.questions_left }}</b></p>
-          </div>
-          <br>
-          <table class = "legend_table table-bordered table-sm">
+    <!-- Side Component -->
+    <div class="col-md-3 bg-secondary">
+      <br>
+      <center>
+        <b>{{course.name}}</b><br>
+        {{ paper.question_paper.quiz.description }}</h4>
+        <hr>
+      </center>
+      <center><p>Question Navigator</p></center>
+      <div class="justify-content-center">
+        {% for qid in paper.get_all_ordered_questions %}
+          {% if paper.question_paper.quiz.allow_skip %}
+            {% if qid in paper.get_questions_unanswered %}
+              {% if qid.id == question.id %}
+              <a class="active btn btn-outline-primary " href="#"data-toggle="tooltip"
+                  title="{{ qid.description|striptags }}" style="width: 50px"
+                  onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ qid.id }}/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/')">{{ forloop.counter }}</a>
+              {% else %}
+              <a class=" btn btn-outline-primary " href="#" data-toggle="tooltip" title="{{ qid.description|striptags }}" style="width: 50px"
+                  onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ qid.id }}/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/')">{{ forloop.counter }}</a>
+              {% endif %}
+            {% endif %}
+            {% if qid in paper.get_questions_answered %}
+            <a class="btn btn-info" href="#" data-toggle="tooltip" style="width: 50px"
+            onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ qid.id }}/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/')"
+            title="{{ qid.description }}">{{ forloop.counter }}</a>
+            {% endif %}
+          {% else %}
+            {% if qid.id == question.id %}
+            <a class="active btn btn-outline-primary" data-toggle="tooltip" title="{{ qid.description|striptags }}" style="width: 50px">{{ forloop.counter }}</a>
+            {% elif qid in paper.get_questions_answered %}
+            <a class="btn btn-outline-primary" href="#" data-toggle="tooltip" style="width: 50px"
+            onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ qid.id }}/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/')"
+            title="{{ qid.description }}">{{ forloop.counter }}</a>
+            {% else %}
+            <a class="btn btn-outline-primary" style="width: 50px" data-toggle="tooltip" title="{{ qid.description|striptags }}">{{ forloop.counter }}</a>
+            {% endif %}
+          {% endif %}
+        {% endfor %}
+      </div>
+      <br>
+      <div>
+        <p class="text-center">Question(s) left: <b>{{ paper.questions_left }}</b></p>
+      </div>
+      <br>
+      <div>
+          <table class="table-bordered table-responsive-sm">
             <thead>
               <tr>
                 <th>Category</th>
@@ -97,16 +103,15 @@
               {% endfor %}
             </tbody>
           </table>
-      </div> <!--end of sidebar -->
-      <a href="#sidebar" data-toggle="collapse" id="sidebaricon"><i class="fa fa-navicon fa-lg"></i></a>
-
-      <main class="col" id="sidebarbody">
-        <div class="container-fluid yakshwell">
-          
-            {% block main %}
-            {% endblock %}
-        </div>
-      </main>
+        <br>
+      </div>
+    </div>
+    <!-- Main Component -->
+    <div class="col-md-9">
+      <br>
+      {% block main %}
+      {% endblock %}
+    </div>
   </div>
 </div>
 
diff --git a/yaksh/templates/user.html b/yaksh/templates/user.html
index 4ded0a3..4e3974b 100644
--- a/yaksh/templates/user.html
+++ b/yaksh/templates/user.html
@@ -1,39 +1,46 @@
 {% extends "base.html" %}
-
+{% load static %}
 {% block nav %}
-<div class="container-fluid yakshnav">
-<nav class="navbar fixed-top navbar-expand-lg yakshheading yakshnav">
-  <div class="container">
-    <button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#myNavbar" aria-controls="myNavbar" aria-expanded="false" aria-label="Toggle navigation">
-    <span class="navbar-toggler-icon" style="color: white"></span>
-    </button>
-    <a class="navbar-brand" href="{{ URL_ROOT }}/exam/">
-    <img src="{{ URL_ROOT }}/static/yaksh/images/yaksh_banner.png" alt="YAKSH" style="margin-top: -3px; margin-left:-15px">
-    </img>
-    </a>    
-    <div class="collapse navbar-collapse" id="myNavbar">
-        <ul class="nav nav-pills ml-auto">
-            <li class="nav-item"><a class="nav-link" href="{{ URL_ROOT }}/exam/"><i class="fa fa-home" style="size: 18px"></i></a></li>
-            <li class="nav-item dropdown">
-          <a class="dropdown-toggle nav-link" id="user_dropdown" data-toggle="dropdown" href="#"> {{user.get_full_name|title}}</a>
-          <div class="dropdown-menu">
-            <a class="dropdown-item" href="{{ URL_ROOT }}/exam/viewprofile/"><i class="fa fa-user"></i>  My Profile</a>
-            <div class="dropdown-divider"></div>
-            {% if user.profile.is_moderator %}
-            <a class="dropdown-item" href="{{URL_ROOT}}/exam/toggle_moderator/"><i class="fa fa-exchange"></i>
-              Switch To Moderator  
-            </a>
-            <div class="dropdown-divider"></div>
-            {% endif %}
-            <a class="dropdown-item" href="{{ URL_ROOT }}/exam/reset/changepassword/"><i class="fa fa-key"></i> Change Password</a>
-            <div class="dropdown-divider"></div>
-            <a id="user_logout" class="dropdown-item" href="{{URL_ROOT}}/exam/logout/"><i class="fa fa-sign-out"></i> Logout</a>
-          </div>
-        </li>
+<div class="container-fluid">
+    <nav class="navbar navbar-expand-sm navbar-dark bg-primary fixed-top">
+        <a class="navbar-brand" href="{% url 'yaksh:index' %}">
+        <img src="{% static 'yaksh/images/yaksh_banner.png' %}" alt="YAKSH">
+        </a>
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
+        <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbarColor01">
+        <ul class="navbar-nav mr-auto">
+            <li class="nav-item"><a class="nav-link" href="{% url 'yaksh:index' %}"><i class="fa fa-home" style="size: 18px"></i>&nbsp;Home</a></li>
         </ul>
-    </div>
-  </div>
-</nav>
+        <ul class="navbar-nav ml-auto">
+            <li class="nav-item dropdown my-lg-0" style="font-size: 1.2rem">
+                <a class="dropdown-toggle nav-link" id="user_dropdown" data-toggle="dropdown" href="#">{{user.get_full_name|title}}
+                </a>
+                <div class="dropdown-menu dropdown-menu-right">
+                <a class="dropdown-item" href="{% url 'yaksh:edit_profile' %}">
+                    <i class="fa fa-user"></i>  My Profile
+                </a>
+                <div class="dropdown-divider"></div>
+                {% if user.profile.is_moderator %}
+                    <a class="dropdown-item" href="{% url 'yaksh:toggle_moderator' %}"><i class="fa fa-exchange"></i>
+                        Switch To Moderator
+                    </a>
+                    <div class="dropdown-divider"></div>
+                {% endif %}
+                <a class="dropdown-item" href="{% url 'password_change' %}">
+                    <i class="fa fa-key"></i> Change Password
+                </a>
+                <div class="dropdown-divider"></div>
+                    <a class="dropdown-item" id="user_logout" href="{% url 'yaksh:logout' %}">
+                        <i class="fa fa-sign-out"></i> Logout
+                    </a>
+                </div>
+            </li>
+        </ul>
+        </div>
+    </nav>
 </div>
 {% endblock %}
 
@@ -44,25 +51,3 @@
     {% endblock %}
   {% endblock %}
 {% endblock %}
-
-{% block footer %}
-  <!--footer-->   
-  <footer class="container-fluid yakshfooter text-center ">
-    <div class="row justify-content-center">
-    <div class="col-sm-5 ">
-      {% if user %}
-         {% block info %}
-         <b>{{user.get_full_name|title}}</b> with Roll no. <b>{{user.profile.roll_number}}</b> is logged in as <b>{{user.username}}</b>
-         {% endblock %}
-         {% endif %}
-    </div>
-    <div class="col-sm-2">
-      |
-    </div>
-    <div class="col-sm-4 text-left">
-     <b>Any Queries?</b> Email : info@fossee.in
-    </div>
-  </div>
-  </footer>
-  <!--footer end-->
-{% endblock %}
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/complete.html b/yaksh/templates/yaksh/complete.html
index 8c8073e..f5bf444 100644
--- a/yaksh/templates/yaksh/complete.html
+++ b/yaksh/templates/yaksh/complete.html
@@ -1,10 +1,10 @@
 {% extends "base.html" %}
-
+{% load static %}
 {% block nav %}
 <nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top">
-  <a class="navbar-brand" href="{{ URL_ROOT }}/exam/">
-    <img src="{{ URL_ROOT }}/static/yaksh/images/yaksh_banner.png" alt="YAKSH">
-  </a>
+    <a class="navbar-brand" href="{% url 'yaksh:index' %}">
+        <img src="{% static 'yaksh/images/yaksh_banner.png' %}" alt="YAKSH">
+    </a>
 </nav>
 {% endblock %}
 
@@ -12,7 +12,7 @@
 <br>
 {% if module_id and not paper.question_paper.quiz.is_trial %}
 <center>
-    <div class="alert alert-info col-md-8 animated flash">
+    <div class="alert alert-info col-md-8">
         Note:- Please Click on the Next button to submit the quiz. Please do not close the browser without clicking Next.
     </div>
 </center>
@@ -20,11 +20,11 @@
 {% csrf_token %}
     {% if paper.questions_answered.all or paper.questions_unanswered.all %}
         <center>
-        <div class="col-md-8 yakshwell">
+        <div class="col-md-8">
             <h3>Submission Status</h3>
             <table class="table table-bordered table-responsive-sm" >
                 <thead>
-                    <tr class="yakshred text-center">
+                    <tr class="text-center">
                         <th> Question</th>
                         <th> Status </th>
                     </tr>
@@ -37,7 +37,7 @@
                             <td> {{ question.summary }} </td>
                             <td> Attempted </td>
                         {% else %}
-                            <tr class="table-danger">
+                            <tr class="table-warning">
                             <td> {{ question }} </td>
                             <td> Not completed </td>
                         {% endif %}
@@ -56,20 +56,20 @@
     </center>
     <center>
     <br>
-    {% if module_id and not paper.question_paper.quiz.is_trial %}
+    {% if module_id and not paper.course.is_trial %}
         {% if first_unit %}
-            <a href="{{URL_ROOT}}/exam/next_unit/{{course_id}}/{{module_id}}/{{learning_unit.id}}/1" class="btn btn-info" id="Next"> Next
+            <a href="{% url 'yaksh:next_unit' course_id module_id learning_unit.id '1' %}" class="btn btn-info btn-lg" id="Next"> Next
                 <span class="fa fa-step-forward">
                 </span>
             </a>
         {% else %}
-            <a href="{{URL_ROOT}}/exam/next_unit/{{course_id}}/{{module_id}}/{{learning_unit.id}}" class="btn btn-info" id="Next"> Next
+            <a href="{% url 'yaksh:next_unit' course_id module_id learning_unit.id %}" class="btn btn-info btn-lg" id="Next"> Next
                 <span class="fa fa-step-forward">
                 </span>
             </a>
         {% endif %}
     {% else %}
-        <a href="{{URL_ROOT}}/exam/" id="home" class="btn btn-primary btn-lg"> Home </a>
+        <a href="{% url 'yaksh:index' %}" id="home" class="btn btn-primary btn-lg"> Home </a>
     {% endif %}
     </center>
 {% endblock content %}
diff --git a/yaksh/templates/yaksh/course_modules.html b/yaksh/templates/yaksh/course_modules.html
index 8440d51..214f8c7 100644
--- a/yaksh/templates/yaksh/course_modules.html
+++ b/yaksh/templates/yaksh/course_modules.html
@@ -1,186 +1,175 @@
 {% extends "user.html" %}
 {% load custom_filters %}
 {% block title %} Course Modules {% endblock %}
-{% block script %}
-<script>
-    function view_unit(unit){
-        $("#"+unit+"_down").toggle();
-        $("#"+unit+"_up").toggle();
-    }
-
-</script>
-{% endblock %}
 
 {% block main %}
-
 <div class="container">
-<div class="row justify-content-md-center yakshwell">
-    <div class="col-md-10 bg-light card" id="card">
-        <div class="row align-items-center">
-            <div class="col h4">  {{ course.name }}  </div>
-            <div class = "col">
-                {% if course.has_lessons %}
-                <a href="{% url 'yaksh:download_course' course.id %}" data-toggle="tooltip" title="Download course content" class="btn btn-primary pull-right">
-                    Download Course
-                </a>
-                {% endif %}
-            </div>
-        </div>
-    </div>
-</div>
-
-<center>
-    {% if course.view_grade %}
-        <div class=" col-md-8">
-        <b>Grade: {% if grade %} {{ grade }} {% else %} Will be available once the course is complete {% endif %}</b>
+    <div class="card">
+        <div class="card-header">
+            {{ course.name }}
         </div>
-    {% endif %}
-
-    {% if msg %}
-        <div class="col-md-8 alert alert-warning animated flash" role="alert">
-            {{ msg }}
-        </div>
-    {% endif %}
-</center>
-
-<div class="row justify-content-md-center ">
-{% if modules %}
-    <div class="col-md-10  yakshwell">
-
-    <strong>Overall Course Progress</strong>
-    <div class="progress">
-        {% if course_percentage <= 50 %}
-            <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40"
-            aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
-        {% elif course_percentage <= 75 %}
-            <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40"
-            aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
-        {% else %}
-            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
-            aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
-        {% endif %}
-        <b style="color: black;">{{course_percentage}}% Completed</b>
-        </div>
-    </div>
-
-        {% for module, percent in modules %}
-        <div class="yakshwell">
-            <div class="row yakshlabel align-items-center">
-                <div class="col-md-4">
-                    {{module.name|title}}
+        <div class="card-body">
+            {% if course.view_grade %}
+                <center>
+                    <b>Grade:</b> {% if grade %} {{ grade }} {% else %} Will be available once the course is complete {% endif %}
+                </center>
+            {% endif %}
+            {% if msg %}
+                <div class="alert alert-dismissible alert-warning">
+                    <button type="button" class="close" data-dismiss="alert">
+                        <i class="fa fa-close"></i>
+                    </button>
+                    <strong>{{ msg }}</strong>
                 </div>
-
-                <div class="col-md-1">
-                    <a data-toggle="collapse" data-target="#learning_units{{module.id}}{{course.id}}" onclick="view_unit('learning_units{{module.id}}{{course.id}}');">
-                    <div class="btn yakshred">
-                    <span class="fa fa-caret-down fa-2x" id="learning_units{{module.id}}{{course.id}}_down" >
-                    </span>
-                    <span class="fa fa-caret-right fa-2x" id="learning_units{{module.id}}{{course.id}}_up" style="display: none; ">
-                    </span>
+            {% endif %}
+            {% if modules %}
+            <strong>Overall Course Progress:</strong>
+            <div class="progress">
+                {% if course_percentage %}
+                    {% if course_percentage <= 50 %}
+                        <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{course_percentage}}"
+                        aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
+                    {% elif course_percentage <= 75 %}
+                        <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{course_percentage}}"
+                        aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
+                    {% else %}
+                        <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{course_percentage}}"
+                        aria-valuemin="0" aria-valuemax="100" style="width:{{course_percentage}}%">
+                    {% endif %}
+                    <b style="color: white;">{{course_percentage}}% Completed</b>
                     </div>
-                    </a>
-
+                {% else %}
+                    <b style="color: black;">0% Completed</b>
+                {% endif %}
+            </div>
+            {% else %}
+                <div class="alert alert-danger">
+                    <strong>No lectures found</strong>
                 </div>
-                <div class="col-md-5 ml-auto">
-                    <div class="row align-items-center justify-content-md-end">
-                    <div class="col-md-3">
-                        <a href="{{URL_ROOT}}/exam/quizzes/view_module/{{module.id}}/{{course.id}}">
-                        {% get_module_status user module course as module_status %}
-                        {% if module_status == "completed" %}
-                        <div class="btn btn-success ">
-                            View
-                        </div>
-                        {% elif module_status == "inprogress" %}
-                        <div class="btn btn-info">
-                            Continue
-                        </div>
-                        {% else %}
-                        <div class="btn btn-danger ">
-                            Start
+            {% endif %}
+            <br>
+            {% for module, percent in modules %}
+            <div class="accordian-{{module.id}}">
+                <div class="card">
+                    <div class="card-header">
+                        <div class="row">
+                            <div class="col-md-4">
+                                {{ module.name|title }}
+                            </div>
+                            <div class="col-md-3">
+                                <a class="card-link btn btn-outline-info" data-toggle="collapse" href="#collapse-{{module.id}}">
+                                    Details&nbsp;<i class="fa fa-toggle-down"></i>
+                                </a>
+                            </div>
+                            <div class="col-md-2">
+                                <a href="{% url 'yaksh:view_module' module.id course.id %}">
+                                {% get_module_status user module course as module_status %}
+                                {% if module_status == "completed" %}
+                                <div class="btn btn-info ">
+                                    View
+                                </div>
+                                {% elif module_status == "inprogress" %}
+                                <div class="btn btn-primary">
+                                    Continue
+                                </div>
+                                {% else %}
+                                <div class="btn btn-success ">
+                                    Start
+                                </div>
+                                {% endif %}
+                                </a>
+                            </div>
+                            <div class="col-md-3">
+                                <div class="progress bg-white">
+                                    {% if percent %}
+                                        {% get_module_status user module course as module_status %}
+                                        {% if module_status == "completed" %}
+                                          <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{percent}}"
+                                          aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
+                                        {% elif module_status == "inprogress" %}
+                                          <div class="progress-bar bg-warning" role="progressbar"
+                                          aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
+                                        {% endif %}
+                                        <b style="color: white;">{{percent}}% Completed</b>
+                                        </div>
+                                    {% else %}
+                                        <b style="color: black;">0% Completed</b>
+                                    {% endif %}
+                                </div>
+                            </div>
                         </div>
-                        {% endif %}
-                        </a>
                     </div>
-                    <div class="col-md-6">
-                        {% get_module_status user module course as module_status %}
-                        {% if module_status == "completed" %}
-                        <div class="progress">
-                          <div class="progress-bar bg-success" role="progressbar" style="width: 100%; color: black;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">{{ percent }} % completed</div>
-                        </div>
-                        {% elif module_status == "inprogress" %}
-                        <div class="progress">
-                          <div class="progress-bar bg-warning " role="progressbar" style="width: 50%; color: black;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">{{ percent }} % completed</div>
+                    <div id="collapse-{{module.id}}" class="collapse hide" data-parent="#accordion-{{module.id}}">
+                        <div class="card-body">
+                            <table class="table yakshwell">
+                                {% for unit in module.get_learning_units %}
+                                <tr>
+                                    <td>
+                                    {% if unit.type == "quiz" %}
+                                        {% if unit.quiz.is_exercise %}
+                                            <span class="fa fa-pencil"></span>
+                                        {% else %}
+                                            <span class="fa fa-puzzle-piece"></span>
+                                        {% endif %}
+                                    {% else %}
+                                        <span class="fa fa-book"></span>
+                                    {% endif %}
+                                    </td>
+                                    <td>
+                                    {% if unit.type == "quiz" %}
+                                        {{unit.quiz.description}}
+                                    {% else %}
+                                        {{unit.lesson.name}}
+                                    {% endif %}
+                                    </td>
+                                    <td>
+                                        {% if unit.type == "lesson" %}
+                                            <a href="{% url 'yaksh:show_lesson' unit.lesson.id module.id course.id %}" class="btn btn-outline-info">
+                                                View
+                                            </a>
+                                        {% else %}
+                                            <a href="{% url 'yaksh:start_quiz' unit.quiz.questionpaper_set.get.id module.id course.id %}" class="btn btn-outline-info">
+                                                View
+                                            </a>
+                                        {% endif %}
+                                    </td>
+                                    <td>
+                                    {% get_unit_status course module unit user as status %}
+                                    {% if status == "completed" %}
+                                        <span class="badge badge-success">{{status|title}}
+                                        </span>
+                                    {% elif status == "inprogress" %}
+                                        <span class="badge badge-info">{{status|title}}
+                                        </span>
+                                    {% else %}
+                                        <span class="badge badge-warning">{{status|title}}
+                                        </span>
+                                    {% endif %}
+                                    </td>
+                                    <td>
+                                    {% if unit.type == "quiz" %}
+                                        {% if unit.quiz.view_answerpaper %}
+                                            <a href="{% url 'yaksh:view_answerpaper' unit.quiz.questionpaper_set.get.id course.id %}" >
+                                            <i class="fa fa-eye"></i>&nbsp;Answer paper</a>
+                                        {% else %}
+                                            <a >
+                                            <i class="fa fa-eye-slash" aria-hidden="true">
+                                            </i>Answer paper</a>
+                                        {% endif %}
+                                    {% else %}
+                                        ------
+                                    {% endif %}
+                                    </td>
+                                </tr>
+                                {% endfor %}
+                            </table>
                         </div>
-                        {% else %}
-                        <div class="progress">
-                          <div class="progress-bar bg-danger" role="progressbar" style="width: 1%; color: black;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">{{ percent }} % completed</div>
-                        </div>
-                        {% endif %}
-                    </div>
                     </div>
                 </div>
             </div>
-            <div id="learning_units{{module.id}}{{course.id}}" class="collapse">
-                        <table class="table yakshwell">
-
-                        {% for unit in module.get_learning_units %}
-                        <tr>
-                            <td>
-                            {% if unit.type == "quiz" %}
-                                {% if unit.quiz.is_exercise %}
-                                    <span class="fa fa-pencil"></span>
-                                {% else %}
-                                    <span class="fa fa-puzzle-piece"></span>
-                                {% endif %}
-                            {% else %}
-                                <span class="fa fa-book"></span>
-                            {% endif %}
-                            </td>
-                            <td>
-                            {% if unit.type == "quiz" %}
-                                {{unit.quiz.description}}
-                            {% else %}
-                                {{unit.lesson.name}}
-                            {% endif %}
-                            </td>
-
-                            <td>
-                            {% get_unit_status course module unit user as status %}
-                            {% if status == "completed" %}
-                                <span class="badge badge-success">{{status|title}}
-                                </span>
-                            {% elif status == "inprogress" %}
-                                <span class="badge badge-info">{{status|title}}
-                                </span>
-                            {% else %}
-                                <span class="badge badge-warning">{{status|title}}
-                                </span>
-                            {% endif %}
-                            </td>
-                            <td>
-                            {% if unit.type == "quiz" %}
-                                {% if unit.quiz.view_answerpaper %}
-                                    <a href="{{ URL_ROOT }}/exam/view_answerpaper/{{ unit.quiz.questionpaper_set.get.id }}/{{course.id}}" >
-                                    <i class="fa fa-eye" aria-hidden="true"></i>Answer paper</a>
-                                {% else %}
-                                    <a >
-                                    <i class="fa fa-eye-slash" aria-hidden="true">
-                                    </i>Answer paper</a>
-                                {% endif %}
-                            {% else %}
-                                ------
-                            {% endif %}
-                            </td>
-                        </tr>
-                        {% endfor %}
-                        </table>
-                    </div>
+            <br>
+            {% endfor %}
         </div>
-        {% endfor %}
     </div>
-{% else %}
-    <h3 class="alert-danger"> No lectures found </h3>
-{% endif %}
-</div>
 </div>
 {% endblock %}
diff --git a/yaksh/templates/yaksh/error_template.html b/yaksh/templates/yaksh/error_template.html
index 00fa306..9cfeac1 100644
--- a/yaksh/templates/yaksh/error_template.html
+++ b/yaksh/templates/yaksh/error_template.html
@@ -1,19 +1,17 @@
-
+{% load static %}
 {% block css%}
-    <link rel="stylesheet" href="{{ URL_ROOT }}/static/yaksh/css/dashboard.css" type="text/css" />
+  <link rel="stylesheet" href="{% static 'yaksh/css/dashboard.css' %}" type="text/css" />
 {% endblock %}
 {% block script %}
-  <script src="{{ URL_ROOT }}/static/yaksh/js/jquery-ui.js"></script>
+  <script src="{% static 'yaksh/js/jquery-ui.js' %}"></script>
 {% endblock %}
 
 {% load custom_filters %}
 {% if error_message %}
-<div class="container-fluid row justify-content-center">
     {% for error in error_message %}
-<div class="col-md-10 yakshwell">
       <div class="card ">
       <div class="card-header alert-danger">Error No. {{ forloop.counter }}</div>
-       <div class="card-body ">
+      <div class="card-body ">
       <div class="">
       {% if not error.type %}
         <pre><code> {{error|safe}} </code></pre>
@@ -92,7 +90,7 @@
         </div>
       </div>
       </div>
+      <br>
     </div>
-      {% endfor %}
-</div>
+    {% endfor %}
 {% endif %}
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/intro.html b/yaksh/templates/yaksh/intro.html
index 567282a..7657a65 100644
--- a/yaksh/templates/yaksh/intro.html
+++ b/yaksh/templates/yaksh/intro.html
@@ -1,61 +1,54 @@
 {% extends "base.html" %}
 
-{% block pagetitle %} OnlineTest Instructions and Rules {% endblock pagetitle %}
+{% block title %} {{questionpaper.quiz.description}} {% endblock %}
+{% block pagetitle %} Quiz Instructions and Rules {% endblock pagetitle %}
 
 {% block content %}
-<div class="container-fluid card col-md-10">
-    <center class="yakshwell">
-     {% if questionpaper.quiz.is_expired %}
-          <div class="alert col-md-8 alert-error animated flash">
+<div class="container">
+  <div class="card">
+    <div class="card-header">
+      {{questionpaper.quiz.description}}
+    </div>
+    <div class="card-body">
+      {% if questionpaper.quiz.is_expired %}
+          <div class="alert alert-error">
               This Quiz has expired. You can no longer attempt this Quiz.
-          <br/>
           </div>
-     {% else %}
-          <div class="alert alert-success col-md-8 animated flash">
-          {% load tz %}
-          {% get_current_timezone as TIME_ZONE %}
-              You can attempt this Quiz at any time between {{ questionpaper.quiz.start_date_time }} {{ TIME_ZONE }} and {{ questionpaper.quiz.end_date_time }} {{ TIME_ZONE }}
-              <br/>
-              You are not allowed to attempt the Quiz before or after this duration
-          <br/>
+      {% else %}
+          <div class="alert alert-info">
+              You can attempt this Quiz at any time between <b>{{ questionpaper.quiz.start_date_time }}</b> and <b>{{ questionpaper.quiz.end_date_time }}</b>
           </div>
-     {% endif %}
-    </center>
-    <div class="yakshwell">
+      {% endif %}
       <p> Welcome <strong>{{user.get_full_name|title}}</strong>, to the programming quiz! </p>
       {{ questionpaper.quiz.instructions|safe }}
-      <div class="row yakshwell">
-          <div class="col-md-6">
-            <center>
-              {% if status != "moderator" %}
-                  <a href="{{URL_ROOT}}/exam/quizzes/view_module/{{module.id}}/{{course.id}}" class="btn btn-primary" name="home">
-                  <i class="fa fa-step-backward">
-                  </i>
-                  Go Back</a>
-              {% else %}
-                  <a href="{{URL_ROOT}}/exam" class="btn btn-primary" name="home">
-                  <i class="fa fa-step-backward">
-                  </i>
-                  Go Back</a>
-              {% endif %}
-            </center>
-          </div>
-          <div class="col-md-6">
-                {% if not questionpaper.quiz.is_expired %}
-                    <form action="{{URL_ROOT}}/exam/start/{{ attempt_num }}/{{module.id}}/{{ questionpaper.id }}/{{course.id}}/" method="post" align="center">
-                     {% csrf_token %}
-                     <center><button class="btn btn-success" type="submit" name="start"> Start Exam <i class="fa fa-play"></i></button></center>
-                    </form>
-                {% endif %}
-          </div>
+      <div class="row">
+        <div class="col-md-6">
+          <center>
+            {% if status != "moderator" %}
+              <a href="{% url 'yaksh:view_module' module.id course.id %}" class="btn btn-primary btn-lg" name="home">
+                <i class="fa fa-step-backward"></i>
+                Go Back
+              </a>
+            {% else %}
+              <a href="{% url 'yaksh:index' %}" class="btn btn-primary btn-lg" name="home">
+                <i class="fa fa-step-backward"></i>
+                Go Back
+              </a>
+            {% endif %}
+          </center>
+        </div>
+        <div class="col-md-6">
+          {% if not questionpaper.quiz.is_expired %}
+              <form action="{% url 'yaksh:start_quiz' attempt_num module.id questionpaper.id course.id %}" method="post" align="center">
+               {% csrf_token %}
+                <button class="btn btn-success btn-lg" type="submit" name="start">
+                  Start <i class="fa fa-play"></i>
+                </button>
+              </form>
+          {% endif %}
+        </div>
       </div>
     </div>
-    </div>
+  </div>
+</div>
 {% endblock content %}
-
-{% if user %}
-  {% block info %}
-  <h5>{{user.get_full_name|title}}({{user.profile.roll_number}}) Logged in as {{user.username}}</h5>
-  {% endblock %}
-{% endif %}
-
diff --git a/yaksh/templates/yaksh/question.html b/yaksh/templates/yaksh/question.html
index f13de1a..3ad82ca 100644
--- a/yaksh/templates/yaksh/question.html
+++ b/yaksh/templates/yaksh/question.html
@@ -1,11 +1,12 @@
 {% extends "exam.html" %}
 {% load custom_filters %}
-
+{% load static %}
 
 {% block css %}
-<link rel="stylesheet" href="{{ URL_ROOT }}/static/yaksh/css/question.css" type="text/css" />
-<link rel="stylesheet" href="{{ URL_ROOT }}/static/yaksh/css/codemirror/lib/codemirror.css" type="text/css" />
-<link rel="stylesheet" href="{{ URL_ROOT }}/static/yaksh/css/exam.css" type="text/css" />
+
+<link rel="stylesheet" href="{% static 'yaksh/css/question.css' %}" type="text/css" />
+<link rel="stylesheet" href="{% static 'yaksh/css/codemirror/lib/codemirror.css' %}" type="text/css" />
+<link rel="stylesheet" href="{% static 'yaksh/css/exam.css' %}" type="text/css" />
 <style>
     .CodeMirror{
         border-style: groove;
@@ -18,13 +19,15 @@
 {% endblock %}
 
 {% block script %}
-<script src="{{ URL_ROOT }}/static/yaksh/js/requesthandler.js"></script>
-<script src="{{ URL_ROOT }}/static/yaksh/js/codemirror/lib/codemirror.js"></script>
-<script src="{{ URL_ROOT }}/static/yaksh/js/codemirror/mode/python/python.js"></script>
-<script src="{{ URL_ROOT }}/static/yaksh/js/codemirror/mode/clike/clike.js"></script>
-<script src="{{ URL_ROOT }}/static/yaksh/js/codemirror/mode/shell/shell.js"></script>
-<script src="{{ URL_ROOT }}/static/yaksh/js/mathjax/MathJax.js?config=TeX-MML-AM_CHTML"></script>
-<script src="{{ URL_ROOT }}/static/yaksh/js/jquery-sortable.js"></script>
+
+
+<script src="{% static 'yaksh/js/requesthandler.js' %}"></script>
+<script src="{% static 'yaksh/js/codemirror/lib/codemirror.js' %}"></script>
+<script src="{% static 'yaksh/js/codemirror/mode/python/python.js' %}"></script>
+<script src="{% static 'yaksh/js/codemirror/mode/clike/clike.js' %}"></script>
+<script src="{% static 'yaksh/js/codemirror/mode/shell/shell.js' %}"></script>
+<script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML"></script>
+<script src="{% static 'yaksh/js/jquery-sortable.js' %}"></script>
 <script>
 init_val = '{{ last_attempt|escape_quotes|safe }}';
 lang = "{{ question.language }}"
@@ -34,9 +37,9 @@ is_exercise = "{{ quiz.is_exercise }}"
 can_skip = "{{ can_skip }}"
 delay_time = new Number("{{ delay_time }}")
 
-var time_left = {{ paper.time_left }}
+var time_left = "{{ paper.time_left }}"
 {% if quiz.is_exercise %}
-    time_left = {{ delay_time }}
+    time_left = "{{ delay_time }}"
 {% endif %}
 
 function getTimeRemaining(endtime){
@@ -115,252 +118,273 @@ question_type = "{{ question.type }}"
 
 
 {% block main %}
-        <form id="code" action="{{URL_ROOT}}/exam/{{ question.id }}/check/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/" method="post" enctype="multipart/form-data">
-        {% csrf_token %}
-        <input type=hidden name="question_id" id="question_id" value={{ question.id }}></input>
-            <div class="yakshwell">
-                  <div class="card ">
-                    <div class="col-md-12 bg-light">
-                      <div class="row align-items-center ">
-                          <div class="col-md-6 yakshheading"> {{ question.summary }} </div>
-                          <div class="col-md-3 ml-auto yakshwell text-center">
-                               {% if question.type == "mcq" %}
-                               SINGLE CORRECT CHOICE
-                               {% elif question.type == "mcc" %}
-                               MULTIPLE CORRECT CHOICES
-                               {% elif question.type == "code" %}
-                               PROGRAMMING
-                               {% elif question.type == "upload" %}
-                               ASSIGNMENT UPLOAD
-                               {% elif question.type == "integer" %}
-                               FILL IN THE BLANKS WITH INTEGER ANSWER
-                               {% elif question.type == "string" %}
-                               FILL IN THE BLANKS WITH STRING ANSWER
-                                  {% if testcase.string_check == "lower" %}
-                                      <br>(CASE INSENSITIVE)
-                                  {% else %}
-                                      <br>(CASE SENSITIVE)
-                                  {% endif %}
-                               {% elif question.type == "float" %}
-                               FILL IN THE BLANKS WITH FLOAT ANSWER
-                               {% elif question.type == "arrange" %}
-                               ARRANGE THE OPTIONS IN CORRECT ORDER
-                               {% endif %}
-                          </div>
-                          <div class="col-md-2 ml-auto text-center">
-                            <div class="row">
-                              <div class="col-md-6">
-                                <h5>
-                                  <span class="badge badge-warning">
-                                    {{ question.points }} Marks
-                                  </span>
-                                </h5>
-                              </div>
-                            </div>
-                          </div>
-                      </div>
-                    </div>
-                    <div class="yakshwell">
-                        <font size=3 face=arial> {{ question.description|safe }} </font>
-                        {% if files %}
-                            <div class="yakshwell col-md-5">
-                                <div class="card yakshwell">
-                                <span> Files to download for this question </span> <hr>
-                                {% for f_name in files %}
-                                  <div class="yakshwell">
-                                    <a href="{{f_name.file.url}}" class="btn btn-outline-secondary btn-sm " target="_blank">{{f_name.get_filename}}</a>
-                                    <br>
-                                    </div>
-                                {% endfor %}
-                                </div>
-                            </div>
-                        {% endif %}
-                    </div>
-                </div>
-                <br/>
-      <center>
-        {% if notification %}
-          {% if question.type == "code" %}
-          <div id="notification" class="alert alert-success col-md-8 animated flash" role="alert">
-            <strong>Note:</strong> {{ notification }}
+  <div>
+    <center>
+      {% if notification %}
+        {% if question.type == "code" %}
+        <div id="notification" class="alert alert-info col-md-8" role="alert">
+          <button type="button" class="close" data-dismiss="alert">
+            <i class="fa fa-close"></i>
+          </button>
+          <strong>Note:</strong> {{ notification }}
+        </div>
+        {% else %}
+        <div id="notification" class="alert alert-info col-md-8" role="alert">
+          <button type="button" class="close" data-dismiss="alert">
+            <i class="fa fa-close"></i>
+          </button>
+          <strong>Note:</strong> {{ notification }}
+        </div>
+        {% endif %}
+      {% else %}
+        <div id="notification" role="alert">
+        </div>
+      {% endif %}
+    </center>
+  </div>
+  <form id="code" action="{% url 'yaksh:check' question.id paper.attempt_number module.id paper.question_paper.id course.id %}" method="post" enctype="multipart/form-data">
+    {% csrf_token %}
+    <input type=hidden name="question_id" id="question_id" value="{{ question.id }}"></input>
+    <div class="card">
+      <div class="card-header">
+        <div class="row">
+          <div class="col-md-6">
+            {{ question.summary }}
           </div>
-          {% else %}
-          <div id="notification" class="alert alert-warning col-md-8 animated flash" role="alert">
-            <strong>Note:</strong> {{ notification }}
+          <div class="col-md-4">
+            {% if question.type == "mcq" %}
+              SINGLE CORRECT CHOICE
+            {% elif question.type == "mcc" %}
+              MULTIPLE CORRECT CHOICES
+            {% elif question.type == "code" %}
+              PROGRAMMING
+            {% elif question.type == "upload" %}
+              ASSIGNMENT UPLOAD
+            {% elif question.type == "integer" %}
+              FILL IN THE BLANKS WITH INTEGER ANSWER
+            {% elif question.type == "string" %}
+              FILL IN THE BLANKS WITH STRING ANSWER
+              {% if testcase.string_check == "lower" %}
+                  <br>(CASE INSENSITIVE)
+              {% else %}
+                  <br>(CASE SENSITIVE)
+              {% endif %}
+            {% elif question.type == "float" %}
+              FILL IN THE BLANKS WITH FLOAT ANSWER
+            {% elif question.type == "arrange" %}
+              ARRANGE THE OPTIONS IN CORRECT ORDER
+            {% endif %}
           </div>
-          {% endif %}
-        {% else %}
-          <div id="notification" role="alert">
+          <div class="col-md-2">
+            <span class="badge badge-info">
+              {{ question.points }} Marks
+            </span>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div>
+          {{ question.description|safe }}
+        </div>
+        {% if files %}
+          <div class="col-md-5">
+              <div class="card">
+                <div class="card-header">
+                  <span> Files to download for this question </span>
+                </div>
+                <div class="card-body">
+                  {% for f_name in files %}
+                      <a href="{{f_name.file.url}}" class="list-group-item" target="_blank">{{f_name.get_filename}}
+                      </a>
+                  {% endfor %}
+                </div>
+              </div>
           </div>
         {% endif %}
-      </center>
-                        {% if quiz.is_exercise %}
-                            {% if can_skip %}
-                                <div class = "card col-md-8" id="solution">
-                            {% else %}
-                                <div id="solution" style="display:none">
-                            {% endif %}
-                                {% if question.solution %}
-                                <h4><u> Solution by teacher</u></h4>
-                                {% endif%}
-                                <font size=3 face=arial> {{ question.solution|safe }} </font>
-                                </div>
-                        {% endif %}
-                 <div class="card">
-                  <div class="yakshwell">
-                     {% if question.type == "mcq" %}
-                     {% for test_case in test_cases %}
-                     {% if last_attempt and last_attempt|safe == test_case.id|safe %}
-                     <input name="answer" type="radio" value="{{ test_case.id }}" checked />
-                        {{ test_case.options|safe }} <br/>
-                     {% else %}
-                     <input name="answer" type="radio" value="{{ test_case.id }}" />
-                        {{ test_case.options|safe }} <br/>
-                     {% endif %}
-                     {% endfor %}
-                     {% endif %}
 
-                     {% if question.type == "integer" %}
-                     Enter Integer:<br/>
-                     <input autofocus name="answer" type="number" id="integer" value="{{ last_attempt|safe }}" />
-                     <br/><br/>
-                     {% endif %}
+        {% if quiz.is_exercise %}
+          <div>
+            {% if can_skip %}
+              <div class = "card col-md-8" id="solution">
+            {% else %}
+              <div id="solution" style="display:none">
+            {% endif %}
+            {% if question.solution %}
+            <h4><u> Solution by teacher</u></h4>
+            {% endif %}
+            <font size=3 face=arial> {{ question.solution|safe }} </font>
+            </div>
+          </div>
+        {% endif %}
+        <br>
+        <div>
+          <!-- MCQ type question -->
+          {% if question.type == "mcq" %}
+            {% for test_case in test_cases %}
+              {% if last_attempt and last_attempt|safe == test_case.id|safe %}
+              <input name="answer" type="radio" value="{{ test_case.id }}" checked />
+                {{ test_case.options|safe }} <br/>
+              {% else %}
+              <input name="answer" type="radio" value="{{ test_case.id }}" />
+                {{ test_case.options|safe }} <br/>
+              {% endif %}
+            {% endfor %}
+          {% endif %}
 
-                     {% if question.type == "string" %}
-                     Enter Text:<br/>
-                     <textarea autofocus name="answer" id="string">{{ last_attempt|safe }}</textarea>
-                     <br/><br/>
-                     {% endif %}
+          <!-- Integer type question -->
+          {% if question.type == "integer" %}
+            Enter Integer:<br/>
+            <input autofocus name="answer" type="number" id="integer" value="{{ last_attempt|safe }}" />
+            <br><br>
+          {% endif %}
 
-                     {% if question.type == "float" %}
-                     Enter Decimal Value :<br/>
-                     <input autofocus name="answer" type="number" step="any" id="float" value="{{ last_attempt|safe }}" />
-                     <br/><br/>
-                     {% endif %}
+          <!-- String type question -->
+          {% if question.type == "string" %}
+            Enter Text:<br/>
+            <textarea autofocus name="answer" id="string">{{ last_attempt|safe }}</textarea>
+            <br/><br/>
+          {% endif %}
 
-                     {% if question.type == "mcc" %}
-                     {% for test_case in test_cases %}
-                     {% if last_attempt and test_case.id|safe in last_attempt|safe %}
-                     <input name="answer" type="checkbox" value="{{ test_case.id }}" checked/> {{ test_case.options| safe }}
-                     <br>
-                     {% else %}
-                     <input name="answer" type="checkbox" value="{{ test_case.id }}">
-                     {{ test_case.options| safe }}
-                     <br/>
-                     {% endif %}
-                     {% endfor %}
-                     {% endif %}
-                     {% if question.type == "upload" %}
-                     <p>Upload assignment file for the said question<p>
-                     <input type=file id="assignment" name="assignment" multiple="">
-                     {% endif %}
+          <!-- Float type question -->
+          {% if question.type == "float" %}
+            Enter Decimal Value :<br/>
+            <input autofocus name="answer" type="number" step="any" id="float" value="{{ last_attempt|safe }}" />
+            <br/><br/>
+          {% endif %}
 
-                     {% if question.type == "arrange" %}
-                       {% if last_attempt %}
-                        {% get_answer_for_arrange_options last_attempt question as test_cases %}
-                       {% endif %}
-                       <input name="answer" type="hidden" id='arrange_order'/>
-                       <div class="list-group">
-                       <ol class="arrange ">                      
-                       {% for test_case in test_cases %}                     
-                        <li class="list-group-item yakshlight" id={{test_case.id}}>{{test_case.options| safe }}</li> {% endfor %}                    
-                        </ol>                      
-                      </div>
-                       <script type="text/javascript">
-                        var arrange = $("ol.arrange");
-                        var order_array = $(arrange).sortable(['serialize']);
-                       </script>
-                     {% endif %}
+          <!-- MCC type question -->
+          {% if question.type == "mcc" %}
+            {% for test_case in test_cases %}
+              {% if last_attempt and test_case.id|safe in last_attempt|safe %}
+              <input name="answer" type="checkbox" value="{{ test_case.id }}" checked/>
+                {{ test_case.options| safe }}
+              <br>
+              {% else %}
+              <input name="answer" type="checkbox" value="{{ test_case.id }}">
+                {{ test_case.options| safe }}
+              <br>
+              {% endif %}
+            {% endfor %}
+          {% endif %}
 
+          <!-- Upload type question -->
+          {% if question.type == "upload" %}
+            <p>Upload assignment file for the said question<p>
+            <input type=file id="assignment" name="assignment" multiple="">
+          {% endif %}
 
-                    {% if question.type == "code" %}
-                      <div class="row align-items-center">
-                           <div class="col-md-9">
-                               <h5>Write your program below:</h5>
-                           </div>
-                           <div class="col-md-3 ml-auto">
-                               <a href="#answer" class=" btn btn-outline-primary" onclick="confirm()" name="reset" id="reset">Undo Changes&nbsp;<span class="glyphicon glyphicon-refresh"></span></a>
-                               </div>
-                      </div>
-                      <div class="yakshwell">
-                       <textarea  autofocus name="answer" id="answer"></textarea>
-                      </div>
-                    {% endif %}
-                  </div>
-                  </div>
-        <div class="text-center yakshwell">
+          <!-- Arrange type question -->
+          {% if question.type == "arrange" %}
+            {% if last_attempt %}
+              {% get_answer_for_arrange_options last_attempt question as test_cases %}
+            {% endif %}
+            <input name="answer" type="hidden" id='arrange_order'/>
+            <div class="list-group">
+            <ol class="arrange">
+            {% for test_case in test_cases %}
+            <li class="list-group-item yakshlight" id={{test_case.id}}>
+              {{test_case.options| safe }}</li> {% endfor %}
+            </ol>
+            </div>
+            <script type="text/javascript">
+              var arrange = $("ol.arrange");
+              var order_array = $(arrange).sortable(['serialize']);
+            </script>
+          {% endif %}
 
-         {% if question.type == "mcq" or  question.type == "mcc" or question.type == "integer" or question.type == "float" or question.type ==  "string" %}
-         <br><button class="btn btn-success" type="submit" name="check" id="check">Submit Answer</button>&nbsp;&nbsp;
-         {% elif question.type == "upload" %}
-         <br><button class="btn btn-success" type="submit" name="check" id="check" onClick="return validate();">Upload</button>&nbsp;&nbsp;
-         {% elif question.type == "arrange" %}
-         <br><button class="btn btn-success" type="submit" name="check" id="check" onClick="return user_arranged_options();">Submit Answer</button>&nbsp;&nbsp;
+          <!-- Code type question -->
+          {% if question.type == "code" %}
+            <div class="row align-items-center">
+              <div class="col-md-9">
+                <h5>Write your program below:</h5>
+              </div>
+              <div class="col-md-3 ml-auto">
+                <a href="#answer" class=" btn btn-outline-primary" onclick="confirm()" name="reset" id="reset">Undo Changes&nbsp;<span class="fa fa-refresh"></span></a>
+              </div>
+            </div>
+            <br>
+            <div>
+              <textarea  autofocus name="answer" id="answer"></textarea>
+            </div>
+          {% endif %}
 
+          <!-- Submit Buttons -->
+          <br>
+          <div>
+            {% if question.type == "mcq" or  question.type == "mcc" or question.type == "integer" or question.type == "float" or question.type ==  "string" %}
+              <br><button class="btn btn-success" type="submit" name="check" id="check">Submit Answer</button>
+            {% elif question.type == "upload" %}
+              <br><button class="btn btn-success" type="submit" name="check" id="check" onClick="return validate();">Upload</button>
+            {% elif question.type == "arrange" %}
+              <br><button class="btn btn-success" type="submit" name="check" id="check" onClick="return user_arranged_options();">Submit Answer</button>
+            {% else %}
+              {% if question in paper.get_questions_unanswered or quiz.is_exercise %}
+                <button class="btn btn-success" type="submit" name="check" id="check" >
+                  Check Answer <span class="glyphicon glyphicon-cog"></span>
+                </button>
+              {% endif %}
+            {% endif %}
+            {% if quiz.is_exercise %}
+              {% if can_skip %}
+                 <button id="skip_ex" class="btn btn-primary"  onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/')" name="skip"> Next <span class="glyphicon glyphicon-arrow-right"></span></button>
+              {% else %}
+                 <button id="skip_ex" class="btn btn-primary"  onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/')" name="skip" style="visibility:hidden"> Next <span class="fa fa-step-forward"></span></button>
+              {% endif %}
+            {% endif %}
 
-         {% else %}
-           {% if question in paper.get_questions_unanswered or quiz.is_exercise %}
-           <button class="btn btn-success" type="submit" name="check" id="check" >Check Answer <span class="glyphicon glyphicon-cog"></span></button>&nbsp;&nbsp;
-           {% endif %}
-         {% endif %}
-         {% if quiz.is_exercise %}
-         {% if can_skip %}
-             <button id="skip_ex" class="btn btn-primary"  onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/')" name="skip"> Next <span class="glyphicon glyphicon-arrow-right"></span></button>
-         {% else %}
-             <button id="skip_ex" class="btn btn-primary"  onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/')" name="skip" style="visibility:hidden"> Next <span class="fa fa-step-forward"></span></button>
-        {% endif %}
-        {% endif %}
+            {% if paper.question_paper.quiz.allow_skip and not paper.get_questions_unanswered|length_is:"1" %}
+              {% if question in paper.get_questions_unanswered %}
+              <button class="btn btn-primary"  onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/')" name="skip" id="skip">
+                Attempt Later <span class="fa fa-step-forward"></span>
+              </button>
+              {% endif %}
+            {% endif %}
+          </div>
+        </div>
+      </div>
+    </div>
+  </form>
 
-         {% if paper.question_paper.quiz.allow_skip and not paper.get_questions_unanswered|length_is:"1" %}
-         {% if question in paper.get_questions_unanswered %}
-         <button class="btn btn-primary"  onclick="call_skip('{{ URL_ROOT }}/exam/{{ question.id }}/skip/{{ paper.attempt_number }}/{{ module.id }}/{{ paper.question_paper.id }}/{{course.id}}/')" name="skip" id="skip">Attempt Later <span class="fa fa-step-forward"></span></button>
-         {% endif %}
-         {% endif %}
-       </div>
-         </form>
-         
-     </div>
-   </div>
-   <br/>
-   <p id="status"></p>
+  <!-- Errors for code questions -->
+  <p id="status"></p>
   {% if question.type == 'code' or question.type == 'upload' %}
-  <div class="row" id="error_panel"></div>
+  <div id="error_panel"></div>
   {% endif %}
          
-    <!-- Modal -->
-    <div class="modal" id="upload_alert" >
-      <div class="modal-dialog">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h4 class="modal-title" id="myModalLabel">File not selected</h4>
-          </div>
-          <div id = "modal_body"class="modal-body">
-              <font color="brown"><b>Kindly attach a file and then click upload.</b></font>
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
-          </div>
+  <!-- Modal -->
+  <div class="modal" id="upload_alert" >
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title" id="myModalLabel">File not selected</h4>
+        </div>
+        <div id = "modal_body"class="modal-body">
+            <font color="brown"><b>Kindly attach a file and then click upload.</b></font>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
         </div>
       </div>
-   </div>
+    </div>
+  </div>
 
-   <!-- UNDO CHANGES Modal -->
-    <div class="modal" id="undo_changes" >
-      <div class="modal-dialog">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h4 class="modal-title" id="myModalLabel">Are you Sure?</h4>
-          </div>
-          <div id = "modal_body"class="modal-body">
-              <font color="brown"><b>Your code will be reset.</b></font>
-          </div>
-          <div class="modal-footer">
-            <button type="button" class="btn btn-warning" onclick="reset_editor()">OK</button>
-            <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
-          </div>
+ <!-- UNDO CHANGES Modal -->
+  <div class="modal" id="undo_changes" >
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title" id="myModalLabel">Are you Sure?</h4>
+        </div>
+        <div id = "modal_body"class="modal-body">
+            <font color="brown"><b>Your code will be reset.</b></font>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-warning" onclick="reset_editor()">OK</button>
+          <button type="button" class="btn btn-primary" data-dismiss="modal">Cancel</button>
         </div>
       </div>
-   </div>
+    </div>
+  </div>
 
 {% endblock main %}
 
diff --git a/yaksh/templates/yaksh/quit.html b/yaksh/templates/yaksh/quit.html
index dd06ff9..7429436 100644
--- a/yaksh/templates/yaksh/quit.html
+++ b/yaksh/templates/yaksh/quit.html
@@ -1,13 +1,13 @@
 {% extends "base.html" %}
+{% load static %}
 
 {% block nav %} 
 <div class="container-fluid yakshnav">
   <nav class="navbar fixed-top navbar-expand-lg yakshheading yakshnav">
     <div class="container">
-      <a class="navbar-brand">
-          <img src="{{ URL_ROOT }}/static/yaksh/images/yaksh_banner.png" alt="YAKSH">
-          </img>
-       </a>
+        <a class="navbar-brand" href="{% url 'yaksh:index' %}">
+            <img src="{% static 'yaksh/images/yaksh_banner.png' %}" alt="YAKSH">
+        </a>
     </div><!-- /.container -->
   </nav><!-- /.navbar -->
 </div>
@@ -15,11 +15,11 @@
 
 {% block content %}
 <center>
-<div class="col-md-8 yakshwell">
+<div class="col-md-8">
     <h3>Submission Status</h3>
     <table class="table table-bordered table-responsive-sm" >
         <thead>
-            <tr class="yakshred text-center">
+            <tr class="text-center">
                 <th> Question</th>
                 <th> Status </th>
             </tr>
@@ -32,7 +32,7 @@
                     <td> {{ question.summary }} </td>
                     <td> Attempted </td>
                 {% else %}
-                    <tr class="table-danger">
+                    <tr class="table-warning">
                     <td> {{ question }} </td>
                     <td> Not completed </td>
                 {% endif %}
@@ -50,11 +50,11 @@
         <center><h4> Are you sure you wish to quit the exam?</h4></center>
         <center><h4> Be sure, as you won't be able to restart this exam.</h4></center>
     {% endif %}
-	<form action="{{URL_ROOT}}/exam/complete/{{ paper.attempt_number }}/{{module_id}}/{{ paper.question_paper.id }}/{{course_id}}/" method="post">
+	<form action="{% url 'yaksh:complete' paper.attempt_number module_id paper.question_paper.id course_id %}" method="post">
 	{% csrf_token %}
 	<center>
-        <button class="btn btn-outline-success" type="submit" name="yes">Yes!</button>&nbsp;
-        <button class="btn btn-outline-danger" type="button" name="no" onClick="window.location='{{ URL_ROOT }}/exam/start/{{ paper.attempt_number }}/{{module_id}}/{{ paper.question_paper.id }}/{{course_id}}'">No!</button>
+        <button class="btn btn-outline-success btn-lg" type="submit" name="yes">Yes</button>
+        <a class="btn btn-outline-danger btn-lg" name="no" href="{% url 'yaksh:start_quiz' paper.attempt_number module_id paper.question_paper.id course_id %}">No</a>
     </center>
 	</form>
 {% endblock content %}
diff --git a/yaksh/templates/yaksh/quizzes_user.html b/yaksh/templates/yaksh/quizzes_user.html
index eb3705e..a1ee600 100644
--- a/yaksh/templates/yaksh/quizzes_user.html
+++ b/yaksh/templates/yaksh/quizzes_user.html
@@ -7,186 +7,182 @@
 
 {% block main %}
 <div class="container">
-    {% if msg %}
-         <center><div class="col-md-8 alert alert-warning animated flash" role="alert">
-           {{ msg }}
-        </div></center>
-    {% endif %}
-
     {% block navtab %}
         {% if 'Enrolled Courses' not in title%}
             <div class="container">
-                <div class="nav nav-tabs yakshnavtab">
+                <div class="nav nav-pills">
                   <li class="nav-item" >
-                    <a class="active nav-link bg-light" href="{{ URL_ROOT }}/exam/quizzes/" id="yakshactive">ALL COURSES</a>
+                    <a class="active nav-link" href="{% url 'yaksh:quizlist_user' %}">
+                        All Courses
+                    </a>
                   </li>
                   <li class="nav-item">
-                    <a class="nav-link" href="{{ URL_ROOT }}/exam/quizzes/enrolled/">ENROLLED COURSES</a>
+                    <a class="nav-link" href="{% url 'yaksh:quizlist_user' 'enrolled' %}">
+                        Enrolled Courses
+                    </a>
                   </li>
                 </div>
             </div>
-            <div class="row justify-content-center yakshwell">
-            <div class="col-md-6">
-                <div class="yakshwell">
-                        <form action="{{ URL_ROOT }}/exam/quizzes/" method="post" id="custom-search-form" >
-                            {% csrf_token %}
-                            <div class="col-md-12">
-                                <div class="input-group">
-                                    <div class="input-group-prepend">
-                                    <span class="input-group-text" id="basic-addon1">Search Course</span>
-                                    </div>
-                                    <input type="text" name="course_code" class="form-control" type="search"  placeholder="Enter Course-Code">
-                                    <span class="input-group-append">
-                                        <button class="btn btn-outline-secondary" type="submit"><i class="fa fa-search yakshred"></i></button>
-                                        <button class="btn btn-outline-secondary" type="button" name="button" onClick='location.replace("{{URL_ROOT}}/exam/quizzes/");'>Go Back</button>
-                                    </span>
-                                </div>
+            <hr>
+            <div class="row justify-content-center">
+                <div class="col-md-8">
+                    <form action="{% url 'yaksh:quizlist_user' %}" method="post" id="custom-search-form" >
+                        {% csrf_token %}
+                        <div class="col-md-12">
+                            <div class="input-group">
+                                <input type="text" name="course_code" class="form-control" type="search"  placeholder="Enter course code to search">
+                                <span class="input-group-append">
+                                    <button class="btn btn-outline-primary" type="submit"><i class="fa fa-search"></i>&nbsp;Search</button>
+                                </span>
                             </div>
-                        </form>
+                        </div>
+                    </form>
                 </div>
             </div>
-            </div>
         {% else %}
         <div class="container">
-                <div class="nav nav-tabs yakshnavtab">
-                  <li class="nav-item" >
-                    <a class="nav-link" href="{{ URL_ROOT }}/exam/quizzes/">ALL COURSES</a>
-                  </li>
-                  <li class="nav-item">
-                    <a class="active nav-link bg-light" href="{{ URL_ROOT }}/exam/quizzes/enrolled/" id="yakshactive">ENROLLED COURSES</a>
-                  </li>
-                </div>
+            <div class="nav nav-pills">
+              <li class="nav-item" >
+                <a class="nav-link" href="{% url 'yaksh:quizlist_user' %}">
+                    All Courses
+                </a>
+              </li>
+              <li class="nav-item">
+                <a class="active nav-link" href="{% url 'yaksh:quizlist_user' 'enrolled' %}">
+                    Enrolled Courses
+                </a>
+              </li>
             </div>
+        </div>
+        <hr>
         {% endif %}
     {% endblock %}
-
+    <br>
+    {% if msg %}
+        <div class="alert alert-dismissible alert-warning">
+            <button type="button" class="close" data-dismiss="alert">
+                <i class="fa fa-close"></i>
+            </button>
+            <strong>{{ msg }}</strong>
+        </div>
+    {% endif %}
+    <br>
     {% if not courses %}
-        <center><div class="col-md-8 alert alert-warning animated flash" role="alert">
+        <center><div class="col-md-8 alert alert-warning" role="alert">
             No Courses to display
         </div></center>
     {% endif %}
-
     <div class="row justify-content-md-center align-items-center" >
-    <div class="col col-sm-10 yakshwell">
-    {% for course in courses %}
-        <div class="yakshwell">
-            <div class="row yakshlabel align-items-center">
-                <div class="col">
-                    <a data-toggle="collapse" href="#collapsedetails{{course.data.id}}" role="button" aria-expanded="false" aria-controls="#collapsedetails{{course.data.id}}">
-                        <h4><b>
-                            {{ course.data.name }} by {{ course.data.creator.get_full_name }}
-                        </b></h4>
-                    </a>
-                    {% if course.data.is_active_enrollment %}
-                        <div class="text-left">
-                            <span class="yakshgreen">{{course.data.start_enroll_time}}</span>&nbsp;&nbsp; to &nbsp;&nbsp;<span class="yakshgreen">{{course.data.end_enroll_time}}</span>
-                        </div>
-                    {% endif %}
-                </div>
-                <div class="col-sm-auto">
-                    {% if course.data.days_before_start != 0 %}
-                    <span class="label label-info" style="font-size: 15px">
-                        {{course.data.days_before_start}} day(s) to start
-                    </span>
-                    {% endif %}
-
-                </div>
-                <div class="container-fluid">
-                    <a class="btn btn-primary" data-toggle="collapse" href="#collapsedetails{{course.data.id}}" role="button" aria-expanded="false" aria-controls="#collapsedetails{{course.data.id}}">DETAILS</a>
-                    {% if user in course.data.requests.all %} <span class="badge badge-warning">Request Pending </span>
-                    {% elif user in course.data.rejected.all %}<span class="badge badge-danger">Request Rejected</span>
-                    {% elif user in course.data.students.all %}
-                    {% if course.data.has_lessons %}
-                        <a href="{% url 'yaksh:download_course' course.data.id %}" data-toggle="tooltip" title="Download course content" class="btn btn-primary">
-                            Download Course
-                        </a>
-                    {% endif %}
-                    <a class="btn btn-success" href="{{URL_ROOT}}/exam/course_modules/{{course.data.id}}" >
-                        {% if course.completion_percentage > 0 %}
-                            CONTINUE
-                        {% else %}
-                            START
-                        {% endif %}
-                    </a>
-                    {% else %}
-                        {% if course.data.active %}
-                            {% if course.data.is_active_enrollment %}
-                                {% if course.data.is_self_enroll %}
-                                    <a class="btn btn-success" href="{{ URL_ROOT }}/exam/self_enroll/{{ course.data.id }}">ENROLL</a>
+        <div class="col-md-12">
+            <div id="accordian">
+            {% for course in courses %}
+                <div class="card">
+                    <div class="card-header">
+                        <div class="row">
+                            <div class="col-md-7">{{course.data.name}}</div>
+                            <div class="col-md-2">
+                                <a class="card-link btn btn-info" data-toggle="collapse" href="#collapse{{course.data.id}}">
+                                    Details&nbsp;<i class="fa fa-toggle-down" id="toggle_course_{{course.id}}"></i>
+                                </a>
+                            </div>
+                            <div class="col-md-2">
+                                {% if user in course.data.requests.all %}
+                                    <span class="badge badge-warning badge-pill">
+                                        Request Pending
+                                    </span>
+                                {% elif user in course.data.rejected.all %}
+                                    <span class="badge badge-danger badge-pill">
+                                        Request Rejected
+                                    </span>
+                                {% elif user in course.data.students.all %}
+                                    {% if course.completion_percentage > 0 %}
+                                        <a class="btn btn-primary" href="{% url 'yaksh:course_modules' course.data.id %}" >
+                                            Continue
+                                        </a>
+                                    {% else %}
+                                        <a class="btn btn-success" href="{% url 'yaksh:course_modules' course.data.id %}">
+                                            Start
+                                        </a>
+                                    {% endif %}
                                 {% else %}
-                                    <a class="btn btn-success" href="{{ URL_ROOT }}/exam/enroll_request/{{ course.data.id }}">ENROLL</a>
+                                    {% if course.data.active %}
+                                        {% if course.data.is_active_enrollment %}
+                                            {% if course.data.is_self_enroll %}
+                                                <a class="btn btn-primary" href="{{ URL_ROOT }}/exam/self_enroll/{{ course.data.id }}">Enroll</a>
+                                            {% else %}
+                                                <a class="btn btn-primary" href="{{ URL_ROOT }}/exam/enroll_request/{{ course.data.id }}">Enroll</a>
+                                            {% endif %}
+                                        {% else %}
+                                            <span class="badge badge-danger badge-pill">
+                                                Enrollment Closed
+                                            </span>
+                                        {% endif %}
+                                    {% else %}
+                                        <span class="badge badge-danger">
+                                            Inactive Course
+                                        </span>
+                                    {% endif %}
                                 {% endif %}
-                            {% else %}
-                                <span class="btn btn-danger disabled" style="font-size: 15px">
-                                    Enrollment Closed
-                                </span>
-                            {% endif %}
-                        {% else %}
-                            <span class="badge badge-danger" style="font-size: 15px">
-                                Inactive Course
-                            </span>
-                        {% endif %}
-                    {% endif %}
-                </div>
-                     <!-- About course-->
-             <div class="collapse container-fluid" id="collapsedetails{{course.data.id}}">
-              <div class="card card-body ">
-                <h4>{{ course.data.name }} by {{ course.data.creator.get_full_name }}</h4><hr>
-                <div class="row">
-                    <div class="col-md-7">
-                        {% if course.data.description %}
-                            <p> <span class="yakshred yakshheading">About the course</span><br>
-                               {{ course.data.description }}
-                            </p>
-                        {% endif %}
-                        {% if course.data.get_learning_modules %}
-                            <p> <span class="yakshred yakshheading">What you'll learn</span>
-                                <ul>
-                                    {% for module in course.data.get_learning_modules %}
-                                    <li>{{module.name|title}}</li>
-                                    {% endfor %}
-                                </ul>
-                            </p>
-                        {% endif %}
-                        <p> <span class="yakshred yakshheading">Instructor</span><br>
-                            {{ course.data.creator.get_full_name }}
-                        </p>
-                        {% if course.data.instructions %}
-                        <p> <span class="yakshred yakshheading">Instructions</span><br>
-                            {{ course.data.instructions|safe }}
-                        </p>
-                        {% endif %}
-                    </div>
-                    <div class="col-md-4">
-                        <div class="row my-3">
-                            <div class="col-md-5">
-                                STARTS ON
-                            </div>
-                            <div class="col-md-7">
-                                {{course.data.start_enroll_time}}
                             </div>
                         </div>
-                        <div class="row my-3">
-                            <div class="col-md-5">
-                                ENDS ON
-                            </div>
-                            <div class="col-md-7">
-                                {{course.data.end_enroll_time}}
+                    </div>
+                    <div id="collapse{{course.data.id}}" class="collapse hide" data-parent="#accordion">
+                        <div class="card-body">
+                            <div class="row">
+                                <div class="col-md-8">
+                                    <p><b>Instructor:</b> {{course.data.creator.get_full_name|title}}</p>
+                                    {% with course.data.get_learning_modules as modules %}
+                                        {% if modules %}
+                                            <p> <span class="badge badge-pill badge-primary">
+                                                What you'll learn</span>
+                                                <ul>
+                                                    {% for module in modules %}
+                                                        <li>{{module.name|title}}</li>
+                                                    {% endfor %}
+                                                </ul>
+                                            </p>
+                                        {% endif %}
+                                    {% endwith %}
+                                    {% if course.data.instructions %}
+                                        <p> <span class="badge badge-pill badge-primary">
+                                            Instructions</span><br>
+                                            {{ course.data.instructions|safe }}
+                                        </p>
+                                    {% endif %}
+                                </div>
+                                <div class="col-md-4">
+                                    <p><b>Starts On:</b> {{course.data.start_enroll_time}}</p>
+                                    <p><b>Ends On:</b> {{course.data.end_enroll_time}}</p>
+                                    {% with course.completion_percentage as percent %}
+                                    <p><b>Course Progress:</b></p>
+                                    <div class="progress">
+                                        {% if percent %}
+                                            {% if percent <= 50 %}
+                                                <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="{{percent}}"
+                                                aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
+                                            {% elif percent <= 75 %}
+                                                <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="{{percent}}"
+                                                aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
+                                            {% else %}
+                                                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="{{percent}}"
+                                                aria-valuemin="0" aria-valuemax="100" style="width:{{percent}}%">
+                                            {% endif %}
+                                            <b style="color: white;">{{percent}}% completed</b>
+                                            </div>
+                                        {% else %}
+                                            <b style="color: black;">0% completed</b>
+                                        {% endif %}
+                                    </div>
+                                    {% endwith %}
+                                </div>
                             </div>
                         </div>
-                        <div class="row my-3">
-                                <div class="progress-bar bg-success" role="progressbar" style="width:{{course.completion_percentage}}%"; color: black;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">{{course.completion_percentage}} % completed
-                        </div>
-                        </div>
                     </div>
                 </div>
-              </div>
-            </div>
-               <!-- End of About course-->
+                <br>
+            {% endfor %}
             </div>
         </div>
-    {% endfor %}
-    </div>
     </div>
 </div>
 
diff --git a/yaksh/templates/yaksh/show_video.html b/yaksh/templates/yaksh/show_video.html
index 9d24b44..967b793 100644
--- a/yaksh/templates/yaksh/show_video.html
+++ b/yaksh/templates/yaksh/show_video.html
@@ -4,166 +4,164 @@
 {% block title %} {{ learning_module.name }} {% endblock %}
     
 
-
 {% block main %}
-
-<div class="row">
-
-    <!-- Side bar -->
-    <div class="col-md-3 yakshlabel collapse" id="sidebar">
-        <center><h4><a class="text-dark" href="{{ URL_ROOT }}/exam/course_modules/{{course.id}}"><i class="fa fa-caret-left"></i> {{course.name}}</h4></center>
-        {% for module in all_modules %}
-        <div class="list-group">         
-    
-            <a href="{{URL_ROOT}}/exam/quizzes/view_module/{{module.id}}/{{course.id}}" id="menu1" class="list-group-item bg-light" data-parent="#sidebar">
-                    {% if module.id == learning_module.id %}
-                        <i class="fa fa-toggle-on yakshred" data-toggle="tooltip" title="Currently on">
-                        </i>
-                    {% else %}
-                        <i class="fa fa-toggle-off" data-toggle="tooltip" title="Currently off"></i>
-                    {% endif %}                
-                {{module}}
+<div class="wrapper">
+    <!-- Sidebar  -->
+    <nav id="sidebar">
+        <div class="sidebar-header">
+            <a class="text-light" href="{% url 'yaksh:course_modules' course.id %}">
+                {{course.name}}
             </a>
-            {% for unit in module.get_learning_units %}
-                {% get_unit_status course module unit user as status %}
-                <span id="menudrop">
-                    {% if unit.type == "quiz" %}
-                        <a href="{{ URL_ROOT }}/exam/start/{{unit.quiz.questionpaper_set.get.id}}/{{module.id}}/{{course.id}}" class="list-group-item" data-parent="#menu1">
-                            {% if status == "completed" %}
-                              <i class="fa fa-check-square yakshgreen"></i>
-                            {% else %}
-                              <i class="fa fa-square-o"></i>
-                            {% endif %}
-                        {{ unit.quiz.description }}
-                            {% if unit.id == current_unit.id %}
-                                <i class="fa fa-thumb-tack yakshred" data-toggle="tooltip" title="Currently on">
-                                </i>
-                            {% endif %}
-                        </a>
-                    {% else %}
-                        <a href="{{ URL_ROOT }}/exam/show_lesson/{{unit.lesson.id}}/{{module.id}}/{{course.id}}" class="list-group-item" data-parent="#menu1">
-                            {% if status == "completed" %}
-                              <i class="fa fa-check-square yakshgreen"></i>
-                            {% else %}
-                              <i class="fa fa-square-o"></i>
-                            {% endif %}
-                        {{ unit.lesson.name }}
-                            {% if unit.id == current_unit.id %}
-                                <i class="fa fa-thumb-tack yakshred" data-toggle="tooltip" title="Currently on">
-                                </i>
-                            {% endif %}
-                        </a>
-                    {% endif %}
-                </span>
-            {% endfor %}          
-
         </div>
+        {% for module in all_modules %}
+            <div id="accordian">
+                <div class="card">
+                    <div class="card-header" style="height: 120px">
+                        <div class="row">
+                            <div class="col-md-10">
+                                <a href="{% url 'yaksh:view_module' module.id course.id %}">
+                                    {{module.name}}
+                                    {% if module.id == learning_module.id %}
+                                        <i class="fa fa-thumb-tack" data-toggle="tooltip" title="Currently on"></i>
+                                    {% endif %}
+                                </a>
+                            </div>
+                            <div class="col-md-2">
+                                <a class="card-link" data-toggle="collapse" href="#collapse{{module.id}}">
+                                    <i class="fa fa-angle-down"></i>
+                                </a>
+                            </div>
+                        </div>
+                    </div>
+                    <div id="collapse{{module.id}}" class="collapse hide" data-parent="#accordion">
+                        <div class="card-body">
+                            {% for unit in module.get_learning_units %}
+                                {% get_unit_status course module unit user as status %}
+                                {% if unit.type == "quiz" %}
+                                    <a href="{% url 'yaksh:start_quiz' unit.quiz.questionpaper_set.get.id module.id course.id %}" class="list-group-item">
+                                        {% if status == "completed" %}
+                                          <i class="fa fa-check-square"></i>
+                                        {% else %}
+                                          <i class="fa fa-square-o"></i>
+                                        {% endif %}
+                                        {{ unit.quiz.description }}
+                                        {% if unit.id == current_unit.id %}
+                                            <i class="fa fa-thumb-tack" data-toggle="tooltip" title="Currently on">
+                                            </i>
+                                        {% endif %}
+                                    </a>
+                                {% else %}
+                                    <a href="{% url 'yaksh:show_lesson' unit.lesson.id module.id course.id %}" class="list-group-item">
+                                        {% if status == "completed" %}
+                                          <i class="fa fa-check-square"></i>
+                                        {% else %}
+                                          <i class="fa fa-square-o"></i>
+                                        {% endif %}
+                                        {{ unit.lesson.name }}
+                                        {% if unit.id == current_unit.id %}
+                                            <i class="fa fa-thumb-tack" data-toggle="tooltip" title="Currently on">
+                                            </i>
+                                        {% endif %}
+                                    </a>
+                                {% endif %}
+                            {% endfor %}
+                        </div>
+                    </div>
+                </div>
+            </div>
         {% endfor %}
-    </div>
-     <a href="#sidebar" data-toggle="collapse" id="sidebaricon"><i class="fa fa-navicon fa-lg"></i></a>
-    <!-- End of sidebar-->
+    </nav>
 
-    <main class="col" id="sidebarbody">
+    <!-- Page Content  -->
+    <div id="content">
 
-    <div class="container-fluid yakshwell">
-            <div class="yakshwell bg-light">
-            <div class="row align-items-center ">
-                <div class="col h3 text-center">
-                 {{ learning_module.name }}
-                {% if state == "lesson" %}
-                    : {{lesson.name}}
-                {% endif %}
-                </div>
-            </div>
-            </div>
-            
-           
-            {% if msg %}
+        <button type="button" id="sidebarCollapse" class="btn btn-outline-info">
+            <i class="fa fa-times fa-lg"></i>
+        </button>
+
+        <br><br>
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item">
+                <a href="{% url 'yaksh:course_modules' course.id %}">
+                    {{course.name}}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a href="{% url 'yaksh:view_module' learning_module.id course.id %}">
+                    {{ learning_module.name }}
+                </a>
+            </li>
+            {% if state == "lesson" %}
+                <li class="breadcrumb-item active">{{lesson.name}}</li>
+            {% endif %}
+        </ol>
+        <br>
+
+        {% if msg %}
             <center>
-                <div class="col-md-8 yakshwell">
-                    <div class="alert alert-warning animated flash">{{msg}}</div>
+                <div class="alert alert-dismissible alert-warning">
+                    <button type="button" class="close" data-dismiss="alert">
+                        <i class="fa fa-close"></i>
+                    </button>
+                    <strong>{{ msg }}</strong>
                 </div>
             </center>
-            {% endif %}
+        {% endif %}
 
-            <div class="col-md-12 main">
         {% if state == "module" %}  <!-- Module instructions body -->
-            <div class="row yakshwell">
-                <div class="col-md-8 ">
-                    {{learning_module.html_data|safe}}
-                    {% if learning_module.html_data%}
-                    {% endif %}
-                </div>
-            </div>
-            <div class="yakshwell text-center">
-                {% if first_unit %}
-                    <a href="{{ URL_ROOT }}/exam/next_unit/{{course.id}}/{{learning_module.id}}/{{first_unit.id}}/1" class="btn btn-success">Start
-                        <i class="fa fa-play">
-                        </i>
-                    </a>
-                {% else %}
-                    <a href="{{ URL_ROOT }}/exam/next_unit/{{course.id}}/{{learning_module.id}}" class="btn btn-success">Next
-                        <i class="fa fa-step-forward">
-                        </i>
-                    </a>
-                {% endif %}
-            </div>
-            </div>
+            {% if first_unit %}
+                <a href="{% url 'yaksh:next_unit' course.id learning_module.id first_unit.id '1' %}" class="btn btn-success">Start
+                    <i class="fa fa-play">
+                    </i>
+                </a>
+            {% else %}
+                <a href="{% url 'yaksh:next_unit' course.id learning_module.id %}" class="btn btn-success">Next
+                    <i class="fa fa-step-forward">
+                    </i>
+                </a>
+            {% endif %}
+            <br><br>
+            {% if learning_module.html_data %}
+                {{learning_module.html_data|safe}}
+            {% else %}
+                No Module information
+            {% endif %}
         {% else %}    <!--  Lesson body   -->
-            
-            <div class="yakshwell">
-                <div class="yakshwell text-center ">
-                    {{lesson.html_data|safe}}
-                </div>
-                {% if lesson.get_files %}
-                    <div class="yakshwell col-md-5">
-                        <div class="card yakshwell">
-                        <span class="h4"> Files for this lesson </span> <hr>
-                        <span  class="col-md-2">
-                        {% for f in lesson.get_files %}
-                            <div class="yakshwell">
-                                <a href="{{f.file.url}}" class="btn btn-outline-secondary"><b>{{forloop.counter}}.</b> {{ f.file.name|file_title }}</a>
-                                <br>
+            <a href="{% url 'yaksh:next_unit' course.id learning_module.id current_unit.id %}" class="btn btn-info" >
+                Next&nbsp;<i class="fa fa-step-forward"></i>
+            </a>
+            <br><br>
+            {{lesson.html_data|safe}}
+            <br>
+            {% with lesson.get_files as lesson_files %}
+                {% if lesson_files %}
+                    <div class="col-md-7">
+                        <div class="card">
+                            <div class="card-header">
+                                Files for this lesson
+                            </div>
+                            <div class="card-body">
+                                {% for f in lesson_files %}
+                                    <a href="{{f.file.url}}" class="list-group-item">
+                                        {{forloop.counter}}.{{ f.file.name|file_title }}
+                                    </a>
+                                {% endfor %}
                             </div>
-                        {% endfor %}
-                        </span>
                         </div>
                     </div>
+                    <br>
                 {% endif %}
-            </div>
-            <div class="yakshwell text-center">
-                <a href="{{ URL_ROOT }}/exam/next_unit/{{course.id}}/{{learning_module.id}}/{{current_unit.id}}" class="btn btn-info" >Next
-                    <i class="fa fa-step-forward">
-                    </i>
-                </a>
-            </div>
+            {% endwith %}
         {% endif %}
-        </div>
     </div>
-    </main>
 </div>
-{% endblock %}
-
-
-{% block footer %}
-  <!--footer-->   
-  <footer class="container-fluid yakshsidebarfooter text-center">
-    <div class="row justify-content-center">
-    <div class="col-sm-5 ">
-      {% if user %}
-         {% block info %}
-         <b>{{user.get_full_name|title}}</b> with Roll no. <b>{{user.profile.roll_number}}</b> is logged in as <b>{{user.username}}</b>
-         {% endblock %}
-         {% endif %}
-    </div>
-    <div class="col-sm-2">
-      |
-    </div>
-    <div class="col-sm-4 text-left">
-     <b>Any Queries?</b> Email : info@fossee.in
-    </div>
-  </div>
-  </footer>
-  <!--footer end-->
+<script type="text/javascript">
+    $(document).ready(function () {
+        $('#sidebarCollapse').on('click', function () {
+            $(this).find('i').toggleClass('fa-times fa-navicon')
+            $('#sidebar').toggleClass('active');
+        });
+    });
+</script>
 {% endblock %}
 
diff --git a/yaksh/templates/yaksh/view_answerpaper.html b/yaksh/templates/yaksh/view_answerpaper.html
index 8e085b6..eeb0bf3 100644
--- a/yaksh/templates/yaksh/view_answerpaper.html
+++ b/yaksh/templates/yaksh/view_answerpaper.html
@@ -1,266 +1,348 @@
 {% extends "user.html" %}
 {% load custom_filters %}
+{% load static %}
 
 {% block pagetitle %} Answer Paper  for {{ quiz.description }}{% endblock pagetitle %}
 
 {% block script %}
-<script src="{{ URL_ROOT }}/static/yaksh/js/mathjax/MathJax.js?config=TeX-MML-AM_CHTML"></script>
-
-{% endblock script %}
-
-{% block main %}
-<div class="yakshwell container">
-{% if not data.papers %}
-    {% if quiz.is_exercise %}
-    <p><b> You have not attempted the Exercise {{ quiz.description }} </b></p>
-    {% else %}
-    <p><b> You have not attempted the quiz {{ quiz.description }} </b></p>
-    {% endif %}
-{% else %}
+<script type="text/javascript" src="{% static 'yaksh/js/jquery.tablesorter.min.js' %}">
+</script>
+<script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML"></script>
+{% endblock %}
+{% block content %}
+<div class="container">
+  <a class="btn btn-primary" href="{% url 'yaksh:course_modules' course_id %}">
+    <i class="fa fa-arrow-left"></i>
+      Back
+  </a>
+  <br><br>
+  {% if data.papers %}
+    <p class="text-center">
     {% for paper in data.papers %}
-    {% if forloop.counter == 2 and data.questionpaperid %}
-    <U><h2> Previous attempts </h2></U>
-    {% endif %}
-    {% if quiz.is_exercise %}
-        <h2> Exercise: {{ paper.question_paper.quiz.description }} </h2>
-    {% else %}
-        <h2> Quiz: {{ paper.question_paper.quiz.description }} </h2>
-    {% endif %}
-
-    <div class="card">
-      <div class="card-body">
-    Attempt Number: {{ paper.attempt_number }}<br/>
-    Questions correctly answered: {{ paper.get_answered_str }} <br/>
-    Marks obtained: {{ paper.marks_obtained }} <br/>
-    Start time: {{ paper.start_time }} <br/>
-    End time : {{ paper.end_time }} <br/>
-    Percentage obtained: {{ paper.percent }}% <br/>
-    {% if paper.passed %}
-    Status : <b style="color: green;"> Passed </b><br/>
-    {% else %}
-    Status : <b style="color: red;"> Failed </b><br/>
-    {% endif %}
-    </div>
-  </div>
-
-    {% if paper.answers.count %}
-    <h3> Answerpaper: </h3>
-    {% for question, answers in paper.get_question_answers.items %}
-
-    <div class="card">
-        <div class="card-heading yakshlabel">
-            <strong> Details: {{forloop.counter}}. {{ question.summary }} 
-            <span class="marks pull-right"> Mark(s): {{ question.points }} </span>
-            </strong>
+      {% if forloop.counter == 2 and data.questionpaperid %}
+        <hr>
+        <u>
+          <h2> Previous attempts </h2>
+        </u>
+      {% endif %}
+      <div class="card">
+        <div class="card-header">
+          Course Details
         </div>
         <div class="card-body">
-            <h5><u>Question:</u></h5> <strong>{{ question.description }}</strong>
-            {% if question.type == "mcq" or question.type == "mcc" %}
-                <h5> <u>Choices:</u></h5>
-                {% get_ordered_testcases question paper as testcases %}
-                {% for testcase in testcases %}
-                {% if testcase.correct %}
-                   <br/>
-                   <strong>{{ forloop.counter }}. {{ testcase.options }}</strong>
-                   <span class="alert alert-success"> Correct</span>
-                {% else %}
-                <br/><strong>
-                {{ forloop.counter }}. {{ testcase.options }}</strong>
-                {% endif %}
-                {% endfor %}
-
-            {% elif question.type == "integer" or question.type == "string" or question.type == "float" %}
-                <h5> <u>Correct Answer:</u></h5>
-                    {% for testcase in question.get_test_cases %}
-                    <strong>{{ testcase.correct }}</strong>
-                    {% endfor %}
-
-            {% elif question.type == "arrange" %}
-              <h5> <u>Correct Order:</u></h5>
-              <div class="list-group">
-              {% for testcase in question.get_test_cases %}
-                    <li class="list-group-item"><strong>{{ testcase.options }}</strong></li>
-              {% endfor %}
-              </div>
-
-            {% else %}
-                <h5> <u>Test cases: </u></h5>
-                    {% for testcase in question.get_test_cases %}
-                        <br/><strong>{{ forloop.counter }}. {{ testcase }}</strong>
-                    {% endfor %}
-            {% endif %}
-            
-        </div>
-    </div>
-    {% if question.type != "code" %}
-        {% if "Correct answer" in answers.0.error_list %}
-            <div class="card alert-success">
-        {% else %}
-            <div class="card card-danger">
-        {% endif %}
-            <div class="card-heading">
-                <strong>{{ answers.0.error_list.0 }}</strong>
+          <div class="row">
+            <div class="col-md-6">
+              <p><b>Course:</b> {{ paper.course.name }}</p>
+              <p><b>Quiz:</b> {{ paper.question_paper.quiz.description }}</p>
+              <p><b>Start time:</b> {{ paper.start_time }}</p>
+              <p><b>End time:</b> {{ paper.end_time }}</p>
+              <p><b>Status:</b>
+              {% if paper.passed %}
+                <span class="badge badge-pill badge-success"> Passed </span>
+              {% else %}
+                <span class="badge badge-pill badge-danger"> Failed </span>
+              {% endif %}
+              </p>
             </div>
-            <div class="card-body">
-            {% if question.type == "mcc"%}
-        <div class="card">
-          <div class="card-body">
-        {% for testcases in question.get_test_cases %}
-        {%if testcases.id|stringformat:"i" in answers.0.answer %}
-         <li>{{ testcases.options.strip }}</li>
-        {% endif %}
-        {% endfor %}
-        </div>
-      </div>
-        {% elif question.type == "mcq"%}
-        <div class="card">
-          <div class="card-body">
-        {% for testcases in question.get_test_cases %}
-        {%if testcases.id|stringformat:"i" == answers.0.answer %}
-         <li>{{ testcases.options.strip }}</li>
-        {% endif %}
-        {% endfor %}
+            <div class="col-md-6">
+              <p><b>Total Marks:</b> {{ paper.question_paper.total_marks }}</p>
+              <p><b>Marks obtained:</b> {{ paper.marks_obtained }}</p>
+              {% if paper.percent %}
+                <p><b>Percentage obtained:</b> {{paper.percent}}%</p>
+              {% endif %}
+              <p><b>Total attempts at questions:</b> {{ paper.answers.count }}</p>
+              <p>
+                <b>Attempt Number:</b>
+                <span class="badge badge-pill badge-info">
+                  {{paper.attempt_number}}
+                </span>
+              </p>
+              <p><b>User IP address:</b> {{ paper.user_ip }}</p>
+            </div>
+          </div>
         </div>
       </div>
-        {% elif question.type == "arrange"%}
+      <hr>
+      {% if paper.answers.count %}
         <div class="card">
+          <div class="card-header">
+            Submission Details
+          </div>
           <div class="card-body">
-          {% get_answer_for_arrange_options answers.0.answer question as tc_list %}
-        {% for testcases in tc_list %}
-         <li>{{ testcases.options.strip }}</li>
-        {% endfor %}
-        </div>
-      </div>
-        {% elif question.type == "upload" and has_user_assignment %}
-                <a href="{{URL_ROOT}}/exam/download/user_assignment/{{question.id}}/{{data.user.id}}/{{paper.question_paper.quiz.id}}">
-                <div class="card">
+            <table class="tablesorter table table-striped table-bordered table-responsive-sm" id='marks_table'>
+              <thead>
+                <tr>
+                <th>Questions</th>
+                <th>Type</th>
+                <th>Marks Obtained</th>
+                </tr>
+                </thead>
+                <tbody>
+                {% for question, answers in paper.get_question_answers.items %}
+                  {% with answers|last as answer %}
+                      <tr>
+                      <td>
+                        <a href="#question_{{question.id}}">
+                          {{ question.summary }}
+                        </a>
+                      </td>
+                      <td>{{ question.type }}</td>
+                      <td>{{ answer.answer.marks }}</td>
+                      </tr>
+                  {% endwith %}
+                {% endfor %}
+                </tbody>
+            </table>
+            {% for question, answers in paper.get_question_answers.items %}
+              <div class="card" id="question_{{question.id}}">
+                <div class="card-header text-white bg-info">
+                  <strong>
+                    Details: {{forloop.counter}}. {{ question.summary }}
+                    <span class="marks pull-right"> Mark(s): {{ question.points }} </span>
+                  </strong>
+                </div>
                 <div class="card-body">
-                Assignment File for {{ data.user.get_full_name.title }}
-                </div></a>
+                  <h5>
+                    <span class="badge badge-pill badge-primary">Question:</span>
+                  </h5>
+                  <strong>{{ question.description|safe }}</strong>
+                  <br><br>
+                  {% if question.type == "mcq" or question.type == "mcc" %}
+                    <h5>
+                      <span class="badge badge-pill badge-primary">Choices:</span>
+                    </h5>
+                    {% for testcase in question.get_test_cases %}
+                      {% if testcase.correct %}
+                        <strong>
+                          <span class="badge badge-pill badge-success">
+                            {{ forloop.counter }}.
+                          </span>
+                          {{ testcase.options|safe }}
+                        </strong>
+                        {% else %}
+                        <strong>
+                          <span class="badge badge-pill badge-secondary">
+                            {{ forloop.counter }}.
+                          </span>
+                          {{ testcase.options|safe }}
+                        </strong>
+                      {% endif %}
+                      <br>
+                    {% endfor %}
+                  {% elif question.type == "integer" or question.type == "string" or question.type == "float" %}
+                    <h5>
+                      <span class="badge badge-pill badge-primary">
+                        Correct Answer:
+                      </span>
+                    </h5>
+                    {% for testcase in question.get_test_cases %}
+                      <strong>{{ testcase.correct }}</strong>
+                      {% if testcase.error_margin %}
+                      <strong>{{ testcase.error_margin }}</strong>
+                      {% endif %}
+                    {% endfor %}
+                  {% elif question.type == "arrange" %}
+                    <h5>
+                      <span class="badge badge-pill badge-primary">
+                      Correct Order:</span>
+                    </h5>
+                    <div class="list-group" >
+                    {% for testcase in question.get_test_cases %}
+                        <li class="list-group-item">
+                          <strong>{{ testcase.options }}</strong>
+                        </li>
+                    {% endfor %}
+                    </div>
+                  {% else %}
+                    <h5>
+                      <span class="badge badge-pill badge-primary">Test cases:
+                      </span>
+                    </h5>
+                    {% for testcase in question.get_test_cases %}
+                        <strong>
+                          {{ forloop.counter }}. {{ testcase }}
+                        </strong>
+                        <br>
+                    {% endfor %}
+                  {% endif %}
+                  <br>
+                  <h5>
+                    <span class="badge badge-pill badge-primary">Student answer(s):
+                    </span>
+                  </h5>
+                  {% if question.type == "upload" %}
+                    {% if has_user_assignments %}
+                      <a href="{% url 'yaksh:download_user_assignment' question.id data.user.id paper.question_paper.quiz.id course_id %}">
+                      <div class="btn btn-outline-info text-center">
+                      Assignment File for {{ data.user.get_full_name.title }}
+                      </div>
+                      </a>
+                    {% else %}
+                      <center>
+                        <div class="alert alert-warning">
+                          <h5>
+                            Assignment not submitted by {{ data.user.get_full_name.title }}
+                          </h5>
+                        </div>
+                      </center>
+                    {% endif %} <!-- End has_user_assignments -->
+                  {% else %}
+                  {% for ans in answers %}
+                    <strong>
+                      Attempt Number: {{forloop.counter}}
+                    </strong>
+                    <div id="accordian">
+                      <div class="card">
+                        {% if ans.answer.correct %}
+                          <div class="card-header">
+                            <span class="badge badge-success">
+                              Correct answer:
+                            </span>
+                            <a class="card-link" data-toggle="collapse" href="#submitted_{{ans.answer.id}}">
+                              <span class="pull-right">
+                                Details&nbsp;<i class="fa fa-toggle-down"></i>
+                              </span>
+                            </a>
+                          </div>
+                        {% else %}
+                          <div class="card-header">
+                            <span class="badge badge-danger">
+                              Error:
+                            </span>
+                            <a class="card-link" data-toggle="collapse" href="#submitted_{{ans.answer.id}}">
+                              <span class="pull-right">
+                                Details&nbsp;<i class="fa fa-toggle-down"></i>
+                              </span>
+                            </a>
+                          </div>
+                        {% endif %}
+                        <div class="collapse hide" id="submitted_{{ans.answer.id}}" data-parent="#accordion">
+                          <div class="card-body">
+                            {% with ans.error_list as err %}
+                              {% for error in err %}
+                                {% if error.type == 'stdio' %}
+                                  {% if error.given_input %}
+                                    <table class="table table-bordered table-responsive-sm">
+                                      <tr class="table-active">
+                                      <td> For given Input value(s):</td>
+                                      <td>{{error.given_input}}</td>
+                                      </tr>
+                                    </table>
+                                  {% endif %}
+                                  <table id="course-detail" class="table table-bordered table-responsive-sm" width="100%" id="output">
+                                    <tr>
+                                    <th><center>Line No.</center></th>
+                                    <th><center>Expected Output</center></th>
+                                    <th><center>User output</center></th>
+                                    <th><center>Status</center></th>
+                                    </tr>
+                                    {% for expected,user in error.expected_output|zip:error.user_output %}
+                                    <td> {{forloop.counter}} </td>
+                                    <td>{{expected|default:""}} </td>
+                                    <td>{{user|default:""}}</td>
+                                    {% if forloop.counter0 in error.error_line_numbers or not expected or not user %}
+                                    <td><span class ="fa fa-times text-warning"/></td>
+                                    {% else %}
+                                    <td><span class ="fa fa-check text-success"/></td>
+                                    {% endif %}
+                                    </tr>
+                                    {% endfor %}
+                                    </table>
+                                    <table width="100%" class="table table-bordered table-responsive-sm">
+                                      <col width="10">
+                                      <tr>
+                                        <td>Error:</td>
+                                        <td>{{error.error_msg}}</td>
+                                      </tr>
+                                  </table>
+                                {% elif error.type == 'assertion' %}
+                                  {% if error.test_case %}
+                                    <strong>
+                                      We tried you code with the following test case:
+                                    </strong><br><br>
+                                    <pre><code>
+                                      <strong>{{error.test_case}}</strong>
+                                    </code></pre>
+                                  {% endif %}
+                                  <p><b>The following error took place: </b></p>
+                                  <table id="course-detail" class="table table-bordered table-responsive-sm" width="100%">
+                                      <tr class = "active">
+                                      <td><b>Exception Name: </b></td>
+                                      <td><span>{{error.exception}}</span></td>
+                                    </tr>
+                                    <tr>
+                                      <td><b>Exception Message: </b></td><td>{{error.message}}</td>
+                                    </tr>
+                                    <tr>
+                                      {% if error.traceback %}
+                                      <td><b>Full Traceback: </b></td>
+                                      <td><pre>{{error.traceback}}</pre></td>
+                                      {% endif %}
+                                    </tr>
+                                  </table>
+                                {% else %}
+                                  <pre><code> {{error}} </code></pre>
+                                {% endif %}
+                              {% endfor %}
+                            {% endwith %}
+                            {% if question.type == "code" %}
+                            {% pygmentise_user_answer question.language ans.answer.answer.strip as user_answer %}
+                              <style type="text/css">{{user_answer.1}}</style>
+                              <pre><code>{{user_answer.0|safe}}</code></pre>
+                            {% elif question.type == "mcc" or question.type == "mcq" %}
+                              {% for testcases in question.get_test_cases %}
+                                {% if testcases.id|stringformat:"i" in ans.answer.answer.strip %}
+                                 <li>{{ testcases.options.strip|safe }}</li>
+                                {% endif %}
+                              {% endfor %}
+                            {% elif question.type == "arrange"%}
+                              {% get_answer_for_arrange_options ans.answer.answer question as tc_list %}
+                              {% for testcases in tc_list %}
+                               <li>{{ testcases.options.strip }}</li>
+                              {% endfor %}
+                            {% else %}
+                              {{ ans.answer.answer.strip }}
+                            {% endif %}
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <br>
+                  {% endfor %} <!-- End for ans in answers -->
                 </div>
-        {% else %}
-                <h5><u>Student answer:</u></h5>
-                <div class="card">
-                  <div class="card-body">
-                 {{ answers.0.answer }}
-                 </div>
-               </div>
-        {% endif %}
-            </div>
-            </div>
-    {% else %}
-    <h5>Student answer: </h5>
-    {% for answer in answers %}
-    {% if not answer.skipped %}
-    {% if answer.answer.correct %}
-            <div class="card">
-            <div class="card-heading alert-success">
-            <strong>Correct Answer</strong>
-            </div>
-        {% else %}
-            <div class="card ">
-            <div class="card-heading alert-danger">
-              <strong>Incorrect Answer</strong>
-            </div>
-        {% endif %}
-    
-        {% with answer.error_list as err %}
-            {% for error in err %}
-            
-      {% if error.type == 'stdio' %}
-        <div class = "card">
-          <div class="card-body">
-        {% if error.given_input %}
-       <table class="table table-bordered table-responsive-sm">
-        <col width="30%">
-          <tr class = "table-active">
-          <td> For given Input value(s):</td>
-          <td>{{error.given_input}}</td>
-          </tr>
-       </table>
-       {% endif %}
-        <table class="table table-bordered table-responsive-sm" width="100%" id="output" style="table-layout: fixed">
-          <col width="10%">
-          <col width="40%">
-          <col width="40%">
-          <col width="10%">
-          <tr class="info">
-          <th><center>Line No.</center></th>
-          <th><center>Expected Output</center></th>
-          <th><center>User output</center></th>
-          <th><center>Status</center></th>
-          </tr>
-          {% for expected,user in error.expected_output|zip:error.user_output %}
-          <td> {{forloop.counter}} </td>
-          <td>{{expected|default:""}} </td>
-          <td>{{user|default:""}}</td>
-          {% if forloop.counter0 in error.error_line_numbers or not expected or not user %}
-          <td><span class ="fa fa-times text-warning"/></td>
-          {% else %}
-          <td><span class ="fa fa-check text-success"/></td>
-          {% endif %}
-          </tr>
-          {% endfor %}
-          </table>
-          <table width="100%" class="table table-bordered table-responsive-sm">
-          <col width="10">
-          <tr class = "table-danger">
-          <td><b>Error:</b></td>
-           <td>{{error.error_msg}}</td>
-           </tr>
-          </table>
+              </div>
+              {% endif %}
+              <br>
+              <div class="form-group">
+                <div class="col-md-2">
+                  <label class="col-form-label" for="q{{ question.id }}">Marks:</label>
+                  {% with answers|last as answer %}
+                  <input id="q{{ question.id }}" type="text" name="q{{ question.id }}_marks" size="4" class="form-control" value="{{ answer.answer.marks }}" readonly=""><br><br>
+                  {% endwith %}
+                </div>
+              </div>
+              <hr/>
+              {% endfor %} {# for question, answers ... #}
+              <div class="form-group">
+                <h3>Teacher comments: </h3>
+                <textarea id="comments_{{paper.question_paper.id}}" class="form-control"
+                  name="comments_{{ paper.question_paper.id }}" readonly="">{{ paper.comments }}</textarea>
+              </div>
+          </div>
         </div>
-      </div>
-        {% elif error.type == 'assertion' %}
-            {% if error.test_case %}
-      <strong> We tried you code with the following test case:</strong><br/></br>
-              <pre><code><strong style="color:#d9534f">{{error.test_case}}</strong></code></pre>
-            {% endif %}
-          <p> <b>The following error took place: </b></p>
-          <div class="well well-sm">
-        <table class="table table-bordered table-responsive-sm" width="100%" style="table-layout: fixed">
-          <col width="30%">
-            <tr class = "active">
-            <td><b>Exception Name: </b></td>
-            <td><span style="color: #d9534f">{{error.exception}}</span></td>
-          </tr>
-          <tr>
-            <td><b>Exception Message: </b></td><td>{{error.message}}</td>
-          </tr>
-          <tr>
-            {% if error.traceback %}
-            <td><b>Full Traceback: </b></td>
-            <td><pre>{{error.traceback}}</pre></td>
-            {% endif %}
-          </tr>
-        </table>
-      </div> <!-- Closes well -->
-        {% else %}
-          <pre><code> {{error}} </code></pre>
-        {% endif %}
-        {% endfor %}
-        {% endwith %}
-    <div class="panel-body">
-    {% pygmentise_user_answer question.language answer.answer.answer.strip as user_answer %}
-    <style type="text/css">{{user_answer.1}}</style>
-    <pre><code>{{user_answer.0|safe}}</code></pre>
-    </div>
-    </div>
-    {% endif %}
-    {% endfor %}
-    {% endif %}
-    {% with answers|last as answer %}
-    <p><em><mark>Obtained Marks: {{answer.answer.marks}}</mark></em> </p>
-    {% endwith %}
-    <hr>
-    {% endfor %} {# for question, answers ... #}
-    <h3>Teacher comments: </h3>
-    {{ paper.comments|default:"None" }}
-    <hr><hr>
-    {% endif %} {# if paper.answers.count #}
-
+      {% endif %} {# if paper.answers.count #}
     {% endfor %} {# for paper in data.papers #}
-
-{% endif %} {# if not data.papers #}
+  {% else %}
+    <br>
+    <center>
+      <div class="alert alert-warning">
+      {% if quiz.is_exercise %}
+        You have not attempted the Exercise {{ quiz.description }}
+      {% else %}
+        You have not attempted the quiz {{ quiz.description }}
+      {% endif %}
+      </div>
+    </center>
+  {% endif %} {# if data.papers #}
 </div>
 {% endblock %}