Designing Beautiful (Mobile first) Moodle sites

I have recently been creating some designs for a client, trying to push the limits of what is possible in Moodle.  The prototypes were built in a mobile view first and then expanded to the desktop.

Blocks should be made beautiful or simply hidden. But there's nothing more ugly than Moodle blocks if they are not given any design love.

Blocks should be made beautiful or simply hidden. But there’s nothing more ugly than Moodle blocks if they are not given any design love.

Mobile access is huge, and still rising.  We need to make the experience as seamless as possible.

Mobile access is huge, and still rising. We need to make the experience as seamless as possible.

Moodle Quizzes don't have to be ugly.  If we want our learners to use them, make them look good.

Moodle Quizzes don’t have to be ugly. If we want our learners to use them, make them look good.

Moodle File Sharing Explained

Did you know that reusing and sharing files across multiple courses in Moodle is possible?
It is possible to have a single copy of a file that is used in multiple courses and when that file is updated, the changes are reflected in all the courses.

But how?

Well it’s actually quite simple, yet the documentation around it isn’t great.  So this blog post aims to address this.  Here goes..

Scenario

Let’s say we have a tutor who teaches 4 separate science courses.  This teacher has a file (Period Table of Elements) and he uses it on all courses.  Occasionally he makes tweaks to the document and each time he does, he has to remember to upload the updated copy to all his Moodle courses. – He doesn’t like doing this.

Solution

We use Moodle alias files/shortcuts.
Sounds easy right?  Well actually, it is, although it’s not the most intuitive way of working.

Here’s how it’s done (from a tutor perspective).

  1. Make sure you have editing rights to at least 2 courses.
  2. Create a file resource in the usual way (Turn Editing On >Add Activity or Resource > File) in course 1.
  3. Then Save and Return to course

Now we are going to reuse this file in another course (course 2).

  1. Turn Editing On
  2. Create a file resource (Add an Activity > File>
  3. Now this time, rather than uploading a file with the file picker, we are going to chose our file from course 1 as shown in the screenshots below:

From the file picker select Server Files, then navigate to your course and find the file you created in course 1

Moodle File Picker

 

Now when you click on this file you have the option to make a copy of the file or create an alias/shortcut.

alias

So go ahead and select alias/shortcut, save the resource and return to the course.

That’s it, you have created a shared file in Moodle.

So What Happens now?

Whenever the tutor makes a change to the original file in course 1, then these changes are reflected across all the courses that share that alias.

Benefits

Alias files can be used for modules/units that are shared across multiple courses, for example BTEC’s.  I’ve lost count of the times a college or tutor has created meta courses just to share files.  Alias files could also be used for student course handbooks.  A college could have a single course where they store all the student handbooks and then use alias files to place them in each course.  Then, when the handbooks change (at the start of a new term) the edits are made once and reflected across the entire site.

Pitfalls

The biggest pitfall is that there isn’t an elegant way to manage content and track file sharing in core Moodle.  In order to find the referencing file, the tutor has to go into the edit screen of the file, and click on the file to see the originating path.  It’s by no means a deal breaker, and tutors who control the document should remember where they are placing things.

Originating Path

 

The big Question

So what happens when a tutor accidentally deletes the master file not knowing that other tutors had created links to it?
Well cleverly, the alias file becomes an actual course file when the original is deleted.  So it’s copied to the course and not lost.  Which is actually quite amazing.
OK, I hear you ask..what happens when a course is deleted?  Well, amazingly, the alias becomes a course file, so again nothing is lost.

So now you know.  Alias files are awesome.  They’ve actually been around since Moodle 2.3.  I took it for granted and thought that everyone knew about them, but the more conversations I have with organisations up and down the country, the more I see people still struggling with sharing files and uploading multiple copies of files.

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 http://www.svgeneration.com/resources) 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 http://avexdesigns.com/responsive-youtube-embed) .  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

Slideshare

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

 

 Templates

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;
 background:rgba(0,0,0,0.5);
}

 

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.

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: http://moodleposium.wikispaces.com/Moodle+Moot+2014)

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:
http://www.moodleblog.net/2013/11/24/creating-course-templates-in-moodle-2-6/

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.

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.

Summary

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.

ultimate_template_course_fixed

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