Feature Wiki
Tabs
Adaptive Learning Paths: Visualization
Page Overview
[Hide]- 1 Initial Problem
- 2 Conceptual Summary
- 3 User Interface Modifications
- 4 Additional Information
- 4.1 Involved Authorities
- 4.2 Technical Aspects
- 4.3 Privacy
- 4.4 Security
- 4.5 Contact
- 4.6 Funding
- 5 Discussion
- 6 Implementation
- 6.1 Description and Screenshots
- 6.2 Test Cases
- 6.3 Privacy
- 6.4 Approval
1 Initial Problem
Currently, users in a Learning Sequence do not have a visual overview of the available adaptive paths. The progress is only visible as a list, which makes it difficult to understand branching logic or to orient oneself within complex, non-linear learning structures. Furthermore, there is no centralized dashboard that visually represents the individual learning journey.
2 Conceptual Summary
This focuses on the visual representation of adaptive learning paths and their integration into the user dashboard. Key features include:
- Visual Learning Map: A graphical representation where objects are nodes and conditions/preconditions are edges (paths).
- User Positioning: Clear visual indication of the user's current position and progress within the map.
- Integration: Displaying the learning map as a Co-Page element on the Start and Endpage of the LSO.
- Interaction & Navigation: Users should be able to navigate the map and directly access accessible objects.
- Library Selection: Evaluation of a suitable JavaScript library for graph visualization. The library must support:
- Accessibility (A11y): High priority on keyboard navigation, screen reader support (ARIA), and sufficient contrast.
- Mobile Responsiveness: Full support for mobile devices, including touch gestures (pinch-to-zoom, pan) and responsive rendering for various screen sizes.
- Interactivity: Support for zooming, panning, and potentially Drag-and-Drop (required for administrative map assembly in later stages).
- Accessibility (A11y): High priority on keyboard navigation, screen reader support (ARIA), and sufficient contrast.
3 User Interface Modifications
3.1 List of Affected Views
- Learning Sequence main view.
- Integrated Page Editor (CO Page) for dashboard customization.
3.2 User Interface Details
- New Component: Graph Visualization Widget.
- Progress Indicators: Color-coded or icon-based status for nodes (e.g., "completed", "current", "locked").
- Tooltip/Detail View: Information about conditions when hovering or focusing on a path.
3.3 New User Interface Concepts
Visual map navigation as a primary interface for adaptive learning sequences.
3.4 Accessibility Implications
The visualization must not be the only way to navigate. A fallback list view or text-based description of the path must be provided. The JS library must allow for ARIA labels on SVG/Canvas elements and full keyboard control (e.g., Tab-navigation through nodes).
4 Additional Information
4.1 Involved Authorities
- Authority to Sign off on Conceptual Changes: Großkopf, Katrin [katrin.grosskopf]
- Authority to Sign off Code Changes: Clausen, Keven [keven.clausen], Großkopf, Katrin [katrin.grosskopf], Auerbach, Jeanine [jeanine.auerbach]
4.2 Technical Aspects
- Data extraction from the database to map all objects and their dynamic relations for a specific user.
- Evaluation of libraries such as D3.js, Cytoscape.js, or React Flow/XYFlow (adapted for ILIAS) regarding their accessibility compliance and mobile performance.
4.3 Privacy
Visualization uses existing learning progress data. No new personal data categories are required.
4.4 Security
Standard web security practices for data fetching and JS execution.
4.5 Contact
Person to be contacted in case of questions about the feature or for funding offers: Auerbach, Jeanine [jeanine.auerbach], Clausen, Keven [keven.clausen]
4.6 Funding
Funding status and funding parties are listed in the block 'Status of Feature' in the right column of this page.
If you are interested to give funding for this feature, please get into contact with the person mentioned above as 'Contact'.
Implementation requires funding of 31,000 Euro.
5 Discussion
6 Implementation
Feature has been implemented by {Please add related profile link of this person}
6.1 Description and Screenshots
{ Description of the final implementation and screenshots if possible. }
6.2 Test Cases
Test cases completed at {date} by {user}
- {Test case number linked to Testrail} : {test case title}
6.3 Privacy
Information in privacy.md of component: updated at {date} by {user} | no change required
6.4 Approval
Approved at {date} by {user}.
Last edited: 5. May 2026, 12:15, Auerbach, Jeanine [jeanine.auerbach]