Merge pull request #774 from adityacp/upload_toc

Add table of contents for the lessons

11 files changed, 725 insertions, 112 deletions

diff --git a/yaksh/templates/base.html b/yaksh/templates/base.html
index 10f9661..7bf70fb 100644
--- a/yaksh/templates/base.html
+++ b/yaksh/templates/base.html
@@ -20,8 +20,11 @@
   <link rel="stylesheet" href="{% static 'yaksh/css/animate.min.css' %}" type="text/css" />
   <link rel="stylesheet" href="{% static 'yaksh/css/font-awesome.css' %}" type="text/css" />
   <link rel="stylesheet" href="{% static 'yaksh/css/ontop.css' %}" type="text/css" />
+  <link rel="stylesheet" href="{% static 'yaksh/css/plyr.css' %}" />
+  <link rel="stylesheet" type="text/css" href="{% static 'yaksh/css/simplemde.min.css' %}">
+  <link rel="stylesheet" href="{% static 'yaksh/css/toastr.min.css' %}" />
   <!-- https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/katex.min.css -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
 
 
   {% block meta %}
@@ -39,16 +42,26 @@
   <script language="JavaScript" type="text/javascript" src="{% static 'yaksh/js/jquery-3.3.1.min.js' %}"></script>
   <script language="JavaScript" type="text/javascript" src="{% static 'yaksh/js/bootstrap.min.js' %}"></script>
   <script language="JavaScript" type="text/javascript" src="{% static 'yaksh/js/wow.min.js' %}"></script>
+  <script src="{% static 'yaksh/js/plyr.js' %}"></script>
+  <script type="text/javascript" src="{% static 'yaksh/js/simplemde.min.js' %}">
+  </script>
+  <script type="text/javascript" src="{% static 'yaksh/js/toastr.min.js' %}">
+  </script>
 
-    <!-- The loading of KaTeX is deferred to speed up page rendering -->
-    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
+  <!-- The loading of KaTeX is deferred to speed up page rendering -->
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
 
-    <!-- To automatically render math in text elements, include the auto-render extension: -->
-    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
-        onload="renderMathInElement(document.body);"></script>
+  <!-- To automatically render math in text elements, include the auto-render extension: -->
+  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
+      onload="renderMathInElement(document.body);"></script>
  
   <script>
       new WOW().init();
+      $(document).ready(function() {
+        $(".alert").delay(2000).slideUp(200, function() {
+            $(this).alert('close');
+        });
+      });
   </script>
   {% block script %}
   {% endblock %}
@@ -59,9 +72,24 @@
   <div id="ontop">
     <div id="state">
       Checking...<img src="{% static 'yaksh/images/check_answer.gif' %}"/>
-    </div></div>
-
-    
+    </div>
+  </div>
+  <div id="loader">
+    <div id="state1">
+      <div class="spinner-grow text-success" role="status">
+        <span class="sr-only">Loading...</span>
+      </div>
+      <div class="spinner-grow text-danger" role="status">
+        <span class="sr-only">Loading...</span>
+      </div>
+      <div class="spinner-grow text-warning" role="status">
+        <span class="sr-only">Loading...</span>
+      </div>
+      <div class="spinner-grow text-primary" role="status">
+        <span class="sr-only">Loading...</span>
+      </div>
+    </div>
+  </div>
   
   {% block nav %}
   {% endblock %}
diff --git a/yaksh/templates/manage.html b/yaksh/templates/manage.html
index 6047fc5..53d5c72 100644
--- a/yaksh/templates/manage.html
+++ b/yaksh/templates/manage.html
@@ -66,36 +66,6 @@
     </div>
 </nav>
 
-<!-- iframe div for video embed -->
-<div id="iframe_div" style="display: none;">
-  <iframe class="embed-responsive-item" id="video_frame" width="640" height="480" allowfullscreen>
-  </iframe>
-</div>
-<!-- end iframe div -->
-
-<!-- Dialog to video embed -->
-<div id="dialog_iframe" title="Embed Video URL" style="display: none;">
-  <div class="input-group mb-3">
-    <input id="url" name="url" type="text" required="true" class="form-control" placeholder="Enter video link">
-    <div class="input-group-append">
-        <input type="button" id="submit_info" name="submit_info" class="btn btn-primary" value="Submit" />
-    </div>
-  </div>
-  <div id="error_div" style="display: none;">
-      <b> Please enter URL</b>
-  </div>
-  <div id="copy_div">
-      <br>
-      <label>Paste HTML to embed in website:</label>
-      <textarea id="html_text" class="form-control" rows="5" cols="100"></textarea>
-      <br>
-      <a class="btn btn-secondary" id="copy" data-toggle="tooltip" title="Copy to Clipboard">
-          <i class="fa fa-clipboard" aria-hidden="true"></i>
-      </a>
-  </div>
-</div>
-<!-- end dialog -->
-
 {% endblock %}
 {% block content %}
 <div class="container">
diff --git a/yaksh/templates/yaksh/add_lesson.html b/yaksh/templates/yaksh/add_lesson.html
index 4211b1b..329a8e0 100644
--- a/yaksh/templates/yaksh/add_lesson.html
+++ b/yaksh/templates/yaksh/add_lesson.html
@@ -20,12 +20,11 @@
 
 {% block content %}
 <div class="container-fluid">
-{% if error %}
-<div class="alert alert-danger">
-    {{error}}
-</div>
-{% endif %}
-<div class="container-fluid">
+    {% if error %}
+    <div class="alert alert-danger">
+        {{error}}
+    </div>
+    {% endif %}
     <div class="row justify-content-center form-group">
         <div class="col-md-5 col-md-offset-4">
             <a class="btn btn-primary" href="{% url 'yaksh:get_course_modules' course_id %}">
@@ -54,7 +53,7 @@
                                     <button type="button" class="close" data-dismiss="alert">
                                         <i class="fa fa-close"></i>
                                     </button>
-                                    <strong>{{ error|escape }}</strong>
+                                    <strong>{{ field.label }} : {{ error|escape }}</strong>
                                 </div>
                             {% endfor %}
                         {% endfor %}
@@ -63,27 +62,38 @@
                                 <button type="button" class="close" data-dismiss="alert">
                                     <i class="fa fa-close"></i>
                                 </button>
-                                <strong>{{ error|escape }}</strong>
+                                <strong>{{ field.label }} : {{ error|escape }}</strong>
                             </div>
                         {% endfor %}
                     {% endif %}
                     {{lesson_form.name}}
                     <br>
+                    <div class="card" id="preview_text_div">
+                        <div class="card-header">
+                            <center>
+                                <h3>Description Preview</h3>
+                            </center>
+                        </div>
+                        <div class="card-body" id="description_body" style="max-height: 400px; overflow-y: auto;">
+                        </div>
+                    </div>
+                    <br>
                     {{lesson_form.description}}
                     <br>
                     Active:&nbsp;{{lesson_form.active}}
                     <br><br>
+                    Video Path:
+                    <span class="badge badge-info">
+                        {{lesson_form.video_path.help_text}}    
+                    </span>
+                    {{lesson_form.video_path}}
+                    <br>
                     Video File:
                     <span class="badge badge-info">
                         {{lesson_form.video_file.help_text}}
                     </span>
-                    <div class="input-group mb-3">
-                        <div class="custom-file">
-                            {{lesson_form.video_file}}
-                            <label class="custom-file-label" for="id_video_file">
-                                Choose file
-                            </label>
-                        </div>
+                    <div class="col-md-4">
+                        {{lesson_form.video_file}}
                     </div>
                     <br>
                     Lesson Files:
@@ -128,30 +138,91 @@
                         <button class="btn btn-danger btn-lg" type="submit" id="submit" name="Delete"> <i class="fa fa-trash"></i>&nbsp;Delete Files
                         </button>
                         {% endif %}
-                        <button class="btn btn-outline-primary btn-lg" type="button" name="button" id="preview">
-                            <i class="fa fa-eye"></i>
-                            Preview Description
-                        </button>
-                        <button class="btn btn-outline-primary btn-lg" type="button" name="button" id="embed">
-                            <i class="fa fa-angle-left"></i>&nbsp;<i class="fa fa-angle-right"></i>
-                            Embed Video link
-                        </button>
                     </center>
-                    </form>
-                    <hr>
                 </fieldset>
             </form>
         </div>
-        <div class="col-md-6">
+        <br><br>
+        <div class="col-md-5">
+            <br>
+            <div class="card">
+                <div class="card-header">
+                    <a class="card-link" data-toggle="collapse" href="#toc-collapse">
+                        Table Of Contents&nbsp;<i class="fa fa-angle-down"></i>
+                    </a>
+                </div>
+                <div class="collapse show" id="toc-collapse">
+                    <div class="card-body" id="toc">{{toc}}</div>
+                </div>
+            </div>
+            <br>
             <div class="card" id="preview_text_div">
                 <div class="card-header">
-                    <center>
-                        <h3>Description Preview</h3>
-                    </center>
+                    Setup Lesson
                 </div>
-                <div class="card-body" id="description_body">
+                <div class="card-body">
+                    {% if lesson_form.instance and lesson_form.instance.video_path %}
+                        {% with lesson_form.instance.video_path|video_name as video %}
+                        {% if video.1 == "others" %}
+                        <video id="player" playsinline controls>
+                            <source src="{{video.0}}" />
+                        </video>
+                        {% else %}
+                        <div id="player" data-plyr-provider="{{video.1}}" data-plyr-embed-id="{{video.0}}"></div>
+                        {% endif %}
+                        <br>
+                        <form action="{% url 'yaksh:add_marker' course_id lesson_form.instance.id %}" method="POST" id="marker-form" name="marker-form">
+                            {% csrf_token %}
+                            <div class="row">
+                                <div class="col-md-3">
+                                    <input type="text" id="vtimer" class="form-control" name="video_time" value="00:00:00" required="">
+                                </div>
+                                <div class="col-md-4">
+                                    <select name="content" class="custom-select" required="" id="content-type">
+                                        <option value="">Select Marker</option>
+                                        <option value="1">Topic</option>
+                                        <option value="2">Graded Quiz</option>
+                                        <option value="3">Exercise</option>
+                                        <option value="4">Poll</option>
+                                    </select>
+                                </div>
+                                <div class="col-md-5">
+                                    <select name="type" class="custom-select" id="id_type" style="display: none;">
+                                      <option value="" selected="">Select question type</option>
+
+                                      <option value="mcq">Single Correct Choice</option>
+
+                                      <option value="mcc">Multiple Correct Choices</option>
+
+                                      <option value="integer">Answer in Integer</option>
+
+                                      <option value="string">Answer in String</option>
+
+                                      <option value="float">Answer in Float</option>
+                                    </select>
+                                </div>
+                                <br><br>
+                                <div class="col-md-4">
+                                    <button type="submit" class="btn btn-success" id="add-marker">
+                                        <i class="fa fa-plus-circle">&nbsp;</i>Add
+                                    </button>
+                                </div>
+                            </div>
+                        {% endwith %}
+                    {% else %}
+                        <div class="badge badge-info">
+                            <strong>
+                                Add a Video Path or Upload a video file to setup lesson contents
+                            </strong>
+                        </div>
+                    {% endif %}
                 </div>
             </div>
+            <br>
+            <div class="card">
+                <div class="card-header">Add/Edit Content</div>
+                <div class="card-body" id="lesson-content"></div>
+            </div>
         </div>
     </div>
 </div>
diff --git a/yaksh/templates/yaksh/add_module.html b/yaksh/templates/yaksh/add_module.html
index 94f9402..aee50c1 100644
--- a/yaksh/templates/yaksh/add_module.html
+++ b/yaksh/templates/yaksh/add_module.html
@@ -60,7 +60,7 @@
                                     <button type="button" class="close" data-dismiss="alert">
                                         <i class="fa fa-close"></i>
                                     </button>
-                                    <strong>{{ error|escape }}</strong>
+                                    <strong>{{field.label}} : {{ error|escape }}</strong>
                                 </div>
                             {% endfor %}
                         {% endfor %}
@@ -69,29 +69,22 @@
                                 <button type="button" class="close" data-dismiss="alert">
                                     <i class="fa fa-close"></i>
                                 </button>
-                                <strong>{{ error|escape }}</strong>
+                                <strong>{{field.label}} : {{ error|escape }}</strong>
                             </div>
                         {% endfor %}
                     {% endif %}
                     {{module_form.name}}
                     <br>
-                    {{module_form.description}}
-                    <br>
                     Active:&nbsp;{{module_form.active}}
                     <br>
+                    <br>
+                    {{module_form.description}}
+                    <br>
                     <center>
                         <button class="btn btn-success btn-lg" type="submit" id="submit" name="Save">
                             <i class="fa fa-save"></i>
                             Save
                         </button>
-                        <button class="btn btn-outline-primary btn-lg" type="button" name="button" id="preview">
-                            <i class="fa fa-eye"></i>
-                            Preview Description
-                        </button>
-                        <button class="btn btn-outline-primary btn-lg" type="button" name="button" id="embed">
-                            <i class="fa fa-angle-left"></i>&nbsp;<i class="fa fa-angle-right"></i>
-                            Embed Video link
-                        </button>
                     </center>
                     </form>
                     <hr>
diff --git a/yaksh/templates/yaksh/add_topic.html b/yaksh/templates/yaksh/add_topic.html
new file mode 100644
index 0000000..52923e7
--- /dev/null
+++ b/yaksh/templates/yaksh/add_topic.html
@@ -0,0 +1,12 @@
+{% if topic_id %}
+<form class="form-group" method="POST" action="{% url 'yaksh:edit_topic' content_type course_id lesson_id toc_id topic_id %}" id="topic-form">
+{% else %}
+<form class="form-group" method="POST" action="{% url 'yaksh:add_topic' content_type course_id lesson_id %}" id="topic-form">
+{% endif %}
+    {% csrf_token %}
+    {{ form.as_p }}
+    <br>
+    <button type="submit" class="btn btn-success">
+        <i class="fa fa-save"></i>&nbsp;Save
+    </button>
+</form>
diff --git a/yaksh/templates/yaksh/add_video_quiz.html b/yaksh/templates/yaksh/add_video_quiz.html
new file mode 100644
index 0000000..ad087bc
--- /dev/null
+++ b/yaksh/templates/yaksh/add_video_quiz.html
@@ -0,0 +1,94 @@
+{% load static %}
+<script type="text/javascript" src="{% static 'yaksh/js/tinymce/js/tinymce/tinymce.min.js' %}"></script>
+<script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML">
+</script>
+{% if question_id %}
+<form class="form-group" method="POST" action="{% url 'yaksh:edit_marker_quiz' content_type course_id lesson_id toc_id question_id %}" id="question-form">
+{% else %}
+<form class="form-group" method="POST" action="{% url 'yaksh:add_marker_quiz' content_type course_id lesson_id %}" id="question-form">
+{% endif %}
+    {% csrf_token %}
+    <table class="table table-responsive-sm">
+        {% for field in form %}
+            <tr>
+                <td>{{ field.label }}</td>
+                <td>{{ field }} <small>{{ field.help_text }}</small></td>
+            </tr>
+        {% endfor %}
+    </table>
+    {{ formset.management_form }}
+    <br>
+    <button type="button" id="add_more" class="btn btn-primary">
+        <i class="fa fa-plus-circle"></i>&nbsp;Add More
+    </button>
+    <br><br>
+    <div id="form_set">
+        {% for form in formset.forms %}
+            {{form.non_field_errors}}
+            {{form.errors}}
+            <table class='no_error'>
+                {{ form }}
+            </table>
+            <hr>
+        {% endfor %}
+    </div>
+    <div id="empty_form" style="display:none">
+        <table class='no_error'>
+            {{ formset.empty_form }}
+        </table>
+        <hr>
+    </div>
+    <button type="submit" class="btn btn-success">
+        <i class="fa fa-save"></i>&nbsp;Save
+    </button>
+</form>
+<script type="text/javascript">
+    $(document).ready(function() {
+        var tc_type = "#id_"+"{{tc_class}}"+"_set-TOTAL_FORMS";
+        $('#add_more').click(function() {
+            var form_idx = $(tc_type).val();
+            $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
+            $(tc_type).val(parseInt(form_idx) + 1);
+            var form_type = "#id_"+'{{tc_class}}'+"_set-"+form_idx+"-type";
+            $(form_type).val($("#id_"+'{{tc_class}}'+"_set-0-type").val());
+        });
+        $("#question-form").each(function() {
+            $(this).find('textarea').addClass("form-control");
+            $(this).find('input[type=number]').addClass("form-control");
+        });
+        let option = $('#id_language').val();
+        if(option === 'other') {
+            $('#id_topic').closest('tr').show();
+            $('#id_topic').prop("required", true);
+        } else {
+            $('#id_topic').closest('tr').hide();
+            $('#id_topic').prop("required", false);
+        }
+        $('#id_language').on('change', function() {
+            let lang_value = $(this).val();
+            if (lang_value === "other") {
+                $('#id_topic').closest('tr').show();
+                $('#id_topic').prop("required", true);
+                $('#id_type').children("option[value='code']").hide();
+            } else {
+                $('#id_topic').closest('tr').hide();
+                $('#id_topic').prop("required", false);
+                $('#id_type').children("option[value='code']").show();
+            }
+        });
+        function init_editor() {
+            tinymce.init({
+                selector : "textarea",
+                setup : function(ed) {
+                      ed.on('change', function(e) {
+                         tinymce.triggerSave();
+                      });
+                },
+                max_height: 400,
+                height: 400,
+                plugins: "image code link",
+                convert_urls: false
+            });
+        }
+    });
+</script>
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/course_added_modules.html b/yaksh/templates/yaksh/course_added_modules.html
index 2d194b9..d420b95 100644
--- a/yaksh/templates/yaksh/course_added_modules.html
+++ b/yaksh/templates/yaksh/course_added_modules.html
@@ -93,6 +93,22 @@
                                                 Lesson
                                             {% endif %}
                                         </td>
+                                        <td>
+                                            {% if unit.type == "quiz" %}
+                                                {% if unit.quiz.questionpaper_set.get.id %}
+                                                    <a href="{% url 'yaksh:show_statistics' unit.quiz.questionpaper_set.get.id course.id %}" class="btn btn-outline-primary">
+                                                        <i class="fa fa-line-chart"></i>
+                                                        Statistics
+                                                    </a>
+                                                {% else %}
+                                                    ----
+                                                {% endif %}
+                                            {% else %}
+                                                <a href="{% url 'yaksh:lesson_statistics' course.id unit.lesson.id %}" class="btn btn-outline-primary">
+                                                    <i class="fa fa-line-chart"></i>&nbsp;Statistics
+                                                </a>
+                                            {% endif %}
+                                        </td>
                                     </tr>
                                 {% endfor %}
                             </table>
diff --git a/yaksh/templates/yaksh/show_lesson_quiz.html b/yaksh/templates/yaksh/show_lesson_quiz.html
new file mode 100644
index 0000000..fb5ae6c
--- /dev/null
+++ b/yaksh/templates/yaksh/show_lesson_quiz.html
@@ -0,0 +1,131 @@
+{% load custom_filters %}
+<script type="text/javascript">
+    function user_arranged_options() {
+        var temp_array = []
+        var add_array = document.getElementById("arrange_order");
+        var ans_array = order_array.children().get()
+        var answer_is = $.each(ans_array, function(index, value) {
+          temp_array.push(value.id);
+        });
+        add_array.value = temp_array
+    }
+</script>
+<form id="submit-quiz-form" method="POST" action="{% url 'yaksh:submit_marker_quiz' course_id toc.id %}">
+    {% csrf_token %}
+    <div class="card">
+        <div class="card-header">
+            <div>
+              <div>
+                <h2>{{ question.summary }}</h2>
+              </div>
+              <div>
+                {% if question.language == "other" %}
+                  <small class="text text-muted"><strong>Topic:</strong> <span class="badge badge-primary">{{question.topic}}</small></span>
+                {% else %}
+                  <small class="textx text-muted"><strong>Language:</strong> <span class="badge badge-primary">{{question.language}}</span></small>
+                {% endif %}
+                {% if question.type == "mcq" %}
+                  <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">SINGLE CORRECT CHOICE</span></small>
+                {% elif question.type == "mcc" %}
+                  <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">MULTIPLE CORRECT CHOICES</span></small>
+                {% elif question.type == "integer" %}
+                  <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">FILL IN THE BLANKS WITH INTEGER ANSWER</span></small>
+                {% elif question.type == "string" %}
+                  <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">FILL IN THE BLANKS WITH STRING ANSWER</span></small>
+                  {% if testcase.string_check == "lower" %}
+                      <br>(CASE INSENSITIVE)
+                  {% else %}
+                      <br>(CASE SENSITIVE)
+                  {% endif %}
+                {% elif question.type == "float" %}
+                  <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">FILL IN THE BLANKS WITH FLOAT ANSWER</span></small>
+                {% elif question.type == "arrange" %}
+                  <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">ARRANGE THE OPTIONS IN CORRECT ORDER</span></small>
+                {% endif %}
+                <span class="badge badge-info pull-right">
+                  <small><strong>Points: {{ question.points }}</strong></small>
+                </span>
+              </div>
+            </div>
+        </div>
+        <div class="card-body">
+            <div>
+              {{ question.description|safe }}
+            </div>
+            <br>
+            {% if question.type == "mcq" %}
+            <!-- Single correct choice type Question -->
+                {% for test_case in test_cases %}
+                  {% if last_attempt and last_attempt|to_int == test_case.id %}
+                  <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" %}
+            <!-- Integer type Question -->
+                Enter Integer:<br/>
+                <input autofocus class="form-control" name="answer" type="number" id="integer" value="{{ last_attempt|to_integer }}" />
+                <br><br>
+            {% endif %}
+
+            {% if question.type == "string" %}
+            <!-- String type question -->
+                Enter Text:<br/>
+                <textarea autofocus name="answer" id="string" class="form-control" style="width: 100%">{{ last_attempt|to_str }}</textarea>
+                <br/><br/>
+            {% endif %}
+
+            {% if question.type == "float" %}
+            <!-- Float type question -->
+                Enter Decimal Value :<br/>
+                <input autofocus class="form-control" name="answer" type="number" step="any" id="float" value="{{ last_attempt|to_float }}" />
+                <br/><br/>
+            {% endif %}
+
+            {% if question.type == "mcc" %}
+            <!-- MCC type question -->
+                {% 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 == "arrange" %}
+            <!-- Arrange options type question -->
+                {% 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" 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
+              </button>
+            {% elif question.type == "arrange" %}
+              <br><button class="btn btn-success" type="submit" name="check" id="check" onClick="return user_arranged_options();">Submit</button>
+            {% endif %}
+        </div>
+    </div>
+</form>
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/show_lesson_statistics.html b/yaksh/templates/yaksh/show_lesson_statistics.html
new file mode 100644
index 0000000..2bcdd2d
--- /dev/null
+++ b/yaksh/templates/yaksh/show_lesson_statistics.html
@@ -0,0 +1,159 @@
+{% extends "manage.html" %}
+{% load custom_filters %}
+{% block title %} Lesson Statistics {% endblock %}
+{% block pagetitle %} Statistics for {{lesson}} {% endblock %}
+{% block content %}
+<div class="container-fluid">
+    <br>
+    <a class="btn btn-primary" href="{% url 'yaksh:get_course_modules' course_id %}">
+        <i class="fa fa-arrow-left"></i>&nbsp;Back
+    </a>
+    <br><br>
+    {% if data %}
+    <div class="row">
+        <div class="col-md-4">
+            <ul class="list-group">
+                {% for toc, count in data.items %}
+                <li class="list-group-item">
+                    <div class="row">
+                        <div class="col-md-4">
+                            {{ toc.content_object.summary }}
+                        </div>
+                        <div class="col-md-4">
+                            <span class="badge badge-pill badge-info">
+                                {{toc.get_content_display}}
+                            </span>
+                        </div>
+                        <div class="col-md-4">
+                            <a href="{% url 'yaksh:lesson_statistics' toc.course_id toc.lesson_id toc.id %}" class="btn btn-outline-primary">
+                                <i class="fa fa-info-circle"></i>&nbsp;Details
+                            </a>
+                        </div>
+                    </table>
+                </li>
+                {% endfor %}
+            </ul>
+        </div>
+        <div class="col-md-7">
+            {% if not is_que_data %}
+                <table class="table table-responsive">
+                    <tr>
+                        <th>TOC</th>
+                        <th>Type</th>
+                        <th>Submissions</th>
+                    </tr>
+                    {% for toc, count in data.items %}
+                        <tr>
+                            <td>{{ toc.content_object.summary }}</td>
+                            <td>{{ toc.get_content_display }}</td>
+                            <td>{{ count }}</td>
+                        </tr>
+                    {% endfor %}
+                </table>
+            {% else %}
+                <div class="card">
+                    <div class="card-header">
+                        {{question.summary}}
+                        <div>
+                        {% if question.language == "other" %}
+                          <small class="text text-muted"><strong>Topic:</strong> <span class="badge badge-primary">{{question.topic}}</small></span>
+                        {% else %}
+                          <small class="textx text-muted"><strong>Language:</strong> <span class="badge badge-primary">{{question.language}}</span></small>
+                        {% endif %}
+                        {% if question.type == "mcq" %}
+                          <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">SINGLE CORRECT CHOICE</span></small>
+                        {% elif question.type == "mcc" %}
+                          <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">MULTIPLE CORRECT CHOICES</span></small>
+                        {% elif question.type == "code" %}
+                          <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">PROGRAMMING</span></small>
+                        {% elif question.type == "upload" %}
+                          <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">ASSIGNMENT UPLOAD</span></small>
+                        {% elif question.type == "integer" %}
+                          <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">FILL IN THE BLANKS WITH INTEGER ANSWER</span></small>
+                        {% elif question.type == "string" %}
+                          <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">FILL IN THE BLANKS WITH STRING ANSWER</span></small>
+                          {% if testcase.string_check == "lower" %}
+                              <br>(CASE INSENSITIVE)
+                          {% else %}
+                              <br>(CASE SENSITIVE)
+                          {% endif %}
+                        {% elif question.type == "float" %}
+                          <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">FILL IN THE BLANKS WITH FLOAT ANSWER</span></small>
+                        {% elif question.type == "arrange" %}
+                          <small class="text text-muted"><strong>Type:</strong> <span class="badge badge-primary">ARRANGE THE OPTIONS IN CORRECT ORDER</span></small>
+                        {% endif %}
+                        <span class="badge badge-info pull-right">
+                          <small><strong>Marks: {{ question.points }}</strong></small>
+                        </span>
+                      </div>
+                    </div>
+                    <div class="card-body">
+                        {{question.description|safe}}
+                        <br>
+                        {% for tc in question.get_test_cases %}
+                            {% if question.type == "mcc" or question.type == "mcq" %}
+                            {% if tc.correct %}
+                            <span class="badge badge-pill badge-success">
+                                {{forloop.counter}}.
+                            </span>
+                            {% else %}
+                            <span class="badge badge-pill badge-dark">
+                                {{ forloop.counter }}.
+                            </span>
+                            {% endif %}
+                            {{tc.options}}
+                            {% elif question.type == "integer" %}
+                            <span class="badge badge-pill badge-success">Answer:</span>
+                            {{tc.correct}}
+                            {% elif question.type == "string" %}
+                            <span class="badge badge-pill badge-success">Answer:</span>
+                            {{tc.correct}} ({{tc.get_string_check_display}})
+                            {% elif question.type == "float" %}
+                            {{tc.correct}} with Error Margin {{ tc.error_margin }}
+                            {% endif %}
+                            <br>
+                        {% endfor %}
+                    </div>
+                </div>
+                <br>
+                {% include "yaksh/paginator.html" %}
+                <table class="table table-responsive">
+                    <tr>
+                        <th>Sr No.</th>
+                        <th>Student Name</th>
+                        <th>Email</th>
+                        <th>Latest Answer</th>
+                        <th>Status</th>
+                    </tr>
+                    {% for data in objects.object_list %}
+                        <tr>
+                            <td>{{forloop.counter}}</td>
+                            <td>{{data.student__first_name}} {{data.student__last_name}}</td>
+                            <td>{{data.student__email}}</td>
+                            {% get_answers data.toc_id data.student_id as user_answer %}
+                            <td>{{ user_answer.0 }}</td>
+                            <td>
+                                {% if user_answer.1 %}
+                                    <span class="badge badge-success">
+                                        Correct
+                                    </span>
+                                {% else %}
+                                    <span class="badge badge-secondary">
+                                        Incorrect
+                                    </span>
+                                {% endif %}
+                            </td>
+                        </tr>
+                    {% endfor %}
+                </table>
+                {% include "yaksh/paginator.html" %}
+            {% endif %}
+        </div>
+    </div>
+    {% else %}
+        <div class="container alert alert-warning">
+            No lesson quizzes found
+        </div>
+    {% endif %}
+</div>
+{% endblock %}
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/show_toc.html b/yaksh/templates/yaksh/show_toc.html
new file mode 100644
index 0000000..92ea0cd
--- /dev/null
+++ b/yaksh/templates/yaksh/show_toc.html
@@ -0,0 +1,72 @@
+{% load custom_filters %}
+{% has_lesson_video lesson_id as has_video %}
+{% if has_video %}
+    <div>
+        <a href="{% url 'yaksh:download_sample_toc' %}">
+            <i class="fa fa-download"></i>&nbsp;Download Sample
+        </a>
+        <br><br>
+        <form action="" method="POST" enctype="multipart/form-data">
+            {% csrf_token %}
+            <input type="file" name="toc" required="">
+            <button class="btn btn-outline-success" id="upload_toc" name="upload_toc">
+                <i class="fa fa-upload"></i>&nbsp;Upload TOC
+            </button>
+        </form>
+    </div>
+    <hr>
+{% endif %}
+<table class="table table-responsive-sm">
+{% for toc in contents %}
+    {% with toc.get_toc_text as toc_name %}
+    <tr>
+        <td width="30%">
+            {{ toc_name }}
+        </td>
+        <td>
+            {{toc.get_content_display}}   
+        </td>
+        <td>
+            {{toc.time}}
+        </td>
+        <td>
+            {% if toc.content == 1 %}
+                <a href="#" class="btn btn-outline-info" data-url="{% url 'yaksh:edit_topic' toc.content toc.course_id toc.lesson_id toc.id toc.object_id %}" id="edit-toc" onclick="edit_toc(this)">
+            {% else %}
+                <a href="#" class="btn btn-outline-info" data-url="{% url 'yaksh:edit_marker_quiz' toc.content toc.course_id toc.lesson_id toc.id toc.object_id %}" id="edit-toc" onclick="edit_toc(this)">
+            {% endif %}
+                    <i class="fa fa-edit"></i>&nbsp;Edit
+                </a>
+        </td>
+        <td>
+            <form action="{% url 'yaksh:delete_toc' toc.course_id toc.id %}" method="POST">
+                {% csrf_token %}
+                <input type="hidden" name="redirect_url" id="redirect_url" class="hidden">
+                <button class="btn btn-outline-danger" type="submit" onclick="return confirm('Are you sure you want to remove {{toc_name|capfirst}}?')">
+                    <i class="fa fa-trash"></i>&nbsp;Remove
+                </button>
+            </form>
+        </td>
+    </tr>
+    {% endwith %}
+{% empty %}
+    <center>
+        <span class="badge badge-warning">No Table of contents added</span>
+    </center>
+{% endfor %}
+</table>
+<script type="text/javascript">
+    $(document).ready(function() {
+        var divs = document.getElementsByClassName("hidden");
+        for(var i = 0; i < divs.length; i++)
+        {
+           divs[i].value = window.location.pathname;
+        }
+    });
+
+    function edit_toc(obj) {
+        var url = obj.getAttribute("data-url");
+        lock_screen();
+        ajax_call(url, "GET");
+    }
+</script>
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/show_video.html b/yaksh/templates/yaksh/show_video.html
index 9c8d133..9e9d0b4 100644
--- a/yaksh/templates/yaksh/show_video.html
+++ b/yaksh/templates/yaksh/show_video.html
@@ -4,9 +4,22 @@
 
 {% block title %} {{ learning_module.name }} {% endblock %}
 {% block script %}
+<script type="text/javascript">
+    var player;
+    var contents_by_time = JSON.parse('{{ contents_by_time|safe }}');
+    var loc = 0;
+    var video_time = [];
+</script>
+<script type="text/javascript" src="{% static 'yaksh/js/jquery-ui.js' %}"></script>
+<script type="text/javascript" src="{% static 'yaksh/js/show_toc.js' %}">
+</script>
+<script src="{% static 'yaksh/js/jquery-sortable.js' %}"></script>
 <script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML">
 </script>
 {% endblock %}
+{% block css %}
+<link rel="stylesheet" href="{% static 'yaksh/css/jquery-ui/jquery-ui.css' %}">
+{% endblock %}
 {% block main %}
 <div class="wrapper">
     <!-- Sidebar  -->
@@ -77,11 +90,9 @@
 
     <!-- Page Content  -->
     <div id="content">
-
         <button type="button" id="sidebarCollapse" class="btn btn-outline-info">
             <i class="fa fa-navicon fa-lg"></i>
         </button>
-
         <br><br>
         <ol class="breadcrumb">
             <li class="breadcrumb-item">
@@ -95,7 +106,6 @@
             {% endif %}
         </ol>
         <br>
-
         {% if msg %}
             <center>
                 <div class="alert alert-dismissible alert-warning">
@@ -127,41 +137,98 @@
                 </a>
             {% endif %}
         {% else %}    <!--  Lesson body   -->
-            <div class="col-md-6" style="width: 100%">
-            {{lesson.html_data|safe}}
-            <br>
-            <a href="{% url 'yaksh:next_unit' course.id learning_module.id current_unit.id %}" class="btn btn-info btn-lg" >
-                Next&nbsp;<i class="fa fa-step-forward"></i>
-            </a>
-            </div>
-            <br>
-            <div class="col-md-7">
-            {% with lesson.get_files as lesson_files %}
-                {% if lesson_files %}
-                    <div class="card">
-                        <div class="card-header">
-                            Files for this lesson
+            <!-- Lesson Table of contents -->
+            <div class="row">
+                <div class="col-md-8">
+                    <div class="card-body">
+                    {% if lesson.video_path %}
+                        {% with lesson.video_path|video_name as video %}
+                            {% if video.1 == "others" %}
+                            <video id="player" playsinline controls>
+                                <source src="{{video.0}}" />
+                            </video>
+                            {% else %}
+                            <div id="player" data-plyr-provider="{{video.1}}" data-plyr-embed-id="{{video.0}}"></div>
+                            {% endif %}
+                        {% endwith %}
+                    {% endif %}
+                    </div>
+                </div>
+                <div class="col-md-4">
+                <div class="card">
+                    <div class="card-header">
+                        <a class="card-link" data-toggle="collapse" href="#toc-collapse">
+                            Table Of Contents&nbsp;<i class="fa fa-angle-down"></i>
+                        </a>
+                    </div>
+                    <div class="collapse show" id="toc-collapse">
+                        <div class="card-body" id="toc">
+                            <table class="table table-responsive">
+                                {% for content in toc %}
+                                    {% with content.get_toc_text as toc_name %}
+                                    <tr>
+                                        <td>
+                                            <a href="#" onclick="select_toc(this);" data-toc="{{content.id}}" data-toc-type="{{content.content}}">
+                                                {{ toc_name }}
+                                            </a>
+                                        </td>
+                                        <td>
+                                            {{content.get_content_display}}
+                                        </td>
+                                        <td id="toc_time_{{content.id}}">
+                                            {{content.time}}
+                                        </td>
+                                        <input type="hidden" id="toc_{{content.id}}" value="{% url 'yaksh:get_marker_quiz' course.id content.id %}" data-content="{{content.content}}"/>
+                                        <input type="hidden" id="toc_desc_{{content.id}}" value="{{content.content_object.description|safe}}" data-content="{{content.content}}"/>
+                                    </tr>
+                                    {% endwith %}
+                                {% empty %}
+                                    <center>
+                                        <span class="badge badge-warning">No Table of contents added</span>
+                                    </center>
+                                {% endfor %}
+                            </table>
                         </div>
+                    </div>
+                </div>
+                </div>
+                <div class="col-md-8">
+                    <a href="{% url 'yaksh:next_unit' course.id learning_module.id current_unit.id %}" class="btn btn-info btn-lg" >
+                        Next&nbsp;<i class="fa fa-step-forward"></i>
+                    </a>
+                    <br><br>
+                    <div class="card">
+                        <div class="card-header"><h3><strong>Lesson Description</strong></h3></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 class="col" style="width: 100%">
+                                {{lesson.html_data|safe}}
+                            </div>
+                            <div class="card-body" id="topic-description"></div>
+                            <div class="col-md-7">
+                            {% with lesson.get_files as lesson_files %}
+                                {% if lesson_files %}
+                                    <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>
+                                    </div>
+                                {% endif %}
+                            {% endwith %}
+                            </div>
                         </div>
                     </div>
-                {% endif %}
-            {% endwith %}
+                </div>
             </div>
         {% endif %}
     </div>
 </div>
-<script type="text/javascript">
-    $(document).ready(function () {
-        $('#sidebarCollapse').on('click', function () {
-            $('#sidebar').toggleClass('active');
-        });
-    });
-</script>
+<div id="dialog"></div>
 {% endblock %}