Tuesday, December 07, 2010

Tweaking a Moodle course to display Resource & Activities in two or more columns

It's a long time since I've done a HowTo kind of post in Moodle, so please forgive any rustiness.

Rsuty columns...
West Pier by orange brompton. Used under a Creative Commons license.
Moodle's default course layout arranges things in quite a linear way - items (Resources or Activities) are added in each section in a course, and can then be re-arranged by moving them up and down, or indenting them. This normally works fine, and a judicious use of sections means that it's not too tricky to achieve an appealing layout that works well and is understandable by anyone accessing it.
However, sometimes you (or I) will end up with a bunch of links, or resources, or something, which just seems to go on forever and starts to look like a long line of toilet paper, stretching on forever.
I'll use our soon-to-be-revamped CPD pages on our main BucksGfL site as an example. We will shortly have a long list of Directory resources containing PDFs of CPD courses, which could easily go on down the page forever. Here's how they currently look:
You can probably see that adding any more to this will make the page go on forever. In contrast, have a look at this arrangement:

If you think that's more appealing, or maybe just easier to take in, than the previous image, then here's how it's done. It's quite simple and requires a tiny understanding of how a HTML table is structured, and then the tactical addition of a few Labels into your Moodle course.

A HTML table's structure

It's not very CSS, but here's the HTML that structures a table with two columns:

<table border="0" cellpadding="1" cellspacing="1">
<tbody>
<tr valign="top">
<td>
Content in column 1
</td>
<td>
Content in column 2
</td>
</tr>
</tbody>
</table>

Breaking it down

However, it's not possible to wrap this HTML around the content on a Moodle course's main page, so it can't be done, right? Wrong.
To achieve a two column layout we need to dissemble the table HTML and break it into labels, which we can then intersperse among the list of Resources and Activities in Moodle to force it into displaying two columns. Here's the content of Label 1:

   <table border="0" cellpadding="1" cellspacing="1">
   <tbody>
   <tr valign="top">
   <td>

Here's Label 2:

   </td>
   <td>

and finally Label 3:

   </td>
   </tr>
   </tbody>
   </table>

Making the Labels in Moodle

Inserting a Label (essentially a piece of free text or HTML) into your Moodle course is easy - Turn Editing On, Add a Resource, Insert a Label. However, the old-ish HTMLarea editor in Moodle insists on correctly forming any HTML which is edited in it - so if you try and enter Label 1 as written above, you'll end up with all of the tags "closed" - which will end the table prematurely and stop you using it to tweak the layout. This is how you should edit the label to ensure that it's not closed: 
Code for Label 1 in the Moodle editor (HTML view). The start of the table, table row, and table cell.
You should Save and return to course while in this (HTML) view, not the standard (rich text) view - otherwise the editor will close the <table>,<tbody>,<tr> and <td> tags and stop the layout tweak from working.
Do something similar with Labels 2 and 3:
Label 2 - the </td><td> code which marks the end of one cell (hence column) and the start of the next.

Label 3 - the code which closes the table cell, the table row, and finally the table.
Once you've done this, you then need to place these three labels around and in the list of Moodle Resource/Activities you'd like in two columns. Place Label 1 at the start, Label 3 at the end and Label 2 about halfway down the list of items. You might get some odd layouts happening while you're placing them, but it should work once they're all in position, assuming you've done the HTML correctly and not switched back to the Rich Text editor before saving.
Once they're in place, this is how things should look (this view is that of someone with editing rights over the course):
Labels in place - note that other Moodle resources remain editable / moveable / indentable / deleteable etc.

Some important notes:


  • You can of course make three or more columns by creating an extra instance of Label 2, then placing it at an appropriate position in the list of items.
  • If you go to edit any of the Labels, then your default view of it will be the Rich Text view, so HTMLarea will close any tags - you'll need to switch to the HTML view to remove these. However, once you've created them, there should be no need to edit them.
  • Don't hide the labels - tempting though that might be. The layout will still work for you if you have editing rights, but in my experience once a student looks at the course when the labels are hidden, they don't display - producing a standard "long list" if they are all hidden and a malformed mess if just some of them are.
  • If you are creating a course for someone else to edit, then you must explain why the labels are there, why they're important and why they shouldn't be deleted or moved! Some people are obsessive about keeping their courses tidy and the apparent superfluous sets of editing icons might just seem like they need deleting to them.
  • There's an oddity that occurs if you have enabled Drag & Drop on your Moodle site (e.g. you've turned Ajax on). If you have (for example) the three Labels to make this tweak work, then the first will have the Ajax Drag & Drop icon to move, whereas any subsequent labels in that section will have the old style Click & Wait icons. They all still work in their own ways though:
If you'd rather not go through the hassle of creating the labels, then I've backed up a Moodle 1.9.n course with a link to this blog post, and one, two, three and four column layouts in sections down the page. Feel free to use it as you wish - it's downloadable here in Moodle Backup .zip format.
If you've any comments about how useful this is or isn't, or if there are ways in which it could be improved, then please leave them in the comments. Thanks!

2 comments:

  1. Thanks Ian. Now that's what I call lateral thinking!

    ReplyDelete
  2. Awesome! Will give this a go! :D

    ReplyDelete