Take me Back To The Course button
Navigating through an online course can sometimes be challenging for learners, especially when Moodle LMS seems to leave them with no next step like returning to the main course page after completing an activity. This article introduces a simple effective solution: a Back to the course (or Return to the course) button. You can add this to pages, lessons, books and more. In this article, I will show you how to add a “Back to the course” button to a page, but the process should be similar to other Moodle LMS activities and resources.
You probably noticed that the URL for a course in Moodle ends with something like /course/view.php?id=123. But did you know that the course ID is just one of 3 ways that you can make this link? You can also specify the course by its Short name or ID Number. This is just what we will need to create a “Back to the course” that will still work, even if you backup your course and restore it to another Moodle site. The best part is that you don’t need any additional plugins to make the basic version work.
Creating the Back to the Course button
Start by editing the settings of the page and scroll down to the description field. Switch the editor to the HTML view.
In the Atto editor, you would 1) select the down-arrow button to expand the toolbar and then 2) use the </> toolbar button to switch to the HTML view.
If you are using the new TinyMCE editor (Moodle 4.1+), you would 1) select “View” in the menu, and then 2) select “<> Source code” in the dropdown list.
Next, enter the following on a blank line at the end of all the HTML codes:
<p class="text-center">
<a class="btn btn-primary" href="../../course/view.php?name=the%20%short%20name%20of%20your%20course#section-X">Back to the course</a>
</p>Don’t forget to save your change.
Explanation of the code
Let’s break down the HTML code so that you can customize it.
<p class=”text-center”>…</p>
This will center the button horizontally on the page.
<a class=”btn btn-primary” href=”….”>…</a>
This will create a link that looks just like a button when it is displayed.
../../course/view.php?name=your%20course%20short%20name
This is the relative link to your course’s main page. The “../../” are necessary so don’t leave them out. For some activities, where the URL of the page you are viewing is nested deeper, you may need to add additional levels of “../” to the beginning of the URL.
FYI: A relative link is a URL that is relative to the URL of the page where you want the button to appear. Unlike regular URLs, they do not start with http:// or https://.
You will need to encode the course’s shortname (course%20short%20name in this example) An easy way is to head over to URL Decode and Encode, 1) copy and paste the shortname from your course into this page and 2) click the “> ENCODE <” button. It will do all the encoding for you. 3) Just copy the encoded course name back into the link.
#section-X
This part of the link is optional. If you omit this part, it will always take learners back to the top of the course outline. By including #section-X in the link, learners will be taken back to the section containing the activity – so that they don’t need to scroll back down again. Remember to replace the “X” with the section number.
To determine the section number, start counting the sections of the course from the top (#section-0). They are numbered sequentially regardless of the name you gave the section. Count the to the section where you want to take students (e.g. #section-3). Both the Moodle Topics and Weekly course format work this way and it does not matter if you have configured the course format options to show all or just one section at a time. However, 3rd party custom course formats may work differently so be sure to try it out on one page before you commit to adding more buttons using this method. Always test each button to make sure it works after you create it.
Pro tip: If you are adding the button to the last activity in a section, consider taking the learner to the top of the next section of the course.
Using the Course’s ID Number
Like the course Short Name, the Course’s ID Number (it is a field in the course settings) must be unique on your Moodle site. It will therefore work just as well. If you do want to use the ID Number, the code would look like this and you don’t need to worry about encoding it:
<p class="text-center">
<a class="btn btn-primary" href="../../course/view.php?idnumber=12315#section-X">Back to the course</a>
</p>However, if your instance of Moodle is tied to a student information system, that number is more likely to change than the course’s short name so I would stick with the latter.
Regardless of your approach, you will end up with something that looks like this. Results may vary depending on your theme (this is Boost):
Sure, you could have just inserted the full URL starting with the domain and ending with view.php?id=XXX as it usually appears in your web browser. However, that approach would not be portable. As soon as you move your course to a different instance of Moodle, the button will not work anymore because the domain and/or path to your Moodle site will have changed, and the course ID changes each time you restore/clone your course. It’s by no means a perfect solution. Course short names need to be unique and, if you clone your course, you will need to update all of the links because the new course will need a different short name.
A more flexible and portable solution using FilterCodes
To take the solution to the next level, you just need one additional ingredient on your Moodle site(s): the FilterCodes filter plugin. The code snippet will be very similar except that you will use …/view.php?id={courseid}#section-{sectionid}:
<p class="text-center">
<a class="btn btn-primary" href="../../course/view.php?id={courseid}#section-{sectionid}">Back to the course</a>
</p>FilterCodes will then take care of replacing the {courseid} tag with the actual course ID no matter how many times you clone the course on your site. The {sectionid} tag will automatically keep track of which section the activity belongs to so you can even add, remove and shuffle the sections around – and the button will work anywhere that Moodle filters are supported!
Has the HTML stuff been too much for you? Well, if you have FilterCodes on your site, you can just type the following up in plain text in the editor without switching to the HTML view:
{button {wwwroot}/course/view.php?id={courseid}#section-{sectionid}}Back to the course{/button}Want to centre the button? Just centre like you would any other text in the editor.
Don’t want the button to appear in the mobile app? Wrap the whole thing in a set of {ifnotmobile}put your code here{/ifnotmobile} tags. The button will still appear in a web browser.
In conclusion…
While it may seem like a little extra work to add a “Back to the Course” button to your Moodle course activities and resources, it will improve the navigation and the user experience, making it easier for your learners to make their way through the course. Remember to always test each button to ensure that it takes you to where you intended.
September is back to school and fall is just a few days away here in Canada. I’m looking forward to the changing of the leaves. Raking the leaves? Not so much.
Hope you found this information useful. See you next month!
Michael Milette
- Debugging SCSS in Moodle LMS – 23rd April 2024
- Moodle LMS Email Deliverability in 2024: Best Practices, Authentication Standards and Troubleshooting – 23rd February 2024
- Terminology for Those New to Moodle LMS – 20th January 2024
Great post Michael, and well written.
All admins, and many teachers, will be familiar with the Moodle course URL, which they see ending in /course/view.php?id=123 – with these numbers being the unique course ID.
But using the ID Number or Shortname would be less familiar.
For many Moodle sites it would never be necessary to go beyond the courseid, because courses would be highly unlikely to be moved to another server.
However, I have just been working with a client who changed their business name, and so we needed to change the Moodle site name too – in this case, simple embedded links would have broken (as the search and replace migration tool does not check ‘content’).
But using the shortname and Filtercodes is the ultimate solution – making it future-proof.