About
The Learning path widget provides a highly visual and interactive way for students to navigate their educational journey. It transforms traditional course lists into a dynamic path, allowing students to see their progress across multiple courses and understand the sequence of their learning.
Tip: You can find ready to use designs and instructions on how to create your own SVG files for the Learning path widget in our Design Studio.
What is displayed?
The widget utilizes a flexible visualization to show progression through a specific sequence of courses. While the layout can vary – ranging from simple path to complex maps with background images and dedicated zones – the following elements are displayed:
Path elements
Individual courses represented as nodes.
The courses can appear as different shapes depending on the configuration.
Color–coded states on each course node that reflect the course status of the viewing user.
Optional visual icons that indicate the beginning and the end of the learning journey.
Info area – An optional dedicated space providing a summary and details about the entire learning path. This can appear as a compressed summary at the top or as a collapsible sidebar with more detailed information.
Note: For the path to display accurately, ensure that courses and categories are organized logically within Moodle.
Available settings
In the widget preferences, the following options can be configured to customize the appearance and logic of the path:
Info area – Enable or disable the info area.
Info area position – Set if the info area is display on top or in a sidebar. The sidebar mode offers additional customization.
Sidebar customization:
Info area KPI 1 to 4 – Configure up to four Key Performance Indicators to display, such as Courses, Courses (%), Badges, Period, or Status.
Display path index – Show an expandable progress bar for the courses included in the path, color coded by status, is displayed.
Display faculty – Select the roles from the included courses that you want to display.
Display badges – Show badges available in the included courses, which appear grayed out if they have not been earned yet.
Positioning:
Positioning – Position courses on a the path of a SVG file (distance between the courses will be evenly spread), or in zones to position courses in specific SVG elements.
Configure zones – When positioning is controlled by zones, you can configure the zones for the courses. If no zones are configured, courses are displayed in a honeycomb presentation.
Path for Desktop/Tablet/Mobile – Select specific path layouts for different device types.
Course size – Adjust the visual size of the displayed courses.
Available options:
Dot – No course image is displayed.
Tiny, Small, Medium, Large image, and Extra large – Course image is displayed and course shape and course visual can be configured.
Course shape – Select Circle, Triangle, Hexagon, Diamond, Star, or Shape of the vector element (The last option is only applicable when positioning is set to zones.)
Course visual – Select between, None, Number, or Course visual.
Start/Finish element – If enabled a start or finish element is added to the path.
Order by – Configure how to order the courses on the path.
Available options: Menu order, Course short name, Course full name, Course ID number, Course start date, or Custom order.
Custom order – Enter course IDs separated by commas to define the order.
Order direction – Choose between ASC (ascending) or DESC (descending).
Limit – Restrict the number of courses displayed on the path.
Note: Paths for desktop, tablet, and mobile have to be uploaded in the global settings to be available.
Color configuration:
Customize the specific colors used for the following course status:
Not available
Available
Enrolled
In progress
Completed
Failed
Limit data to:
Course categories – Filter the path to display courses from specific categories.
Current Category – Automatically show the path for the category the widget is placed in.
Course tags – Filter courses based on specific course tags.
Course Prerequisites – Select courses whose prerequisites should be displayed.
Current course – Limit the path context to the current course.
Assignment tags – Filter courses base on specific assignment tags. Only available with Timetable Pro.
Language – Filter path content based on the courses' language.