Totara LMS is our newest sponsor and supports the work of Frankie Kam as he explores the many possibilities of Moodle for fun and to improve his college’s course site.

I. Learning Outcomes

At the end of this post you should be able to know how to install Mark Ward’s  Autohide feature for your own Moodle 2.2 site. It’s so easy even a newbie can do it. See the Appendix section below. Disclaimer: I haven’t tested it on earlier versions of Moodle 2.x, and so any feedback on this is highly appreciated.

You will also be able to use the Autohide CSS work done by two Marks – Mark Ward, the original author, and Mark Johnson, who made modifications to Ward’s work.

II. The Tweet that started it all

If Shakespeare were to Moodle back in 1600 , he would have said the classic statement “To toggle Editing On or NOT to toggle Editing On? That is the Question!”.

That was the “question” in a lively discussion in Twittersphere in May 2010.  The  tweets were on a wish list of how to improve Moodle. In that Twitter discussion, Dan Humpherson, a British Moodle Designer,  tweeted a pertinent question:

That question and the tweets that accompanied it, led to a thought-provoking and challenging 4.5-minute video by  Zaid Ali Alsagoff*. In that short video (click below to play), Zaid, of International Medical University, contrasted Moodle’s user interface to Google Apps.

You can read about it in the MoodleNews.com May 2010 post. What is interesting is the series of  comments that followed. Not many blog posts elicit discussions at such a high-level of thought and introspection. If you have yet to  read the post, I highly recommend it to you.

The Moodlenews.com post and Dr Zaid’s video in turn, inspired Mark Ward, Web Application Developer of Burton and South Derbyshire College, UK. Mark looked at Moodle, Ajax and Google Apps and said to himself WHY NOT?

Mark then create a new editing mode for  Moodle 2.2 called Autohide. It is an editing mode that is simple to install, pleasing on the eye, and easy on the Moodle course administrator’s brain’s in-flow of  information. Autohide reduces the clutter when in Moodle Editing mode. Talk about a Moodle innovation.

So we have a connection of sorts. One starts the ball rolling, others pick it up and pick up the pace of innovation. After all, we are all connected through the Internet in more ways than one. There are lessons to be learnt here. For example, how many of us achieve things because of the work that someone else had started? And how useful is it to read old blog posts? I think that this is a classic case of looking backwards in history to move on forwards.

Kudos also to the prolific blogger-developer, Joseph Thibault who churns out post after post on his favourite LMS. Joseph’s Moodlenews.com is indeed an archive and a treasure-trove for all things Moodle.

III. Why De-Clutter?

Could Moodle do with this Autohide shot-in-the-arm? I think yes! In Moodle 1.9.15, I have this when hit the Turn Editing On button , this is what I get:

The editing icons are buzzing around like bees. Sure, only the Administrator can enable them on or off, but when you have a lot of resources on the page, it can be a bit … visually overwhelming.

Well, it’s not that different in Moodle 2.2 either.

Some say that Moodle newbies may gain from the display of icons.

“For those who are brand new to moodle, they may not exactly know how or what they can edit.  Having all options available seems to be better for newbies and experienced users may like the hiding”
(Chris Kenniburg, Mahoodle developer, US).

I concur with Chris. In my humble opinion, the plethora of icons  leads to information overload. Of course the Editing Mode is for Course Administrators, but in my classes many times I would reach for my mouse and hit that “Switch Role to Student” view dropdown selector. That  reduced the clutter of hidden activities and simplified the screen for my students who were viewing the LCD projector’s image.

This afternoon, I tried my hand at installing the Autohide AJAX  code on my Moodle 2.2 test site. I am happy to inform you that after more than a couple of hours of reading this forum discussion, I have managed to do the following:

1. Install Autohide successfully on several Moodle 2.2 themes (Binarius, Anomaly and Arialist);
2. Combine the best CSS features previously devised to autohide the clutter by two persons. Namely the author of the code, Mark Ward, and Moodler Mark Johnson;
3. Identify the problem plaguing my Moodle theme from enabling this feature;
4. Enjoy the ease of use that the Autohide feature has enabled.

IV. Now onto the Code itself!

I’ll cut to the chase now. Mark Ward‘s original CSS code shows a static border of marching ants (that’s an oxymoron  – sorry!) to indicate that the user is now in Editing mode. The fade out effect of icons as the mouse pointer moves over and away from the icons, is a nice touch by Mark Ward. Do you notice the repeated icons on the left and right of each section? That could be improved.

Next, we take a look at Mark Johnson‘s CSS code  solves the repeated left and right icons.  See below. Notice that only in the current mouseovered section has left and right icons appearing? Ah that’s an improvement. However, the static marching ants do not feature in this version.

 

I have created a fork of Mark Ward’s Github code that combines the best features of both versions of CSS. As a result, I believe that Autohide feature now, as of 8th April 2012, reduces clutter more than ever before. See below.

See the brown borders backgrounds bordered with dashes? That’s to indicate edit mode. A nice touch (thanks to Mark Johnson) is the effect of the left and right icons appearing ONLY on the currently selected  section! Ah, so now what we have is the best both Marks’ CSS code! Can it get any better? Maybe you can suggest an improvement. I’m all ears.

V. TURNING EDITING ON BY DEFAULT

I’ve got a sudden inspiration (lightbulb moment!). What if the user, with Editing rights/privileges, could login into his or her Moodle coursepage and have the Editing mode turned on by default? Moodle can easily be made to detect a user’s editing privileges. Well thanks to Martin D., you can enable this feature by following the instructions:

//Add this near the top of /course/view.php
if (!isset($USER->editing)) {
$USER->editing = true;
}

Combine the above code with Mark Johnson’s CSS, and Moodle is closer to where Zaid Ali Alsagoff was wishing it could become. That is,  the course page looks like it’s in  Turn Editing Off mode, but by default, it’s already actually  in Editing Mode. What do you think of this idea?

 

Here’s what my by-default-in-Editing-mode-for-the-Administrator site looks like with Mark Johnson’s CSS code enabled in the /mod/theme/aterburner/config.php looks like:

The course page  looks like it’s in Non-Editing mode until you mouse over a resource or a section. Is this something like what you had in mind for Moodle when you first conceived your video on Moodle and Google Docs, Mr. Zaid?

VI. Demo 

Don’t take my word for it! Instead, you can demo the system here:
http://moodurian.com/m2/course/view.php?id=3
Username: student
Password: student

Whoa! Afterburner Theme. Check out that F-22 silhouette. Watch your Six!

You now have Course administrator rights! Click the Turn Editing On button to see what it’s like. Please be gentle. Try it out. Move your mousey around and check out those Editing icons – or lack of them. If you don’t get excited by what you see, then I have failed in my Moodle duty.

VII. Some final thoughts

Mark Ward’s work makes me wonder why we didn’t have this feature earlier. It also makes me think of what other areas of the Moodle LMS landscape  we can transform to be more Facebook-like or for that matter, more Canvas LMS-like  (gasp) .

The Autohide feature is yet another element in the ever-growing list of compelling reasons to switch from Moodle 1.9.x to Moodle 2.x for existing Moodle production sites. Others being the Moodle 2.2’s Rubric, Davo Smith’s Drag-And-Drop interface and Open University’s new quiz question types for Moodle 2.1+ and many others. Perhaps Moodle HQ could consider adding the Autohide feature as part of core code in its next version of Moodle.

VII. Conclusion

In conclusion, I hope that you will find Mark Ward’s  Autohide code a useful addition to your Moodle site. I also hope that the Autohide feature will inspire others out there to ask  “Why not?” and to innovate Moodle to whole new level of user experience.

A very Happy Easter Sunday and keep on Moodling!

Frankie Kam
Melaka, Malaysia

 

---

APPENDIX

INSTRUCTIONS TO INSTALL THE AUTOHIDE FEATURE – CREDIT TO MARK JOHNSON FOR PIONEERING THE DOCUMENTATION PROCESS

Step1: Create the file autohide.css

Download Mark Ward’s original CSS code here. You will get a file named autohide.css.
To get the original version by Mark Ward, click here.
To get Mark Johnson modified version, click here.
To get the fusion version of Ward’s and Johnson’s code by Frankie Kam, author of this MoodleNews post, click here!.

---

Step2: Store the file autohide.css in the correct folder

FTP the file autohide.css to /theme/{themename}/styles/

---

Step3: Edit the theme’s config.php

Edit the file /theme/{themename}/config.php

Add just ‘autohide’ to the your theme’s config.php’s $THEME->sheets array (phew!), it should look like this:

   $THEME->sheets = array(
      'core',       /** 'core' here is just an example */
      'pagelayout', /** 'pagelayout' here is just an example */
      'autohide' /** <-- JUST ADD THIS LINE! */
   );

The items in the array of your theme’s config.php will most probably differ from   what is shown in the Step2. It’s really simple! All you need to do is to add ‘autohide’ to end of the list. For example, in the Afterburner theme, the $THEME->sheets array statement looks like this:

   $THEME->sheets = array(
      'afterburner_layout',
      'afterburner_styles',
      ...
      'afterburner_settings',
      'rtl'
   );

So just add a comma at the end of ‘rtl’ (in this example), and then insert the line ‘autohide’ as in:

   $THEME->sheets = array(
      'afterburner_layout',
      'afterburner_styles',
      ...
      'afterburner_settings',
      'rtl',     /** <-- Don't forget to add a comma here! */
      'autohide' /** <-- Here you go. Now how EASY was that? */
   );

---

Step 4: Test the Autohide

Refresh (F5) your Web browser. Go to your Course Page. Turn Editing on. The Autohide feature should work. If for some reason it doesn’t, say a loud “Bummer!”. Recollect yourself and try these steps:

Turn on Theme Designer Mode (TDM) from
Site Administration > Appearance > Themes > Theme settings.

The TDM is second  from top – tick its checkbox.  Save settings after enabling and then refresh the screen. Autohide should work after this. If it works, turn off TDM to speed up your Moodle Website.

If it doesn’t work, check Steps 1 to 4. If after this it still doesn’t work, you know what to do…shrug your shoulders and post a query on Moodle.org here. I am sure that some kind soul will respond. Some kind soul with a keen perspective of sharing code and helping others, all for the Greater Good of education and technology.
End of Tutorial

*Zaid is a leading international E-Learning Manager, based in International Medical University (IMU), Kuala Lumpur, Malaysia. He is also a member of the International Edubloggers Community and blogs regularly on education and technology. He’s not a Doctor yet, and at one time he was a married bachelor. To understand this, read here for a good laugh.