Change multiple sections

- Show lesson topic description as per the video time
- Fix description preview for module and lesson
- Order table of contents by time

7 files changed, 73 insertions, 46 deletions

diff --git a/yaksh/static/yaksh/css/custom.css b/yaksh/static/yaksh/css/custom.css
index 9f29349..26efbed 100644
--- a/yaksh/static/yaksh/css/custom.css
+++ b/yaksh/static/yaksh/css/custom.css
@@ -132,19 +132,6 @@ body, .dropdown-menu {
     border: none;
 }
 
-/* Simple MDE editor style */
-.editor-toolbar.fullscreen, .editor-preview-side { 
-    z-index: 2000 !important;
-}
-.CodeMirror, .CodeMirror-scroll {
-    max-height: 400px !important;
-}
-.CodeMirror-fullscreen.CodeMirror {
-    max-height: none !important;
-}
-.CodeMirror-fullscreen .CodeMirror-scroll {
-    max-height: none !important;
-}
 
 ::-webkit-scrollbar {
   width: 10px;
diff --git a/yaksh/static/yaksh/js/lesson.js b/yaksh/static/yaksh/js/lesson.js
index 60eff78..2cc2e62 100644
--- a/yaksh/static/yaksh/js/lesson.js
+++ b/yaksh/static/yaksh/js/lesson.js
@@ -1,7 +1,13 @@
 $(document).ready(function() {
+    MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
     var simplemde = new SimpleMDE({
         element: document.getElementById("id_description"),
         forceSync: true,
+        hideIcons: ["preview", "side-by-side", "fullscreen"]
+    });
+    simplemde.codemirror.on("change", function() {
+        MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
+        $("#description_body").html(simplemde.markdown(simplemde.value()));
     });
     const player = new Plyr('#player');
     var timer = $("#vtimer");
@@ -34,6 +40,12 @@ $(document).ready(function() {
             $("#id_type").hide();
             $("#id_type").attr("required", false);
         } else {
+            if(valueSelected == "4") {
+                $('#id_type option[value="mcq"]').prop("selected", true);
+                $('#id_type').attr("disabled", true);
+            } else {
+                $('#id_type').attr("disabled", false);
+            }
             $("#id_type").show();
             $("#id_type").attr("required", true);
         }
diff --git a/yaksh/static/yaksh/js/show_toc.js b/yaksh/static/yaksh/js/show_toc.js
index 5fef923..b628eaa 100644
--- a/yaksh/static/yaksh/js/show_toc.js
+++ b/yaksh/static/yaksh/js/show_toc.js
@@ -10,9 +10,12 @@ $(document).ready(function() {
         if (time_arr_length > 0 && player.currentTime >= video_time[loc]) {
             var content = contents_by_time[loc]; 
             loc += 1;
-            if(content.content != 1) {
+            if(content.content == 1) {
+                show_topic($("#toc_desc_"+content.id).val(), false);
+            }
+            else {
                 player.pause();
-                player.fullscreen.exit();
+                if(player.fullscreen.active) player.fullscreen.exit();
                 url = $("#toc_"+content.id).val();
                 ajax_call(url, "GET");
             }
@@ -20,6 +23,15 @@ $(document).ready(function() {
     });
 });
 
+function show_topic(description, override) {
+    var topic_div = $("#topic-description");
+    if(override) {
+        topic_div.html(description);
+    } else {
+        topic_div.append("<br>" + description);
+    }
+}
+
 function store_video_time(contents) {
     for (var j = 0; j < contents.length; j++)
     video_time.push(get_time_in_seconds(contents[j].time));
@@ -66,7 +78,10 @@ function select_toc(element) {
     var content_type = element.getAttribute("data-toc-type");
     var toc_time = $("#toc_time_"+toc_id).val();
     player.currentTime = get_time_in_seconds(toc_time);
-    if (content_type != 1) {
+    if (content_type == 1) {
+        show_topic($("#toc_desc_"+toc_id).val(), true);
+    }
+    else {
         url = $("#toc_"+toc_id).val();
         ajax_call(url, "GET");
     }
diff --git a/yaksh/templates/yaksh/add_lesson.html b/yaksh/templates/yaksh/add_lesson.html
index 6018e54..8d889f3 100644
--- a/yaksh/templates/yaksh/add_lesson.html
+++ b/yaksh/templates/yaksh/add_lesson.html
@@ -68,6 +68,16 @@
                     {% 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}}
@@ -138,7 +148,7 @@
             </form>
         </div>
         <br><br>
-        <div class="col">
+        <div class="col-md-5">
             <br>
             <div class="card">
                 <div class="card-header">
diff --git a/yaksh/templates/yaksh/show_lesson_statistics.html b/yaksh/templates/yaksh/show_lesson_statistics.html
index f3e40b4..e7c99d8 100644
--- a/yaksh/templates/yaksh/show_lesson_statistics.html
+++ b/yaksh/templates/yaksh/show_lesson_statistics.html
@@ -136,7 +136,7 @@
                                     </span>
                                 {% else %}
                                     <span class="badge badge-secondary">
-                                        Not correct
+                                        Incorrect
                                     </span>
                                 {% endif %}
                             </td>
diff --git a/yaksh/templates/yaksh/show_video.html b/yaksh/templates/yaksh/show_video.html
index f6e247c..9e9d0b4 100644
--- a/yaksh/templates/yaksh/show_video.html
+++ b/yaksh/templates/yaksh/show_video.html
@@ -179,6 +179,7 @@
                                             {{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 %}
@@ -192,33 +193,35 @@
                 </div>
                 </div>
                 <div class="col-md-8">
-                    <div class="card-body">
-                        <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>
-                        <hr>
-                        <h3><strong>Lesson Description</strong></h3>
-                        <hr>
-                        <div class="col" style="width: 100%">
-                            {{lesson.html_data|safe}}
-                        </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 %}
+                    <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">
+                            <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>
-                                </div>
-                            {% endif %}
-                        {% endwith %}
+                                {% endif %}
+                            {% endwith %}
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/yaksh/views.py b/yaksh/views.py
index ab0f95d..e8bc2c6 100644
--- a/yaksh/views.py
+++ b/yaksh/views.py
@@ -2704,7 +2704,7 @@ def edit_lesson(request, course_id=None, module_id=None, lesson_id=None):
 
     contents = TableOfContents.objects.filter(
                     course_id=course_id, lesson_id=lesson_id
-                )
+                ).order_by("time")
     data = loader.render_to_string(
         "yaksh/show_toc.html", context={'contents': contents},
         request=request
@@ -3559,7 +3559,7 @@ def get_tc_formset(question_type, post=None, question=None):
 def get_toc_contents(request, course_id, lesson_id):
     contents = TableOfContents.objects.filter(
         course_id=course_id, lesson_id=lesson_id
-    )
+    ).order_by("time")
     data = loader.render_to_string(
         "yaksh/show_toc.html", context={'contents': contents},
         request=request