Developing for Moodle in 2016 2017
Moodle continues to change and evolve just like most Open Source projects. In May 2016 Moodle 3.1 was released offering new features like the Global Search and implementing Competencies and in January 2017 Moodle 3.2 was released featuring the new Boost theme, Messaging improvements and User tours. The most significant change for me was the introduction of the Boost theme, A Bootstrap 4 based theme for Moodle implementing some radical changes to the Moodle User Interface.
I focus on User Interface development work for Moodle so changes to the Moodle UI have a big impact on my work. Using Moustache templates have signficantly changed the way I code. Developing for Moodle has become more fun and sometimes more challenging.
The Boost theme for Moodle
Boost is the first Moodle theme implementing Bootstrap 4 and a large set of Moustache templates that are used by renderers to push data into simple HTML files and push them to your browser. This is exiting for developers because it separates the logic from the design. Changing the HTML structure has become more flexible and this gives developers and designers more control over the way User Interfaces present data and allows for more radical design changes.
The Boost theme has a very plain and simple design, you could say it doesn’t include any styling it is designed to provide a practical User Interface that just works well. You can add some branding and change colours and some custom CSS and that’s it. The real power of the theme is using it as a parent theme for new themes.
Together with some other community developers I have built the bootstrap version 2 theme for Moodle that went into core in 2015. And I have continued development of the community version which is now using the Bootstrap 3 libraries. There are many commercial and open source themes using these as their parent themes. And it is going to be quite a challenged to upgrade them to using a parent theme like boost. You could say it would be a complete rewrite and I am afraid most developers don’t have the time and tools to do this yet.
But luckily developers like challenges and building a new, cool and user friendly Boost based child theme to release to the Moodle community is going to be one of my challenges this year.
My top individual projects: Don’t Memorise
In 2016 and 2017 I have continued my work for Don’t Memorise. An open video learning platform with over 1400 videos. It includes Quizzes, Lessons and lots of custom plugins. It is still Moodle based, and does not include too many hacks, it is continuously in development and new designs and user interfaces are implemented every month.
The Most exciting features of this project are the module webvideo and the video learning course format. Together they provide a nice way of presenting videos, tracking how many videos you have watched, bookmarking videos, adding comments, sharing videos, rating videos etc. etc.
Our next big development is going to be creating your own playlists of Don’t Memorise videos you can share with your students. Combined with the power of Moodle reports, enrolments, and course customizations we hope to give teachers an easy way of creating their own video based courses without having to understand Moodle structures.
My top collaboration projects: Arup
Arup is a large London based engineering company. They use Moodle for company learning and host many courses. Together with their learning team and other developers we are continuously working to improve the platform and implement tools that can track employee development and learning. All tools created are very company specific so open sourcing any of the work would not make much sense. What makes this a top project for me is the chance to collaborate with some other developers and the learning staff. It is great to have an extra set of eyes on you work and some thorough testing of the work you deliver. It keeps me sharp and motivated!
My top design project: The Moodle academy theme
The Moodle academy theme implements Material design and lots of custom Moodle user interfaces. For this project, I have tried to create a very fresh and modern Moodle theme with a focus on a nice editing interface.
Other features are card based course design showing start dates, available seats and progress.
My future projects.
For 2017, I hope to be able to spend more time on open sourcing some of my plugins and continue working on the UI part of Moodle. I still believe Moodle is a great and powerful open source platform. Occasionally I write code for Wordpress and Mahara and compared to Moodle they seem very elegant and simple. However, the comparison is not a fair one to make. Moodle is extremely flexible and offers many ways for many usertypes to collaborate, create content and do amazing things. There will always be improvements needed but it is getting better and better.
It’s monday morning, I have just walked the dog and got my coffee and I can’t stop processing all that I have seen and and learned during the Fosdem conference.
The Fosdem conference I a huge event organised in Brussels every year. It has over 500 sessions and usually over 5000 attendees. Each year I travel to Brussels with a group of friend and once we arrive at conference we each go our own way to enjoy the session we have chosen on our schedule or to wander around and talk to developer, visit the open source project stands or to grab a coffee and a Waffle.
The Fosdem User Experience
For some reason the conference is always planned during winter and the ULB (Université libre de Bruxelles) is not known for its beauty. It’s visitors are a mixture of all IT Archetypes. Most are men and their approach to “dress to impress” is slightly different to what I am accustomed to. Rooms tend to be overcrowded, noisy and I still can’t get rid of the smell of Nerd. Attendees don’t mind queueing up for coffee, toilets and public keys (don’t ask).
However, each year I come home recharged and full of new ideas and that’s because of open source projects. Open source software requires a open source licence AND a community. An open source project without a community is doomed to fail. So one thing most attendees have in common in a desire to listen and be heard, interact, inspire and be inspired. On a day to day basis they already communicate a lot online and on the Fosem conference they get a chance of doing it AFK.
Some Fosdem15 highlights
Okay, so there are over 500 sessions on Fosdem so I can only write about some of the sessions I have attended. These are my highlights:
Every Pixel hurts: Pablo Cúbico.
This was my absolute favorite. Pablo is both a designer and developer and introduced a realistic roadmap of introducing UX design on FOSS projects. I wish I had seen his presentation years ago. During his session I realised what I had done right and wrong in working on Moodle themes and UI’s.
Open UI5: DJ Adams
In one of the Lightning talks (15 min talks) DJ Adams build an interactive website optimised of accessibility AND supporting RTL languages in 15 minutes while talking to the audience. It’s elegant, high quality, well tested and easy to use. I can’t way to try this myself.
Ultra: Steven Goodwin
Ultra is an ultra small (<64k binary), ultra fast, all-in-memory web server incorporating an in-built NoSQL datastore, a data processing language, SSI, multiple configurations, and logging.
I will probably never use ultra, evar. But I got inspired by the way Steven worked on his project. He build a webserver that is tiny, it’s one of the few projects that is small enough to do serious work, but small enough to be explained line-by-line in a talk!
The Mozilla Devroom: Various speakers
Everybody knows Firefox, that’s made by Mozilla! Mozilla.org is the open source giant creating awesome software and pushing the web forward.
The Mars One mission: Ryan MacDonald
The closing keynote was on an actual (one way) mission to Mars. This not a joke but an actual mission. It does not have a cold war backing it like the Apollo mission had so funding is somewhat limited. However it does have some dutch investors and might be funded by media magnate Endemol. In 10 years we might be looking at Big Brother in space. The ultimate goal is to make Mars an inhabitable planet with an open source society.
A while ago I read The Martian by Andy Weir. A cool Sci-Fi novel on an engineer stranded on Mars. Ray MacDonald did not quit fit the picture I had in mind of the struggling NASA austronaut Mark Watney, the Martians main character. I am very sceptical on the Mars One missions success, but imagine what would happen if it succeeds. We could be watching at a space-station packed with advertisements and get to vote on earth which astronaute is our favorite. How cool is that?
Image Mars one mission: Artist’s conception of Mars One human settlement. Credit: Mars One/Brian Versteeg.
Image Odin Monkey: Credit to John Howard
Using Moodle as a video platform
Don’t Memorise is an online library of Middle School Mathematics videos. The last few months I have been customizing Moodle to fit the needs of this organisation.
The Don’t Memorise Moodle site contains a large set of Free videos on various topics related to Mathematics. The site is open to all but encourages you to register. Registred users can provide feedback on topics, participate in quizzes, share content and most importantly; Keep track of your progress.
The great thing is: there is not “catch”. Your info is not sold, there are no ads it is Free and open to everybody and you never have to pay for learning content.
Moodle is a great tool for creating such a customized learning experience. It supports many types of media including video. For the Don’t memorise project an set of plugins has been developed to enhance the features already in Moodle and then add some features to it.
Since the target audience are users that use a mobile device as their primary computer. The site uses a Bootstrap based theme with mobile navigation menus.
The Moodle webvideo plugin
The Moodle webvideo plugin is designed to work in combination with Moodle Bootstrap themes with the jQuery bootstrap libraries turned on.
Once the webvideo plugin is installed it allows the administrator or teacher to add a video from Youtube or Vimeo as a course module. You like you would add any other activity to a moodle course
A course containing webvideo resources
Each of the titles shown in this course is a link to a unique video. Clicking one of these links opens a panel, that’s similar to a pop-up but it does not suffer from any popup blocker. Each of the video’s can be bookmarked and Moodles completion tracking keeps track on your progress.
Videos shown in a Bootstrap Modal
Each of the video’s in this course is part of a set. The video pop-up (modal) allows the users to:
- Navigate to the previous video
- Navigate to the next video
- Provide feedback on a video for teachers
- Bookmark the video to your Moodle bookmarks list
- Share the video using social media
Al pageviews and video views are tracked by Piwik and / or Google Analytics.
The video search options
The webvideo plugin keeps track on videos used throughout the site. Video’s can be tagged and searched using the sites main search function. When a user start typing a search keyword the tag autocomplion search tool kicks in an give search suggestions to the user.
Once a search word has been added the result is a listing of videos matching the tag. You can then click any video to watch it, or go to the course this video belongs to.
The whole system is backed by a management system that allows the teacher or admin to create courses from a set of pre-uploaded youtube or vimeo videos. Simply click the “Add to Course” button and it is added to the last used section in your course
The Startprep project.
Allowing students to add feedback to quiz questions
STARTprep is a year-long online micro-learning course designed to prepare anesthesia residents for competency in the anesthesia basic sciences.
STARTprep was developed by the AIM Lab, an award-winning innovation laboratory based in the Department of Anesthesia at Stanford University.
An important element of the Startprep courses is the usage of the Moodle Quiz module. Residents can login to Moodle daily to practice questions using the Flashcard module, Learn theory from the Lesson module and test and enhance their knowledge on the Quiz module.
Student feedback can allows teachers to increase the content quality.
The Quality of quizzes are of great importance and student feedback on quiz questions can prove very useful. Users can inform the teachers on errors in the questions asked or explain their choices.
Since the quiz module uses a renderer to build the quiz pages a theme can change the way the quiz behaves providing a Hack-free stable solution without locking Moodle to a fixed version (jay!).
The user interface for adding feedback should be simple and intuitive without disruption the quiz, or requiring the page to reload.
When zooming into the question there are 2 new input boxes added by the theme.
The user can simply add some text and click on the save button or press enter.
How the teacher manages comments.
A teacher can see all comments provided by students. This list of comments makes it very easy to find questions that have lots of comments.
When the teacher clicks on the question having 15 comments the question content can be viewed allowing the teacher to understand what this is about. In the comments tab all student comments can be read.
Clicking the Comments tab opens a Tab that shows all the student comments.
How it all works
The quiz comments have been build into the Moodle theme uising some smart renderes and a Yui Module. The comments are stored in a separate table. The report has been build as a sub plugin for the quiz module.
Building these customizations have been a nice learning experience and I would very much like to build them in a way so they can easily be reused. If you’re want to learn more on this plugin do not hesitate to contact me!
Presentation Moodlemoot UK
On this years Moodlemoot I did a presentation on making moodle multi device friendly with Bootstrap.
Saint Patricks day Moodle theme.
Together with David Scotson, Joby Harding and Gareth Barnard I am working on a new version of the Moodle bootstrap theme, the theme that was the foundation for the bootstrapbase theme / clean theme now in Moodle core.
Today I prowdly present the Bootstrap Shamrock theme for Saint Patricks day! The idea for releasing this today was from Gavin Henrick
Download it now
How this theme was build
I did not create the Shamrock look for Moodle myself. All credits go to Thomas Park how maintains the free bootswatches for Moodle project.
Our Moodle bootstrap theme fully supports bootswatches, and thanks to Joby Harding it is now super easy to switch bootswatches in the Moodle bootstrap theme. All I did for this theme was issue the command.
grunt swatch --name=shamrock
Theme Bootstrap 3 for Moodle
August 2013 version 3 of the Twitter Bootstrap CSS framework was released. This post explains how this framework was used to create a new Moodle theme.
A little history: If you are using Moodle version 2.5 or newer you can select a theme called Clean from the Moodle theme selector. This theme uses a base theme called bootstrapbase which makes the theme called Clean a child theme. The bootstrapbase theme is build using version 2.x of the Twitter Bootstrap framework. Last year Moodle Head Quarters descided to adopt the bootstrapbase theme and the Clean theme into it’s core distribution. It has become a popular theme especially for usage on Mobile devices.
The bootstrapbase theme was created using the bootstrap theme which I created together with David Scotson. This new version of the theme is a theme on it’s own. Perhaps at some time it will be used to upgrade the Moodle core theme. for now it is there for you to use and enjoy.
So what is Twitter Bootstrap?
Twitter Bootstrap is a framework used for building the user interfaces for web-based applications. When implementing Bootstrap a developer can choose to use elements of the Bootstrap framework to build a user interface. With version 3 developers can now create a better Grid, faster load times and most importantly have a better Mobile experience.
Coding for fun
This Christmas brake I simply could not sit down and enjoy Christmas carols and shopping. So instead I took some time creating a new version of the bootstrap moodle theme based on Twitter Bootstrap version 3. The new version is still a work in progress but it is already working quite well. It works for Moodle versions 2.5 and 2.6, you just need to download the right branch.
Get it now!
Click the read more link to learn more about the new features.
Get the new Google Analytics Moodle plugin
Back in 2012 Me and Gavin Henrick published blog posts about using Google Analytics with Moodle. Now a year later I spend some time improving it and turning it into a Moodle plugin that can you can download from Github
I am still using my Google Analytics code and enjoying the results it gives me. The most important feature it offers is the improved URL’s that are send to your Google Analytics Dashboards.
The problem with Moodle links in Google Analytics is the link format:
Using this Local plugin you can transform these URL’s into:
Recently the Moodle HeadQuarters organized a Moodle Developer meeting. These Meetings are held to keep all Moodle experts, Developers and Power users up to date on the most recenten changes and updates.
This Meeting was organized using Youtube for Video and Audio and Jabber for comments and Chatting.
This post describes some of the notes I took during the meeting.
This post has been written for the iMoot online conference.