Overview
Moodle’s UX for creating content leaves much to be desired and the skill floor for creating beautiful and engaging courses is much higher than it should be. In comes a solution which is very familiar in other platforms **cough** WordPress **cough** and whilst slated by professionals, it does the job, and does it well, if done correctly. The drag and drop page builder.
This Moodle plugin allows a Moodle user to build a layout and incorporate content with the simple drag and drop functionality we are all used to. It uses React’s shadow DOM with the context api as state management, this combined with react-beautiful-dnd made by Atlassian, make for a powerful combo.
Moodle uses AMD modules so this project required incorporating each component into the AMD system to allow the files to be integrated succinctly.
How it works
In a few simple steps we can build up a layout.
Step 1 - Column selector
Each section needs a number of columns, this was the initial list of options I started with but it can be expanded on very easily
Step 2 - Content selection
Each column can have any number of content elements. Whilst we only have two options currently, I used the subplugin approach so that as new/old elements are added or removed any Moodle instance can be updated independantly of the main plugin.
Once the content type has been selected the user is then prompted to enter the desired content, in a format that is relavant to the content type.
Step 3 - Content review
Now that we have added some content we can clearly see how it will look on the page. Whilst the specifics of the rendering isnt show, it gives the Moodle user a good high level overview.
Step 4 - Content adjustment
As with most things, at some point the content will need to change or be updated. There are a few ways to do this.
If we need to add new content the aptly named 'new' buttons can be used. Or if the content needs to be changed the cog icons will allow the user to edit the element.
If however the content needs to move we can click and drag on the move icons to reorder the elements.