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!

How to install the multi-platform PDF pop-up window on your Moodle 2.9.x/3.0 site.

Pop up! Source: Pixabay,
License: CC0 Public Domain;
See https://goo.gl/lAIF8x

Welcome to my Dummies' Guide for the Complete Dummy!

This guide will show you how to enable your Moodle 2.9 site so that if you click on a PDF file resource, a lighbox-like pop-up window will open. I made mention of this 'innovation' here.

A dumbed-down version of this guide is called the Idiot's Guide. But I haven't gotten down to doing it yet because I'm not a complete idiot. Yet.

Buy

I crafted this Guide because I am afraid that three months from now I might forget all the steps. Thus the Dummy is I. This guide is insanely populated with screenshots because it is a step-by-step guide for, like I said, Dummies.

A Dummies' Guide should be simple enough for any 'Dummy' to follow. All you need to do is to follow the steps and in the end you will be rewarded. I will hold your hand all the way through.

Learning Outcomes
At the end of this Guide, you will be able to

• install the PDF pop-up on your Moodle 2.9.x/3.0 site using one of these themes: evolve-D, BCU and Academi. Disclaimer: if you are using a different theme, I cannot guarantee that it work on your theme. I tried to get it to work on Essential, More and Clean themes. I failed. Maybe you can succeed where I failed.
• to experience the joy of seeing your students open up PDF files as a pop-up window on Moodle, on every platform and device known to man. After this you can sit back, relax and watch Netflix.

• to see a PDF, Text and ODF (Writer, Presentation, Calc) file open on multiple platforms in the same and consistent way. Check out the Slideshare presentation below. Drool.

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.

Seamlessly connect Moodle 2.9 to Wordpress with Simon Booth's LTI Connector plugin for Wordpress 4.2.2 and 4.2.3

Image by Adina Voicu of Romania.
Source: https://goo.gl/CNpZNx
License: CC0 Public Domain

Update on 4th August 2015
I've converted this  super-long post into a PDF file. You can also go to the bottom of this post for a Scribd embed version of this post.

How would you like to be able to launch into a Wordpress blog directly from within your Moodle production site? At the end of this post, you will know how to enable a Single Sign-On between your Moodle 2.9 site and your Wordpress multisite in a LAMPP environment. To put it simply, within Moodle itself, you will be able to launch into Wordpress directly using the same Moodle login details. For example, here I am at my Moodle 2.9 test page, before clicking on the External Tool activity:

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 ?

Embed a PDF file (and more!) in your Moodle course page by using ViewerJS. Cool!

Source: https://www.flickr.com/photos/degu_andre/5364417987/
André Gustavo Stumpf, some rights reserved.

If you ever wanted to embed PDF files inside your Moodle 2.x course page, but didn't know how to, look no further than the uber easy-to-use ViewerJS.

At the end of today's post, you will be able to view PDF files and Ms Office files direct off your Moodle course page. How? Read on!

1. Download the Javascript zip file from here.
2. Unpack the file on your computer. You will see a folder named 'ViewerJS'.
3. Upload (FTP) that folder to your webserver, preferably to www.domainname.com/moodle/ViewerJS
3. Upload one or more PDF documents to your webserver, preferably to a custome folder named pdfs. E.g, at the location www.domainname.com/moodle/pdfs
4. Create a Label resource with the example HTML code below

The softcopy code is given here:

Enable the Lightbox effect for an image file inside a Folder resource on your Moodle site

Folders by Colleen  Galvin, on Flickr
Source; https://www.flickr.com/photos/col233/7974661195

I am having fun implementing the Lightbox javascript effects on images on my Moodle site. It was just yesterday that I realised that I could upload image files into a Moodle folder resource, but when I clicked on an image file, the file downloaded instead of loading up on-screen. It was then that I decided to see if I could make a clicked file link open up on-screen with the Lightbox effect. I am happy to say that I have succeeded to do so, albeit with a hack or two.

Here is my Moodle folder resource.

Figure 1. A normal-looking folder containing 2 image files, 1 text file and 1 Ms Word file.
Nothing out of the ordinary here....

Figure 2. What happens when the file itec2015-1.png is clicked.
Whoa! It's a lightbox image effect. Click the 'x' to close.

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:

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.

How to selectively hide individual files that are contained inside a Moodle folder resource

Pixabay. License: CC0 Public Domain.
Free for commercial use / No attribution required

Does the structure below look familiar to you? Have you ever used a Folder resource in Moodle? If you have then you will know that you can hide an entire folder by restricting access. However, you cannot selectively hide and show different files within the folder.

Can you hide just the file named GA01 Ver1.0 Service Tracking Form.pdf from the tree? I think not!

In Moodle 2.7.2 until Moodle 2.8.5, you are not able to hide from view, an individual file that is put inside a Moodle folder resource. However, I needed to to this. Desperately. Thus I sought to find the answers on Moodle.org. Alas, no one had come up with an answer. Only questions.  I threw myself into the work with gusto. After four days, I had cracked the problem. I am sharing my solution in this post. 

The Learning Outcome of this post is you will know how to hide from a user, individual files inside a Moodle folder.

How to display more than the default 30 users in "Browse List of Users" in Moodle

When you do browse the list of users in Moodle, the users will be displayed in groups of 30 by default.

If you wish, yu can increase this by hacking the numeric value inside /admin/user.php like so:

Hope you find this hack useful. Many thanks to Mark Sharp for his tip in this post on moodle.org.

Cheers,
Frankie Kam

How to add the username as an extra column in the "Browse list of users" table in Moodle

Source: http://upload.wikimedia.org/wikipedia/commons/f/f6/NavigationPopups_Usernames-10.png

By default, Moodle does not display the user's username as on of the columns in the "Browse list of users" list. See the image below. This is for privacy reasons.

However, there can be times when it is needful for the Moodle administrator to have the usernames appear. For example, the administrator could make it mandatory for all usernames to be the same as the user's corporate or institute E-mail address. And the administrator would like to verify that this rule has been adhered to.

I was surfing for a way to do this for my Moodle 2.7 production site, when I stumbled upon this post in Moodle.org. At the end of this post, you will be able to add the username as an extra column in the Browse list of users list.

Here's how you do it.

Customising Moodle2Word to generate simplified multiple choice question Ms Word pages

Source: http://commons.wikimedia.org/ [http://goo.gl/Xlzzy4]
(by U.S. Navy photo by Mass Communication Specialist 3rd Class Charles Oki [Public domain], via Wikimedia Commons)

If you a teacher who uses Moodle and the quiz activity, you might be spending quite some time in crafting hard-copy quizzes or exams. 

I am using Moodle2Word (Version 2015040201, release  3.1.4 (Build: 20150402)) on my Moodle 2.7.x site. Today's post is an update of my earlier blog post on a Moodle 1.9 version of the Moodle2Word plugin.

After three days of hard work, I have managed to a hack on the mqxml2word_pass1.xsl file. What my hack does is to change the output of the Question-Bank-exported-MsWord file.

Exploring the use of TeamSpeak with your Moodle course

Hi. 

I am exploring the use of voice-casting software in Moodle, specifically TeamSpeak. Why? Simply because many Digital Native users of Moodle are teenagers with experience in Gaming and TeamSpeak. So it's just another way to engage the digital native on their own turf, so to speak.

So what exactly is TeamSpeak? TeamSpeak is proprietary voice-over-Internet Protocol (VoIP) software that allows computer users to speak on a chat channel with fellow computer users, much like a telephone conference call. A TeamSpeak user will often wear a headset with an integrated microphone. If you are interested to know more, click here for a great introduction and review of TeamSpeak.

If anyone is interested, you can try out TeamSpeak3 at my newly created free 7-Day Trial TeamSpeak3 server.

I went here to get my free 7-day-trial TeamSpeak 3 Server. If you want to rent a TeamSpeak3 server, you can also go here.

Wall for Moodle User Guide – Text-Only-mode Edit Box (Pt.1)

Hope you find this useful.

Wall for Moodle User Guide – Text-Only-mode Edit Box (Pt.1)