Tutor LMS – Course Content Tab Element

Overview

The Course Content Tab element in Tutor LMS provides structured navigation for course-related details, allowing users to access various sections in a tabbed format. It includes four main tabs:

1. Course Information – Displays course details, curriculum, lesson list with links, and lesson durations.
2. Reviews – Shows student reviews, review dates, and the average course rating.
3. Q&A – Allows students to ask and view questions related to the course.
4. Announcements – Displays upcoming course announcements and important updates.

This element is fully customizable, with styling options for all components.

Features

• Provides a tabbed interface for easy navigation.
• Displays lesson lists with links and duration.
• Shows student reviews with timestamps and average ratings.
• Allows users to ask questions related to the course.
• Displays important course announcements.
• Offers full styling customization for tabs, content, typography, colors, and spacing.

Available Controls

Content Controls

1. Enable/Disable Tabs – Choose which tabs to display.
2. Custom Tab Labels – Rename tabs (Course Info, Reviews, Q&A, Announcements).
3. Show Lesson Links – Enable clickable lesson titles.
4. Display Lesson Duration – Show estimated time for each lesson.
5. Enable Average Rating – Show total rating count in the Reviews tab.
6. Enable Q&A Submission – Allow students to ask questions.
7. Enable Announcement Section – Show upcoming announcements.

Style Controls

Tab Styling

1. Tab Background Color – Customize the background of the tabs.
2. Tab Border & Shadow – Modify the border and shadow of tabs.
3. Active Tab Indicator – Customize the active tab color and underline style.

Content Styling

4. Lesson Title Style – Customize font, color, and size of lesson titles.
5. Review Text & Date Style – Modify review text and timestamp appearance.
6. Q&A Box Styling – Change input field styles for submitting questions.
7. Announcement Layout – Adjust background, padding, and text styling.
8. Spacing & Alignment – Control margins and paddings for better layout.

Dynamic Behavior

• Course Information Tab: Fetches and displays lesson lists with links and time duration dynamically.
• Reviews Tab: Shows existing reviews, ratings, and timestamps of student feedback.
• Q&A Tab: Allows enrolled students to ask questions and view answers from the instructor.
• Announcements Tab: Displays upcoming course updates or important messages.

Use Case

• Perfect for Course Detail Pages to provide structured and interactive navigation.
• Enhances user experience by organizing course information efficiently.