Change templates and js

- Fix issue onlick toc jump to player time
- Use bootstrap modal instead of jquery dialog for responsive interface
- Disallow empty question submission for lesson quiz

5 files changed, 16 insertions, 15 deletions

diff --git a/yaksh/static/yaksh/js/show_toc.js b/yaksh/static/yaksh/js/show_toc.js
index 55e9236..be08e78 100644
--- a/yaksh/static/yaksh/js/show_toc.js
+++ b/yaksh/static/yaksh/js/show_toc.js
@@ -118,11 +118,8 @@ function unlock_screen() {
 }
 
 function show_question(data) {
-    $("#dialog").html(data);
-    $("#dialog").dialog({
-        width: 800,
-        height: 500,
-    });
+    $("#myModal").modal({backdrop: 'static', keyboard: false});
+    $("#lesson_quiz_question").html(data)
     $("#submit-quiz-form").submit(function(e) {
         e.preventDefault();
         lock_screen();
@@ -135,7 +132,7 @@ function show_question(data) {
 function select_toc(element) {
     var toc_id = element.getAttribute("data-toc"); 
     var content_type = element.getAttribute("data-toc-type");
-    var toc_time = $("#toc_time_"+toc_id).val();
+    var toc_time = $("#toc_time_"+toc_id).html().trim();
     player.currentTime = get_time_in_seconds(toc_time);
     if (content_type == 1) {
         show_topic($("#toc_desc_"+toc_id).val(), true);
@@ -199,8 +196,8 @@ function ajax_call(url, method, data, csrf, screen_lock=true) {
                 show_question(msg.data);
             }
             if (msg.message) {
+                $("#myModal").modal('hide');
                 if (msg.success) {
-                    $("#dialog").dialog("close");
                     show_message(msg.message, "success");
                 }
                 else {
diff --git a/yaksh/templates/base.html b/yaksh/templates/base.html
index 90a6299..a946c12 100644
--- a/yaksh/templates/base.html
+++ b/yaksh/templates/base.html
@@ -47,7 +47,6 @@
   </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>
 
diff --git a/yaksh/templates/yaksh/course_modules.html b/yaksh/templates/yaksh/course_modules.html
index b808562..2ac1962 100644
--- a/yaksh/templates/yaksh/course_modules.html
+++ b/yaksh/templates/yaksh/course_modules.html
@@ -7,7 +7,7 @@
     <div class="card">
         <div class="card-header">
             {{ course.name }}
-            <a href="{% url "yaksh:course_forum" course.id %}" class="btn btn-info pull-right">Discussion Forum</a>
+            <a href="{% url 'yaksh:course_forum' course.id %}" class="btn btn-info pull-right">Discussion Forum</a>
         </div>
         <div class="card-body">
             {% if course.view_grade %}
diff --git a/yaksh/templates/yaksh/show_lesson_quiz.html b/yaksh/templates/yaksh/show_lesson_quiz.html
index 39e590c..71c997d 100644
--- a/yaksh/templates/yaksh/show_lesson_quiz.html
+++ b/yaksh/templates/yaksh/show_lesson_quiz.html
@@ -71,7 +71,7 @@
                   <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 }}" />
+                  <input name="answer" type="radio" value="{{ test_case.id }}" required="" />
                     {{ test_case.options|safe }} <br/>
                   {% endif %}
                 {% endfor %}
@@ -80,21 +80,21 @@
             {% 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 }}" />
+                <input autofocus class="form-control" name="answer" type="number" id="integer" value="{{ last_attempt|to_integer }}" required=""/>
                 <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>
+                <textarea autofocus name="answer" id="string" class="form-control" style="width: 100%" required="">{{ 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 }}" />
+                <input autofocus class="form-control" name="answer" type="number" step="any" id="float" value="{{ last_attempt|to_float }}" required=""/>
                 <br/><br/>
             {% endif %}
 
diff --git a/yaksh/templates/yaksh/show_video.html b/yaksh/templates/yaksh/show_video.html
index d6d08ea..1b2efcb 100644
--- a/yaksh/templates/yaksh/show_video.html
+++ b/yaksh/templates/yaksh/show_video.html
@@ -14,8 +14,6 @@
 <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>
 <script type="text/javascript" src="{% static 'yaksh/js/tinymce/js/tinymce/tinymce.min.js' %}"></script>
 {% endblock %}
 {% block css %}
@@ -282,5 +280,12 @@
     </div>
 </div>
 <div id="dialog"></div>
+<div class="modal" tabindex="-1" role="dialog" id="myModal">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-body" id="lesson_quiz_question"></div>
+    </div>
+  </div>
+</div>
 {% endblock %}