Moodle Navigation Suggestions

Moodle Navigation Suggestions

by Paul Tero -
Number of replies: 18

Hello all,

This is my first posting here. I am currently helping to implement a Career Skills Development course at a UK University. In a home test environment, I've made a few changes to the Moodle code which I think have helped to improve the navigation and usability. None of the other forums seemed applicable, so I thought I'd post them here for discussion.

Put indentation in jump menu:
The course we are putting together has dozens of resources. Within the topic format on the course's front page, I have organised them nicely using indentation. However, this indentation is not shown in the "jump to" menu, and so the menu looks like an unordered list of only partly related pages. I have added indentation with the following changes:

course/lib.php, new line 813:
$mod[$seq]->indent = $rawmods[$seq]->indent; // store the indent in the course's modinfo array

course/mod.php, new line 252:
rebuild_course_cache($cm->course); // rebuild the modinfo array when an indent changes

lib/weblib.php, line 3336:
$menu[$url] = str_pad ("", $mod->indent*18, " ") . $mod->name; // add an indent of 3 spaces (3 * 6 characters) in the jump menu

Removing selected indented items from the main topics page:
As we have so many resources, it could be useful to hide anything more than 2 levels deep (indented 2 or more times) on the front page. But I don't want them to be completely hidden - they should still be accessible via the Previous/Next buttons and through internal linking. By adding a class to each row in the topic format, you can use stylesheets to show or hide resources at different indent levels.

course/lib.php: line 980
echo '<tr class="indent'. $mod->indent . '"><td class="activity '.$mod->modname.'">';

They can then be turned on or off using stylesheets:
tr.indent2, tr.indent3, tr.indent4 {display: none;}


Previous and Next labels on buttons:
I added the words "Previous" and "Next" to the arrows in the navigation. I was able to use the existing translations:

lib/weblib.php, line 3348:
"<input type=\"submit\" value=\"&lt; " . get_string ('previous') . "\" /></form>"; // add the translation for previous
lib/weblib.php, line 3354:
"<input type=\"submit\" value=\"" . get_string ('next') . " &gt;\" /></form>"; // add the translation for next

Allow for the easy selecting of internal links when using the HTML editor:
This is a very useful administrative change when using the HTML editor, especially if you have a lot of links between resources. It enables you to quickly choose an existing activity to link to, without having to copy and paste the link. It uses the existing "jump to" menu and then a bit of Javascript to fill the URL field:

lib/editor/popups/link_std.php: new lines after 157
<?
    $menu = preg_match ("|<select[^>]+>(.*)</select>|s", navmenu ($course), $m); //extract just the list
    $menu = preg_replace ("/Jump[^<]+\.\./", "choose one", $m[1]); //remove the Jump to line
?>
    <tr>
    <td class="label"></td>
    <td><select Xonchange="document.getElementById('f_href').value=this.options[this.selectedIndex].value"><?=$menu?></select></td>
    </tr>


Put the heirarchy in the breadcrumbs:
As our course has lots of resources at different indentation levels, I wanted this structure to be reflected in the breadcrumbs. So instead of the bread crumbs saying:

Moodle >> Careers course >> Resources >> Sociology

It reflects the indentation structure and says:

Moodle >> Careers course >> Resources >> Taking action >> Writing CVs >> Example CVs >> Sociology

mod/resource/lib.php, new lines after 101:
    // This loops through all this course's modules building a list of the things that lead to me with
    // their indentations. If any resource jumps straight from indent 1 to 3, this will behave unexpectedly.
    if (($this->cm->indent > 0) && ($modinfo = unserialize($course->modinfo))) {
        $indents = array();
        foreach ($modinfo as $mod) { //for each module, find those above me
            if ($this->cm->id == $mod->cm) break;
            if ($mod->indent < $this->cm->indent) $indents[$mod->indent] = $mod;
        } //for each module
        foreach ($indents as $mod) { //for each module above me
            $this->navigation .= " <a target=\"{$CFG->framename}\" href=\"$CFG->wwwroot/mod/{$mod->mod}/view.php?id={$mod->cm}\">" . strip_tags(format_string(urldecode($mod->name),true)) . "</a> -> ";
        } // for each of the modules above me
    } // if this resource is indented

I hope other developers might find these changes useful, and may want to include them in the CVS builds.

Thank you,

Paul Tero

Average of ratings: -
In reply to Paul Tero

Re: Moodle Navigation Suggestions

by N Hansen -
Paul-These things sound potentially useful, could you post a screenshot of these, especially the indenting?
In reply to N Hansen

Re: Moodle Navigation Suggestions

by Paul Tero -
Hello,

Good idea - attached is a screen shot showing indentation in the "Jump to" menu, Previous and Next labels on the buttons, internal linking in the HTML editor, and the heirarchy in the breadcrumbs.

Sorry if it looks a bit jumbled - I wanted to fit everything into one attachment. Let me know if you've any other questions or queries about these suggestions,

Kind regards,
Paul
Attachment moodle_suggestions.gif
Average of ratings: Useful (1)
In reply to Paul Tero

Re: Moodle Navigation Suggestions

by Chris Westbrook -

I'm not sure exactly what you guys are talking about, since the attachment is an image and I can't see a picture, but if I understand things correctly this could present an accessibility issue.  Indentations are purely visual and while someone with a braille display may be able to see them, someone using speech alone most likely would not.  Shouldn't headings be used to denote structure, not indentations?

Average of ratings: Useful (1)
In reply to Chris Westbrook

Re: Moodle Navigation Suggestions

by Paul Tero -
Hi Chris,

The attachment is, as you say, just an image - a snapshot of my screen with some red labels to show which things are which.

It's true that the indentation would not improve the "jump to" drop down menu for speech browers. But it would not make it any worse either, and it would improve it a lot for visual browsers.

I'm also not sure you can put headings (like <h1> tags) in drop down menus - they are purely lists of text items, which are styled by stylesheets alone.

Another possibility is giving each list item a class like <li class="indent2">, but that would have meant many more changes to the code to implement.

Kind regards,
Paul

In reply to Paul Tero

Re: Moodle Navigation Suggestions

by Chris Westbrook -
The class of the item doesn't mean anything to the screen reader anyway.  Perhaps same page links could be used to jump to the different levels.  I'm not sure what this indentation is supposed to do, though I don't really appreciate the "well it won't make it any worse for speech but it will be so much better for us" comment.  How would the indentation be used?
In reply to Chris Westbrook

Re: Moodle Navigation Suggestions

by Paul Tero -
Hi Chris,

Indentation is an option in the topic format for a course's main page. It enables the administrator to create a psuedo heirarchy by indenting sub-pages.

An example is on the main "using moodle" page at http://moodle.org/course/view.php?id=5. Beneath "Help us with our demographics", the choice "Where are you using Moodle?" is intended, to imply a nested (heirarchical) structure.

I'm not sure how a speech reader would intrepret this indentation, as it is not implemented using HTML heading tags. I imagine it would be ignored. If you don't mind visiting the link above, can you tell me whether your speech reader gives any indication of this indentation?

If not, then this is a more general accessibility issue with the Moodle indentation which should be addressed, perhaps by using heading tags instead of spacer images.

My suggestion was just to carry over this indentation to the "jump to" menu. I did not mean to cause offense by saying that this would only benefit visual browsers - it was an observation.

The course I am making needs to be as widely accessible as possible, so I would appreciate your input on this, as I was hoping to rely on indentation quite heavily as a way of structuring the large amount of information we need to present in the course. As you suggested, we could add same page links from a resource to related resources. This however increases the data management burden, and as the project has limited time and budget, I wanted to use existing aspects of Moodle wherever possible to structure the data.

Thanks and kind regards,
Paul

In reply to Paul Tero

Re: Moodle Navigation Suggestions

by Chris Westbrook -
Thanks for your reply.  No offense taken.  Sometimes I post things without thinking of how they may be received, and I'm sorry if I came accross as snappy.  I really want to help developers incorporate accessibility as well as make moodle more attractive for my university.  You are correct, the indentation is ignored and, you are correct again, heading tags would be a great way to initiate indentation.  Perhaps heading level one would indicate the start of main content and other headings could be created underneath that one.  Just keep in mind that the h tags should be put around the title of the heading, block title, etc. and not the whole section.  Finally, thank you all for listening to what I have to say and, hopefully, implementing my recommended changes.  I know i'm getting further along with you guys than I ever would have gotten with blackboard.  If you ever want me to test certain modules, functions, etc., feel free to ask.  I will be looking at different things in regard to using moodle at our university too but if there's anything you're especially curious about please let me know.  I have a copy of moodle running on the local machine here so I can install new things without messing anyone else up.  Thanks again.
In reply to Chris Westbrook

Re: Moodle Navigation Suggestions

by Paolo Oprandi -
Hi Paul,

I think the changes you suggest are very useful.

Your "Allow for the easy selecting of internal links when using the HTML editor" change seems like an excellent idea, but it highlights a usability problem in Moodle when backing up and restoring courses: on restoring a course the internal address of a given resource or activity changes, but the HTML page doesn't. Would it be feasible for the restore function to search for these embedded html links and change them according to the new addresses?

Best wishes,
Paolo
In reply to Paolo Oprandi

Re: Moodle Navigation Suggestions

by Paolo Oprandi -
In response to my posting, if the resource and activity autolinking was activited the best answer would be for the text editor's dropdown menu not to recreate the link, but simply insert the name of the resource or activity...
Paolo
In reply to Paolo Oprandi

Re: Moodle Navigation Suggestions

by Paul Tero -

Hi Paolo,

I agree that the internal linking when restoring is an issue. It not only applies to the course id, but also the site where the course is running (which might also change).

I will try to find a simplish solution for this. For instance, when backing up, it could output the old id number in a comment after each SQL statement. When restoring, this could be used to do a search and replace over the inserted text.

As far as I can tell, internal linking only works automatically on glossary items. It doesn't work between resources. So I think that something to help insert links will help, and will be really useful when the backup/restore issue is resolved.

Kind regards,
Paul

In reply to Paul Tero

Re: Moodle Navigation Suggestions

by Urs Hunkler -
Picture of Core developers

Hi Paul and Chris.

Paul is working on a enhancement for the navigation menu. As Chris mentions this enhancement does not work for him.

Moodle offers another way to display this navigation menu as an unordered list. This can be a way to meet the aim of both of you. Please look at/read Martins posting Floating navigation menu in 1.5 themes.

Chris do you know what information would be necessary with an unordered list to make the course structure accessible with a screenreader?

I hope this helps
Urs

In reply to Urs Hunkler

Re: Moodle Navigation Suggestions

by Chris Westbrook -
let me just clarify what my issue is with what Paul is proposing.  It is not that I won't be able to see things in the menu, just that the structure wouldn't be visible.  iF you're using lists, I think the best way to display that would be to nest them within each other rather than indenting them, or perhaps both can be done.  This way the screen reader will state that a list is nested within another list, therefore implying structure.
In reply to Urs Hunkler

Re: Moodle Navigation Suggestions

by Paul Tero -
Hi Urs,

Thank you for the link. This is quite powerful, and would be a great way to convert indentation into a menu for both visual and audio browsers. I wasn't clear however, whether the $navmenulist variable included indented items as nested lists or not.

For the course I am developing, I have very limited access to change server settings. All changes I want to make need to be approved, and need to have minimal impact on other existing Moodle courses. So I'm not sure it would help in my case, but I will test it in my own home installation when I get a chance.

Thanks and kind regards,
Paul


In reply to Paul Tero

Re: Moodle Navigation Suggestions

by Grigory Rubtsov -
These seems useful. I wish to add one potential improvement.

When student reads resource down to the bottom, he wishes to go to the next resource. So I think it is a good idea to put link to the next resource on the bottom of text. Like
Next: "Resource name"
In reply to Paul Tero

Re: Moodle Navigation Suggestions

by Mark Little -
Hi Paul

Any chance you can zip up the files you are changing I can't seem to get your coding to work..

Thanks
In reply to Mark Little

Re: Moodle Navigation Suggestions

by Paul Tero -
Hi Mark,

Attached are the changed files. I guess some of the line numbers might be out of sync - these much change fairly often.

I hope you find the files useful. Please backup your existing files beforehand just in case.

Kind regards,
Paul
In reply to Paul Tero

Re: Moodle Navigation Suggestions

by Dr. Amitkumar Mali -
Hi,
I am relatively new to moodle (as a course designer and moodle site administrtator) I want to use moodle for my Ph.D. study as a CMS for my content. I am using my local language pack (i.e. gujarati). I have created few cources but the biggest problem is my students got lost as they are familiar with traditional horizontal or vertical menu.
"Jump to " menu is quite easier for them but, some of my topic titles are too long, they does not appear complete in the menu. starting words do apear but after desplaying 2-3 words, it shows .... ( e.g. "gas-gas mixture examples" displays in 'jump to" menu is "gas-gas mixture ......" )

how to increase width of "jump to" menu?
Amit