Moodle with a durian flavour. From Malaysia with love.

My First Chrome Extension - Chess FX

noreply@blogger.com (Unknown) — Tue, 21 Jul 2026 03:00:06 +0000

My First Chrome Extension - Chess FX

Have you ever dreamed of substituting chess.com audio sounds (e.g. check, checkmate, your move, your opponent's move, low time, end of game, premove etc.) with your own customized audio mp3 files? I know I have. A few Chrome extensions already do this but are limited in how many sounds you can customize.

Have you ever wished that you could hear an audio play when something significant or noteworthy happens? Imagine losing a game and when you are down 12 points of material, your opponent manages to stalemate you, and you hear "Stalemate!!! How did that even happen???". Imagine hitting an all time high blitz rating of 2100 and you hear an voice exclaiming "Way to go! You hit a new best rating of 2100 in Blitz!". Or what if you were almost forever stuck at 995 and suddenly you won and heard this audio play "Wow! Amazing! You hit a new milestone! Congrats!"

So about three weeks ago, I practically downloaded every Chrome extension there was that allowed me to play my own sounds....well I wasn't satisfied. So I did the next thing. I created my own Chrome extension. Imagine no more.

ChessFX is a highly customized Chrome extension that transforms the Chess.com playing experience with a rich library of custom sounds, announcements, visual effects, and intelligent in-game triggers. It replaces or supplements standard board sounds for moves, captures, checks, castling, promotions, premoves, game starts, results, time pressure, draw offers, rematches, and many other events. It can also react to specific chess situations such as streaks, rating milestones, tactical motifs, opponent strength, flags, abandonment, and unusual game outcomes.

The extension includes a live session HUD that tracks performance across a playing session, including wins, draws, losses, streaks, rating movement, game duration, and other useful statistics. Its Options interface allows individual features to be enabled or disabled, while the Review tools add extra audio feedback for accuracy, brilliant moves, missed checkmates, and related post-game analysis events. ChessFX also uses custom popup graphics, cursor effects, monochrome loss effects, and specialized result presentations to give each game a stronger sense of drama and personality.

At its core, ChessFX is designed to make online chess feel more immersive, expressive, and entertaining without changing the actual rules or gameplay. It combines chess awareness, event detection, audio sequencing, interface customization, and performance tuning into one extension that adapts to live games and Game Review separately. The project has been refined through repeated testing and debugging so that its many features trigger at the right moment, avoid unwanted overlaps, and remain configurable for different playing styles.

This Chrome Extension is available at https://chromewebstore.google.com/detail/chessfx/miidnmdfockkeccigdkimccakihccjkd?hl=en

Dummies Guide: https://bit.ly/ChessFXv162UserManual

Regards
Frankie "Durian Defense" Kam
Contact me for more details:

Email: boonsengkam@gmail.com
WhatsApp: +6011-2001 1429
25/7/2026

P.S., if you are ever in Kuala Lumpur Malaysia on a lazy Saturday afternoon, I am the organiser of the Blitz Chess Meet Friends group. We meet every Saturday from 3pm to 6pm at Tedboy 51a. Do contact me if you want to join in the group to play casual chess. We also have a WhatsApp group with 380+ participants as well.

Update circa 3rd August 2026, 11:30am Kuala Lumpur time.
I have updated the build to version v2.4.129
ChessFX from now onwards will be known as One Leg Kick (1LK) chess extension
I have submitted it for review to Google's Chrome Library, it should be published in a few days time.

HOW I USED PCem TO CREATE A VIRTUAL 486 PC. Now I can enjoy playing Tornado on it!

noreply@blogger.com (Unknown) — Wed, 08 Mar 2017 09:18:00 +0000

Tags: virtualisation, PC emulation, reviving them olde dead games, PCem, DOSBox, Tornado flight sim, high fidelity sound, pure Voodoo graphics, leave your dusty outdated PC in the attic, maximum coolness, extreme awesomeness

EXECUTIVE SUMMARY
I don't have my own 486 PC. The last time I used one was in 2002. I couldn't play lots of old games on my modern PC. So I created a virtual 486 PC on my 64-bit Windows 10 Dell laptop. Now I can play any old DOS or Windows95/98 game on my Intel i5-4210U, 1.7Ghz, 8Gb RAM Dell laptop.

Here's the thing. You've got lots of CDs of old games, but you can't play them because they can't and won't run on your modern machine. Short of downloading the revived versions from Steam or GOG.com (that's is if they are there!), there is another way. PCem.

Today I figured out how to use PCem to play the old DOS and Windows flight simulators in their native environment. Woo hoo!

I'm talking high-fidelity Soundblaster sounds and music, accurate CPU cycles as per the actual PC BIOS and motherboards. I'm talking about Voodoo1 and Voodoo2 3Dfx rendering of graphics (better than what any 3Dfx software Glide Wrapper can do). In short, I can create my own virtual 486 machine with all the trimmings (devices and drivers) so that I can play classic DOS and Windows games with the authentic 1990s aural and visual experience!

PCem is a PC emulator that's been around for some time. After lots of poking around, I managed to setup up virtual machine (emulator) running on MS-DOS 6.22 bootable disk and Windows 95. The MS-DOS bootable disk is for playing DOS games - especially Tornado which needs at least 605 kilobytes of free conventional RAM. The Windows 95 mode is for running Mig Alley and other dinosaur Windows flight simulators that modern computers abhor.

Using PCem, I emulated a 486DX/2 40Mhz machine. That was expensive state of the art back in the early 1990s.

Here are some screenshots of my efforts. PCem running on my Windows 10 laptop!

Windows 95 running in all its glory on my desktop. To run in MS-DOS 6.22,
I have to attach the MS-DOS 6.22 boot disk image file, just before Win95 kicks in.

Tornado running merrily along. An external view.

For more of this madness, read more here.

Cheers
Frankie Kam

Creating Cinemagraphs using Microsoft Blink Cliplets -

noreply@blogger.com (Unknown) — Sun, 08 Jan 2017 08:18:00 +0000

Welcome to my first post of 2017.

Cinemagraphs are basically animated gifs created using Videos. Cinemagraphs are still photographs in which a minor and repeated movement occurs, forming a video clip. They are published as an animated GIF or in other video formats, and can give the illusion that the viewer is watching an animation.

Here are some Cinemagraph GIF files that I have created.

Screenshot 1. A discussion - 194 Kb GIF file

Screenshot 2. Digital Integration's Tornado - WSO station (225 Kb GIF file)

Screenshot 3. Digital Integration's Tornado - WSO station again (223 Kb GIF file)

A Cinemagraph makes the GIF file come alive! You can select just a small portion to animate whilt the rest of the screen is static. As in the Screenshot 1.

Here's the best part of a Cinemagraph. It's file size is smaller compared to an animated GIF of the same content. Look at Screenshot 3. An animated GIF of the same countent would be at least 2 Megabytes in size. The Cinemagraph is a 10 times smaller than the animated GIF. Using a Cinemagraph on a web page would lead to faster load times of a webpage, compared to a bloated animated GIF.

Here is the link to download the Cinemagraph program (free by Microsoft)

https://www.microsoft.com/en-us/store/apps/blink-cliplets/9wzdncrfjb2b

Here is the link to other examples of cinemagraphs

http://www.hongkiat.com/blog/cinemagraph/

Cheers
Frankie Kam

Play Digital Integration's Tornado on your iPad Air (and any DOS game, for that matter) and on any iOS device

noreply@blogger.com (Unknown) — Mon, 21 Nov 2016 05:19:00 +0000

Source: Nobbby. Pixabay CC0 Public Domain
https://pixabay.com/en/ipad-apple-silver-tablet-touch-1177347/

I just discovered how to play Digital Integration's venerable 23-year old DOS game Tornado on my iPad Air. I used iDOS 2 and the iExplore app. Check out these screenshots. The game runs well on my 2014 iPad Air. And it will also work on your beloved iPhone. Well, any device running iOS.

Screenshot 1: iDOS 2 when my iPad is held in portrait orientation

Screenshot 2: iDOS 2 when my iPad is held in landscape orientation
The problem here is no matter what opacity setting you choose for the virtual keyboard,
you can hardly make out the game's cockpit graphics because of the way the virtual
keyboard is overlaid on top of the game.

Screenshot 3: Operation Desert Storm in portrait orientation.
Rats! Where are the Home, PgDn and PgUp keys?

What does this mean? Well imagine introducing the classic DOS games and programs to a younger generation of gamers who have never touched DOS. Do you know of any educational DOS games that can be used in the classroom? Well, now you can play them on your iPad. Think of all the possibilities.

More details on my Tornado forum post at The Dogs Of War Virtual Unit. In future, I will provide a detailed screen-by-screen dummies guide how you too can sideload DOS games into iDOS 2 so that you can play and enjoy the classics of the 80s and the 90s.

The ideal way to play Tornado on the iPad!
(1) Virtual keypad is showing; (2) Screen is mini-fullscreen
(activate the mini-full screen by tapping that "arrow-inside-the-rectangle" icon
that is on the left of the CPU cycle green florescent numbers.
You hit the fn key (see bottom-left of the screen) to make the top row of keys alternate between
function keys (f1, f2, ... f12) and normal number keys (1. 2. 3, ...0)

What are the pros and cons of this 'madness'?

Pros:

Nostalgia! You can relive the glory days by playing your old DOS games;
Many DOS games are now available for free from, ahem, abandonware sites;
You can copy your GOG games over to your iPad and enjoy them on the run
Your iPad's battery life will ensure a longer play than, let's say, you laptop without a power adaptor;
You don't need to lug that laptop around with you anymore.

Cons:

Unless you have a large-screen giant iPad, the screens shown above are teeny in comparison to what you can enjoy using a PC and an external LCD monitor;
With regards to simulating mouse clicks, iDOS 2 doesn't employ direct touch or absolute tracking. It uses relative tracking instead. It would be nice if iDOS could use the more natural 'where-I-tap-on-the-screen-there-the-mouse-is-left-clicked' method.
The virtual joystick is no match for a physical joystick
The virtual mouse is no match for a physical mouse

If you can't wait for my screen-by-screen post, you can always contact me via my E-mail address of boonsengkam at gmail dot com and I will be happy to share with you the 'secrets'.

Regards
Frankie Kam

YouTube video of iDOS2 running on my iPad:

Make a Play Once Only question in a Moodle quiz with Justin Hunt's PoodLL Repositories plugin

noreply@blogger.com (Unknown) — Wed, 28 Sep 2016 08:08:00 +0000

Image credit: Username Coffee.
https://pixabay.com/en/microphone-stage-sound-1222302/

I am using Moodle 2.7.2 for one of my quizzes. I also use Justin Hunt's excellent PoodLL repositories to make "Play (Listen) Once Only" recordings that I include inside my Moodle quiz.

The repository has a play-once audio player that looks like this:

If you ever wanted to make listening-type Moodle quiz questions, then read on!

IMPORTANT
Please note that the "play-once" is disabled only on the current page. So if the student reloads the page or something, then they can re-listen. So its good for test simulation, but not especially robust for actual tests.

With that important note out of the way, here's the series of steps I use to do this.

Step 0. Install the PoodLL Filter. The PoodLL filter enables audio and video recording in Moondle, and allows you to put widgets such as stopwatches and whiteboards into HTML areas. It is a pre-requisite plugin for the PoodLL Repository.

Step 1. Install the PoodLL Repositories plugin.

Step 2: Create a repository instance and click on settings (see below).

Step 3. Change the setting to AudioRecorder (MP3 Standalone) if you can't get it to work.

Step 4. Create a Multiple Choice Question as normal. Type in your instructions and question text, then click (create an insertion point - your cursor will flash on and off there) somewhere inside the question text, then click the "Media" icon (circled in yellow).

Step 5. When the Insert Media window pops up, click Browse Repositories.

Step 6. In the File Picker window, click the PoodLL_Repo_Instanc link on the left.

Step 7. When the Adobe Flash Player Settings pop-up window appears, click "Allow" and "Close". Do not click "Next >>" yet!!

Step 8. For this step, make sure you have a headset plugged into the laptop. Or you might be able to make the recording without a headset - by using the laptop's inbuilt microphone. Make your recording: Click Record. Click Stop. Click Play (to check if it actually recorded!). Your recording will go through a "converting" and "uploading" process (you will see an animated daisy-wheel spinner image during these two processes).

Then click the "Next >>>" button to continue.

Step 9. The File picker will now present you with a set of players. Do you see the Once Player?

Select the Once Player player!

Step 10. Click Select this file.

Step 11. Click Insert Media to insert the MP3 player link inside your quiz question.

Step 12. You will see the link to the MP3 file appear at the insert point of your Question Text.

Save your quiz question. You can either preview it or test it out inside the Quiz itself. Now assuming all went well, you should see something like this:

In the example above, I will click the player's start button.

As the audio plays, the text "Playing" will appear.

Once the audio reaches its end, you will see the word "Finished"....

...and lo and behold, the button is grayed out! The poor helpless student will not be able to re-listen to the recording. Why is the Instructor so cruel to only allow one listen? Woe betide any student if he or she was daydreaming about the latest smartphone, music idol, pokemon monster or whatever. Now he or she will have to leave the right answer to chance!

Hope this help heaps and heaps.

Regards
Frankie Kam

Easily enroll multiple students on WordPress into your purchased Moodle course with the Edwiser Bridge-Bulk Purchase extension

noreply@blogger.com (Unknown) — Sat, 17 Sep 2016 04:33:00 +0000

Bulk Purchase. Credit: Alexas_Photos.
Source: http://goo.gl/0T7ajs

Welcome to my fifth and last post in a series of five posts featuring the Edwiser Bridge and its four extensions. Today I will focus on the Edwiser Bulk Purchase Extension, which is a commercial plugin. The best thing about this plugin is that you can now let your administrator or manager purchase more than one quantity of a Moodle course in a single transaction. If that's not good enough, the extension allows the Instructor or Manager to enroll himself and others to the purchased course!

Screen 1. The Edwiser Bulk
Purchase Extension icon.

So, in short, this extension allows instructors, parents, managers or corporate trainers to purchase a Moodle course on behalf of others, and then enroll them. This extension will save you effort and time. Please note this extension requires the WooCommerce Integration extension to be installed first.

Section 1. Overview

Screen 2. The Big Picture.
Where the Bulk Purchase Extension fits in the E-Commerce system.

How useful is this extension? VERY! Imagine that you are an Administrator who is given the responsibility of purchasing a Moodle course online. You have ten (10) students to enroll into the course that costs USD100 per person. Which would you prefer? To pay USD100 once for every student that you enroll - which means you have to repeat the online payment and enrollment process TEN times? Or to pay USD100 x 10 = USD1,000 once, and enter all ten students' account data, and then have all TEN students' Moodle account created automatically?

Obviously the latter as it saves you time and effort. With Edwiser's Bulk Purchase Extension, you can make a bulk online payment for a course for multiple students. and have those students login into Moodle and start off the course. With the extension this is an almost painless process and a breeze to use.

Section II. License Key Activation

Once you have downloaded, installed and activated the extension (plugin), a new entry for 'Bulk Purchase' will be created in the Licenses tab of the Edwiser Bridge settings.

Go to Dashboard | Edwiser Bridge | Licenses

You will need to copy and paste the license key into the "Edwiser Multiple Uses Course Purchase' edit box. Then click the "Activate License" button.

Screen 3. The license key for the Bulk Purchase extension.
The screen shows that this extension has already been activated for the website.

Section III. Walkthrough

Below are a series of screenshots that illustrate a process of me buying a WordPress (WooCommerce) product - a flight simulator joystick - that is associated with a Moodle course - "How to use a joystick for air combat maneuvers". I will pretend that my name is Johnny Appleseed, and I am purchasing the product/course for two users. Their names are Kuala Aloha and Rio Carnival. In the process, I will make an online payment (not actually shown) once and will enter both the users' Moodle account details. Edwiser's Bulk Purchase extension will allow me to do this easily and conveniently.

Let's start the process.

I surf to my E-Commerce website and go to the Product page. My website sells flight simulation-related courses. "Quality Joysticks" is in the technical sense, a WooCommerce product, but it is also a course because it is linked to my Moodle course. See my earlier blog post on the "WooCommerce Integration with Edwiser Bridge" to see how to do this.

I click on the "Quality Joysticks" product. I am now brought to the product's individual page.

Screen 4. Adding an item to a shopping cart

At the individual product page, I notice the "Associated Courses" section. The Moodle course named "How to use a joystick for air combat maneuvers" is associated (linked) to the product "Quality Joysticks".

I will then tick the "Enroll me" checkbox so that I, as the Instructor, can and will also be enrolled into the Moodle course. Next, I will click the "Add to cart" button.

Screen 5. Enrolling myself, the Instructor, and adding the product
(Moodle course) to the Shopping Cart.

At the Cart page, I notice that the Quantity shows "1". I will want to change this to "2".

Screen 6. Changing the quantity.

I edit the "1" to "2" because I have two users to register.

Screen 7. Updating the shopping cart
to register two items on order.

My theme (Wootique) updates the total to RM1.99 including 6% tax. I proceed to checkout by clicking the "Proceed to Checkout" button.

Screen 8. Checking out.

At this screen, I enter my personal and payment details. I can pay by either credit card (via PayPal), or by online Banking via a local payment gateway. I will not show this part of the process as it is for a future blog post on how to integrate a local payment gateway to your WordPress E-Commerce website.

Screen 9. Entering billing details. The person filling in the details is a certain Johnny Appleseed,
whose job is to pay for and enroll two users into a Moodle course.

I bite the bullet and click "Place Order". I want to buy the Product (course)!

Screen 10. Placing an order.

One more button to click. The green confirmation button.

Screen 11. Making payment.

Since I would not want to spend money unnecessarily for this blog post, I have simulated the resolution of the transaction by logging into my WordPress E-Commerce site, and manually confirming the order.

Screen 12. Confirming the order without actually making payment
from the Admin's backend - to simulate an actual transaction.

A softcopy invoice is created by my 3rd-party PDF Invoice plugin named 'YITH WooCommerce PDF Invoice and Shipping List'.

Screen 13. "Proof" of payment.
An newly-created invoice is shown.

In my G-Mail inbox, I can see that the WordPress E-Commerce site has sent me a notification, confirming the order and the purchase. An earlier E-mail contains a notification from the same site, informing me of my new WordPress account.

Screen 14. An E-mail notification is sent to your E-mail address which
was specified when you created a WordPress account.

Here's what the top (first) E-mail looks like.

Screen 15. Contents of the notification E-mail containing the transaction information
and the link to a course ("How to use a joystick...") associated with the product.

So my order is complete. Good to know! But how do I add my students to the Moodle course? That's where the earlier (the bottom) E-mail is for. Opening it, I see a link to enrol my two users.

Screen 16. Contents of the WordPress notification E-mail:
a link to the "Enroll Students" page.

Assuming that I haven't yet logged out of WordPress, when I click the link, I am transported to the "Enroll Students" page of the E-Commerce WordPress site. I will first have to select the product from a drop-down selection list.

Screen 17. Accessing the Enroll Students page and selecting a product.

If I was not logged in (perhaps I had logged out earlier) and I clicked the "link to add students", this is what will happen on my website. The message "Please Login to view this page." will appear and the user will know that he or she has to first login into WordPress.

Screen 18. What the Instructor (user) will see if he or she was not logged in.

I select "Quality Joysticks". WordPress already knows that the product is linked to the Moodle course because I had earlier synchronised/linked/associated a Moodle course to the Product. For more information, see my earlier blog post on the "WooCommerce Integration with Edwiser Bridge" to know how to do this.

Screen 19. Selecting the product associated with the course.

A fresh "Enroll Students" dialogue screen appears. I proceed to add the first new user's data. I click on the "Add New User" button.

Screen 20. Since the user chose to purchase two joysticks (see Screen 7.),
the Bulk Purchase plugin will allow the user to create two user Moodle accounts.

Please note that if I wanted to, I could upload a Comma-Delimited-Values file containing the users' data. This is very useful if there are many users to enroll into the Moodle course. The enrollment data could be prepared as an Excel spreadsheet and saved as a CSV file, to be later imported by clicking on the "Upload CSV" button.

However, for this blog post, I will keep this process simple and will manually enter the users' data. I then enter the Rio Carnival's first name (Rio), last name (Carnival) and E-mail address. Then to enter the next user's data, I click on the "Add New User" button.

Screen 21. The first Moodle account data (for a person named Rio Carnival)
has been entered; the user will now add the second user's account data.

This time I enter Kuala Aloha's account data. The three essentials are first name, last name and E-mail address. This process is simple.

Screen 22. The second Moodle account data (for a person named Kuala Aloha)
has been entered. The user now clicks the Enroll button to enroll both users into Moodle.

After I have clicked the "Enroll" button, WordPress responds by displaying the status of my work. "Users with the following email ids have been enrolled successfully:". I must have done it right!

Just for fun, I click on the "Learn how to use" menu item to see where it goes.

Screen 23. Now that both user accounts have been created and the users enrolled into Moodle,
it is now time to access the Moodle site.

Naturally, the link brings me to the Moodle site. Hmm, that looks like a screenshot from Digital Integration's classic 1993 DOS flight simulator, Tornado.

Note the login id of "Johnny Appleseed" - the person who paid for and who created the two Moodle accounts (Screen 9). The Moodle course, that was purchased, is listed under "Available courses".

Screen 24. The Moodle site in all its glory.

So where's the course then? Ah, there it is, right below the words "Available courses". It says "How to use a joystick for air combat maneuvers". A joystick gives a more immersive experience than a keyboard. That much I know.

Screen 25. The screen shows the Admin Moodle backend data.

it shows that Johnny Appleseed (me the Instructor), Kuala Aloha and Rio Carnival have been created.

As I had ticked the "Enroll me" checkbox at Screen 5., I am automatically enrolled in the Moodle course. I am therefore able to access the course.

A quick check via Course Administration | Users | Enrolled users confirms that all three persons have been enrolled into the course. Kuala Aloha, Rio Carnival and I, the Instructor.

Screen 26. At the course "How to use a joystick for air combat maneuvers" page, a check on the

user enrollments screen shows that I, the Instructor, and both Kuala Aloha and Rio Carnival are enrolled in the course.

Mission accomplished!

Conclusion

The Edwiser Bulk Purchase Extension is a well written WordPress plugin that I find essential for any web developer who wants to sell Moodle courses online. It is easy to use and will lesson the workload of any instructor, manager or office administrator who wants to make a single payment for a Moodle course and yet enroll multiple students or users.

This extension is what software should be: taking the tedium out of office administration and making it easy for the end-user to get the job done. If you are in the business of selling your Moodle course online, I highly recommend the Edwiser Bulk Purchase Extension.

To recap, once again here is the flagship Edwiser Bridge and ALL 4 extensions:

These quality software products provide you with a one-stop shop for all your LMS development needs. Through them you can successfully setup an E-Commerce system that sells Moodle courses online using WordPress and WooCommerce.

The adept developers at Edwiser truly live up to their claim of being a developer of powerful platform integration solutions and neoteric user-experiences that build innovative e-learning products.

It has been a pleasure writing these five last posts, and I wish you all the best in your E-Commerce systems.

Regards
Frankie Kam

Integrate WooCommerce with Edwiser Bridge to sell your Moodle courses online by using the Edwiser WooCommerce Integration extension

noreply@blogger.com (Unknown) — Wed, 07 Sep 2016 01:10:00 +0000

To get POWER, you have to
CONNECT ALL the parts!

So you've got your Moodle site integrated with WordPress using the Edwiser Bridge, and the Edwiser Single Sign On and Selective Synchronization extensions. What's next? How about integrating with WooCommerce?

Edwiser WooCommerce Integration
extension logo

Section I: Overview

The WooCommerce Moodle Integration allows you to sell courses, synchronised by Edwiser Bridge, using WooCommerce. This will leverage on WooCommerce's strengths of e-Commerce functionality and it will allow you to sell multiple courses as bundled products without the need of an additional extension.

This post is Part 4 in the series of Edwiser Bridge and its extensions. Here is the Big Picture that shows where this extension fits in:

Section II: Pre-requisites

This post assume that you have already successfully purchased, installed the WooCommerce Integration extension and activated its license key.

Screen 1. License key information.

Section II:

As mentioned in the official documentation for this plugin, you will have to do the following four things first:

(1) Disable guest checkouts
Go to WooCommerce | Settings | Checkout and uncheck the 'Enable Guest Checkout' option.

Screen 2. Disable guest checkout.

(2) Enable registration on the Checkout Page
Go to WooCommerce | Settings | Accounts and check the 'Enable registration on the "Checkout" page' option.

Screen 3. Enable registration.

(3) Disable automatic password generation
Go to WooCommerce | Settings | Accounts and uncheck the 'Automatically generate username from customer email' option.

Screen 4. Disable automatic passwords.

(4) Make a product virtual and downloadable
Go to the course product page via Dashboard |Products..

Screen 5. Editing a product.

.
..and then check both 'Virtual' and 'Downloadable' fields in the 'Product Data' meta box.

Screen 6. Set the product
as virtual and downloadable.

Click the "Update" button to save your settings.

Section III: Create courses as WooCommerce products

This can be done in two ways.
(A) You can either make all Edwiser courses that are synchronised from Moodle as WooCommerce products.
(B) Create a Product and associate an existing synchronised course with the product.

(A) Synchronising courses as WooCommerce products from Edwiser Bridge Settings page

Go to Edwiser Bridge | Settings | Synchronization | Products

Check the 'Create courses as products' check box. Any course that is synchronised from Moodle will be created as a WooCommerce private product. It will not be available to end users.

If you check the 'Publish Synchronized Products' check box, then the private products will be published and the end users will be able to access them.

Screen 7. Synchronising courses.

Note: if you check the 'Update courses as products', then all previously imported Moodle courses will be updated. The price type of the course will be set to 'Closed'.

Click the 'Start Synchronization' button to create the WooCommerce courses.

(B) Create a Product and associate an existing synchronised course with the product.

Go to Products|Add Product

Type the product's name.

Screen 8. Adding a product.

Scroll down to the 'Product Data - Simple product' section and click the 'WooCommerce Integration' horizontal tab. You will see a metabox open that contain two fields - Courses and Group Purchase.

In the Courses field, you can select one or more courses from the dropdown list.

Screen 9. Selecting courses to be linked to the product.

The beauty of the metabox interface is that more one or more courses can be bundled was a single product. Once a course has been linked to a product, click the Publish button to save the product.

Screen 10. Publish a product.

Creating product variations

A real gem of the Edwiser WooCommerce Integration plugin is the Single Product Variation feature, This is a feature that allows the user to customise a product by creating variations.

Go to Products | Choose a product | Edit

Screen 11. Editing a product to add variations.

The name of the product is MyProduct (it could be anything - a T-shirt, a trousers or a dress). We will now create variations of that product.

Select the product type as Variable product and then click the Attributes tab.

Screen 12. Getting ready to enter attributes.

Click the Add button to add one attribute at a time. In the example below, I have created two attributes color (with values red and white) and size (with values medium and large). The values are separated by a '|' (pipe symbol) separator.

Screen 13. Variation attributes and values entered.

Check the "Visible on the product page" and "Used for variations" checkboxes.
Click the "Save attributes" button to save your attributes data.

Next, you will create variations of the product.
Click the Variations tab.
Click the "Add variation" dropdown box and choose "Create variations from all attributes".

Screen 14. Auto-generating
variations from M attributes and N values.

Click the "Go" button.
A warning message will pop up to warn you that the plugin will create M * N variations (sub-products). Ignore the warning and proceed.

A "N variations added" message will appear. Click the "OK" button to continue.

Screen 15. Confirmation messages.

Since I only had 2 attributes (M) and each attribute had 2 values (N), a total of M x N = 2 x 2 = 4 variations were created autmatically by the Edwiser plugin. So in effect, the plugin created ALL possible combinations of sub-products. This is what software should be - creating things automatically and removing the tedium of doing such things manually!

Screen 16. Variations created, ready for editing specific settings.

Each variation of the product can be given a separate price. To do that, click on the "Click to toggle" inverted triangle.

Screen 17. Editing a variation.

The full dialogue box will open for the variation red color-medium size of the product. The dialogue box gives you a lot of flexibility.

Check both the Downloadable and Virtual checkboxes. A price for the variation is required. Without the price, if that particular variation is chosen by the user, WooCommerce will output a message "Sorry, this product is unavailable. Please choose a different combination".

You can edit the "Regular price (RM)" and "Sales price (RM)" fields.

Screen 18. Using the powerful dialogue box.

The dialogue box is very powerful. Note that you can also link (associate) a course with the product variation. The dialogue box can be expanded or closed to save vertical space.

To save your attribute data, click the "Save changes" button to save your variations settings. Lastly click the "Update" button to save your Product.

Screen 18. Saving variation and product data.

To view the product page, click on the permalink of the Product.

Screen 19. Testing the product page.

At the prduct page, you will see the attributes that the user can select.

Screen 20. Product page shows variation information.

The screen below shows the product variation price based on the color and size.

Screen 21. User has chosen a specific instance based on the
color-size choices. The price of the variation is shown.

Conclusion

Edwiser WooCommerce Integration plugin is a very powerful plugin. It behoves the web developer to use. It will allow you to leverage on the popularity and power of WooCommerce. It will also allow you to easily create variations of a product. It is a must-have if you are want to use WordPress to sell your Moodle courses.

For more information, head over to Edwiser's Edwiser WooCommerce Integration plugin webpage.

Regards
Frankie Kam

Edwiser Selective Synchronization extension to selectively synchronize Moodle courses with WordPress

noreply@blogger.com (Unknown) — Wed, 24 Aug 2016 06:41:00 +0000

Checklist by Jurgen Appelo.
Licensing: Creative Commons,
Attribution 2.0 Generic (CC BY 2.0)
Source: http://goo.gl/2M0yB7

Welcome the my third post in a series of five posts featuring the Edwiser Bridge and its four extensions. Today I will focus on the Edwiser Selective Synchronization Extension, which is a commercial plugin.

Image 1. SS extension icon.

This plugin works in tandem with the other extensions to achieve a Moodle-WordPress synergy.

Section I. Overview

Image 2. The Big Picture. Where
the Selective Course Synchronizatin extension fits in.

Why is this plugin useful? Imagine a Moodle site with hundreds of courses. With the Edwiser Bridge alone, you would import ALL courses into WordPress. That could be a lot of courses being synchronised, leaving you with no choice but to let the Bridge do everything for you. You might then end up having to delete the WordPress courses which you don't need. Wouldn't it be far more convenient to be able to choose the courses to be synchronised? You can with this plugin by Edwiser.

Section II. Walkthrough
Step 1. Install and activate the Selective Synchronization extension.

Image 3. Activating the plugin.

Step 2. Go to Edwiser Bridge | Settings | Licenses tab.

Image 4. Licensing.

Step 3. Copy and paste the key from your receipt E-mail and click the "Activate License" button.

Image 5. Adding the license key.

Note: a license key is valid for only one site. To reuse a license key, you will have deactivate the key first. If you fail to do this, the WordPress will raise an "Invalid Key" flag.

Image 6. Result of an invalid license key.

Step 4. Assuming the key is valid, ...

Image 7. Result of an valid license key.

... go to Edwiser Bridge | Settings | Synchronization tab.

Image 8. The Synchronization tab.

You will notice that there is a "Selective Courses" option. Click it.

Image 9. The Selective Courses link.

Step 5. Check one or more courses that you want to synchronise between Moodle and WordPress.
Step 6. Click the "Start Synchronization" button.

Image 10. Tick and untick the boxes to selectively choose the courses to import/synchronise

Note: if you want to update the course data on synchronization, just check-click the "Update previously synchronized courses" checkbox.

Addition information
On the right of the Selective course screen, there are two filter options. See below. If there are many courses listed, you can use the Search box to filter for the courses that you want.

Image 11. Two filter options.

You can also use the the Category drop-down box to display just the courses of a particular category.

Conclusion
The Edwiser Selective Synchronization Extension is a very simple plugin to operate. It is a handy plugin for Admins and is easy to use.

For further information about this extension, click here.

Cheers
Frankie Kam

Edwiser Single Sign On (SSO) extension to access Moodle and WordPress

noreply@blogger.com (Unknown) — Wed, 17 Aug 2016 09:28:00 +0000

Two Doors by Stefan W.
Licensing: Creative Commons,
Attribution 2.0 Generic (CC BY 2.0)
http://goo.gl/sVgWXa

This is the second post in a series of five posts featuring the Edwiser Bridge and its four extensions. To re-cap, these WordPress plugins allow you to integrate Moodle with WordPress. In today's post I will focus on the Edwiser Single Sign On Extension which is a commercial plugin.

Image 1. The SSO extension icon.

This extension is an integral component in an e-Commerce system that comprises of Moodle, WordPress and WooCommerce. It works in tandem with the other compnents to create synergy in your system.

Section I. Overview

Image 2. The Big Picture. Where
the SSO extension fits in.

What is the Single Sign On?
Single sign-on (SSO) is a session and user authentication service that allows a user to use a set of login details - name and password - to access two or more applications, in this case, WordPress and Moodle.

The Single Sign On extension allows you to enter your login credentials once in Wordpress, and to be logged into both WordPress and Moodle at the same time. So with this Edwiser extension, you will be able to, from within WordPress, launch directly into a Moodle site without having to go through the Moodle login page. This extension, used in tandem with Edwiser Bridge and the other three extensions, produce operational synergy for your website.

Installation Guide
As a purchaser of this extension, you would have received an E-mail that would allow you to download two key zip files – ‘edwiser-bridge-sso.zip’ and ‘wdmwpmoodle.zip’.

Section II. SSO Installation on WordPress

Steps 1 to 8 are in WordPress.

Install the ‘edwiser-bridge-sso.zip’ on your WordPress website.

Step 1. Go to the ‘Plugins’ menu from the dashboard.

Image 3. Add a new plugin.

Step 2. Click the ‘Add New’ button on this page.
Step 3. Click on the ‘Upload Plugin‘ button and upload the ‘edwiser-bridge-sso.zip’ file.

Image 4. Choose File.

Step 4. Click on ‘Install Now’ button once you have located and uploaded the plugin.
Step 5. On successful installation click the ‘Activate Plugin’ link to activate the plugin.

Image 5. Activate the plugin.

Step 6. Go to Edwiser Bridge | Settings | Licenses tab.
Step 7. Look for the label "Edwiser Bridge Single Sign On" and paste the license key into the edit box
Step 8. Click the "Activate License" button.

Image 6. Active the license.

Section III. SSO Installation on Moodle

Steps 9 to 13 are in Moodle.

Install wdmwpmoodle.zip on your Moodle website.

Step 9. In your Moodle site, go to Site administration | Plugins | Install plugins

Image 7. Install the wdmpmoodle plugin.

Step 10. Upload the wdmpmoodle.zip file by clicking on the "Choose a file" button. Navigate to the folder where the zip file is stored and select it.

Image 8. Pick the file.

Step 11. At the Plugin type drop down list, choose "Authentication method (auth)" and click the "Install plugin from the ZIP file" button to install the plugin.

Image 9. Installation settings.

Step 12. Go to Site administration | Plugins | Authentication|Manage authentications
Step 13. Enable the Edwiser Bridge SSO plugin by clicking the 'closed eye' icon.

Image 10. Authentication.

Section IV. Generating the Secret Key on WordPress and Moodle

Both websites need to communicate via a secret key.

Steps 14 to 16 are in WordPress.

Step 14. Go to Edwiser Bridge | Settings | General tab.
Step 15. At the Single Sign On Settings section, you will see the Secret Key edit box. Type in a secret key value
Step 16. Click the "Save Changes" button when finished.

Image 11. Add in the Secret Key.

Steps 17 to 19 are in Moodle.

Now we have to set the same secret key value on the Moodle site.

Step 17. Go to Site administration | Plugins | Authentication | Edwiser Bridge SSO
Step 18. Enter the exact same secret key that was entered at Step 16, in the "Secret key" edit box.

Image 12. Paste the same Secret Key value into Moodle.

Step 19. Click the "Save changes" button to save the setting.

Section V. Navigating and redirecting between WordPress and Moodle
It would be good to make a way for the user to jump from WordPress directly into Moodle. Likewise, the user should be able to jump back to WordPress once they have logged out of Moodle.

Steps 20 to 35 are in WordPress.

Let's now create a link on the WordPress site that will bring the user direct to Moodle.

Step 20. From your WordPress Dashboard, go to Pages | Add New.
Step 21. Enter the name of your page. For example, "Go to Moodle".
Step 22. Type the shortcode [wdm_generate_link].
Step 23. Click the "Update" button to save the page.

Image 13. Link to Moodle short code.

Next, you should add the page to your WordPress menu. To do this,

Step 23. At the Dashboard, go to Appearance | Menu.
Step 24. At the Menu Name, type "Header1".
Step 25. Click the "Create Menu" button.

Image 14. Adding the link to the WordPress header menu.

Step 26. In the Pages panel on the left, go to the "Most Recent" tab and tick the two items named "Go to Moodle" and "User Account".
Step 27. Click the "Add to Menu" button to add both items to the "Header1" menu.

Image 15. Adding more links to the header menu.

Step 28. Let's also add a WordPress course link to the menu. Under the Pages section, click the "Custom Link" accordion.
Step 29. Type the Edwiser course link, i.e., "http://www.tornado2.com/ecomm/courses/mynewcourse/", inside the URL edit box.
Step 30. Type "Course" inside the "Link text" edit box.
Step 31. Click the "Add to Menu" button.

Image 16. Adding a link to the WordPress course in WordPress' header menu.

Step 32. Under the Menu Settings section, tick the "Primary Menu" checkbox.
Step 33. Click and drag the "Course" menu item so that it is above "Go to Moodle" and "User Account" items.
Step 34. Click the "Save Menu" button.

Image 17. Arranging the menu items.

Step 35. Open your WordPress website in a web browser. You should see the "Course" and "Go To Moodle" links at the top menu.

Image 18. Preview.

We're almost there! Let's now make it so that when a user logs off from Moodle, he or she will be redirected to WordPress.

Steps 36 to 42 are in Moodle.

To do this, you need to download and install the "Login/Logout user redirection" Moodle plugin.

Step 36. In your Moodle site, go to Site administration | Plugins | Install plugins
Step 37. Click the "Install plugins from the Moodle plugins directory" button.

Image 19. Install the Login/Logout plugin for Moodle.

Step 38. Log into Moodle.org (you must setup an account there first!)

Image 20. Go to Moodle.org (you will need an account, of course).

Step 39. Type "Login/Logout user redirection" inside the "Search plugins" search box.
Step 40. Click the "Search plugins" button. You should see the plugins page.
Step 41. Click the "Login/Logout user redirection" link.

Image 21. The Login/Logout User Redirection mod page.

Step 42. Click the "Versions" link.

Image 22. Access the correct version.

Depending on the version of Moodle that you are using, you may or may not be able to automatically install the plugin.

Image 23. Install or Download? Your choice.

For example, if you are using Moodle 3.1, they would have to click the "Download" button and manually install the plugin by using File Transfer Protocol.

To manually install the "Login/Logout user redirection" plugin, follow these instructions:
(1) FTP the loginlogoutredir folder to MOODLE_HOME/auth/.

Image 24. FTP with FileZilla.

(2) Add two entries to your MOODLE_HOME/config.php file:
$CFG->loginredir = "{$CFG->wwwroot}/plus/some/different/path"
$CFG->logoutredir = "Any URL you want"

For example,
$CFG->loginredir = "{$CFG->wwwroot}/course/view.php?id=3";
$CFG->logoutredir = 'http://www.tornado2.com/ecomm/';
where course/view.php?id=3 is the Moodle course that the user has just paid for.

(3) Login to Moodle with your admin account.
(4) Go to: Site Administration|Plugins|Authentication|Manage Authentication
(5) ENABLE "Login/Logout user redirection". This step is very important!
(6) Save changes

Section VI. Testing the navigation between WordPress and Moodle

Now the Single Sign On functionality between both the WordPress and Moodle sites will be seamless. Here's the proof:

You are logged out from both WordPress and Moodle.
As a user, you click on the "Buy Course" link at the header menu.

Image 25. Preview.

You are brought to the page for the MyNewCourse course. You click on the "TAKE THIS COURSE" button.

Image 26. Walkthrough.

You are presented with the login screen. You click on the "Don't have an account" link because you have never setup an account on this WordPress site.

Image 27. The first-time user will have to create an account.

You enter your login details and click the "REGISTER" button.

Image 28. Registration page. Normal.

You click the "TAKE THIS COURSE" button...

Image 29. Take the course.

...which, for a free course, changes into an "ACCESS COURSE" button because at the moment, there is no payment gateway setup for the course. You click on the "ACCESS COURSE" button.

Image 30. Access the course.

You are transported to the Moodle course that you 'bought' for free. After some time, you decide that you have had enough. So you click on the Logout link.

Image 31. Vola! You're in Moodle immediately. Moodle's login screen was bypassed.

When you click the "Logout" link, Moodle's "Login/Logout Redirection" plugin redirects you to the WordPress site. If you click on the "Go to Moodle"...

Image 32. Redirected back to WordPress.

You are brought back to the Moodle website which is http://www.tornado2.com/m31.

Image 33. Jumping back to Moodle from WordPress. That's how the flow goes.

Conclusion

This plugin gives you the convenience of access and seamless integration between WordPress and Moodle. A single username and password on the WordPress website gains your users access on WordPress as well as Moodle simultaneously.

The Edwiser Bridge's Single Sign On extension is a must-have for any serious web developer who wants to integrate WordPress and Moodle! For further information about this extension click here.

End of Post 2 of 5.

How to sell your Moodle course with Edwiser, Moodle and WordPress

noreply@blogger.com (Unknown) — Wed, 17 Aug 2016 09:03:00 +0000

Source: Alexa_Fotos; Pixabay https://goo.gl/jyiz8N

Some time ago, I wanted to know how I could sell a Moodle course online with a local Malaysian payment gateway. After doing some research online, I discovered that I could do this by using the free Edwiser Bridge and its four commercial extensions (plugins) from Edwiser. Throw in a payment gateway like the iPay88 plugin for WooCommerce, and the world's your oyster.

What is Edwiser Bridge?
Edwiser Bridge is a plugin by Edwiser that integrates Moodle Learning Management System with WordPress. It allows you to import and sell Moodle courses using WordPress. Software requirements of the lugin: WordPress 4.0 or higher. Compatible up to WordPress 4.5.3.

Today's post is the first in a series of five posts where I will illustrate how I used the Edwiser Bridge plugins and its extensions to create an E-Commerce WordPress website to sell Moodle courses.

Most of the information provided by me on the Edwiser Bridge installation can be obtained from Edwiser's website, specifically the company's Documentation Page. What is different in my blog are detailed screenshots of the installation and test process, and some explanation in my own words.

Learning Outcome
At the end of this post, you will know how to import and synchronise your Moodle courses with WordPress by using the free Edwiser Bridge plugin.

Disclaimer: Edwiser.org is not responsible for any mishaps or accidents to your website arising out of these blog postings of mine. You attempt these steps and instructions of mine at your own risk.

Section I. Overview

I would like to start by giving you an overview of the Edwiser Bridge plugin. It allows WordPress to integrate with Moodle, a popular learning management system. With this setup, you can achieve a basic platform for selling your Moodle courses online. Edwiser Bridge also comes with four commercial extensions. The extensions add important functionality to your basic E-commerce system.

For example, the "Single-Sign On" and "Bulk purchase with multiple enrollments" extensions make it very convenient for the user; The "WooCommerce Integration" extension allows you to use WooCommerce's powerful E-commerce features; and the "Selective Course Synchronisation" extension saves the Moodle admin time and white hair, when importing Moodle courses into WordPress, from a Moodle site that has a large number of courses.

Image 1. The Edwiser Bridge universe.
Diagram by Frankie Kam

This post is the first part in a rather ambitious 5-part series of posts. Each post focussing on a specific plugin in turn:
Week 1: Edwiser Bridge - import Moodle courses and enrolled user data into WordPress;
Week 2: Single Sign On For Edwiser Bridge - log into both Moodle and WordPress via a single login;
Week 3: WooCommerce Integration Extension - sell Moodle courses on the WooCommerce platform;
Week 4: Selective Synchronization - select one or more Moodle courses to be synchonized with WordPress;
Week 5: Bulk Purchase - multi-course purchase and multi-student enrollment for operational convenience.

What you will need to finish this tutorial:

the Edwiser Bridge plugin
a working WordPress site (e.g., WordPress 4.5.3)
a working Moodle site (e.g., Moodle 3.1)
a PayPal account (for testing and as the payment gateway)

I am assuming that you already have a WordPress site and Moodle site installed. If you do NOT have either of these sites ready, I would recommend that you read this other blog post of mine. It is a Dummies' Guide with individual screenshots of the entire procedure for BOTH Moodle and WordPress. It contains an insane number of screenshot images so please be patient if the webpage there loads slowly on your web browser!

Image 2. he Installation process starts
in your WordPress site (Steps 1 to 3)

Section II. Install Edwiser Bridge in WordPress

Step 1. Download the Edwiser Bridge plugin from here or by using WordPress' built-in "Add Plugin" option:

Image 3. The Edwiser Bridge is a free plugin available on WordPress.

Step 2. Install the plugin in your WordPress site and activate the plugin.

Step 3. You will now see the 'Edwiser Bridge' menu option.

Image 4. How you know you have installed Edwiser Bridge.

If you see the menu option, then congratulations so far! Next you will need to login as admin in your Moodle site.

Image 5. Steps 4 to 21 are done in your Moodle site.

Section III. Create an external service in Moodle

What is a web service?

W3C defines a web service as "a software system designed to support interoperable machine-to-machine interaction over a network." [1]

Image 6. Illustration of a web service.
Source: Wikipedia.

A web service is a "function that can be accessed by other programs over the web (Http) ... A web service is not targeted at humans but rather at other programs." [2]

So we need to get Moodle and WordPress to communicate. This will allow WordPress to automatically create a user Moodle account and to enrol the user in a Moodle course, all from outside Moodle. Enter web services.

Step 4. Login to your Moodle site.

Step 5. Access the External Services via Site Administration | Plugins | Web Services | External Services.

Step 6. Create an External service named MyExternalService by clicking the "Add" button.

Image 7.

Step 7. Give a name to your External service. "MyExternalService" is my choice.

Step 8. Tick the "Enabled" checkbox.

Image 8.

Step 9. Cick the "Save Changes" button.

Image 9. Screen shows an external service named
"MyExternalService" setup by the author.

Step 10. Click the "Functions" link.

Image 10. The Add Functions button.

Step 11. Search for a function. Click inside the text box. Type a partial name and click a row to highlight a function.

Image 11. The "Add functions" interface.

You can also select multiple rows by holding down the Control key and clicking with your mouse. Click the "Add Functions" button to add the function.

What you should end up with, is an external service that has these functions attached to it:

core_user_create_users
core_user_get_users_by_field
core_user_update_users
core_course_get_courses
core_course_get_categories
enrol_manual_enrol_users
enrol_manual_unenrol_users
core_enrol_get_users_courses

Image 12. Your external service has these functions added to it.

Section IV. Enable the REST protocol

What is this REST protocol thingy? I mean we all need a break now and then, but this protocol has nothing to do with taking a break. There are two major classes of Web services: REST-compliant Web services and Arbitrary Web services. REST is a Web API which uses simpler REpresentational State Transfer based communications. REST does not require XML-based Web service protocols (SOAP and WSDL) to support its interfaces. [3]

A Web API is a development in Web services where emphasis has been moving to simpler representational state transfer (REST) based communications.[4] RESTful APIs do not require XML-based Web service protocols (SOAP and WSDL) to support their interfaces.

Step 12. Go to Site Administration|Plugins|Web Services|Manage Protocols

Step 13. Click the 'blind eye' so that it shows an 'open eye'.

Step 14. Click the "Save changes"button.

Image 13. Managing Protocols.

Section V. Generate a Moodle web service token

What on earth is a web service token? Let's start with "token". A token is a piece of data which only Server X could possibly have created, and which contains enough data to identify a particular user. You might present your login information and ask Server X for a token; and then you might present your token and ask Server X to perform some user-specific action. [5]

So my Moodle site creates a secret code which is unique in this entire universe. If a WordPress site knows and stores this secret code, then it can present that code to my Moodle site. My Moodle site will say, "Yeah, that's the right code. Walk through my doors, look through my stuff and take what you need".

With this web service token that my Moodle site creates, my WordPress site has the permission to, and will send over a WordPress user's username and password to Moodle. My Moodle site then creates a Moodle user account with the exact same username and exact same password. Not only that, WordPress will trigger Moodle to enrol that user into a Moodle course. Sweet!

Step 15. Go to Site Administration|Plugins|Web Services|Manage Tokens

Step 16. Click the "Add link.

Image 14.

Step 17. Select the Admin User from the User list.

Step 18. Select the Service "MyExternalService".

Step 19. Click the "Save changes" button to generate the Moodle Web Service token.

Image 15. Creating a web service token in Moodle.

You will see your token appear. For example:

Image 16. Add caption

Section VI. Enable Web Services in Moodle

Step 20. Go to Site Administration|Advance features and tick the "Enable Web Services" checkbox.

Image 17. Enabling web services.

Section VII. Disable the Password Policy
This step is necessary because the user will register an account on WordPress. The same account name and password will be created in Moodle. Hence it is necessary to remove the password policy so that Moodle will not face any problems duplicating the user's WordPress password.

Step 21. Go to Site Administration|Security|Site Policies and UNtick the "Password Policy" checkbox.

Image 18. Disabling the Moodle site's password policy.

This concludes the Moodle side configurations for the WordPress-Moodle integration to work. The same Moodle site that I have created contains one course named MyNewCourse.

Image 19. Clicking on a Moodle course.

It is this course that will be imported into and synchronised with my WordPress site. Now you need to log out from Moodle, and log into your WordPress site.

Image 20. Back at the WordPress ranch....
Steps 22 to 44 are in WordPress.

Section VIII. Configure the General settings

Step 22. Go to Edwiser Bridge | Settings | General tab.

Image 21.

Step 23. Tick the "Enable Registration" checkbox.
Step 24. From the User Account Page's drop-down list, select "User Account".
Step 25. Choose "en" for the Moodle Language Code if you want the site to be in English.

Section IX. Add the Moodle access token

With that done, next you will add the Moodle token that was generated at Step 19. This token is common to both your Moodle and WordPress sites, and it allows both sites to communicate to each other.

Step 26. Go to Edwiser Bridge | Settings | Connections Settings tab.

Image 22.

Step 27. Enter the Moodle URL inside the "Moodle URL" text box. Be sure to have the "http://" or "https://" prefix.
Step 28. Copy and paste the token value of Step 19, in the "Moodle Access Token" text box.
Step 29. Test the connection by clicking the "Test Connection" button. If it connects, you should see a "Connection successful. Please save your connection details." message appear.
Step 30. Click the "Save changes" button.

Image 23.

Section X. Configure your payment gateway - PayPal

In order to collect online payments, you will need to configure your payment gateway settings. In this post I will use PayPal. For local Malaysian and Asian online banking, I would recommend iPay88 and its Wordpress plugin. Your choice may differ depending on your location and target market. That's material for another blog post for another day.

Here's my PayPal settings. Please use your own.

Image 24.

Time for a checkpoint to pause and to catch your breath! At this point of the setup, you have completed the Edwiser Bridge plugin setup. What remains is to synchronise your Moodle courses with Wordpress.

Section XI. Synchronize WordPress with Moodle

Step 31. Go to Edwiser Bridge | Settings | Synchronisation tab.

Image 25.

Step 32. Leaving the check boxes unticked, click the "Start Synchronization" button.

The MyNewCourse course, that was introduced at Step 21, will be synchronised can be accessed via Edwiser Bridge | Courses.

Image 26.

To test this imported course, log out of your Moodle site.

Section XII. Link a WordPress user to the Moodle site

In order to enrol the WordPress user to the imported Moodle course, which would indirectly link the WordPress user to the actual Moodle course, you need to first tell WordPress to link the user to Moodle.

Step 33. Go to User | All Users

Image 26.

In the screen example above, I have already manually added a new WordPress user named John Doe.

At this point in time, let us pause and look at the sample Moodle site shown below. Please note that it contains only one user - the admin.

Image 27.

With that settled, let's return to WordPress (Image 26) and continue.

Step 34. Tick the checkbox next to johndoe's avatar image.
Step 35. From the Bulk Actions dropdown list, select "Link Moodle Account".
Step 36. Click the Apply button to save the settings!

Image 28.

What is the effect of this (Step 36)? Well, if you take a peek at the Moodle site, it now contains a new user - JohnDoe with username: johndoe !

Image 29.

Here's proof that a new Moodle user account, with the exact same username as the WordPress account (johndoe) has been created.

Image 30.

What about the password for John Doe's Moodle johndoe account? It is exactly the same as his password for WordPress. So in short, the user names and passwords of John Doe's Moodle and WordPress accounts are exactly the same. However John Doe has to manually enter the site's username and password to gain access.

Step 37. Now, let's come back to WordPress and let's see the further effects of steps 33 to 36.
Click on the username johndoe like so....

Image 31.

..and when johndoe's profile page loads up, scroll right to the end of the page.

Image 32.

You will see the "Enroll a Course / Unenroll a Course" section. If you do not execute steps 32 to 35 (Link a WordPress user to the Moodle site), this "Enroll a Course / Unenroll a Course" section would not exist!

Step 38. Click the"Enroll a Course" drop-down list and select the course listed which is MyNewCourse.

Image 33.

Step 39. Click the "Update User" button to save.

If you were to check the Moodle site, you would see that johndoe has automatically been enrolled in the course MyNewCourse. Sweet! See the screenshot below.

Image 34.

Back to WordPress.

Step 40. To unenroll the student from within WordPress, click the complimentary "Unenroll a Course" drop-down list and select the course listed which is MyNewCourse.

Then click the "Update User" button. Like so.

Image 35.

The effect of this that johndoe is IMMEDIATELY UNENROLLED from the MyNewCourse (Moodle) course! If you were to refresh the Moodle's Enrolled users page, you would see that there are NO enrolled users.

Image 36.

So this is the almost magical effect of controlling the enrollment and unenrollment of a user, right from within WordPress itself!

Section XIII. Synchronise and create categories in WordPress

You can use Edwiser Bridge's to import Moodle course categories and place the imported courses under those categories.

Let's rewind to Step 32. We went to Edwiser Bridge | Synchronization tab and clicked the "Start Synchronization" button.

Image 37.

If I were to go to Edwiser Bridge | Course Categories , I would see the course category named "Miscellaneous" which was imported from Moodle.

Alternatively, you can create a new course category by entering the necessary data under the "Add New Course Category" section and clicking on the "Add New Course Category" button.

Image 38.

The Category will be available in the category widget on a single course page.

Section XV. Assign a price to a course

Step 41. To assign a price to a course, go to Go to Edwiser Bridge | Courses. Single-click a course to open it.

Image 39.

Step 42. In the Course Options section, enter the Course Price Type (Free, Paid or Closed), the price of the course if you selected 'Paid' type, and a short description (optional).

Image 40.

Step 43. Finally, click the button to save your Course Options.

Image 41.

Section XVI. View a purchase order

Step 44. To see all purchase of courses, go to Edwiser Bridge | Orders.

Image 42.

Section XIV. Recap and User Interaction with the setup so far

So at this point, allow me to recap what we have achieved.

Moodle and WordPress can now talk to each other. Great!

We can import a Moodle site's courses into a WordPress site.
We can select a WordPress user and automatically create a Moodle account for the user/
We can automatically enroll that WordPress user into a specific Moodle course

SO WHAT? So far, what can the WordPress site do with all this setup?

Well, assuming that I had earlier set the featured image for the course...

Image 43.

...and that I had copied the URL of the new course, http://www.tornado2.com/ecomm/courses/mynewcourse/ and that we are NOW logged out of WordPress....

Image 44.

...let us give the WordPress-Moodle integration a dry run (test) by pasting that URL into the address bar of a web browser. This is what the user will sees:

Image 45.

If the user clicks the "TAKE THIS COURSE" link, the login screen will appear. The user, being new, will naturally click the "Don't have an account" link.

Image 46.

In the example below, I have entered the E-mail as Email address. Wordpress will take the "kamboonseng" portion of the E-mail address as the username. What about the WordPress password? The WordPress site would have sent an E-mail containing the login details to the user. Thus, the user can only know the password by checking his E-mail for the message.

Image 47.

At the screen refresh, the user is presented with same screen, but this time, notice that the user is logged in with the E-mail address given earlier. You can see the user's name at the right-hand corner of the screen.

The user clicks the "TAKE THIS COURSE" button.

Image 48.

As the course is currently free (no price has been attached to it), the button changes immediately to "ACCESS COURSE". If the user then clicks on the button, he/she will be brought to the Moodle login screen.

Image 49.

What is the Moodle username and password?

Image 50.

To find out the Moodle login's username and password, the user has to check his or her inbox for an E-mail message from wordpress@tornado2.com.

Image 51.

With this knowledge in hand, the user then logs into Moodle by entering the Username and Password.

Image 52.

The user is brought directly to the Moodle course that he 'bought' for free.

Image 53.

Buying Edwiser Bridge Extensions
So there you have it! Edwiser Bridge by Edwiser.org does the job very well. And that's just the free plugin which I highly recommend you try out and use on your WordPress website.

You can increase the functionality of your WordPress site if you buy and install Edwiser Bridge's other four sibling extensions.

For cost-effectiveness and savings, you can purchase the Edwiser bundle, where you get Edwiser Bridge extensions (WooCommerce Integration, Single Sign On, and Selective Synchronization) at a discounted bundled price.

This is the end of part I.

APPENDIX

References
[1] https://www.w3.org/TR/2004/NOTE-ws-gloss-20040211/#webservice
[2] http://stackoverflow.com/questions/226108/what-is-a-web-service-in-plain-english
[3] http://ieeexplore.ieee.org/xpl/articleDetails.jsp?arnumber=4620089

Operation and design-wise improvements to the website (at the end of Step 44)
#1. The Edwiser course links are not directly accessible from the WordPress' frontend;
#2. The WordPress site is still very vanilla and standard out-of-the-box look and feel;
#3. The Edwiser Bridge colors and format may not match your site's theme;
#4. The user has to manually enter his or her Moodle login credentials in order to access the Moodle course. The user has to first check his or her E-mail inbox for the login details from the site's WordPress;
#5. After Moodle end (when the user logs out from the course), the flow does not return to the Website course.

Addressing the deficiencies
Deficiencies #1 and #2 can be tackled by installing a WordPress theme and by spending time to adjusting the WordPress settings.
Deficiency #3 can solved by reading Edwiser.org's documentation on how to make Edwiser Bridge compatible with your theme;
Deficiency #4 can be solved head-on by an Edwiser Bridge's "Single-Sign On" commerical extension.
Deficiency #5 can be solved by installing and using the Moodle "Login/Logout user redirection" addon.

Further Help and Services by Edwiser

You can go here if you require Edwiser's expertise in theme customisation and installation or setup. In addition, Edwiser, bring open source developers also cater to requests for custom features of their bridge plugin.

Book Review: Tornado Down

noreply@blogger.com (Unknown) — Sun, 07 Feb 2016 07:20:00 +0000

Hi All

And now for something entirely different. A book review of the 1993 best-seller on Desert Storm. Tornado Down by John Peters and John Nichol.

I just finished the book. Here is my honest review.

The first page of the Book starts out literally with a bang. 280 pages later, it ends with a profound statement about what a hero and bravery is.

The book is well written and is easy to read. You feel as though both authors are speaking to you. Such is the power of reading a book! The authors' descriptive writing makes their whole experience come alive. All five senses will be engaged. You feel the excitement as the airmen prepare for imminent war. You feel the aircrew's fear of failure when the Tornados refuel in-flight, in pitch darkness. You feel the scorching heat of the desert. You feel the adrenaline rush as the desert floor whizzes past the Tornado that is flying at 500knots, 50 feet above the ground. You taste the fear in the aircrew when they see Triple-AAA greet them as they fly towards and over the Iraqi airfield. You feel the shudder of the aircraft as the SAM hits it. You smell the prison surroundings and feel the dampness of the floors of their eventual prison cells. You winch as the authors describe the brutal blows and torture landed upon them, time and time again. You sniff a tear as you read about their emotional reunions. Such is the power of the descriptive writing style of the authors.

You mind also engages in the book's fascinating description and explanation of military and tornado technical details. For example, The authors explain loft bombing in a way that even a non-war enthusiast can enjoy and understand. They also touch on avionics and electronic counter-measures. The book has photographs and even a cutaway diagram of the Panavia Tornado with over 280 labeled components. This being a paperback, the words and combines were legible, but a tad too small for my eyes. Is there a hardcover version of this book?

John Nichol and John Peters, the RAF Tornado crew shot down and captured over Iraq,
at IAT Fairford 1991, in front of Tornado "Gulf Killer".
Photo copyright Roger Colbeck.

I can divide the book into four parts. To war. Capture. Ordeal. Freedom. The first part made me experience their war preparation and actual combat mission. I learnt a lot from Tornado Down. I read first-hand the handling of the Tornado before and during the mission itself. That knowledge makes an ancient game like Digital Integration's Tornado come alive. There are many references and mentions of ordinances and weapons: JP-233s, chaff, flares, ECM, SAMs, Triple-A, etc

The second part sees the irony of life that one can still laugh in enemy territory after being shot down. There is also a miracle involved here. How they managed to remain unscathed despite enduring a fusillade of bullets their way.

The third part is where I was gripped by terror and suspense as I followed both Johns in their 7-week ordeal as a POW, not knowing what the next day or hour would hold for them. Even though this book was first published more than 24 years ago, I had never read it. So as I turned the page and read that they were ushered into a room blind-folded and surrounded by Iraqis, I had no idea what terror lay in wait for them. What you don't know scares you. This book gave me a first-hand account of what a POW can experience in the hands of brutal and evil captors. What happens in an interrogation room is not something we want to know, but trust me, after reading this book, you will know what that process involves. You also learn about survival skills. That mostly starts in the mind. The will to live.

The fourth part made me experience the highs, joys and triumphs of not just the airmen, but of their loved ones, their families, the whole RAF community and nations that never gave up on them. This book is a tribute to the living who served in Iraq's Desert Storm and to the dead who never came back.

The books has a liberal dose of subtle humor. Dry wit, British-style which no other nation in the world can match. Not even Malaysia. The homourous text are like precious gems scattered throughout the book. Less so in the chapters where both Johns are held captive, but still they are there. Brilliant when you come across a phrase or sentence which you detect is as sarcasm and dry wit. The best line of the entire book is spoken by Helen Peters, wife of John Peters the pilot. I won't tell you what it is, but suffice to say, it is when she finally talks to him over the phone after his release.

Tornado down is about the downing of a coalition bomber during Desert Storm, but it is also about the lifting of spirits. The human spirit. The book is available from Kobobooks.com, Amazon.com, but not available from a certain Frankie Kam. For me, this book is a keeper.

Cheers
Frankie Kam
Happy Chinese New Year 2016

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!)

noreply@blogger.com (Unknown) — Sat, 28 Nov 2015 04:48:00 +0000

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!

The course page
before I left-click a PDF file

Notice the PDF file resources that I drag and dropped into the Moodle 3.0 coursepage? Well, their display settings are the default "Automatic". How to use? With Google Chrome, click on the red PDF icon to download a file. Click on the file name link, e.g. "Lady Liberty (95 Kb)", to open the PDF contents inside a pop-up. That's a Frankie Kam innovation and a Moodle First.

The intermediate smaller window
opens seconds after a PDF file is clicked

The end result.
IMHO, very nice.

Coursepage link Site: http://cefl4u.org/m30/course/view.php?id=2
Username: sippycup
Password: Happy_go_lucky123
You may change the user's theme at any time.

The best thing about this is it works on multiple platforms - iPad, iPhone, Android, PC, Linux, etc. I think this is ART. I'm lovin' it.

Besides Essential theme, it also works with ALL other themes I have tested. Here is a long list of Moodle.org themes that I have installed and tested ShadowBox on:

Aardvark
Academi
Archaius
BCU
Campus
Clean
Contemporary
Crisp
Dynamic
Educacionbe
Eguru
Elegance
Essential
Evolve-D
More
Pioneer
Rocket
Roshnilite
Simple
Shoehorn
Squared

How to install In 11 Steps:

STEP 1. Download this zip file.
STEP 2. Extract the zip file. This is the structure of subfolders when the zip file is extracted.

The pdf.js-gh-pages subfolder stores the PDF.js library. This library is responsible for the PDF viewer that will open your PDF files in all their glory. That should go into your web server's Moodle folder.

The theme folder mirrors your Moodle theme folder. The three subfolders javascript, shadowboxpix and style need to be uploaded to your theme name's folder. For example, if your theme's name is Essential, then the subfolder javascript is to be uploaded to /public_html/Moodle/theme/essential.

The ViewerJS subfolder stores the ViewerJS library. That should go into your web server's Moodle folder. The ViewerJS library is used to open Open Document Format files.

STEP 3. Upload the pdf.js-gh-pages subfolder to your Moodle folder. My Moodle folder is m30. Yours will differ. This step is necessary if you want to open PDF files in a ShadowBox window.

STEP 4. Upload the ViewerJS subfolder to your Moodle folder. My Moodle folder is m30. Yours will differ. This step is necessary if you want to open Open Document Format files in a ShadowBox window. If you are going to deal solely with PDF files, then Step 4 is not necessary.

STEP 5. Upload the style folder into your theme's folder. The file is:

STEP 6. Upload the javascript folder into your theme's folder. The files are:

STEP 7. Upload the shadowboxpix folder into your theme's folder. The files are:

So, here's what my Essential theme folder looks like after Steps 5,6 and 7:

STEP 8
Edit line 86 of shadowbox.css

Change the URL to your website's Moodle. For example, if your website is at http://www.mysparky.com, and your Moodle files are in the folder /public_html/moodle, then line 86 should read as:

background: url("http://www.mysparky.com/moodle/theme/essential/shadowboxpix/shadowbox-icons.png") no-repeat;

STEP 9
Edit config.php so that it will access the Shadowbox CSS and JS files.

For the Essential theme, add these line of code:
$THEME->sheets[] = 'shadowbox';
and insert the code 'shadowbox', 'myShadowbox' inside this line:
$THEME->javascripts_footer = array('essential', 'coloursswitcher', 'shadowbox', 'myShadowbox');

For other themes, do it this way:

If the $THEME->sheets or $THEME->javascripts or $THEME->javascripts_footer code already exist inside the config.php file, then insert the code in blue:
$THEME->sheets = array('shadowbox');
$THEME->javascripts = array('shadowbox','myShadowbox');
-or-
$THEME->javascripts_footer = array('shadowbox','myShadowbox');

STEP 10
Edit course_section_cm_name function inside course/renderer.php file. Here's what my MODIFIED course/renderer.php file looks like. Sorry for the code headache. It's all GREEK to me. To help you out a bit, the pink background colored code is my secret brew. Not-so secret now. The function is long and windy because there is code to specifically handle Google Chrome, Firefox, and Safari iOS browser usage.

public function course_section_cm_name(cm_info $mod, $displayoptions = array())
{
$output = '';
if (!$mod->uservisible && empty($mod->availableinfo))
{

// nothing to be displayed to the user

return $output;
}

$url = $mod->url;
if (!$url)
{
return $output;
}

// Accessibility: for files get description via icon, this is very ugly hack!

$instancename = $mod->get_formatted_name();
$altname = $mod->modfullname;

// Avoid unnecessary duplication: if e.g. a forum name already
// includes the word forum (or Forum, etc) then it is unhelpful
// to include that in the accessible description that is added.

if (false !== strpos(core_text::strtolower($instancename) , core_text::strtolower($altname)))
{
$altname = '';
}

// File type after name, for alphabetic lists (screen reader).

if ($altname)
{
$altname = get_accesshide(' ' . $altname);
}

// For items which are hidden but available to current user
// ($mod->uservisible), we show those as dimmed only if the user has
// viewhiddenactivities, so that teachers see 'items which might not
// be available to some students' dimmed but students do not see 'item
// which is actually available to current student' dimmed.

$linkclasses = '';
$accesstext = '';
$textclasses = '';
if ($mod->uservisible)
{
$conditionalhidden = $this->is_cm_conditionally_hidden($mod);
$accessiblebutdim = (!$mod->visible || $conditionalhidden) && has_capability('moodle/course:viewhiddenactivities', $mod->context);
if ($accessiblebutdim)
{
$linkclasses.= ' dimmed';
$textclasses.= ' dimmed_text';
if ($conditionalhidden)
{
$linkclasses.= ' conditionalhidden';
$textclasses.= ' conditionalhidden';
}

// Show accessibility note only if user can access the module himself.

$accesstext = get_accesshide(get_string('hiddenfromstudents') . ':' . $mod->modfullname);
}
}
else
{
$linkclasses.= ' dimmed';
$textclasses.= ' dimmed_text';
}

// Get on-click attribute value if specified and decode the onclick - it
// has already been encoded for display (puke).

$onclick = htmlspecialchars_decode($mod->onclick, ENT_QUOTES);
$groupinglabel = $mod->get_grouping_label($textclasses);

// Display link itself.

$activitylink = html_writer::empty_tag('img', array(
'src' => $mod->get_icon_url() ,
'class' => 'iconlarge activityicon',
'alt' => ' ',
'role' => 'presentation'
)) . $accesstext . html_writer::tag('span', $instancename . $altname, array(
'class' => 'instancename'
));
$filename = $url;
if ($mod->uservisible)
{
/* Start of Frankie code */

// print_object($activitylink);

if ((strpos($activitylink, 'writer-24') !== false) || (strpos($activitylink, 'calc-24') !== false) || (strpos($activitylink, 'impress-24') !== false))
{
$url = str_replace("/m30/", "/m30/ViewerJS/#../", $url);
$output.= html_writer::link($url, $activitylink, array( /*'title'=>'Click text to pop-up PDF',*/
'rel' => 'shadowbox[Mixed]' /*,'onclick' => $onclick*/
)) . $groupinglabel;
/*
$output .= html_writer::link($url, $activitylink,
array('data-fancybox-type' => 'iframe', 'class' => 'fancybox', 'onclick' => $onclick)) .
$groupinglabel;
*/
}
else
if (strpos($activitylink, 'pdf-24') !== false)
{
/*$browser = $_SERVER['HTTP_USER_AGENT'];
$chrome = '/Chrome/';
$firefox = '/Firefox/';
$ie = '/MSIE/';
if (preg_match($firefox, $browser))
*/
if (core_useragent::is_chrome())
{
/*This code replaces this: http://cefl4u.org/teach/pdf.js-gh-pages/web/viewer.html?file=http://cefl4u.org/teach/mod/resource/view.php%3Fid=44
with this: http://cefl4u.org/teach/pdf.js-gh-pages/web/viewer.html?file=http%3A%2F%2Fcefl4u%2Eorg%2Fteach%2Fmod%2Fresource%2Fview%2Ephp%3Fid%3D44
%3A : Colon
%2F / Solidus (slash)
%2E . Period (fullstop)
%3D = Equals sign
%3F ? Question mark
*/
global $CFG;
$newurl = str_replace(':', '%3A', $url);
$newurl = str_replace('/', '%2F', $newurl);
$newurl = str_replace('.', '%2E', $newurl);
$newurl = str_replace('?', '%3F', $newurl);
$newurl = str_replace('=', '%3D', $newurl);
$newurl = $CFG->wwwroot . '/pdf.js-gh-pages/web/viewer.html?file=' . $newurl;
$activitylink = html_writer::empty_tag('img', array(
'src' => $mod->get_icon_url() ,
'class' => 'iconlarge activityicon',
'alt' => ' ',
'role' => 'presentation'
));

// So hard to just add the word download but here it is!
// $output .= str_replace('=""','',html_writer::link($url, $activitylink, str_replace('=""','',array('download'=>'','title'=>'Click icon to download'))));

$output.= str_replace('=""', '', html_writer::link($url, $activitylink, array(
'download' => '',
'title' => 'Click icon to download'
)));
$instancename = html_writer::start_span('instancename') . $instancename . html_writer::start_span('accesshide ') . 'File' . html_writer::end_span() . html_writer::end_span();

// ShadowBox

$output.= html_writer::link($newurl, $instancename, array(
'title' => 'Click text to pop-up PDF',
'rel' => 'shadowbox[Mixed]',
'onclick' => $onclick
)) . $groupinglabel;
}
else
if (core_useragent::is_firefox())
{
global $CFG;
$newurl = str_replace(':', '%3A', $url);
$newurl = str_replace('/', '%2F', $newurl);
$newurl = str_replace('.', '%2E', $newurl);
$newurl = str_replace('?', '%3F', $newurl);
$newurl = str_replace('=', '%3D', $newurl);
$newurl = $CFG->wwwroot . '/pdf.js-gh-pages/web/viewer.html?file=' . $newurl;
$activitylink = html_writer::empty_tag('img', array(
'src' => $mod->get_icon_url() ,
'class' => 'iconlarge activityicon',
'alt' => ' ',
'role' => 'presentation'
));

// So hard to just add the word download but here it is!
// $output .= str_replace('=""','',html_writer::link($url, $activitylink, str_replace('=""','',array('download'=>'','title'=>'Click icon to download'))));

$output.= str_replace('=""', '', html_writer::link($url, $activitylink, array(
'download' => '',
'title' => 'Right-click icon to download'
)));
$instancename = html_writer::start_span('instancename') . $instancename . html_writer::start_span('accesshide ') . 'File' . html_writer::end_span() . html_writer::end_span();

// ShadowBox

$output.= html_writer::link($newurl, $instancename, array(
'title' => 'Click text to pop-up PDF',
'rel' => 'shadowbox[Mixed]' /*,'onclick' => $onclick*/
)) . $groupinglabel;
}
else
if (core_useragent::is_safari_ios())
{
global $CFG;
$newurl = str_replace(':', '%3A', $url);
$newurl = str_replace('/', '%2F', $newurl);
$newurl = str_replace('.', '%2E', $newurl);
$newurl = str_replace('?', '%3F', $newurl);
$newurl = str_replace('=', '%3D', $newurl);
$newurl = $CFG->wwwroot . '/pdf.js-gh-pages/web/viewer.html?file=' . $newurl;

// ShadowBox

$output.= html_writer::link($newurl, $activitylink, array(
'title' => 'Click text to
pop-up PDF',
'rel' => 'shadowbox[Mixed]',
'onclick' => $onclick
)) . $groupinglabel;
}
else
if (core_useragent::is_ie())
{ /* Opera, and ALL others!!! */
global $CFG;
$newurl = str_replace(':', '%3A', $url);
$newurl = str_replace('/', '%2F', $newurl);
$newurl = str_replace('.', '%2E', $newurl);
$newurl = str_replace('?', '%3F', $newurl);
$newurl = str_replace('=', '%3D', $newurl);
$newurl = $CFG->wwwroot . '/pdf.js-gh-pages/web/viewer.html?file=' . $newurl;

// ShadowBox

$output.= html_writer::link($newurl, $activitylink, array(
'title' => 'Click text to pop-up PDF',
'rel' => 'shadowbox[Mixed]',
'onclick' => $onclick
)) . $groupinglabel;
}
else
{ /* Opera, and ALL others!!! */
global $CFG;
$newurl = str_replace(':', '%3A', $url);
$newurl = str_replace('/', '%2F', $newurl);
$newurl = str_replace('.', '%2E', $newurl);
$newurl = str_replace('?', '%3F', $newurl);
$newurl = str_replace('=', '%3D', $newurl);
$newurl = $CFG->wwwroot . '/pdf.js-gh-pages/web/viewer.html?file=' . $newurl;

// ShadowBox

$output.= html_writer::link($newurl, $activitylink, array(
'title' => 'Click text to pop-up PDF',
'rel' => 'shadowbox[Mixed]',
'onclick' => $onclick
)) . $groupinglabel;
}
}
else
{
$output.= html_writer::link($url, $activitylink, array(
'class' => $linkclasses,
'onclick' => $onclick
)) . $groupinglabel;
}

/* End of Frankie code */
}
else
{

// We may be displaying this just in order to show information
// about visibility, without the actual link ($mod->uservisible)

$output.= html_writer::tag('div', $activitylink, array(
'class' => $textclasses
)) . $groupinglabel;
}

return $output;
}

Please refer to the files modified_course_renderer.php and original_m30_course_renderer.php inside the zip file. Both are Moodle 3.0 files. You can see the diffchecker.com difference by clicking here.

If you are using Moodle 3.0, then rename modified_course_renderer.php to renderer.php and upload it to your /moodle/course/ folder. E.g., /public_html/moodle/course

STEP 11
If you are going to drag and drop Open Document Fornat (ODF) files to your coursepage, then please edit line 810 where it says:
$url = str_replace("/m30/","/m30/ViewerJS/#../", $url);
Change the m30 to whatever is accurate, reflecting your website URL. For my case, my Moodle files are stored at /public_html/m30 (LAMPP system).

One final screenshot. Here's an OpenOffice / LibreOffice / ODF file opening inside a ShadowBox window on my Moodle site.

Cor...isn't that a sight for sore eyes?

In summary, what have I achieved? I have created a work of art. It allows you to open and view PDF and ODF files without leaving your beloved Moodle course page. This is a step UP in Moodle usability. If your teacher is using Moodle as a glorified PDF file repository, he or she is going to thank you for it (I think). I have managed to get PDF files to open consistently on ALL major platforms. Now iPad and smartphone users can rejoice. And this solution is FREE for you to use.

I hope this helps. If you managed to get it to work and you are happy with this HACK, please drop me a comment below. Oh yeah, and please click the Like link. I'd like to achieve a target of at least 15 Likes. We shall see...

For future enhancement. I personally don't like hacking core code. It gives me a maintenance headache. However for now this is what I have to offer the Moodle community. If I ever get around to overriding the course renderer, then I will make the change and my life will be so much happier. If you can overriding the course renderer then please share with me and the Moodle community. After all, I'm just a poor, starving programmer in a still-developing country in South East Asia.

The inspiration for this blog post, where I integrate ShadowBox with Moodle Moodle, came from the book entitled "JavaScript Cookbook". Specifically pages 147 to 160, from "Chapter 9: Integrating External Libraries".

This excellent 2011 book is written by Alistair Hole. You can buy it from Packt Publishing or from Amazon.com. I hope that Alistair will update it for 2016. For me, some of the best inspirational ideas comes from the printed page. All hail the Book!

Finally, I want to give a shoutout and thanks to David Choi and Mary Evans for this Moodle.org post which helped me very much to understand how to use Shadowbox in Moodle.

Regards
Frankie Kam
Malaysia
Saturday 28th November 2015, 1:12pm.

UPDATE: 14TH APRIL 2017

Great news. I managed to get it to work on my Moodle 3.2 site running on the Boost theme. ;-)

In your /theme/boost/config.php, instead of using the code which I blogged about,
$THEME->sheets = []; /* Don't use this! */
use this code:
$THEME->sheets = ['shadowbox']; /* Use THIS code instead! */

Here's a video of me setting up ShadowBox pop-up window on my Moodle 3.2 server, using Boost theme.

Click here https://goo.gl/U4pfDw to download my Boost theme's config.php and my site's /course/renderer.php to see my code. The Google Drive link contains:
(1) The php file /theme/boost/config.php
(2) The php file /course/renderer.php (my modified file)
(3) The php file /course/renderer.bak.php (my original stock file)
(4) The zip file boost.zip (I zipped up my entire /theme/boost folder for you)

APPENDIX

ShadowBox/Moodle related links:
http://sites.middlebury.edu/moodle/2009/10/30/shadowbox-for-moodle/
https://moodle.org/mod/forum/discuss.php?d=322120
https://moodle.org/mod/forum/discuss.php?d=258455
https://moodle.org/mod/forum/discuss.php?d=217185
https://moodle.org/mod/forum/discuss.php?d=203583
https://moodle.org/mod/forum/discuss.php?d=227866
https://moodle.org/mod/forum/discuss.php?d=194263
https://moodle.org/mod/forum/discuss.php?d=181320
https://moodle.org/mod/forum/discuss.php?d=123065
https://www.youtube.com/watch?v=ZmLjp6onLGQ

Lightbox/Moodle related links:
https://moodle.org/mod/forum/discuss.php?d=205810
http://cogpsy.info/courses/mod/forum/discuss.php?d=3
https://elearningshow.wordpress.com/2010/10/30/improved-moodle-navigation/

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

noreply@blogger.com (Unknown) — Sat, 14 Nov 2015 10:52:00 +0000

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.

Slideshare Presentation (screenshots of Multi-platform pop-ups)

Multiplatform moodle pdf pop up screenshots from Frankie Kam

Want to know more? Read on!

Me showing the FancyBox PDF pop-up. Moodle 2.9 site. iPhone5 smartphone.
The Moodle theme I used is evolve-D by Chris Kenniburg.

Before you proceed further, please watch this Slideshare presentation. I presented it on iMoot Mini 2015 on Friday, November 6th 2015. Slides 32 to 40 are the ones that will give you the BIG PICTURE of how I enable my site to do PDF and ODF pop-ups. Pay attention to those slides. But enjoy the full presentation of course! :-)

iMoot Mini 2015 Presentation by Frankie Kam

Minii moot nov2015-moodle-and-pd-fs-clunky-funky-to-maxcoolness-frankiekam from Frankie Kam

Introduction and Prequisites

I've just created a new installation of Moodle 2.9.2+ (Build: 20151031).
It's at http://www.moodurian.com/durian

So in order to do this guide, you will need the following:
(a) A working Moodle 2.x site;
(b) FTP client like FileZilla for uploading and renaming files. Alternatively, CPanel with File Manager will also do;
(c) the Admin username and password of either the FTP or CPanel accounts of your Moodle site;
(c) A text-editor like Notepad++ to edit the source file(s)
(d) About 20 to 30 minutes of your time.

Let's roll!

Step 1: Download PDF.js libraryfrom https://www.dropbox.com/s/pp6o3ahs147kh53/pdf.js-gh-pages.zip?dl=0

PDF.js or pdf.js is a JavaScript library intended to render PDF files using the HTML5 Canvas for a safer and web standards compliant web browser rendering of PDF file. The project was launched in 2011 and is led by the Mozilla Foundation. I use it to load up a PDF file inside a Fancybox.

When you click the link you will see this screen.

Click the Download button. After you extract the download pdf.js-gh-pages.zip file you should see this folder structure:

Alternatively, you can download the latest copy from:
https://mozilla.github.io/pdf.js/getting_started/#download

When you click the link you will see this screen.

Choose the link that says "Stable". If you are feeling adventurous, then try the Beta link. The Stable zip file is around 3 Megabytes. After extracting the zip file you should see this folder structure:

IMPORTANT!
You will later RENAME the folder pdfjs-1.1.366-dist to pdf.js-gh-pages (see end of Step 5)!

Step 2: Download the ViewerJS code from the direct link http://viewerjs.org/releases/viewerjs-0.5.8.zip or by going to http://viewerjs.org/getit/ and clicking on the viewerjs-0.5.8.zip download button.

ViewerJS is pretty versatile document viewer that resides on your web server itself. The purpose of ViewerJS is to load OpenDocument files within a Fancybox. You can actually use ViewerJS to also load your PDF files, but I prefer to use PDF.js for that purpose.

After extracting the zip file you should see this folder structure:

Step 3: Download my 'Secret Recipe' code from https://www.dropbox.com/s/6coxzlaet21y4uh/moodle-hack-fancy-box.zip?dl=0

The 'Secret Recipe' code is a potpourri of Fancybox images, Javascript and CSS files. FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built on the top of jQuery and can be customised

The code is from my Dropbox account. You'll need a Dropbox account to download the code from the link above. The zip file is around 68 Kilobytes(!). After extracting the file you should see this folder structure:

Step 4: FTP and upload the PDF.js library I.e., the pdf.js-gh-pages or the pdfjs-1.1.366-dist folder from Step 1 (and its contents) to your Moodle main folder

FTP to your Moodle site and navigate to the your Moodle main folder, i.e., /public_html/yourmoodle. In my example, all my Moodle files and folders are inside /public_html/durian. So for me, durian is my yourmoodle folder.

Select either the pdf.js-gh-pages folder or the pdfjs-1.1.366-dist folder and upload it to your main Moodle folder. The folder contains 362 files. So it will take a while to upload, depending on your Internet speed.

For the rest of this Guide, I will use the pdfjs-1.1.366-dist folder as the example. It applies the same to if you had downloaded the pdf.js-gh-pages folder.

Alternatively, if you have CPanel access, you can upload the folder as a compressed Zipped file and then extract it as the folder pdfjs-1.1.366-dist inside /public_html/yourmoodle, which will be much faster compared to doing an FTP upload. Otherwise, if you have the time, then it is simpler and easier to just do an FTP upload.

In my example,

Before:

After:

IMPORTANT!
You MUST NOW RENAME the folder pdfjs-1.1.366-dist to pdf.js-gh-pages

Step 5: FTP and upload the ViewerJS folderfrom Step 2 (and its contents) to your Moodle main folder

FTP to your Moodle site and navigate to the your Moodle main folder, i.e., /public_html/yourmoodle. In my example, all my Moodle files and folders are inside /public_html/durian.

Select the ViewerJS folder and upload it to your main Moodle folder, i.e., /public_html/yourmoodle.

Alternatively, if you have CPanel access, you can upload the folder as a compressed Zipped file and then extract it as the folder ViewerJS inside /public_html/yourmoodle, which will be much faster compared to doing an FTP upload.

In my example,

Before:

After:

Step 6: Install one of these Moodle themes
(if you haven't already done so)

evolve-D (I will use this theme in this Guide)
BCU
Academi

Like so:

and

log into Moodle.org and navigate to the Evolve-D theme's plugin page.

Click the Install Now button and continue on with the series of buttons, links and screens until the theme is installed.

Step 7: Copy the Fancybox CSS file
from the source to destination subfolder

Copy moodle-hack-fancy-box\style\jquery.fancybox.css file into the /public_html/yourmoodle/theme/evolved/style subfolder

You should see this:

Simple and painless so far.

Step 8: Create a sub-folder named javascript inside /public_html/yourmoodle/theme/evolved/

If the subfolder /public_html/yourmoodle/theme/evolved/javascript already exists, then Step 6 can be skipped.

Step 9: Copy the following Javascript files
from the source to destination subfolder

Copy moodle-hack-fancy-box\javascript\jquery.fancybox.js file into the /public_html/yourmoodle/theme/evolved/javascript subfolder

Copy moodle-hack-fancy-box\javascript\jquery.fancybox-media.js file into the /public_html/yourmoodle/theme/evolved/javascript subfolder

You should see this:

So far this is easy right? Now let's edit a core theme file.

Step 10: Copy the pixpdf folder
from Step 3 into the /theme/evolved folder

Before:

After:

Step 11: Edit the config.php file
of your theme (add the CSS filename)

FTP to your Moodle site and navigate to the /public_html/yourmoodle/theme/evolved folder.

Select the public_html/yourmoodle/theme/evolved/config.php file. You might want to download a copy and rename the downloaded copy to config_original.php or something memorable - just in case.

Search for the code $THEME-->sheets and edit the line where it appears. Specifically, insert the code , 'jquery.fancybox' after 'custom'. Like so:

Before:

After:

Notice that I added the code 'jquery.fancybox' to the array list inside line 28 of config.php.

Save the file and make sure the saved file is uploaded back into the public_html/moodle/theme/evolved/ folder.

Step 12: Add the Javascript filenames
to your config.php file

Add the code

$THEME->javascripts_footer =
array('jquery.fancybox','jquery.fancybox-media');

inside the config.sys file. For example,

Before:

After:

Save the config.php file.

If you have reached this far, well done. The last step is a core code hack. You're almost there. Go ahead, take a breather. Or take five (minutes break).

Step 13: Edit the /course/renderer.php file

Note: this is a core code hack. Please be vigilant, exercise caution, and above all, BACKUP your original core file!

FTP to your Moodle site and navigate to the /public_html/yourmoodle/course folder.

Make a backup of your /public_html/yourmoodle/course/renderer.php file. In the example shown below, I have renamed it to /public_html/yourmoodle/course/renderer_original.php

Do you notice the file named Inside_the_course_folder_renderer.php inside the folder \Downloads\moodle-hack-fancy-box ? It is a Moodle 2.9.2 file. If both renderer.php files are the same Moodle version, then you can just replace the original /public_html/yourmoodle/course/renderer.php file with the contents of the Inside_the_course_folder_renderer.php file.

In the example shown below, I first upload the modified file to /public_html/yourmoodle/course.

Then I rename the modified file to /public_html/yourmoodle/course/renderer.php.

The difference between the two renderer.php files is just the function named public function course_section_cm_name(...). This can be clearly seen in this diffchecker.com link: https://www.diffchecker.com/iqhbdysl

Step 14: Enable enable OpenDocument Format (ODF)
files to pop-up

The last thing you need to do is to edit the /public_html/yourmoodle/course/renderer.php file like so:

Before:

After:

Rename that teach folder to your main Moodle folder's name. In my example, my main Moodle folder's name is durian.

If you do this correctly, the ViewerJS PDF viewer will be called whenever you click on an Open Document / Open Office / Libre Office file. Specifically, a Writer, Calc or Impress file that has been dragged-and-dropped into the course page, with the "Display" option set to the default "Automatic".

Step 15: Adding a Loader/Spinner to the ViewerJS viewer

The purpose of a loader/spinner image is two-fold:
(1) To tell the user that something is going on (loading is progress)
(2) To allow the admin to brand the company or product by using a customised logo as the spinner image.

How did I add a customised spinner to the ViewerJS?

The folder ViewerJS contains a file named index.html. The code to add a custom spinner gif image is found inside this index.html file.
To know where to put it, please download the zip file from: https://goo.gl/Fw837Y
This zip file contains three files:

index.html
index_original.html
spinner.gif

The file named index.html is the modified file with the GIF spinner code inside it, while the file named index_original.html is obviously the original index.html minus the code that adds the spinner gif. The file named spinner.gif is an animated GIF file (rubik's cube).

To understand fully what to do, you can also go to: https://github.com/kogmbh/ViewerJS/issues/96 and you will see that I have solved the problem of the stock ViewerJS not having a spinner/loader gif. I reproduce the crux of the issue solved:

To see the difference between the two files index.html and index_original.html, click on this diffchecker.com link:
https://www.diffchecker.com/ch6uchil

I reproduce the result of the diffchecker link by showing you this screen snippet:

The red rectangle contains the code of the modified index.html.
The greed rectangle contains the code of the original, unmodified index.html.
The red and green highlighted code are the differences between the two files. All other code are exactly the same! The differences are as clear as crystal.

Here's the critical line of code:
url(images/spinner.gif);background-repeat: no-repeat;background-position: center; }#canvasContainer.slideshow

It tells the browser to load the spinner.gif in the background of the ViewerJS window. The position of the gif file is specified as "center".

The yellow background code is the difference of code between the red and green rectangular sections.

So, to add a spinner image to the ViewerJS,
(a) you can make use of my modified index.html, simply upload it to
/public_html/yourmoodle/ViewerJS overwriting the original index.html file.
(b) Upload the spinner.gif file to your /public_html/yourmoodle/ViewerJS/images folder. You can replace it with an animated loader/spinner image file of your own choice.

If you want to use my gif file, here it is:

Step 16: Modify the Loader/Spinner of the PDF.js viewer
If you wish to change the default spinner of PDF.js, it is very easy. Look for the file named /public_html/yourmoodle/pdf.js-gh-pages/web/viewer.css. The CSS file contains this line of code (around line#150):

Here's the original loading-icon.gif file which is located in: /public_html/yourmoodle/pdf.js-gh-pages/web/images/loading-icon.gif

So if you want to replace it, just rename the Rubik's Cube gif as loading-icon.gif and upload it to /public_html/yourmoodle/pdf.js-gh-pages/web/images/

Simple!

By the way, the Rubik's cube above is a slightly smaller version of the first one shown at Step 15.

Step 17: Test your Site
The proof of the pudding is in the eating!

You should now enjoy the fruit of you labour by going to your Moodle site and clicking on the course that has its theme set to Evolve-D. Remember to use this theme as per this Guide to test the pop-ups.

Go to my test Moodle 2.9.2+ sites at http://www.moodurian.com/durian/course/view.php?id=2 and login as:
Username: sippycup
Password: Happy_golucky123

AND

http://cefl4u.org/teach/course/view.php?id=13
Username: sippycup
Password: Happy_golucky123

Click on the PDF file on the course page.

Phew, after all that effort, it works! If it didn't work for you, check all the steps above. Fine-tooth comb every instruction step. Did you miss out anything?

Also try to clear your Moodle cache by going to Site Administration | Development | Purge all caches.

Here's the PowerPoint file that has been saved as an ODP file:

Very nice. That's it!

If you managed to get it to work on your site, I would love to hear from you.
:-)

Regards
Frankie Kam

Postscript - 16th November 2015
I have modified both /course/renderer.php and added some code to /theme/evolved/style/jquery.fancybox.css so that now you can also pop-up OpenDocument Format (*.ods, *.odp, *.odt) and text (*.txt) files inside a Fancybox. Click on the links above to download the latest two files with the changes made.

Postscript - 21st November 2015
I used this Moodle.org forum post/thread and Shadowbox to enable the PDF popup for Essential and Pioneer themes! Many thanks to Mary Evans for guiding David Choi through the steps to enable Shadowbox Javascript library in Moodle.

Proof1: Essential theme

Proof2: Pioneer theme

This is a subject for a new blog post on the subject. For another day!

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.

noreply@blogger.com (Unknown) — Sun, 25 Oct 2015 14:30:00 +0000

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.

It comes with a Rubik's Cube spinner image (gif) to indicate loading time:

The spinner can of course be changed. Perhaps to an institution's animated logo for branding.

I can begin reading the pages, even before the entire PDF document has finished loading. In the screenshot image below, the first set of pages are already visible, and the white loading progress bar has not yet reached the 50% stage of loading completion. Nice!

Give this a try: try opening one of these babies using a phablet, smartphone or a tablet in landscape mode. Then turn your tablet (iPad, Galaxy Tab) 90 degrees clockwise or anti-clockwise in portrait mode. Whoa!

3. What's hot and what's not

The advantages of this 'unconventional' way of viewing PDF files are as follows.

1. Multi-platform and portable. So it works on any PC, Android or iOS device.

2. Viewing PDF files on the page itself is a better and nicer experience than having the PDF contents open in the same page, and hitting the web browser's Back button to return to Moodle

3. iPad and iPhone users can now view PDF files easily

4. You can print and download the PDF from within the pop-up window itself

5. The first few pages lazy load inside the pop-up window so you don't have to wait for the entire document to finish downloading before reading

6. You can customise the loading/spinner image by using various animated gifs. This is good for branding as you can use your company's logo.

7. Works with Open Document Format files (ODF).

As a balance, here are some disadvantages:

1. Not a plugin. Requires a hack of core code. The hack is not much as it only affects the course/renderer.php file. That's one file. If you want the pop-up window to display ODF file contents, then you will have to hack the lib/outputcomponent.php file. That's two files at the most.

2. Doesn't work with Ms Office files. Well sort of. I mean it can work if the Ms Word / Ms Excel / Ms PowerPoint / RTF file is kept in a public folder. If you password protect, say, Ms Word, the pop-up will populate, but only with a warning that the file is password-protected. Hence you cannot proceed to view the contents of the Ms Word inside the pop-up. The alternative is to not password protect the opening of the Ms Word file. But the consequences are that Google will record the URL of the document, and the lack of privacy/security as the whole world and all its Netizens thereof, will be able to access your public file.

3. Users who want to immediately download a PDF file by clicking on the resource link will be disappointed. It's not possible. At least not in one-single step. But it will work in two steps: (a) Open the document inside the pop-up windows. (b) Click the download icon located at the top-right corner of the pop-up window. Bob's your uncle.

4. Working demo site

Here's the Moodle 2.9 Sandbox coursepage site. Please use it to see how the PDF pop-up works on your mobile device or computer:

http://cefl4u.org/teach/course/view.php?id=13
Username: sippycup
Password: happygolucky

Note: if it's not up for some reason, check back in a day or two.

I don't know of anyone else who has done something like this for a Moodle coursepage. For me, it is a Moodle first (at least on my production site). I hope to blog about it in more detail once I can find the time to do so in the midst of my current workload and priorities.

In the meantime, do you think this might be useful for your institution's Moodle production site?

5. The Problem ... and it's really real

I did some 'research' on Twitter. I wanted to know what difficulties users faced when trying to access or open a PDF file on a mobile device, specifically Apple's iPad. I found 30 tweets that were enlightening to me. Bear in mind that some of the tweets are more than 8 years old. My point is that people do complain about accessing PDFs on their tablets or smartphones. So I believe that there exists a need to deal with PDFs properly and uniformly.

I believe the solution (this one on this blog post) that I have crafted on my Moodle production site will help reduce the frustration of users. More than that, it will make for a more pleasant experience when viewing a PDF file inside a Moodle course page.

6. Existing Remedies

I also dug up some existing solutions to opening PDFs on the iPad:

From: http://moodle-support.hku.hk/faq/how-can-i-view-pdf-file-ipad

From: https://moodle.bbk.ac.uk/mod/forum/discuss.php?d=579

From: http://libanswers.mtholyoke.edu/faq/90124

From: https://moodle.org/plugins/view.php?plugin=mod_pdfjsfolder&moodle_version=15

There are other solutions based on PDF.js which I may have left out. Please let me know what they are in the comments section.

7. In summary...

...the solution that I am advocating relies on a hack of the source code and drag-and-drop. It is applicable to any Moodle theme, provided the config.php is set to access the necessary additional Javascript and CSS files.

So once you get past the hack part, as far as the user is concerned, it is cleaner, usable, efficient and more aesthetic.

So how the heck did I do the hack that I implemented on my Moodle 2.9 sandbox site? Curious? Three words. Fancybox, PDF.js and ViewerJS.

Regards

Frankie Kam

Malaysia

Email: boonsengkam at gmail dot com

APPENDIX

IT DOESN'T JUST STOP AT PDF FILES. LET'S ALSO OPEN ODT, ODS, ODP (OPENDOCUMENT FORMAT), DOCX, XLSX AND PPTX (MS OFFICE) FILES!

I can also open the following OpenDocument Format (ODF) files.

An ODT file that has been dragged-and-dropped into
the course page can open inside the pop-up

Writer (ODT)
Impress (ODP)
Calc (ODS)

Just beware that the output of an OpenDocument file may not always exactly follow its Ms Office counterpart from which it originated from.

I can also open Ms Office files (using a link to https://view.officeapps.live.com/op/view.aspx?src=url to document) provided that the file is stored inside a public folder of the web server. This is both great and bad. Great because I don't have to convert, for example, the Ms Word file into PDF, and also the user need not have Ms Office installed on his or her computer.

An Ms Word file located in a public folder, accessed by Word Online

Bad because the file is publically accessible by everyone, and I mean everyone, and Google will list the file in its search and cache database. You have been warned.

Also bad because you cannot drag and drop an actual Ms Office file into the course page and expect the file to load up inside a pop-up window. It won't. In the example screenshot above (Lady Liberty), I created a Moodle Label resource, went into HTML mode and used HTML code to get OfficeAppsLive to access the file that was inside a public folder on my web server.

And that ladies, and gentlement, is what this crazy Moodle boffin and poor, starving programmer in a developing nation in South East Asia has created. Thank you for your applause.

Update. Captain's Log, Stardate 43125.8. Friday 30th October 2015. The Klingons...

THERE'S ONE MORE THING

I want to download files with no fuss!

I have managed to tweak the code so that you can now choose to either (1) quickly and easily download a PDF file, OR (2) open it in a pop-up. So now, you no longer have to wait for the pop-up window to load the contents before clicking that download icon within the PDF.js frame. This works best in a scenario where the user just wants to download the whole list of PDF files one by one. Chop, chop, chop, chop....he or she wants to download 20 PDF files with no fuss and no technology standing in the way. So on my Moodle 2.9.2 site, if you want to download the file, in Google Chrome, just click the PDF icon and the file will immediately download into your Download folder. Hey, no fuss. If you have ten files to download, then click at will!

Note that on Mozilla Fire fox, it is (as of now) the opposite. You have to "right-click the mouse" and choose "Save as a link" to download a file.

Whoa, you mean, like now I can choose between downloading and opening the PDF in a pop-up window? Uber cool....

If you want to proceed with viewing the PDF file online, right on the course page itself, then click the text link of the PDF resource. Within the PDF.js window, you can also click the Download icon. See image below. It is highlighted in yellow.

The best of both worlds. If I hadn't convinced you earlier of the efficaciousness of this PDF pop-up new fangled toy, now are you convinced?

Cute and cuddly. Maximum coolness.

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

noreply@blogger.com (Unknown) — Mon, 22 Jun 2015 08:03:00 +0000

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:

After clicking "Da Store" activity, I am transported into my WordPress page. The Wordpress site can open up either as an embed or as a separate window.

Notice the same login details above? The Single-Sign On (SSO) is part of a bigger picture called LTI (Learning Tools Interoperability). For a layman's explanation, head over to Quora. Gavin Hendrick has some super organised thoughts on LTI in his blog post.

In this post, I am going to show all the steps needed to do this.
The 10 steps are divided into 3 phases:

Section I: Newbies section (skip this and go Click here if you already know this)
1. Create a MySQL database
2. Create a MySQL user to link to the database
3. Download and install Wordpress

Section II: Multisite Wordpress Section
4. Setup Wordpress as a multisite

Section III: The LTI Connector Section
5. Download and install SPV's LTI Connector for WordPress
6. Modify wp-config.php for WordPress to allow Tool Consumers to be saved
7. Add a Tool Consumer record

Section IV: The Moodle Section
8. Creating a Moodle LTI external tool type
9. Adding an LTI external tool on your Moodle coursepage
10. Testing the fruit of your labours - it works!

And off we go!

Section I: Newbies section (skip this and go here if you already know this)

1. Create a MySQL database

Log into your CPanel.

In your CPanel, click on "MySQL Database Wizard" icon.

Enter your database name. Mine will be frankie_wrdprss. Yours may differ. Click "Next Step".

2. Create a MySQL user to link to the database

Enter the name of the username that will be used to access the MySQL database. My username will be frankie_wrdprss. Type in the password twice. Choose a password that consists of letter, numbers and special characters. Click the "Create user" button.

At the user's privileges window, tick the "ALL PRIVILEGES" checkbox. Click "Next Step" button.

If all went well, you should see a 'success' window. This concludes Part 1.

3. Download and install Wordpress

Surf over to https://wordpress.org/download/

If you are using a Windows server, click the download Wordpress 4.2.2 button. If that button now reads as 5.x.x, then you will know how outdated this post is, LOL! If you are using a LAMPP (Linux) system, click the https://wordpress.org/latest.tar.gz

Go back to your CPanel.

Click the File Manager icon.

Go to the Web Root by checking the option. Click Go.

Create a new folder by clicking the "New Folder" icon.

Type the text "blogwp" as the folder name and click the "Create New Folder" button.

Refresh your screen (usually F5). You should see the new blogwp folder in the list.

Double-click your mouse on the blogwp folder. The directory is empty. You are now ready to upload the Wordpress compressed file either by FTP or by the CPanel's File Manager.

Once the upload has finished, return to the /public_html/blogwp.

Extract the file's contents. A new subfolder named Wordpress will be created,

Click the Close button. Next make sure you move the contents of /public_html/blogwp/wordpress into /public_html/blogwp:

You can then delete the (by then) empty wordpress subfolder. Your /public_html/blogwp folder should look like this:

Go to your webbrowser and type http://www.yourdomain.com/blogwp

Choose your language (English (United States) is the default) and click the "Continue" button.

Click the "Let's go!" button.

You will see the above window. Remember the database name, username and username's password that you had created earlier? Now's the time to enter them into the edit boxes.

Click the Submit button. If the details were entered correctly, you will be prompted with the following screen:

Click the "Run the install" button. The "Information needed" window will appear. Type in your blog's title and the administrator user's login details. For example:

Important! Use DIFFERENT sets of admin username and password for your Moodle admin account and your Wordpress admin account. Please choose separate admin usernames and separate passwords to avoid any complications during the sign-on from Moodle to Wordpress.

Click the "Install Wordpress" button to initiate the installation of Wordpress. If successful, you should see the following window:

Click the "Login" button to test your blog site.

Enter your Username and Password. Click the "Log in" button.

If your Wordpress 4.2.2 site has been successfully setup, you should see this screen:

Congratulations! You are now ready to go to Steps 4 through to 9. Stay logged into your Wordpress site. Do not log out yet.

Section II: Multisite Wordpress Section

4. Setup Wordpress as a multisite

FTP into your /public_html/blogwp folder. Right-click the file named "wp-config.php" file. Choose "View/Edit" from the shortcut list. This section assumes that you have a decent text-processor to edit the php source code.

Go to line 88 of the file. You should see this code:

Add the line of code at line 86:
define('WP_ALLOW_MULTISITE', true);
so that the code now looks like this:

Save the 'wp-config.php' file.

If you check your Wordpress left menu, you should see options available under "Tools".

Refresh your web browser. If you check your Wordpress left menu, you should see an additional option named 'Network Setup' available under "Tools":

Click the Network Setup link. You should now see this screen:

Click the Install button. The following screen will appear.

In the file named /public_html/blogwp/wp-config.php, add the code:
define('MULTISITE', true);
define('SUBDOMAIN_INSTALL', false);
define('DOMAIN_CURRENT_SITE', 'www.cambridgekids.org'); <== Careful!!
define('PATH_CURRENT_SITE', '/blogwp/'); <== Careful!!
define('SITE_ID_CURRENT_SITE', 1);
define('BLOG_ID_CURRENT_SITE', 1);

just above the code that says /* That's all, stop editing! Happy blogging. */
so that the code now looks like this:

Be careful to replace the highlighted code with your own domain name and folder name.

Edit the file named /public_html/blogwp/.htaccess and replace the highlighted section

with this code:
RewriteEngine On
RewriteBase /blogwp/ <== Careful!!
RewriteRule ^index\.php$ - [L]

# add a trailing slash to /wp-admin
RewriteRule ^([_0-9a-zA-Z-]+/)?wp-admin$ $1wp-admin/ [R=301,L]

RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(wp-(content|admin|includes).*) $2 [L]
RewriteRule ^([_0-9a-zA-Z-]+/)?(.*\.php)$ $2 [L]
RewriteRule . index.php [L]

Again, be careful to replace the above yellow highlighted code with your own folder name.

So your .htaccess file should now look like this:

Save both wp-config.php and .htaccess files. Log out of Wordpress. Log in again.

This time the home screen looks different:

In addition, if you hover your mouse cursor over "My Sites" you will see a new option "Network Admin" with its own set of options (Dashboard, Sites, Users,...etc.).

Create a writable subfolder named blogs.dir and place it inside /public_html/blogwp/wp-content:

Section III: The LTI Connector Section

5. Download and install SPV's LTI Connector for WordPress

Surf here and download the file wordpress-lti-1.1.00.zip which is found inside the "Files Tab".

Extract the zip file to your harddrive. The contents of the zip file look like this:

Upload the subfolder lti into the plugins directory of the WordPress instance. I.e., into /public_html/blogwp/wp-content/plugins

Your plugins folder should now look like this:

Log out of WordPress. Re-login as the administrator;
Navigate to the Network Admin | Plugins.

Click on Plugins and you will see this:

Check the LTI tickbox and then click LTI's "Network Activate" link to activate the plugin.

The LTI plugin is now activated and ready to be used.

Once enabled, the module will automatically create a set of tables in the WordPress database and a new menu option named "LTI Tool Consumers" will appear on the dashboard menu.

If you need to completely remove the LTI plugin from your WordPress installation, delete the public_html/blogwp/wp-content/plugins/lti subfolder and use phpMyAdmin to remove the database tables using the following SQL:

DROP TABLE wp_lti_user;
DROP TABLE wp_lti_nonce;
DROP TABLE wp_lti_share_key;
DROP TABLE wp_lti_context;
DROP TABLE wp_lti_consumer;

6. Modify wp-config.php for WordPress to allow Tool Consumers to be saved

If you have access to the server you can force WordPress 4.4.2 to use MySQLi as the connector by adding (assuming you have the MySQLi connector) into /public_html/blogwp/wp-config.php this code:
define('WP_USE_EXT_MYSQL', false);

Here's what that 'defines' part of /public_html/blogwp/wp-config.php looks like, after the addition:

Save the /public_html/blogwp/wp-config.php file.

Log out of Wordpress. Re-login as the administrator.

A note from Simon Booth's site:
If you have to stick with the MySQL connector then a quick cheat will fix things. Edit the file /public_html/blogwp/wp-content/plugins/lti/lib/LTI_Data_Connector_mysql.php
and make
line 35: global $wpdb;
line 51: $this->dbTableNamePrefix = $wpdb->prefix;

7. Add a Tool Consumer record

Navigate to My Sites | Network Admin | Dashboard

Click the "Dashboard link". You will now see the

Navigate to LTI Tool Consumers | LTI Tool Consumers.

Click the "LTI Tool Consumers" link. You will see an empty list of Tool consumers. To add a Tool Consumer, click the "Add New" button.

You will see this screen:

Type in "blogs" as the Name. Tick the "Accept launch requests for this tool consumer" check box. Tick the "Resource: Prefix the ID with the consumer key and resource link ID" radio button.

Click the "Add Tool Consumer" button to save the tool entry. Wordpress will display the Launch URL, the (Consumer's) Key and the Secret (Key) codes. You should copy and paste these values into a text editor like Notepad.

Clicking again on the LTI Tool Consumers link will give you the list of Tool Consumers created so far:

You can now log out of Wordpress.

Section IV: The Moodle Section

8. Creating a Moodle LTI external tool type

Log into your Moodle site with your Moodle admin account details. Navigate to "Site administration | Plugins | Activity modules | LTI | Manage external tool types".

You will come across "Manage external tool types" screen:

Click the "Add external tool configuration". Enter the following details:
Tool name: blog
Tool base URL: http://www.yourdomain.com/blogwp/?lti

Here's the sample codes taken from Section III.

Consumer key: the "Key:"
Shared secret the "Secret"
Tick the "Show tool type when creating tool instances" check box
Choose a Default launch consumer, e.g., "Embed, without blocks".

As shown below:

Under the Privacy section, set "Accept grades from the tool" to Never.

Click the "Save changes" button. You will see you entry saved and appear as below:

9. Adding an LTI external tool on your Moodle coursepage

Go to a course on your Moodle site. Add an External Tool activity on the course page.

You will see this appear:

Type an Activity name. For example, My blog.
Click the "External tool type" dropdown list and choose blog.

Click the "Save and return to course" button. You will see your External Tool activity on your course page.

10. Testing the fruit of your labours - it works!

Log out of Wordpress. Click on the activity "My blog". You will see the Wordpress homepage embedded in the course page. Note that the user is logged into Wordpress as "CEFL WP Admin".

In this example, I am logged in as CEFL WP Admin in both Moodle and Wordpress. Success!

Log out. Log in as another Moodle user. Preferably as a student user.

Navigate to the External Tool activity on the course page.

Click on the activity "My blog".

In this example, I am logged in as Alex The Lion in both Moodle and Wordpress. Success!

In conclusion, the SSO between Moodle and Wordpress works. I hope this is useful for you and that you have saved a lot of hours by reading this post. If you are also have managed to successfully use Simon Booth's LTI Connector plugin for your own production or test site, please drop in a comment. I would love to hear from you.

Cheers
Frankie Kam, Malaysia

APPENDIX

Some afterthoughts. Still can't work?
(1) Did you replace the your own correct domain name and folder name inside wp-config.php?
(2) Did you replace the your own correct folder name inside .htaccess?
(3) Make sure that your Wordpress admin account's username and password are different from your
Moodle site's admin account.
(4) Double check the contents of .htaccess and wp-config.php.
(5) Perhaps you didn't upload the lti folder into the plugins folder of Wordpress.
(6) Maybe you don't have mod_rewrite enabled on your Apache web server. Read here.
(7) The LTI Consumer Tool doesn't save the record to the list after clicking "Add New"? Read here.
(8) Send me an E-mail: boonsengkam at gmail dot com.

Useful References:

Using WordPress Multisite: A Network of Websites at Your Fingertips
http://code.tutsplus.com/articles/using-wordpress-multisite-a-network-of-websites-at-your-fingertips--wp-23978
LTI Connector for WordPress Homepage
http://www.spvsoftwareproducts.com/php/wordpress-lti/
Projects Oscelot Org's plugin page
http://projects.oscelot.org/gf/project/wordpress-lti/frs/?action=FrsReleaseView&release_id=918
Direct download of LTI plugin used in this post
http://projects.oscelot.org/gf/download/frsrelease/918/5837/wordpress-lti-1.1.00.zip
Solving the "No Tool Consumers Saved When Added" problem
http://projects.oscelot.org/gf/project/wordpress-lti/forum/?action=ForumBrowse&_forum_action=MessageReply&message_id=1761
Review: LTI Provider for Moodle 2.2
http://www.somerandomthoughts.com/blog/2012/01/08/review-lti-provider-for-moodle-2-2/
My outdated blog 2013 post on the same subject

http://moodurian.blogspot.com/2013/07/integrating-moodle-and-wordpress.html

Useful Terminology (Source: LTI Best Practice Guide)

The LTI specification uses the following terms:
 tool consumer - typically this refers to the VLE; it is the system which users are logged into
and from which they will be redirected to the external applications being integrated with it;

 tool provider - this is the web-based learning application or content delivery system which is
being integrated with the tool consumer;

 consumer key - this string value is generated by the tool provider to allow them to uniquely
identify the source of requests being received;

 shared secret - the communications between the tool provider and the tool consumer are
secured using a signature generated using the OAuth 1.0 protocol [OAuth-A] with the shared
secret (which should be known only to the tool provider and the tool consumer);

 context - tool consumers are typically organised into courses, with users being enrolled into
each course for which they are permitted to access; thus, in this case, the course is the
context from which users launch into tool providers;

 resource link - this is the actual link provided within a context which users follow to access
the tool provider; there may be multiple resource links to each tool provider within the same
context and across the whole tool consumer but each resource link is uniquely identified.

Last updated by Frankie Kam on 4^th August 2015

Tested on Moodle 2.9 and Wordpress 4.2.2 and 4.2.3

Seamlessly connect Moodle 2.9 to Wordpress with Simon Booth's LTI Connector plugin for Wordpress 4.2.2 and... by Frankie Kam

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

noreply@blogger.com (Unknown) — Tue, 19 May 2015 14:06:00 +0000

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 ?

As this is now my 200th blog post on Moodurian.blogspot.com, I am happy to announce that I have finally cracked the puzzle. In a nutshell, I am using these three tools:

FancyBox JQuery tool
Zoho's online Excel viewer
Microsoft's view.officeapps.live.com website
Plus some Moodle core code hacking (sorry!)

The main sources of inspiration were this 2014 post by Harmut Scherer

(who was originally inspired by a 2013 blog post by Paolo Oprandi

entitled Making Moodle More Engaging By Rethinking The display Of Content), this lets-develop.com Tutorial entitled "How to use fancybox, a popup window containing what ever you want", the excellent demo page of How to use the Fancybox by Olivia Hoback and Fancyapps website by Janis Skarnelis.

What is FancyBox? It is "a tool that offers a nice and elegant way to add zooming functionality for images, html content and multimedia on your webpages".

In this blog post I will share with you what I managed to train my Moodle site to do.

Figure 6. Log into my Moodle 2.9 site for a demo.
Click on the Le Boffin's Lab coursepage.

Firstly you can experience it yourself by logging into my Moodle 2.9 site (I can't wait for Moodle 3.0!). Use the Guest login to access the Le Boffin's Lab coursepage.

Figure 7. Two sections with accordion links.

Click on the "+ Click-to-reveal content" links to open the accordion sections...

Figure 8. The top section with an opened accordion.

Figure 9. Clicked on an image. The lightbox effect is used.

Figure 10. An image gallery.

Figure 11. An embedded website (www.moodurian.com) inside an iFrame.

Figure 12. A Zoho online Excel viewer link.

Figure 13. An Ms Excel file viewed by the Microsoft Online App site.

Figure 14. An Ms Word file viewed by the Microsoft Online App site.

Figure 15. An Ms PowerPoint file viewed by the Microsoft Online App site.

Figure 16. A textfile's contents.

Figure 17. A PDF file.

Figure 17. An Instagram image.

Figure 18. An embedded Youtube. You do not need to leave the tab or
webpage when viewing the video. How nice and convenient!

Figure 19. A Vimeo embedded video.

Figure 20. A window with multiple elements.

Figure 21. This is an Open Document format (ODT) file. Originally it was a Ms Word (docx) file that I saved as
an ODT file.As long as there are no complicated tables or figures in the original document, the ODT version
will stay faithful to the original. By the way, this file was uploaded into a Moodle folder resource. The URL of the file
is internal to Moodle and it shows up ok in the viewer. This could never happen with a docx file!
I am also able to view ODS (Open Document spreadsheet) and ODP (Open Document presentation) files.

Conclusion:
It is impossible at this time (for me at least) to upload Ms Office files into a Moodle resource type like the folder type, AND to be able to view them with an internal viewer. At best, I can upload Ms Office files into a 755 permissions folder and use Microsoft's online viewer tool to view them. That works fine except that such Ms Office files will be exposed to the public and is not hidden by Moodle from the outside world. At the moment, this post and my current work proves that I can upload PDF, TXT, ODS, ODT, ODP, PHP, PNG, JPG, GIF format files to a Moodle folder resource, and view then without leaving the course page by using JQuery.

In Part II of this post, I will share with you the code that allowed my Moodle site to behave this way. If you can't wait for my second post on this subject, you are most welcome to send me an E-mail at boonsengkam@gmail.com. Cheers!

regards
Frankie Kam, 19th May 2015

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

noreply@blogger.com (Unknown) — Wed, 06 May 2015 15:45:00 +0000

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:


<a target="_new" href="http://www.cambridgekidz.org/moodle/ViewerJS/#../pdfs/demodoc.pdf">PDF file (via ViewerJS)</a>


5. You can also embed a PDF window inside your course page. Here is the HTML code of another Label resource:

The softcopy for your convenience is here.

<center>
<iframe style="text-align: center;" src="http://www.cambridgekidz.org/moodle/ViewerJS/#../pdfs/demodoc.pdf" width="400" height="300" allowfullscreen="" webkitallowfullscreen="">
</iframe>
</center>

6. The result is nice.

7. If you click the "PDF file (via ViewerJS) link, a separate tab will open up with the PDF file's contents. The interface has several tools that are useful - zoom in, zoom out, full-screen, download and next/previous page.

ViewerJS is very versatile. You can use it to view Open Document Format (ODF) files. If you have Microsoft Office formats of .ppt, .pptx (PowerPoint), .xls or .xlsx (Excel spreadsheet) files, just save as "OpenDocument Format" in your office suite to be able to use it with ViewerJS.

Having said this, you may want instead to view Ms Office files directly off your coursepage without having to first save to ODF format, or without having Ms Office suite installed on your local PC. There are at least TWO ways of doing this.

(1) Use the Google Documents Viewer - you will need a Google account for this to work.

Simply add the code prefix http://docs.google.com/viewer?url= to your <a> tag. For example you could create a Label resource and in the HTML mode, use this code:

Here is the softcopy code.


<a href="http://docs.google.com/viewer?url=http://www.cambridgekidz.org/moodle/pdfs/test.txt" target="awindow">Text file via Google Docs</a>

When you click on the link, this is what you will see:

(2) Use the Google Chrome extension plugin for viewing and editing Ms Office files

Go here and install the Chrome extension.

After you have installed the extension, you can open any Ms Office file that you link to on your course page. For example, assuming you have a Label resource with the following HTML code:

<a target="_new" href="http://www.cambridgekidz.org/moodle/pdfs/MWordTest.docx">Ms Word demo (Chrome Extension)</a>

<a target="_new" href="http://www.cambridgekidz.org/moodle/pdfs/exceldemo.xlsx">Ms Excel demo (Chrome Extension)</a>

Once you click on one of the link, this is what you will see:

So there you have it. I hope you learnt something new today.

regards
Frankie Kam

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

noreply@blogger.com (Unknown) — Tue, 05 May 2015 16:40:00 +0000

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.

Figure 3. The user has just clicked the itec2015-2.png file. Okay, so it opens nicely on-screen .
How can user download the image? Well, just right-click the mouse on the image!

How can this be useful for your classroom? Well besides using the excellent Lightbox Gallery module, you could also use the Moodle Folder resource as an image repository. When the user clicks on the image file, he or she can instantly view the image without having to download the file and then use an Image Viewer to view the image. So in my humble opinion, it's all about convenience.

How did I achieve this effect? Listen closely and I'll tell you the secret.

Firstly, edit the file /mod/folder/renderer.php as per figure 4 below:

Figure 4. insert the whole section outlined in yellow and comment off some of the original code.

Here's that code in the yellow section.

/* Added by Frankie on May 6th*/
$filename = html_writer::tag('span', $image, array('class' => 'fp-icon')).
html_writer::tag('span', $filename, array('class' => 'fp-filename'));
$filename = html_writer::tag('span',
html_writer::link_lightbox($url->out(false, array('forcedownload' => 1)), $filename),
array('class' => 'fp-filename-icon'));
} else {
$image = $this->output->pix_icon(file_file_icon($file, 24), $filename, 'moodle');
$filename = html_writer::tag('span', $image, array('class' => 'fp-icon')).
html_writer::tag('span', $filename, array('class' => 'fp-filename'));
$filename = html_writer::tag('span',
html_writer::link($url->out(false, array('forcedownload' => 0)), $filename),
array('class' => 'fp-filename-icon'));
}

It's actually the THEN and ELSE part of an IF statement.

Secondly, edit the file /lib/outputcomponents.php as per figure 5 below:

Figure 5. Insert a whole new function named link_lightbox() right after the original link() function.

Here's that code again. The yellow highlighted code adds the needed attribute of rel="lightbox" into the URL link code.

/* Added by Frankie on 6th May 2015. */
public static function link_lightbox($url, $text, array $attributes = null) {
$attributes = (array)$attributes;

$attributes['href'] = $url;
$attributes['rel'] = "lightbox";

return self::tag('a', $text, $attributes);
}

/* End Frankie hack */

In essence, what I did was to call a new function named link_lightbox() whenever the program detected that an image file was being listed on screen. The link_lightbox() function has the code that injects the rel="lightbox" hyperlink attribute into the HTML rendered code. So, that's the 'trick'.

Now your image files inside the Moodle folder resource come to life on your screen. It took me quite a while to figure this out by tinkering with the code. This Reference Guide was invaluable in getting me to understand the code:
http://xref-diff.mukudu-dev.net/moodle26/_functions/link.htmlthis.

Hope you enjoy this Moodle 2.7.2 'novelty'. If you find this useful, why not post a comment below? Thanks for reading this.

Cheers,
Frankie Kam

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

noreply@blogger.com (Unknown) — Tue, 05 May 2015 15:33:00 +0000

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.

Step 4. FTP to your Moodle site and edit the file named /moodle/htdocs/theme/yourtheme/config.php

Step 5. Add the following yellow highlighted code to the file config.php:
$THEME->sheets = array('general','lightbox');

Step 6: Create a subfolder /moodle/htdocs/theme/yourtheme/lightbox

Step 7: Upload the image files close.gif, loading.gif and overlay.png to your /moodle/htdocs/theme/yourtheme/lightbox subfolder.

Step 7: Upload the file lightbox.css to /moodle/htdocs/theme/yourtheme/css

Step 8: Edit the file /moodle/htdocs/theme/yourtheme/css/lightbox.css and add the following yellow highlighted code around lines 18 and 24:

#overlay{ background-image: url(http://www.domainname.com/moodle/theme/yourtheme/lightbox/overlay.png); }

...

* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.domainname.com/moodle/theme/yourtheme/lightbox/overlay.png", sizingMethod="scale");
}

Step 9: Store (upload transfer) the file lightbox.css to the style subfolder of your theme

Step 10: Upload the file lightbox.js to /moodle/htdocs/theme/yourtheme/javascript

Step 11: Edit the file /moodle/htdocs/theme/yourtheme/javascript/lightbox.js and add the following yellow highlighted code (around line 41 and 42):

var loadingImage = 'http://www.yourmoodlesite.com/moodle/theme/yourthemename/javascript/loading.gif';
var closeButton = ''http://www.yourmoodlesite.com/moodle/theme/yourthemename/javascript/close.gif';

Make sure you purge all caches before you start loading images. Below is the HTML code inside a Label resource.

<a rel="lightbox" href="http://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/F-16_June_2008.jpg/450px-F-16_June_2008.jpg">F16 Fighting Falcon</a>
<a rel="lightbox" href="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/F-15E_Strike_Eagle.jpg/300px-F-15E_Strike_Eagle.jpg">F15 Eagle</a>

<a rel="lightbox" href="http://images.defensetech.org/wp-content/uploads/2012/09/F-15-490x326.jpg" title="Death from the skies"><img src="http://www.cambridgekidz.org/moodle/draftfile.php/5/user/draft/268098145/F15.PNG" width="227" height="139" alt="f15" /></a> Click me

Figure 2. HTML source code of a Label resource

Figure 3. WYSIWYG view of the Label resource inside the HTML editor.

Figure 4. The Label consists of two hyperlinks and one image thumbnail.

Figure 5. The user has clicked the link "F16 Fighting Falcon"
Notice the overlay effect which highlights the foreground
pop-out imagewhile graying out the rest of the background.

Figure 5. User has clicked the "F15 Eagle" link

Figure 6. User has clicked the F15 image thumbnail. Note that the image has a title.

So there you have it. You can have fun hyper-linking images for the Lightbox effect.

Cheers
Frankie Kam

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

noreply@blogger.com (Unknown) — Fri, 01 May 2015 22:37:00 +0000

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 correct Figure 1.
The Administrator/Manager/Editing Teacher's view after a file resource
has been restricted of its access. Turn Editing is set to On.

Figure 2. The Access Restrictions. So the user can only access the resource (file)
if he or she is from the Finance Department. Make sense if the file is confidential.

In the event that the user doesn't meet the condition, the resource is totally hidden from him or her.

Figure 3. Administrator/Manager/Editing Teacher's view after a file resource
has been restricted of its access. Turn Editing is Off. See the clean whitespace area around the resource?
How very Zen-like and serene!

Figure 4. A student's (Gromit's) view of the file resource,
having MET the criteria and conditions to view the resource.
He gets to access the file because he's been a good dog.

Actually, in this case, Gromit belongs to the Finance department.
Moodle knows this because Gromit's Custom Profile Field, category, has been set to "Finance".

Figure 5. A student's (Wallace's) view of the file resource,
having MET the criteria and conditions to view the resource.
He can't access the resource because he's been pigging out on cheese secretly.Actually, in this case, Wallace does not belong to the Finance department.
Moodle knows this because Wallace Custom Profile Field, category, has been not set to "Finance".

Figure 6. What the administrator/Manager/Course Editing Teacher set as the restriction on the resource.
Here Moodle checks the user's Custom Profile Field, category, if it contains the word "Finance".
In the event that it doesn't contani the word "Finance", the resource is visible, but grayed-out to him or her.

Figure 7. What Wallace sees if the resource is grayed out because he does not
meet the Restricted Access conditions.

So which files to modify then to achieve this?

availability/classes/condition.php

Firstly, comment off the half of the return get_string(...) function.

availability/classes/availability.php

Secondly, set both array variables $string['hidden_marker']and $string['list_root_and'] to space (' ') . This 'clears' the text.

Finally, make sure you "Purge all caches" and refresh your browser's page.

Well, that's all folks! Welcome to another hack which adds more administrative burden to the Moodle Administrator because although it may help with the situation, it gives the Administrator additional details to remember before the next major Moodle version upgrade. Yup. In the meantime, have fun!

Cheers,
Frankie Kam

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

noreply@blogger.com (Unknown) — Fri, 01 May 2015 12:30:00 +0000

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.

The solution was a journey that consisted of many parts. My first problem was to simulate the layout of the question numbers. I started by sketching the solution on paper. Then I wrote a C++ program. Well, more than a couple since I had to prototype them. Thank God of for loops! Here is the first useful program I wrote and tested on Ideone.com. I divided a sequence of numbers into two columns.

However, I needed to generate the numbers as three columns, So my next attempt was this.

So the three columns were producing the numbers in the correct sequence. The programs above took a while to write. The website Ideone.com was invaluable at this stage of the development.

The solution involved modifying this function in /mod/quiz/renderer.php. No easy task.

/**

* Generates the table of summarydata
*
* @param quiz_attempt $attemptobj
* @param mod_quiz_display_options $displayoptions
*/
public function summary_table($attemptobj, $displayoptions) {
// Prepare the summary table header.
$table = new html_table();
$table->attributes['class'] = 'generaltable quizsummaryofattempt boxaligncenter';
$table->head = array(get_string('question', 'quiz'), get_string('status', 'quiz'));
$table->align = array('left', 'left');
$table->size = array('', '');
$markscolumn = $displayoptions->marks >= question_display_options::MARK_AND_MAX;
if ($markscolumn) {
   $table->head[] = get_string('marks', 'quiz');
   $table->align[] = 'left';
   $table->size[] = '';
}
$table->data = array();

// Get the summary info for each question.
$slots = $attemptobj->get_slots();
foreach ($slots as $slot) {
   if (!$attemptobj->is_real_question($slot)) {
      continue;
   }
   $flag = '';
   if ($attemptobj->is_question_flagged($slot)) {
      $flag = html_writer::empty_tag('img', array('src' => $this->pix_url('i/flagged'),
      'alt' => get_string('flagged', 'question'), 'class' => 'questionflag icon-post'));
   }
   if ($attemptobj->can_navigate_to($slot)) {
      $row = array(html_writer::link($attemptobj->attempt_url($slot),
      $attemptobj->get_question_number($slot) . $flag),
      $attemptobj->get_question_status($slot, $displayoptions->correctness));
   } else {
            $row = array($attemptobj->get_question_number($slot) . $flag,
            $attemptobj->get_question_status($slot, $displayoptions->correctness));
           }
   if ($markscolumn) {
      $row[] = $attemptobj->get_question_mark($slot);
   }
   $table->data[] = $row;
   $table->rowclasses[] = $attemptobj->get_question_state_class(
   $slot, $displayoptions->correctness);
}

// Print the summary table.
$output = html_writer::table($table);

return $output;
}

On 29th April 2015, I finally solved it. Here is the product of my labour, working with Moodle 2.7.2. I hope you enjoy it.

Download the files:
/mod/quiz/renderer.php
public_function_summary_table.php

Click here and/or here to see the comparison between the original renderer.php and the modified renderer.php.

If you find this code useful for your work, please do post a comment below. If you like this work, could I also be so bold as to ask if you could click the G+1 (Google Plus Like) button below as well? Just asking. ;-)

Regards
Frankie Kam, Malaysia

Moodle.org Forum references:
https://moodle.org/mod/forum/discuss.php?d=244735
https://moodle.org/mod/forum/discuss.php?d=312598

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

noreply@blogger.com (Unknown) — Thu, 30 Apr 2015 23:46:00 +0000

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.

My solution is best explained as a series of posts in chronological order.

From: https://moodle.org/mod/forum/discuss.php?d=261918

As above... has anybody stumbled across a plugin that provides the equivalent of the current folder functionality but allows individual items to be hidden to students?

No, sorry.

How about putting them in a different folder and hiding that from students?

From: https://moodle.org/mod/forum/discuss.php?d=279593

Hi there

When teachers create a folder in a course and add files to it, they don't have the ability to hide individual files. They can only hide the entire folder, along with all its contents. Is there a way to enable them to hide indivual files within the folder? Is there a setting in course administration or site administration, or maybe there is a plugin that can help? We're using Moodle 2.7.2+.

Thanks in advance!

Hi Frank

This question has been asked before in this post - albeit without any anwers still! I for one would love this feature to be in.

I mean, in Moodle we can set a single file resource so that a user who is set with a custom role cannot see the file.
In Moodle we can also set a Folder resource so that a user who is set with a custom role cannot see the folder.

But what I want is for all users to access a Folder resource, but some files inside the folder are hidden from one group of students, whilst the other files are visible to another group of students. I don't think this is possible in Moodle, yet. Anyone?

Regards
Frankie Kam
http://moodurian.blogspot.com

Hi Developers and coders

I am trying to solve the problem with the Folder resource. I can hide an entire folder by restricting the access based on a value in a user's custom profile field. What I cannot do is to selectively hide individual files that are contained inside the folder. See this post for the background.

So I have decided to find a hack to the Folder resource code that will selectively hide (simply not display) a file if it detects that a user's custom profile field, in my case a custom profile field named category, contains the value "Franchise".

Pseudocode:

If $user->customprofilefield named category contains "Franchise" then
do not display the file
else
display the file as normal
endif

Can anyone point me the way vis-a-vis code examples?

Regards
Frankie Kam

Hi Y'all

Haha. I got it to work! This was a toughie, but in the end, not so tough after all.

In the file /mod/folder/renderer.php, add in the boldfaced text code:

protected function htmllize_tree($tree, $dir) {
global $CFG;
//The below three lines were added by Frankie Kam on 30th April 2015
global $USER;
require_once("$CFG->dirroot/user/profile/lib.php");
profile_load_custom_fields($USER);
...

foreach ($dir['files'] as $file) {
//The below two lines were added by Frankie Kam on 30th April 2015
if((strtolower($USER->profile['category'])=="franchisee") &&
($file->get_author() == "private"))
continue;
...
}

For a fuller and clearer picture, see the below image:

What the bottom yellow-highlighted code is saying is this:

If a user who is logged into the course has a custom profile field named category that is set to "franchisee"
AND a file's author is "private"
then
that file will not show up in the Folder tree!
endif

Get it?

Now this works if you change the author of a file, inside a Moodle folder resource, to "private". Like so:

Turn Editing on and Edit the Folder resource...

and then change the Author to "private" (in this example)...

The net effect of these four actions, which are

(1) The User Custom Profile field is created - in this example, the name of the field is category
-and-
(2) The User Custom Profile field's value is set to "franchisee"
-and-
(3) A file, inside a Folder resource, has its Author attribute changed to "private"
-and-
(4) You insert the yellow-highlighted code shown above,

then you get this:

Now you see it,

now you don't!

Like in the "Chipsmore" Like in the "Chipsmore" advertisement. So ladies and gentlemen, in the absence of the Folder resource having restrictions on individual file access, this is one way how you can hide an individual file inside a Moodle Folder resource in Moodle 2.7.2.

I'll take a bow now.

Best regards
Frankie Kam, Malaysia

Would it then be a good idea to have that user profile field set somehow centrally (maybe a database interaction by the admin?) and then hide the custom field on the user profile page itself (using css?) so that the user cannot just change their category to 'anything else' and then have access to that file anyway?

Hi Richard

> user profile field set somehow centrally (maybe a database interaction by the admin?)
>Yes, that's a good idea so that the criteria is not hardcoded like now.

> so that the user cannot just change their category to 'anything else'
>
Moodle already takes care of this via the Custom Profile field settings:

The custom field can be locked if visible, otherwise it can be both locked and made invisible to the user. So no chance for the user to change it.

Regards
Frankie Kam

Thanks Frankie - its been a while since I looked at custom profile fields (I think the last time was when i implemented your additions to the online user block in something like Moodle2.3 ) So I'd missed that change in the settings! Very useful!

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

noreply@blogger.com (Unknown) — Wed, 29 Apr 2015 15:03:00 +0000

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

noreply@blogger.com (Unknown) — Wed, 22 Apr 2015 07:25:00 +0000

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.

You will need to edit the file /admin/user.php. Insert 'username', inside the code at line 162.
So that the code
array('city', 'country', 'lastaccess'));
becomes
array('username','city', 'country', 'lastaccess'));

Next, insert the code
$table->head[] = $username;
$table->colclasses[] = 'leftalign';

at around line 263, just before the code
$table->head[] = $city;

The result? This time the Username appears next to the City/Town column. Now you know.

Almost nothing is impossible with Moodle.

Cheers,
Frankie Kam, Malaysia

Postscript. 23rd April 2015. Thanks to Tim Hunt for pointing out a simpler way. I edited my config.php file and added this line: $CFG->showuseridentity = 'username,email';

I also edited the original, vanilla user.php file by commenting this line
//$table->head[] = $fullnamedisplay;
//
and adding this line of code:
$table->head[] = "Name";
like so (at line 269):

in order to achieve this effect:

Ah, satisfaction at last. Thank you, Tim!

Cheers from the Land of Nasi Lemak and Assam Laksa,
Frankie Kam

Customising Moodle2Word to generate simplified multiple choice question Ms Word pages

noreply@blogger.com (Unknown) — Sat, 18 Apr 2015 08:03:00 +0000

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.

Here is how you navigate to the quiz questions export page:

Here is the export page.

The output Ms Word contents is changed from this:

to this:

What's the effect? Now you can export a quiz that has multiple-choice-questions into a Ms word friendly version. Minimal typing and editing is needed before you can print and release to your students.

If anyone wants the modified (hacked) mqxml2word_pass1.xsl file, please E-mail me at boonsengkam [at] gmail [dot] [com]. I will only be too happy to oblige.

Regards
Frankie Kam