brotherton-erpnext/erpnext/www/lms/content.html
2019-06-05 17:49:42 +05:30

180 lines
4.8 KiB
HTML

{% extends "templates/base.html" %}
{% block title %}{{ content.name or 'Content Page' }}{% endblock %}
{% block head_include %}
<style>
div.card-hero-img {
height: 220px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-color: rgb(250, 251, 252);
}
.card-image-wrapper {
display: flex;
overflow: hidden;
height: 220px;
background-color: rgb(250, 251, 252);
justify-content: center;
}
.image-body {
align-self: center;
color: #d1d8dd;
font-size: 24px;
font-weight: 600;
line-height: 1;
padding: 20px;
}
</style>
<link rel="stylesheet" href="https://cdn.plyr.io/3.5.3/plyr.css" />
{% endblock %}
{% macro navigation() %}
<div class="row">
<div class="col-md-7">
<h1>{{ content.name }} <span class="small text-muted">({{ position + 1 }}/{{length}})</span></h1>
</div>
<div id="nav-buttons" class="col-md-5 text-right" {{ 'hidden' if content_type=='Quiz' }}>
{% 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 %}
</div>
</div>
{% endmacro %}
{% macro video() %}
<div class="mb-5">
{{ navigation() }}
<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" style="line-height: 1.8em;">
{{ content.description }}
</div>
{% endmacro %}
{% macro article() %}
<div class="mb-5">
{{ navigation() }}
<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 style="line-height: 1.8em;">
{{ content.content }}
</div>
{% endmacro %}
{% macro quiz() %}
<div class="mb-5">
<div class="row">
<div class="col-md-7">
<h1>{{ content.name }} <span class="small text-muted">({{ position + 1 }}/{{length}})</span></h1>
</div>
</div>
</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>
</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(() => {
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;
})
{% 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 %}