Moodle: PowerPoint white screen when opened in Internet Explorer

For some strange reason, when a user clicks on a PowerPoint from within Moodle that is set to "New Window" they are prompted with the Open, Save, Cancel Box.  But when they click open, PowerPoint is launched and the presentation displays an empty white screen.

I think it has something to do with the TEMP folder and the way IE references this folder.  This bug only seems to happen on campus and works fine with Firefox, Chrome etc…

As a quick fix I edited file.php in the Moodle root directory.

And changed the line:

    $forcedownload = optional_param('forcedownload', 0, PARAM_BOOL);
 

to

    $forcedownload = optional_param('forcedownload', 1, PARAM_BOOL);
 

Now all PowerPoints open fine as we have set the gloal variable to 1 which means all files are set to force download.

I hope this tip helps other users with the same issue.

Tips and tricks for a Moodle overhaul

I often receive questions from Moodlers about how to tackle a Moodle overhaul so I thought I’d share my thoughts on this with the Moodle community.

Moodle to me is a constantly evolving project, I often change things as I’m going along. Many people set out to create a finished product and as a result set their expectations too high and put too much pressure on themselves to finish the project in the allotted time.

I don’t think that any website can ever be completely finished.

Below is a list of steps you may wish to take when implementing a Moodle make-over:

Step 1: Browse the web for inspiration

Take a look at other websites, and I don’t just mean Moodle sites. When you find something you like, take a screenshot for later.

McD's

Step 2: Borrow ideas from popular websites

The designers at Facebook and Google know a thing or two about functionality and usability, so play with these sites for inspiration. Our students will expect a good immersive browsing experience as this is what they have become accustomed to.

Visit sites such as www.smashingmagazine.com to see a showcase of amazing visual websites. Some of the sites featured on here are stunning.

Again, take screengrabs and move things around in Photoshop to get a feel for your own layout.

Step 3: Finalise your basic design

Now that you are all inspired and you have drawn a few mock ups in your drawing package it’s time to build your theme. Start with a pre-made Moodle theme that is the closest in terms of layout to your final vision. There’s no point re-inventing the wheel.

Use a browser with web developer tools such as Firefox with Firebug to find which CSS classes you need to change.

JQueryStep 4: Add some funky AJAX

There are lots of AJAX frameworks out there so go take a look at the examples. I like JQuery, MooTools, YUI and Prototype. If your AJAX programming isn’t great then use the code the developers provide you with.

Step 5: Launch the theme

You may not be 100% happy with it and you may have lots of tweaking left to do, but as long as it works and it’s better than what you had, then launch it.

The rest of the design in on-going, you can always make subtle changes to the theme as you go and your audience will not even notice. Google are masters at this! After a few months of tweaking little bits here and cleaning up little things there the site has got better and better and your audience did not see it happen. Gmail now looks nothing like Gmail back in the day. When Facebook did a major theme change almost 2 years ago their users complained. Now Facebook just adds small features here and there so the process is gradual, but over time the site has evolved and transformed.

Lastly…and this is a bit controversial

Do not let non-designer people input on your theme

It’s best to go with your gut feeling too, a lot of people may not like what you do as it may be too bold for them, just keep going with your vision and then when people see the finished version they will love it. Do not let non-designer people input on your theme, a lot of people will try and influence the process by adding their ideas or by stating you need to “do this” or “include that”. Again, Facebook was an example of this, many thousands of users preferred the old design as they were familiar with it but the designers stuck to their guns and now their users don’t even remember the way it was and love how it is now.

I had to fight hard to lose the 3 column 100% Moodle approach. Several people opposed it but now they agree, in hindsight it was a great idea.

So don’t worry about changing things during term, don’t listen to those who say “our students won’t like it”, or “leave the menu now until next year as we don’t want to confuse people”. As long as the tweaks you make improve the site then go with it! After all, you have been employed to do the job, not them!

Good luck with you Moodle overhaul and I hope this blog post helps!

Enable the Moodle WYSIWYG editor on Chrome and Safari

This hack is awesome! At last, the WYSIWYG editor works for Mac Users and Google Chrome.

I can’t take any credit for this as it’s something I found on moodle.org.

Pall Thayer released the code so a big thank you to him.

The origial post can be found here but I have documented the process here and simplified the instructions below as they were a bit tricky to follow:

First we need to edit the file lib/moodlelib.lib

Find this code:

function can_use_html_editor() {
     global $USER, $CFG;
 
     if (!empty($USER->htmleditor) and !empty($CFG->htmleditor)) {
         if (check_browser_version('MSIE', 5.5)) {
             return 'MSIE';
         } else if (check_browser_version('Gecko', 20030516)) {
             return 'Gecko';
         }
     }
     return false;
 }

And replace with this code:

 function can_use_html_editor() {
     global $USER, $CFG;
 
     if (!empty($USER->htmleditor) and !empty($CFG->htmleditor)) {
         if (check_browser_version('MSIE', 5.5)) {
             return 'MSIE';
         } else if (check_browser_version('Gecko', 20030516)) {
             return 'Gecko';
         }
 else { 
 
             return 1; //Pall's Safari/Chrome editor hack
 
         } 
     }
     return false;
 }

Next we need to edit /lib/editor/htmlarea/htmlarea.php

Find this code:

HTMLArea.checkSupportedBrowser = function() {
     if (HTMLArea.is_gecko) {
         if (navigator.productSub < 20021201) {
             alert("You need at least Mozilla-1.3 Alpha.\n" +
                   "Sorry, your Gecko is not supported.");
             return false;
         }
         if (navigator.productSub < 20030210) {
             alert("Mozilla < 1.3 Beta is not supported!\n" +
                   "I'll try, though, but it might not work.");
         }
     }
     if(HTMLArea.is_safari) {
         return false;
     }
     return HTMLArea.is_gecko || HTMLArea.is_ie;
 };

Replace with this code:

HTMLArea.checkSupportedBrowser = function() { 
    if (HTMLArea.is_gecko) {
        if (navigator.productSub < 20021201) {
            alert("You need at least Mozilla-1.3 Alpha.\n" +
                  "Sorry, your Gecko is not supported.");
            return false;
        }
        if (navigator.productSub < 20030210) {
            //alert("Mozilla < 1.3 Beta is not supported!\n" +
            //      "I'll try, though, but it might not work.");
            return 'HTMLArea.is_gecko';
        }
    }
    if(HTMLArea.is_safari) {
        //return false;
        return 'HTMLArea.is_gecko';
    }
    return HTMLArea.is_gecko || HTMLArea.is_ie;
};

And that's it. We now have the Moodle WYSIWYG working in Google Chrome and Safari, which means it works on the iPhone and iPad too!

I have tested the above code on both my local Moodle installations and the Leeds City College Moodle. Our Apple Mac students will be a lot happier this year!