Mister McIntosh Says » Flickr http://mistermcintoshsays.org "Happiness lies in the joy of achievement and the thrill of creative effort." ~ Franklin D. Roosevelt Tue, 24 Jan 2012 00:27:45 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 How to Display Random Banners at the Top of a Moodle Page http://mistermcintoshsays.org/2011/05/22/how-to-display-random-banners-at-the-top-of-a-moodle-page/ http://mistermcintoshsays.org/2011/05/22/how-to-display-random-banners-at-the-top-of-a-moodle-page/#comments Mon, 23 May 2011 03:23:03 +0000 Mister McIntosh http://mistermcintoshsays.org/?p=750 It is fun to customize a Moodle page to make it “your own.” One way to do this is to put an interesting image at the top of a course page. That looks something like this:

Banner Graphic at Top of a Moodle Page

Banner Graphic at Top of a Moodle Page

I got to thinking, wouldn’t it be cool if I could show a random banner graphic each time the page loaded? Yes. Yes it would.

After snooping around the Moodle forums, searching the internet for examples of how to do it, and looking at some books, I found a way to use a relatively simple JavaScript to do the job.

A JavaScript Banner Rotator in Moodle

Here is how you do it:

(1) First you have to get yourself some graphics. Images with pixel dimensions of about 125  x 530 fit pretty well, but you’ll see a way to scale all your images to the same size is included in the JavaScript if you need it. I have included 3 banners at the end of this post you can use to try it. They were made by using creative commons images found on Flickr.

(2) Put all you banners in a folder called “Banners” or something equally descriptive and compress the folder into a zip archive.

(3) Upload the zipped Banners folder to your Moodle files repository and unzip it.

(4) On your Moodle course page, turn editing on and click on the edit link (the little paper and pencil icon) for the top section of your Moodle page. There is probably some text in that space at the moment. You can keep the text and add the images below it or you can forgo the text all together and replace it with your randomly rotating banners.

(5) When the section opens for editing, enter html editing mode by clicking on the angle bracket icon (<>) on the tool bar. With or without keeping whatever text is already there, copy and past the following code into the editing window:

<head>

<script language=”JavaScript”>

function bannerRotate()

{

var bannerArray = new Array();

/*specify the urls of the images below. Replace these fake urls by opening your Banners folder in Moodle to copy and paste the complete correct path to each image for each banner*/

bannerArray[0]=”http://moodlepath…/examplebanner1.jpg”;
bannerArray[1]=”http://moodlepath…/examplebanner2.jpg”;
bannerArray[2]=”http://moodlepath…/examplebanner3.jpg”;

/*Put in links to where you got your legally obtained banners in the following array. If you make your own banners you don’t need to do that and you can comment out the array index statements, but you must leave the new Array () creation statement intact*/

var creditLinks=new Array()

creditLinks[0]=”http://www.bannersource1.com”;
creditLinks[1]=”http://www.bannersource2.com”;
creditLinks[2]=”http://www.bannersource3.com”;

var n = Math.floor(Math.random()*bannerArray.length);

document.write(‘<a href=’+'”‘+creditLinks[n]+’”‘+’><img src=”‘+bannerArray[n]+’” border=0 height=130 width=550></a>’);

}

bannerRotate();

</script>

</head>

(6) Save your edits and return to your Moodle page. You should see the banner appear and a random one from the array will be displayed each time the page is loaded.

If all your banners are the same size and the right size to keep the page from looking all wonky you don’t need the height=130 width=550 attributes in the document.write statement. But, by using those attributes and changing them as needed, you can make any reasonably sized banners fit in the allotted space.

WARNING! When you return to the html view of that section, the code will not look the same as it did when you put it there. Moodle strips out some things and modifies the code in accordance with its own designs. It will also probably stop working if you try to edit it in any way. So, keep a clean copy of the above JavaScript (with all the correct links for your installation) in a text document somewhere and use only that document to experiment, add more images, etc. and then delete the code in Moodle and start fresh each time.

I currently run 12 rotating banners on my algebra and pre-algebra pages and they are working fine. Please let me know how it works for you. Three images for you to use are included below. I made them by using PhotoShop to crop creative commons licensed images found on flickr.com. If you use them, please credit them to the Flickr pages from whence they came (follow the image links).

examplebanner1

examplebanner2

examplebanner3

References

Anonymous, JavaScript in Easy Steps, Computer Step, Warwickshire, UK: 2003

Anonymous, “Random Image Script JavaScript“, <http://www.java-scripts.net/javascripts/Random-Image-Script.phtml>, Accessed May 20, 2011

]]> http://mistermcintoshsays.org/2011/05/22/how-to-display-random-banners-at-the-top-of-a-moodle-page/feed/ 0