View PDF files in a ShadowBox pop-up window in the Essential Theme on your Moodle 3.0 site (works on all other themes as well!)

Source: Jens Peter Olesen,
Pixabay, CC0 Public Domain

Design. It's all about design. Today's post is  a sequel to my earlier post on the same subject. In that post, I enabled my PDF and ODF files to open in a Lightbox-like window, when clicked upon, in three themes: Evolve-D, Academi and BCU. I had used FancyBox and ViewerJS to achieve this. I couldn't get Fancybox to work with other themes.

The great news is that I have since discovered that ShadowBox (in place of FancyBox) works on Essential and Moodle 3.2's Boost theme. The installation is much easier, and I managed to optimise the look and feel of ShadowBox by tweaking its original CSS file.

Important Disclaimer and warning:
If you find that your Moodle version and Moodle theme causes your PDF file to load v-e-r-y slowly, or if your Google Chrome displays the "Out of memory" or "Aw snap" message,  then try using the FancyBox method that I blogged here instead.

Learning Outcome
At the end of this post, you will be able to hack your beloved and sacred Moodle site so that PDF files will open as pop-ups. That's all. Nothing earth-shattering. However, I strongly believe that my post today is going to touch lives and make a difference in your Moodle experience (XP). As well as your teachers' and students' Moodle XP. Read on!

Open and view a PDF file on a Moodle 2.9 coursepage inside a fully-featured pop-up window using Javascript. All without leaving the Moodle coursepage.

By Sean McEntee. Source: https://goo.gl/5vEpBI
Creative Commons License (Attribution 2.0 Generic (CC BY 2.0))

Hi All

1. Introduction

2. The Solution

I managed to make use of existing Javascript libraries to produce a PDF pop-up on my Moodle site. Here's what happens. I drag-and-drop a PDF file into my Moodle 2.9 coursepage. When I click on a PDF resource link, a fully-functioning pop-up window appears.

I've made it work on and for the following: iPad, PC, Android and Mac. I've tested it on IE, Firefox and Chrome. They all work.

How to view Microsoft Documents on your Moodle site the JQuery way (Part 1)

Microsoft Store. That's a nice logo. Source: http://en.wikipedia.org/wiki/Microsoft

Disclaimer: For Microsoft Office files (Word, Excel, PowerPoint) this only works with  files that are available publicly via a public URL. It won't work for Ms Office documents that are added to a Moodle course as a resource.

Ever since I started using Moodle as a file repository for the teachers and lecturers at my work place, I had always wanted to view Microsoft Word, Excel and PowerPoint files easily on my Moodle site. The easier and faster, the better. You know the story.

Figure 1. Many thanks to Davo Smith and others for
the time-saving drag-and-drop feature of Moodle!

Figure 2. What the file looks, sitting pretty on your Moodle coursepage.

Figure 3. Click on the Ms Word file, and Google
Chrome instantly downloads it. So this means I need to run Microsoft Office to view the file's contents.
Fine and good. Everyone does this. But what if I just wanted to view the file without any fuss?

Figure 4. Using Internet Explorer to access and download the Moodle file resource
invokes a Window prompt like this. Clicking on "Open" gives you...

Figure 5. ..this! You will need at least another two
mouse-clicks before you get to view the file.

So after uploading a Word file to your course page by dragging and dropping, each time you click on the file, depending on which browser you use, the file either gets downloaded instantly or you are prompted to either open the file or download the file. Why can't I just view the file there and then without having to invoke Microsoft Office ?

Enable the Lightbox effect for an image hyperlink in a Label resource on your Moodle site

Photo credit: Lightbox-1 via photopin (license)

Lightbox is a JavaScript library that displays images and videos by filling the screen, and dimming out the rest of the web page. The original JavaScript library was written by Lokesh Dhakar. The term Lightbox may also refer to other similar JavaScript libraries. Text is from: Lightbox (JavaScript) - Wikipedia, the free encyclopedia

In this post, I will show you how you can enable Lightbox for an image hyperlink in a Label resource on your Moodle site. The genesis of this post was the Blog Learning Rocks. Dan Roddy has written an average of one blog post a year for the last two years, and seven posts a year for the last six years. Which is not much, but this 2010 post of his has become my inspiration for today's post. In fact, thanks to Dan's post, I've also managed to enable the Lightbox effect on image files inside a Moodle folder resource! More on that later in another post on Moodurian.

Well, let's get started shall we?
Step 1: Surf to Dynamic Drive's Lightbox image viewer page.
Step 2: Download the file lightbox.zip
Step 3: Extract the contents of the lightbox.zip to your hard drive. You will see the folder named "lightbox" and its contents below:

Figure 1. Contents of lightbox.zip

• lightbox.js - the main script.
• lightbox.css - basic style and tricky PNG support.
• overlay.png - 80% opacity, black tile used to create shadow.
• loading.gif - mock status bar used in examples above.
• close.gif - 'X' graphic placed in top-right corner.

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:

The Moodle Wall just got better - My Christmas gift to the Moodle community. Merry Christmas!

The Moodle Wall just got better - My Christmas 2014 gift to the Moodle community. Merry Christmas!

Source: https://unknowncystic.files.wordpress.com/2011/12/xmas-gift.jpg

The Moodle Wall for Moodle 2.x just got better. Much better. And the best part is that, in the spirit of Christmas and Open Source, I am giving away the prized source code to all Moodle developers and students. For free. You are free to modify the source code as long as you give credit to two persons: Srivinas Tamada of India, and Frankie Kam of Malaysia. And as long as you fulfil a list of requirements from me. More on that list at the end of this post.

For now let me take you on a tour of the FIVE improvements of the Wall.

So what's so great about this version then?

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

Spice up your Moodle 2 frontpage by displaying category names as buttons with Alicia Wallace's Renderer

The course categories are nicely laid out as
buttons with text and images.
very nice!

Alicia Wallace of the United Kingdom has created something that changes the look and feel of the frontpage. Her creation is a renderer file with a custom CSS file for Moodle 2. It is based on the Sky High standard theme for Moodle 2.x. The image above shows the renderer in action on the frontpage of Hartpury College's Moodle site.

Making the Moodle User Interface Look Good

Cartoon by: Hugh McCloud

This post is dedicated to great resources on the Net on how to make your Moodle site look good.
I start off with an excellent post by Smarter Made Designs. Below is a PDF iframe embed of their article entitled  "Make Moodle Look Good using HTML- Quick Guide PDF".