diff options
Diffstat (limited to 'yaksh/templates')
| -rw-r--r-- | yaksh/templates/base.html | 5 | ||||
| -rw-r--r-- | yaksh/templates/manage.html | 30 | ||||
| -rw-r--r-- | yaksh/templates/yaksh/add_lesson.html | 112 | ||||
| -rw-r--r-- | yaksh/templates/yaksh/add_module.html | 17 | ||||
| -rw-r--r-- | yaksh/templates/yaksh/add_topic.html | 12 | ||||
| -rw-r--r-- | yaksh/templates/yaksh/add_video_quiz.html | 94 | ||||
| -rw-r--r-- | yaksh/templates/yaksh/show_toc.html | 54 | ||||
| -rw-r--r-- | yaksh/templates/yaksh/show_video.html | 111 |
8 files changed, 347 insertions, 88 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 4211b1b..6018e54 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,7 +62,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 %} @@ -73,6 +72,12 @@ <br> Active: {{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}} @@ -128,30 +133,91 @@ <button class="btn btn-danger btn-lg" type="submit" id="submit" name="Delete"> <i class="fa fa-trash"></i> 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> <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"> + <br> + <div class="card"> + <div class="card-header"> + <a class="card-link" data-toggle="collapse" href="#toc-collapse"> + Table Of Contents <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"> </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 7112485..14e7630 100644 --- a/yaksh/templates/yaksh/add_module.html +++ b/yaksh/templates/yaksh/add_module.html @@ -62,7 +62,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 %} @@ -71,29 +71,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: {{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> <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> 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> 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> 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/show_toc.html b/yaksh/templates/yaksh/show_toc.html new file mode 100644 index 0000000..b263652 --- /dev/null +++ b/yaksh/templates/yaksh/show_toc.html @@ -0,0 +1,54 @@ +<table class="table table-responsive-sm"> +{% for toc in contents %} + {% with toc.get_toc_text as toc_name %} + <tr> + <td> + {{ 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> 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> Remove + </button> + </form> + </td> + </tr> + {% endwith %} +{% empty %} + <center> + <span class="badge badge-warning">No Table of contents added</span> + </center> +{% endfor %} +<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> +</table>
\ No newline at end of file diff --git a/yaksh/templates/yaksh/show_video.html b/yaksh/templates/yaksh/show_video.html index 9c8d133..4c54518 100644 --- a/yaksh/templates/yaksh/show_video.html +++ b/yaksh/templates/yaksh/show_video.html @@ -4,6 +4,8 @@ {% block title %} {{ learning_module.name }} {% endblock %} {% block script %} +<script type="text/javascript" src="{% static 'yaksh/js/lesson.js' %}"> +</script> <script type="text/javascript" src="{% static 'yaksh/js/mathjax/MathJax.js' %}?config=TeX-MML-AM_CHTML"> </script> {% endblock %} @@ -127,31 +129,94 @@ </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 <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 - </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 %} + <!-- 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 %} + <br> + <a href="{% url 'yaksh:next_unit' course.id learning_module.id current_unit.id %}" class="btn btn-info btn-lg" > + Next <i class="fa fa-step-forward"></i> + </a> + {% 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 <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> + {{ toc_name }} + </td> + <td> + {{content.get_content_display}} + </td> + <td> + {{content.time}} + </td> + </tr> + {% endwith %} + {% empty %} + <center> + <span class="badge badge-warning">No Table of contents added</span> + </center> + {% endfor %} + </table> </div> </div> - {% endif %} - {% endwith %} + </div> + </div> + <div class="col-md-8"> + <hr> + <h3><strong>Lesson Description</strong></h3> + <hr> + <div class="col" style="width: 100%"> + {{lesson.html_data|safe}} + </div> + <br> + {% if not lesson.video_path %} + <a href="{% url 'yaksh:next_unit' course.id learning_module.id current_unit.id %}" class="btn btn-info btn-lg" > + Next <i class="fa fa-step-forward"></i> + </a> + <br> + {% endif %} + <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 %} </div> |