Course elements

A plugin for the Moodle TinyMCE editor providing customizable components for structuring learning content. It contains sets of visual components designed explicitly for learning from componentsforlearning.org (by Roger Segú) and teaching avatars, work modes, nature and culture by Dunja Speckner.
This is a fork of https://moodle.org/plugins/tiny_c4l .
Elements
About the plugin
A plugin for the Moodle TinyMCE editor providing customizable components for structuring learning content. It contains sets of visual components designed explicitly for learning
* from componentsforlearning.org (by Roger Segú) and
* teaching avatars, work modes, nature and culture by Dunja Speckner.
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 → Elements.
The capability ‘tiny/elements:viewplugin’ allows to configure the plugin visibility to any role.
This plugin is a fork of tiny_c4l https://moodle.org/plugins/tiny_c4l ) by Marc Català and Roger Segú and also based on their work on atto_c4l ( https://moodle.org/plugins/atto_c4l ). These are 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 the C4L set of components included here.
Icons authored by Roger Segú, except for the following, licensed under Creative Commons CCBY, Glasses by Austin Condiff, Estimate by xwoodhillx, Quote by Rohith M S, Pin by Icons fest, Bulb by Adrien Coquet, Date by Karan, Success by Alice Design, Clock by Aybige, Feedback by dilayorganci, Star by Zaff Studio, Tag by Ananth.
How to use the plugin
Recommended additional plugin
Editing CSS / HTML code in a textarea is really a pain. Because of that we urgently recommend to install the editor_codemirror plugin ( https://github.com/mebis-lp/moodle-editor_codemirror ) that is automatically used for editing in tiny_elements management interface then. It helps you with syntax highlighting and code completion.
Structure of plugin data
The main elements of the plugin are components (consisting of HTML and CSS code). When users click on them, the corresponding HTML code is inserted into the content area of TinyMCE.
Every component belongs to exactly one category . Each category has some CSS code that is common to all components of the category and some files for the category.
A category can have multiple flavors . Every flavor can also have some CSS code and can be connected to components of the category. Flavors can provide different sub-styles and can be also used as kind of sub-categories.
Components can also have up to three variants that can be switched on/off (multiple variants can be switched on at the same time). Variants have CSS and HTML code.