Use Geoffrey Glass' Marginalia to annotate forum posts in Moodle 2.5+

Hi.

Remember Geoffrey Glass' Marginalia? The cool forum annotation tool for Moodle 1.9 and Moodle 2.0? I initially thought that it only worked with Moodle 2.0. I managed to get it to work in Moodle 2.5+ with some sleuthing and tinkering around. I think that it's a great tool for English tutors and teachers as you can annotate text and words within a standard Moodle 2.5 forum! It's great for (manually) correcting spelling or grammar errors in students' forum posts. 



Most of the code is Copyright (c) 2005-2011 Geoffrey Glass and the United Nations. Marginalia is one of those unique plugins that once you realise what you can do with it, you'll wonder why you never used it previously for your Moodle site.

Figure 1. Hooray! Got it working. Nice annotations with mousehovers!

which is pretty cool, except that when I click the edit or reply button on a post, the TinyMCE editor buttons do not show up, and the upload file's swf animated circle/windmill never stops. 

Figure 2. Hmm,I sinhk that somesinhk is not vorking, yah?

To solve both problems, I posted the problem on Moodle.org's developers message board. Jamie Pratt replied that the TinyMCE Editor and File Manager failure to load could be due to some Javascript error. He suggested that I use Firebug to examine the errors (if any).

I took Jamir's tip and installed Firebug 1.11.4 on my Firefox 17.0. When I got to the forum screen with the Marginalia annotations, I turned on the Firebug console with F12 and clicked on the Error tab. Sure enough something showed up:

Figure 3. To catch a Javascript error

"TypeError: margin.mouseleave is not a function".

Hmm....! mouseleave? I know mouseover, but mouseleave? So I Googled around.
Apparantly, according to http://help.dottoro.com/ljewsllu.php,
mouseleave() only works on Internet Explorer!

But I was using Chrome. Which kinda explained the problems. I then decided to prototype/experiment my way out of this problem and proceeded to change line 189 of file MoodleMarginalia.js from:
margin.mouseleave( function() { margin.removeClass( 'hover' ); } );
to
margin.mouseout( function() { margin.removeClass( 'hover' ); } );

Eureka. it worked. At last, my "Maginalia for Moodle 2.x" mission is complete!
Now both the HTMLeditor and File Manager load properly. 

Many thanks to Jamie Pratt for making this post possible!
Frankie Kam

Web References

http://webmarginalia.net/
https://code.google.com/p/marginalia/https://code.google.com/p/marginalia/downloads/detail?name=marginalia-m-2.0-b08.tgz
https://code.google.com/p/marginalia/downloads/detail?name=marginalia-demo-20090107.tgz
http://webmarginalia.net/http://www.moodlenews.com/2011/a-gem-of-a-tool-for-english-teachers-marginalia-forum-web-annotation-tool-for-moodle-1-9-and-moodle-2-0/
http://www.moodlenews.com/2011/marginalia-and-nanogong-co-existing-in-your-moodle-1-9-forums-a-match-made-in-heaven/
http://www.slideshare.net/cindy.xin/marginalia-enhancing-the-moodle-discussion-forum
http://moodurian.blogspot.com/2011/06/tweaking-marginalia-for-better-visual.html

Installation tips
1. First, extract https://code.google.com/p/marginalia/downloads/detail?name=marginalia-demo-20090107.tgz code to your server

2. Next, extract https://code.google.com/p/marginalia/downloads/detail?name=marginalia-m-2.0-b08.tgz code (YourMoodlesite/mod/forum files and YourMoodle/blocks/marginalia files) to your server
3. Apply the patch (or do the changes yourself manually) of https://dl.dropboxusercontent.com/u/17797520/moodle/marginalia_issue_36.patch
4. Apply the patch
https://dl.dropboxusercontent.com/u/17797520/moodle/marginalia-m.patch

5. Change line 189 of file MoodleMarginalia.js from:
margin.mouseleave( function() { margin.removeClass( 'hover' ); } );
to margin.mouseout( function() { margin.removeClass( 'hover' ); } );

6. Goto Site Administration | Notifications to install the marginalia block

7. Create a forum

8. Change the dropdown box to "Shared Annotations" (see Figure 1 above).

9. Have fun!

Download Marginalia code

The download RAR file consists of:

(1) Marginalia block with patched code (done for yar!)
Note: The code already includes the change of line 189 of file MoodleMarginalia.js from:

margin.mouseleave( function() { margin.removeClass( 'hover' ); } );

to:- margin.mouseout( function() { margin.removeClass( 'hover' ); } );
ALL DONE FOR YOU!

(2) /mod/forum code already patched for yar!

(3) /mod/forum original/vanilla/outta the box Moodle 2.5 code in case you mess up your forum code during installation. Just to be on the safe side, yah?

Me signing off now, and thinking that Marginalia for Moodle 2.5+ is one cool plugin for Teachers and lecturers who use Moodle for giving immediate feedback on students' forum work,

Cheers,

Frankie Kam

Postscript - More code, curtesy of Geoffrey Glass.

(1) In case list numbers (1., 2., etc.) appear inside the right annotation box, use this code to make the list numbers disappear:

.mia_margin li {
        list-style-type: none !important;
}

.mia_margin ol {
        list-style-type: none !important;
}

(2) To change the color or font size of the Quote ('') and Delete (x) right margin icons inside the right-annotation box, here is a sample code:

.mia_margin li .controls button {
    font-size: normal !important;
}

(3) To remove the Quote link that lies on the same line as "Edit | Delete | Reply"
go to the output_quote_button function inside /block/marginalia/moodle_marginalia.php. 
Making the function immediately return an empty string by starting it with: 

return '';

End

If you like this post or site
a small donation would be nice but would last only a day,
otherwise leaving a comment (or a compliment) below will last me a month!