Components For Learning (c4l)

• 
  

  Add role="note" to all components for screen reader accessibility

  
  

  Screen readers (NVDA, Narrator) ignored aria-label on plain <div> elements
  because they lack an implicit ARIA role. Adding role="note" makes screen
  readers announce the component type (e.g. "note, Tip") before reading content.

  
  

Components For Learning (c4l)

• 
  

  Add AI use framework components (allowed, not allowed, reported)

  
  

  Three new evaluative components for indicating AI usage policies:

  
  
  
  
  • aiuseallowed: green theme, indicates AI use is permitted
  
  
  • aiusenotallowed: red theme, indicates AI use is forbidden
  
  
  • aiusereported: orange theme, indicates AI use must be disclosed
  
  
  
  

  Each component includes icons, styles, lang strings, docs and align-left variant.

  
  

Components For Learning (c4l)

• Add documentation panel with component use cases


• Add conceptreview component


• Add furtherreading component


• Show fallback message when component has no documentation


• Improved code styling.

Components For Learning (c4l)

• MDL-78306: Convert core/modal and remaining legacy uses to ESM


• Improve CSS:


• New min-width for modal.


• Set a correct size for dropdown image.

Components For Learning (c4l)

• Avoid the creation of extra html tags at the end of each component when TinyMCE wraps the component HTML.


• Fix layout when TinyMCE Fullscreen plugin is used.

• Remove invalid quote from Attention component (thanks to: Stefan Hanauska)


• Disable plugins by role (Moodle 5.0)


• Fix: Preview HTML displays correctly a variant HTML when hovering.

• Minor bug fixes.

Custom components

• You could add at most 12


• Images are allowed


• Button component with your own text and icon


• Set a sort order for buttons


• Add your new component CSS classes in the plugin for preview it inside tiny and in your theme or additionalhtmlhead setting for component rendering.


• Choose to apply full width variant


• Inline CSS and javascript are not allowed.

Fix hardcoded strings to use lang strings

• Added aria-label attributes to components and its variants


• Allow components to use lang strings


• Generate automated ID string for use in components.


• New CSS to override components in editor and preview


• Fix bug getting the first time user variant preferences

• New static image for figure component


• Fixed some coding style problems

• Introducing Variants: Now you can apply visual variations to the components, like making them full-width, moving them to the left or right, adding quotes or captions, or choosing between ordered or unordered lists.


• Improved asynchronous UI: You can choose any variant without leaving the plugin's selector modal window. We fully refactored the main UI to allow that. Also, the preview will show you how the component will look when applying a variant before adding it to your content.


• Persistent user choices: Once a Variant is selected, it will remain the preferred option until the user chooses to deselect it again.

Changes

• Fix a visual problem when C4L for Atto is also installed,
  the collision class has been changed.

Release notes:

• New feature to select aimed/not intended components for students.


• Add missing helplinktext string to lang


• Learning Outcomes component added


• Not allow buttons to get all space available.


• New component learningoutcomes fits preview space.

• Fixed several errors and warnings from code prechecks.


• Fix text in buttons:
  
  
  
  • allow HTML tags.
  
  
  • handle correctly long texts.
  
  
  
  

• Fix bad behaviour on mobile devices when filtering.


• Change dropdown icon and new styling on filter select.

Components For Learning (c4l)

• New: Filter components by type.


• New: UI improved.


• New: Preview on the right side.

Components For Learning (c4l)

A plugin for the Moodle TinyMCE editor providing a set of visual components designed explicitly for Learning, based on the parent project componentsforlearning.org.

No configuration settings are required for this plugin. Just install it from the Site Administration area (Plugins ' Install plugins ' Install plugin from ZIP file).

Once the plugin is installed, a button and a menu item will be visible in the TinyMCE editor. There is one setting to preview the components when hover the mouse cursor over each component, it is enabled by default, to change it modify enablepreview setting on Site Administration area ' Plugins ' Text Editors ' TinyMCE editor ' Components for Learning (C4L).

The capability 'tiny/c4l:viewplugin' allows to configure the plugin visibility to any role.

This plugin is based on another plugin for Atto editor named Components for Learning (C4L) (https://moodle.org/plugins/atto_c4l) that it is part of a broader, collaborative project called Components for Learning (https://componentsforlearning.org). You will find there all the related documentation and detailed usage recommendations and examples for all components included here.