Super Simple navigation with a little HTML and the Topics format

4
4335

Some simple HTML + the “Show One Topic” option in the Topics Course Format can be used to create a much improved course interface.  No more scroll of death and students can easily navigate the course.  This can be accomplished in both Moodle 1.9 and Moodle 2.x.

  1. First things first you’ll want to construct your course and have it all ready to work (or as close to it as possible).  If you’re using Moodle 1.9 or 2.x you can add the “Section Links” block which will use to copy some URLs.
  2. Copy the URLs to each Topic section and paste them to a text document for quick reference.  The Topic link URLs will help student navigate to an individual section.  They generally look like this:
    http://yourmoodle.com/course/view.php?id=2&topic=1

    The first part of the URL is your domain, then the course ID then the topic number.

  3. Next we’re going to add a new label to each topic area (not including the Summary of the Topic Outline, this will always be visible).  The new label will include a snippet of HTML to create a single row, double column table.  In the left cell you can have just text or an image arrow which will be linked to the previous topic link, in the right cell you’ll have text or an image arrow linked to the next topic link.  This is the snippet for text only which you should add as plain text in the html editor (the HTML or <> buttons depending on your Moodle version):
    <table border="0" width="100%">
    <tbody>
    <tr>
    <td><strong><a href="http://yourmoodle.com/course/view.php?id=2&topic=0">&lt; Previous</a></strong></td>
    <td style="text-align: right;"><strong><a href="http://yourmoodle.com/course/view.php?id=2&topic=2">Next &gt;</a></strong></td>
    </tr>
    </tbody>
    </table>

    This includes the HTML for the table, links and text (“< Previous” and “Next >”) and the URL of the topic link.  This is important: for every previous and next just edit the topic number to represent the previous (if this is topic 1 you can just delete the “previous” text).

  4. Continue adding labels to each of your topics and edit the HTML accordingly.

Once you’ve added all the labels the individual topics should look something like this:

As long as you’re not constantly reordering your course topics this is a simple and effective way to provide an easier navigation with no scroll of death to students without adding any new course formats or hacking the topics format with invisible resources and activities.  Here’s a quick video of it in action: