Files
Gainsight/Custom_Templates/customer_templates/DoorDash Resource Hub/course.html.liquid

131 lines
3.6 KiB
Plaintext

{% assign groups = current_person.groups | map: 'name'%}
{% if groups contains 'NZ Mandatory Training' %}
{% assign nz_status = true%}
{% else %}
{% assign nz_status = false%}
{% endif %}
{% if course.properties.is_single_activity_course %}
<script>
window.location.replace("/courses/{{course.id}}");
</script>
{% else %}
{% include "header" %}
<main class="np-main np-max-width np-page-container">
<div class="np-hidden-mobile" id="course-desktop">
{% include "course_desktop_view" %}
</div>
<div class="np-hidden-desktop" id="course-mobile">
{% include "course_mobile_view" %}
</div>
</main>
{% include "footer" %}
{% if nz_status %}
<style>
#course-mobile .np-top-button:after,
#course-desktop .np-top-button:after{
border-radius: 30px !important;
}
</style>
{% endif %}
<style>
.np-page-container {
margin-bottom: 0px;
}
/* button countdown animation and styles associated with it */
#course-mobile .np-top-button.animate,
#course-desktop .np-top-button.animate {
position:relative;
background:#000000;
z-index:1;
}
#course-mobile .np-top-button:after,
#course-desktop .np-top-button:after {
content: '';
position: absolute;
left:0;
top:0;
height:100%;
width:100%;
z-index:-1;
border-radius:4px;
transition:border-radius 0.2s;
}
#course-mobile .np-top-button.animate:after,
#course-desktop .np-top-button.animate:after {
background-color:#ff2c00;
animation-name: bgColorLeftToRight;
animation-duration: 10s;
animation-timing-function: linear;
z-index:-1;
border-top-right-radius:0;
border-bottom-right-radius:0;
}
@keyframes bgColorLeftToRight {
0% { width:0 }
100% { width:100% }
}
/* end button animaation */
</style>
{% if course.properties.course_language == 'fr' %}
<script>
$('div.np-top-vocabulary.np-text-title.np-text-muted').text('APPRENEZ COMMENT DANS CE COURS DE 3 MINUTES')
$('div.np-text-title.np-course-outline-title').text('PLAN DE COURS')
$('.np-card-heading').text('À propos du module')
</script>
{% if course.progress == 0 %}
<script>
$('.np-top-button.np-button-font-color.np-button.np-button-big').text('Commencer le cours')
</script>
{% elsif course.progress > 0 and course.progress < 100 %}
<script>
$('.np-top-button.np-button-font-color.np-button.np-button-big').text('Continuer')
</script>
{% else %}
<script>
$('.np-top-button.np-button-font-color.np-button.np-button-big').text('Reprendre le cours')
</script>
{% endif %}
{% endif %}
{% if course.properties.course_language != 'fr' %}
<script>
var progress = {{ course.progress }}
progress < 100 ? initCourseCountdown() : "";
console.log("script")
// Init 10 second countdown to auto start learner in course
function initCourseCountdown() {
console.log("init countdown")
let btn
window.innerWidth < 768 ?
btn = document.getElementById("course-mobile").querySelector('.np-top-button') :
btn = document.getElementById("course-desktop").querySelector('.np-top-button')
btn.classList.add('animate')
btn.addEventListener("animationend", () => {
console.log("ended")
btn.classList.remove('animate')
// redirect learner to next activity
{% if course.enrolled? %}
window.location.href = `{% route course_viewer, course_id: course.id, learning_path_id: params.learning_path_id %}`
{% endif %}
}, false);
}
</script>
{% endif %}
{% endif %}