The Course and Program Player creates create an environment that simulates a classroom experience for students, allowing them to engage with e-learning content as if they were present in person.
This article will demonstrate how you can personalize the appearance and functionality of your players and configure the course navigation.
Course player
To access the course player settings, navigate to Courses → Course Manager, select a course, and go to Course settings → Course Player.
Course Player skin
You can customize the appearance and feel of the course player by selecting its skin.
The Coloured Minimal skin will be chosen as the default option. You have the choice of selecting from three skins: Colored Minimal, Classic, and Minimal. Additionally, there are two Minimal & Dark skins specifically designed for Single Learning Activity courses. Enabling them will configure this course to display only the initial activity of the first section.
If you choose the Minimal skins, the course section descriptions will not be displayed in the Course Content section on the Course Layout page, and the learning activities' descriptions will not be displayed in the course player.Customize your Path Player
Here you can enable/disable different settings to customize how your path player looks.
The available options are:
Available Options |
1Hide the left path player. If you activate this setting, the left path player in your students course player will be removed. |
2. Show the course name in the course player or hide it. |
| 3. Show students' progress with a progress bar, which represents the percentage of the learning units that are considered completed |
| 4. Show all course learners tab |
| 5. Show all the course Learners tab next to the "Path" tab. This tab presents all the enrolled learners as links and motivates them to connect. |
| 6. Show the course Discussion tab if you want your learners to be able to discuss your course topics. Check this article for more information on the Discussion settings. |
7. Expand course sections on course load. You can select whether to expand the course sections when students visit the course player, displaying all the learning activities within each section. |
| 8. Number sections automatically or start section numbering from 00. |
| 9. Display the whole titles of course sections even if they need multiple lines (wrapping). If you check this box, the entire titles of your sections will appear no matter how large they are. Otherwise, titles will appear in one line with an ellipsis (...) at the end. |
10. Display the whole titles of learning activities even if they need multiple lines (wrapping), similarly to the section titles. |
| 11. Display the estimated reading time of the Ebooks (this setting can be enabled in the Ebook). |
Back button
While on course, but learning programs too, you can allow students to navigate away from the course player with a back button.
If you're working on a course, navigate to the Course Player tab. If you're working on a learning program, go to the Program Player tab.
You can choose to:
- Not having a button at all
- Navigate to the Course layout or Program page
- Navigate to the After login page
- Navigate to another school page
- Navigate to a Specific URL
Course Navigation
You can specify whether users can navigate freely in the course contents or have to comply with specific restrictions.
- Free navigation
If you choose this option (available on all our plans), users can navigate freely in your content without restrictions, so they can jump to any learning activity they want.
- Sequential navigation
With sequential navigation (available on our Pro Trainer plans or higher), the user has to "complete" each learning activity before continuing to the next. A common feature in accreditation courses, as well as others, is the requirement for users to complete each activity before moving on to the next. If they attempt to skip ahead, they'll encounter a message prompting them to finish the current activity first, and subsequent activities will appear locked until they do so.
- Navigation with Prerequisites
Some of the activities are considered prerequisites to unlocking the activities that follow them (available on our Learning Center plans or higher). When you enable this choice, the sideform when editing a learning activity will also present a checkbox for setting this activity as a prerequisite.
Course video Auto-Progress
Choose whether the next learning activity will automatically be loaded when the video learning activity ends.
Navigation Buttons/Sidebar navigation
You can rename the Navigation buttons, hide them, or show the next/previous navigation buttons at the bottom of the course player. Additionally, you can disable the Sidebar navigation.
Course completion rule
With this setting, you decide when should a course be considered as completed. These guidelines make sure that learners meet the requirements to complete a course. This setting will also trigger the "Course is completed" event for Zapier Webhooks.
- If you enable the Course is completed when the user passes all exam, assignments, and certificates webhook, but the course has no Assessments or Certificates, then on the users' card and user progress reports (which are available only to the admins), the course will not be marked as completed. The users will be able to view their course as 100% completed on their end on their progress bar, but from the perspective of an admin and reporting manager, we suggest selecting the Course is completed when the user completes all the learning activities, to avoid any reporting confusion.
- When the webhook for Course is completed when the user passes all exams, assignments, and certificates is activated the "course completion" event is triggered universally. However, the progress bar visible to the user may still appear as "incomplete" if there are additional learning activities, as it reflects the proportion of completed tasks.
If you wish to apply the Course Player settings to all of your created courses, check the relevant settings under Apply Course Player settings to all other courses.
Customize the Course player using CSS
Remove the ellipsis at the end of the learning activity description
If you have a learning activity with a long description and you wish to remove the ellipsis (...) at the end, insert the following code in your Custom Code editor → <style> (CSS) for built-in pages (i.e., social, profile, work pad, my account):
.lrn-path-cont-type {
white-space: normal!important;
}Change the background color of the learning activities section under Path
You can add the following code in your Custom Code editor → <style> (CSS) for built-in pages (i.e., social, profile, work pad, my account) (make sure to add the hex color of your choice and replace #ffc0cb), to change the background color of the learning activities in the path section:
.slug-path-player .lrn-path-conts{
background-color:#ffc0cb!important;
}Note: To ensure proper functionality, please select the Coloured Minimal skin (the default option) for the course player.
Change the background color of the Zoom learning activities
You can add the following code in your Custom Code editor → <style> (CSS) for built-in pages (i.e. social, profile, work pad, my account) (make sure to add the hex color of your choice and replace #ffc0cb) to change the background color in all Zoom learning activities:
.slug-zoomplayer #bodyWrapper{
background-color:#ffc0cb;
}Remove Learners List Autofill in the Discuss tab
According to your Community settings, you can let users start discussions within a course via the Discuss Tab of the Course Player. Users can type @ and get a user names list to tag and contact other users.
If you want to disable the user name list from appearing you can add the following code in your Custom Code editor → <style> (CSS) for built-in pages (i.e. social, profile, work pad, my account)
.mentions-autocomplete-list{display:none!important;}Hide the progress bar in the Course player
You can hide the progress bar in the Course Player, by using the following CSS snippet, which should be added in the Custom code editor of your school, and paste in the <style> (CSS) for built-in pages (i.e. social, profile, work pad, my account) slot. Don't forget to click on Update.
/ .slug-path-player .-default-course-player-progress-wrapper{
display:none;
}