Christopher X J. Jensen
Professor, Pratt Institute

Moodle Tip: Using anchor links to create your own course page menu

Posted 02 Jun 2014 / 17

I love Moodle. It is an amazing tool for delivering course content, assessments, and feedback to students. But if you are a power Moodle user, you know that it can take some instructor massaging to make it as user-friendly as your students prefer.

One of the things about Moodle that frustrates and confuses students is the way that different “sections” (usually “topics” or “weeks”) of the course display. There are actually two ways that you can display these “sections”:

  1. Show all sections on one page; or
  2. Show one section per page.

These two settings define the compromise that Moodle‘s “one main page” design implies: either you list all the content on one (often very long) page, or you isolate the pages. If you have a lot of content in each of your course sections, the scroll on your main page can get pretty insane if you use the “show all sections” setting (sometimes referred to as the “scroll of death“). That might make you think that “one section per page” setting would solve this scroll of death problem, but in my estimation it does not: students still have to scroll through a long menu list of sections to find their section of choice, and once they select a section navigation is limited to jumping back to that menu list or navigating to the previous or next section. Really all the “one section per page” setting does is allow students to click on and isolate a page, which does not really solve the scroll of death problem.

There are other features that have been built into Moodle to make it more navigable. For example, there is the “Navigation” tab, which features expandable hierarchical menus that allow navigation to a particular section when the “one section per page” setting is used. But to me this just creates more confusion. Now in addition to scrolling and clicking into a particular section there is also the option to find the section you want on these unwieldy menus. Like any other technology, you can train users to work around its shortcomings, but in my experience students do not get any training in how to use Moodle. Instead, they treat it like they treat their phones: play around until you figure out how it works. This means that our Moodle course pages need to be as intuitive as we can make them.

I really like the “all sections on one page” setting. I think that there is great value in having the entire course laid out in front of you, being reminded of where you have been and having the chance to look ahead to where the class is heading. But on my pages, scroll of death is more like scroll of excruciating execution. I have so much content in each of my sections (and in the header “section 0” area) that it is really frustrating to try to navigate down to the section you want right now. And because I have a lot of material in my header section, even if I use the setting “one section per page”, there is still a lot to scroll through to get to the “one section” you chose.

What I really needed was a quick way to navigate down to a particular section from the moment that the course page loaded. A serendipitous discovery lead me to the solution I was looking for.

Sometimes when you add or alter a particular item in one of your Moodle sections and then you hit the “Save and return to course” button, you end up not at the top of your page but at the section you were working on: very convenient! I say “sometimes” because this feature does not appear to consistently work, and I have not figured out the pattern that explains this inconsistency. But when it does work, it does so because the latest version of Moodle embeds anchor tags into each section of your course. These tags are numbered from one through however many sections you have included in your course.

If there are anchor tags there can be links, so it is very easy to set up links on your page that jump from section to section within the same long scroll of death page. What I needed was a simple navigation menu in my header section that would allow students to navigate down to the current week’s section. Making this menu as as easy as adding an HTML-coded “label” at the top of my course page.

Here’s the actual code that I use for my 15-topic Moodle courses:

<p><span style=”color: #6699cc;”><strong>Quick links to Week:</strong></span> <a href=”#section-1″>01</a> / <a href=”#section-2″>02</a> / <a href=”#section-3″>03</a> / <a href=”#section-4″>04</a> / <a href=”#section-5″>05</a> / <a href=”#section-6″>06</a> / <a href=”#section-7″>07</a> / <a href=”#section-8″>08</a> / <a href=”#section-9″>09</a> / <a href=”#section-10″>10</a> / <a href=”#section-11″>11</a> / <a href=”#section-12″>12</a> / <a href=”#section-13″>13</a> / <a href=”#section-14″>14</a> / <a href=”#section-15″>15</a></p>

What you end up with after you insert this code as a Moodle label is a little compact menu with clickable links for each of your topic weeks:

2014-06-01

It does not matter how many “sections” your course uses; because Moodle automatically inserts anchor tags in the form “section-#” (where the “#” is the sequential number of the section), you can just add or subtract section links as necessary.

Although I use the “topics” format for all my Moodle course pages, I don’t see why you could not use this same technique to create a menu of course meeting times… you would just have to replace the simple weeks above (01, 02, etc.) with the dates of class meetings. I have not tested it, but it should work for “weeks” format in Moodle, as each week or topic is just treated as a numbered “section”.

The only thing to watch out for here is how “dumb” these section anchor tags are: they are just numbered from first to last, so if you rearrange the order of your sections the anchor links are going to change too. If you use my code above that’s not an issue, because “Topic 03” will always be the third topic no matter what section I place third. But if you use these anchor tag links to delineate names for each section, moving a section will break it from its proper link. So if you get fancy with your little top menu by using something other than the numbered sections on your menu, you will need to re-assign links every time you rearrange your sections. Not a big deal, but something to be aware of…

Have fun with this Moodle tip and comment below if you have questions.

A Major Post, Moodle, Teaching Tools

17 Comments to "Moodle Tip: Using anchor links to create your own course page menu"

Carolyn 24th October 2014 at 7:09 am

Hi

I’ve done something very similar with a course, but the problem I’m having is finding out how to put a link at the top of each section which takes the user back to the top of the page. Any suggestions would be gratefully received.

Chris Jensen 27th October 2014 at 10:10 am

Hi Carolyn,

This is pretty easy.

Just create a label with the following HTML code:

<p style=”text-align: right;”><span style=”color: #888888;”><a href=”#section-0″>[Back to Top]</a></span></p>

This label can be copied and dropped wherever you want it in the section as a “go back to top” link.

The key here is simply knowing that the top of the page is “section-0”.

H 17th November 2014 at 11:31 am

Great post—very complete. I do the same in many of my moodle courses. Thanks!

Cherie 8th August 2015 at 8:20 pm

HI Does this work if you name your topics rather than using the defaults?
thanks
cherie

Chris Jensen 8th August 2015 at 8:30 pm

Yes! Even if you give your sections custom names, the names of the sections in the HTML code underlying Moodle remain the same.

Greg 25th February 2016 at 1:46 am

Hi Chris

Forgive me if this sounds like a silly question but do I have to insert any actual links into the HTML code you provided or is the code ready to use without modification. When I use this code on my Moodle page I get ‘Page not found’ message when clicking on separate section numbers. I would be really grateful if you helped.

Cheers
Greg

Chris Jensen 25th February 2016 at 8:08 am

Hey Greg, thanks for the question. I am sure you know that no question is silly, especially when it comes to the cryptic inner workings of tech.
The code I provide should work as-is within your main Moodle course page so long as you have inserted it as a label & made sure to enter it as code (not regular text).
If you are seeing the menu on your main page but the links don’t work that is curious. The “links” in this code are anchor links, so they should jump you to different locations on your page rather than a new page. Sounds like your links are trying to jump to a new page.
Without further information I can’t help diagnose this issue… feel free to use the contact form on this page to send me more details about the problem.

Mark Roche 26th August 2016 at 8:28 am

Thanks for this Chris.
I had the same problem as Greg. It seems that if you copy your text from this page and paste it into Moodle, it adds double quotes. Removing one set makes it work!
Thanks again

Quick links to Week: 01 / 02 / 03 / 04 / 05 / 06 / 07 / 08 / 09 / 10 / 11 / 12 / 13 / 14 / 15

Mark Roche 26th August 2016 at 8:28 am

Sorry should have added the code as an example! It’s just shown the quick links!

Chris Jensen 26th August 2016 at 12:09 pm

I think that the important thing to recognize here is that what I am providing is HTML code, not “shortcode” that can be placed in your label box.

With apologies to those for whom this is obvious information, there are two modes in which you can edit any text in Moodle:

1. WYSIWYG (What you see is what you get) : The default text editor, which often is displayed with a “toolbox” above it that allows for making format changes such as bold, italic, lists, etc.

2. HTML CODE : This is the code that is actually behind all the text you are creating. For most people, WYSWYG is preferable because the code looks confusing. But to really “hack” the look and function of your Moodle site, sometimes you need to use HTML. Although how you switch from WYSIWYG to HTML CODE mode will vary from Moodle skin to Moodle skin, generally there’s an icon that looks like “< >” that will switch you into HTML mode.

I can’t be totally sure what issue Greg and Mark are having above, but my guess is that they are copying the code I supply above into the WYSIWYG window. Try switching to HTML mode and copying the text. This should work!

Let me know if there’s some other issue I am not seeing!

Tina 22nd November 2016 at 4:15 am

Hi Chris,

Great post – thank you! Is it possible to use the same code to anchor within a Moodle “page” rather than the main home page? If so, how would you create the code for each section on the page so that the links know where to anchor to?

Hope that makes sense!

Chris Jensen 22nd November 2016 at 6:12 am

Hi Tina, the short answer is SORTA. Because all Moodle pages are HTML-based, you can link to anchors on any page. The difference would be that you have to code in the anchors yourself, as there are no “sections” in a page that you create. You need to specify the location of sections yourself with code like name=”mysection”. Then the links in your code are href=”#mysection”. If you are new to HTML coding, this might not be a clear enough explanation. To learn how to code this, just do a web search on something like “HTML link to anchor” and implement what you learn on the code side of your moodle page. Sorry I can’t offer a tutorial here, it’s really hard to demonstrate this in the comments section… this is basic HTML coding stuff, and is super-valuable to learn so that you can better customize your site. Good luck!

Exegesis66 26th June 2018 at 1:46 pm

I know this forum is a few years old but for anyone like me just tuning into Moodle and reading all the docs and forums this was fantastic, thank you. One thing, I had to delete all quotation marks completely from the HTML code in order for the anchor and the Back to Top anchor to work.

Quick links to Week: 01 / 02 / 03 / 04 / 05 / 06 / 07 / 08 / 09 / 10 / 11 / 12 / 13 / 14 / 15

Chris Jensen 26th June 2018 at 2:06 pm

There seems like there is some problem that’s adding extra quotes when you copy and paste my code… so just compare your code to the code as written above to make sure it matches!

Jason Bock 30th September 2019 at 5:01 pm

I have tried and tried to figure out a way to implement internal anchor links within a Moodle Page set to have each section as a separate page. Any anchor links I try will work as long as they are to an element within #section-1. Any anchors of following topics/weeks just reset to the top of section-1. Even when I switch the course format from Weekly to Topics, the anchor link goes to the top of section-1. Have you/anybody ever gotten anchor links to work for custom links within a topic/week?

D 6th January 2020 at 8:49 pm

I just found this blog post, and found it super helpful. Brilliant idea, and thank you!

[…] discovered this feature on the website of Christopher X J. Jensen. Directions, HTML code, and a few things to watch out for are available on the […]

Leave a Reply