Requires Timetable Pro
Timetable allows you to visualize schedules, progress, and success predictions in a clear and engaging way. With customizable visuals, learners can quickly understand their status and progress within a course.
Our design packages provide ready-to-use visuals for success prediction feedback and course completion indicators. You can also create your own visuals to match your course design or institutional branding. Explore our catalog to discover a variety of themes and styles that suit your needs.
Success prediction visuals
-
Learning Mountain0,00 € -
Puzzle0,00 € -
Gauge needle0,00 €
How to use a design package with Timetable Pro
- Install the plugin
Install the Timetable Pro plugin - Download a design package
Download one of our design packages. All packages include images for different success prediction states. - Define your custom course schedule in Timetable
- Setup your prediction model
Prediction setup (1): Overall feedback
Define the overall feedback for the success prediction. You can set custom score boundaries and create different percentage levels that represent various stages of predicted success.
For each level, you can add a custom feedback text and assign a visual that represents this stage. The visuals can be uploaded easily by dragging and dropping the image files into the editor. Course creators can choose different visuals for each course, allowing the feedback design to match the course theme or target group.
Use our ready-to-use design packages with prepared visuals that can be integrated directly into the prediction setup.
Prediction setup (2): Factor definition
Prediction factors allow you to define how the success prediction is calculated and how it is visually communicated to learners. Each factor contributes to the overall prediction score and can be configured individually for your course.
Adjust the weight of each factor
You can define a weighting factor for every prediction factor. This allows you to emphasize certain aspects of learning behavior or reduce the influence of others. Setting a factor’s weight to 0 effectively excludes it from the prediction model.
In some cases, it may also make sense to hide a factor from learners. Hidden factors still contribute to the success prediction but are not displayed in the learner interface. For example, this can be useful for factors such as Track Record, which may influence predictions but should not always be shown prominently.
Define score boundaries
For each prediction factor, you can define score boundaries that represent different performance levels. You decide how many levels are meaningful for your course and where the boundaries should be placed.
These levels determine how the factor is visualized in the progress donut and what feedback learners receive. This flexibility allows you to adapt the prediction model to different pedagogical approaches or course contexts.
Design the visual feedback
Each level can be customized visually. For every boundary you can define:
- an icon displayed inside the progress donut
- a feedback text shown to the learner
- a color scheme representing the performance level
The icon can be selected from a drop-down menu containing common symbols such as checkmarks or information icons. If your platform uses custom icon classes, these can also be used here.
Alternatively, you can upload a custom image by simply dragging and dropping it into the editor.
Choose meaningful colors
Colors help learners interpret their status at a glance. Standard color schemes such as success (green) or danger (red) are available directly in the interface. If needed, you can also define custom colors to match your course design or institutional branding.
See our designs in action!
We have created a demo course using our design packages. Feel free to explore it!
How to create your own designs
What size format should the files have?
Images are displayed in a square format. We recommend creating visuals in a minimum size of 500 × 500 px. Larger sizes (e.g., 800 × 800 px) can also be used to ensure crisp rendering on high-resolution displays.
Which file types are best to use?
Use jpg, png or gif files. Export images as PNG files to support transparent backgrounds.
What needs to be considered when designing the activity images?
When creating visuals for prediction feedback or completion indicators, keep the design clear and easy to understand. The visual should communicate progress through simple and recognizable stages.
Some helpful design approaches include:
- Indicators (e.g., gauges, meters, progress bars)
- Paths or journeys (e.g., climbing a mountain, walking a trail)
- Development stages (e.g., growing plants, building blocks)
- Familiar schemas (traffic lights, progress ladders, checkmarks)
Avoid overly complex graphics. Learners should be able to recognize the meaning of each stage instantly.
Use clear visual progression
Your visuals should represent distinct stages of progress. Each step should visibly indicate improvement or advancement so learners can easily interpret their status.
For example:
- more color appearing
- elements being added or completed
- a character progressing through stages
- a path or journey advancing
Consistency between stages is important so that learners intuitively understand the sequence.
Use transparent backgrounds
We recommend using transparent backgrounds whenever possible. This ensures that the visuals work well with different course themes, background colors, and layout styles.
Ensure good visibility
Design visuals with strong contrast and clear shapes so they remain readable even when displayed at smaller sizes. Avoid fine details that may be difficult to see.
Keep a consistent style
If you create multiple visuals for a package, maintain a consistent visual style across all stages:
- same color palette
- same illustration style
- similar composition
This helps learners quickly recognize the visual system used in the course.
Design inspiration and tips
There are many ways to visualize success prediction and progress. The key is to use a clear metaphor that naturally represents advancement or improvement.
Here are a few examples of visual concepts that work well:
Gauge indicators
A classic meter or gauge that moves from red to green to indicate increasing success prediction.
Puzzle completion
Puzzle pieces gradually appear or fill with color as the prediction improves, symbolizing that the full picture is coming together.
Learning journey
A learner progresses along a path or climbs a mountain of books, visually representing advancement through the course.
Simple status indicators
Minimal icons such as checkmarks, signals, or progress markers that communicate the learner’s status at a glance.
These concepts demonstrate how simple visual logic can make progress and prediction easier to understand for learners. When creating your own visuals, focus on metaphors that clearly communicate movement, completion, or improvement.
Recommended Design Workflow
Follow these simple steps to create your own prediction or completion visuals.
1. Choose a clear visual metaphor
Start with a concept that naturally represents progress or improvement. Examples include gauges, paths, mountains, puzzle pieces, or progress indicators.
2. Define the number of stages
Decide how many levels you want to represent. Typically 3–5 stages work best to communicate meaningful progress without becoming visually complex.
3. Design the visual progression
Create a visual sequence where each stage clearly represents advancement. For example, add color, reveal new elements, or move a character further along a path.
4. Export and upload the visuals
Export the images as square PNG files with transparent backgrounds. You can then upload them directly via drag & drop in the Timetable prediction setup.
Course completion visuals
Requires Timetable Pro
Course completion visuals help learners understand which course completion conditions have already been met and which still need to be fulfilled. Clear visual indicators make it easy to track progress toward course completion at a glance.
In the Timetable interface, these visuals are displayed together with progress indicators and detailed lists of activities or courses. Explore ready-to-use design packages or create your own visuals to match your course style and learning environment.
Get design packages
-
Minimal completion icons0,00 €
How to use course completion visuals in Timetable
- Install the plugin
Install the Timetable Pro plugin. - Download a design package
All packages include images for common course completion conditions in Moodle. - Admins have to add the files here: Site administration → Admin Tools → Timetable → Completion condition visuals
Upload the images for each completion condition via drag & drop. Each condition requires two images: one for the “condition met” state and one for the “condition not met” state. - Set up your course: The visuals are automatically displayed when the corresponding course completion condition is enabled in the course.
How to create your own visuals
What size format should the activity files have?
Images are displayed in a square format. We recommend to use a square format 500x500px.
Which file types are best to use?
Use png or jpg.
What needs to be considered when designing course completion visuals?
Course completion visuals represent whether a completion condition has been met or not. Therefore, the design should clearly communicate two distinct states: condition fulfilled and condition not fulfilled.
Use simple and recognizable symbols that learners can interpret instantly. Common approaches include checkmarks, icons that change color, or visuals where an element appears or becomes highlighted once the condition is completed.
Keep the visuals clear and minimal, since they are often displayed in small sizes and alongside progress indicators. Avoid complex illustrations or fine details that may be difficult to recognize.
Design inspiration and tips
When designing course completion visuals, focus on clarity and simplicity. The goal is for learners to immediately understand whether a completion condition has been fulfilled or not.
Effective visuals usually rely on clear visual contrasts between the two states. This can be achieved through color changes, highlighted elements, or icons that appear once a condition is met.
Some common design approaches include:
- Checkmarks or status icons that appear when a condition is completed
- Color transitions (for example from grey to green)
- Badges or stamps that indicate completion
- Filled vs. outlined icons to represent progress
Try to keep the visuals minimal and consistent across all completion conditions. Avoid overly complex illustrations, as the images are often displayed at small sizes alongside other course information.
Need some more inspiration?
Check out our product demo courses. We now have a dedicated plugin hub for each of our premium plugins. These hubs are product courses directly on our Moodle Demo Site. We offer demo courses on features and full showcases for inspiration and examples. Additionally, there are already several videos with instructions and information about the products. We are continuously expanding and adding more informational material to the hubs.