First cut for in video quizzes

7 files changed, 200 insertions, 84 deletions

diff --git a/yaksh/templates/base.html b/yaksh/templates/base.html
index c70c265..7ce653d 100644
--- a/yaksh/templates/base.html
+++ b/yaksh/templates/base.html
@@ -20,6 +20,8 @@
   <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' %}">
 
 
   {% block meta %}
@@ -37,6 +39,9 @@
   <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>
       new WOW().init();
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 b984db0..024ce49 100644
--- a/yaksh/templates/yaksh/add_lesson.html
+++ b/yaksh/templates/yaksh/add_lesson.html
@@ -17,15 +17,14 @@
 {% endblock %}
 
 {% block content %}
-<div class="container">
-{% if error %}
-<div class="alert alert-danger">
-    {{error}}
-</div>
-{% endif %}
-<div class="container">
-    <div class="row justify-content-center form-group">
-        <div class="col-md-9 col-md-offset-4">
+<div class="container-fluid">
+    {% if error %}
+    <div class="alert alert-danger">
+        {{error}}
+    </div>
+    {% endif %}
+    <div class="row form-group">
+        <div class="col">
             <a class="btn btn-primary" href="{% url 'yaksh:get_course_modules' course_id %}">
                 <i class="fa fa-arrow-left"></i>&nbsp;Back
             </a>
@@ -52,7 +51,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 %}
@@ -61,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 %}
                     {% endif %}
@@ -71,6 +70,12 @@
                     <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}}
@@ -126,29 +131,90 @@
                         <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>
-                    <div class="card" id="preview_text_div" style="display: none;">
-                        <div class="card-heading">
-                            <center>
-                                <h3>Description Preview</h3>
-                            </center>
-                        </div>
-                        <div class="card-body" id="description_body">
-                        </div>
-                    </div>
                 </fieldset>
             </form>
         </div>
+        <br><br>
+        <div class="col">
+            <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 hide" id="toc-collapse">
+                    <div class="card-body" id="toc"></div>
+                </div>
+            </div>
+            <br>
+            <div class="card" id="preview_text_div">
+                <div class="card-header">
+                    Setup Lesson
+                </div>
+                <div class="card-body">
+                    {% if lesson_form.instance and lesson_form.instance.video_path %}
+                        {% with lesson_form.instance.video_path|video_name as video %}
+                        <div id="player" data-plyr-provider="{{video.1}}" data-plyr-embed-id="{{video.0}}"></div>
+                        <br>
+                        <div style="display: none" id="loader">
+                            <span class="spinner-border text-success"></span>
+                            Loading...
+                        </div>
+                        <form action="{% url 'yaksh:add_marker' course_id lesson_form.instance.id %}" method="POST" id="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>
 {% endblock %}
\ No newline at end of file
diff --git a/yaksh/templates/yaksh/add_module.html b/yaksh/templates/yaksh/add_module.html
index 262c009..bd97e36 100644
--- a/yaksh/templates/yaksh/add_module.html
+++ b/yaksh/templates/yaksh/add_module.html
@@ -57,7 +57,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 %}
@@ -66,41 +66,24 @@
                                 <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>
-                    <div class="card" id="preview_text_div" style="display: none;">
-                        <div class="card-heading">
-                            <center>
-                                <h3>Description Preview</h3>
-                            </center>
-                        </div>
-                        <div class="card-body" id="description_body">
-                        </div>
-                    </div>
                 </fieldset>
             </form>
         </div>
diff --git a/yaksh/templates/yaksh/add_topic.html b/yaksh/templates/yaksh/add_topic.html
new file mode 100644
index 0000000..6f88a88
--- /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' course_id lesson_id topic_id %}" id="topic-form">
+{% else %}
+<form class="form-group" method="POST" action="{% url 'yaksh:add_topic' 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..5c8db5f
--- /dev/null
+++ b/yaksh/templates/yaksh/add_video_quiz.html
@@ -0,0 +1,74 @@
+{% if question_id %}
+<form class="form-group" method="POST" action="{% url 'yaksh:edit_marker_quiz' course_id lesson_id question_id %}" id="question-form">
+{% else %}
+<form class="form-group" method="POST" action="{% url 'yaksh:add_marker_quiz' 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();
+        console.log(option);
+        if(option === 'other') {
+            $('#id_topic').closest('tr').show();
+        } else {
+            $('#id_topic').closest('tr').hide();
+        }
+        $('#id_language').on('change', function() {
+            let lang_value = $(this).val();
+            console.log(lang_value);
+            if (lang_value === "other") {
+                $('#id_topic').closest('tr').show();
+                $('#id_type').children("option[value='code']").hide();
+            } else {
+                $('#id_topic').closest('tr').hide();
+                $('#id_type').children("option[value='code']").show();
+            }
+        });
+    });
+</script>
diff --git a/yaksh/templates/yaksh/show_video.html b/yaksh/templates/yaksh/show_video.html
index a2edbe0..e11e4cd 100644
--- a/yaksh/templates/yaksh/show_video.html
+++ b/yaksh/templates/yaksh/show_video.html
@@ -123,8 +123,14 @@
                 </a>
             {% endif %}
         {% else %}    <!--  Lesson body   -->
-            <div class="col-md-6" style="width: 100%">
-            {{lesson.html_data|safe}}
+            <div class="col" style="width: 100%">
+                {{lesson.html_data|safe}}
+            <br>
+            <div id="player" data-plyr-provider="youtube" data-plyr-embed-id="oHmm3mPxg6Y"></div>
+            <script>
+              const player = new Plyr('#player');
+              window.player = player;
+            </script>
             <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>