Before the Christmas break I built a prototype version of Mahara with flexible page layouts. Mahara is the software we use for our Workflow e-portfolio service, and while it does offer a choice of column layouts when creating pages, some of our users have requested greater flexibility – in particular the ability to have magazine-type layouts, with mixtures of rows and columns.
The approach I took was to add rows to the existing column options. This incremental approach seemed sensible, rather than reinventing the whole code base, which would have been too much work and also would have hindered the possibility of the changes being incorporated into future versions of Mahara, which is the long-term goal.
I also added the possibility of creating custom layouts, made up of rows with preset column layouts, and I created a PHP class to generate real-time graphical previews of the custom layouts.
One of the goals was to keep the layout options easy to use for new users. For this reason I presented a Basic Options view by default, and hid the more sophisticated options in an Advanced Options section. For new users, layout selection is similar to the way it was before – there are just more options, and the options now include multi-row layouts:
The end effect is really nice – it’s possible to create pages with headers and footers and all kinds of row and column combinations:
One of the challenges was adapting the existing javascript code to allow drag and drop between rows as well as columns. In the end I opted to set aside the existing approach and use the Sortable and Draggable methods of the jQuery UI javascript library. This seems to work well, though I have yet to test it exhaustively in all web browsers. It certainly speeds up development time, as all the drag and drop functionality is effectively hidden in a ‘black box’.
The prototype has gone down well with the community of users at mahara.org. The next phase is to polish the code, add in some of the missing functionality, and share the code, in order to get feedback from the core Mahara developers (hopefully). The possibility to develop the software to meet our needs in this way demonstrates one of the virtues of using open-source software packages for e-learning.
I’m working on some other UI improvements which I think will make editing pages in Workflow / Mahara easier and more fun. I’ll post about that another time.
Processing your request, Please wait....
0 Responses to “Mahara e-portfolio – flexible layouts”