Skip Navigation

the University of Nottingham

Hello World!

Return to Pevious Page

Moodle Enhnacements for Physiotherapy


Aaron now supports both the undergraduate Bsc (Hons) Physiotherapy and BSc (Hons) Sports Rehabilitation and Exercise Science courses with their use of Moodle and begun working with the team in late April 2014 to introduce a series of improvements in the use of Moodle within these courses. The initial work has aimed to improve the usability of the modules; making small adjustments which is hoped will have a cumulative effect, improving the user experience.

This coincided with an upgrade to a new version of Moodle and a newly design theme. Fortunately many of the adjustments developed benefitted the new version and theme and required only small modifications to ensure they worked correctly.

The approach taken has been to introduce both new CSS rules and additional JavaScript to unobtrusively improve the layout and functionality of the content in a manner that can be easily maintained, responsive to screen dimensions and does not have a detrimental effect on the accessibility of the content. Aaron had been involved in similar work within the Graduate Nursing Curriculum course where the approach had been developed and tested.

Organisation of Blocks

By default, Moodle has a three column layout however it is possible to reorganise the layout of blocks within a Moodle module. Trying to achieve a two column layout has been the approach taken by moving content blacks from the right hand column and positioning them in to the left hand column. The effect of this is that the right hand column collapses leaving a two column layout with a significantly increased main content area.

Module Navigation Panel

There is currently a module navigation block within Moodle and this block persists across all content within the module but this does not have a fixed position (appearing in different locations depending on the resource or activity type). Another unfortunate behaviour of this block is that it gets re-positioned at the base of the page when viewed on a small screen device. This seems a very unusual behaviour as this block would be of most use in a more immediate position within the page for small screen devices.

A module navigation panel has been introduced which sits at the top of the Moodle module content and allows the swift navigation to a particular week or learning topic within the module. This panel includes a mechanism of highlighting the current topic using a contrasting background colouration of the button. Any weeks or learning topics that might be hidden result in the automatic remove the related link within the navigational panel.

Module navigation panel

Module navigation panel

Because the new navigation panel is at the beginning of the module content and makes use of the bootstrap responsive layout scaffolding the result is a very useable quick module navigation panel for small screen devices.

Module navigation panel as viewed using small screen device

Module navigation panel when viewed on small screen device

Inclusion of Curriculum Mapping Integration

Physiotherapy have been working with the curriculum mapping system so including this data within the module was a quick and simple process and borrowed much of the code developed for the Graduate Nursing Curriculum course.

This integration also included a clear return to module navigation feature as it is felt that  the lack of a clear route back to the main module from sub-sections or content is a weakness of the current Moodle template.

view of curriculum mapping integration, including quick return to module link

Curriculum mapping data with return to module quick link

Learning Topic or Week Content Layout

The new Moodle theme greatly improved the layout of content within learning topics but increasing the amount of white-space along with clear visual definitions of both the start and end of the block of content has been employed. The topic title becomes encased within a solid colour block and centred. With a strong topic introduction area.

Visually well defined beginning and end of a topic block

Content block with clear negging and end, making good use of white space

The base of the topic has a clear visual termination with a return to document button. This was developed prior to the new template going live and even though the current template has a document top disc-type button it is felt that the clearly labelled button which had been developed was stronger and potentially more usable. This feature also works extremely well within small screen devices.

This document top feature is written to the page via JavaScript and requires no additional elements to be added within the module.

Current Week Flag

A strong visual cue to the current learning topic or week has been introduced. This took that shape of a flag type device which has restricted availability (this is defined prior to the site going live requiring no further interaction for the duration of the course.). The modules tend to quite content heavy so having a very clear current content marker would aid users locating current content especially if using rapid scrolling of the page (perhaps more a consideration for small screen devices?)

Current topic flag or marker

Current week marker

These flagging elements also allow for a mechanism of interacting with the module navigation panel to highlight the active learning topic or week.

Aaron has also responded to feedback regarding the contrast of the Moodle default current week background highlighting. By default this is a light blue colour but the contrast ratio between this colour and the text colour and even lower with the link colouration. We have overwritten this colour with a yellow which improves the contrast ratio passing the WCAG AAA pass for normal text (the standard week highlight colour fails the WCAG AAA requirement.

Progress Recording

A mechanism by which a student could record their progress has been incorporated within the module. Initially this was a triggered by a single question quiz which then triggered the display of a label stating the week’s activities were complete. The quiz component was a little cumbersome and was a show stopper in terms of adding this feature. With the upgrade to version 2.6 of Moodle, activity completion became available and allowed for a very simple click to indicate completion which is a significantly better user experience.

Progress recording - complete

Topic marked as complete

Progress recording - incomplete

Topic marked as incomplete

Teachers are able to view the activity completion report to see how students are engaging with the module content at any point.

An issue with this feature is that the icon utilised is a little weak so a new toggle type icon has been developed which through the use of JavaScript replaces the stock icon within the module. Labels which are either hidden or displayed depending upon completion status of the activity are used to give clear visual cue to the completion status of the topic.

Information Badges

Information badges have been introduced as a quick visual way of conveying some information regarding a resource or activity. Examples are for documents that are either provided to the students or the students are expected to print off and bring in to a session.

development of info labels or badges

Visual badges / labels

Sub Topic Headers

A distinctive sub-header style has been developed which can be added to any heading by adding a class reference to a header. This styling increases the prominence of the header and provides an underline to allow discrete sections of content to be created. Use of the bootstrap icons and badge element was also employed to create pseudo icons for these headers.

Interaction with the Existing Moodle Accessibility Tools

The styling enhancements have been developed to react to the user’s interaction with the accessibility feature of the Moodle template. A script has been developed which will respond immediately to the user’s interaction or if the user has already made a choice the script prevents the bespoke styles being applied. This will ensure that the user experience of the alternate visual styling is in no way inhibited.

Assessing the effectiveness of these changes

Understanding the impact of these modifications and additions on the user experience is crucial. Currently only First year modules have had these modifications introduced and there will be a process of trying to assess how effective these changes have been through the use of focus groups with current first year students and potentially asking second year students to take a look at the new first year modules and give their views.

Module Views

Default Version

Default Physiotherapy module

Default Physiotherapy module

Enhanced Version

Enhanced Physiotherapy module

Enhanced Physiotherapy module


  • Moodle 2.6
  • HTML5
  • CSS3
  • JavaScript
  • jQuery
  • Bootstrap (2.3)

The article was viewable from Wednesday, 15th October 2014.

Author: Aaron Fecowycz