Advice on using HTML Block as a menu

Advice on using HTML Block as a menu

by Mike E. -
Number of replies: 17

I am relatively new to Moodle and I need some advice/direction on using the HTML Block to build navigation menus.

Here's the existing course I'm trying to replicate in Moodle:

I am trying to replicate the left-hand menu system of this course, and I've chosen to use HTML blocks as the easiest method. Below is a sample HTML block that I'm trying to recreate in Moodle. The sample menu is from the Motivation section.

Motivation Menu
> Unit 1. Introduction
> Unit 2. What Is Motivation?
> Unit 3. Analyzing Motivation & Goals
> Unit 4. Useful Goal Characteristics
      - Keeping A Motivation Journal
      - Analyzing Motivation Goals
      - Writing Your Eulogy
      - Personal Goals
      - Academic Goals
      - Social Goals
      - Occupational/Professional Goals
> Unit 5. Developing Useful Goals
> Unit 6. Self-Efficacy
> Unit 7. Attributions
> Unit 8. Internal & External Motivation
> Unit 9. Summary

Unit 4 Useful Goal Characteristics shows seven sub-topics, Keeping A Motivation Journal, Analyzing Motivation Goals, etc. Each of these sub-topics will refer to a page in Moodle, and each of these seven pages will have an HTML block that contains the same menu items.

It seems counterintuitive to have to recreate seven different HTML blocks so the menu can appear on each of the pages. It seems to make more sense to have one HTML block and then include that block on each of the pages. If a change to the HTML block must be made, it would seem more logical to do it in one place rather than on seven different pages.

This example is just one small section of the Moodle course. As you can see there are eight other Units that will have their own sub-items. I also have nine other major content areas that will have their own units and sub-items.

There must be a better way to reuse an HTML blocks. Any advice would be very much appreciated.

Thank you,

Mike

Average of ratings: -
In reply to Mike E.

Re: Advice on using HTML Block as a menu

by Itamar Tzadok -

You can generate the block content (ie the menu) by javascript I which case you need only call the same js file, from an html block, in each one of the courses you want to display the respective menu. Changes to the menu would be made in the js file and populated to all referencing blocks. smile

Average of ratings: -
In reply to Itamar Tzadok

Re: Advice on using HTML Block as a menu

by Glenys Hanson -

Hi Mike,

Have you thought of using the Book module for presenting your content? It's easy to have "Chapters" and "Subchapters". Here's a link to a simple one (no subchapters): Instructions for the interactive grammar exercises Book

Cheers,

Glenys

 

Average of ratings: -
In reply to Glenys Hanson

Re: Advice on using HTML Block as a menu

by Itamar Tzadok -

But you can't add activities to book chapters other than by static urls.

The point is that Moodle's course page is already a sort of book. It just that the means for editing this book are not very good yet. smile 

Average of ratings: -
In reply to Itamar Tzadok

Re: Advice on using HTML Block as a menu

by Mary Cooch -
Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Testers Picture of Translators

I'm a bit confused by what you are wanting to add to your left hand menu. Are you wanting to link to specific sections of the course - I mean, topic sections? In which case, Moodle will do that already in its own navigation block. Or are you looking for a menu that links to different courses?

Average of ratings: -
In reply to Mary Cooch

Re: Advice on using HTML Block as a menu

by Itamar Tzadok -

I think the latter is the crux of Mike's query.

As an aside, I find the Moodle navigation block too enthusiastic and consequently quite convoluted. I prefer to hide it altogether and create my own customized menus. Of course, my issues may not apply to Mike. wink

Average of ratings: -
In reply to Itamar Tzadok

Re: Advice on using HTML Block as a menu

by Mike E. -

> As an aside, I find the Moodle navigation block too enthusiastic and consequently quite convoluted. I prefer to hide it altogether and create my own customized menus. Of course, my issues may not apply to Mike.

I would be interested in your own customized menus, Itamar. How would I implement something like that?

Thanks,

Mike

Average of ratings: -
In reply to Mike E.

Re: Advice on using HTML Block as a menu

by Itamar Tzadok -

Which Moodle version do you have? smile

Average of ratings: -
In reply to Itamar Tzadok

Re: Advice on using HTML Block as a menu

by Mike E. -

I'm using 2.1.

Mike

Average of ratings: -
In reply to Mike E.

Re: Advice on using HTML Block as a menu

by Itamar Tzadok -

One quick javascript solution is the following.

In an html block, html mode, enter something like:

<div id="myCustomMenu"></div>
<script type="text/javascript">
YUI().use('node-load', function(Y) {
    Y.one('#myCustomMenu').load('http://url-to-a-file-with-html-of-the-menu.html');
});
</script>

The html file can be a file in moodle's file system, e.g. in a folder resource. In any case the url should be accessible from all the places which reference it. Then you can modify a local copy and upload/overwrite the one on the web/moodle-file-system and the change will be reflected througout. hth smile

Average of ratings: Useful (1)
In reply to Itamar Tzadok

Re: Advice on using HTML Block as a menu

by Sam Thing -

Hi itamar,

Is the moodle version number important? I tried your code on 1.9 but with no joy.

Thanks, Sam.

Average of ratings: -
In reply to Sam Thing

Re: Advice on using HTML Block as a menu

by Itamar Tzadok -

Yes but you can easily remedy. The above code requires YUI3 which is included in Moodle 2 but not 1.9. So you need to include YUI3 and you can do that by adding

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>

right above the code.

See if this works for you. smile

 

Average of ratings: Useful (1)
In reply to Itamar Tzadok

Re: Advice on using HTML Block as a menu

by Yvonne Hamilton -

We don't want to use the navigation block as it is too clunky but need to link/access the quiz statistics reports http://....../mod/quiz/report.php?id=12345&mode=statistics

we can access the overview report (....&mode=overview) without the use of the navigation block but our staff don't want to have to change the url text to mode=statistics to get the quiz stats to display.

I was hoping to create a HTML block that could be add to all the quiz edit pages or similar that could jump to the mode=statistics information without having to hardcode in the individual unque quiz id's into each block. I am thinking it could auto find the relative quiz id path of the URL by looking at what quiz the user is currently viewing/accessing http://....../mod/quiz/report.php?id=AddIdHere&mode=statistics  and just add it. Is it possible?

 

Average of ratings: -
In reply to Mary Cooch

Re: Advice on using HTML Block as a menu

by Mike E. -

Hi Mary,

In my left-hand menu, I'm wanting to link to specific pages within a topic and also to orphaned pages that are hidden from the student. When I let Moodle automatically create the navigation blocks, they is way too long, kind of messy looking, and not very intuitive.

My goal in creating a custom HTML navigation block is to have them appear nicely formatted with the exact titles I want. The problem I'm having is that I have to create the same HTML block to appear on multiple pages within a topic (and also on orphaned pages).

> Or are you looking for a menu that links to different courses?

No, I'm not linking outside the course just to other pages within the same course.

Thanks,

Mike

Average of ratings: -
In reply to Glenys Hanson

Re: Advice on using HTML Block as a menu

by Mike E. -

Hi Glenys,

Thanks for your suggestion of the Book module. I looked into this but it had some limitations (I can't remember exactly what they were at the moment). I like your grammar exercises example. I may explore the book option further if the other roads lead to dead-ends.

Thanks,

Mike

Average of ratings: -
In reply to Itamar Tzadok

Re: Advice on using HTML Block as a menu

by Mike E. -

Hi Itamar,

I'm not sure how to implement a js solution. Would I place a snipit of code in the block that will include the menu source code? Can you give more details about how this would work?

Thanks,

Mike

Average of ratings: -
In reply to Mike E.

Re: Advice on using HTML Block as a menu

by Rosario Carcò -

If you need a dynamic block showing the whole site's navigation in Moodle 1.9 use my own siteNavigation block. This one can be combined with my own myCourses block. Search for both in these forums.

Rosario

Average of ratings: -