{% extends "templates/base.html" %} {% block title %}{{ content.name or 'Content Page' }}{% endblock %} {% block head_include %} <style> .lms-content { line-height: 1.8em; } .lms-content h1 { margin-top: 1em; } .lms-content h2 { margin-top: 1em; } .lms-content h3 { margin-top: 0.8em; } .lms-content h4 { margin-top: 0.6em; } section { padding: 5rem 0 5rem 0; } .plyr--video .plyr__control.plyr__tab-focus, .plyr--video .plyr__control:hover, .plyr--video .plyr__control[aria-expanded='true'] { background: #5e64ff !important; } .plyr__control--overlaid:focus, .plyr__control--overlaid:hover { background: #5e64ff !important; } .plyr__menu__container .plyr__control[role=menuitemradio][aria-checked=true]::before { background: #5e64ff !important; } .plyr__menu__container .plyr__control[role='menuitemradio'][aria-checked='true']::before { background: #5e64ff; } .plyr--full-ui input[type='range'] { color: #5e64ff !important; } .plyr__control--overlaid { background: rgba(94, 100, 255, 0.8) !important; } </style> <link rel="stylesheet" href="https://cdn.plyr.io/3.5.3/plyr.css" /> {% endblock %} {% macro title() %} <div class="mb-3"> <a href="/lms/course?name={{ course }}&program={{ program }}" class="text-muted"> {{_('Back to Course')}} </a> </div> <div class="lms-title"> <h2>{{ content.name }} <span class="small text-muted">({{ position + 1 }}/{{length}})</span></h2> <div class="lms-timer float-right fond-weight-bold hide"></div> </div> {% endmacro %} {% macro navigation() %} {% if previous %} <a href="/lms/content?program={{ program }}&course={{ course }}&topic={{ topic }}&type={{ previous.content_type }}&content={{ previous.content }}" class='btn text-muted' style="box-shadow: none;">{{_('Previous')}}</a> {% else %} <a href="/lms/course?name={{ course }}&program={{ program }}" class='btn text-muted' style="box-shadow: none;">{{ _('Back to Course') }}</a> {% endif %} {% if next %} <button id="nextButton" onclick="handle('/lms/content?program={{ program }}&course={{ course }}&topic={{ topic }}&type={{ next.content_type }}&content={{ next.content }}')" class='btn btn-primary' disabled="true">{{_('Next')}}</button> {% else %} <button id="nextButton" onclick="handle('/lms/course?name={{ course }}&program={{ program }}')" class='btn btn-primary' disabled="true">{{_('Finish Topic')}}</button> {% endif %} {% endmacro %} {% macro video() %} <div class="mb-5"> {{ title() }} <div class="text-muted"> {% if content.duration %} {{ content.duration }} {{_('Mins')}} {% endif %} {% if content.publish_date and content.duration%} - {% endif %} {% if content.publish_date %} {{_('Published on')}} {{ content.publish_date.strftime('%d, %b %Y') }} {% endif %} </div> </div> <div id="player" data-plyr-provider="{{ content.provider|lower }}" data-plyr-embed-id="{{ content.url }}"></div> <div class="my-5 lms-content"> {{ content.description }} </div> {% endmacro %} {% macro article() %} <div class="mb-5"> {{ title() }} <div class="text-muted"> {% if content.author or content.publish_date %} {{_('Published')}} {% endif %} {% if content.author %} {{_('by')}} {{ content.author }} {% endif %} {% if content.publish_date %} {{_('on')}} {{ content.publish_date.strftime('%d, %b %Y') }} {% endif %} </div> </div> <div class="lms-content"> {{ content.content }} </div> {% endmacro %} {% macro quiz() %} <div class="mb-5"> {{ title() }} </div> <div id="quiz-wrapper"> </div> {% endmacro %} {% block content %} <section class="section"> <div> <div class='container pb-5'> {% if content_type=='Video' %} {{ video() }} {% elif content_type=='Article'%} {{ article() }} {% elif content_type=='Quiz' %} {{ quiz() }} {% endif %} <div class="pull-right" {{ 'hidden' if content_type=='Quiz'}}> {{ navigation() }} </div> </div> </div> </section> {% endblock %} {% block script %} {% if content_type=='Video' %} <script src="https://cdn.plyr.io/3.5.3/plyr.js"></script> {% elif content_type == 'Quiz' %} <script src='/assets/erpnext/js/education/lms/quiz.js'></script> {% endif %} <script> {% if content_type == 'Video' %} const player = new Plyr('#player'); {% elif content_type == 'Quiz' %} {% if next %} const quiz_exit_button = 'Next' const next_url = '/lms/content?program={{ program }}&course={{ course }}&topic={{ topic }}&type={{ next.content_type }}&content={{ next.content }}' {% else %} const quiz_exit_button = 'Finish Course' const next_url = '/lms/course?name={{ course }}&program={{ program }}' {% endif %} frappe.ready(() => { {% if content.is_time_bound %} var duration = get_duration("{{content.duration}}") var d = frappe.msgprint({ title: __('Important Notice'), indicator: "red", message: __(`This is a Time-Bound Quiz. <br><br> A timer for <b>${duration}</b> will start, once you click on <b>Proceed</b>. <br><br> If you fail to submit before the time is up, the Quiz will be submitted automatically.`), primary_action: { label: __("Proceed"), action: () => { create_quiz(); d.hide(); } }, secondary_action: { action: () => { d.hide(); window.location.href = "/lms/course?name={{ course }}&program={{ program }}"; }, label: __("Go Back"), } }); {% else %} create_quiz(); {% endif %} function create_quiz() { const quiz = new Quiz(document.getElementById('quiz-wrapper'), { name: '{{ content.name }}', course: '{{ course }}', program: '{{ program }}', quiz_exit_button: quiz_exit_button, next_url: next_url }) window.quiz = quiz; } function get_duration(seconds){ var hours = append_zero(Math.floor(seconds / 3600)); var minutes = append_zero(Math.floor(seconds % 3600 / 60)); var seconds = append_zero(Math.floor(seconds % 3600 % 60)); return `${hours}:${minutes}:${seconds}`; } function append_zero(time) { return time > 9 ? time : "0" + time; } }) {% endif %} {% if content_type != 'Quiz' %} frappe.ready(() => { next = document.getElementById('nextButton') next.disabled = false; }) function handle(url) { opts = { method: "erpnext.education.utils.add_activity", args: { course: "{{ course }}", content_type: "{{ content_type }}", content: "{{ content.name }}", program: "{{ program }}" } } frappe.call(opts).then(res => { window.location.href = url; }) } {% endif %} </script> {% endblock %}