Pages

Friday, May 1, 2015

A minimalist design approach to the Restricted Access resource as displayed on a Moodle course page.


Source: http://upload.wikimedia.org/wikipedia/commons/0/07/Taiwanese_Monk_at_the_Salar_of_Uyuni,_Bolivia.jpg
Note the clean whitespace around the monk? Very minimalistic, Zen-like and serene if you ask me.


Below is a file resource that has its Restrict Access settings set. It is grayed-out so that the user knows it is a conditional resource, and the critieria for its access is clear to all.
The displayed text "Not available unless: Your category is hq" means that the user cannot access (read) the resource unless his Custom Profile has been set to "hq". It serves a vital purpose and is useful when a student needs to be informed that a criteria needs to be met or score needs to be attained before he or she is allowed to access that resource.

In my humble opinion, I find the conditional text as intrusive to design of the course page. It does stick out and the eye cannot avoid it. I also think that sometimes the conditional text is redundant and would be better if it were not visible. For example, in the business context, some files may be made inaccessible to a user because the user is unconfirmed. He or she is still on probation. Hence, the Moodle administrator may want the staff to not click and access the resource, but only see the resource as being there on the course page.

The purpose of this post is to show you how to remove the conditional text. At the end of this post, your home will look like this:


Looks like that famous photo of Steve Jobs in his home with minimalistic furniture.
Photo by Benjamin Stockwell. Source: https://www.flickr.com/photos/kingbenny/5186217964/
License is Creative Commons Attribution, non-commercial use.

Okay, now seriously,  At the end of this post, your screens will looks like this:

How would you like to view a Moodle Quiz's Summary Of Attempt table in multiple column format instead of one long list

Source: http://en.wikipedia.org/wiki/Dead_Sea_Scrolls

This post is seventeen (17!) months in the making. Back then I was using Moodle 2.5. It took so long to do because back in November 2013, I was faced with the challenge of redesigning the Summary of Attempt table, but was easily defeated by the complexity of the quiz's renderer.php code.  Ah! Such is the agony of defeat. I found it too difficult to solve, so I left it by the wayside - only to re-attempt the problem in April 2015. You might say that the idea was gestating all this time. By the time I had the solution, which was on 29th April 2015, Moodle had evolved into Moodle 2.8.5. The feeling of the thrill of success is indescribable. Something to be savoured.

At the end of this post, you will be able to have your Moodle quiz display the "Summary of Attempt" in a whole new way, without the usual "scroll of death".

By default, the Summary Of Attempt table in a Moodle Quiz will display as a single column. So a quiz of 50 quiz questions will result in table that extends for most of the screen's height. Here's what my summary looks like with a quiz of 20 questions.

In the example above, I have to scroll all the way down to access and to click the "Submit all and Finish' or 'Return to attempt' buttons. Here's what the table looks like with 49 quiz questions!



Yikes! A long list is generated and I had to scroll all the way down the screen in order to click the "Submit all and finish" button. Now what happens when you have a quiz that consists of 60, 70, 80 or even 100 questions? Think about it.

Hmm.....now then...

Source: http://upload.wikimedia.org/wikipedia/en/d/d9/Thinking.jpg



...WHAT IF the table could be redesigned like the one below?


Firstly, the table is now divided into 3 separate columns. The questions snake up-down-and-left-to-right in fashion.  The question numbers are automatically and dynamically generated in their respective columns . In addition, the status of all unanswered questions are shown as red text so that the user has a instant visual cue.

Ratings and Recommendations by outbrain