#Moodle Tricks of the Trade – Adding your own CSS to the Moodle Mobile App

This is the 21st entry, in the Moodle Tricks of the Trade series.

Moodle comes with a mobile app (that is free for the users to download), and when set up correctly is a very useful addition to the service being offered. What people are probably not aware of, is the fact that it is possible to add your own custom CSS to the App to change the appearance of it. This may be simply to add in corporate styles, or it may be to add in additional items – e.g. flexboxes that have been added to the main site, and you want to replicate in the app.

In order to be able to do this, you need to have a ‘Premium’ plan, and there are 3 ways to get such a plan:

1. If you are hosted by a Moodle Partner, then you will have this for free.
2. You can pay an annual fee – details are available at https://moodle.com/solutions/moodle-app/
3. If you are a charity, NGO or similar – then you may be eligible to get this for free: https://moodle.com/faq/we-are-an-ngo-or-a-non-profit-organisation-do-we-need-to-upgrade-and-do-we-need-to-pay/ (note that Universities, Colleges, Schools etc. are not eligible for this).

Once you have a premium plan, you can change a couple of settings in the Moodle admin (see the video), you then need to identify a location to store your CSS file, for ease – I have chosen to use git-hub, to which I can start adding the required CSS.

Normally when adding your own CSS to Moodle, one uses the ‘Inspect’ tools in the browser to identify the different classes etc. We cannot do this directly in the app, but if we download Chromium and use that (following the instructions carefully) we can emulate the app in a browser which in turn allows us to inspect what is going on, in order to find the relevant code that is required. Instructions on how to do this are covered in https://moodledev.io/general/app/development/setup/app-in-browser and are summarised in the video.

Since this post was originally written, things have changed, so we have to use a version of Chromium that is older than version 119 – this took me ages to resolve, as everything was trying to get me to install the latest version of chromium, eventually I found a way by going to https://chromium.cypress.io/win64/canary/117.0.5917.0 and using the mini_installer.exe file, which appears to be working.

Once Chromium has been opened correctly (pay attention to the details in the video) – you can visit https://latest.apps.moodledemo.net/ – enter the address of your Moodle and login.

One annoyance is that for the CSS to have any effect in the Chromium browser, you do have to clear the cache and history and reload the site. On the actual app itself, if you go to the 3 dots in bottom right-hand corner and then ‘App settings’ – there is a synchronisation option, which allows you to re-synch the site, which would pull the latest version of the CSS file down.

I am not going to pretend that it is either easy or quick to make the changes, but it is doable. One additional annoyance is most CSS works in both Apple and Android but some elements are specific to Android, with different code required for iOS – the Chromium browser will yield the Android code, but not the iOS code – I am still trying to find out how to locate the iOS equivalents of the code, if I make a breakthrough and find that, I will update this post.

UPDATE: Since writing the post originally, and recording the video, I managed to work out how to overcome the issue with Android and iOS being different. If you have an item that looks like ‘.sc-ion-label-md-s h3’ the ‘md’ part of this refers to Android. So all we have to do is add a second item swapping md for ios – so my CSS looks as follows:

.sc-ion-label-md-s h3, .sc-ion-label-ios-s h3

Thanks to https://www.cabi.org/ for allowing me to use their site in the video.

#Moodle Tricks of the Trade – Formatting the description box within activities

This is the 20th entry, in the Moodle Tricks of the Trade series.

I often hear people grumbling about the appearance of Moodle, and I agree that some of the ‘out of the box’ interface isn’t as well developed as it could be – but the good news is that there is quite a lot that we can do with some simple CSS additions, to change how things look. This may be just to bring things in line with corporate style guides, but it can also be to make things clearer.

One thing that I have started to do with some of my Moodles, is apply some basic formatting so the contents of the ‘Description’ box for any activity is changed to make it stand out a bit more. This video shows how to go about this, and the better you get at CSS the more you can do with it.

Note: that the code used for Moodle 3.x will be slightly different to the code used in Moodle 4.x  so if you are still on Moodle 3 and you do this, when you upgrade to Moodle 4 you would have to tweak your code for it to have an effect.

---

#Moodle Tricks of the Trade – Synchronising groups when using course meta-links

This is the 19th entry, in the Moodle Tricks of the Trade series.

There is a well-known and widely used feature in Moodle called Course meta-link which allows you to create a connection between one course and another, so anyone enrolled on the first course automatically gets enrolled on the other. However, what this standard function doesn’t do is allow for the groups of the parent course to get carried over to the child course, which is annoying, as that is a feature that would often be desired.

Luckily there is a way to do this, by using a 3rd party plugin called Meta-course group synchronization – once this is installed on your Moodle, you can get it so that the groups are pulled through from parent course to child course, and any changes to the groups (e.g. groups added, deleted, or membership changed) will get updated within seconds.

There are 2 things that one has to remember when setting this up for it to work:

1. The child course needs to be set up to allow groups (e.g. either set to separate groups or visible groups)
2. When you then add the course meta-link it will ask you which group to add them to – this has to remain as ‘none’ which in doing so is the trigger for the meta-group synchronisation to take effect.

On one of the Moodles that I support we have a highly modularised delivery – with different programmes being made up of different modules, many of which being shared across the programmes. When I add students and tutors to the main programme course and put them into a group, the students, tutor, and group all move seamlessly into the various modules that make it up.

Considerations when upgrading to Moodle 4.1

Many organisations that use Moodle will probably be using Moodle version 3.9, 3.10 or 3.11, and they will hopefully be aware that the jump to Moodle 4.0 or 4.1 is a significant jump. Moodle 4.1 is what is called a long term supported release, so there would be no sense in anyway upgrading to Moodle 4.0 at the moment, they may as well go straight for Moodle 4.1

Anyone who was involved in Moodle when we changed from version 1.9 to 2.0 will remember that was a huge change that caused a lot of people a lot of stress. The good news is that the jump from 3.x to 4.1 is no way near as big as that was – but it is the biggest upgrade jump we have had since then – so it does need to be taken seriously and in particular enough resource and time needs to be allocated to it.

Moodle 4 has been redesigned to create a better user interface and experience – the consequence of this, is certain things will look very different, and more significantly the way that a course is navigated will be different, which may require some reworking of the courses, to get them to work within the new ideology. For example some course themes that work in Moodle 3, will not work on Moodle 4, or will work differently, and some 3rd party plugins, also won’t work – in which case alternatives for them will need to be sought.

I was recently involved in a webinar (video from this is below) on this topic in conjunction with Overt Software Solutions Ltd where they explained some of the technical aspects of the upgrade, before I came in after about 10 minutes to discuss some of the front end Moodle admin considerations.

The key thing is to get the timing right for this. I expect that a lot of traditional educational organisations (certainly UK ones) will use the Summer break to carry out this upgrade, in which case they need to be starting the process now. One of the key parts of testing, will be getting the teaching staff to check their own courses, and this is the bit that people need to think about. When I was a teacher, I had a healthy allocation of holiday days per year – but I was limited as to when I could take them – which meant I had to take a big chunk of my annual allocation as a 5 week block in the summer, and this was the same for most other teachers – so there is no point in waiting until the middle of July before getting teachers to test things, as they will either be on holiday, or about to be on holiday and not interested in this side of things. Connected to this, is the marking load for the teachers. This will vary from course to course, but typically teachers will experience periods of time in the summer term when they have ridiculous amounts of marking on their plates, and no slack to do anything else – these weeks also have to be avoided. The bottom line therefore for many organisations will be that they probably need to have a ‘teacher testing’ window of about 6 weeks, probably starting by early May at the latest (ideally earlier) – which if we count the time backwards from this date, means we need to be starting the process in the next few weeks at the latest, in order to have time to do this process justice.

#Moodle Tricks of the Trade – Making the Country or City profile field compulsory

This is the 18th entry, in the Moodle Tricks of the Trade series.

In Moodle, the standard profile fields for Country and City, are not set as compulsory, and there are no built-in settings to change this. If you do want to make these fields compulsory (or other similar fields) then this can be achieved through the clever use of a User profile field plugin called Associated input.

Once installed, you then add a new user profile field, connect it to the original one that you want to make compulsory, and that is it.

One thing to note, is if you have users who haven’t yet chosen something for this field – when they next login, they will be forced to update their profile before they can continue. This isn’t a major problem, but worth letting people know about this in advance, to avoid confusion.

And finally – this is quite a significant change in the way the system works, so please test this on a test site before deploying to a live installation, and I have no idea if and how this will work in future versions of Moodle – it definitely works in Moodle 3.9-3.11, but I haven’t tested this yet in Moodle 4

#Moodle Tricks of the Trade – Adding a QR code block to a course

This is the 17th entry, in the Moodle Tricks of the Trade series.

If you are likely to be teaching in an environment where the learners are accessing the Moodle via mobile devices – one of the challenges is giving the students instructions on where to go to locate certain activities. One way to speed this up is by using QR codes so if you want the learners to go to a certain activity, you create a QR code for that item, the students scan it with their phones, and subsequently go straight there.

There are a few QR code plugins available for Moodle, but none did exactly what I wanted, but then I realised that I could do exactly what I want using the excellent ‘Filter Codes‘ plugin.

Once this is installed and enabled by the site admin, and filter codes is turned on within the course, I can add a new block – in older versions of Moodle this will be called an HTML block, in Moodle 4 they have renamed this to an ‘Editable text’ block.

I am then going to add to Filter Codes elements into the block.

The first is the {thisurl} element, which will display the URL of the current page. I then put this inside the QR code elements:

{qrcode}{/qrcode}

So the final code looks like:

{qrcode}{thisurl}{/qrcode}

This very simply will display the URL of the current page as a QR code. I then apply the desired settings to the block (e.g. make it so that it appears on all pages in the course, and give it a sensible name), and decide if this is visible to all, or just teachers.

This block could actually be set up at site level by an admin, so that it appears throughout the entire Moodle.

#Moodle Tricks of the Trade – Ways of tweaking YouTube embed code

This is the 16th entry, in the Moodle Tricks of the Trade series.

In the previous post in this series, I introduced the idea of using videos in Discussion activities. In this post, I will introduce a couple of ways that if you are using YouTube, you can tweak the embed code to either change the appearance or change the behaviour of how the video plays.

This video was recorded in January 2023, note that YouTube is forever changing the way that embed code works and behaves, so at some point in the future these tweaks may not work.

The tweaks that I introduce are:

1. Adding a border to the video
2. Changing the ‘suggested videos’ that show at the end
3. Specifying a start time for the video
4. Specifying an end time for the video
5. Applying multiple elements (e.g. doing a combination of the above)

#Moodle Tricks of the Trade – Creating a video based discussion activity

This is the 15th entry, in the Moodle Tricks of the Trade series.

I often run training for organisations on the use of Moodle, and a regular activity that I will introduce is the idea of creating a video based discussion (forum) activity. This for me is one of the best returns on investment (e.g. high educational benefit for minimal time/effort from teacher to set up) and a good ‘quick win’ especially when working with apprehensive or time strapped teachers.

Finding a video related to the topic being taught is relatively easy, and simply sharing a link to that video is again very easy, but there are a few downsides of just doing this:

1. If the learner follows the link to the video; as well as the video, they will also get the various additional distractions that come with it – e.g. suggested videos, comments on the video (some of which may not be what you want learners easily accessing) and once a learner has been sent to YouTube or Vimeo, there is a risk they won’t come back.
2. Just watching a video is actually a very passive form of learning.

So to combat the above issues, we do two things:

1. We embed the video rather than linking to it. This will embed the video into Moodle, so the learners see the video, but not the distractions around the side.
2. We get the students to do something with the video. This could be asking them to summarise the key point or points, or asking them to critique the video, or asking them to spot the mistake, or something else – just getting them to watch the video with a purpose, makes the process more active than before.

When using the forum activity in Moodle there are many settings and combinations of settings that can be used, and a lot of this will be down to personal preference and trial and error – however, once you have worked out the settings that you want – a really useful trick here, is to create a ‘template’ activity for yourself. This is basically a forum activity set up exactly how you want it. You set this to hidden, and I usually have it located at the very bottom of the course. When I want to add a new activity into a course, I simply duplicate this template, move it into the correct position, change the name and the contents and then make it visible. This is much quicker than creating one from scratch each time – and I don’t have to think about the settings, as these are already set.

The next post in this series will show how you can tweak the embed code if using YouTube.

Moodle Tricks of the Trade – Adding a Moodle calendar into an external application

This is the 14th entry, in the Moodle Tricks of the Trade series.

Moodle has a built-in calendar mechanism, which is often underused or incorrectly used – which is a shame as it can be a very powerful tool to help students to organise their time, their deadlines, any appointments etc.

What a lot of people don’t realise, is that it is possible to connect a Moodle calendar to another calendar application e.g. Outlook or Google Calendar – and as items are added to the Moodle calendar, these will then (within a few minutes) also appear in Outlook or Google Calendar. Each student or teacher has to make the connection themselves, but once set up, it should just run itself quite nicely, and overlay any Moodle items alongside other items in the other calendars.

This technique is particularly useful when you have students or teachers who are in different time zones, as the Moodle calendar will recognise the user’s timezones (as long as they are correctly set with their profiles), and show the items to them correctly based on that timezone.

The following video shows how to add the Moodle calendar to both Google and Outlook – note, this video will probably soon be out of date, as the different applications keep changing where to find things, but the principle will be the same, and will probably be applicable to other calendar applications as well.

Moodle Tricks of the Trade – Creating a 5 star rating scale

This is the 13th entry, in the Moodle Tricks of the Trade series.

In this post I will introduce a clever combination of basic techniques that can be used, to allow students to peer rate other students’ contributions, with a 5-star rating scale, familiar to many from various online shopping sites.

The first part of the process, is to create the scale – this has to be done by someone with admin rights on the site, and you basically add a scale that looks like the following:

☆☆☆☆☆,★☆☆☆☆,★★☆☆☆,★★★☆☆,★★★★☆,★★★★★

When this scale is then used within an activity, the 6 different options will appear in a drop-down menu, and the student chooses the option they want – as shown in the screenshot.

To create the stars, I used this website https://unicode-table.com/en/ and simply copied the white star and black star from here, and then manipulated them within Moodle to create the full scale. You may be able to simply copy the stars from above – but do check in case they don’t render properly on your Moodle.

Once the scale has been created, this can then be used by a teacher within a wide variety of activities e.g. forum, database, glossary etc. The key is, that if we want students to peer review each other, then we have to tweak the permissions for this activity to allow the role of student to be able to ‘rate’.

The video shows how to do this.

And then finally, it is thinking about how you actually use this – you could set completion to be based on students reaching a certain average star rating, or the teacher could set a final (separate) grade manually but using the star ratings as part of their decision-making process.