Adding the course title to the Navigation drawer

Adding the course title to the Navigation drawer

by Bob Gilmore -
Number of replies: 6

A regular comment Ive had is that my learners lose the course title they're in as they scroll down a page. I could sticky the heading, but im already sticking the secondary nav and the pages start feeling too top heavy with both stickied.

With the new sections in 4.4, this problem is reduced, but it can still be an issue.

I have a proof of concept workaround that adds the course heading to the nav drawer below. This has so far only been tested in 4.4  Boost and may need some tweaks in other versions/themes.

It is added to Admin > Appearance > Additional HTML > Within Head

<script>
window.addEventListener('DOMContentLoaded', () => {
  if( document.querySelector("body[id*='course']") ) { // Only target pages with course in the body elements id - should get most course formats
    const drawerheader = document.querySelector('#theme_boost-drawers-courseindex div.drawerheader');
    const heading = document.createElement('div');

    heading.innerText = document.querySelector('.page-header-headings h1').innerText; // Get the heading text from the course pages heading
    heading.style.flexBasis = '100%';
    heading.style.fontWeight = 'bold';
    heading.style.paddingBottom = '0.5em';
    heading.style.paddingLeft = '1.5em';
    heading.style.paddingRight = '1em';

    drawerheader.appendChild(heading);
    drawerheader.style.flexWrap = 'wrap';
    drawerheader.style.height = 'auto';
  }
});
</script>

You can see in the image below the course title at the top of the Nav drawer

image.png

I would probably move the CSS components of this code from the JavaScript any put them in the custom CSS, but this is much easier to share! I should also check that the nav header actually exists  first (I am checking of it's a course page).

Im sure a more experience Moodle dev could find a better way to achieve this or offer some improvements (please!), but hopefully it helps someone.

Average of ratings: -
In reply to Bob Gilmore

Re: Adding the course title to the Navigation drawer

by Wiebke Müller -
Picture of Particularly helpful Moodlers Picture of Testers

Hi Bob,

since it is still work in progress there is nothing to show yet, but the Boost Union team also identified this as a regular painpoint and we're currently checking the options. So thank you for your input and you might want to keep an eye on https://moodle.org/plugins/theme_boost_union

Regards from Hanover 😀

Wiebke

Average of ratings: Useful (2)
In reply to Bob Gilmore

Re: Adding the course title to the Navigation drawer

by Bob Gilmore -
Small refinement. Checking if it's a course page works well enough, but this means there is no heading on non-course pages (i.e. activities). These don't have the course name on the top of the resource either which makes screen scraping the course name harder. Fortunately, the breadcrumbs have the full course title as an attribute of the short name. This also checks if the nav bar exists instead of just a course page.
<script>
window.addEventListener('DOMContentLoaded', () => {
  if( document.querySelector('#theme_boost-drawers-courseindex div.drawerheader') ) { // Check if there is a nav drawer
    const drawerheader = document.querySelector('#theme_boost-drawers-courseindex div.drawerheader');
    const heading = document.createElement('div');

    if( document.querySelector('#page-navbar ol li:first-child a') ) { // get heading text from breadcrumbs if they exist
      heading.innerText = document.querySelector('#page-navbar ol li:first-child a').title;
    }
    else if ( document.querySelector('.page-header-headings h1') ) { // get heading text from page title if that exists
       heading.innerText = document.querySelector('.page-header-headings h1').innerText;
    }

    heading.style.flexBasis = '100%';
    heading.style.fontWeight = 'bold';
    heading.style.paddingBottom = '0.5em';
    heading.style.paddingLeft = '1.5em';
    heading.style.paddingRight = '1em';

    drawerheader.appendChild(heading);
    drawerheader.style.flexWrap = 'wrap';
    drawerheader.style.height = 'auto';
  }
});
</script>
Average of ratings: Useful (1)
In reply to Bob Gilmore

Re: Adding the course title to the Navigation drawer

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers
Dear Bob and Wiebke,

I've looked into this and JS does seem one of the viable solutions, even possibly going into an overridden mustache template for the course index. Though a better solution would be one that combined that with PHP in the rendering process, however the renderer in question is only overrideable by a course format.

One thing though and more of a human element is.... why! I sort of get it, but if a student can't remember the name of the course they are on after scrolling down the page or navigating to one of the modules then what hope is there for remembering the content?

Gareth
Average of ratings: -
In reply to Gareth J Barnard

Re: Adding the course title to the Navigation drawer

by Bob Gilmore -
I'm doing the clunky Additional HTML > Within Head <script> solution because, as always for me, Im unable to edit the source code. Anything I do has to be through the UI provided. 

To your last question, its mostly that they (and, really, I) have too many tabs open, with several courses (e.g. one or more shared 'resource' courses and an 'assessment' course). It's handy to know at a glance which is which. It's probably more teachers and course designers who get more use out of it, tbh, but even the learners find it useful in this instance.
Average of ratings: Useful (1)
In reply to Bob Gilmore

Re: Adding the course title to the Navigation drawer

by Hugo Ribeiro -
Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers
While this approach makes sense because one can use it on any moodle instance, I've set this on my Stream theme using mustache templates because I've also felt the need for this. 
It's not available for Moodle 4.4 yet.
Average of ratings: Useful (2)
In reply to Bob Gilmore

Re: Adding the course title to the Navigation drawer

by Bob Gilmore -

My teachers got all needy and wanted the course title as a link.

As before: Admin > Appearance > Additional HTML > Within Head

<script>
window.addEventListener('DOMContentLoaded', () => {
  const drawerheader = document.querySelector('#theme_boost-drawers-courseindex div.drawerheader');
  if( drawerheader ) { 
    const heading = document.createElement('div');
    const link = document.createElement('a');

    if( document.querySelector('#page-navbar ol li:first-child a') ) { 
      link.innerText = document.querySelector('#page-navbar ol li:first-child a').title;
      link.href = document.querySelector('#page-navbar ol li:first-child a').href;
    }
    else if ( document.querySelector('.page-header-headings h1') ) { 
       link.innerText = document.querySelector('.page-header-headings h1').innerText;
       link.href = window.location.href;
    }

    link.classList.add('courseindex-link');
    heading.appendChild( link );
    heading.classList.add('courseindex-item','courseindex-section-title');
    heading.style.flexBasis = '100%';
    heading.style.paddingLeft = '1.5em';
    heading.style.paddingRight = '1em';

    drawerheader.appendChild(heading);
    drawerheader.style.flexWrap = 'wrap';
    drawerheader.style.height = 'auto';
    drawerheader.classList.add('courseindex');
  }
});
</script>
Average of ratings: -