Course number icon filter Local plugin

Transforms leading numbers (or string) in sections and activities titles into icons.

Download the latest version

Download (v0.9.0)
Poster for Course number icon filter Moodle plugin

Course number icon filter

Local Plugin
magic_button

Format Numbers as Icons

Transforms and formats the numbers at the beginning of section and activity titles into visual badges. This provides a clear and organized way to number your course content.

tune

More than just numbers

Beyond numbers, leverage regular expressions to define exactly what part of the title becomes the icon, display information and badge-like visuals.

widgets

Enhanced structural clarity

Give your users a simpler experience with clear and effective visual cues that guide them through the priority and order of your course content.

Installing the Plugin

  1. Download the plugin here, or, if you prefefer, from the Moodle plugin directory

  2. In your Moodle site, go to Site administration > Plugins > Install plugins and upload the zip file.

  3. Follow the instruction and update the site

Once installed, you can configure the plugin's settings (the default works fine) by going to Site administration > Plugins > Filters > Section number icon filter.

How to use the plugin

  • Format titles correctly: Use the defualt format {number}. {title} or define your own.
  • Turn off Edit Mode: Disable Moodle's "Edit Mode" to see the icons.
  • Enjoy your organized course! Now your users can clearly identify the order and priority of topics within the course.

Fine-Tune Your Icons

Control where and how badges appear:

  • Enable/disable badges for sections and activities:

    Tailor the visual enhancement to specific areas of your course.

  • Customize breadcrumb appearance:

    Decide whether breadcrumbs show the badge, the original text, or hide the matched text for a cleaner navigation.

  • Choose a regex to match your icon content:

    Define a precise pattern to identify which part of your titles will be converted into visual icons.

Customize Your Breadcrumbs

Moodle's breadcrumbs are the navigation links at the top of the page, showing your location within the site.

You can choose how titles look in breadcrumbs: with a badge, just text, or hidden.

Breadcrumbs treat all titles the same, whether they are sections or activities.

If a title matches the badge rules, it will look the same in breadcrumbs for both sections and activities.

If the plugin is turned off, no badges will be displayed in the breadcrumbs.

Advanced Control with Regex

For advanced badge control, use Regular Expressions (regex) - these are special text patterns that help you find and match specific characters or words within text.

You can edit the regex in the plugin settings by going to Site administration > Plugins > Filters > Course number icon filter.

When writing your regex, define one part to select the text that will become the badge and another part for the rest of the title. This gives you the flexibility to display exactly what you need.

You can find more details and working examples in the plugin documentation.

Beyond Numbers!

The power of Regular Expressions unlocks a wide range of possibilities for what you can display as an icon. It's not limited to just numbers! Here are a few examples to spark your imagination:

  • Different Numbering Formats: Want to use Roman numerals? A regex like ^([IXV]+)\.\s*(.*) will turn "I.", "II.", "III." etc., into icons. Or perhaps you need letter-based numbering like "A.", "B.", "C."? A regex like ^([A-Z])\.\s*(.*) could achieve that.

  • Difficulty Levels: Imagine visually highlighting the difficulty of an activity by using a regex like ^((?:EASY)|(?:NORMAL)|(?:HARD))\s+(.*) to display "EASY", "NORMAL", or "HARD" as distinct icons.

  • Topic Keywords: If you consistently start titles with keywords, a regex like ^([A-Za-z]+):\s*(.*) could turn those keywords (like "PROJECT:") into icons.

Add your touch

This plugin uses simple Bootstrap styling for the visual badges.

The badges will take their text color from the title, ensuring they fit your Moodle theme. The badge background matches the title text, and the text inside will automatically change color (black or white) for good contrast.

For more advanced looks, you can use your own CSS. Target the classes .numicon-container (position), .numicon-icon (badge style), and .numicon-num (badge text) to fully customize the icons.

To ensure emojis within your badges display correctly in their original colors, the CSS class .numicon-emoji is automatically applied to all recognized emoji.