Teachable Course Completion Badge

WHAT IT DOES

This userscript transforms your Teachable student dashboard into a visual progress tracker. It reads course progress data from the page—extracting completion percentages for each course—and displays a color-coded badge on every course card. The color system uses a four-tier gradient: green for 100% complete, yellow for 50-99% in progress, orange for 1-49% started, and red for 0% not started. Each badge shows the completion percentage and a status label. A summary panel shows total courses, completed courses, in-progress courses, started courses, not-started courses, and average completion rate. Courses can be sorted by completion percentage to see your most and least completed courses first. Each course includes a one-click ↗ button to open the course curriculum. This is invaluable for students, lifelong learners, and educators who need to track learning progress, identify which courses need attention, and stay motivated with visual progress indicators.

WHERE IT RUNS

The script runs on all Teachable web application pages at *.teachable.com/*, with automatic detection of course lists, student dashboards, and any page displaying course cards or progress information. It works across all Teachable interfaces by using multiple selector strategies to find course cards, progress bars, completion percentages, and course links. The script detects dynamic content loading and re-applies completion badges when the course list updates. It runs across the entire Teachable domain, ensuring coverage whether you're viewing your main student dashboard, a specific course page, or a filtered course view.

HOW TO USE

Install the script via the BotGentz extension and navigate to your Teachable student dashboard or course list. Completion badges will appear automatically on every course card. Each badge shows the completion percentage and status label with a color-coded background. The summary panel shows total courses, completed, in-progress, started, and not-started counts, plus average completion rate. Click the ↗ button next to any course to open its curriculum in a new tab. Use the panel controls to customize your experience: toggle completion badges on or off, show or hide the summary panel, enable or disable the completion percentage on badges, or sort courses by completion percentage. The "Refresh" button manually reapplies all badges if the page updates, and the "Copy summary" button exports the completion summary to your clipboard for reporting.

THE MECHANISM - DATA EXTRACTION, STATUS CATEGORIZATION, AND PROGRESS SUMMARIZATION

This script identifies course progress data by scanning each course card using a cascading selector strategy. It extracts course names from title elements, completion percentages from progress bars (by reading width attributes or parsing percentage text), and course links from anchor elements. When progress bars are not available, the script parses text like "3/10 lessons completed" to calculate the percentage. Completion status is categorized as "complete" (100%), "in_progress" (50-99%), "started" (1-49%), or "not_started" (0%). The badge is created as a DOM element with inline styles and inserted into the course name cell. The summary panel aggregates data across all courses and calculates the average completion rate. Sorting reorders the DOM elements based on completion percentage.

THE PANEL

The control panel appears as a floating, draggable element that you can position anywhere on the Teachable page. Drag by the header to reposition it, and the position is saved per site using GM_setValue so it stays where you left it across sessions. Release the panel near any edge and it snaps into place, keeping your workspace organized. Click the panel header to collapse it into a small bubble showing only the chart emoji (📊), minimizing distraction while keeping controls accessible. Drag from the bubble to restore the full panel. The panel automatically resizes to fit its content and includes all setting toggles, action buttons, and a completion legend. Press the Escape key to quickly collapse the panel to its minimized state. The panel remains visible across page navigation within Teachable, with completion badges updating automatically as you move between views.

PLEASE NOTE

This script requires the free BotGentz extension to function. It is designed for Teachable students who need to track course progress and stay motivated. The script reads only visible course data from the DOM—it does not access Teachable's API, your account credentials, or any sensitive information. All settings (badge visibility, summary toggle, percentage toggle, sort toggle, and panel position) are stored locally using GM_setValue and never leave your browser. The script does not modify your Teachable data—it only reads and visualizes visible progress information. Completion percentage extraction depends on the progress indicators visible on the page; if Teachable updates its website structure or progress bar implementation, the script may need to be updated to match new selectors. The sorting feature reorders DOM elements; if the page uses infinite scroll or lazy loading, sorting may affect only currently loaded courses.