Soup up your Moodle Quiz with Javascript, CSS and JQuery magic (Frankie Kam, iMoot 2014, Super Session - South East Asia)

Here's my presentation at iMoot 2014. "How I enhanced the look and feel of the standard Moodle quiz to create a feature-rich quiz by using Javascript, CSS and a dose of JQuery".

Screenshot only.
Image shows the Main Title Screen.

This was my first iMoot. Had a hair-raising peroid when preparing my slides before the start of the online Conference (iMoot). My Moodle site's JQuery refused to work. Praise God, I managed to sort the problem only ten days before my session was due. It was a great experience presenting live to a global audience.

Screenshot only.
Me presenting live. Unplugged. With less hair on the top than Tintin,
and with more 'hair' on the sides than Princess Leia.

Here's my iMoot 2014 Video Presentation. Enjoy!



Many thanks to Wendi Kirwan-Elliott and Vinny Stocker of Pukunui for the invite. My presentation contains a visual joke at page 57. You have been warned. Total pages is 135 (only!). Note: The PowerPoint Presentation was temporarily taken offline, and is now online again. The last page of the presentation contains a Youtube demonstration of the souped up Moodle Quiz. You can view the Youtube video here: http://www.youtube.com/watch?v=57i3rhT-tKI

Frankie kam soup up i moot quiz with javascript css j-query (15th may 2014) from Frankie Kam

Presented by Frankie Kam at iMoot2014, on 18th May 2014.

The first two slides of the presentation were taken from a science-fiction movie starring Sigourney Weaver. If  you know the movie name, that would betray your age-range. :-)

Keep on Moodlin'
Frankie Kam

Font Awesome icons as PNG and JPG image files

Font Awesome is simply awesome! Many thanks to Favid Gandy for this font.

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.

Recently I managed to enable Font Awesome on my Moodle production site. The result is that I am now able to display Font Awesome CSS fonts on any Moodle resource or Moodle activity just by installing Julian Ridden's Font Awesome filter and by following his instructions here and here.

I've created two photomosaics of your images using the Font Awesome icons. This took me almost 30% of a whole day's work. I had to figure out how to automatically convert the Font Awesome icons into PNG files using Python (the toughest part!). Then I had to batch convert 378 PNG files into JPG format (only after a tough web search). Finally, I used AndreaMosaic to create the final mosaics using a combination of 2,000 repeating JPG images of the icons (the easiest part!).

Enjoy.

A photomosaic of the original image found here.

Here's a self-potrait done for fun!

Best viewed from a distance of 3 feet away from the monitor.

If it helps anyone, I've also created a zip file that has the PNG and JPG images of all 378 Font Awesome icons. I doubt if you can find the icons in image format anywhere on the Internet. Of course, Font Awesome, as a graphical font by itself has an advantage over the image format. Anyway for what it's worth, here's the link:
https://dl.dropboxusercontent.com/u/17797520/moodle/Font_Awesome_In_JPG_and_PNG_formats.zip

Regards
Frankie Kam

Tweak for Danny Wahl's Autohide for Moodle 2.x when using the Topics Format

If you're using Danny Wahl's Autohide creation with the Topics Format course format in Moodle 2.x, here's a tweak for the autohide.css file that allows the Settings icon to appear on mouse hover. Before this, I was using the Weekly Format and all was fine. Then I switched over to the Topics Format and suddenly I realised that there was no way to change a topic's description as the Settings icon refused to appear on mouseover!

What a strange phenomena. Upon further investigation, thanks to Sakshi Goel and Mary Cooch in this forum, I was finally able to solve this puzzle by changing this section of the code:

.section_add_menus, /* Add Resource/Activity dropdowns (2.2) */
.addresourcemodchooser, /* Add Resource/Activity Link (2.3) */
.editing .block .title .commands .icon, /* Block Title Controls */
.editing .block .content li .commands a, /* Command in block content (add resources/activities in Main menu) */
.editing .block .editbutton a, /* Edit button in custom HTML blocks */
.editing .section .side > *:not(br), /* Section controls (can't use 'a' b/c ajax uses 'span') */
.topics .section .content .summary ,
.editing .section .summary a:first-child, 
.editing .section .activity .commands > *, /* Individual activity and resource controls (can't use 'a' b/c ajax uses 'span') */
.editing .sitetopic > a {
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: opacity 0.5s linear 0s;
    -moz-transition: opacity 0.5s linear 0s;
    -ms-transition: opacity 0.5s linear 0s;
    -o-transition: opacity 0.5s linear 0s;
    transition: opacity 0.5s linear 0s; /* half-second fade in */
}

to

.section_add_menus, /* Add Resource/Activity dropdowns (2.2) */
.addresourcemodchooser, /* Add Resource/Activity Link (2.3) */
.editing .block .title .commands .icon, /* Block Title Controls */
.editing .block .content li .commands a, /* Command in block content (add resources/activities in Main menu) */
.editing .block .editbutton a, /* Edit button in custom HTML blocks */
.editing .section .side > *:not(br), /* Section controls (can't use 'a' b/c ajax uses 'span') */
.editing .section .activity .commands > *, /* Individual activity and resource controls (can't use 'a' b/c ajax uses 'span') */
.editing .section .summary a:first-child, 
.editing .sitetopic > a {
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: opacity 0.5s linear 0s;
    -moz-transition: opacity 0.5s linear 0s;
    -ms-transition: opacity 0.5s linear 0s;
    -o-transition: opacity 0.5s linear 0s;
    transition: opacity 0.5s linear 0s; /* half-second fade in */
}

.topics .section .content .summary {
   filter: alpha(opacity=0.5);
    opacity: 0.8;
    -webkit-transition: opacity 0.5s linear 0s;
    -moz-transition: opacity 0.5s linear 0s;
    -ms-transition: opacity 0.5s linear 0s;
    -o-transition: opacity 0.5s linear 0s;
    transition: opacity 0.5s linear 0s; /* half-second fade in */
}

Now the Settings (gear icon) symbol appears on mouseover as it should.

Yippee!!
You can download the tweaked autohide.css file from here.

Regards
Frankie Kam

Moodle 1.9 Custom Corners Theme for mobile devices by Yedidia Klein

Here's a quick question. How many Moodle 1.9.x themes do you know of that are specially designed for mobile devices? Forgive my ignorance, but I only know of one - Isreali Yedidia Klein's theme named "custom_corners_mobile". You can read about it here.

It is a modified JQuery version of the "custom_corners" theme for Moodle 1.9. You can download Yedidia's theme from here. After you have downloaded, extracted and ftp'ed the theme to your Moodle site, you can then add these lines to your config.php:

//Mobile Detection and theming
include("theme/custom_corners_mobile/mobile_functions.php");
if (ismobile())
  $CFG->theme="custom_corners_mobile";

After this, you can then browse your Moodle site via your mobile device.

Do you know of any other themes for Moodle 1.9 that cater for mobile devices? Please share in the comments section below.

Happy Moodling
Frankie Kam

Autohide Revisited - Reducing the clutter of "Turn Editing On"

As a Moodle administrator of a Moodle 2.4 site, you might be used to seeing the repetitive editing icons shown when your site is in the "Turn Editing On" mode. It's a common sight for a Moodle administrator and the icons provide sufficient visual cues for a newbie to administer a site.

Well, that's Moodle out of the box. Lots of useful
editing icons. It's just that you usually edit only one thing at a time.
NOW YOU SEE IT (THEM)......

Since March 2012, the generous, helpful and talented Moodle community has been perfecting the Autohide feature of Moodle 2.x (Autohide and that Move icon, 2013). It is now, in my humble opinion, a must-have tool for Moodle 2.3/2.4 administrators. Autohide hides the editing icons until a hover or mouseover is done. This, to me, makes a lot of sense since too many icons leads to information overload. I mean the mouse cursor can appear at only one location at a time. So why show all the editing icons at once?

Three ways to disable the "Show only one topic / Show all topics" icon in Moodle 1.9

Ever had this need?

In a topics-format course, the "Show only topic N" and "Show all topics" icons present a usability issue. Students who inadvertently click on them become confused when they lose sight of the the other blocks. It would be good if we could disable these icons, either at System or Course level, or perhaps through a new capability.
(John Isner from this Moodle tracker).

In this post I want to present FOUR ways of disabling the "Show only week N" icon

and its sibling, the "Show all weeks" icon.

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!