Also, I’m an instructional designer. I’ve always been. I was an instructional designer way before I learned to code. I know how it feels to have a precise idea for a course and not being able to implement it because you don’t have the tools. I’ve experienced that pain myself.

And that was the reason for me to start learning development in the first place. And so I did it. I learned HTML, then CSS, then JavaScript, then PHP. And it’s been, it’s been quite a 10-year period. And now I finally can safely build my own Moodle themes and plugins.

When I did not have those skills, I always wished that there was some solution that would help instructional developers quickly apply meaningful and balanced design content to their materials with ease and simplicity. So now that I can, I just build it. And I called it Components for Learning.

What is Components for Learning? It’s a free plugin specially designed for Moodle that allows you to use a collection of visual components directly in the editor.

What you see here in this image is the modal window that shows after clicking on the plugin button in the Atto editor. And what for those at the end of the room I’ll take a moment to read them aloud. Those are the Key concept, the Tip, Reminder, Attention, Quote, Do and don’t cards, Reading context, Example, Figure, Tag, Estimated time, Due date, Procedural context, Grading value, Expected feedback, Purpose card, and Inline tag.

So as you can see, all the available components are aimed to meet the educators’ needs. We’ll see more about them later on.

Just tell you that you can find the plugin, obviously for free, in the Moodle Plugins directory and download it and install it through the site administration. And, as you can see, it supports all the latest Moodle versions. And once installed, you can start using it. No other settings needs. Just as simple as that.

Okay, but let’s see in action.

Let’s imagine we are working on this material for our learners. We are in the Atto editor here. And let’s see. We want to give them a tip, and we want it to visually differentiate from the regular text. All we need to do is select the piece of text we want to turn into a tip -it’s this area here- and get it like that. Then, we click on the Components for Learning button, we choose the Tip component, and we replace the placeholder text with the text we just got.

When we save, this is how it displays. As easy as that.

Thank you very much. That was unexpected.

Okay, then let’s do another example. In this case, let’s imagine we want to add a quote to reinforce a particular idea. And for instance, let’s take a fragment from ‘On the origin of species’ by Charles Darwin, on the Gutenberg project in this case. And all we need to do is choose and select the original quote and copy it.

Then again, we click on the Components for Learning button, we choose the Quote component, and we get this. A placeholder text again. We just replace it with the text we copied, and finally, in this case, we have to add the author’s name and the title of the work. And that’s all. Then, just like before, when we save, we have this format already applied.

Our goal here is to provide our learners with a cohesive design for every type of content. The main principle is simple and connects with the fundamentals of design: we always use the same visual components for the same type of content.

That way students will effortlessly learn to identify them and assign every type of content with a single meaning, always the same. And in no time, this meaning will become unconscious for them, the same way we’ll know a small ‘x’ cross at the top right of the corner of a window means closing it, closing a window, or the three lines in a row mean ‘display the menu’ and all this kind of patterns.

And this is how we help reduce the learners’ cognitive load, which is one of the main goals of every instructional designer, as you all know.

In the previous cases, I showed you two examples of contextual components. Contextual components help us assign a meaning to a particular content regarding its context in relation to the main flow. Something exemplifies an idea, or something summarises an idea, something highlights an idea…, this kind of stuff. And those are usually the most common, the most relevant in the learning process.

But there are also two other types of components. I called them Procedural components and also Evaluative components. Procedural components are specifically intended to give students inputs on the learning process they are involved in.

For instance, let’s imagine we want to specify the estimated time a learner can expect to invest in a particular activity. We could place it here, in the rectangle. And again, as before, all we have to do is click the button, choose the corresponding component, and we replace the content of the placeholder text, and that’s it. We save it, and we see it like that.

Finally, let’s take a look at the evaluative components, which I just mentioned a minute ago. Evaluative components are intended to inform the learners about any aspect regarding grading, feedback from the teacher or other related considerations linked to evaluation.

In this case, I’m not going to explain again because it’s always the same: Just copy, click the button, select the component… But just for you to see how it works: Imagine, in this case, we want to provide an expected feedback and we, again, select the text, and all the thing. Here we select the corresponding component, and here we are: this one would be the Expected feedback component. This is how we see it.

At this point of the presentation, it would be relevant to introduce you to the project site. It took me a long time to get it ready, but I finally got it published last week, just in time. On the site you will find a detailed description of the project along with its main goals and characteristics in general. And as you will see there, Components for Learning is an open learning project, meaning that it’s free and that is available for everyone.

The plugin itself is licensed GPL, as the rest of the Moodle core software, and all the contents on the site are freely available under a Creative Commons license.

Also on the site, you can find a guide. That will help you browse through all available components and choose the most suited for every situation. Let’s see an example, a quick example, and I’ll finish.

Let’s say we wanted to use the Key concept in a material, but however we may not be entirely sure. That this is the component we really need for that particular case. So we go and visit the guide, and this is what we find. And as you can see, in this case, our assumption was correct, as highlighting an idea is, in fact, the purpose of the Key concept component.

And we also see there a demo, just before, on how it will display once applied. Most components may have slightly different purposes, so this is important that, I guess, the guide will keep you covered in all this matter.

Also, another interesting feature in the guide is the provision of recommended and discouraged use cases for you and for most of the components. And I must say it’s really interesting because those are based in real user testing, mostly by teachers at Institut Obert de Catalunya -thank you very much!- who have committed to this project and are using a very similar extended collection of those components. So those recommendations were added after detecting some confusing use patterns to help avoid confusions that raise naturally.

And also there was a final aspect in the guide that I find particularly useful, which are real-life examples for every component. As you can see here, you can find them at the bottom of the page. You just need to click on each one to open them in a modal window, like that, and you see that particular piece of example. So it can help you disambiguate and proceed.

And that’s it. Finally, just let you know that this project has just started. And I’m very, very interested in your input as educators. I’d love to know what components do you miss, and any kind of involvement would be more than appreciated. Because this is a living project, it’s just started now. And if you wish to get involved in the project in any way, you will find my contact in the site; it’s roger@componentsforlearning.org. And if you install the plugin I encourage you to follow the Twitter account, @compforlearning, to get updates on new components available or tutorials and also to get in contact and make suggestions.

But also again, I would like to thank all the teachers at IOC, who helped me during the last years, and without them, that would have been impossible. And also I would like to especially thank to Justin Hunt, which plugin Poodll Snippet was used, in this case, to make the base code for this plugin. This is also me, my professional site and my Twitter account.
Thank you very much.