Use keyboard shortcuts when editing Moodle courses

Share

I’m currently creating Moodle based web pages for our Design Thinking courses (undergrad and postgrad at the University of Warwick). Moodle certainly wasn’t designed using modern UX standards! For every operation there are a lot of clicks. And I don’t like that. The workflows need to be simplified. That’s not easy, as it’s built using a pre-MVC design pattern, coded in PHP – a bit of a spaghetti bolognese of an application. But there is an alternative: bookmarklets to speed up the workflows.

A bookmarklet is a hyperlink, saved in a browser’s bookmarks, that actually runs a JavaScript, rather than opening a link to a page. The code runs within the context of the page, meaning that it can access HTML DOM objects on the page to read properties and to execute actions (such as programmatically clicking on a link). So it’s possible, for example, for the bookmarklet to switch on edit mode, edit a page, make the editor full screen, and save the page – all actions that involve too many mouse clicks in Moodle.

Better still, on the Safari browser (MacOS), bookmarklet links that are added to the Favourite’s bar may be activated using default keyboard shortcuts. ALT+CMD+1 runs the first link in Favourites. ALT+CMD+2 runs the second, and so on up to ALT+CMD+9. I’m not sure if other browsers have a similar system, but macros can probably be recorded and assigned to key combinations on any platform (MacOS has a built-in system for recording macros and assigning keyboard shortcuts, Windows 10 needs additional software).

I couldn’t find any in existence already, apart from the standard ATTO HTML editor shortcuts. So I decided to make some. This isn’t as easy as it should be. Looking at the HTML for Moodle pages, they aren’t coded with clarity and simplicity. But after a bit of experimentation i’ve created some that work reliably. And now I can save myself a lot of time and repetitive strain injury using keyboard shortcuts. For most of the bookmarklets, I used JQuery to retrieve the URL from the DOM (the one for the action I want to activate), and then use window.location.href to load that URL. In one case I wanted to simulate pressing on a button in the ATTO editor, so found the identity of the button (using Developer tools in Safari), and used jQuery to activate the click() event for the button.

Here’s my shortcuts. They work on the Moodle system at Warwick University, which is quite standard, but not necessarily the same as other systems (so some changes may be required). If you want to try them, add them to your browser’s bookmarks (drag each to the favourites bar, for example, on Safari if you put them in order at the start of favourites you can then use the keyboard shortcuts).

1. Toggle Editing Page (switches on the edit icons when looking at the course home page).

2. Edit This Moodle Page (when looking at a page, opens it for editing).

3. Moodle Edit Full Screen (opens the ATTO editor in full screen).

4. Save Page (saves the edited page).

When making bookmarklets, I use JQuery to simplify the code, and this utility web app to handle the formatting issues.

This works so well that I now keep trying to use the keyboard shortcuts when I’m editing my WordPress site! Perhaps I’ll get round to adding some code that detects when I’m editing WordPress rather than Moodle and fires off the required actions for that UI.

Dr Robert O'Toole NTF

Senior Academic Technologist, IT Services, University of Warwick Fellow of the Higher Education Academy National Teaching Fellow Warwick Award for Teaching Excellence

You may also like...