The Moodle Lesson Activity truly is an amazing content creator

Moodle Lesson - Amazing!

Not many Moodlers use the Lesson Activity in Moodle.  Mostly because it’s neither a brilliant quiz engine nor a replacement for the book module.  But when you combine both these elements and spend a bit of time on the design you can create engaging, interactive learning packages that can stand their own against popular content creation tools, and best of all, it’s authored natively in Moodle.

Yes, the screenshot above really is the Moodle lesson module, and I’ll show you how and why it’s so brilliant.

OK, so we can’t compete with Storyline or Captivate’s simple tech-free authoring, but these products cost money, and Moodle certainly has tools that can produce stunning learning packages.

Let’s look at the benefits/features of using the lesson module:

  • Include a file popup – such as a supporting word doc or PDF, similar to what Storyline lets you do with resources
  • Display a progress bar (which by the way can be styled to high heaven with CSS to look funky with gradients)
  • Display an on-going score to learners so they can see their grade
  • Can be set to work like a slideshow/stage with fixed height so it feels more like a Powerpoint or SCORM package
  • Can be a timed activity
  • Can be password protected
  • Availability can be based upon completing a previous lesson – very powerful feature
  • Availability can also be based upon the time spent on a previous lesson – perfect for Online Guided Learning Hours (UK requirement)
  • Allows for multiple attempts and limited retries (fully configurable)
  • In-built quiz with multiple question types
  • Ability to import questions from other platforms
  • Branching and clustering – allows for random quiz slides
  • Workflows and pathways – learners can see different slides depending on the answers to a question – can be made interactive and personal.
  • Can be linked to outcomes for improved reporting
  • Has its own reporting tools
  • Links with the Moodle gradebook

I bet many tutors are not aware of all the above features, and when you read these back, it sounds awfully like a commercial learning designer tool.

HTML5 Authoring and responsive scalability

It’s all about HTML5 these days and support for multiple devices.  And it comes standard with the Lesson Activity.  If you use a responsive theme (one built on Bootstrap) then you are good to go.

Styling the lesson module

Out of the box, it can look a bit drab, but with a bit of CSS and an SVG scalable background, suddenly things become interesting.
For this lesson I added a <div> to the content and used a responsive SVG image for the background.  This image will scale up and down beautifully.  The SVG is created via CSS (see for a demo on how to do this and also choose from a whole heap of pre-made SVG backgrounds).  SVG’s are awesome, and you can even animate them..more on this later.

Dynamic Content

As you may be aware, embedding external media into Moodle is awesome.  And with the lesson activity it’s no different.  You can add dynamic content into your lessons from Youtube, Pinterest or Twitter (and many more).
So your slides can change each time a user sees them.  Also, you can manage some of the content externally, outside of Moodle,  and the changes appear as if by magic inside the lesson.

The screenshot below shows how I used Twitter in my lesson:

Twitter embedded in Moodle Lesson


Scalable and responsive dynamic content

When you embed external media such as Youtube, the embed tag often sets the stage size.  The drawback of this is that when you scale the page down to a smaller size, the video doesn’t scale accordingly, and overlaps the page.  Which looks..well… a bit shoddy.
However, we can fix this with a bit of CSS (see .  We simply place our embed in a new <div>, add some CSS, remove the size from the <embed> and voila, a fully resizable YouTube video that scales full width on a desktop and looks extremely slick on a phone too.

Responsive Moodle Lesson


If you need to add more complexity to your lessons, but need to save time and indeed the number of lesson slides, then why not embed your Slideshare presentations?  This is like having a mini lesson, inside a lesson.  And again, if you apply the responsive CSS to the embed then it fills the screen beautifully.  Clicking on the grey borders to the left or right of the slide deck allows the user to move back and forth through the presentation – on the iPad, this is amazing.  Again the full size responsive class has made this possible on all devices.

Slideshare Responsive

Quiz Slides

Moodle Lesson quiz slides don’t have to look awful either, the same design concepts can apply to these slides too.  All it takes is a bit of CSS love and away you go.  As shown below:

Lesson Question Slide



But this is way too hard for tutors to do right? Well, not if we use templates.  It is possible to create a Master Lesson Template, one with all the bells and whistles.  With the <divs> in the right place, and the CSS all ready to go.  We can then import this template
lesson into any course and use it as a blueprint for tutors to build their own.  As all the markup is in the HTML view, the tutor just needs to use the WYSIWYG editor to change text and replace images.  Yes, they may break some markup but that’s what Moodle admins can help with.

WYSIWYG Editor Moodle Lesson


Fully iPad Ready

As we are using HTML and some responsive elements, lessons look amazing on the iPad.  The fixed height stops the content from scrolling, and the buttons sit nice at the bottom of the screen, it can be made to look like a native app.

The future

Unfortunately the Moodle Lesson module doesn’t have much CSS markup that we can take advantage of.  I wish it had as we could style the heck out of it without doing any of these little hacks.  However, it may come.  And if it does, then the theme can determine the style of lesson headers, lesson images, backgrounds and a whole host of other awesome elements including buttons, progress bars, scoring and reporting.  The possibilities are endless.

The CSS markup I used

In case you want to give this a try, here is the CSS I used:

.answeroption {
margin-top: 2px;
color: #fff;
padding: 5px;
background-color: undefined;background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMDAnIGhlaWdodD0nMzAwJz4KCTxkZWZzPgoJCTxsaW5lYXJHcmFkaWVudCBpZD0nZycgIHgyPScwJyB5Mj0nMTAwJSc+CgkJCTxzdG9wIG9mZnNldD0nMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiMyZTJlMmU7c3RvcC1vcGFjaXR5OjEnIC8+CgkJCTxzdG9wIG9mZnNldD0nMTAwJScgc3R5bGU9J3N0b3AtY29sb3I6IzIyMjIyMjtzdG9wLW9wYWNpdHk6MScgLz4KCQk8L2xpbmVhckdyYWRpZW50PgoJCTxwYXR0ZXJuIGlkPSdiJyBwYXR0ZXJuVW5pdHM9J3VzZXJTcGFjZU9uVXNlJyB4PScwJyB5PScwJyB3aWR0aD0nMjAnIGhlaWdodD0nMTAnIHZpZXdCb3g9JzAgMCAyMCAxMCcgPgoJCQk8cmVjdCBmaWxsPSd1cmwoI2cpJyB4PSc5JyB5PSctNicgd2lkdGg9JzEyJyBoZWlnaHQ9JzEyJy8+CgkJCTxyZWN0IGZpbGw9J3VybCgjZyknIHg9JzknIHk9JzUnIHdpZHRoPScxMicgaGVpZ2h0PScxMCcvPgoJCQk8cmVjdCBmaWxsPSd1cmwoI2cpJyB3aWR0aD0nMTAnIGhlaWdodD0nMTAnLz4KCQk8L3BhdHRlcm4+IAoJCTxmaWx0ZXIgaWQ9J2Z1enonIHg9JzAnIHk9JzAnPgoJCQk8ZmVUdXJidWxlbmNlIHR5cGU9J3R1cmJ1bGVuY2UnIHJlc3VsdD0ndCcgYmFzZUZyZXF1ZW5jeT0nLjIgLjMnIG51bU9jdGF2ZXM9JzUnIHN0aXRjaFRpbGVzPSdzdGl0Y2gnLz4KCQkJPGZlQ29sb3JNYXRyaXggdHlwZT0nc2F0dXJhdGUnIGluPSd0JyB2YWx1ZXM9JzAnLz4KCQk8L2ZpbHRlcj4KCTwvZGVmcz4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbGw9J3VybCgjYiknLz4KPHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI2Z1enopJyBvcGFjaXR5PScwLjEnLz4KPC9zdmc+Cg==');
.video-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px; height: 0; overflow: hidden;
.video-container iframe,
.video-container object,
.video-container embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
.customlesson {
padding: 10px;
border-radius: 5px;
color: #fff;
background-color: #39466b;background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnPgoJPGRlZnM+CgkJPHBhdHRlcm4gaWQ9J3RpbGUnIHBhdHRlcm5Vbml0cz0ndXNlclNwYWNlT25Vc2UnIHdpZHRoPSc3NScgaGVpZ2h0PSc3NScgdmlld0JveD0nMCAwIDUwIDUwJz4KCQkJPGxpbmUgeDE9JzEnIHkxPScwJyB4Mj0nNTEnIHkyPSc1MCcgc3Ryb2tlPScjMTkyMDNkJyBzdHJva2Utd2lkdGg9JzInLz4KCQkJPGxpbmUgeDE9JzQ5JyB5MT0nMCcgeDI9Jy0xJyB5Mj0nNTAnIHN0cm9rZT0nIzE5MjAzZCcgc3Ryb2tlLXdpZHRoPScyJy8+CgkJCTxsaW5lIHgxPSc1MCcgeTE9JzAnIHgyPScwJyB5Mj0nNTAnIHN0cm9rZT0nIzMxMzc2Mycgc3Ryb2tlLXdpZHRoPScyJy8+CgkJCTxsaW5lIHgxPScwJyB5MT0nMCcgeDI9JzUwJyB5Mj0nNTAnIHN0cm9rZT0nIzMxMzc2Mycgc3Ryb2tlLXdpZHRoPScyJy8+CgkJPC9wYXR0ZXJuPgoJCTxyYWRpYWxHcmFkaWVudCBpZD0nbCcgY3g9JzUwJScgY3k9JzIwMCUnIGZ5PScwJyByPScyMDElJz4KCQkJPHN0b3Agb2Zmc2V0PScwJScgc3R5bGU9J3N0b3AtY29sb3I6I2ZmZjsgc3RvcC1vcGFjaXR5Oi4xOycgLz4KCQkJPHN0b3Agb2Zmc2V0PScxMCUnIHN0eWxlPSdzdG9wLWNvbG9yOiMwMDA7IHN0b3Atb3BhY2l0eTowLjE7JyAvPgoJCQk8c3RvcCBvZmZzZXQ9JzMwJScgc3R5bGU9J3N0b3AtY29sb3I6IzAwMDsgc3RvcC1vcGFjaXR5OjAuMzsnIC8+CgkJCTxzdG9wIG9mZnNldD0nOTAlJyBzdHlsZT0nc3RvcC1jb2xvcjojMDAwOyBzdG9wLW9wYWNpdHk6MC41NTsnIC8+CgkJCTxzdG9wIG9mZnNldD0nMTAwJScgc3R5bGU9J3N0b3AtY29sb3I6IzAwMDsgc3RvcC1vcGFjaXR5Oi42JyAvPgoJCTwvcmFkaWFsR3JhZGllbnQ+Cgk8L2RlZnM+Cgk8cmVjdCBmaWxsPScjMzk0NjZiJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJy8+Cgk8cmVjdCBmaWxsPSd1cmwoI3RpbGUpJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJy8+Cgk8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWxsPSd1cmwoI2wpJy8+Cjwvc3ZnPg==');
.customlesson h3 {
color: #fff;text-shadow: 1px 1px #000;background:#7f7f7f;


Extending this idea and taking it further

With SVG’s its possible to add animation, which means we can add some interesting effects to our images.  HTML5 also allows us to animate using CSS3, so although we won’t get Disney, we can certainly start to create simple web animations.    So there is no reason why we cannot have page headings that fade in, images that slide across, interactive rollovers and even clickable layers.  OK, it would be cumbersome to do in the HTML window I know, but if you had pre-defined classes and the CSS in place then adding such effects wouldn’t be a huge job once you have it all set up and ready.

Thanks for reading this post.  I hope it’s given some food for thought and above all I hope it inspires the Moodle Community to push the envelope with the Lesson Activity.

Moodle really is a powerful bit of kit.  And if you are willing to push the boundaries then you will see just how flexible it can be.  Native Content Authoring that looks slick, job done.

Brand matching Moodle

After a brief chat with a colleague I was inspired to see how easy it is to make Moodle look like a corporate brand.

Turns out it’s pretty easy with some CSS love and an amazing boiler plate to work from. Thanks @stuartlamour

(Disclaimer: Yes I used Nike as an example, Nike are in no way affiliated with this blog.  No I didn’t clear copyright, it was simply proof of concept)

Original Homepage

Original Homepage

Moodle Brand Match proof of concept

Moodle Concept


So yeah, it looks rather good.
Again, please note, the theme was built as proof of concept.

Come on, let’s drop the “e” in e-learning.

I wouldn’t dream of calling modern websites “Web 2.0” these days. Well, not without the risk of being mocked on Twitter.

Yet I still use the term “e-learning”. Which, when you think about it, in 2014, is ridiculous.  When I use a cooking app I’m not “e-cooking”. When I use Netflix I’m not “e-watching”. 
If I go for a run and use Runkeeper I’m not “e-running”. But when I decide to learn using technology it’s OK to say that I am “e-learning”.

OK, the terms e-book and e-cigarette have not helped the cause and added yet more stature to the big “e”, and I understand it’s a way to differentiate the analogue vs its digital counterpart, but surely e-learning has matured enough so we can finally drop it.

The teaching and learning industry has tried experimenting with other acronyms such as TEL (Technology Enahanced Learning), amongst others.
But let’s face it, we are trying too hard to find an alternative to something that just isn’t needed anymore.

So why do we find it so hard to drop the word “electronic”?

There is a fundamental difference between “e” and “online”.
Buying something via the internet is called online shopping. Banking via the internet is referred to as online banking. Learning via the internet should therefore be referred to as online learning.

Back in the glory days of flip cams, voice recorders, voting pads and a whole plethora of gadgets and gizmos, prefixing learning with an “e” seemed to fit, the “e” actually referred to anything with a circuit board in.

Nowadays, it’s all online. VLE’s, Social Media, photo sharing sites, plagiarism tools, dropboxes, over-animated slide decks and many more. The physical piece of equipment isn’t important, it’s how it interfaces with what we do online that matters.

So the “e”, in my opinion is a nod to things that haven’t worked so well in the past. There is a negative connotation with e-learning, and those who have worked in the industry long enough know exactly what I am talking about.
My 4 year children on the other hand do not. I would certainly not refer to Youtube as e-learning, or a Skype call with them when I’m working away as an “e-meeting” or “conference call”.
It just is…well..what it is. I use Skype as a verb these days, like Google and Hoover.

So I think, as the new academic term approaches. We should stand up, unite, and finally drop the “e” in e-learning . It could be quite liberating.

Yes, teaching and learning uses technology. Let’s get over it. It’s just learning.

Moodle Best Practice Course Templates (SMART)

Last month I read a blog post that introduced the idea of SMART Moodle Templates (Sustainable Models for Adaptive and Responsive Teaching)

(Original post can be found here:

The idea of a SMART Moodle template is that it addresses issues of quality, consistency and best practice. Across a Moodle site there are many examples of good and bad practice.
Not all tutors work the same and many still fall into bad habits. Some courses are too resource heavy, some suffer from the infamous “scroll of death”. Some contain student handbooks and course information, others are just dumping grounds for PowerPoints.

It is very difficult to change cultures of working, and training sessions don’t always prove to be effective, not when we are shoehorning tutors into minimum standards and critiquing their courses.

With SMART templates, Tutors are given a choice of say 3 ways to organize or setup their course, based upon minimum standards and expectations enforced by the college.  The course contains “inbuilt” pointers, tips and placeholders and acts as a how-to guide for the tutor.  The idea is that the tutor adapts these place holders and turns the dummy content into actual teaching and learning activities.

I have taken a close look at this concept and decided to further develop it into a concept that would work here in the UK.

Recently we are seeing more organizations auditing their courses. Some are applying “Gold, Silver, Bronze” awards to courses and others are starting to monitor the effectiveness of courses via learner analytics (I have some great ideas around this that I will blog about later).
The problem with defining and adopting a “minimum course standards” requirement is that tutors often lack the time, or motivation, to build the necessary components the course requires. And even if you do apply them, it would be difficult to build any consistency with regards to level of detail, position of resources, and constant use of say the first topic on the course.
But if we use a Moodle Template, with placeholders and dummy content. We can import these into existing courses or indeed use them as a base template for whenever we build a new course.
Mary Cooch wrote a fantastic blog post on Moodle Course Templates which can be found here:

Let’s start by building a SMART Template for Further Education.

There are many key documents that FE Organsiations would like to see on every Moodle course. The student handbook seems to be the most common. But there is also vital information the students may wish to see also, such as links to college web applications, tutor contact information and learning outcomes.

The logical place for this content to live is in course topic 0. (the one without the number).
We can then start to build other place holders for other content we want tutors to populate on the course.

So for the student handbook, let’s upload a dummy PDF called “Replace with Student Handbook.pdf”.
This will show the tutor that we expect them to replace this file and logically rename the title (omitting the word ‘replace’ when this is done).

Next we shall create a web page titled “Meet your tutors”. In here, we shall create dummy content with a fictional team of tutors. Again, we anticipate the tutor editing this content with their own details.

The screenshot below shows my course with my essential course information.

Important Course Information

We repeat this process for all other content that is a requirement on our course. Such as learning outcomes, useful web links, news, plagiarism warnings, acceptable usage policies etc..  I used the choice activity as an agreement acceptance tool.  You could then set up conditional release that unlocks assignments after the user has marked that they understand and accept the agreement.

The screenshot below shows how we use some more advanced Moodle tools in our template:

Additional Content

Topic Headings

Defining topic headings and sections maybe to formal, and may not suit all courses. So most of our requirements need to live in topic 0. However, for tutors that need that extra push why not begin to label other sections within the course, adding a description too which outlines your requirements.

A section for assignments, a section for assessment and quizzes. Again, make sure to prefix things you want the tutor to edit with the word “replace”.

Resources Section


A structured template configured in this way will set your expectations from the start. You are sending out the message that each course must contain x number of quizzes, or information on outcomes or online assignments.



There is nothing to stop tutors from deleting the dummy content. (well, unless you wanted to use role overrides to lock it that is – but I feel this may be a little too harsh).

By using course labels and topic summaries we can explain to tutors that we expect them to use contextualization to support their resources. And that we expect them to list the outcomes of the activities and add thought to what they put on the page.  By using placeholder text we can give them instructions, and it serves as a how-to guide.  We can link to training documents or indeed Moodle docs to further assist them.


So now we have minimum standards course template it becomes easier to grade courses (Gold, Silver, Bronze). You have set the college’s expectation from the start.
You can have multiple templates so you don’t have to stick with one. You could for example have a template for each department or faculty, so that it offers more flexibility to the subject.

And don’t forget, templates can be applied retrospectively too, using the course restore tool, so it doesn’t only have to apply to new courses you have created.

Final Template Design

Here is a link to the final course backup which you can restore on your own Moodle.


Please feel free to modify, share, hack and maybe give back to the community.

It would be great to build up a bank of brilliant SMART templates for the whole UK sector to use.

Let me know how you get on via my social channels @lewiscarr


Moodle and BTECS

For many years I have supported BTEC courses on Moodle.  And from experience, there doesn’t seem to be a right or wrong way to configure Moodle.  However, I have developed a method that has worked well for me and now I wish to share this with you, the Moodle Community.

The attached document is a BTEC Moodle Guide which you can follow.  Feel free to take whatever bits you need from it.

Please do let me know on Twitter @lewiscarr if you found the document useful.  I’d love to share some ideas on how I can improve it.

You can download the document here moodle_and_BTECS

You can download the support course (zipped) here btec_engineering