Pages

Thursday, June 16, 2011

Tweaking Marginalia for better visual cues and feedback

Tweak the look-and-feel of Marginalia and you get a whole new visual experience.

Ever since my last post on Marginalia on Moodlenews, I'd been thinking about how to adjust the colour to suit (1) my Moodle theme; and (2) my own taste. I thought to myself, "Why not show the grammar mistakes in red, and the corrections is green?". Plus I really liked the red-bordered effect of the Marginalia demo.

Lately, I've managed to tweak and improve the colour scheme - at least for myself. For example, with due respect to Geoffrey Glass, whom I think did a great job with the block, I felt that the yellow highlighting in the default code was a bit too bright and slightly gaudy looking. So I changed the corrected text to be shaded instead as a rose-coloured highlight. How did I do it? Well, open up /blocks/marginalia/marginalia/marginalia.css and look for the code at line 7:

.hentry .entry-content em.annotation {
   background: #fdf377;
   font-style: inherit;
}

Change the hexadecimal colour code from #fdf377 (bright yellow) to #FFDFDF (rose) to achieve a different coloured highlight!

I also wanted to have, on a mouse hover, red-bordered error text, and green-bordered left-margin corrections. After all, what could be more logical and intuitive than to use red to symbolise errors and green for corrections. Thanks to Firefox's Firebug extension, I was able to "cross-examine" the actual code that was responsible for these colour effects. A special mention also goes to Geoffrey Glass for pointing me to /blocks/marginalia/annotation-styles.php which contains the code:

.hentry .notes li.hover,
.hentry .entry-content em.annotation.hover,
.hentry .entry-content em.annotation.hover ins,
.hentry .entry-content em.annotation.hover del {
   color: red;
}

Changing red to green would mean that both the grammatically-wrong text (in a student's post) and my correction text (in the right annotation margin) would end up as green. After almost an hour, I finally figured it out! Here's the same code split into 2 sections:

.hentry .notes li.hover {
   color: green;
   background: #ccffcc;
   /* By Frankie */
}

.hentry .entry-content em.annotation.hover,
.hentry .entry-content em.annotation.hover ins,
.hentry .entry-content em.annotation.hover del {
   color: red;
   /* By Frankie */
}

Eureka! So that's how I managed to get TWO colours (red for in-forum-post mistakes and green for margin annotation of corrections) with a single mouse hover! But wait, there's more! I really, really wanted to have text-box effect with the mouseover like what you can see in the Marginalia demo by Geoffrey Glass. So I examined Geoffrey's annotation-styles.php file. In the end, after much trial-and-error, I hit pay-dirt. Here's the code that I used to produce the red-box-and-green-box effect:

.hentry .notes li.hover {
color: green;
outline: 1px solid green;
background: #ccffcc;
}

em.annotation.hover {
color: red;
outline: 1px solid red;
}

For some strange reason, I had to remove the code
.hentry .entry-content em.annotation.hover ins,
.hentry .entry-content em.annotation.hover del
in order to achieve the desired effect. Strange and I don't understand why, but it works.

As a summary of my changes made (colour tweaking codes), you can download my tweaked annotation-styles.php and marginalia.css files from here:
http://scm.moodleace.com/file.php/1/public/annotation-styles.php
http://scm.moodleace.com/file.php/1/public/marginalia.css


Here's a screenshot after several hours work of tweaking the code:



So now, you can get the desired effect for your Moodle site in less time than it took me for mine.

Personally I'm having a absolute blast making margin-side corrections to my students' posts. I love seeing those red and green boxes light up when I do a mouseover. I'm also hoping that they (my students) are appreciating my side comments which are actually corrections of their grammar and punctuation mistakes. I hope you enjoy using and tweaking this useful block to suit your theme and colour taste.

This tool can be used not only for language teaching, but for any kind of feedback by the instructor. Lastly, I leave you with some interesting thoughts on Marginalia by Derek Chirnside over at Moodle Lounge.

Cheers!

Thursday, June 9, 2011

A gem of a tool for English teachers: Marginalia forum web annotation tool for Moodle 1.9 and Moodle 2.0.

Marginalia
Add web annotation to your Moodle forums! This is a great pedagogical tool, from 2008, for those of you teaching English. You can use the Marginalia Moodle plugin to type corrections to your students' forum posts.


Here's a Youtube video showing you the plugin in action. No audio, so don't bother turning up the volume knob on your speakers.


I discovered this tool when I was surfing to find if there was something that I could use that was even close to UK Open University''s web annotation system in their Moodle 2.0. Boy was I glad to find this gem from 2008.

Sunday, June 5, 2011

Adding video feedback to the Assignment activity

Hi. An important element of the Moodle assignment activity is feedback from the facilitator. Do you give feedback to students inside the Assignment activity? I don't know about you, but I personally find giving feedback a chore. Especially when one is bogged down with lots of paperwork and preparation. It shouldn't be a chore since quality feedback is very important to students' learning.

By default, Moodle 1.9's feedback section of the activity is text-mode. How many of you had at one point or other had wished that you could give video feedback? Well, the good news is that Kevin Brake has created a Forum Video Recorder that works inside Moodle forums. I am also happy to announce that I have used Kevin Brake's excellent code, some sleuthing and hacking of a Moodle 1.9.7 core file to enable video feedback within the assignment activity itself.















To give video feedback, you will need to:
1. use a working webcam (obviously)
2. install Kevin Brake's excellent Forum Video Recorder. For instructions on how to use it, click here.
    To know how to install it, click here.
3. have Java Runtime installed
4. have the QuickTime plugin installed. In case QuickTime gives your Wbb browser problems,
    download and install QuickTime alternative
5. insert some code inside /mod/assignment/submissions.php.
    To see the Moodle 1.9.7 file that I used, download the submissions.php file.

Ratings and Recommendations by outbrain